/* Fonts moved to assets/fonts.css, loaded via its own <link> in index.html.
   An @import here forced the browser to parse this file before it could even
   discover the font request; a parallel <link> starts both at once. */

/* ═══ TOKENS ═══ */
[data-theme="dark"]{
  --bg:#0c0c0c;--bg2:#141414;--bg3:#1c1c1c;--bg4:#252525;--bg5:#303030;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.12);
  --text:#efefef;--text2:#888;--text3:#505050;--text4:#333;
  --shadow:0 4px 24px rgba(0,0,0,.7);--canvas:#0e0e0e;--grid:rgba(255,255,255,.025);
  --card:#181818;--card2:#1f1f1f;
}
[data-theme="light"]{
  --bg:#f0efe9;--bg2:#ffffff;--bg3:#f4f3ee;--bg4:#eae8e0;--bg5:#dddbd2;
  --border:rgba(0,0,0,.07);--border2:rgba(0,0,0,.14);
  --text:#1a1a1a;--text2:#666;--text3:#aaa;--text4:#ddd;
  --shadow:0 4px 24px rgba(0,0,0,.12);--canvas:#eae8e2;--grid:rgba(0,0,0,.035);
  --card:#ffffff;--card2:#f8f7f2;
}
[data-theme="gray"]{
  --bg:#1d1d1d;--bg2:#252525;--bg3:#2d2d2d;--bg4:#373737;--bg5:#424242;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.14);
  --text:#f0f0f0;--text2:#b0b0b0;--text3:#868686;--text4:#616161;
  --shadow:0 4px 24px rgba(0,0,0,.45);--canvas:#1f1f1f;--grid:rgba(255,255,255,.025);
  --card:#2a2a2a;--card2:#343434;
}
:root{
  --gold:#c98a1a;--gold2:#e0a020;--gold3:#f5c242;
  --teal:#1a9c7a;--red:#cc3333;--blue:#3d7fd4;
  --mono:'JetBrains Mono',monospace;
  --head:'Barlow Condensed',sans-serif;
  --body:'Barlow',sans-serif;
  --r:6px;--r2:10px;--r3:14px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--body);overflow:hidden;}

/* ═══ SCREENS ═══ */
.screen{position:fixed;inset:0;display:none;flex-direction:column;}
.screen.active{display:flex;}

/* ════════════════════════════════════════
   AUTH SCREEN
════════════════════════════════════════ */
#auth-screen{
  background:var(--bg);
  align-items:center;justify-content:center;
}
.auth-card{
  width:400px;background:var(--card);
  border:1px solid var(--border2);border-radius:var(--r3);
  padding:36px;
}
.auth-logo{display:flex;align-items:center;justify-content:center;margin-bottom:28px;}
.auth-title{font-family:var(--head);font-size:22px;font-weight:700;text-align:center;margin-bottom:4px;letter-spacing:.5px;text-transform:uppercase;}
.auth-sub{font-size:12px;color:var(--text2);text-align:center;margin-bottom:24px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;font-weight:500;color:var(--text2);margin-bottom:5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;}
.field input{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:9px 12px;font-size:13px;font-family:var(--body);color:var(--text);outline:none;transition:border-color .14s;}
.field input:focus{border-color:var(--gold);}
.field input::placeholder{color:var(--text3);}
.auth-err{font-size:11px;color:#e06060;margin-bottom:12px;padding:8px 12px;background:rgba(204,51,51,.1);border:1px solid rgba(204,51,51,.2);border-radius:var(--r);display:none;}
.auth-err.show{display:block;}
.btn-full{width:100%;padding:10px;background:var(--gold);border:none;border-radius:var(--r);color:#fff;font-family:var(--head);font-size:15px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:background .14s;text-transform:uppercase;}
.btn-full:hover{background:var(--gold2);}
.btn-full:disabled{opacity:.5;cursor:not-allowed;}
.auth-switch{text-align:center;margin-top:16px;font-size:12px;color:var(--text2);}
.auth-switch span{color:var(--gold2);cursor:pointer;text-decoration:underline;}
.auth-bg-grid{position:fixed;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0;}
.auth-card{position:relative;z-index:1;}

/* ════════════════════════════════════════
   DASHBOARD SCREEN
════════════════════════════════════════ */
#dash-screen{flex-direction:row;}

/* SIDEBAR */
#sidebar{
  width:220px;flex-shrink:0;background:var(--bg2);
  border-right:1px solid var(--border2);
  display:flex;flex-direction:column;
  transition:width .2s;
}
.sb-logo{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;flex-shrink:0;}
.sb-fb-btn{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-family:var(--body);font-weight:600;color:#fff;background:var(--gold);border:none;cursor:pointer;padding:3px 12px;border-radius:4px;transition:background .14s;letter-spacing:.2px;}
.sb-fb-btn:hover{background:var(--gold2);}
.sb-user{padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sb-username{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-email{font-size:10px;color:var(--text2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.sb-plan{display:inline-block;font-size:8px;font-family:var(--mono);padding:1px 5px;border-radius:3px;background:rgba(201,138,26,.15);color:var(--gold2);border:1px solid rgba(201,138,26,.25);margin-top:3px;text-transform:uppercase;}
.sb-nav{flex:1;padding:8px 0;overflow-y:auto;}
.sb-nav::-webkit-scrollbar{width:2px;}
.sb-nav::-webkit-scrollbar-thumb{background:var(--bg5);}
.sb-section{font-size:9px;font-family:var(--mono);color:var(--text3);text-transform:uppercase;letter-spacing:.7px;padding:8px 16px 4px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 16px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text2);transition:all .12s;border-left:2px solid transparent;user-select:none;}
.nav-item:hover{background:var(--bg3);color:var(--text);}
.nav-item.active{background:rgba(201,138,26,.08);color:var(--gold2);border-left-color:var(--gold);}
.nav-item svg{flex-shrink:0;opacity:.7;}
.nav-item.active svg{opacity:1;}
.sb-bottom{padding:10px;border-top:1px solid var(--border);flex-shrink:0;}

/* MAIN CONTENT */
#dash-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}

/* TOP BAR */
#dash-topbar{
  height:50px;flex-shrink:0;background:var(--bg2);
  border-bottom:1px solid var(--border2);
  display:flex;align-items:center;padding:0 20px;gap:12px;
}
.dash-title{font-family:var(--head);font-size:16px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;}
.dash-title span{color:var(--gold2);}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}

/* CONTENT AREA */
#dash-content{flex:1;overflow-y:auto;padding:24px;}
#dash-content::-webkit-scrollbar{width:4px;}
#dash-content::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:4px;}

/* SHARED BUTTON STYLES */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r);cursor:pointer;font-size:12px;font-family:var(--body);font-weight:500;border:1px solid var(--border2);background:var(--bg3);color:var(--text);transition:all .14s;white-space:nowrap;user-select:none;text-decoration:none;}
.btn:hover{background:var(--bg4);border-color:var(--gold);color:var(--gold2);}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:600;}
.btn.gold:hover{background:var(--gold2);}
.btn.red{background:rgba(204,51,51,.1);border-color:rgba(204,51,51,.3);color:#e06060;}
.btn.red:hover{background:rgba(204,51,51,.2);}
.btn.sm{padding:4px 10px;font-size:11px;}
.btn.ico{padding:6px 9px;}
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:3px;font-size:9px;font-family:var(--mono);font-weight:500;}
.badge-gold{background:rgba(201,138,26,.12);color:var(--gold2);border:1px solid rgba(201,138,26,.25);}
.badge-teal{background:rgba(26,156,122,.12);color:var(--teal);border:1px solid rgba(26,156,122,.25);}
.badge-gray{background:var(--bg4);color:var(--text2);border:1px solid var(--border2);}

