/* ===========================================================================
   layouts.css — Experimental alternate UI shells (TESTING ONLY)
   Desktop: "Atlas" (icon rail + contextual drawers)
   Mobile:  "Cmd"   (minimal top strip + command palette + bottom sheets)

   Everything here is scoped under  body.lyt-new  so the classic layout is
   completely untouched when the new shell is off. The new shell REUSES the
   real app panels (#prop-panel, #add-equipment-menu) and proxies the real
   buttons — no app logic or 2D/3D models are changed.
   =========================================================================== */

:root{
  --lyt-rail: 60px;
  --lyt-top: 54px;
  --lyt-status: 30px;
  --lyt-drawer: 330px;
}

/* Project-wide bin visibility stays available without selecting equipment. */
#global-bin-opacity{position:absolute;top:36px;right:12px;z-index:44;font:13px/1.4 system-ui;color:#e8edf5;background:#16233df2;border:1px solid #42506a;border-radius:10px;box-shadow:0 4px 18px #0003;max-width:calc(100% - 24px)}
#global-bin-opacity summary{cursor:pointer;padding:9px 13px;font-weight:600;min-height:38px;box-sizing:border-box}
#global-bin-opacity>div{padding:0 14px 14px;width:246px;max-width:100%;box-sizing:border-box}
#global-bin-opacity p{color:#9aa7bd;margin:0 0 12px;font-size:12px}
#global-bin-opacity label{display:grid;grid-template-columns:1fr 38px;gap:4px 10px;margin:12px 0;align-items:center}
#global-bin-opacity label>span{grid-column:1/-1}
#global-bin-opacity input{width:100%;height:24px;accent-color:#10b981;cursor:pointer}
#global-bin-opacity output{text-align:right;font-variant-numeric:tabular-nums}
#global-bin-opacity .bin-slice-toggle{display:flex;gap:9px;border-top:1px solid #64748b55;padding-top:14px}
#global-bin-opacity .bin-slice-toggle input{width:18px;height:18px;margin:0}
#global-bin-opacity input:disabled{opacity:.4;cursor:default}
#global-bin-opacity[open]{max-height:calc(100% - 48px);overflow-y:auto;overscroll-behavior:contain}
#global-bin-opacity button{border:1px solid #64748b;border-radius:6px;padding:7px 10px;background:transparent;color:inherit;cursor:pointer}
#global-bin-opacity :focus-visible{outline:2px solid #10b981;outline-offset:3px}
body.theme-light #global-bin-opacity{color:#0f172a;background:#fffffff5;border-color:#cbd5e1}
body.theme-light #global-bin-opacity p{color:#526176}
@media print{#global-bin-opacity{display:none!important}}

/* ---- New-shell color tokens (dark default) ---- */
.lyt-new-ui{
  --l-bg:#0d1526; --l-surface:#121d33; --l-surface2:#16233d; --l-border:#27344f;
  --l-text:#e8edf5; --l-muted:#9aa7bd; --l-accent:#10b981; --l-accent-ink:#06281d;
  --l-shadow:0 8px 30px rgba(0,0,0,.42); --l-radius:14px;
}
body.theme-light .lyt-new-ui{
  --l-bg:#eef1f5; --l-surface:#ffffff; --l-surface2:#f5f7fa; --l-border:#e2e8f0;
  --l-text:#0f172a; --l-muted:#5b6675; --l-accent:#0ea371; --l-accent-ink:#ffffff;
  --l-shadow:0 8px 28px rgba(16,24,40,.14); --l-radius:14px;
}

/* ============================ CLASSIC-CHROME HIDING ======================== */
body.lyt-new #app-root > header { display:none !important; }
body.lyt-new aside.w-96 { display:none !important; }
body.lyt-new .total-storage-overlay { display:none !important; }
body.lyt-new #canvas-hud-left { display:none !important; }
body.lyt-new #lyt-bottomdock { display:none !important; }   /* legacy bottom-right cluster, if present */

/* Let the canvas fill the freed space; pad it around the new chrome */
body.lyt-new main.blueprint-grid{
  padding-top: var(--lyt-top);
  padding-left: var(--lyt-rail);
  padding-bottom: var(--lyt-status);
  transition: padding .18s ease;
}
@media (max-width: 767px){
  body.lyt-new main.blueprint-grid{
    padding-left: 0;
    padding-bottom: 0;
    padding-top: var(--lyt-top);
  }
}

/* ================================ SHELL ROOT ============================== */
.lyt-new-ui{
  position:fixed; inset:0; z-index:45; pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--l-text);
  display:none;
}
body.lyt-new .lyt-new-ui{ display:block; }
.lyt-new-ui > *{ pointer-events:auto; }
.lyt-new-ui button{ font-family:inherit; cursor:pointer; }

