:root{
    --bg:#07101b;
    --top:#091421;
    --panel:#0c1725;
    --panel2:#101d2d;
    --panel3:#15253a;
    --border:#25374d;
    --border2:#324861;
    --text:#e9eff7;
    --muted:#90a0b4;
    --muted2:#64768d;
    --accent:#47bdd7;
    --accent-dark:#123b4b;
    --danger:#ff6b6b;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
input{
    font:inherit;
}

button{
    user-select:none;
}

.hidden{
    display:none !important;
}

.topbar{
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    background:var(--top);
    border-bottom:1px solid var(--border);
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:250px;
}

.brand-mark{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--accent);
    border-radius:9px;
    color:var(--accent);
    font-weight:850;
    letter-spacing:-.05em;
}

.brand-name{
    font-size:16px;
    font-weight:760;
}

.brand-sub{
    margin-top:2px;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.top-center{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:12px;
}

.status-dot{
    width:7px;
    height:7px;
    border-radius:100%;
    background:#54d095;
    box-shadow:0 0 10px rgba(84,208,149,.6);
}

.top-actions{
    min-width:250px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
}

.version{
    color:var(--muted2);
    font-size:11px;
}

.primary,
.secondary,
.tool-button{
    border-radius:7px;
    padding:9px 13px;
    cursor:pointer;
}

.primary{
    color:#e5fbff;
    border:1px solid #318da4;
    background:#123c4c;
}

.primary:hover{
    background:#174c60;
}

.primary.large{
    padding:11px 18px;
}

.primary.full{
    width:100%;
    margin:9px 0 16px;
}

.secondary,
.tool-button{
    background:var(--panel2);
    color:#bac6d5;
    border:1px solid var(--border);
}

.tool-button:hover,
.secondary:hover{
    background:var(--panel3);
    color:white;
}

.app-layout{
    display:grid;
    grid-template-columns:
        185px
        265px
        minmax(0,1fr)
        300px;

    height:calc(100vh - 64px);
}

.sidebar{
    overflow-y:auto;
    background:#091421;
    border-right:1px solid var(--border);
    padding:13px 10px;
}

.nav-group-title{
    margin:14px 8px 6px;
    color:var(--muted2);
    font-size:9px;
    letter-spacing:.15em;
}

.nav-item{
    display:block;
    width:100%;
    padding:9px 10px;
    color:#aab8c9;
    background:transparent;
    border:0;
    border-radius:6px;
    text-align:left;
    cursor:pointer;
}

.nav-item:hover,
.nav-item.active{
    background:#132237;
    color:white;
}

.model-panel{
    display:flex;
    min-width:0;
    flex-direction:column;
    background:var(--panel);
    border-right:1px solid var(--border);
}

.panel-heading{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px;
    border-bottom:1px solid var(--border);
}

.panel-heading h2,
.properties-header h2,
.modal-head h2{
    margin:2px 0 0;
    font-size:16px;
}

.eyebrow{
    color:var(--muted2);
    font-size:9px;
    letter-spacing:.15em;
}

.count-pill{
    min-width:28px;
    padding:4px 8px;
    text-align:center;
    border:1px solid var(--border2);
    border-radius:99px;
    color:#a9bacd;
    font-size:11px;
}

.model-list{
    max-height:230px;
    overflow-y:auto;
    border-bottom:1px solid var(--border);
}

.model-row{
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 12px;
    border:0;
    border-bottom:1px solid rgba(48,67,89,.45);
    background:transparent;
    color:var(--text);
    text-align:left;
    cursor:pointer;
}

.model-row:hover,
.model-row.active{
    background:#14243a;
}

.model-icon{
    color:var(--accent);
    font-size:23px;
}

.model-row-text{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.model-row-text strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}

.model-row-text small{
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--muted);
    font-size:10px;
}

.tree-heading{
    padding:13px 14px 8px;
}

.model-tree{
    flex:1;
    min-height:0;
    overflow:auto;
    padding-bottom:20px;
}

.tree-row{
    min-height:28px;
    display:flex;
    align-items:center;
    padding-right:6px;
}

.tree-row:hover{
    background:#122236;
}

.tree-eye,
.tree-name{
    border:0;
    background:transparent;
    cursor:pointer;
}

.tree-eye{
    flex:0 0 25px;
    color:#7891a9;
}

.tree-name{
    min-width:0;
    flex:1;
    overflow:hidden;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#b6c3d1;
    font-size:11px;
}

.viewer-shell{
    min-width:0;
    display:flex;
    flex-direction:column;
    background:#050d17;
}

.viewer-toolbar{
    height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px 0 15px;
    background:#0b1624;
    border-bottom:1px solid var(--border);
}

.toolbar-label{
    margin-right:8px;
    color:var(--muted2);
    font-size:9px;
    letter-spacing:.13em;
}

#current-model-name{
    font-size:12px;
}

.viewer-actions{
    display:flex;
    gap:7px;
}

.tool-button{
    padding:7px 10px;
    font-size:11px;
}

.viewer-canvas{
    position:relative;
    flex:1;
    min-height:0;
    overflow:hidden;
}