/* PROJECT CARDS */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.proj-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--r2);padding:18px;cursor:pointer;transition:all .14s;position:relative;}
.proj-card:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow);}
.proj-card.pinned{box-shadow:0 8px 26px rgba(0,0,0,.18);}
.proj-card-accent{position:absolute;inset:0 0 auto 0;height:5px;border-top-left-radius:var(--r2);border-top-right-radius:var(--r2);opacity:.95;}
.proj-card-pin{position:absolute;top:10px;right:10px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border2);background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;transition:all .14s;z-index:2;font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;}
.proj-card-pin:hover{border-color:var(--gold);color:var(--gold2);background:rgba(201,138,26,.12);}
.proj-card-pin.active{background:rgba(201,138,26,.15);border-color:rgba(201,138,26,.35);color:var(--gold2);}
.proj-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;}
.proj-card-name{font-size:14px;font-weight:600;line-height:1.3;}
.proj-card-meta{font-size:10px;color:var(--text2);font-family:var(--mono);margin-top:4px;}
/* Same nowrap overflow the actions row had. Five badges appear only when a
   project has parts, assemblies, images, drawings and a cost, which is why
   this went unnoticed -- four fit, five need ~290px against ~243px. */
.proj-card-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}

/* Tree focus highlighting. Dimming carries it further than brightening does:
   on a crowded diagram the eye finds the one thing still at full strength
   faster than the one thing that got slightly brighter. Opacity and stroke
   only, so nothing moves and no layout is recomputed. */
#bsvg g[data-item]{transition:opacity .18s ease;}
#bsvg g[data-item].tree-dim{opacity:.16;}
#bsvg g[data-item].tree-lit .nrect{stroke:var(--gold2);stroke-width:1.8;}
#bsvg g[data-item].tree-focus .nrect{stroke:var(--gold);stroke-width:3;}
#bsvg path.tree-dim{opacity:.12;transition:opacity .18s ease;}
#bsvg path.tree-lit{stroke:var(--gold2);stroke-width:2.4;opacity:1;}

/* ═══ SHARE LANDING PAGE ═══ */
.landing-bg{position:absolute;inset:0;background:
  radial-gradient(1100px 600px at 50% -10%, rgba(201,138,26,.18), transparent 60%),
  radial-gradient(800px 500px at 15% 100%, rgba(26,156,122,.10), transparent 60%),
  radial-gradient(700px 500px at 90% 90%, rgba(61,127,212,.09), transparent 60%),
  var(--bg);
  background-attachment:fixed;}
/* Scrolls, and the footer sits after the card in flow rather than pinned over
   it. A tall logo or a long address used to push the card under the fixed
   footer, because .screen is position:fixed with no overflow of its own. */
#landing-screen.active{overflow-y:auto;}
.landing-inner{position:relative;z-index:1;flex:1 0 auto;display:flex;align-items:center;justify-content:center;padding:40px 20px 24px;}
.landing-card{width:100%;max-width:520px;background:var(--card);border:1px solid var(--border2);border-radius:var(--r3);
  box-shadow:0 24px 70px rgba(0,0,0,.45);padding:38px 34px 32px;text-align:center;
  animation:landingIn .5s cubic-bezier(.22,1,.36,1) both;}
@keyframes landingIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* The invisible boundary. Whatever gets uploaded -- a wide wordmark, a tall
   product photo, a square icon -- is scaled to fit inside this box and centred
   in it. The box reserves its space whether or not the image fills it, so the
   card does not jump about between different logo shapes.
   Targeted by id: the element carries an id and no class, and the earlier
   class-based rule silently matched nothing, which is why a photo rendered at
   full natural size. */
.landing-logo-wrap{margin:0 auto 22px;width:100%;max-width:280px;display:flex;align-items:center;justify-content:center;}
/* The boundary is a ceiling, not a fixed frame. A tall logo is capped at 150px
   and a wide one at the wrap width, but the box then hugs whatever it gets --
   a fixed height left a short wordmark floating in dead space above the
   company name. Only one logo ever shows per page, so there is nothing for a
   reserved height to keep steady.
   contain, not cover: a logo must never be cropped to fill a box. */
#landing-logo{display:block;max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain;}
.landing-company{font-family:var(--head);font-size:24px;font-weight:700;letter-spacing:.4px;line-height:1.2;}
.landing-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);margin:20px 0;}
.landing-project-label{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;color:var(--gold2);}
.landing-project{font-size:19px;font-weight:600;margin-top:6px;line-height:1.3;word-break:break-word;}
.landing-project-desc{font-size:12px;color:var(--text2);margin-top:6px;line-height:1.55;}
.landing-meta{margin-top:18px;display:flex;flex-direction:column;gap:7px;text-align:left;}
.landing-meta-row{display:flex;gap:10px;font-size:11px;line-height:1.5;}
.landing-meta-k{font-family:var(--mono);font-size:9px;letter-spacing:.5px;color:var(--text3);min-width:74px;flex-shrink:0;padding-top:2px;text-transform:uppercase;}
.landing-meta-v{color:var(--text);word-break:break-word;}
.landing-cta{margin-top:26px;width:100%;justify-content:center;padding:11px 20px;font-size:13px;}
.landing-footer{position:relative;z-index:1;flex-shrink:0;padding:0 20px 26px;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;}
/* The white mark is the default because dark and gray are both dark themes;
   only the light theme swaps to the black one. */
