/* =================================================================
   Rack Designer — Anavem
   Complete stylesheet with dark mode support
   ================================================================= */

/* ── Reset & Variables ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg0:#f8fafc;--bg1:#ffffff;--bg2:#f1f5f9;--bg3:#e2e8f0;
  --tx0:#0f172a;--tx1:#475569;--tx2:#94a3b8;
  --cyan:#06b6d4;--cyan-l:#0891b2;--cyan-d:#0e7490;
  --purple:#8b5cf6;--purple-l:#7c3aed;
  --green:#22c55e;--green-l:#16a34a;
  --red:#ef4444;--red-l:#dc2626;
  --orange:#f97316;
  --brd:#e2e8f0;--brd2:#cbd5e1;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --hdr-bg:rgba(255,255,255,.95);
  --radius:6px;
}

/* ── Dark Mode ────────────────────────────────────────────────── */
body.dark{
  --bg0:#0f172a;--bg1:#1e293b;--bg2:#1e293b;--bg3:#334155;
  --tx0:#f1f5f9;--tx1:#cbd5e1;--tx2:#64748b;
  --brd:#334155;--brd2:#475569;
  --hdr-bg:rgba(15,23,42,.95);
  --shadow:0 1px 3px rgba(0,0,0,.3);
}

/* ── Base ─────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg0);color:var(--tx0);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;transition:background .3s,color .3s}
a{color:var(--cyan);text-decoration:none;transition:color .2s}
a:hover{color:var(--cyan-l)}

/* ═══════════════════════════════════════════════════════════════
   SITE HEADER — matches anavem.com design
═══════════════════════════════════════════════════════════════ */
.site-hdr{position:sticky;top:0;z-index:100;background:var(--bg0);border-bottom:1px solid var(--brd);transition:background .3s,border-color .3s}
.site-hdr.hdr-scrolled{background:rgba(248,250,252,.95);backdrop-filter:blur(12px)}
body.dark .site-hdr{background:var(--bg0)}
body.dark .site-hdr.hdr-scrolled{background:rgba(15,23,42,.95)}

/* Utility bar */
.util-bar{border-bottom:1px solid var(--brd);background:var(--bg2);transition:all .3s;overflow:hidden;height:36px}
.hdr-scrolled .util-bar{height:0;opacity:0;pointer-events:none}
.util-bar-in{max-width:1400px;margin:0 auto;padding:0 1.5rem;height:36px;display:flex;align-items:center;justify-content:space-between}
.util-l{display:flex;align-items:center;gap:.5rem;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--tx2)}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);display:inline-block;animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.util-r{display:flex;align-items:center;gap:1.5rem}
.util-r a{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2);transition:color .2s}
.util-r a:hover{color:var(--tx0)}
.util-register{color:var(--purple) !important}
.util-register:hover{color:var(--cyan) !important}

/* Main nav row */
.main-nav{max-width:1400px;margin:0 auto;padding:0 1.5rem}
.main-nav-in{display:flex;align-items:center;gap:1rem;height:56px;transition:height .3s}
.hdr-scrolled .main-nav-in{height:48px}

/* Logo */
.site-logo{font-size:1.4rem;font-weight:900;letter-spacing:-.04em;text-decoration:none;display:flex;align-items:center;flex-shrink:0}
.logo-g{background:linear-gradient(135deg,#06b6d4,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-t{color:var(--tx0);transition:color .2s}
.site-logo:hover .logo-t{color:var(--cyan)}

/* Nav brand */
.nav-brand{display:flex;align-items:center;gap:.5rem;flex-shrink:0}

/* Tool chip */
.tool-chip{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--bg0);background:var(--cyan);padding:2px 8px;white-space:nowrap;flex-shrink:0;margin-left:.25rem}

/* Desktop nav */
.desk-nav{display:none;align-items:center;gap:.25rem;flex:1;margin-left:.75rem}
@media(min-width:1024px){.desk-nav{display:flex}}

/* Dropdown wrapper */
.dd-wrap{position:relative}
.dd-trigger{display:flex;align-items:center;gap:.35rem;padding:.4rem .75rem;font-size:.85rem;font-weight:600;color:var(--tx1);background:0;border:0;cursor:pointer;text-decoration:none;transition:all .2s;white-space:nowrap}
.dd-trigger:hover,.dd-trigger.dd-active{color:var(--tx0);background:rgba(6,182,212,.06)}
.dd-trigger svg:first-child{width:14px;height:14px;color:var(--cyan);flex-shrink:0}
.dd-chevron{width:12px;height:12px;flex-shrink:0;transition:transform .2s;color:var(--tx2)}

/* Dropdown panel */
.dd-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:var(--bg0);border:1px solid var(--brd);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .15s,transform .15s;overflow:hidden}
.dd-panel.dd-open{opacity:1;transform:translateY(0);pointer-events:auto}
.dd-panel-wide{min-width:220px}
.dd-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;font-size:.83rem;color:var(--tx1);text-decoration:none;transition:all .15s;background:0;border:0;cursor:pointer;width:100%;text-align:left}
.dd-item:hover{color:var(--tx0);background:rgba(6,182,212,.06)}
.dd-item svg{width:15px;height:15px;flex-shrink:0}
.dd-item-first{border-bottom:1px solid var(--brd);font-weight:600;color:var(--tx0)}
.dd-lang-panel{right:0;left:auto;min-width:150px}
.dd-lang-item{gap:.5rem;font-weight:600}
.dd-lang-item.active,.dd-lang-item.on{color:var(--cyan)}
.lang-flag{font-size:1rem}