.viewer-canvas canvas{
    display:block;
    width:100%;
    height:100%;
    outline:none;
}

.viewer-empty,
.viewer-loading{
    position:absolute;
    z-index:5;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px;
    text-align:center;
    pointer-events:none;
}

.viewer-empty button{
    pointer-events:auto;
}

.viewer-empty h1{
    margin:3px 0 9px;
    font-size:25px;
}

.viewer-empty p{
    max-width:540px;
    margin:0 0 21px;
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
}

.model-symbol{
    color:var(--accent);
    font-size:75px;
    line-height:1;
}

.supported{
    margin-top:16px;
    color:var(--muted2);
    font-size:9px;
    letter-spacing:.15em;
}

.viewer-loading{
    background:rgba(5,13,23,.75);
    color:#dce9f3;
}

.spinner{
    width:34px;
    height:34px;
    margin-bottom:13px;
    border:3px solid #21384d;
    border-top-color:var(--accent);
    border-radius:100%;
    animation:spin .8s linear infinite;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.properties-panel{
    min-width:0;
    overflow-y:auto;
    background:var(--panel);
    border-left:1px solid var(--border);
}

.properties-header{
    padding:14px 15px;
    border-bottom:1px solid var(--border);
}

.properties{
    padding:15px;
}

.empty-properties,
.empty-mini{
    padding:14px;
    color:var(--muted);
    font-size:11px;
    line-height:1.55;
}

.property-title{
    overflow-wrap:anywhere;
    font-size:17px;
    font-weight:720;
}

.property-type{
    margin-top:4px;
    color:var(--accent);
    font-size:9px;
    letter-spacing:.13em;
}

.prop-row{
    display:grid;
    grid-template-columns:85px minmax(0,1fr);
    gap:8px;
    padding:8px 0;
    border-bottom:1px solid rgba(45,64,84,.55);
    font-size:11px;
}

.prop-row span{
    color:var(--muted);
}

.prop-row strong{
    overflow-wrap:anywhere;
    text-align:right;
    font-weight:550;
}

.property-section{
    margin:18px 0 4px;
    color:var(--muted2);
    font-size:9px;
    letter-spacing:.14em;
}

.mono{
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;
    font-size:9px;
}

.json-box{
    max-height:260px;
    overflow:auto;
    padding:10px;
    background:#07111d;
    border:1px solid var(--border);
    border-radius:6px;
    color:#b6c7d8;
    white-space:pre-wrap;
    word-break:break-word;
    font-size:9px;
}

.modal-backdrop{
    position:fixed;
    z-index:20000;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(1,6,12,.78);
}

.modal{
    width:min(520px,100%);
    padding:20px;
    border:1px solid var(--border2);
    border-radius:11px;
    background:#0d1827;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.modal-head{
    display:flex;
    align-items:start;
    justify-content:space-between;
    margin-bottom:22px;
}

.close-button{
    width:32px;
    height:32px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--panel2);
    color:#b7c3d0;
    cursor:pointer;
    font-size:20px;
}

.field-label{
    display:block;
    margin:14px 0 6px;
    color:#aab7c5;
    font-size:11px;
}

.form-input{
    width:100%;
    padding:10px 11px;
    border:1px solid var(--border2);
    border-radius:7px;
    outline:none;
    background:#081421;
    color:white;
}

.form-input:focus{
    border-color:#3b9ab2;
}

.file-drop{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:135px;
    padding:20px;
    border:1px dashed #405c76;
    border-radius:9px;
    background:#091521;
    text-align:center;
    cursor:pointer;
}

.file-drop input{
    max-width:100%;
    margin-bottom:12px;
}

.file-drop strong{
    font-size:13px;
}

.file-drop span{
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
}

.upload-progress{
    margin-top:17px;
}

.progress-track{
    height:7px;
    overflow:hidden;
    border-radius:99px;
    background:#17283a;
}

.progress-bar{
    width:0%;
    height:100%;
    background:var(--accent);
    transition:width .15s;
}

#upload-progress-text{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:10px;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:9px;
    margin-top:20px;
}

@media(max-width:1150px){

    .app-layout{
        grid-template-columns:
            58px
            235px
            minmax(0,1fr)
            260px;
    }

    .sidebar .nav-item{
        font-size:0;
    }

    .nav-group-title{
        display:none;
    }
}

@media(max-width:850px){

    html,
    body{
        overflow:auto;
    }

    .top-center{
        display:none;
    }

    .brand{
        min-width:0;
    }

    .top-actions{
        min-width:0;
    }

    .app-layout{
        display:block;
        height:auto;
    }

    .sidebar{
        display:none;
    }

    .model-panel{
        height:220px;
    }

    .model-tree{
        display:none;
    }

    .viewer-shell{
        height:65vh;
        min-height:480px;
    }

    .properties-panel{
        min-height:280px;
        border-left:0;
        border-top:1px solid var(--border);
    }

    .viewer-toolbar{
        height:auto;
        min-height:52px;
        gap:8px;
        flex-wrap:wrap;
        padding:8px 10px;
    }
}