.landing-wc-logo{height:34px;width:auto;opacity:.9;}
.wc-logo-on-light{display:none;}
[data-theme="light"] .wc-logo-on-dark{display:none;}
[data-theme="light"] .wc-logo-on-light{display:block;}
.landing-footer-note{font-family:var(--mono);font-size:9px;letter-spacing:.5px;color:var(--text3);}
@media (max-width:560px){
  .landing-card{padding:28px 20px 24px;}
  .landing-company{font-size:20px;}
  .landing-logo-wrap{max-width:220px;}
  #landing-logo{max-height:110px;}
  .landing-meta-row{flex-direction:column;gap:1px;}
  .landing-meta-k{min-width:0;}
}
/* Short viewports: give the card back the vertical room the logo would take. */
@media (max-height:720px){
  #landing-logo{max-height:104px;}
}

/* ═══ BRANDING FIELDS IN PROJECT SETTINGS ═══ */
.brand-note{font-size:10px;color:var(--gold2);background:rgba(201,138,26,.08);border:1px solid rgba(201,138,26,.2);border-radius:var(--r);padding:7px 10px;margin-bottom:12px;line-height:1.5;}
.brand-logo-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.brand-logo-box{width:132px;height:74px;flex-shrink:0;border:1px dashed var(--border2);border-radius:var(--r);background:var(--bg3);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.brand-logo-box img{max-width:100%;max-height:100%;object-fit:contain;}
.brand-logo-box span{font-size:10px;color:var(--text3);font-family:var(--mono);}
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:560px){.brand-grid{grid-template-columns:1fr;}}
.brand-default-opt{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text2);cursor:pointer;margin-top:4px;}

/* ═══ SHARE DIALOG ═══ */
.share-sec-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px;}
.share-sec-label{font-size:10px;color:var(--text2);font-family:var(--mono);letter-spacing:.5px;display:flex;align-items:center;gap:6px;}
.share-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(201,138,26,.15);border:1px solid rgba(201,138,26,.3);color:var(--gold2);font-size:10px;font-weight:600;}
.share-editor-box{border:1px solid rgba(201,138,26,.3);background:rgba(201,138,26,.05);border-radius:var(--r);padding:12px;margin-bottom:10px;}
.share-field{margin-bottom:10px;}
.share-field:last-of-type{margin-bottom:0;}
.share-field-label{display:block;font-size:9px;color:var(--text2);font-family:var(--mono);letter-spacing:.5px;margin-bottom:5px;}
.share-exp-opt{display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer;}
.share-filter-note{margin-top:10px;padding:8px 10px;background:rgba(201,138,26,.06);border:1px solid rgba(201,138,26,.2);border-radius:var(--r);font-size:10px;color:var(--text2);}
.share-empty{font-size:11px;color:var(--text3);padding:10px 2px;}
/* wrap: the row is name plus three buttons inside a modal that gets narrow on
   small screens, the same overflow the project cards had. */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg3);}
