*{box-sizing:border-box}
:root{
    --bg:#eef1f5;--panel:#fff;--ink:#172033;--muted:#6e788c;--line:#e1e6ee;
    --rail:#111827;--rail-soft:#1b2438;--accent:#6d4aff;--accent-dark:#5637dd;
    --accent-soft:#eeeaff;--danger:#ce3b55;--success:#168a57;
    --topbar:64px;--statusbar:52px;--rail-width:76px;--drawer-width:300px;--inspector-width:285px
}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.42}
.beta-app{width:100%;height:100%;display:grid;grid-template-columns:var(--rail-width) var(--drawer-width) minmax(0,1fr) var(--inspector-width);grid-template-rows:var(--topbar) minmax(0,1fr) var(--statusbar);grid-template-areas:"top top top top" "rail drawer workspace inspector" "rail status status status"}
.topbar{grid-area:top;position:relative;z-index:40;display:flex;align-items:center;gap:15px;min-width:0;padding:0 15px;border-bottom:1px solid var(--line);background:#fff}
.brand{min-width:250px;display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand-mark{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#8b71ff,#5b39df);color:#fff;font-size:12px;font-weight:950;box-shadow:0 8px 22px rgba(109,74,255,.25)}
.brand strong,.brand small{display:block}.brand strong{font-size:13px}.brand small{margin-top:2px;color:var(--muted);font-size:9px}
.project-name{width:min(340px,28vw);height:38px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:#f3f5f8;color:var(--ink);outline:none;text-align:center;font-weight:850}
.project-name:focus{border-color:#a08dff;background:#fff;box-shadow:0 0 0 4px rgba(109,74,255,.09)}
.history-actions{display:flex;gap:4px;padding:3px;border-radius:10px;background:#f1f3f7}
.history-actions button{width:34px;height:32px;border:0;border-radius:8px;background:transparent;color:#5e687b;font-size:17px}
.history-actions button:hover:not(:disabled){background:#fff;color:var(--accent)}
.topbar-actions{margin-left:auto;min-width:0;display:flex;align-items:center;gap:7px}
.soft-button,.primary-button,.live-link{min-height:38px;padding:0 12px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:9px;font-weight:900}
.primary-button{border-color:var(--accent);background:var(--accent);color:#fff}.live-link{color:var(--accent)}
.language-select{display:flex;align-items:center;gap:5px;min-height:38px;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:#fff}
.language-select span{font-size:12px}.language-select select{border:0;background:transparent;color:var(--ink);outline:none;font-size:9px;font-weight:850}
.module-rail{grid-area:rail;z-index:30;display:flex;flex-direction:column;gap:6px;padding:10px 8px;background:linear-gradient(180deg,#0f1631 0%,#111829 100%)}
.module-button{position:relative;min-height:70px;padding:8px 4px;display:grid;justify-items:center;align-content:center;gap:5px;border:1px solid transparent;border-radius:16px;background:transparent;color:#99a6bf;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.module-button::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:999px;background:transparent;transition:background .18s ease}
.module-button:hover{transform:translateY(-1px);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06);color:#eef2ff}
.module-button.active{background:linear-gradient(180deg,rgba(117,90,255,.24) 0%,rgba(88,57,221,.12) 100%);border-color:rgba(173,159,255,.36);color:#fff;box-shadow:0 12px 30px rgba(39,23,113,.32)}
.module-button.active::before{background:linear-gradient(180deg,#c7bbff,#7c5dff)}
.module-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.05);line-height:1;color:currentColor;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.module-icon svg{width:18px;height:18px;display:block;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.module-button:hover .module-icon{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.module-button.active .module-icon{background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px rgba(41,22,129,.24)}
.module-button small{max-width:66px;overflow:hidden;text-overflow:ellipsis;font-size:8px;font-weight:900;white-space:nowrap;letter-spacing:.02em;text-align:center}
.module-drawer{grid-area:drawer;min-width:0;overflow:hidden;border-right:1px solid var(--line);background:#fff}
.drawer-panel{display:none;width:100%;height:100%;padding:19px;overflow-y:auto}.drawer-panel.active{display:block}
.drawer-heading{margin-bottom:18px}.drawer-eyebrow{display:inline-flex;color:var(--accent);font-size:8px;font-weight:950;letter-spacing:.13em}
.drawer-heading h1{margin:6px 0;font-size:23px;line-height:1.1;letter-spacing:-.02em}.drawer-heading p{margin:0;color:var(--muted);font-size:10px;line-height:1.58}
.tool-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tool-button{min-height:78px;display:grid;place-items:center;gap:4px;padding:9px 5px;border:1px solid var(--line);border-radius:13px;background:#fff;color:#677187}
.tool-button:hover,.tool-button.active{border-color:#ad9fff;background:#f5f2ff;color:var(--accent)}.tool-button span{font-size:20px}.tool-button strong{font-size:9px;text-align:center}
.drawer-section{margin-top:17px;padding-top:16px;border-top:1px solid var(--line)}.section-title{display:block;margin-bottom:10px;color:#758095;font-size:8px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.field-grid{display:grid;gap:8px}.field-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
label{display:grid;gap:5px}label>span{color:#596478;font-size:9px;font-weight:850}
input,select{width:100%;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);outline:none}
input:focus,select:focus{border-color:#a18eff;box-shadow:0 0 0 3px rgba(109,74,255,.08)}
.unit-input{position:relative}.unit-input input{padding-right:34px}.unit-input b{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#9199aa;font-size:8px}
.unit-input.large input{height:52px;font-size:18px;font-weight:900}
.drawer-primary,.danger-button,.soft-wide-button{width:100%;min-height:42px;margin-top:10px;border-radius:10px;font-size:9px;font-weight:900}
.drawer-primary{border:0;background:var(--accent);color:#fff}.link-button{text-decoration:none;display:flex;align-items:center;justify-content:center}
.danger-button{border:1px solid #ffd1d9;background:#fff;color:var(--danger)}
.soft-wide-button{border:1px solid var(--line);background:#f6f7fa;color:#4f5a70}
.asset-list{display:grid;gap:9px}
.asset-card{min-height:76px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:11px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left}
.asset-card:hover,.asset-card.active{border-color:#ad9fff;background:#f5f2ff}.asset-card strong,.asset-card small{display:block}.asset-card strong{font-size:10px}.asset-card small{margin-top:4px;color:var(--muted);font-size:8px}
.asset-preview{width:72px;height:55px;border-radius:10px;display:block;position:relative;background:#f2f4f8}
.door-preview::before,.double-door-preview::before,.window-preview::before{content:"";position:absolute;inset:8px 15px;border:4px solid #5f6b82;border-bottom:0}
.door-preview::after{content:"";position:absolute;left:34px;bottom:8px;width:24px;height:24px;border:2px solid #7b5eff;border-left:0;border-bottom:0;border-radius:0 24px 0 0}
.double-door-preview::before{inset:8px 10px}.double-door-preview::after{content:"";position:absolute;left:35px;bottom:8px;width:2px;height:34px;background:#7b5eff}
.window-preview::before{inset:12px 9px;border:3px solid #52a7da;background:linear-gradient(90deg,transparent 48%,#52a7da 48%,#52a7da 52%,transparent 52%)}
.drawer-note{margin-top:14px;padding:12px;border-radius:11px;background:var(--accent-soft);color:#5941c8;font-size:9px;line-height:1.55;font-weight:750}
.catalog-filters{display:grid;gap:8px;margin-bottom:12px}.catalog-message{padding:25px 8px;text-align:center;color:var(--muted);font-size:10px}.catalog-list{display:grid;gap:8px}
.catalog-card{display:grid;grid-template-columns:65px minmax(0,1fr);gap:9px;min-width:0;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left}
.catalog-card:hover{border-color:#ac9dff;box-shadow:0 8px 20px rgba(27,37,60,.07)}
.catalog-card img{width:65px;height:65px;border-radius:9px;object-fit:cover;background:#f1f3f7}
.catalog-card span,.catalog-card strong,.catalog-card small{display:block}.catalog-card .category{color:var(--accent);font-size:7px;font-weight:950;text-transform:uppercase}
.catalog-card strong{margin:4px 0;font-size:10px;line-height:1.3}.catalog-card small{color:var(--muted);font-size:8px}.catalog-card .price{margin-top:5px;color:var(--ink);font-size:10px;font-weight:950}
.color-control{display:grid;gap:10px}.color-control label{grid-template-columns:minmax(0,1fr) 55px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:11px}.color-control input{height:34px;padding:3px}
.studio-buttons{display:grid;gap:8px}.studio-buttons button{min-height:41px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#5c667a;font-size:9px;font-weight:900}
.studio-buttons button.active{border-color:#ad9fff;background:var(--accent-soft);color:var(--accent)}
.switch-row{margin-top:13px;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px;border:1px solid var(--line);border-radius:11px}.switch-row input{width:18px;height:18px}
.quote-summary{display:grid;gap:9px}.quote-summary div{padding:14px;border:1px solid var(--line);border-radius:12px;background:#f8f9fb}.quote-summary span,.quote-summary strong{display:block}.quote-summary span{color:var(--muted);font-size:8px;font-weight:850}.quote-summary strong{margin-top:5px;font-size:16px}
.workspace{grid-area:workspace;position:relative;min-width:0;min-height:0;overflow:hidden;background:#edf0f5}
.workspace-view{display:none;position:absolute;inset:0}.workspace-view.active{display:block}
#plan-canvas{width:100%;height:100%;display:block;background:#f6f7f9;touch-action:none}
.canvas-toolbar{position:absolute;left:17px;top:17px;z-index:12;display:flex;gap:4px;padding:4px;border:1px solid rgba(216,222,233,.95);border-radius:11px;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(25,35,57,.1)}
.canvas-toolbar button{width:36px;height:34px;border:0;border-radius:8px;background:transparent;color:#5d687c;font-weight:900}.canvas-toolbar button:hover{background:var(--accent-soft);color:var(--accent)}
.workspace-hint{position:absolute;left:50%;bottom:18px;z-index:12;transform:translateX(-50%);max-width:80%;padding:8px 13px;border-radius:999px;background:rgba(17,24,39,.87);color:#fff;font-size:9px;font-weight:800;text-align:center;pointer-events:none}
.scale-bar{position:absolute;right:18px;bottom:18px;z-index:10;display:flex;align-items:center;gap:7px;color:#737d90}.scale-bar span{width:75px;height:8px;border-left:2px solid #737d90;border-right:2px solid #737d90;border-bottom:2px solid #737d90}.scale-bar small{font-size:8px;font-weight:850}
#scene-container{position:absolute;inset:0}#scene-container canvas{width:100%;height:100%;display:block;touch-action:none}
.scene-loading{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:10px;background:#edf0f5;color:#687286}.scene-loading.hidden{display:none}
.spinner{width:27px;height:27px;border:3px solid #d6dce6;border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.rotation-handle{position:absolute;z-index:25;min-height:39px;padding:0 11px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:999px;background:linear-gradient(135deg,#8064ff,#5736dd);color:#fff;box-shadow:0 10px 27px rgba(75,48,194,.36);font-size:15px;font-weight:900;touch-action:none}
.rotation-handle[hidden]{display:none}.rotation-handle span{font-size:8px}
.inspector{grid-area:inspector;min-width:0;padding:18px;overflow-y:auto;border-left:1px solid var(--line);background:#fff}
.inspector-heading{padding-bottom:15px;border-bottom:1px solid var(--line)}.inspector-heading h2{margin:6px 0 0;font-size:20px}
.inspector-empty{padding:42px 8px;text-align:center}.inspector-empty>span{width:58px;height:58px;margin:0 auto 15px;display:grid;place-items:center;border-radius:18px;background:var(--accent-soft);color:var(--accent);font-size:23px}
.inspector-empty p{margin:0;color:var(--muted);font-size:10px;line-height:1.62}
.selection-type{display:inline-flex;margin-top:17px;padding:6px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:8px;font-weight:950}
.inspector-content h3{margin:10px 0 0;font-size:17px;line-height:1.35}.inspector-fields{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}.product-actions{display:grid;gap:7px;margin-top:15px}
.statusbar{grid-area:status;z-index:30;display:flex;align-items:center;gap:15px;padding:0 15px;border-top:1px solid var(--line);background:#fff}
.view-switch{display:flex;gap:3px;padding:3px;border-radius:10px;background:#f1f3f7}.view-switch button{min-height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#6a7487;font-size:8px;font-weight:900}
.view-switch button.active{background:#fff;color:var(--accent);box-shadow:0 3px 10px rgba(24,33,53,.08)}
#save-status{color:var(--muted);font-size:8px;font-weight:800}.project-summary{margin-left:auto;display:flex;gap:13px;color:#586276;font-size:9px;font-weight:850}
.dialog{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px}.dialog[hidden]{display:none}
.dialog-backdrop{position:absolute;inset:0;background:rgba(8,13,25,.68);backdrop-filter:blur(6px)}
.dialog-card{position:relative;z-index:1;width:min(390px,100%);padding:25px;border-radius:20px;background:#fff;box-shadow:0 25px 80px rgba(4,9,20,.34)}
.dialog-card h2{margin:8px 0;font-size:24px}.dialog-card p{margin:0 0 18px;color:var(--muted);font-size:10px;line-height:1.55}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.toast{position:fixed;right:18px;bottom:69px;z-index:300;max-width:340px;padding:12px 15px;border-radius:11px;background:#172033;color:#fff;font-size:9px;font-weight:850;box-shadow:0 14px 34px rgba(6,11,22,.27);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#a92d45}.toast.success{background:#147b4d}
.mobile-sheet-close,
.mobile-sheet-backdrop,
.mobile-properties-button{
    display:none
}

@media(max-width:1100px){
    :root{
        --drawer-width:270px;
        --inspector-width:250px
    }
    .brand{
        min-width:205px
    }
    .brand small,
    .live-link{
        display:none
    }
    .project-name{
        width:220px
    }
    .field-grid.three{
        grid-template-columns:1fr
    }
}

@media(max-width:850px){
    :root{
        --topbar:56px;
        --statusbar:42px;
        --rail-width:0px;
        --drawer-width:0px;
        --inspector-width:0px
    }

    html,
    body,
    .beta-app{
        width:100%;
        height:100%;
        height:100dvh
    }

    .beta-app{
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:var(--topbar) minmax(0,1fr) var(--statusbar);
        grid-template-areas:
            "top"
            "workspace"
            "status"
    }

    .topbar{
        padding:0 10px;
        gap:8px
    }

    .brand{
        min-width:auto
    }

    .brand-mark{
        width:36px;
        height:36px;
        border-radius:11px
    }

    .brand>span:last-child{
        display:none
    }

    .project-name{
        flex:1;
        width:auto;
        min-width:0;
        height:36px;
        text-align:left
    }

    .history-actions{
        display:none
    }

    .topbar-actions{
        margin-left:0;
        gap:5px
    }

    .topbar-actions .soft-button,
    .topbar-actions .live-link{
        display:none
    }

    .topbar-actions .primary-button{
        min-height:36px;
        padding:0 9px;
        white-space:nowrap
    }

    .language-select{
        min-height:36px;
        padding:0 6px
    }

    .language-select span{
        display:none
    }

    .language-select select{
        width:54px;
        padding:0 4px
    }

    .workspace{
        grid-area:workspace;
        width:100%;
        height:100%;
        min-width:0;
        min-height:0
    }

    .workspace-hint{
        bottom:78px;
        max-width:calc(100% - 32px);
        white-space:normal
    }

    .scale-bar{
        right:12px;
        bottom:77px
    }

    .canvas-toolbar{
        left:10px;
        top:10px
    }

    .module-rail{
        position:fixed;
        left:8px;
        right:8px;
        bottom:calc(var(--statusbar) + 7px);
        z-index:85;
        width:auto;
        height:58px;
        padding:5px;
        display:flex;
        flex-direction:row;
        align-items:stretch;
        gap:3px;
        overflow-x:auto;
        overflow-y:hidden;
        border:1px solid rgba(255,255,255,.08);
        border-radius:16px;
        background:rgba(17,24,39,.94);
        box-shadow:0 14px 35px rgba(6,11,22,.25);
        backdrop-filter:blur(14px);
        scrollbar-width:none
    }

    .module-rail::-webkit-scrollbar{
        display:none
    }

    .module-button{
        flex:1 0 52px;
        min-width:52px;
        min-height:48px;
        padding:4px 3px;
        border-radius:11px
    }

    .module-icon{
        width:30px;
        height:30px
    }

    .module-icon svg{
        width:16px;
        height:16px
    }

    .module-button small{
        max-width:58px;
        font-size:7px
    }

    .module-drawer{
        position:fixed;
        left:8px;
        right:8px;
        bottom:calc(var(--statusbar) + 72px);
        z-index:100;
        width:auto;
        height:auto;
        max-height:min(62dvh,580px);
        overflow:hidden;
        border:1px solid rgba(215,221,231,.96);
        border-radius:20px;
        background:#fff;
        box-shadow:0 24px 70px rgba(8,14,28,.28);
        transform:translateY(calc(100% + 95px));
        opacity:0;
        pointer-events:none;
        transition:
            transform .24s ease,
            opacity .2s ease
    }

    .module-drawer.mobile-open{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto
    }

    .drawer-panel{
        max-height:min(62dvh,580px);
        padding:20px 18px 25px;
        overscroll-behavior:contain
    }

    .mobile-sheet-close{
        position:absolute;
        right:10px;
        top:10px;
        z-index:8;
        width:34px;
        height:34px;
        padding:0;
        display:grid;
        place-items:center;
        border:1px solid var(--line);
        border-radius:10px;
        background:#fff;
        color:#5b667a;
        font-size:21px;
        line-height:1;
        box-shadow:0 5px 15px rgba(20,30,52,.08)
    }

    .drawer-heading{
        padding-right:37px
    }

    .mobile-sheet-backdrop{
        position:fixed;
        inset:var(--topbar) 0 var(--statusbar);
        z-index:75;
        display:block;
        border:0;
        background:rgba(8,13,25,.42);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
        backdrop-filter:blur(2px)
    }

    .mobile-sheet-backdrop.show{
        opacity:1;
        pointer-events:auto
    }

    .catalog-list{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .catalog-card{
        grid-template-columns:54px minmax(0,1fr);
        gap:7px
    }

    .catalog-card img{
        width:54px;
        height:54px
    }

    .inspector{
        position:fixed;
        left:8px;
        right:8px;
        bottom:calc(var(--statusbar) + 72px);
        z-index:105;
        display:block;
        width:auto;
        max-height:min(62dvh,580px);
        padding:20px 18px 25px;
        overflow-y:auto;
        border:1px solid rgba(215,221,231,.96);
        border-radius:20px;
        background:#fff;
        box-shadow:0 24px 70px rgba(8,14,28,.3);
        transform:translateY(calc(100% + 95px));
        opacity:0;
        pointer-events:none;
        transition:
            transform .24s ease,
            opacity .2s ease;
        overscroll-behavior:contain
    }

    .inspector.mobile-open{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto
    }

    .inspector-close{
        position:sticky;
        float:right;
        margin:-10px -8px 0 8px
    }

    .mobile-properties-button{
        position:absolute;
        right:10px;
        top:10px;
        z-index:32;
        min-height:40px;
        padding:0 12px;
        display:flex;
        align-items:center;
        gap:7px;
        border:1px solid rgba(255,255,255,.8);
        border-radius:12px;
        background:linear-gradient(135deg,#8064ff,#5736dd);
        color:#fff;
        box-shadow:0 10px 28px rgba(77,48,197,.31);
        font-size:9px
    }

    .mobile-properties-button[hidden]{
        display:none
    }

    .mobile-properties-button span{
        font-size:16px
    }

    .mobile-properties-button strong{
        font-size:9px
    }

    .statusbar{
        grid-area:status;
        min-width:0;
        padding:0 8px;
        gap:7px
    }

    .view-switch{
        flex:0 0 auto
    }

    .view-switch button{
        min-height:30px;
        padding:0 8px
    }

    #save-status{
        display:none
    }

    .project-summary{
        min-width:0;
        margin-left:auto;
        gap:7px;
        font-size:8px;
        overflow:hidden
    }

    .project-summary span{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }

    .rotation-handle{
        z-index:55
    }

    .toast{
        right:10px;
        left:10px;
        bottom:calc(var(--statusbar) + 76px);
        max-width:none;
        text-align:center
    }

    .dialog{
        padding:12px
    }

    .dialog-card{
        width:min(390px,100%);
        padding:21px
    }
}

@media(max-width:520px){
    .catalog-list{
        grid-template-columns:1fr
    }

    .catalog-card{
        grid-template-columns:62px minmax(0,1fr)
    }

    .catalog-card img{
        width:62px;
        height:62px
    }

    .language-select{
        display:none
    }

    .topbar-actions .primary-button{
        max-width:92px;
        overflow:hidden;
        text-overflow:ellipsis
    }

    .project-name{
        font-size:10px
    }

    .drawer-panel,
    .inspector{
        padding-left:15px;
        padding-right:15px
    }

    .field-grid.three{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

@media(max-width:850px) and (orientation:landscape){
    .module-rail{
        left:7px;
        right:auto;
        top:calc(var(--topbar) + 7px);
        bottom:calc(var(--statusbar) + 7px);
        width:58px;
        height:auto;
        flex-direction:column
    }

    .module-button{
        flex:1 0 46px;
        min-width:46px;
        min-height:46px;
        padding:5px 3px;
        border-radius:13px
    }

    .module-button small{
        display:none
    }

    .module-drawer,
    .inspector{
        left:72px;
        right:auto;
        top:calc(var(--topbar) + 7px);
        bottom:calc(var(--statusbar) + 7px);
        width:min(360px,52vw);
        max-height:none;
        transform:translateX(calc(-100% - 90px))
    }

    .module-drawer.mobile-open,
    .inspector.mobile-open{
        transform:translateX(0)
    }

    .drawer-panel{
        max-height:calc(100dvh - var(--topbar) - var(--statusbar) - 14px)
    }

    .workspace-hint,
    .scale-bar{
        bottom:12px
    }

    .toast{
        left:74px;
        bottom:calc(var(--statusbar) + 10px)
    }
}


/* Beta v1.3 — realistic preview */
.material-preset-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
}
.material-preset{
    min-height:74px;
    padding:8px;
    display:grid;
    gap:7px;
    justify-items:start;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:#596478
}
.material-preset:hover,
.material-preset.active{
    border-color:#ad9fff;
    background:#f5f2ff;
    color:var(--accent)
}
.material-preset strong{
    font-size:8px
}
.preset-swatch{
    width:100%;
    height:35px;
    display:block;
    border-radius:8px;
    border:1px solid rgba(31,41,55,.09);
    overflow:hidden
}
.solid-swatch{
    background:#d7d2c8
}
.wood-swatch{
    background:
        repeating-linear-gradient(
            90deg,
            #a97643 0 8px,
            #bc8954 8px 16px,
            #8f6039 16px 19px,
            #c0915d 19px 30px
        )
}
.tile-swatch{
    background:
        linear-gradient(#c8c9c6 1px,transparent 1px),
        linear-gradient(90deg,#c8c9c6 1px,transparent 1px),
        #ecebe6;
    background-size:14px 14px
}
.concrete-swatch{
    background:
        radial-gradient(circle at 18% 25%,rgba(255,255,255,.55) 0 1px,transparent 2px),
        radial-gradient(circle at 65% 70%,rgba(35,42,48,.18) 0 1px,transparent 2px),
        #a7aaa8;
    background-size:11px 11px,15px 15px
}
.realistic-switch>span{
    display:block
}
.realistic-switch strong,
.realistic-switch small{
    display:block
}
.realistic-switch strong{
    color:#4d586d;
    font-size:9px
}
.realistic-switch small{
    margin-top:3px;
    color:var(--muted);
    font-size:8px;
    line-height:1.4
}
.render-button{
    width:100%;
    min-height:57px;
    margin-top:15px;
    padding:10px 12px;
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:9px;
    align-items:center;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#7c61ff,#5634d8);
    color:#fff;
    text-align:left;
    box-shadow:0 12px 25px rgba(86,52,216,.22)
}
.render-button>span:first-child{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(255,255,255,.15);
    font-size:17px
}
.render-button strong,
.render-button small{
    display:block
}
.render-button strong{
    font-size:9px
}
.render-button small{
    margin-top:3px;
    color:rgba(255,255,255,.75);
    font-size:8px
}
.render-button:disabled{
    opacity:.58
}
.scene-rendering::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:80;
    background:rgba(15,23,42,.28);
    pointer-events:none
}
@media(max-width:520px){
    .material-preset-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}


/* Beta v1.3.5 — stronger room contrast */
.workspace{
    background:#cfd7e2;
}

#scene-container{
    background:
        radial-gradient(circle at 50% 20%, #e4ebf3 0%, #d4dde8 42%, #bcc8d6 100%);
}


/* Beta v1.3.7 — safe camera toolbar (created by JS) */
.safe-camera-toolbar{
    position:absolute;
    left:15px;
    top:15px;
    z-index:30;
    display:flex;
    gap:5px;
    padding:5px;
    border:1px solid rgba(205,214,226,.96);
    border-radius:13px;
    background:rgba(255,255,255,.95);
    box-shadow:0 10px 28px rgba(23,34,55,.14);
    backdrop-filter:blur(8px);
}
.safe-camera-toolbar button{
    min-height:41px;
    min-width:84px;
    padding:6px 9px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#5d687b;
}
.safe-camera-toolbar button span{font-size:15px;line-height:1}
.safe-camera-toolbar button strong{font-size:8px;white-space:nowrap}
.safe-camera-toolbar button:hover,
.safe-camera-toolbar button.active{background:var(--accent-soft);color:var(--accent)}
.safe-camera-toolbar button.active{box-shadow:inset 0 0 0 1px rgba(109,74,255,.2)}
.safe-camera-hint{
    position:absolute;
    left:50%;
    bottom:18px;
    z-index:29;
    transform:translateX(-50%);
    max-width:min(760px,82%);
    padding:8px 13px;
    border-radius:999px;
    background:rgba(17,24,39,.87);
    color:#fff;
    font-size:9px;
    font-weight:800;
    text-align:center;
    pointer-events:none;
}
.safe-walk-pad{
    position:absolute;
    right:22px;
    bottom:22px;
    z-index:31;
    width:126px;
    height:126px;
    display:none;
    grid-template-columns:repeat(3,42px);
    grid-template-rows:repeat(3,42px);
    padding:4px;
    border-radius:18px;
    background:rgba(17,24,39,.72);
    box-shadow:0 14px 34px rgba(17,24,39,.25);
    backdrop-filter:blur(7px);
    touch-action:none;
}
.safe-walk-pad.active{display:grid}
.safe-walk-pad button{
    width:38px;
    height:38px;
    margin:2px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:11px;
    background:rgba(255,255,255,.13);
    color:#fff;
    font-size:16px;
    font-weight:900;
    touch-action:none;
}
.safe-walk-pad button:active{background:#6d4aff}
.walk-forward{grid-column:2;grid-row:1}
.walk-left{grid-column:1;grid-row:2}
.walk-back{grid-column:2;grid-row:3}
.walk-right{grid-column:3;grid-row:2}
@media(max-width:850px){
    .safe-camera-toolbar{
        left:9px;
        right:9px;
        top:9px;
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        justify-content:center
    }
    .safe-camera-toolbar button{min-width:0;padding:5px 3px;gap:4px}
    .safe-camera-toolbar button strong{font-size:7px}
    .safe-camera-hint{bottom:84px;font-size:8px;max-width:88%}
    .safe-walk-pad{right:12px;bottom:12px;transform:scale(.88);transform-origin:right bottom}
}
@media(max-width:520px){
    .safe-camera-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
    .safe-camera-hint{bottom:118px}
}


/* Beta v1.3.9 — clearer plan creation flow */
.plan-start-methods{
    display:grid;
    gap:10px;
}
.plan-method-card{
    width:100%;
    min-height:82px;
    padding:12px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 18px;
    gap:10px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    color:#4b5568;
    text-align:left;
    box-shadow:0 7px 20px rgba(28,39,61,.04);
}
.plan-method-card:hover{
    border-color:#a999ff;
    background:#f8f6ff;
    color:var(--accent);
    transform:translateY(-1px);
}
.plan-method-card>span:nth-child(2){
    min-width:0;
}
.plan-method-card strong,
.plan-method-card small{
    display:block;
}
.plan-method-card strong{
    font-size:10px;
}
.plan-method-card small{
    margin-top:5px;
    color:var(--muted);
    font-size:8px;
    line-height:1.45;
}
.plan-method-card>b{
    font-size:20px;
    color:#9aa3b3;
}
.plan-method-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:20px;
}
.section-heading-row,
.manual-tools-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:9px;
}
.inline-back-button{
    min-height:29px;
    padding:0 8px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:#687286;
    font-size:8px;
    font-weight:800;
}
.inline-back-button:hover{
    border-color:#a999ff;
    color:var(--accent);
}
.section-description{
    margin:0 0 12px;
    color:var(--muted);
    font-size:8px;
    line-height:1.55;
}
.manual-tools-section{
    display:grid;
    gap:0;
}
.plan-progress-actions{
    margin:4px 0 14px;
    padding:12px;
    border:1px solid #ddd7ff;
    border-radius:13px;
    background:#f7f5ff;
}
.plan-progress-actions p{
    margin:0 0 10px;
    color:#655d7c;
    font-size:8px;
    font-weight:700;
    line-height:1.5;
}
.continue-design-button{
    width:100%;
    min-height:48px;
    padding:8px 11px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:9px;
    align-items:center;
    border:0;
    border-radius:11px;
    background:#d9dce4;
    color:#777f8e;
    text-align:left;
}
.continue-design-button>span{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(255,255,255,.65);
    font-size:10px;
    font-weight:900;
}
.continue-design-button strong{
    font-size:9px;
}
.continue-design-button.ready{
    background:linear-gradient(135deg,#7b60ff,#5837dd);
    color:#fff;
    box-shadow:0 11px 24px rgba(88,55,221,.23);
}
.continue-design-button.ready>span{
    background:rgba(255,255,255,.16);
}
.continue-design-button:disabled{
    cursor:not-allowed;
}
.ready-store-section .drawer-primary{
    margin-top:10px;
}


/* Beta v1.4.0 — guided Plan > Openings > Products flow */
.opening-next-action{
    margin-top:14px;
    padding:12px;
    border:1px solid #ddd7ff;
    border-radius:13px;
    background:#f7f5ff;
}
.opening-next-action p{
    margin:0 0 10px;
    color:#655d7c;
    font-size:8px;
    font-weight:700;
    line-height:1.5;
}
.opening-next-action .continue-design-button{
    margin:0;
}


/* Beta v1.4.1 — 2D select and move guidance */
.move-tool-note{
    display:flex;
    gap:9px;
    align-items:flex-start;
    margin:10px 0 2px;
    padding:10px;
    border:1px solid #ddd7ff;
    border-radius:12px;
    background:#f7f5ff;
}
.move-tool-note > span{
    flex:0 0 26px;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#6d4aff;
    color:#fff;
    font-size:13px;
    font-weight:900;
}
.move-tool-note p{
    margin:0;
    color:#625a78;
    font-size:8px;
    font-weight:700;
    line-height:1.55;
}
#plan-canvas.is-dragging{
    cursor:grabbing!important;
}

.opening-move-button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 0 10px;
    padding:10px 12px;
    border:1px solid #d9d2ff;
    border-radius:11px;
    background:#f7f5ff;
    color:#6546e8;
}
.opening-move-button span{
    font-size:14px;
    font-weight:900;
}
.opening-move-button strong{
    font-size:8px;
}
.opening-move-button:hover{
    border-color:#6d4aff;
    background:#eeeaff;
}


/* Beta v1.4.2 — realistic door/window inspector */
#opening-fields label[hidden]{display:none!important}
#opening-fields select{margin-top:6px}
#door-angle-field{margin-bottom:10px}
.opening-angle-note{display:block;margin-top:5px;color:#98a0af;font-size:7px;font-weight:750;line-height:1.4}


/* Beta v1.4.5 — advanced floor and wall finishes */
.material-scale-control{
    margin-top:10px;
    display:grid;
    gap:6px;
}
.material-scale-control>span{
    font-size:8px;
    font-weight:800;
    color:#596478;
}
.material-scale-control select{
    width:100%;
    min-height:40px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:#26324a;
    font:700 9px Inter,system-ui,sans-serif;
}
.light-wood-swatch{
    background:
        repeating-linear-gradient(90deg,#cda06e 0 12px,#b98450 12px 24px,#d6ae7d 24px 35px,#9f6f44 35px 38px);
}
.dark-wood-swatch{
    background:
        repeating-linear-gradient(90deg,#503428 0 12px,#6c4832 12px 24px,#432b22 24px 34px,#80583c 34px 38px);
}
.light-tile-swatch{
    background:
        linear-gradient(#aca9a1 2px,transparent 2px),
        linear-gradient(90deg,#aca9a1 2px,transparent 2px),
        linear-gradient(135deg,#ece9e2,#d9d6cf);
    background-size:18px 18px;
}
.dark-tile-swatch{
    background:
        linear-gradient(#24292c 2px,transparent 2px),
        linear-gradient(90deg,#24292c 2px,transparent 2px),
        linear-gradient(135deg,#62676a,#454a4d);
    background-size:18px 18px;
}
.marble-swatch{
    background:
        linear-gradient(120deg,transparent 0 34%,rgba(98,105,114,.35) 35%,transparent 37%),
        linear-gradient(145deg,transparent 0 58%,rgba(129,135,143,.24) 59%,transparent 61%),
        #e8e5df;
}
.vinyl-swatch{
    background:
        repeating-linear-gradient(90deg,#a59a86 0 13px,#8c8373 13px 25px,#b4a78f 25px 37px,#70685c 37px 39px);
}
.wall-paint-swatch{
    background:linear-gradient(135deg,#f4f3ef,#d9d7d0);
}
.wall-concrete-swatch{
    background:
        radial-gradient(circle at 18% 25%,rgba(255,255,255,.5) 0 1px,transparent 2px),
        radial-gradient(circle at 65% 70%,rgba(35,42,48,.18) 0 1px,transparent 2px),
        #a8acab;
    background-size:11px 11px,15px 15px;
}
.wall-brick-swatch{
    background:
        linear-gradient(#bab6ae 2px,transparent 2px),
        linear-gradient(90deg,#bab6ae 2px,transparent 2px),
        #eeeae2;
    background-size:24px 12px;
}
.wall-slat-swatch{
    background:
        repeating-linear-gradient(90deg,#76533a 0 8px,#2a211c 8px 11px,#986c48 11px 19px,#2a211c 19px 22px);
}


/* Beta v1.4.6 — clearer internal partitions and interior doors */
.selection-panel input:focus{
    border-color:rgba(109,74,255,.55);
    box-shadow:0 0 0 3px rgba(109,74,255,.08);
}


/* Beta v1.5.0 — fullscreen presentation / showroom mode */
body.presentation-mode{
    overflow:hidden;
}

#scene-container.presentation-active{
    background:
        radial-gradient(circle at 50% 16%, #e8eef5 0%, #d6e0ea 43%, #bcc9d7 100%);
}

#scene-container:fullscreen,
#scene-container:-webkit-full-screen,
#scene-container.presentation-fallback{
    width:100vw !important;
    height:100vh !important;
    min-width:100vw !important;
    min-height:100vh !important;
    margin:0 !important;
    background:
        radial-gradient(circle at 50% 16%, #e8eef5 0%, #d6e0ea 43%, #bcc9d7 100%);
}

#scene-container.presentation-fallback{
    position:fixed !important;
    inset:0 !important;
    z-index:9999 !important;
}

#scene-container.presentation-active .safe-camera-toolbar{
    left:50%;
    right:auto;
    top:18px;
    transform:translateX(-50%);
    gap:6px;
    padding:6px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;
    background:rgba(12,18,31,.80);
    box-shadow:0 16px 42px rgba(4,8,18,.28);
    backdrop-filter:blur(14px);
}

#scene-container.presentation-active .safe-camera-toolbar button{
    color:#e9eef8;
}

#scene-container.presentation-active .safe-camera-toolbar button:hover{
    background:rgba(255,255,255,.10);
    color:#fff;
}

#scene-container.presentation-active .safe-camera-toolbar button.active{
    background:linear-gradient(145deg,#7657ff,#5b3cdd);
    color:#fff;
    box-shadow:0 8px 18px rgba(71,45,184,.33);
}

#scene-container.presentation-active .safe-camera-hint{
    bottom:22px;
    max-width:min(760px,86%);
    background:rgba(12,18,31,.72);
    box-shadow:0 8px 24px rgba(4,8,18,.16);
}

#scene-container.presentation-active canvas{
    cursor:grab;
}

#scene-container.presentation-active .safe-walk-pad.active{
    display:grid;
}

@media(max-width:850px){
    #scene-container.presentation-active .safe-camera-toolbar{
        left:9px;
        right:9px;
        top:9px;
        transform:none;
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    #scene-container.presentation-active .safe-camera-hint{
        bottom:20px;
    }
}

@media(max-width:520px){
    #scene-container.presentation-active .safe-camera-toolbar{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    #scene-container.presentation-active .safe-camera-hint{
        bottom:86px;
    }
}


/* Beta v1.5.1 — fullscreen editing remains available */
#scene-container.presentation-active .rotation-handle{
    z-index:45;
    box-shadow:0 12px 32px rgba(67,43,180,.42);
}

#scene-container.presentation-active .safe-camera-toolbar [data-camera-action="product"].active{
    background:linear-gradient(145deg,#7657ff,#5b3cdd);
    color:#fff;
}


/* Beta v1.6.0 — ready store design templates */
.template-admin-button{
    min-height:38px;
    padding:0 13px;
    border:1px solid #d8d0ff;
    border-radius:10px;
    background:#f3f0ff;
    color:#6547e8;
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}
.template-admin-button:hover{background:#e9e4ff}
.template-method-card{border-color:#d8d0ff;background:linear-gradient(135deg,#fbfaff,#f3f0ff)}
.template-method-card .plan-method-icon{background:#eae5ff;color:#6547e8}
.template-gallery-section{display:grid;gap:12px}
.template-gallery-message{padding:18px 10px;color:#788397;font-size:9px;font-weight:800;text-align:center}
.template-gallery{display:grid;gap:11px}
.template-card{overflow:hidden;border:1px solid #dfe4ec;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(25,35,57,.06)}
.template-card-cover{height:132px;display:grid;place-items:center;background:#e8edf3 center/cover no-repeat;color:#7657ff;font-size:22px;font-weight:950}
.template-card-body{padding:12px;display:grid;gap:6px}
.template-card-body>small{color:#7254ed;font-size:7px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.template-card-body>strong{font-size:13px;line-height:1.25;color:#172033}
.template-card-body>p{margin:0;color:#778194;font-size:8px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.template-card-meta{display:flex;gap:8px;flex-wrap:wrap;color:#687286;font-size:7px;font-weight:850}
.template-card-meta span{padding:5px 7px;border-radius:999px;background:#f4f6f9}
.template-use-button{margin-top:3px;min-height:38px;border:0;border-radius:10px;background:linear-gradient(135deg,#7657ff,#5c3ddd);color:#fff;font-size:8px;font-weight:950;cursor:pointer}
.template-save-card{width:min(460px,100%)}
.template-dialog-field{display:grid;gap:6px;margin-top:10px;color:#596478;font-size:8px;font-weight:900}
.template-dialog-field input,.template-dialog-field textarea{width:100%;border:1px solid #dbe1ea;border-radius:10px;background:#fff;padding:10px 11px;color:#172033;font:700 10px Inter,system-ui,sans-serif;outline:0}
.template-dialog-field input:focus,.template-dialog-field textarea:focus{border-color:#9b87ff;box-shadow:0 0 0 3px rgba(109,74,255,.09)}
.template-dialog-field small{color:#8a94a6;font-size:7px;line-height:1.45;font-weight:700}
@media(max-width:1100px){.template-admin-button{display:none}}


/* Beta v1.6.2 — safe professional styling for ready-design gallery.
   JavaScript/template workflow remains exactly as in the working v1.6.0. */

.template-gallery-section{
    gap:14px;
}

.template-gallery{
    display:grid;
    gap:14px;
}

.template-card{
    overflow:hidden;
    border:1px solid #dfe4ec;
    border-radius:17px;
    background:#fff;
    box-shadow:0 10px 28px rgba(25,35,57,.08);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.template-card:hover{
    transform:translateY(-2px);
    border-color:#cfc6ff;
    box-shadow:0 16px 34px rgba(33,37,74,.13);
}

.template-card-cover{
    position:relative;
    height:170px;
    overflow:hidden;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 50% 12%,#eef2f8 0%,#dfe5ed 62%,#d0d7e1 100%)
        center/cover no-repeat;
    color:#6d4aff;
}

.template-card-cover::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(14,22,38,.02) 0%,
        rgba(14,22,38,0) 58%,
        rgba(14,22,38,.22) 100%
    );
    pointer-events:none;
}

.template-card-cover>span{
    position:relative;
    z-index:1;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(255,255,255,.80);
    box-shadow:0 10px 26px rgba(36,43,70,.13);
    font-size:17px;
    font-weight:950;
}

.template-card-body{
    padding:14px;
    display:grid;
    gap:8px;
}

.template-card-body>small{
    width:max-content;
    max-width:100%;
    padding:5px 8px;
    overflow:hidden;
    border-radius:999px;
    background:#eeebff;
    color:#6046d6;
    font-size:7px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.05em;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.template-card-body>strong{
    color:#172033;
    font-size:14px;
    line-height:1.3;
}

.template-card-body>p{
    margin:0;
    color:#7a8496;
    font-size:8px;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.template-card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding-top:2px;
}

.template-card-meta span{
    min-height:27px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    border:1px solid #e7eaf0;
    border-radius:8px;
    background:#f8f9fb;
    color:#657084;
    font-size:7px;
    font-weight:850;
}

.template-use-button{
    margin-top:3px;
    min-height:43px;
    padding:0 13px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg,#7657ff,#5737dc);
    color:#fff;
    box-shadow:0 9px 20px rgba(82,55,200,.20);
    font-size:8px;
    font-weight:950;
    cursor:pointer;
    transition:transform .16s ease,box-shadow .16s ease;
}

.template-use-button:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(82,55,200,.28);
}

.template-gallery-message{
    padding:20px 12px;
    border:1px dashed #d9dee8;
    border-radius:13px;
    background:#fafbfc;
    color:#838da0;
    font-size:8px;
    font-weight:800;
    text-align:center;
}

@media(max-width:850px){
    .template-card-cover{
        height:190px;
    }

    .template-card-body{
        padding:15px;
    }
}


/* Beta v1.6.3 — New Design command */
.new-design-button{
    min-height:38px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #dfe3eb;
    border-radius:10px;
    background:#fff;
    color:#596478;
    box-shadow:0 3px 10px rgba(24,33,53,.04);
    font:inherit;
    cursor:pointer;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}

.new-design-button>span{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:#eeebff;
    color:#6849e6;
    font-size:14px;
    line-height:1;
    font-weight:700;
}

.new-design-button>strong{
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}

.new-design-button:hover{
    transform:translateY(-1px);
    border-color:#bfb3ff;
    background:#faf9ff;
    color:#6547e8;
}

@media(max-width:1100px){
    .new-design-button{
        padding:0 8px;
    }

    .new-design-button>strong{
        display:none;
    }

    .new-design-button>span{
        width:22px;
        height:22px;
    }
}

@media(max-width:850px){
    .new-design-button{
        min-width:36px;
        min-height:36px;
        padding:0 6px;
        border-radius:9px;
    }
}


/* Beta v1.6.4 — ready-design admin management link */
.template-manage-button{
    min-height:38px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ddd7ff;
    border-radius:10px;
    background:#f7f5ff;
    color:#6246d8;
    font-size:8px;
    font-weight:900;
    text-decoration:none;
    white-space:nowrap;
    transition:.16s ease;
}
.template-manage-button:hover{
    border-color:#a99aff;
    background:#eeeaff;
    color:#5334d3;
    transform:translateY(-1px);
}
@media(max-width:1100px){
    .template-manage-button{display:none}
}


/* Beta v1.6.5 — step-oriented navigation + category accordion catalog */

/* The existing rail stays familiar, but now clearly communicates a 1→6 workflow. */
.module-button{position:relative}
.module-button::after{
    position:absolute;
    right:7px;
    top:7px;
    width:17px;
    height:17px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.68);
    font-size:7px;
    line-height:1;
    font-weight:950;
}
.module-button[data-module="plan"]::after{content:"1"}
.module-button[data-module="openings"]::after{content:"2"}
.module-button[data-module="models"]::after{content:"3"}
.module-button[data-module="materials"]::after{content:"4"}
.module-button[data-module="studio"]::after{content:"5"}
.module-button[data-module="quote"]::after{content:"6"}
.module-button.active::after{
    border-color:rgba(255,255,255,.34);
    background:#fff;
    color:#6749e5;
}

.catalog-search-only{margin-bottom:7px}
.catalog-category-help{
    margin:0 0 11px;
    color:var(--muted);
    font-size:8px;
    line-height:1.5;
}
.catalog-list{
    display:grid;
    gap:8px;
}
.catalog-category-section{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    transition:border-color .16s ease,box-shadow .16s ease;
}
.catalog-category-section.open{
    border-color:#c9c0ff;
    box-shadow:0 7px 18px rgba(27,37,60,.055);
}
.catalog-category-toggle{
    width:100%;
    min-height:44px;
    padding:0 11px;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    background:#fff;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
}
.catalog-category-section.open>.catalog-category-toggle{
    background:#f8f7ff;
    color:#5c42cf;
}
.catalog-category-title{
    min-width:0;
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
    font-weight:950;
}
.catalog-category-meta{
    display:flex;
    align-items:center;
    gap:7px;
}
.catalog-category-meta b{
    min-width:23px;
    height:23px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#f0edff;
    color:#6649dc;
    font-size:7px;
    font-weight:950;
}
.catalog-category-meta i{
    display:block;
    color:#8b94a5;
    font-size:12px;
    font-style:normal;
    transition:transform .18s ease;
}
.catalog-category-section.open .catalog-category-meta i{transform:rotate(180deg)}

.catalog-product-grid{
    padding:8px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    border-top:1px solid #eceef3;
    background:#fbfcfd;
}
.catalog-product-grid[hidden]{display:none!important}

/* Override the old horizontal product card only inside the new grid. */
.catalog-card.catalog-grid-card{
    min-width:0;
    padding:6px;
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    align-content:start;
    overflow:hidden;
    border:1px solid #e2e6ed;
    border-radius:11px;
    background:#fff;
    text-align:left;
    cursor:pointer;
}
.catalog-card.catalog-grid-card:hover{
    transform:translateY(-1px);
    border-color:#a99aff;
    box-shadow:0 8px 18px rgba(53,43,104,.09);
}
.catalog-product-image{
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    display:grid!important;
    place-items:center;
    border-radius:8px;
    background:#f2f4f7;
}
.catalog-card.catalog-grid-card .catalog-product-image img{
    width:100%;
    height:100%;
    display:block;
    border-radius:0;
    object-fit:contain;
    background:#f2f4f7;
}
.catalog-product-content{
    min-width:0;
    display:grid!important;
    gap:3px;
}
.catalog-card.catalog-grid-card strong{
    margin:0;
    min-height:25px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color:#273146;
    font-size:8px;
    line-height:1.45;
}
.catalog-card.catalog-grid-card small{
    overflow:hidden;
    color:var(--muted);
    font-size:6.5px;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.catalog-card.catalog-grid-card .price{
    margin-top:1px;
    color:#47398c;
    font-size:8px;
    font-weight:950;
}

@media(max-width:850px){
    .catalog-product-grid{gap:9px;padding:9px}
    .catalog-card.catalog-grid-card{padding:7px}
    .catalog-card.catalog-grid-card strong{font-size:9px}
    .catalog-card.catalog-grid-card small{font-size:7px}
}


/* Beta v1.6.6 — clearer accordion + nested sub-categories */
.catalog-list{
    gap:9px;
}

.catalog-category-section{
    overflow:hidden;
    border:1px solid #dfe4ec;
    border-radius:13px;
    background:#fff;
    box-shadow:0 2px 8px rgba(27,37,60,.025);
}

.catalog-category-section.open{
    border-color:#bdb0ff;
    box-shadow:0 8px 20px rgba(61,46,131,.07);
}

.catalog-category-toggle{
    min-height:49px;
    padding:0 9px 0 10px;
    gap:8px;
    transition:background .16s ease,color .16s ease;
}

.catalog-category-toggle:hover{
    background:#faf9ff;
}

.catalog-category-section.open>.catalog-category-toggle{
    background:linear-gradient(90deg,#f6f3ff,#fbfaff);
    color:#583dcc;
}

.catalog-category-leading{
    flex:0 0 auto;
    display:grid;
    place-items:center;
}

.catalog-category-symbol{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#eeeaff;
    color:#694ae4;
    font-size:10px;
    font-weight:900;
}

.catalog-subcategory-branch{
    width:21px;
    height:21px;
    display:grid;
    place-items:center;
    color:#9a8ce3;
    font-size:12px;
    font-weight:900;
}

.catalog-category-title{
    font-size:9px;
    font-weight:950;
}

.catalog-category-meta{
    gap:6px;
}

.catalog-category-meta b{
    min-width:25px;
    height:25px;
    padding:0 6px;
    background:#eeeaff;
    color:#6244d7;
    font-size:7px;
}

.catalog-category-chevron{
    width:29px;
    height:29px;
    flex:0 0 29px;
    display:grid;
    place-items:center;
    border:1px solid #ded8ff;
    border-radius:9px;
    background:#f5f2ff;
    color:#6347db;
    box-shadow:0 2px 6px rgba(80,58,180,.06);
    transition:transform .18s ease,background .16s ease,border-color .16s ease;
}

.catalog-category-chevron svg{
    width:16px;
    height:16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.catalog-category-toggle:hover .catalog-category-chevron{
    border-color:#bdb0ff;
    background:#ebe6ff;
}

.catalog-category-section.open>.catalog-category-toggle .catalog-category-chevron{
    transform:rotate(180deg);
    border-color:#a894ff;
    background:#6c4ce5;
    color:#fff;
}

.catalog-category-body[hidden]{
    display:none!important;
}

/* Sub-category area */
.catalog-subcategory-list{
    display:grid;
    gap:6px;
    padding:7px 7px 8px;
    border-top:1px solid #ececf4;
    background:#fafbfe;
}

.catalog-subcategory-section{
    margin-left:calc(min(var(--catalog-depth), 3) * 7px);
    border-radius:10px;
    border-color:#e5e7ef;
    box-shadow:none;
}

.catalog-subcategory-section.open{
    border-color:#d0c7ff;
    box-shadow:none;
}

.catalog-subcategory-section>.catalog-category-toggle{
    min-height:41px;
    padding-left:8px;
    background:#fff;
}

.catalog-subcategory-section.open>.catalog-category-toggle{
    background:#f8f6ff;
}

.catalog-subcategory-section .catalog-category-title{
    font-size:8px;
}

.catalog-subcategory-section .catalog-category-meta b{
    min-width:22px;
    height:22px;
    font-size:6.5px;
}

.catalog-subcategory-section .catalog-category-chevron{
    width:25px;
    height:25px;
    flex-basis:25px;
    border-radius:8px;
}

.catalog-subcategory-section .catalog-category-chevron svg{
    width:14px;
    height:14px;
}

.catalog-category-empty{
    margin:0;
    padding:12px 10px;
    border-top:1px solid #eceef3;
    background:#fbfcfd;
    color:#9099a9;
    font-size:7px;
    font-weight:750;
    text-align:center;
}

/* Products remain 2 square cards per row, also inside sub-categories. */
.catalog-category-body>.catalog-product-grid{
    border-top:1px solid #eceef3;
}

.catalog-subcategory-section .catalog-product-grid{
    padding:7px;
    gap:7px;
    background:#fbfcfe;
}

@media(max-width:850px){
    .catalog-category-toggle{min-height:52px}
    .catalog-category-chevron{
        width:31px;
        height:31px;
        flex-basis:31px;
    }
}


/* Live v1.6.6 — active quote submission preserved */
/* Main v1.4.8 — active quote submission */
.active-quote-form{display:grid;gap:11px;margin-top:14px}
.active-quote-form>label,.active-quote-form .quote-form-grid label{display:grid;gap:6px}
.active-quote-form label>span{color:#525d72;font-size:8px;font-weight:900;line-height:1.45}
.active-quote-form input,.active-quote-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;color:#1d273b;outline:none;font:700 9px Inter,system-ui,sans-serif}
.active-quote-form input{min-height:40px;padding:0 11px}
.active-quote-form textarea{padding:10px 11px;resize:vertical;line-height:1.55}
.active-quote-form input:focus,.active-quote-form textarea:focus{border-color:#9d89ff;box-shadow:0 0 0 3px rgba(109,74,255,.09)}
.quote-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.quote-consent{grid-template-columns:auto minmax(0,1fr)!important;align-items:flex-start;gap:9px!important;padding:10px;border:1px solid #e4e0fa;border-radius:11px;background:#f8f6ff}
.quote-consent input{width:17px!important;min-height:17px!important;margin-top:1px;padding:0!important}
.quote-consent span{font-size:7.5px!important;font-weight:750!important;color:#655f76!important}
.quote-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.quote-submit-button{width:100%;min-height:47px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:linear-gradient(135deg,#795cff,#5838df);color:#fff;box-shadow:0 12px 26px rgba(84,55,210,.24)}
.quote-submit-button span{font-size:15px}.quote-submit-button strong{font-size:9px;font-weight:950}
.quote-submit-button:disabled{opacity:.48;box-shadow:none;cursor:not-allowed}
.quote-security-note{margin:0;color:#81899a;font-size:7px;line-height:1.55;text-align:center}
.quote-progress{display:grid;gap:7px;padding:11px;border:1px solid #dfd9ff;border-radius:11px;background:#f6f3ff}
.quote-progress-bar{height:7px;overflow:hidden;border-radius:99px;background:#dfdaf8}
.quote-progress-bar span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8f75ff,#5c3ce0);transition:width .25s ease}
.quote-progress strong{color:#5137bd;font-size:8px}.quote-progress small{color:#777f91;font-size:7px;line-height:1.4}
.quote-success-view{padding:38px 4px 10px;text-align:center}
.quote-success-icon{width:70px;height:70px;margin:0 auto 17px;display:grid;place-items:center;border-radius:22px;background:#e8f8f0;color:#158656;font-size:33px;font-weight:950}
.quote-success-view h2{margin:10px 0 8px;font-size:22px;line-height:1.2}.quote-success-view p{margin:0;color:var(--muted);font-size:9px;line-height:1.65}
.quote-request-no{display:block;margin:18px 0;padding:13px;border-radius:12px;background:#f0edff;color:#5839dc;font-size:15px;letter-spacing:.05em}
@media(max-width:850px){.quote-form-grid{grid-template-columns:1fr}.active-quote-form input{min-height:43px}}


/* Live v1.6.7 — mobile navigation and product-loading hotfix */
@media(max-width:850px){
    .module-rail{
        height:70px;
        padding:5px 4px;
        gap:2px;
    }

    .module-button{
        flex:1 0 52px;
        min-width:52px;
        min-height:58px;
        padding:4px 2px 3px;
        gap:2px;
        color:#d4dbea;
    }

    .module-icon{
        width:28px;
        height:28px;
        border-radius:9px;
    }

    .module-icon svg{
        width:16px;
        height:16px;
    }

    .module-button small{
        width:100%;
        max-width:62px;
        min-height:18px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:visible;
        color:inherit;
        font-size:8.5px;
        font-weight:900;
        line-height:1.05;
        letter-spacing:0;
        text-align:center;
        text-overflow:clip;
        white-space:normal;
    }

    .module-button.active small{
        color:#fff;
    }

    .module-drawer,
    .inspector{
        bottom:calc(var(--statusbar) + 84px);
    }

    .workspace-hint{
        bottom:90px;
    }

    .scale-bar{
        bottom:89px;
    }

    .toast{
        bottom:calc(var(--statusbar) + 88px);
    }

    .catalog-card.catalog-grid-card{
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }

    .catalog-card.catalog-grid-card.catalog-product-loading{
        opacity:.68;
        pointer-events:none;
        position:relative;
    }

    .catalog-card.catalog-grid-card.catalog-product-loading::after{
        content:'';
        position:absolute;
        inset:0;
        border-radius:11px;
        background:rgba(255,255,255,.35);
        pointer-events:none;
    }
}

@media(max-width:850px) and (orientation:landscape){
    .module-rail{
        width:66px;
        height:auto;
    }

    .module-button{
        min-width:56px;
        min-height:52px;
    }

    .module-button small{
        display:none;
    }

    .module-drawer,
    .inspector{
        left:80px;
    }

    .toast{
        left:82px;
    }
}


/* Live v1.6.8 — installation branding */
.brand-mark.brand-logo-image{
    overflow:hidden;
    border:1px solid #e1e5ec;
    background:#fff;
    box-shadow:0 5px 15px rgba(24,33,53,.08);
}
.brand-mark.brand-logo-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    padding:3px;
}
.developer-credit{
    color:#8a94a5;
    font-size:7.5px;
    font-weight:750;
    white-space:nowrap;
}
.developer-credit a{
    color:#6750cf;
    font-weight:900;
    text-decoration:none;
}
.developer-credit a:hover{text-decoration:underline}
@media(max-width:850px){
    .developer-credit{
        max-width:122px;
        overflow:hidden;
        font-size:6.5px;
        text-overflow:ellipsis;
    }
    .developer-credit a{font-size:6.5px}
}
@media(max-width:600px){
    .developer-credit{display:none}
}