/* ================================ TOP BAR ================================= */
.lyt-top{
  position:fixed; top:0; left:0; right:0; height:var(--lyt-top);
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:var(--l-surface); border-bottom:1px solid var(--l-border);
  z-index:48;
}
.lyt-brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; letter-spacing:-.01em; white-space:nowrap; }
.lyt-brand .mk{ width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#0e7c5a,var(--l-accent));display:grid;place-items:center;color:#fff;flex:none; }
.lyt-brand small{ color:var(--l-muted); font-weight:500; font-size:11px; }

.lyt-views{ display:flex; gap:2px; background:var(--l-surface2); border:1px solid var(--l-border); border-radius:10px; padding:3px; margin:0 auto; }
.lyt-views button{
  border:0; background:transparent; color:var(--l-muted); font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:7px; transition:background .15s,color .15s;
}
.lyt-views button:hover{ color:var(--l-text); }
.lyt-views button.active{ background:var(--l-accent); color:var(--l-accent-ink); }

.lyt-top-right{ display:flex; align-items:center; gap:8px; }
/* Quick Start / Save / Print live only in the mobile (Cmd) header */
.lyt-mobile-only{ display:none !important; }
.lyt-storage{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.05; padding:3px 10px; border-left:1px solid var(--l-border); }
.lyt-storage b{ font-size:14px; font-variant-numeric:tabular-nums; }
.lyt-storage span{ font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--l-muted); }
.lyt-iconbtn{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--l-border);background:var(--l-surface2);
  color:var(--l-text);display:grid;place-items:center;transition:background .15s,border-color .15s;
}
.lyt-iconbtn:hover{ background:var(--l-border); }
.lyt-cmdk{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:9px;
  border:1px solid var(--l-border);background:var(--l-surface2);color:var(--l-muted);font-size:12.5px;font-weight:600;
}
.lyt-cmdk kbd{ background:var(--l-bg);border:1px solid var(--l-border);border-radius:5px;padding:1px 6px;font-size:11px;color:var(--l-text);font-family:inherit; }
.lyt-cmdk:hover{ color:var(--l-text);border-color:var(--l-accent); }
/* Labeled "Reset View" button (top bar, desktop + mobile) */
.lyt-resetbtn{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:9px;
  border:1px solid var(--l-border);background:var(--l-surface2);color:var(--l-text);
  font-size:12.5px;font-weight:600;white-space:nowrap;flex:none;
}
.lyt-resetbtn svg{ flex:none; }
.lyt-resetbtn:hover{ border-color:var(--l-accent); color:var(--l-accent); }

/* mobile-only compact view dropdown trigger */
.lyt-viewsel{ display:none; }