.share-row.active{border-color:rgba(201,138,26,.35);background:rgba(201,138,26,.06);}
.share-row.expired{opacity:.6;}
.share-row-main{flex:1;min-width:150px;}
.share-row-name{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.share-row-meta{font-size:10px;color:var(--text2);font-family:var(--mono);margin-top:2px;}
.share-row-actions{display:flex;flex-wrap:wrap;gap:6px;}
/* wrap, not nowrap: the four actions need ~297px and a grid cell gives ~224px,
   so without this the Share button spills outside the card. The 760px
   breakpoint already set this; the overflow was everything above it. */
.proj-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.proj-color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px;}
.proj-color-btn{height:34px;border-radius:10px;border:1px solid var(--border2);cursor:pointer;position:relative;transition:transform .14s,border-color .14s,box-shadow .14s;}
.proj-color-btn:hover{transform:translateY(-1px);border-color:var(--gold);}
.proj-color-btn.active{border-color:var(--gold3);box-shadow:0 0 0 2px rgba(201,138,26,.18);}
.proj-color-btn.active::after{content:'OK';position:absolute;right:8px;top:7px;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.new-proj-card{background:transparent;border:1.5px dashed var(--border2);border-radius:var(--r2);padding:18px;cursor:pointer;transition:all .14s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;}
.new-proj-card:hover{border-color:var(--gold);background:rgba(201,138,26,.03);}
.new-proj-icon{width:40px;height:40px;border-radius:10px;background:var(--bg4);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:18px;}
/* Project card cover image */
.proj-card-cover{width:100%;height:72px;object-fit:cover;border-radius:calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0;display:block;margin:-18px -18px 12px -18px;width:calc(100% + 36px);}
/* Settings image upload area */
.ps-img-drop{border:1.5px dashed var(--border2);border-radius:10px;min-height:80px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .14s;position:relative;overflow:hidden;background:var(--bg2);}
.ps-img-drop:hover{border-color:var(--gold);}
.ps-img-drop img{width:100%;max-height:140px;object-fit:cover;display:block;border-radius:8px;}
.ps-img-drop-label{font-size:11px;color:var(--text2);text-align:center;padding:14px;pointer-events:none;}
.ps-img-actions{display:flex;gap:6px;margin-top:6px;}

/* EMPTY STATE */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 40px;text-align:center;}
.empty-icon{font-size:48px;opacity:.3;}
.empty-title{font-family:var(--head);font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.empty-sub{font-size:13px;color:var(--text2);max-width:360px;line-height:1.7;}

/* MODAL */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:1000;}
.overlay.show{display:flex;}
.modal{background:var(--card);border:1px solid var(--border2);border-radius:var(--r3);padding:28px;width:460px;max-width:95vw;max-height:90vh;overflow-y:auto;position:relative;}
.modal::-webkit-scrollbar{width:3px;}
.modal::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:4px;}
.modal-title{font-family:var(--head);font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.modal-sub{font-size:11px;color:var(--text2);margin-bottom:20px;line-height:1.6;}
.modal-close{position:absolute;top:16px;right:16px;width:28px;height:28px;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:13px;}
.modal-close:hover{color:var(--text);background:var(--bg5);}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
#modal-project-files .modal{overflow:hidden;padding-bottom:20px;}
#modal-project-files .modal-title,
#modal-project-files .modal-sub,
#modal-project-files #project-files-toolbar,
#modal-project-files #project-files-readonly-note,
#modal-project-files .modal-footer{flex-shrink:0;}
#modal-project-files #project-files-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;flex:1;min-height:320px;overflow:hidden;}
#modal-project-files #project-files-folders{border:1px solid var(--border2);border-radius:var(--r2);background:var(--bg2);padding:10px;overflow:auto;min-height:0;}
#modal-project-files #project-files-list-wrap{border:1px solid var(--border2);border-radius:var(--r2);background:var(--bg2);display:flex;flex-direction:column;min-height:0;overflow:hidden;}
#modal-project-files #project-files-folder-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg3);flex-shrink:0;}
#modal-project-files #project-files-list{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;overflow:auto;padding:12px 14px 28px 14px;overscroll-behavior:contain;scroll-padding-bottom:28px;}
#modal-project-files .pf-folder-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);cursor:pointer;text-align:left;transition:all .14s;}
#modal-project-files .pf-folder-item:hover{border-color:var(--gold);background:rgba(201,138,26,.05);}
#modal-project-files .pf-folder-item.active{border-color:rgba(201,138,26,.4);background:rgba(201,138,26,.1);}
#modal-project-files .pf-file-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);min-height:72px;align-items:center;}
#modal-project-files .pf-file-main{display:flex;align-items:center;gap:12px;min-width:0;}
#modal-project-files .pf-file-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
#modal-project-files .pf-file-ext{min-width:52px;height:52px;border-radius:12px;border:1px solid rgba(201,138,26,.22);background:rgba(201,138,26,.08);display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;font-family:var(--mono);color:var(--gold2);padding:0 6px;}
#modal-project-files .pf-file-meta{font-size:9px;color:var(--text2);margin-top:2px;font-family:var(--mono);}
#modal-project-files .pf-empty{padding:18px;border:1px dashed var(--border2);border-radius:10px;color:var(--text2);font-size:11px;background:rgba(255,255,255,.02);}
#modal-project-files .pf-folder-count{font-size:9px;color:var(--text2);font-family:var(--mono);}
#modal-project-files .pf-mobile-note{display:none;}
#modal-project-files .modal-footer{margin-top:12px;background:var(--card);position:relative;z-index:1;}
#cad-view-wrap{border:1px solid var(--border2);border-radius:var(--r2);background:var(--bg2);height:min(70vh,620px);display:flex;flex-direction:column;overflow:hidden;}
#cad-view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--bg3);}
#cad-view-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;}
#cad-canvas-2d,#cad-canvas-3d{max-width:100%;max-height:100%;width:100%;height:100%;}
#cad-empty{font-size:11px;color:var(--text2);text-align:center;padding:18px;line-height:1.7;}
#cad-orient-3d{position:absolute;right:10px;top:10px;width:96px;height:96px;background:rgba(15,16,18,.68);border:1px solid rgba(216,155,47,.22);border-radius:10px;display:none;z-index:3;pointer-events:none;}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
.setting-row:last-child{border:none;}
.setting-label{font-size:12px;font-weight:500;}
.setting-desc{font-size:10px;color:var(--text2);margin-top:1px;}
.tog-grp{display:flex;gap:4px;}
.tog-btn{padding:4px 10px;border-radius:4px;font-size:10px;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-family:var(--mono);transition:all .13s;}
.tog-btn.on{background:var(--gold);border-color:var(--gold);color:#fff;}
.cad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px;}
.cad-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg3);cursor:pointer;font-size:11px;color:var(--text);transition:all .13s;}
.cad-btn:hover{border-color:var(--gold);color:var(--gold2);}
.cad-btn.active{background:rgba(201,138,26,.08);border-color:var(--gold);color:var(--gold2);}
.cad-btn.disabled{opacity:.55;cursor:not-allowed;color:var(--text2);}
.cad-btn small{font-size:9px;font-family:var(--mono);color:var(--text3);}