/* TWIN_LINK_V1 — CMMS panel under the object properties */
.twin-panel{margin-top:6px}
.twin-muted{color:var(--muted);font-size:.8rem;margin:4px 0 8px;line-height:1.4}
.twin-card{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:6px}
.twin-kind{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700}
.twin-name{font-size:1rem;font-weight:650;margin:2px 0 6px}
.twin-wo{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.twin-wo:last-child{border-bottom:0}
.twin-wo-id{color:var(--accent);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem}
.twin-wo-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twin-tag{font-size:.68rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.twin-btn{appearance:none;width:100%;margin-top:8px;background:var(--panel3);border:1px solid var(--border2);
  color:var(--text);border-radius:8px;padding:8px 12px;font:inherit;font-size:.84rem;cursor:pointer}
.twin-btn:hover{border-color:var(--accent)}
.twin-btn.twin-danger{color:var(--danger)}
.twin-formbox{margin-top:10px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.twin-label{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin:8px 0 3px}
.twin-input{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--border2);color:var(--text);
  border-radius:8px;padding:7px 9px;font:inherit;font-size:.86rem}
.twin-input:focus{outline:none;border-color:var(--accent)}
.twin-actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.twin-actions .primary,.twin-actions .twin-btn{width:auto;margin-top:0}
.twin-radio{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:5px;cursor:pointer}
.twin-result{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--border);color:var(--text);padding:7px 2px;font:inherit;font-size:.84rem;cursor:pointer}
.twin-result:hover{color:var(--accent)}
.twin-result:last-child{border-bottom:0}
.twin-ok{background:rgba(71,189,215,.12);border:1px solid var(--accent-dark);color:var(--text);border-radius:10px;
  padding:10px 12px;margin-top:10px;font-size:.88rem}

/* PHOTO_SCENES_V1 — photo scenes, pins, 360 stage */
.scene-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.scene-row{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--panel2);
  border:1px solid var(--border);border-radius:10px;padding:7px 9px;color:var(--text);font:inherit;cursor:pointer}
.scene-row:hover{border-color:var(--border2)}
.scene-row.active{border-color:var(--accent);background:var(--panel3)}
.scene-thumb{flex:none;width:54px;height:36px;border-radius:6px;background:var(--panel3) center/cover no-repeat;border:1px solid var(--border)}
.photo-stage{position:relative;flex:1;min-height:0;background:#05090f;overflow:hidden}
.photo-stage.hidden{display:none}
.photo-wrap,.pano-wrap{position:absolute;inset:0}
.photo-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.photo-stage.tagging .photo-wrap img,.photo-stage.tagging .pano-wrap canvas{cursor:crosshair}
.photo-pin{position:absolute;transform:translate(-50%,-100%);background:none;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;z-index:3;font:inherit}
.pin-dot{width:24px;height:24px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);
  color:#04121f;font-weight:800;font-size:.72rem;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.pin-dot>*{transform:rotate(45deg)}
.pin-dot.small{width:20px;height:20px;border-radius:50%;transform:none;font-size:.66rem;border-width:1px;flex:none}
.photo-pin.linked .pin-dot{background:#3fb950}
.photo-pin.sel .pin-dot{background:#ffb84a;transform:rotate(-45deg) scale(1.2)}
.pin-label{background:rgba(5,9,15,.82);color:var(--text);font-size:.7rem;padding:2px 7px;border-radius:999px;
  white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--border2)}
.tool-button.on{background:var(--accent);color:#04121f;border-color:var(--accent)}
.lnk-back{background:none;border:0;color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer;padding:0 0 6px;text-align:left}
.lnk-back:hover{color:var(--accent)}
.tag-row .twin-wo-title{margin-left:4px}

/* AV3D_NAV_V1 — overview panel + "soon" items */
.nav-item.soon{opacity:.45;cursor:default}
.soon-tag{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border2);
  border-radius:999px;padding:1px 6px;margin-left:6px;color:var(--muted2);vertical-align:middle}
.overview-panel{position:relative;flex:1;min-height:0;overflow:auto;background:#050d17}
.overview-panel.hidden{display:none}
.ov-wrap{max-width:1040px;margin:0 auto;padding:26px 28px 40px}
.ov-head h1{margin:2px 0 4px;font-size:1.5rem;letter-spacing:-.02em}
.ov-head p{margin:0 0 18px}
.ov-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.ov-tile{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.ov-n{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.ov-l{font-size:.82rem;color:var(--text);margin-top:2px}
.ov-s{font-size:.72rem;color:var(--muted2);margin-top:2px}
.ov-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
@media(max-width:900px){.ov-cols{grid-template-columns:1fr}}
.ov-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.ov-card h3{margin:0 0 10px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.ov-act{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:.84rem}
.ov-act:last-child{border-bottom:0}
.ov-when{flex:none;color:var(--muted2);font-size:.74rem;width:96px;padding-top:2px}
.ov-what{flex:1}
.ov-link{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--border);
  color:var(--text);border-radius:9px;padding:9px 12px;margin-bottom:8px;font:inherit;font-size:.86rem;cursor:pointer}
.ov-link:hover{border-color:var(--accent);color:var(--accent)}