/* ================================= RAIL ================================== */
.lyt-rail{
  position:fixed; top:var(--lyt-top); left:0; bottom:var(--lyt-status); width:var(--lyt-rail);
  background:var(--l-surface); border-right:1px solid var(--l-border);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; z-index:47;
}
.lyt-rail .spacer{ flex:1; }
.lyt-railbtn{
  width:44px;height:44px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--l-muted);
  display:grid;place-items:center;position:relative;transition:background .15s,color .15s,border-color .15s;
}
.lyt-railbtn:hover{ background:var(--l-surface2); color:var(--l-text); }
.lyt-railbtn.active{ background:var(--l-accent); color:var(--l-accent-ink); }
.lyt-railbtn.lyt-acct-on{ color:var(--l-accent); }
.lyt-railbtn.lyt-acct-on::after{ content:""; position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--l-accent); border:1.5px solid var(--l-surface); }
.lyt-railbtn .tip{
  position:absolute; left:52px; top:50%; transform:translateY(-50%) translateX(-4px);
  background:var(--l-text); color:var(--l-surface); font-size:11px; font-weight:600; padding:4px 8px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s,transform .12s; z-index:60;
}
.lyt-railbtn:hover .tip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ============================== DRAWER / HOSTS =========================== */
.lyt-drawerwrap{
  position:fixed; top:var(--lyt-top); left:var(--lyt-rail); bottom:var(--lyt-status);
  width:var(--lyt-drawer); max-width:86vw;
  background:var(--l-surface); border-right:1px solid var(--l-border);
  z-index:46; box-shadow:var(--l-shadow);
  transform:translateX(-104%); transition:transform .2s ease;
  display:flex; flex-direction:column;
}
.lyt-drawerwrap.open{ transform:translateX(0); }
.lyt-sheet-resize{display:none;}
.lyt-drawerhead{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--l-border); flex:none;
}
.lyt-drawerhead h2{ margin:0; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--l-text); }
.lyt-drawerhead .x{ width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--l-muted);display:grid;place-items:center; }
.lyt-drawerhead .x:hover{ background:var(--l-surface2);color:var(--l-text); }
.lyt-host{ flex:1; overflow-y:auto; overflow-x:hidden; }
.lyt-host[hidden]{ display:none; }

/* The reused app panels sit inside hosts; neutralize their absolute/hidden styles */
body.lyt-new #add-equipment-menu.lyt-hosted{
  position:static !important; display:flex !important; inset:auto !important; margin:0 !important;
  box-shadow:none !important; border:0 !important; max-height:none !important; background:transparent !important;
  width:100% !important;
}
body.lyt-new #prop-panel.lyt-hosted{ height:auto !important; }
/* Properties (#item-config) lives in its own drawer and stays visible regardless
   of the classic mutual-exclusivity logic. */
body.lyt-new #item-config.lyt-hosted{ display:block !important; padding:14px !important; margin:0 !important; }
body.lyt-new #item-config.lyt-hosted:empty::after{
  content:"Select an item on the canvas (or in Layers) to edit its properties.";
  display:block; padding:30px 16px; text-align:center; color:var(--l-muted); font-size:12.5px; line-height:1.6;
}
/* ── Estimate / BOM is gated on login ──────────────────────────────────────
   Only show the BOM table when the user is signed in. */
body.lyt-new.lyt-authed #project-summary.lyt-hosted{ display:block !important; padding:14px !important; margin:0 !important; }
body.lyt-new:not(.lyt-authed) #project-summary.lyt-hosted{ display:none !important; }
/* Hide the Estimate rail button, status-bar estimate, and show a sign-in prompt
   in the BOM drawer when logged out. */
body.lyt-new:not(.lyt-authed) .lyt-railbtn[data-host="bom"]{ display:none !important; }
body.lyt-new:not(.lyt-authed) #lyt-total-seg{ display:none !important; }
body.lyt-new:not(.lyt-authed) #lyt-host-bom::after{
  content:"Sign in to view the estimate / bill of materials.";
  display:block; padding:36px 18px; text-align:center; color:var(--l-muted); font-size:13px; line-height:1.6;
}