/* DANGER ZONE */
.danger-zone{border:1px solid rgba(204,51,51,.3);border-radius:var(--r2);padding:16px;margin-top:20px;}
.danger-title{font-size:12px;font-weight:600;color:#e06060;margin-bottom:10px;display:flex;align-items:center;gap:6px;}

/* ════════════════════════════════════════
   VIEWER SCREEN
════════════════════════════════════════ */
#viewer-screen{flex-direction:column;}
#viewer-topbar{
  height:48px;flex-shrink:0;background:var(--bg2);border-bottom:1px solid var(--border2);
  display:flex;align-items:center;padding:0;gap:0;
}
.vtb-logo{display:flex;align-items:center;padding:0 14px;height:100%;border-right:1px solid var(--border2);flex-shrink:0;gap:8px;}
.vtb-back{display:flex;align-items:center;gap:6px;padding:0 12px;height:100%;border-right:1px solid var(--border2);cursor:pointer;color:var(--text2);font-size:11px;transition:all .13s;flex-shrink:0;}
.vtb-back:hover{color:var(--gold2);background:var(--bg3);}
.vtb-mid{display:flex;align-items:center;gap:10px;padding:0 12px;flex:1;}
.vtb-right{display:flex;align-items:center;gap:6px;padding:0 12px;margin-left:auto;flex-shrink:0;}
.vpill{display:flex;align-items:center;gap:5px;background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:3px 9px;font-family:var(--mono);font-size:10px;color:var(--text2);}
.vpill .dot{width:5px;height:5px;border-radius:50%;background:var(--gold2);}
#vproj-label{display:inline-block;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vtog{display:flex;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;}
.vtb{padding:5px 10px;font-size:11px;cursor:pointer;color:var(--text2);display:flex;align-items:center;gap:4px;transition:all .13s;border:none;background:none;font-family:var(--body);font-weight:500;}
.vtb.active{background:var(--gold);color:#fff;}
.vtb:hover:not(.active){color:var(--text);background:var(--bg4);}

/* VIEWER LAYOUT */
#viewer-main{display:flex;flex:1;overflow:hidden;}
#viewer-main.mobile-only{display:flex;flex-direction:column;min-height:0;}
#viewer-main.mobile-only #lp{width:100%;flex:1;border-right:none;}
#viewer-main.mobile-only #rp{display:none;}
#dash-screen,#dash-main,#viewer-main,#rp,#viewer-topbar,.vtb-mid,.vtb-right{min-width:0;}
#mobile-view-note{display:none;padding:10px 14px;border-bottom:1px solid var(--border2);background:linear-gradient(180deg,rgba(184,142,64,.14),rgba(184,142,64,.05));font-size:11px;color:var(--text2);}
#mobile-view-note.show{display:block;}
#mobile-view-note .mobile-note-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
#mobile-view-note .mobile-note-text{line-height:1.5;}
#mobile-project-files-btn{display:none;}
.viewer-menu-toggle{display:none;}
.share-edit-save-btn{display:none;background:#d9b049;border-color:#d9b049;color:#fff;font-weight:700;}
.share-edit-save-btn:hover{background:#c59628;border-color:#c59628;color:#fff;}
.viewer-actions-menu{position:absolute;top:46px;right:10px;min-width:190px;background:var(--card);border:1px solid var(--border2);border-radius:10px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;gap:6px;z-index:60;}
.viewer-actions-menu.open{display:flex;}
.viewer-actions-menu .btn{justify-content:flex-start;}

@media (max-width:1366px){
  #sidebar{width:196px;}
  #dash-topbar{padding:0 14px;}
  #dash-content{padding:16px;}
  .projects-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
  .proj-card{padding:14px;}
  .btn{padding:5px 11px;font-size:11px;}
  #viewer-topbar{height:44px;}
  .vtb-back,.vtb-logo{padding:0 10px;}
  .vtb-mid,.vtb-right{padding:0 8px;}
  .vtb{padding:4px 8px;font-size:10px;}
  .vtb-right .btn{padding:4px 8px;font-size:10px;}
  #lp{width:300px;}
  #dd{width:276px;}
  #tv{padding:10px;}
  .tbl{font-size:10px;}
  .tbl th{padding:6px 8px;font-size:8.5px;}
  .tbl td{padding:5px 8px;}
}

@media (max-width:900px){
  #viewer-topbar{height:auto;flex-wrap:wrap;align-items:stretch;}
  .vtb-logo{display:none;}
  .vtb-back{height:44px;border-right:none;}
  .viewer-menu-toggle{display:inline-flex;align-items:center;justify-content:center;height:44px;margin-left:auto;border-left:1px solid var(--border2);border-radius:0;border-top:none;border-bottom:none;background:transparent;}
  .vtb-mid{width:100%;order:3;padding:10px 12px;flex-wrap:wrap;gap:8px;border-top:1px solid var(--border);}
  .vtb-right{display:none;width:100%;padding:8px 12px;overflow-x:auto;justify-content:flex-start;border-top:1px solid var(--border2);}
  .vtb-right.open{display:flex;}
  .vtb-right .btn{flex:0 0 auto;}
  .vpill{font-size:9px;padding:4px 8px;}
  .vtog{max-width:100%;overflow:auto;}
  #viewer-screen{min-height:100vh;overflow:hidden;}
  #mobile-view-note.show{padding:12px 14px;line-height:1.55;background:linear-gradient(180deg,rgba(184,142,64,.18),rgba(184,142,64,.06));}
  #mobile-project-files-btn{display:inline-flex;}
  #viewer-main.mobile-only{background:linear-gradient(180deg,var(--bg2),var(--bg));overflow:hidden;}
  #viewer-main.mobile-only #lp{width:100%;max-width:none;background:transparent;display:flex;flex-direction:column;min-height:0;}
  #viewer-main.mobile-only .lp-hdr{padding:12px 14px;position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);}
  #viewer-main.mobile-only .lp-search{padding:12px;}
  #viewer-main.mobile-only #lp-filter-grid{grid-template-columns:1fr !important;}
  #viewer-main.mobile-only .lp-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 8px 18px;}
  #viewer-main.mobile-only .lrow{min-height:56px;border:1px solid var(--border2);border-radius:10px;margin:8px 0;background:var(--bg2);}
  #viewer-main.mobile-only .lrow.sel{border-left:1px solid var(--gold);box-shadow:0 0 0 1px rgba(201,138,26,.28) inset;}
  #viewer-main.mobile-only .lrow-num{min-width:50px;padding-left:12px;}
  #viewer-main.mobile-only .lthumb,
  #viewer-main.mobile-only .lthph{width:38px;height:38px;border-radius:8px;}
  #viewer-main.mobile-only .linfo{padding:7px 8px 7px 4px;}
  #viewer-main.mobile-only .lname{font-size:12px;white-space:normal;line-height:1.35;}
}

@media (max-width:1200px) and (min-width:901px){
  #viewer-topbar{height:auto;flex-wrap:wrap;align-items:stretch;}
  .vtb-mid{order:1;flex:1 1 420px;padding:8px 10px;}
  .vtb-right{
    order:2;
    flex:1 1 100%;
    margin-left:0;
    padding:8px 10px;
    border-top:1px solid var(--border);
    justify-content:flex-start;
    flex-wrap:wrap;
    row-gap:6px;
  }
  .vtb-right .btn{flex:0 0 auto;}
  #lp{width:320px;}
  #dd{width:290px;}
  .vtb-right .btn{padding:5px 10px;font-size:10px;}
  #vproj-label{max-width:180px;}
  .chart-panel{grid-template-columns:minmax(280px,1fr);gap:12px;}
}

@media (max-width:1024px){
  #lp{width:268px;}
  #dd{width:248px;}
  .lp-hdr{padding:9px 10px;}
  .lp-search{padding:7px 8px;}
  #tv{padding:10px;}
  .proj-card-stats,.proj-card-actions{gap:6px;}
  .proj-card-name{font-size:13px;}
  .modal{padding:20px;}
  #modal-project-files #project-files-shell{grid-template-columns:220px minmax(0,1fr);}
  #vproj-label{max-width:140px;}
}

@media (max-width:980px){
  #dash-screen{flex-direction:column;}
  #sidebar{
    width:100%;
    height:56px;
    border-right:none;
    border-bottom:1px solid var(--border2);
    flex-direction:row;
    align-items:stretch;
  }
  .sb-logo,.sb-user,.sb-bottom{display:none;}
  .sb-nav{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .sb-section{display:none;}
  .nav-item{
    border-left:none;
    border:1px solid var(--border2);
    border-radius:8px;
    padding:7px 12px;
    white-space:nowrap;
    flex:0 0 auto;
  }
  .nav-item.active{border-left:none;border-color:var(--gold);}
  #dash-main{min-height:0;}
  #dash-topbar{padding:0 12px;gap:8px;}
  .dash-title{font-size:14px;}
  #dash-content{padding:14px;}
  .projects-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
  .proj-card{padding:14px;}
  .proj-card-actions{flex-wrap:wrap;}
  .proj-card-pin{top:8px;right:8px;}
}

@media (max-width:760px){
  .auth-card{width:94vw;padding:22px;}
  .auth-title{font-size:20px;}
  #dash-topbar{height:auto;flex-wrap:wrap;padding:10px 12px;}
  .topbar-actions{width:100%;justify-content:flex-start;margin-left:0;}
  .projects-grid{grid-template-columns:1fr;}
  .modal{
    width:96vw;
    max-width:96vw;
    max-height:92vh;
    padding:18px;
    border-radius:12px;
  }
  #modal-project-files .modal{
    width:96vw !important;
    max-width:96vw !important;
    max-height:92vh !important;
  }
  #modal-project-files #project-files-shell{
    grid-template-columns:1fr;
    min-height:0;
  }
  #modal-project-files #project-files-folders{
    max-height:160px;
  }
  #modal-project-files #project-files-list{
    padding:10px 10px 18px 10px;
  }
  #modal-project-files .pf-file-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  #modal-project-files .pf-file-actions{
    justify-content:flex-start;
  }
}

