/* Appearance: light (default) and dark, chosen on <html data-appearance="light|dark">. */
:root{--acc:#2D7DFF;--acc2:#1F66E0;--acc3:#00D1C6;--mark:#0B1F33;--acctext:#1F66E0;--accbtn:#1F66E0;--accbtn2:#1854C2;--ink:#3c3c3c;--ink2:#1b1b1b;--dim:#6f6f6f;--panel:#ffffff;--line:#d9d9d9;--line2:#ebebeb;--hdr:#f5f5f5;--bg:#f2f2f2;
  --hover:#F1F6FF;--sel:#E8F2FF;--seg:#ebebeb;--input:#ffffff;--soft:#fafafa;--bad:#d4351c;--ok:#2d8a3e;--warn:#a85d00;
  --badbg:#fdf2f0;--badline:#f2c4bc;--goodbg:#f1f9f2;--goodline:#bfe1c6;--badgebg:#fff4e0;--badgeline:#f1d6a3;
  --bar:#0B1F33;--barink:#ffffff;--bardim:#A9B6C8;--barline:#1E3550;--barhover:#16304B;
  --sky:linear-gradient(#f7f8f9 0%,#e5e8eb 55%,#cdd3d9 100%);--shadow:rgba(0,0,0,.14);color-scheme:light}
html[data-appearance="dark"]{--acc:#4C90FF;--acc2:#2D7DFF;--acc3:#00D1C6;--mark:#FFFFFF;--acctext:#6FA6FF;--accbtn:#1F66E0;--accbtn2:#2D7DFF;--ink:#d3d8de;--ink2:#f2f4f6;--dim:#929ba6;--panel:#2b313b;--line:#434b58;--line2:#383f4a;--hdr:#333a45;--bg:#20252d;
  --hover:#2E3B4F;--sel:#183A66;--seg:#232831;--input:#1e2229;--soft:#303743;--bad:#f07261;--ok:#5cc47a;--warn:#e5a849;
  --badbg:#3a2522;--badline:#6a3530;--goodbg:#1e3226;--goodline:#2f5f3e;--badgebg:#3a2f1d;--badgeline:#6a5428;
  --bar:#081627;--barink:#ffffff;--bardim:#8B9BB3;--barline:#1A2C42;--barhover:#12253B;
  --sky:linear-gradient(#323a46 0%,#262c35 60%,#1b1f26 100%);--shadow:rgba(0,0,0,.5);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font:13px/1.45 "Artifakt Element","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit;color:inherit}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:6px 12px;cursor:pointer;white-space:nowrap;display:inline-block;color:var(--ink)}
.btn:hover{background:var(--hover);text-decoration:none}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff} .btn.primary:hover{background:var(--acc2)}
.btn.danger{color:var(--bad)} .btn:disabled{opacity:.5;cursor:default}
.btn.small{padding:3px 8px;font-size:12px}
input[type=text],input[type=email],input[type=password],textarea,select{width:100%;border:1px solid var(--line);border-radius:4px;padding:7px 9px;background:var(--input);color:var(--ink)}
select{width:auto}
textarea{font:12px/1.4 Consolas,"Cascadia Mono",Menlo,monospace;resize:vertical}
label{display:block;margin:10px 0 4px;color:var(--dim)}
.muted{color:var(--dim)} .small{font-size:12px}
.err{color:var(--bad)} .okc{color:var(--ok)}

/* app chrome */
#top{height:44px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px}
.logo{width:28px;height:28px;flex:none;display:block}
#top .brand{font-weight:600;color:var(--ink2)}
#top .crumbs{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#top .crumbs a{color:var(--dim)}
#top .who{margin-left:auto;color:var(--dim);display:flex;gap:10px;align-items:center;white-space:nowrap}
.appear{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:4px;width:30px;height:28px;cursor:pointer;flex:none}
main.page{max-width:1120px;margin:0 auto;padding:22px 16px 60px}
h1{font-size:20px;margin:0 0 14px;font-weight:600;color:var(--ink2)} h2{font-size:15px;margin:22px 0 10px;font-weight:600;color:var(--ink2)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px}
.auth{max-width:380px;margin:60px auto}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
table.list{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
table.list th{text-align:left;font-weight:600;background:var(--hdr);border-bottom:1px solid var(--line);padding:8px 10px}
table.list td{border-bottom:1px solid var(--line2);padding:8px 10px;vertical-align:top}
table.list tr:last-child td{border-bottom:0}
.steps{display:grid;grid-template-columns:1fr;gap:14px}
.step h3{margin:0 0 6px;font-size:14px;color:var(--ink2)}
.step .n{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--acc);color:#fff;text-align:center;line-height:20px;font-size:12px;margin-right:6px}
.result{margin-top:12px;border-radius:6px;padding:12px;border:1px solid var(--line);background:var(--panel)}
.result.bad{border-color:var(--badline);background:var(--badbg)}
.result.good{border-color:var(--goodline);background:var(--goodbg)}
.result ol{margin:8px 0 8px 20px;padding:0} .result li{margin:3px 0}
.result pre,pre.box{white-space:pre-wrap;background:var(--input);border:1px solid var(--line);border-radius:4px;padding:8px;font:12px/1.4 Consolas,Menlo,monospace;max-height:260px;overflow:auto}
.notes{color:var(--warn)}
.toast{position:fixed;left:50%;top:56px;transform:translateX(-50%);background:#333;color:#fff;padding:7px 12px;border-radius:4px;z-index:50}
.target{background:var(--sel);border:1px solid var(--acc);border-radius:4px;padding:6px 10px;margin:6px 0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.stat b{display:block;font-size:20px;color:var(--ink2)}
.pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;border:1px solid var(--line)}
.pill.pending{background:var(--badgebg);border-color:var(--badgeline);color:var(--warn)}
.pill.active{background:var(--goodbg);border-color:var(--goodline);color:var(--ok)}
.pill.disabled{background:var(--badbg);border-color:var(--badline);color:var(--bad)}
.pill.sa{background:var(--sel);border-color:var(--acc);color:var(--acc)}
.help h2{margin-top:26px} .help li{margin:4px 0}
tr.hist td{background:var(--soft)}
table.inner{width:100%;border-collapse:collapse} table.inner td,table.inner th{padding:4px 8px;border-bottom:1px solid var(--line2);text-align:left;font-weight:400}

/* viewer */
body.viewing{overflow:hidden;background:var(--sky)}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#c.measuring{cursor:crosshair}
#vhdr{position:fixed;left:0;right:0;top:0;height:44px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 12px;z-index:5}
#vhdr .t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
#vhdr .t small{color:var(--dim);font-weight:400;margin-left:8px}
#vhdr select{padding:4px 6px;font-size:12px}
.panel{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 2px 8px var(--shadow);z-index:4;display:flex;flex-direction:column}
.panel .ph{background:var(--hdr);border-bottom:1px solid var(--line);padding:7px 10px;font-weight:600;display:flex;align-items:center;color:var(--ink2)}
.panel .ph .x{margin-left:auto;cursor:pointer;color:var(--dim);font-weight:400;padding:0 4px}
.panel .pb{overflow:auto;padding:4px 0}
#browser{left:10px;top:54px;width:250px;max-height:calc(100% - 140px)}
#props{right:10px;top:180px;width:300px;max-height:calc(100% - 270px)}
#measure{right:10px;bottom:16px;width:300px;max-height:40%}
.tree div.row{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.tree div.row:hover{background:var(--hover)}
.tree div.row.sel{background:var(--sel)}
.tree .eye{width:16px;height:16px;flex:none;opacity:.75;cursor:pointer;stroke:var(--ink)}
.tree .eye.off{opacity:.25}
.tree .grp{font-weight:600;color:var(--ink2);padding-top:7px}
.tree .cnt{margin-left:auto;color:var(--dim)}
.tree .sw{width:10px;height:10px;border-radius:2px;flex:none}
.tree .tw{width:10px;flex:none;color:var(--dim);font-size:10px}
.tree div.row.el{padding-left:46px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.tree .radio{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--dim);flex:none}
.tree .radio.on{border-color:var(--acc);background:radial-gradient(var(--acc) 45%,transparent 50%)}
table.pt{width:100%;border-collapse:collapse}
table.pt td{border-bottom:1px solid var(--line2);padding:5px 10px;vertical-align:top;word-break:break-word}
table.pt td:first-child{color:var(--dim);width:38%;white-space:nowrap}
.pcat{background:var(--soft);font-weight:600;color:var(--ink2)}
#tb{position:fixed;left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 10px var(--shadow);display:flex;gap:1px;padding:4px;z-index:5}
#tb button{width:40px;height:40px;border:0;background:transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);position:relative}
#tb button:hover{background:var(--hover)}
#tb button.on{background:var(--sel);color:var(--acc)}
#tb .sep{width:1px;background:var(--line);margin:4px 3px}
#tb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#tb button[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:48px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:3px 7px;border-radius:3px;white-space:nowrap;font-size:11px}
#vcw{position:fixed;right:12px;top:54px;width:110px;height:110px;z-index:4}
#vc{width:100%;height:100%;display:block;touch-action:none}
.vcb{position:absolute;top:0;width:20px;height:20px;padding:2px;border:0;border-radius:4px;background:transparent;color:var(--dim);cursor:pointer;opacity:.55;transition:opacity .15s}
.vcb svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#vcw:hover .vcb{opacity:1} .vcb:hover{background:var(--hover);color:var(--acc)}
#vcHome{left:0} #vcCcw{right:20px} #vcCw{right:0}
#note{position:fixed;right:10px;bottom:16px;max-width:380px;color:var(--dim);font-size:11px;z-index:3;background:var(--panel);opacity:.92;border-radius:4px;padding:6px 9px;border:1px solid var(--line)}
#vmsg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 18px;z-index:6;display:none}
.badge{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:10px;background:var(--badgebg);color:var(--warn);border:1px solid var(--badgeline);font-size:11px;font-weight:600}
.pop{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 56px);display:none;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:7px 10px;z-index:5;box-shadow:0 2px 10px var(--shadow);align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:94%}
#theme{flex-direction:column;align-items:stretch}
.seg{display:inline-flex;gap:2px;background:var(--seg);border-radius:4px;padding:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:5px 9px;border-radius:3px;cursor:pointer;white-space:nowrap;color:var(--dim)}
.seg button.on{background:var(--panel);color:var(--ink2);box-shadow:0 1px 2px var(--shadow);font-weight:600}
.vals{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.vals button{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:4px 8px;cursor:pointer;display:flex;gap:6px;align-items:center}
.vals button.on{border-color:var(--acc);background:var(--sel)}
.vals .sw{width:11px;height:11px;border-radius:2px}
button.mini{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:3px 7px;cursor:pointer}
button.mini.on{border-color:var(--acc);background:var(--sel);color:var(--acc)}
#secH{width:min(320px,50vw)}
table.meas{width:100%;border-collapse:collapse;font-size:12px}
table.meas td{padding:4px 8px;border-bottom:1px solid var(--line2);vertical-align:top}
table.meas td.v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:820px){
  #vhdr .t small{display:none} #vhdr{flex-wrap:nowrap;padding:0 8px;gap:6px}
  #browser{left:6px;right:6px;width:auto;top:auto;bottom:76px;max-height:45%}
  #props,#measure{left:6px;right:6px;width:auto;top:auto;bottom:76px;max-height:45%}
  #vcw{top:92px;width:84px;height:84px} .vcb{opacity:.8} #note{display:none}
  #tb button{width:34px;height:38px}
}

/* workspace: side menu */
.shell{display:flex;min-height:calc(100vh - 44px)}
.shell main.page{flex:1;min-width:0;margin:0;max-width:none;padding:22px 24px 60px}
#side{width:236px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;position:sticky;top:0;align-self:flex-start;height:calc(100vh - 44px);overflow:auto}
#side a{display:block;padding:6px 16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid transparent}
#side a:hover{background:var(--hover);text-decoration:none}
#side a.on{background:var(--sel);border-left-color:var(--acc);color:var(--ink2);font-weight:600}
#side .sh a{font-weight:600;color:var(--ink2)}
#side .plist{margin:4px 0}
#side .sub a{padding-left:32px;font-size:12px;color:var(--dim)}
#side .sub a.on{color:var(--ink2)}
#side .sfoot{margin-top:auto;border-top:1px solid var(--line);padding-top:6px}
#sideToggle{display:none}
.scroll{overflow-x:auto}
@media (max-width:900px){
  #sideToggle{display:inline-block}
  #side{position:fixed;left:0;top:44px;z-index:20;transform:translateX(-100%);transition:transform .15s;box-shadow:2px 0 10px var(--shadow)}
  body.side-open #side{transform:none}
  .hide-narrow{display:none}
}
#side .sproj{margin:10px 0 4px;border-top:1px solid var(--line);padding-top:8px}
#side .pname{padding:4px 16px 6px;font-weight:600;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
#side .sproj a{padding-left:24px}
.auth .logo{width:56px;height:56px;margin:0 auto 6px}
/* a table cell must stay a table cell, or its row lines break; space its buttons instead */
table td.row{display:table-cell}
table td.row > .btn,table td.row > a.btn,table td.row > span{margin:2px 6px 2px 0;vertical-align:middle}
#top .crumbs{min-width:0;flex:1 1 auto}
@media (max-width:600px){ #top .brand{display:none} #top .who{gap:6px} }

/* ---------- Autodesk-style skin (ACC / Revit): dark global header, navigation rail, dense panels */
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#top{height:48px;background:var(--bar);border-bottom:1px solid var(--barline);color:var(--barink);gap:14px;padding:0 16px 0 12px}
#top .home{display:flex;align-items:center;gap:10px;color:var(--barink);text-decoration:none;padding-right:14px;border-right:1px solid var(--barline);height:28px}
#top .logo{width:26px;height:26px}
#top .brand{font-weight:700;font-size:15px;color:var(--barink);letter-spacing:.01em}
#top .crumbs,#top .crumbs a{color:var(--bardim)} #top .crumbs a:hover{color:var(--barink)}
#top .who{color:var(--bardim);gap:12px} #top .who a{color:var(--bardim)} #top .who a:hover{color:var(--barink)}
#top .appear{background:transparent;border:1px solid transparent;color:var(--bardim);border-radius:2px;width:32px;height:32px}
#top .appear:hover{background:var(--barhover);color:var(--barink)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff!important;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-decoration:none!important;letter-spacing:.02em}
.btn.ghost{background:transparent;border-color:var(--barline);color:var(--barink)} .btn.ghost:hover{background:var(--barhover)}
.shell{min-height:calc(100vh - 48px)}
#side{width:240px;height:calc(100vh - 48px);padding:12px 0;background:var(--panel)}
#side .stitle,#side .pname{padding:6px 18px 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
#side a{display:flex;align-items:center;gap:12px;padding:0 18px;height:38px;color:var(--ink);border-left:3px solid transparent;font-size:13px}
#side a .ic{color:var(--dim)}
#side a:hover{background:var(--hover)} #side a:hover .ic{color:var(--ink2)}
#side a.on{background:var(--sel);border-left-color:var(--acc);color:var(--ink2);font-weight:600} #side a.on .ic{color:var(--acc)}
#side .sproj{margin:12px 0 4px;padding-top:10px}
#side .sproj a{padding-left:18px}
#side .pname{color:var(--ink2);text-transform:none;letter-spacing:0;font-size:13px}
#side .sfoot{padding-top:8px}
.shell main.page{padding:24px 32px 64px}
@media (max-width:900px){ #side{top:48px} .shell main.page{padding:18px 14px 50px} }
h1{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0 0 16px}
h2{font-size:16px;margin:28px 0 12px}
.btn{border-radius:2px;padding:0 16px;height:32px;line-height:30px;border-color:#bfbfbf;font-weight:600;font-size:13px;background:var(--panel)}
html[data-appearance="dark"] .btn{border-color:#5b6473}
.btn.small{height:26px;line-height:24px;padding:0 10px;font-size:12px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff} .btn.primary:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.danger{color:var(--bad)} .btn.danger:hover{background:var(--badbg)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{border-radius:2px;border-color:#bfbfbf;min-height:32px}
html[data-appearance="dark"] input[type=text],html[data-appearance="dark"] input[type=email],html[data-appearance="dark"] input[type=password],html[data-appearance="dark"] input[type=number],html[data-appearance="dark"] textarea,html[data-appearance="dark"] select{border-color:#5b6473}
input:focus,textarea:focus,select:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 1px var(--acc)}
label{color:var(--ink);font-weight:600;font-size:12px}
label:has(input[type=radio]),label:has(input[type=checkbox]){font-weight:400;font-size:13px}
.card,.stat,.result,table.list{border-radius:2px}
.card{padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
table.list th{font-size:12px;font-weight:600;color:var(--dim);text-transform:none;background:var(--hdr);padding:9px 12px;white-space:nowrap}
table.list td{padding:9px 12px;vertical-align:middle}
table.list tr:not(.hist):hover td{background:var(--hover)}
.stat{padding:14px 16px;border-top:3px solid var(--acc)} .stat b{font-size:24px}
.pill{border-radius:2px;font-weight:600}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 18px}
.grid2 label{margin-top:8px}
.toast{top:60px;border-radius:2px;background:#1e1e1e;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.step .n{border-radius:2px}
.auth .card{padding:28px}
/* viewer: dark header like the app's, Revit-style palettes, APS-style floating toolbar */
#vhdr{height:48px;background:var(--bar);border-bottom:1px solid var(--barline);color:var(--barink)}
#vhdr .t{color:var(--barink);font-size:14px} #vhdr .t small{color:var(--bardim)}
#vhdr a{color:var(--bardim)!important} #vhdr .logo{width:26px;height:26px}
#vhdr select{background:var(--barhover);color:var(--barink);border-color:var(--barline);min-height:28px}
#vhdr .appear{background:transparent;border-color:transparent;color:var(--bardim);border-radius:2px}
#vhdr .appear:hover{background:var(--barhover);color:var(--barink)}
#vhdr .badge{background:transparent;color:#f3b54a;border-color:#7a5b22}
@media (min-width:821px){ #browser{top:60px} #vcw{top:60px} #props{top:186px} }
.panel{border-radius:2px;box-shadow:0 4px 16px var(--shadow)}
.panel .ph{font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:9px 12px;color:var(--ink2)}
.tree div.row{padding:5px 12px}
#tb{background:rgba(11,31,51,.95);border-color:#0B1F33;border-radius:4px;box-shadow:0 4px 18px rgba(0,0,0,.3)}
#tb button{color:#e6e6e6;border-radius:2px}
#tb button:hover{background:#1C3A5C}
#tb button.on{background:var(--acc);color:#fff}
#tb .sep{background:#2A4566}
.pop{border-radius:2px}
.seg,.seg button,.vals button,button.mini{border-radius:2px}
.seg button.on{background:var(--acc);color:#fff;box-shadow:none}
@media (max-width:820px){ #vcw{top:100px} }
#top .csep{margin:0 8px;color:var(--bardim);opacity:.7}
#top .appear,#vhdr .appear{font-size:16px;line-height:1}
@media (max-width:600px){ #top{gap:8px;padding:0 10px} #top .home{padding-right:8px} #top .btn.ghost{padding:0 10px;height:30px;line-height:28px;font-size:12px} }
/* page heads, scenes (list and tiles), scene page, link filters */
.phead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.phead h1,.phead h2{margin:0}
.phead.sub{margin:26px 0 12px}
table.list td.act,table.list th.act{text-align:right;width:1%;white-space:nowrap}
.acts{display:inline-flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
table.list td.act .acts .btn{margin:0}
table.list td.tcell,table.list th.tcell{width:96px;padding-right:0}
.thumb{display:block;width:88px;height:55px;object-fit:cover;border:1px solid var(--line);border-radius:2px;background:var(--hdr)}
.thumb.none{display:flex;align-items:center;justify-content:center;color:var(--dim)} .thumb.none .ic{width:22px;height:22px;opacity:.6}
.thumb.big{width:100%;height:auto;aspect-ratio:16/10;border:0;border-bottom:1px solid var(--line);border-radius:0}
.thumb.big.none .ic,.thumb.hero.none .ic{width:40px;height:40px}
.thumb.hero{width:360px;max-width:100%;height:auto;aspect-ratio:16/10}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:2px;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s,border-color .15s}
.tile:hover{border-color:var(--acc);box-shadow:0 4px 14px var(--shadow)}
.tile .tbody{padding:12px 14px 6px;flex:1}
.tile .tact{padding:8px 14px 14px;display:flex;gap:6px;flex-wrap:wrap}
.scenehead{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:20px}
.scenehead .sinfo{flex:1;min-width:280px}
.facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px;color:var(--dim)} .facts b{color:var(--ink2)}
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.seg .n{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--line2);color:var(--dim);font-size:11px;font-weight:600}
.seg button.on .n{background:rgba(255,255,255,.25);color:#fff}
textarea.drop{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc);background:var(--sel)}
.offscreen-viewer{position:fixed;left:0;top:0;width:1px;height:1px;overflow:hidden;visibility:hidden;pointer-events:none;z-index:-1}
#tb button:disabled{opacity:.35;cursor:default}
#lab{gap:8px}
/* Generate with AI (public/ai.js) */
.aigen{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.aigen.off{color:var(--dim)}
.aigen ol{margin:6px 0 0 18px;padding:0} .aigen ol:empty{display:none}
input[type=number]{border:1px solid var(--line);border-radius:4px;padding:7px 9px;background:var(--input);color:var(--ink);width:100%}
/* Help: contents column and sections with pictures */
.helpwrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.htoc{position:sticky;top:16px;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.htoc .stitle{padding:0 14px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.htoc a{padding:6px 14px;color:var(--ink);border-left:3px solid transparent;margin-left:-2px}
.htoc a:hover{background:var(--hover);text-decoration:none}
.htoc a.on{border-left-color:var(--acc);color:var(--ink2);font-weight:600}
.hbody{max-width:980px} .hbody section.card{margin-bottom:18px;scroll-margin-top:16px}
.hbody section h2{margin-top:0}
.hfig{margin:16px 0}
.hfig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:2px;box-shadow:0 2px 10px var(--shadow)}
.hfig figcaption{margin-top:6px;color:var(--dim);font-size:12px}
table.htools td:first-child{white-space:nowrap;font-weight:600;width:140px}
.steps-n li{margin:6px 0}
@media (max-width:900px){ .helpwrap{grid-template-columns:1fr} .htoc{position:static;border-left:0;flex-direction:row;flex-wrap:wrap;gap:4px} .htoc .stitle{display:none} .htoc a{border:1px solid var(--line);border-radius:2px;margin:0;padding:4px 8px;font-size:12px} }
.tree div.row{flex-wrap:nowrap;min-width:0} .tree .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tree .cnt{flex:none;padding-left:6px}
@media (min-width:821px){ #browser{width:290px} }
/* viewer panels: resize handles (edges and outer corner) */
.panel .rz{position:absolute;z-index:6;display:block}
.panel .rz-e{top:0;right:-4px;width:8px;height:100%;cursor:ew-resize}
.panel .rz-w{top:0;left:-4px;width:8px;height:100%;cursor:ew-resize}
.panel .rz-s{left:0;bottom:-4px;height:8px;width:100%;cursor:ns-resize}
.panel .rz-se{right:-4px;bottom:-4px;width:16px;height:16px;cursor:nwse-resize}
.panel .rz-sw{left:-4px;bottom:-4px;width:16px;height:16px;cursor:nesw-resize}
.panel .rz-se::after,.panel .rz-sw::after{content:"";position:absolute;bottom:7px;width:8px;height:8px;border-bottom:2px solid var(--dim);opacity:.55}
.panel .rz-se::after{right:7px;border-right:2px solid var(--dim)} .panel .rz-sw::after{left:7px;border-left:2px solid var(--dim)}
.panel .rz:hover{background:rgba(45,125,255,.18)} .panel .rz-se:hover,.panel .rz-sw:hover{background:transparent}
body.resizing,body.resizing *{user-select:none!important;cursor:inherit}
@media (max-width:820px){ .panel .rz{display:none} }
.panel .pb{flex:1 1 auto;min-height:0}
/* viewer: the scenes panel (like the model browser) and the scene chip in the header */
#vhdr .hspace{flex:1 1 auto}
.scenechip{display:inline-flex;align-items:center;gap:6px;max-width:34vw;height:30px;padding:0 8px 0 12px;border:1px solid var(--barline);border-radius:2px;background:var(--barhover);color:var(--barink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.scenechip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scenechip svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;transition:transform .15s}
.scenechip:hover{border-color:var(--acc)} .scenechip.on{border-color:var(--acc)} .scenechip.on svg{transform:rotate(180deg)}
#scenesP{left:50%;transform:translateX(-50%);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 64px);width:340px;max-height:min(50%,420px)}
#scenesP .ph .cnt{margin-left:8px;color:var(--dim);font-weight:400}
#scenesP #opts{padding:4px 0}
#scenesP #opts button.row{display:flex;width:100%;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;padding:8px 14px}
#scenesP #opts button.row:hover{background:var(--hover)}
#scenesP #opts button.row.sel{background:var(--sel);color:var(--ink2);font-weight:600}
@media (max-width:820px){ #scenesP{left:6px;right:6px;width:auto;transform:none;bottom:76px} .scenechip{max-width:46vw} }
@media (max-width:480px){ #tb{padding:3px;max-width:calc(100vw - 8px)} #tb button{width:29px;height:36px} #tb svg{width:19px;height:19px} #tb .sep{margin:4px 1px} }
@media (max-width:600px){ #tb{overflow-x:auto;scrollbar-width:none;justify-content:flex-start} #tb::-webkit-scrollbar{display:none} #tb button,#tb .sep{flex:none} }
/* the preloader: the BIM Peek mark builds itself in the middle — the outline is drawn, the aqua top and
   the blue side slide in — then starts again; a thin bar runs under it (public/brand.js) */
.preloader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;color:var(--mark)}
.preloader.full{position:fixed;inset:0;background:var(--bg);z-index:60}
.preloader.overlay{position:fixed;inset:48px 0 0 0;background:color-mix(in srgb,var(--bg) 78%,transparent);z-index:40;animation:pl-in .2s ease-out}
.preloader.inline{padding:18px 0}
.preloader .pl-mark{width:72px;height:73px;overflow:visible}
.preloader.inline .pl-mark{width:44px;height:45px}
.pl-mark .o1,.pl-mark .o2{stroke-dasharray:100;stroke-dashoffset:100;animation:pl-draw 2.4s cubic-bezier(.6,0,.3,1) infinite}
.pl-mark .o2{animation-delay:.15s}
.pl-mark .f1,.pl-mark .f2{opacity:0;animation:pl-face 2.4s cubic-bezier(.2,.7,.2,1) infinite;transform-box:fill-box;transform-origin:left center}
.pl-mark .f1{animation-delay:.55s} .pl-mark .f2{animation-delay:.75s}
.preloader .pl-logo{width:56px;height:56px;animation:pl-float 1.6s ease-in-out infinite}
.preloader .pbar{position:relative;width:96px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.preloader.inline .pbar{width:64px}
.preloader .pbar::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--acc),var(--acc3));animation:pl-slide 1.2s ease-in-out infinite}
@keyframes pl-draw{0%{stroke-dashoffset:100;opacity:1}38%,82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes pl-face{0%{opacity:0;transform:translateX(22px) scaleX(.6)}22%,58%{opacity:1;transform:none}75%{opacity:0;transform:translateX(-4px)}100%{opacity:0}}
@keyframes pl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pl-slide{0%{left:-40%}100%{left:100%}}
@keyframes pl-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pl-mark .o1,.pl-mark .o2{animation:none;stroke-dashoffset:0}.pl-mark .f1,.pl-mark .f2{animation:none;opacity:1}.preloader .pl-logo,.preloader .pbar::after{animation:none}}
#vmsg.loading{background:transparent;border:0;box-shadow:none}
.auth .mark{display:block;margin:0 auto 6px;color:var(--mark)}
.avatar{background:linear-gradient(135deg,var(--acc),var(--acc3))!important}
/* tabs (Account) */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:4px 0 20px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;color:var(--dim);font:inherit;font-weight:600;padding:10px 16px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--ink2)}
.tabs button.on{color:var(--ink2);border-bottom-color:var(--acc)}
.tabpane[hidden]{display:none}
.tabpane > h2:first-child{margin-top:0}
.hfig a{display:inline-block;max-width:100%;cursor:zoom-in}
.hfig img{max-width:100%;height:auto;width:auto}
.brand .wm2,#top .brand .wm2{font-weight:400;margin-left:.22em}
/* text and filled buttons in a deeper shade of the brand blue, for legible white-on-blue (WCAG AA) */
a{color:var(--acctext)}
.btn.primary{background:var(--accbtn);border-color:var(--accbtn)} .btn.primary:hover{background:var(--accbtn2);border-color:var(--accbtn2)}
/* AI credits */
.credits .cbal{font-size:15px;color:var(--dim)} .credits .cbal b{font-size:22px;color:var(--ink2)}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.pack{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.pack:hover{border-color:var(--acc);box-shadow:0 2px 10px var(--shadow)}
.pack b{font-size:22px;color:var(--ink2)} .pack span{color:var(--dim);font-size:12px} .pack em{font-style:normal;font-weight:700;color:var(--acctext);margin-top:6px}
.pack:disabled{opacity:.6;cursor:default}
/* fly mode: the on-screen pad (hold to move), bottom left above the toolbar */
#flyPad{display:grid;grid-template-columns:repeat(3,34px);grid-auto-rows:30px;gap:3px}
#flyPad button{border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font-size:16px;cursor:pointer;opacity:.9;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 1px 4px var(--shadow)}
#flyPad button:active{background:var(--sel);color:var(--acc)}
#c.flying{cursor:crosshair}
#fly{flex-wrap:nowrap;gap:12px} #fly .muted{max-width:230px;text-align:left;line-height:1.35}
#fly label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
@media (max-width:820px){ #fly .muted{display:none} #flyPad{grid-template-columns:repeat(3,42px);grid-auto-rows:38px} }

/* drawings panel */
#drawP{left:50%;transform:translateX(-50%);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 64px);width:380px;max-height:min(60%,480px)}
#drawP .pb{display:flex;flex-direction:column;gap:8px;padding:8px 10px;overflow:auto}
#drawP .drow{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 4px}
#drawP .drow .nm{flex:1;display:flex;flex-direction:column;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#drawP .drow small{color:var(--dim);font-size:11px}
#drawP .drow .x{cursor:pointer;color:var(--dim);padding:0 4px}
#drawP .dact{display:flex;gap:8px;justify-content:space-between}
#drawP .dact .primary{background:var(--acc);color:#fff;border:0;border-radius:4px;padding:6px 14px;font-weight:600;cursor:pointer}
#drawP .dact .primary:disabled,#drawP .dact .mini:disabled{opacity:.5;cursor:default}
#drawP .dnote{line-height:1.35}
@media (max-width:820px){ #drawP{left:6px;right:6px;width:auto;transform:none;bottom:76px} }

/* hidden elements */
.tree .row.el{display:flex;align-items:center;gap:4px}
.tree .row.el .eye{flex:none;width:14px;height:14px;opacity:.75}
.tree .row.el.off .nm{opacity:.45;text-decoration:line-through}
.tree .row.hidbar{display:flex;align-items:center;gap:8px;background:var(--sel);font-size:12px}
.tree .row.hidbar .nm{flex:1}
#ptab .pact{display:flex;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line)}

/* phones: the viewer header stays on one line; the title gives way first */
@media (max-width:820px){
  #vhdr .t{flex:1 1 0;min-width:0;font-size:13px}
  #vhdr .hspace{flex:0 0 0}
  #vhdr > *:not(.t){flex-shrink:0}
  .scenechip{max-width:32vw;padding:0 6px 0 8px;font-size:12px}
  #vhdr select{max-width:19vw;padding:4px 2px}
  #vhdr .logo{display:none}
  #vhdr .badge{margin-left:6px;padding:1px 6px;font-size:10px}
}
/* fly bar: walk and speed beside the pad */
#fly .fopts{display:flex;align-items:center;gap:12px}
#fly .fspd{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
@media (max-width:820px){
  #fly{gap:10px;padding:8px;max-width:calc(100vw - 12px);box-sizing:border-box}
  #fly .fopts{flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
  #fly #flySpeed{width:min(120px,30vw)}
  #fly label{white-space:nowrap}
}