/* Layers list */
.lyt-layers{ padding:8px; display:flex; flex-direction:column; gap:4px; }
.lyt-layer{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  border:1px solid var(--l-border); background:var(--l-surface2); color:var(--l-text);
  font-size:13px; text-align:left; width:100%; transition:border-color .12s,background .12s;
}
.lyt-layer:hover{ border-color:var(--l-accent); }
.lyt-layer.sel{ border-color:var(--l-accent); box-shadow:inset 3px 0 0 var(--l-accent); }
.lyt-layer .ic{ width:30px;height:30px;border-radius:8px;background:var(--l-bg);display:grid;place-items:center;color:var(--l-accent);flex:none; }
.lyt-layer .lab{ flex:1; min-width:0; }
.lyt-layer .lab b{ display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lyt-layer .lab small{ color:var(--l-muted); font-size:11px; }
.lyt-empty{ padding:24px 14px; text-align:center; color:var(--l-muted); font-size:12.5px; }

/* Settings host */
.lyt-settings{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.lyt-srow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border:1px solid var(--l-border);border-radius:11px;background:var(--l-surface2);font-size:13px;font-weight:600;color:var(--l-text);
}
.lyt-srow button{ border:1px solid var(--l-border);background:var(--l-bg);color:var(--l-text);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600; }
.lyt-srow button.on{ background:var(--l-accent);color:var(--l-accent-ink);border-color:var(--l-accent); }
.lyt-exit{
  margin-top:6px;width:100%;padding:12px;border-radius:11px;border:1px solid var(--l-accent);
  background:var(--l-accent);color:var(--l-accent-ink);font-weight:700;font-size:13px;
}

/* ================================ STATUS BAR ============================= */
.lyt-status{
  position:fixed; left:0; right:0; bottom:0; height:var(--lyt-status);
  display:flex; align-items:center; gap:14px; padding:0 12px;
  background:var(--l-surface); border-top:1px solid var(--l-border);
  font-size:11px; color:var(--l-muted); z-index:47;
}
.lyt-status .seg{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.lyt-status .seg b{ color:var(--l-text); font-variant-numeric:tabular-nums; }
.lyt-status .grow{ flex:1; }
.lyt-status .sbtn{ border:0;background:transparent;color:var(--l-muted);font-weight:600;font-size:11px;display:inline-flex;align-items:center;gap:5px; }
.lyt-status .sbtn:hover{ color:var(--l-text); }

/* ================================== FAB ================================== */
.lyt-fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;border:0;background:var(--l-accent);color:var(--l-accent-ink);
  display:none; place-items:center; box-shadow:0 8px 24px rgba(16,163,113,.45); z-index:55;
}

/* ============================= COMMAND PALETTE =========================== */
.lyt-palette{
  position:fixed; inset:0; z-index:96; display:none; align-items:flex-start; justify-content:center;
  background:rgba(8,12,22,.5); backdrop-filter:blur(3px); padding:14vh 16px 16px;
}
.lyt-palette.open{ display:flex; }
.lyt-palbox{
  width:600px; max-width:96vw; background:var(--l-surface); border:1px solid var(--l-border);
  border-radius:16px; box-shadow:var(--l-shadow); overflow:hidden; display:flex; flex-direction:column; max-height:72vh;
}
.lyt-palinput{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--l-border); }
.lyt-palinput svg{ color:var(--l-muted); flex:none; }
.lyt-palinput input{ flex:1; border:0; background:transparent; outline:none; color:var(--l-text); font-size:16px; }
.lyt-pallist{ overflow-y:auto; padding:8px; }
.lyt-palgroup{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--l-muted); padding:10px 10px 4px; font-weight:700; }
.lyt-palitem{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:transparent;
  color:var(--l-text); padding:10px 11px; border-radius:10px; font-size:13.5px;
}
.lyt-palitem .ic{ width:30px;height:30px;border-radius:8px;background:var(--l-surface2);display:grid;place-items:center;color:var(--l-accent);flex:none; }
.lyt-palitem .lab{ flex:1; }
.lyt-palitem kbd{ background:var(--l-surface2);border:1px solid var(--l-border);border-radius:5px;padding:1px 6px;font-size:11px;color:var(--l-muted);font-family:inherit; }
.lyt-palitem.cur, .lyt-palitem:hover{ background:var(--l-surface2); }
.lyt-palitem.cur{ outline:2px solid var(--l-accent); outline-offset:-2px; }

/* ============================ SHEET SCRIM (mobile) ====================== */
/* Scrim must sit BELOW the bottom sheet (z 46) so taps reach the sheet's
   controls; it still covers the canvas to catch tap-outside-to-close. */
.lyt-scrim{ position:fixed; inset:0; background:rgba(8,12,22,.45); z-index:43; display:none; }
.lyt-scrim.open{ display:block; }

/* ============================================================================
   MOBILE = "Cmd" mode (≤767px): drop the rail/status, drawers become bottom
   sheets, show the command FAB, compact the top bar.
   ============================================================================ */