/* LEFT PANEL */
#lp{width:360px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border2);display:flex;flex-direction:column;}
.lp-hdr{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;}
.lp-title{font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text2);}
.lp-badge{font-size:9px;font-family:var(--mono);padding:2px 6px;border-radius:3px;background:var(--bg4);color:var(--gold2);border:1px solid rgba(201,138,26,.25);}
.lp-search{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;}
.lp-si{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:5px 9px;font-size:11px;font-family:var(--body);color:var(--text);outline:none;transition:border-color .14s;}
.lp-si:focus{border-color:var(--gold);}
.lp-si::placeholder{color:var(--text3);}
.lp-body{flex:1;overflow-y:auto;}
.lp-body::-webkit-scrollbar{width:3px;}
.lp-body::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:4px;}
#lp-flat{flex-direction:column;}
#lp-flat .flat-row:hover{background:var(--bg3);}
#lp-flat>div:last-child{scrollbar-width:thin;scrollbar-color:var(--bg5) transparent;}
#lp-flat>div:last-child::-webkit-scrollbar{width:3px;}
#lp-flat>div:last-child::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:4px;}
.lrow{display:flex;align-items:center;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;min-height:42px;}
.lrow:hover{background:var(--bg3);}
.lrow.sel{background:rgba(201,138,26,.09);border-left:2px solid var(--gold);}
.lrow-num{font-family:var(--mono);font-size:9px;color:var(--text3);min-width:44px;padding:0 4px 0 10px;flex-shrink:0;}
.lrow.sel .lrow-num{color:var(--gold2);}
.ltog{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--text3);border-radius:3px;background:var(--bg4);border:1px solid var(--border2);transition:all .12s;margin-right:2px;cursor:pointer;user-select:none;}
.ltog:hover{color:var(--gold2);border-color:var(--gold);}
.lsp{width:20px;flex-shrink:0;margin-right:2px;}
.lthumb{width:32px;height:32px;border-radius:4px;object-fit:cover;border:1px solid var(--border2);flex-shrink:0;}
.lthph{width:32px;height:32px;border-radius:4px;background:var(--bg4);border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;}
.linfo{flex:1;min-width:0;padding:4px 6px;}
.lpn{font-family:var(--mono);font-size:9px;color:var(--gold2);}
.lname{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lchips{display:flex;gap:3px;margin-top:2px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;padding:1px 5px;border-radius:3px;font-size:8px;font-family:var(--mono);font-weight:500;}
.c-gold{background:rgba(201,138,26,.12);color:var(--gold2);border:1px solid rgba(201,138,26,.2);}
.c-teal{background:rgba(26,156,122,.12);color:var(--teal);border:1px solid rgba(26,156,122,.2);}
.c-red{background:rgba(204,51,51,.1);color:#e06060;border:1px solid rgba(204,51,51,.2);}
.c-blue{background:rgba(61,127,212,.12);color:var(--blue);border:1px solid rgba(61,127,212,.25);}
.c-gray{background:var(--bg4);color:var(--text2);border:1px solid var(--border2);}
.lqty{font-family:var(--mono);font-size:9px;color:var(--text2);padding-right:10px;flex-shrink:0;}

/* RIGHT / CANVAS */
#rp{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;}
#bv{flex:1;position:relative;overflow:hidden;}
#bc{width:100%;height:100%;cursor:grab;position:relative;}
#bc.grabbing{cursor:grabbing;}
#bc::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;}
#bsvg{width:100%;height:100%;display:block;}
#tv{flex:1;overflow-y:auto;padding:16px;display:none;}
#tv::-webkit-scrollbar{width:4px;}
#tv::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:4px;}
.chart-wrap{display:flex;flex-direction:column;gap:14px;}
.chart-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.chart-panel{display:grid;grid-template-columns:minmax(320px,520px) minmax(240px,1fr);gap:18px;align-items:start;}
.chart-svg{width:100%;max-width:520px;height:auto;display:block;}
.chart-legend{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto;padding-right:4px;}
.chart-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg3);font-size:11px;}
.chart-swatch{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.15);}
.cell-input{width:100%;background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 6px;color:var(--text);font:inherit;}
.cell-input:focus{outline:none;border-color:var(--gold);background:var(--bg3);}
.cell-input[readonly]{cursor:default;}
.tbl{width:100%;border-collapse:collapse;font-size:11px;}
.tbl th{padding:8px 12px;text-align:left;font-family:var(--mono);font-size:9px;color:var(--text3);background:var(--bg2);position:sticky;top:0;border-bottom:1px solid var(--border2);text-transform:uppercase;letter-spacing:.5px;font-weight:500;}
.tbl td{padding:6px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tr:hover td{background:var(--bg3);}
.tt{width:36px;height:36px;border-radius:4px;object-fit:cover;border:1px solid var(--border2);}
.ttph{width:36px;height:36px;border-radius:4px;background:var(--bg4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;}

/* DETAIL DRAWER */
#dd{position:absolute;right:0;top:0;bottom:0;width:320px;background:var(--bg2);border-left:1px solid var(--border2);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;z-index:20;}
#dd.open{transform:translateX(0);}
.dhdr{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:8px;}
.dclose{margin-left:auto;width:24px;height:24px;border-radius:4px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:11px;flex-shrink:0;}
.dclose:hover{color:var(--text);}
.dbody{flex:1;overflow-y:auto;padding:14px;}
.dbody::-webkit-scrollbar{width:3px;}
.dbody::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:4px;}
.dl{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:5px;}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.dc{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;}
.dv{font-size:12px;color:var(--text);font-weight:500;}
.pimgw{width:100%;aspect-ratio:4/3;background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:12px;display:flex;align-items:center;justify-content:center;}
.pimgw img{width:100%;height:100%;object-fit:contain;}
.pimgph{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text3);}
.pdfw{width:100%;aspect-ratio:1.41;background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:6px;}
.pdfw iframe{width:100%;height:100%;border:none;}
.dnotes{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:7px 9px;color:var(--text);font-size:11px;font-family:var(--body);resize:vertical;min-height:60px;outline:none;}
.dnotes:focus{border-color:var(--gold);}
.dsec{margin-bottom:14px;}
.d-file-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;}
.d-file-head{display:flex;align-items:flex-start;gap:10px;min-width:0;}
.d-file-ext{min-width:42px;height:42px;border-radius:10px;background:var(--bg4);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--mono);color:var(--gold2);flex-shrink:0;}
.d-file-meta{min-width:0;flex:1;}
.d-file-name{font-size:11px;font-weight:600;line-height:1.4;word-break:break-word;}
.d-file-sub{font-size:9px;color:var(--text2);margin-top:3px;font-family:var(--mono);}
.d-file-actions{display:flex;gap:8px;flex-wrap:wrap;}
.d-file-actions .btn,.d-file-actions a.btn{flex:1 1 120px;justify-content:center;text-decoration:none;}
.d-file-empty{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px;}
.d-file-empty-text{text-align:center;color:var(--text3);font-size:10px;font-family:var(--mono);}

