:root{--cardbox-panel:392px;--cardbox-blue:#0e82d8;--cardbox-border:#dce3e8;--cardbox-text:#17222b;--cardbox-muted:#687681;--cardbox-bg:#f4f6f7}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#eef2f4;color:var(--cardbox-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
.app-shell{position:fixed;inset:var(--shared-topbar-height,47px) 0 0 0;display:grid;grid-template-columns:minmax(0,1fr) var(--cardbox-panel);min-height:0;background:#e9eef1}
.viewer-panel,.viewer-stage,#canvasHost{position:relative;min-width:0;min-height:0;width:100%;height:100%}
.viewer-panel{overflow:hidden;background:radial-gradient(circle at 50% 24%,#fff 0,#eef3f6 42%,#dfe7eb 100%)}
#canvasHost canvas{display:block;width:100%;height:100%}
.viewer-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(48,75,91,.06))}
.viewer-hint{position:absolute;left:50%;bottom:20px;z-index:2;transform:translateX(-50%);padding:8px 12px;border:1px solid rgba(21,52,68,.12);border-radius:999px;background:rgba(255,255,255,.86);box-shadow:0 8px 24px rgba(31,55,68,.08);font-size:12px;font-weight:650;color:#52616b;backdrop-filter:blur(10px);pointer-events:none;max-width:min(90%,460px);text-align:center}
.dimension-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.dimension-label{position:absolute;transform:translate(-50%,-50%);padding:3px 7px;border:1px solid rgba(3,105,171,.22);border-radius:7px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(30,57,72,.08);font-size:11px;font-weight:750;color:#096fac;white-space:nowrap}
.floating-add-box{position:absolute;left:0;top:0;z-index:5;transform:translate(-50%,-50%);width:34px;height:34px;border:1px solid #0e82d8;border-radius:50%;background:#fff;color:#0e82d8;font-size:25px;line-height:1;font-weight:600;display:grid;place-items:center;box-shadow:0 12px 26px rgba(14,130,216,.18);cursor:pointer}
.floating-add-box:hover{background:#f2f9ff;box-shadow:0 14px 30px rgba(14,130,216,.24)}
.sidebar{position:relative;width:var(--cardbox-panel);height:100%;overflow:auto;overscroll-behavior:contain;border-left:1px solid #d9e0e4;background:rgba(255,255,255,.98);padding:0 22px 108px;scrollbar-width:thin;z-index:4}
.panel-section{padding:22px 0 17px;border-bottom:1px solid #e6eaed}
.eyebrow{margin:0 0 4px;font-size:11px;line-height:1.2;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:#0d82d6}
.intro-section h1{margin:0;font-size:23px;line-height:1.2}.section-copy{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--cardbox-muted)}
.accordion-section{border-bottom:1px solid #e7ebee}.accordion-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 0;border:0;background:none;color:#1a2730;font-weight:800;cursor:pointer}.accordion-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .18s ease}.accordion-section.is-open>.accordion-toggle svg{transform:rotate(180deg)}.accordion-panel{padding:0 0 19px}
.field-label,.select-label,.color-control>span{display:block;margin:0 0 7px;font-size:12px;font-weight:750;color:#394852}.top-gap{margin-top:13px!important}
.two-column-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}.field-control{display:block}.field-control>span{display:block;margin-bottom:5px;font-size:11px;font-weight:700;color:#4d5b65}.field-control>div,.select-wrap{display:flex;align-items:center;border:1px solid var(--cardbox-border);border-radius:10px;background:#fff;overflow:hidden}.field-control input,.field-control select,.field-control textarea{width:100%;min-width:0;border:0;outline:0;padding:9px 9px;color:#1e2c34;background:transparent}.field-control em{display:inline-flex;align-items:center;justify-content:flex-end;min-width:32px;padding-right:9px;color:#87939b;font-size:11px;font-style:normal}
select{width:100%;border:1px solid var(--cardbox-border);border-radius:10px;padding:10px 34px 10px 10px;background:#fff;color:#26353e;outline:none}.field-control>div:focus-within,.select-wrap:focus-within,select:focus,.color-control>div:focus-within{border-color:#198ee0;box-shadow:0 0 0 2px rgba(25,142,224,.12)}
.info-card,.builder-card{margin-top:13px;padding:12px;border:1px solid #dde5ea;border-radius:13px;background:#f8fafb}
.info-card b,.builder-card__heading b{display:block;font-size:12px;color:#21323b}
.info-card small,.builder-card__heading small{display:block;margin-top:4px;font-size:10.5px;line-height:1.4;color:#7c8992}
.builder-card__heading{margin-bottom:10px}
.wide-action{width:100%;margin-top:10px;justify-content:center}.secondary-action{display:inline-flex;align-items:center;justify-content:center;border:1px solid #cfd9df;border-radius:10px;padding:9px 12px;background:#fff;color:#24333d;font-weight:750;font-size:12px;cursor:pointer}.secondary-action:hover{border-color:#8fc0df;background:#f6fbfe}.inline-error{margin-top:7px;color:#bd2e2e;font-size:10.5px;font-weight:650}
.selected-side-card{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:10px 11px;border:1px solid #cfe4f1;border-radius:12px;background:#f5fbff}.selected-side-card>div{display:flex;flex-direction:column;gap:2px}.selected-side-card span{font-size:11px;font-weight:700;color:#62717b}.selected-side-card strong{font-size:14px;color:#0a74b8}.side-index-badge{display:grid!important;place-items:center;min-width:28px;height:28px;padding:0 10px;border-radius:999px;background:#0e82d8!important;color:#fff!important;font-size:12px!important}
.color-control>div{display:flex;align-items:center;border:1px solid var(--cardbox-border);border-radius:10px;background:#fff;padding:5px}.color-control input[type=color]{width:33px;height:31px;padding:0;border:0;background:transparent}.color-control input[type=text]{flex:1;border:0;outline:0;padding:0 7px;font-size:12px;font-weight:700;text-transform:uppercase;color:#3c4a53}
.inline-toggle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.check-pill{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 10px;border:1px solid #d8e0e5;border-radius:999px;background:#fff;color:#43525c;font-size:11px;font-weight:700;cursor:pointer}.check-pill input{accent-color:#0e82d8}.check-pill:has(input:checked){border-color:#0e82d8;background:#f3faff;color:#0876be}
.text-action-row{display:flex;gap:8px;flex-wrap:wrap}.text-action-row .secondary-action{flex:1 1 160px}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.summary-grid>div{padding:9px;border:1px solid #e0e6ea;border-radius:10px;background:#fafbfc}.summary-grid span{display:block;font-size:9.5px;color:#7e8b93}.summary-grid strong{display:block;margin-top:2px;font-size:12px;color:#283741}.price-breakdown{margin-top:10px;display:grid;gap:5px}.price-row{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:9px;background:#f4f7f8;font-size:10.5px;color:#5d6a72}.price-row strong{color:#283741}.summary-total{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:11px 12px;border:1.5px solid #0e82d8;border-radius:11px;background:#fff}.summary-total span{font-size:11px;font-weight:800}.summary-total strong{font-size:17px;color:#0876be}.pricing-note{display:block;margin-top:6px;font-size:9.5px;line-height:1.35;color:#8a959c}
body.cardbox-dark-mode .viewer-panel{background:radial-gradient(circle at 50% 25%,#27323a,#151c21 63%,#0e1317)}body.cardbox-dark-mode .viewer-hint{background:rgba(24,31,36,.83);color:#dbe4e8;border-color:#44515a}.shared-settings-toggle{z-index:8}
@media(max-width:900px){:root{--cardbox-panel:360px}}
@media(max-width:760px){html,body{overflow:hidden}.app-shell{display:block}.viewer-panel{position:absolute;inset:0}.sidebar{position:absolute;right:0;top:0;bottom:0;width:min(92vw,380px);box-shadow:-12px 0 34px rgba(36,57,69,.14);transition:transform .22s ease}.sidebar.is-collapsed{transform:translateX(102%)}.viewer-hint{bottom:14px}.two-column-controls{grid-template-columns:1fr 1fr}.inline-toggle-grid{grid-template-columns:1fr}}
@media(max-width:430px){.sidebar{width:100vw;padding-left:17px;padding-right:17px}.two-column-controls{grid-template-columns:1fr}.text-action-row{flex-direction:column}}