@media (max-width:767px){
  .lyt-rail{ display:none; }
  .lyt-status{ display:none; }
  .lyt-fab{ display:grid; }
  /* hide the command FAB while a bottom sheet is open (avoids overlap) */
  .lyt-drawerwrap.open ~ .lyt-fab{ display:none; }
  .lyt-views{ display:none; }
  .lyt-viewsel{
    display:inline-flex; align-items:center; gap:6px; margin:0 auto 0 0;
    background:var(--l-surface2);border:1px solid var(--l-border);border-radius:9px;
    color:var(--l-text);font-size:12.5px;font-weight:700;padding:7px 12px;
  }
  /* Mobile header: drop the app icon + command button; fit Reset / QS / Save / Print */
  .lyt-brand{ display:none; }
  .lyt-cmdk{ display:none; }
  .lyt-mobile-only{ display:grid !important; }
  .lyt-top{ gap:4px; padding:0 6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .lyt-top::-webkit-scrollbar{ display:none; }
  .lyt-top-right{ gap:3px; flex:none; }
  .lyt-viewsel{ flex:none; padding:7px 8px; }
  .lyt-top-right .lyt-iconbtn{ width:32px; height:32px; border-radius:8px; flex:none; }
  .lyt-resetbtn{ height:32px; padding:0 8px; gap:5px; font-size:11.5px; }
  /* Mobile: bigger single-line bushels readout, drop the "Storage" label,
     a touch wider — without growing the header vertically. */
  .lyt-storage{ padding:0 2px 0 7px; flex:none; min-width:54px; justify-content:center; }
  .lyt-storage span{ display:none; }
  .lyt-storage b{ font-size:17px; line-height:1; }

  .lyt-drawerwrap{
    top:auto; left:0; right:0; bottom:0; width:100%; max-width:100%;
    height:auto; max-height:80vh; border-right:0; border-top:1px solid var(--l-border);
    border-radius:18px 18px 0 0; transform:translateY(104%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lyt-drawerwrap.open{ transform:translateY(0); }
  .lyt-drawerwrap::before{
    content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:40px;height:4px;border-radius:99px;background:var(--l-border);
  }
  .lyt-drawerhead{ padding-top:16px; }
  .lyt-drawerwrap.is-properties{height:var(--properties-height,60vh);max-height:calc(100dvh - 64px);min-height:180px;}
  .lyt-drawerwrap.is-properties::before{display:none;}
  .is-properties .lyt-sheet-resize{display:grid;place-items:center;height:28px;flex:none;touch-action:none;cursor:ns-resize;user-select:none;}
  .lyt-sheet-resize span{width:44px;height:4px;border-radius:99px;background:var(--l-muted);}
  .lyt-sheet-resize:focus-visible{outline:2px solid var(--l-accent);outline-offset:-3px;}
  .is-properties .lyt-drawerhead{padding-top:2px;}
  .is-properties .lyt-host{min-height:0;overscroll-behavior:contain;}
  .lyt-palette{ padding:0; align-items:stretch; }
  .lyt-palbox{ width:100%; max-width:100%; max-height:100%; height:100%; border-radius:0; }
}

/* Desktop: hide the mobile view dropdown menu container */
@media (min-width:768px){ .lyt-viewmenu{ display:none !important; } }
.lyt-viewmenu{
  position:fixed; top:calc(var(--lyt-top) - 4px); left:50%; transform:translateX(-50%);
  background:var(--l-surface); border:1px solid var(--l-border); border-radius:12px; box-shadow:var(--l-shadow);
  z-index:60; padding:6px; min-width:160px; display:none; flex-direction:column; gap:2px;
}
.lyt-viewmenu.open{ display:flex; }
.lyt-viewmenu button{ border:0;background:transparent;color:var(--l-text);text-align:left;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:600; }
.lyt-viewmenu button:hover{ background:var(--l-surface2); }
.lyt-viewmenu button.active{ color:var(--l-accent); }

/* ====================== Entry button in CLASSIC header =================== */
#lyt-switch-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px; border-radius:8px; border:1px solid #334155; background:#1e293b;
  color:#cbd5e1; font-size:12px; font-weight:700;
}
#lyt-switch-btn:hover{ border-color:#10b981; color:#fff; }
body.theme-light #lyt-switch-btn{ background:#fff; border-color:#cbd5e1; color:#0f172a; }
/* Export actions remain reachable in both desktop and mobile layouts. */
#lyt-print, #lyt-record { display:inline-flex; align-items:center; gap:6px; width:auto; padding:8px; }
#lyt-record.on { color:#fff; background:#b91c1c; }
.lyt-export-label { font-size:12px; }
@media (max-width: 900px) { .lyt-export-label { display:none; } }
#video-export-modal { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,20,32,.88); overflow:auto; }
.video-export-card { width:100%; max-width:780px; max-height:calc(100dvh - 32px); overflow:auto; padding:20px; border-radius:16px; background:#f8fafc; color:#172534; box-shadow:0 16px 60px #0005; font:14px/1.5 system-ui,sans-serif; }
.video-export-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.video-export-heading h2 { font-size:20px; font-weight:700; }
#video-export-preview { width:100%; max-height:52dvh; background:#0f172a; border-radius:8px; }
.video-export-card p { margin:12px 0; }
.video-export-actions { display:flex; flex-wrap:wrap; gap:10px; }
.video-export-card button, .video-export-card a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:1px solid #9baebd; border-radius:8px; background:#fff; color:#172534; cursor:pointer; text-decoration:none; }
.video-export-card button[hidden] { display:none; }
.video-export-card button:disabled { opacity:.55; cursor:wait; }
#video-export-share { background:#047857; color:white; border-color:#047857; }
@media (max-width: 600px) { .video-export-card { padding:16px; } .video-export-actions > * { flex:1 1 100%; } }
/* Catalog-backed regular Add panel, shared by desktop and mobile. */
.equipment-library-controls{display:grid;grid-template-columns:1fr;gap:8px;padding:12px;position:sticky;top:0;background:var(--lyt-panel,#fff);z-index:1}
.equipment-library-controls input{grid-column:1/-1}
.equipment-library-controls input{width:100%;min-width:0;border:1px solid #94a3b8;border-radius:6px;padding:9px;background:var(--lyt-panel,#fff);color:inherit;font-size:14px}
.equipment-library-controls p{grid-column:1/-1;font-size:11px;color:#64748b;margin:0}
.equipment-library-list{padding:0 12px 14px;display:grid;gap:8px}
.equipment-library-group{min-width:0;border:1px solid #cbd5e1;border-radius:8px;background:transparent}
.equipment-library-group>summary{display:flex;align-items:center;gap:10px;min-height:50px;padding:12px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:inherit}
.equipment-library-group>summary::-webkit-details-marker{display:none}
.equipment-library-group>summary::before{content:'';width:7px;height:7px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.equipment-library-group[open]>summary::before{transform:rotate(45deg)}
.equipment-library-group>summary:hover{background:#94a3b814;border-radius:8px}
.equipment-library-group>summary:focus-visible{outline:2px solid #38bdf8;outline-offset:2px;border-radius:8px}
.equipment-library-count{margin-left:auto;min-width:22px;padding:2px 6px;border-radius:5px;background:#94a3b81a;font-size:11px;font-weight:500;text-align:center;font-variant-numeric:tabular-nums}
.equipment-library-group-items{display:grid;gap:6px;padding:0 8px 8px}
.equipment-library-item{display:block;text-align:left;width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:7px;background:transparent;color:inherit;font-size:13px;overflow-wrap:anywhere}
.equipment-library-item:hover,.equipment-library-item:focus-visible{background:#e0f2fe;color:#0f172a;outline:2px solid #38bdf8}
body:not(.theme-light) .equipment-library-controls{background:#182333}
body:not(.theme-light) .equipment-library-controls input{background:#253347;color:#f1f5f9}
body:not(.theme-light) .equipment-library-group,body:not(.theme-light) .equipment-library-item{border-color:#475569}
@media (max-width:767px){.equipment-library-controls input{font-size:16px}}
@media (prefers-reduced-motion:reduce){.equipment-library-group>summary::before{transition:none}}