/* TOOLTIP */
.tip{position:absolute;pointer-events:none;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:8px 11px;font-size:10px;box-shadow:var(--shadow);z-index:200;opacity:0;transition:opacity .1s;max-width:220px;}
.tip.vis{opacity:1;}
.zctrl{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;gap:3px;z-index:25;transition:right .22s ease,bottom .22s ease;}
.hint{position:absolute;top:10px;left:12px;font-size:9px;color:var(--text3);font-family:var(--mono);pointer-events:none;}

/* UPLOAD MODAL */
.naming-opt{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.naming-opt label{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;padding:7px 12px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg3);transition:all .13s;}
.naming-opt label:hover,.naming-opt label.sel{border-color:var(--gold);background:rgba(201,138,26,.06);}
.naming-opt input[type=radio]{accent-color:var(--gold);}
.fdrop{border:1.5px dashed var(--border2);border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg3);margin-top:8px;}
.fdrop:hover,.fdrop.drag{border-color:var(--gold);background:rgba(201,138,26,.04);}
.prog{width:100%;height:4px;background:var(--bg4);border-radius:2px;margin-top:10px;overflow:hidden;display:none;}
.progb{height:100%;background:var(--gold);border-radius:2px;transition:width .3s;}

/* STATUS BAR */
#sb{height:24px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:18px;flex-shrink:0;}
.si2{font-size:9px;font-family:var(--mono);color:var(--text3);display:flex;align-items:center;gap:4px;}
.sdot{width:5px;height:5px;border-radius:50%;background:var(--gold2);}

/* TOASTS */
#toast-wrap{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none;}
.toast{background:var(--card);border:1px solid var(--border2);border-radius:8px;padding:10px 16px;font-size:12px;box-shadow:var(--shadow);animation:toastin .2s ease;display:flex;align-items:center;gap:8px;min-width:200px;}
.toast.success{border-left:3px solid var(--teal);}
.toast.error{border-left:3px solid var(--red);}
.toast.info{border-left:3px solid var(--gold);}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* MISC */
h2.section-title{font-family:var(--head);font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;color:var(--text);}
.divider{height:1px;background:var(--border);margin:20px 0;}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.fu{animation:fadeUp var(--reveal-ms,260ms) ease forwards;}

/* Rows on their way out when a branch collapses. Only transform and opacity
   are animated -- both composite on the GPU, so a long BOM does not relayout
   on every frame the way animating height would. */
.lrow-out{opacity:0;transform:translateY(-6px);transition:opacity var(--collapse-ms,800ms) cubic-bezier(.4,0,.2,1),transform var(--collapse-ms,800ms) cubic-bezier(.4,0,.2,1);pointer-events:none;}

/* Export submenu inside the project actions menu. max-height rather than
   display so it eases open; 200px clears two buttons with room to spare. */
.export-formats{display:flex;gap:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .18s ease,opacity .15s ease,margin .18s ease;margin:0 0 0 10px;}
.export-formats.open{max-height:200px;opacity:1;margin:2px 0 2px 10px;}
.export-formats .btn{flex:1;justify-content:center;}

/* Someone who has asked the OS to reduce motion should get none of the above.
   Kept to one block so any animation added later is covered by default. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
input[type=text],input[type=email],input[type=password],textarea,select{
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);
  padding:8px 11px;font-size:13px;font-family:var(--body);color:var(--text);
  outline:none;transition:border-color .14s;width:100%;
}
input:focus,textarea:focus,select:focus{border-color:var(--gold);}
input::placeholder,textarea::placeholder{color:var(--text3);}
textarea{resize:vertical;min-height:70px;}
select option{background:var(--bg3);color:var(--text);}

/* ── FEEDBACK STARS ── */
.fbr-star{font-size:22px;background:none;border:none;cursor:pointer;color:var(--text4);transition:color .12s;padding:0 2px;line-height:1;}
.fbr-star.on,.fbr-star:hover{color:var(--gold2);}