/* Action buttons */
.nav-actions{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.nav-icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:0;border:0;cursor:pointer;color:var(--tx1);transition:all .2s}
.nav-icon-btn:hover{color:var(--tx0);background:rgba(6,182,212,.06)}
.nav-icon-btn svg{width:18px;height:18px}

/* Mobile menu toggle */
.mobile-menu-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:0;border:0;cursor:pointer;color:var(--tx0);transition:all .2s}
.mobile-menu-btn:hover{background:rgba(6,182,212,.06)}
.mobile-menu-btn svg{width:22px;height:22px}
@media(min-width:1024px){.mobile-menu-btn{display:none}}

/* Mobile overlay */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200}
.mob-overlay.mob-overlay-open{display:block}

/* Mobile slide panel */
.mob-panel{position:fixed;top:0;right:0;bottom:0;width:85vw;max-width:360px;background:var(--bg0);z-index:201;border-left:1px solid var(--brd);box-shadow:-8px 0 32px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s ease-in-out;overflow-y:auto}
.mob-panel.mob-panel-open{transform:translateX(0)}
.mob-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--brd)}
.mob-body{padding:.5rem .75rem 2rem}
.mob-section{margin-bottom:.25rem}
.mob-section-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1rem;background:0;border:0;cursor:pointer;color:var(--tx0);font-size:.95rem;font-weight:600;transition:background .15s}
.mob-section-btn:hover{background:rgba(6,182,212,.06)}
.mob-section-l{display:flex;align-items:center;gap:.75rem}
.mob-section-l svg{width:18px;height:18px;flex-shrink:0}
.mob-chevron{width:16px;height:16px;color:var(--tx2);transition:transform .2s;flex-shrink:0}
.mob-links{display:none;padding-left:2.75rem;padding-bottom:.5rem}
.mob-links.mob-links-open{display:block}
.mob-links a{display:block;padding:.5rem .75rem;font-size:.88rem;color:var(--tx1);text-decoration:none;transition:all .15s}
.mob-links a:hover{color:var(--cyan);background:rgba(6,182,212,.06)}
.mob-lang{display:flex;gap:.5rem;padding:1rem;margin-top:.5rem;border-top:1px solid var(--brd)}
.mob-lang-btn{flex:1;padding:.5rem;background:var(--bg2);border:1px solid var(--brd);color:var(--tx1);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s}
.mob-lang-btn.active{background:var(--cyan);border-color:var(--cyan);color:#fff}
.mob-lang-btn:hover:not(.active){border-color:var(--cyan);color:var(--cyan)}

/* ── Counter Bar ──────────────────────────────────────────────── */
.counter-bar{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.45rem 1rem;background:var(--bg2);font-size:.75rem;color:var(--tx2);font-weight:600;border-bottom:1px solid var(--brd);transition:background .3s}
.counter-bar strong{color:var(--cyan);font-family:var(--mono);font-weight:800}

/* ── Install Banner (PWA) ─────────────────────────────────────── */
.install-banner{display:none;align-items:center;justify-content:center;gap:.75rem;padding:.6rem 1rem;background:linear-gradient(135deg,var(--cyan),var(--purple));color:#fff;font-size:.8rem;font-weight:600}
.install-banner.v{display:flex}
.install-banner button{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.75rem;font-weight:700;padding:4px 12px;cursor:pointer}
.install-banner .dismiss{background:0;border:0;color:rgba(255,255,255,.6);cursor:pointer;font-size:1rem}

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb{background:var(--bg2);border-bottom:1px solid var(--brd);transition:background .3s,border-color .3s}
.breadcrumb-in{max-width:1400px;margin:0 auto;padding:.5rem 1.5rem;display:flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;color:var(--tx2);flex-wrap:wrap}
.breadcrumb-in a{color:var(--tx2);transition:color .2s}.breadcrumb-in a:hover{color:var(--cyan)}
.breadcrumb-in svg{width:12px;height:12px;flex-shrink:0;color:var(--tx2)}
.breadcrumb-in span{color:var(--tx0)}
@media(max-width:480px){.breadcrumb-in{padding:.4rem .75rem;font-size:.68rem}}

/* ═══════════════════════════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════════════════════════ */

/* Toolbar */
.toolbar{background:var(--bg1);border-bottom:1px solid var(--brd);transition:background .3s}
.toolbar-in{max-width:1400px;margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.toolbar-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-right:auto}
/* app-fill: fills exactly the viewport below the sticky header (util-bar 36 + nav 56 + 2px borders = 94px) */
.app-fill{height:calc(100dvh - 94px);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.app-outer{max-width:1400px;margin:0 auto;padding:0 1.5rem;width:100%;flex:1;display:flex;flex-direction:column;min-height:0}
.btn{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--sans);font-size:.8rem;font-weight:600;padding:.4rem .85rem;border:1px solid var(--brd);background:var(--bg1);color:var(--tx0);cursor:pointer;transition:all .2s;white-space:nowrap}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-primary{background:var(--cyan);border-color:var(--cyan);color:#fff}.btn-primary:hover{background:var(--cyan-l);border-color:var(--cyan-l);color:#fff}
.btn-danger{border-color:#ef4444;color:#ef4444}.btn-danger:hover{background:#ef4444;color:#fff}
.btn svg{width:14px;height:14px}

/* App wrap — flex:1 fills remaining space inside app-outer */
.app-wrap{display:flex;flex:1;overflow:hidden;min-height:0}
.app-sidebar{width:280px;flex-shrink:0;border-right:1px solid var(--brd);display:flex;flex-direction:column;background:var(--bg1);overflow:hidden;transition:background .3s,border-color .3s}
.app-main{flex:1;overflow:auto;background:var(--bg0);padding:1.5rem;transition:background .3s}

/* Sidebar */
.sidebar-search{padding:.75rem;border-bottom:1px solid var(--brd)}
.sidebar-search input{width:100%;font-family:var(--sans);font-size:.85rem;padding:.45rem .75rem;background:var(--bg0);border:1px solid var(--brd);color:var(--tx0);transition:border-color .2s}
.sidebar-search input:focus{outline:0;border-color:var(--cyan)}
.sidebar-search input::placeholder{color:var(--tx2)}
.sidebar-cats{overflow-y:auto;flex:1}
.cat-group{border-bottom:1px solid var(--brd)}
.cat-header{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);cursor:pointer;user-select:none;background:var(--bg2);transition:background .2s}
.cat-header:hover{background:var(--bg3)}
.cat-header svg{width:14px;height:14px;flex-shrink:0}
.cat-header .cat-chevron{width:12px;height:12px;margin-left:auto;transition:transform .2s}
.cat-open .cat-chevron{transform:rotate(180deg)}
.cat-items{display:none}
.cat-open .cat-items{display:block}
.palette-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem .45rem 1.25rem;font-size:.78rem;color:var(--tx1);cursor:grab;transition:background .15s;user-select:none}
.palette-item:hover{background:rgba(6,182,212,.08);color:var(--tx0)}
.palette-item:active{cursor:grabbing}
.palette-item.dragging{opacity:.5}
.pi-color{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.pi-label{flex:1;font-size:.77rem}
.pi-height{font-size:.68rem;font-family:var(--mono);color:var(--tx2);font-weight:700}

/* Racks area */
.racks-area{display:flex;gap:2rem;align-items:flex-start;min-height:400px;flex-wrap:wrap;padding-bottom:1rem}
.rack-container{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}
.rack-header{display:flex;align-items:center;gap:.5rem}
.rack-name{font-size:.8rem;font-weight:700;color:var(--tx0);flex:1;background:0;border:0;font-family:var(--sans);cursor:text;padding:2px 4px;border-radius:3px}
.rack-name:focus{outline:1px solid var(--cyan);background:var(--bg1)}
.rack-actions{display:flex;gap:.25rem}
.rack-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:0;border:1px solid var(--brd);color:var(--tx2);cursor:pointer;font-size:.75rem;transition:all .2s;border-radius:2px}
.rack-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.rack-btn.rack-btn-del:hover{border-color:#ef4444;color:#ef4444}

/* Rack body */
.rack-body{display:flex;background:var(--bg1);border:2px solid var(--brd2);position:relative;transition:background .3s,border-color .3s}
.rack-unit-labels{width:28px;flex-shrink:0;border-right:1px solid var(--brd);background:var(--bg2)}
.rack-unit-label{height:30px;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;font-size:.6rem;font-family:var(--mono);color:var(--tx2);font-weight:700;border-bottom:1px solid var(--brd)}
.rack-slots{flex:1;position:relative;width:240px}
.rack-slot{height:30px;border-bottom:1px solid var(--brd);box-sizing:border-box;transition:background .15s;position:relative}
.rack-slot:last-child{border-bottom:none}
.rack-slot.drag-over{background:rgba(6,182,212,.15)!important}
.rack-slot.drag-invalid{background:rgba(239,68,68,.1)!important}
.rack-slot.even{background:rgba(0,0,0,.015)}
body.dark .rack-slot.even{background:rgba(255,255,255,.02)}

/* Placed device */
.rack-device{position:absolute;left:1px;right:1px;display:flex;align-items:center;gap:.4rem;padding:0 .5rem;cursor:grab;user-select:none;border:1px solid rgba(0,0,0,.12);box-sizing:border-box;z-index:2;transition:filter .15s;overflow:hidden}
.rack-device:hover{filter:brightness(1.08)}
.rack-device:active{cursor:grabbing}
.rack-device.selected{outline:2px solid rgba(255,255,255,.9);outline-offset:-2px;z-index:3}
.rack-device.device-dragging{opacity:.35}
.rd-icon{width:14px;height:14px;flex-shrink:0;opacity:.85}
.rd-label{flex:1;font-size:.7rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-height{font-size:.6rem;font-family:var(--mono);color:rgba(255,255,255,.75);font-weight:700;flex-shrink:0}
.rd-del{width:16px;height:16px;background:rgba(0,0,0,.25);border:0;color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;border-radius:2px;padding:0;line-height:1}
.rack-device:hover .rd-del{display:flex}

/* Properties panel */
.props-panel{width:220px;flex-shrink:0;border-left:1px solid var(--brd);background:var(--bg1);padding:1rem;font-size:.82rem;overflow-y:auto;transition:background .3s}
.props-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:.75rem}
.prop-row{margin-bottom:.6rem}
.prop-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2);margin-bottom:.2rem}
.prop-value{font-size:.82rem;color:var(--tx0)}
.prop-input{width:100%;font-family:var(--sans);font-size:.82rem;padding:.3rem .5rem;background:var(--bg0);border:1px solid var(--brd);color:var(--tx0);transition:border-color .2s}
.prop-input:focus{outline:0;border-color:var(--cyan)}
.prop-textarea{width:100%;font-family:var(--sans);font-size:.78rem;padding:.3rem .5rem;background:var(--bg0);border:1px solid var(--brd);color:var(--tx0);resize:vertical;min-height:60px;transition:border-color .2s}
.prop-textarea:focus{outline:0;border-color:var(--cyan)}
.no-selection{color:var(--tx2);font-size:.82rem;text-align:center;padding:1.5rem 0;line-height:1.5}
.prop-del-btn{width:100%;margin-top:.75rem;padding:.4rem;font-family:var(--sans);font-size:.78rem;font-weight:700;border:1px solid #ef4444;color:#ef4444;background:0;cursor:pointer;transition:all .2s}
.prop-del-btn:hover{background:#ef4444;color:#fff}
.prop-color-swatch{display:inline-block;width:14px;height:14px;border-radius:2px;border:1px solid rgba(0,0,0,.1);vertical-align:middle;margin-right:4px}

/* Stats bar */
.stats-bar{background:var(--bg1);border-top:1px solid var(--brd);font-size:.75rem;color:var(--tx2);transition:background .3s}
.stats-bar-in{max-width:1400px;margin:0 auto;padding:.6rem 1.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.stat-item{display:flex;align-items:center;gap:.4rem;font-weight:600}
.stat-val{color:var(--cyan);font-family:var(--mono);font-weight:800}

/* Add rack button */
.add-rack-card{width:270px;min-height:200px;border:2px dashed var(--brd);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;cursor:pointer;color:var(--tx2);transition:all .2s;background:var(--bg1);flex-shrink:0}
.add-rack-card:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(6,182,212,.03)}
.add-rack-card svg{width:32px;height:32px;opacity:.5}
.add-rack-card span{font-size:.8rem;font-weight:600}

/* Drop highlight on rack body */
.rack-body.drop-ready{border-color:var(--cyan)}

/* ── Other Tools Section ──────────────────────────────────────── */
.other-tools{background:var(--bg2);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);padding:3rem 0;transition:background .3s}
.other-tools-in{max-width:1400px;margin:0 auto;padding:0 1.5rem}
.other-tools-title{font-size:1.25rem;font-weight:800;margin-bottom:.5rem;color:var(--tx0)}
.other-tools-sub{font-size:.875rem;color:var(--tx2);margin-bottom:1.5rem}
.other-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.other-tool-card{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem;background:var(--bg1);border:1px solid var(--brd);border-left:3px solid transparent;text-decoration:none;color:var(--tx0);transition:border-color .2s,background .2s;cursor:pointer}
.other-tool-card:hover{border-color:var(--brd);border-left-color:var(--cyan);background:rgba(6,182,212,.03)}
.otc-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.otc-icon svg{width:22px;height:22px}
.otc-icon--cyan{background:rgba(6,182,212,.1);color:#06b6d4}
.otc-icon--blue{background:rgba(59,130,246,.1);color:#3b82f6}
.otc-icon--purple{background:rgba(139,92,246,.1);color:#8b5cf6}
.otc-icon--green{background:rgba(34,197,94,.1);color:#22c55e}
.otc-icon--rose{background:rgba(244,63,94,.1);color:#f43f5e}
.otc-body{flex:1;min-width:0}
.otc-body h3{font-size:.88rem;font-weight:800;margin-bottom:.2rem;color:var(--tx0)}
.otc-body p{font-size:.75rem;color:var(--tx2);line-height:1.4}
.otc-arrow{width:16px;height:16px;color:var(--tx2);flex-shrink:0;transition:color .2s,transform .2s}
.other-tool-card:hover .otc-arrow{color:var(--cyan);transform:translateX(3px)}
@media(max-width:640px){.other-tools-grid{grid-template-columns:1fr}.other-tools{padding:2rem 0}.other-tools-in{padding:0 .75rem}}
.otc-icon--slate{background:rgba(100,116,139,.1);color:#64748b}

/* ═══════════════════════════════════════════════════════════════
   SITE FOOTER — matches anavem.com design
═══════════════════════════════════════════════════════════════ */
.site-ft{border-top:1px solid var(--brd);margin-top:auto;background:var(--bg2);transition:background .3s,border-color .3s}
.site-ft-inner{max-width:1400px;margin:0 auto;padding:0 1.5rem}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding:2.5rem 0}
.ft-brand{}
.ft-tagline{font-size:.85rem;color:var(--tx2);line-height:1.65;margin:.5rem 0 1.25rem}
.ft-social{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ft-social-link{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--tx2);transition:all .2s}
.ft-social-link:hover{color:var(--cyan);background:rgba(6,182,212,.08)}
.ft-social-link svg{width:18px;height:18px}
.ft-col-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx0);margin-bottom:1rem}
.ft-col-links{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.ft-col-links a{font-size:.875rem;color:var(--tx1);transition:color .2s}
.ft-col-links a:hover{color:var(--cyan)}
.ft-bottom{padding:1.25rem 0;border-top:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.ft-copy{font-size:.78rem;color:var(--tx2)}
.ft-made{font-size:.78rem;color:var(--tx2)}
@media(max-width:1024px){.ft-grid{grid-template-columns:1fr 1fr;gap:1.75rem}.ft-brand{grid-column:1/-1}}
@media(max-width:640px){.ft-grid{grid-template-columns:1fr;padding:1.5rem 0}.ft-brand{grid-column:auto}.ft-bottom{flex-direction:column;text-align:center;gap:.25rem}}

/* ═══════════════════════════════════════════════════════════════
   WIZARD MODAL — New Rack
═══════════════════════════════════════════════════════════════ */
.wiz-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.wiz-modal{background:var(--bg1);border:1px solid var(--brd);padding:2rem;width:min(560px,90vw);max-height:90vh;overflow-y:auto}
.wiz-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem}
.wiz-title{font-size:1.1rem;font-weight:800;color:var(--tx0)}
.wiz-step{font-size:.75rem;font-weight:600;color:var(--tx2);margin-top:.2rem}
.wiz-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:.5rem;display:block}
.wiz-input{width:100%;padding:.6rem .75rem;font-family:var(--sans);font-size:.9rem;border:1px solid var(--brd);background:var(--bg0);color:var(--tx0);outline:none;transition:border-color .2s}
.wiz-input:focus{border-color:var(--cyan)}
.layout-cards{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.layout-card{border:2px solid var(--brd);padding:1.25rem;cursor:pointer;text-align:center;transition:all .2s;background:var(--bg0)}
.layout-card:hover{border-color:var(--cyan)}
.layout-card.selected{border-color:var(--cyan);background:rgba(6,182,212,.06)}
.layout-card-icon{width:40px;height:40px;margin:0 auto .75rem;opacity:.5;color:var(--tx1)}
.layout-card.selected .layout-card-icon{opacity:1;color:var(--cyan)}
.layout-card-name{font-size:.85rem;font-weight:700;color:var(--tx0);margin-bottom:.25rem}
.layout-card-desc{font-size:.72rem;color:var(--tx2)}
.width-options{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
.width-option{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;border:1px solid var(--brd);cursor:pointer;transition:all .15s;background:var(--bg0)}
.width-option:hover{border-color:var(--cyan)}
.width-option.selected{border-color:var(--cyan);background:rgba(6,182,212,.06)}
.width-option input[type=radio]{accent-color:var(--cyan);flex-shrink:0}
.width-option-name{font-size:.85rem;font-weight:700;color:var(--tx0)}
.width-option-desc{font-size:.72rem;color:var(--tx2);margin-left:auto}
.height-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.height-btn{padding:.4rem .9rem;border:1px solid var(--brd);background:var(--bg0);color:var(--tx1);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--sans)}
.height-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.height-btn.selected{background:var(--cyan);border-color:var(--cyan);color:#fff}
.wiz-footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--brd)}
.wiz-btn{padding:.5rem 1.25rem;border:1px solid var(--brd);background:var(--bg0);color:var(--tx0);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--sans)}
.wiz-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.wiz-btn-primary{background:var(--cyan);border-color:var(--cyan);color:#fff}
.wiz-btn-primary:hover{background:var(--cyan-l);border-color:var(--cyan-l);color:#fff}
.wiz-section{margin-bottom:1.25rem}

/* ═══════════════════════════════════════════════════════════════
   ENHANCED PROPERTIES PANEL
═══════════════════════════════════════════════════════════════ */
.props-section{margin-bottom:.75rem}
.props-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2);margin-bottom:.35rem;display:block}
.props-input{width:100%;padding:.4rem .6rem;font-size:.82rem;font-family:var(--sans);border:1px solid var(--brd);background:var(--bg0);color:var(--tx0);outline:none;transition:border-color .2s;box-sizing:border-box}
.props-input:focus{border-color:var(--cyan)}
.props-textarea{resize:vertical;min-height:60px}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:1200px){
  .props-panel{width:200px}
}
@media(max-width:1024px){
  .app-sidebar{width:240px}
  .props-panel{display:none}
  .racks-area{gap:1.25rem}
}
@media(max-width:768px){
  /* On mobile: release the fixed height so page scrolls naturally */
  .app-fill{height:auto;overflow:visible}
  .app-wrap{flex-direction:column;min-height:60vh}
  .app-sidebar{width:100%;max-height:260px;border-right:none;border-bottom:1px solid var(--brd);flex-direction:row}
  .sidebar-cats{display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;flex:1}
  .cat-group{border-bottom:none;border-right:1px solid var(--brd);min-width:140px;flex-shrink:0}
  .app-main{padding:1rem}
  .racks-area{flex-direction:column}
  .rack-slots{width:200px}
}
@media(max-width:480px){
  .toolbar-in{gap:.3rem;padding:.5rem .75rem}
  .btn span{display:none}
  .app-main{padding:.75rem}
  .stats-bar-in{gap:.75rem;padding:.5rem .75rem}
}