/* ── ADMIN PANEL ── */
.admin-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border2);margin-bottom:20px;}
.admin-tab{padding:8px 16px;font-size:12px;font-family:var(--head);font-weight:600;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;transition:all .13s;background:none;border-top:none;border-left:none;border-right:none;}
.admin-tab.active{color:var(--gold2);border-bottom-color:var(--gold);}
.admin-tab:hover:not(.active){color:var(--text);}
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px;}
.admin-stat{background:var(--card);border:1px solid var(--border2);border-radius:var(--r2);padding:16px;}
.admin-stat-val{font-family:var(--head);font-size:26px;font-weight:700;color:var(--gold2);line-height:1;}
.admin-stat-lbl{font-size:10px;color:var(--text2);margin-top:4px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.4px;}
.admin-tbl{width:100%;border-collapse:collapse;font-size:12px;}
.admin-tbl th{text-align:left;padding:8px 10px;font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--text2);border-bottom:1px solid var(--border2);font-weight:500;}
.admin-tbl td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.admin-tbl tr:last-child td{border-bottom:none;}
.admin-tbl tr:hover td{background:var(--bg3);}
.admin-section-title{font-family:var(--head);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px;color:var(--text2);}
.admin-panel-wrap{background:var(--card);border:1px solid var(--border2);border-radius:var(--r2);overflow:hidden;margin-bottom:20px;}
.fb-msg-cell{max-width:320px;white-space:pre-wrap;word-break:break-word;line-height:1.5;}
.admin-badge-admin{display:inline-block;font-size:8px;font-family:var(--mono);padding:1px 5px;border-radius:3px;background:rgba(61,127,212,.15);color:#6aa3e8;border:1px solid rgba(61,127,212,.3);margin-left:5px;text-transform:uppercase;}

/* ── BOM history ─────────────────────────────────────────────
   Rows in the snapshot list. The selected one is marked with a gold
   edge rather than a fill, so the coloured dots in the diff beside it
   stay the strongest colour on screen. */
.hist-row{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;
  border-left:2px solid transparent;transition:background .13s ease,border-color .13s ease;}
.hist-row:hover{background:var(--bg3);}
.hist-row-sel{background:var(--bg3);border-left-color:var(--gold);}
.hist-row .btn.sm{opacity:0;transition:opacity .13s ease;}
.hist-row:hover .btn.sm,.hist-row-sel .btn.sm{opacity:1;}

/* ── PDF export (print stylesheet) ───────────────────────────
   #print-root is empty and hidden until an export builds it. On screen it
   must never take space; in print it is the only thing on the page.
   Deliberately monochrome: this is a document that gets printed, emailed
   and filed, and the app's gold on near-black is not that. */
#print-root{display:none;}

@media print{
  @page{margin:14mm 12mm;}
  /* Everything the app draws is hidden rather than the body being emptied,
     so the session survives the print and nothing has to be rebuilt after. */
  body>*{display:none !important;}
  body{background:#fff !important;}
  #print-root{display:block !important;color:#000;font-family:var(--body),sans-serif;}

  .pr-head{display:flex;align-items:flex-start;gap:16px;padding-bottom:10px;
    border-bottom:1.5px solid #000;margin-bottom:14px;}
  /* Bounded rather than sized: logos arrive at wildly different aspect
     ratios, and one that is allowed to set its own height pushes the table
     onto a second page. */
  .pr-logo{max-height:22mm;max-width:60mm;object-fit:contain;}
  .pr-co{margin-left:auto;text-align:right;}
  .pr-co-name{font-size:13pt;font-weight:700;line-height:1.2;}
  .pr-co-meta{font-size:8.5pt;color:#333;line-height:1.4;white-space:pre-line;}

  .pr-title{margin-bottom:12px;}
  .pr-title h1{font-family:var(--head),sans-serif;font-size:17pt;font-weight:700;margin:0;}
  .pr-sub{font-size:9pt;color:#444;margin-top:2px;}
  .pr-desc{font-size:9pt;color:#333;margin-top:5px;max-width:150mm;}

  .pr-tbl{width:100%;border-collapse:collapse;font-size:8.5pt;}
  /* Repeats the header on every page. Without it a multi-page BOM has
     unlabelled columns from page two onward, which is where a printed BOM
     stops being usable. */
  .pr-tbl thead{display:table-header-group;}
  .pr-tbl tr{page-break-inside:avoid;break-inside:avoid;}
  .pr-tbl th{text-align:left;font-size:7.5pt;text-transform:uppercase;letter-spacing:.04em;
    border-bottom:1px solid #000;padding:4px 5px;white-space:nowrap;}
  .pr-tbl td{padding:3px 5px;border-bottom:.5px solid #ccc;vertical-align:middle;}
  .pr-num{text-align:right;white-space:nowrap;}
  .pr-item{font-variant-numeric:tabular-nums;text-align:left;}
  .pr-pn{font-family:var(--mono),monospace;font-size:8pt;white-space:nowrap;}
  .pr-img{width:12mm;padding:2px 4px !important;}
  .pr-img img{max-width:11mm;max-height:11mm;object-fit:contain;display:block;}
  .pr-ref{font-size:6.5pt;color:#666;margin-left:3px;vertical-align:super;}
  .pr-total td{border-top:1.5px solid #000;border-bottom:none;font-weight:700;padding-top:6px;}

  .pr-foot{display:flex;justify-content:space-between;gap:16px;margin-top:14px;
    padding-top:8px;border-top:.5px solid #999;font-size:8pt;color:#444;}
  .pr-mark{white-space:nowrap;color:#666;}

  /* Print backgrounds off by default would drop the thumbnails' framing;
     asking for them keeps the document looking the same as the preview. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ── Where used ──────────────────────────────────────────────
   One row per position the part occupies. Clickable, because finding out
   a bolt is used in nine places is only half an answer -- getting to one
   of them is the other half. */
.wu-row{padding:7px 9px;border:1px solid var(--border);border-radius:var(--r);
  margin-bottom:5px;cursor:pointer;background:var(--bg3);
  transition:border-color .13s ease,background .13s ease;}
.wu-row:hover{border-color:var(--gold);background:var(--bg4);}
.wu-crumb{font-size:10px;color:var(--text2);line-height:1.5;
  word-break:break-word;}
.wu-meta{display:flex;align-items:baseline;gap:8px;margin-top:3px;
  font-size:9px;font-family:var(--mono);color:var(--text3);flex-wrap:wrap;}
.wu-item{color:var(--gold2);}
/* The rolled-up figure is what gets ordered, so it is the one that stands
   out -- the per-position quantity beside it is the working. */
.wu-ext{margin-left:auto;color:var(--text);font-weight:700;}

/* ── Status-bar messages ─────────────────────────────────────
   Confirmations appear here rather than floating over the tree. Sized to
   the gap between the counters and the version mark, and ellipsised
   rather than allowed to push either of them around. */
.sb-msg{opacity:0;transition:opacity .22s ease;max-width:min(46ch,38vw);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:6px;min-width:0;}
.sb-msg.show{opacity:1;}

/* A pointer left where a setting used to be, so someone looking for it in
   the old place is told where it went rather than assuming it was dropped. */
.setting-note{font-size:10px;color:var(--text3);line-height:1.6;padding:12px 0 2px;
  border-top:1px solid var(--border);margin-top:4px;}
.setting-note strong{color:var(--text2);font-weight:600;}