:root{
    --bg:#EEF0EC; --panel:#FFFFFF; --panel-edge:#DADFE0;
    --ink:#1B2127; --ink-soft:#5B6470;
    --steel:#2B5D8C; --steel-dark:#1F4468;
    --rust:#C9622D; --rust-dark:#A54F22;
    --patina:#3F7A5C; --slate:#6B7280;
    --accent:#5A4FCF; --accent-dark:#4A40B8;
    --amber-note:#FBF0D9; --amber-note-edge:#E3B94F; --amber-note-text:#8A6A1F;
    --danger:#B23A3A;
    --hazard-a:#1B2127; --hazard-b:#C9622D;
    --surface-soft:#F5F7F6; --surface-hover:#F5F8FA;
    --error-bg:#FBEAEA;
    --radius:12px;
    --shadow:0 1px 3px rgba(20,25,30,0.05), 0 1px 2px rgba(20,25,30,0.03);
    --shadow-lift:0 12px 32px rgba(20,25,30,0.12), 0 4px 10px rgba(20,25,30,0.06);
    /* Semantic pill colors — shared by part-status, todo priority/status, and inventory pills */
    --pill-green-bg:#E6F7EC; --pill-green-text:#19783E; --pill-green-border:#BFE9CE;
    --pill-red-bg:#FDEAEA; --pill-red-text:#C0392B; --pill-red-border:#F5C6C2;
    --pill-yellow-bg:#FFF6DD; --pill-yellow-text:#826808; --pill-yellow-border:#F2E1A0;
    --pill-blue-bg:#E8EEFB; --pill-blue-text:#2255C4; --pill-blue-border:#C9D9F7;
    --pill-blue-soft-bg:#EAF1FB; --pill-blue-soft-text:#2E5FA3; --pill-blue-soft-border:#CBDBF3;
    --pill-gray-bg:#EEF0F3; --pill-gray-text:#57606B; --pill-gray-border:#DCE0E5;
  }

  [data-theme="dark"]{
    /* Palette follows the reference dashboard: near-black page, softly raised
       panels, violet accent, and no hard white anywhere. */
    --bg:#0B0B0F; --panel:#16161C; --panel-edge:#24242C;
    --ink:#F2F3F5; --ink-soft:#8E8E9A;
    --steel:#7C8CF8; --steel-dark:#9AA6FA;
    --rust:#E0784F; --rust-dark:#EC9670;
    --patina:#4ECB8F; --slate:#8E8E9A;
    --accent:#6F60DC; --accent-dark:#8072E8;
    --amber-note:#2A2418; --amber-note-edge:#6B571E; --amber-note-text:#E8C868;
    --danger:#F2666E;
    --surface-soft:#1B1B22; --surface-hover:#20202A;
    --error-bg:#2E1B1E;
    --shadow:0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.25);
    --shadow-lift:0 16px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
    --pill-green-bg:#152B21; --pill-green-text:#5FD996; --pill-green-border:#244536;
    --pill-red-bg:#2E1B1E; --pill-red-text:#F2848C; --pill-red-border:#4A2C31;
    --pill-yellow-bg:#2A2418; --pill-yellow-text:#E8C868; --pill-yellow-border:#4A3F22;
    --pill-blue-bg:#1C2039; --pill-blue-text:#94A2FA; --pill-blue-border:#2E3557;
    --pill-blue-soft-bg:#1A1E33; --pill-blue-soft-text:#A0ADF8; --pill-blue-soft-border:#2A3050;
    --pill-gray-bg:#1F1F27; --pill-gray-text:#A5A5B2; --pill-gray-border:#2E2E38;
    --hazard-a:#2A2E33; --hazard-b:#8A4F2E;
  }
  *{box-sizing:border-box;}
  :root{ color-scheme:light; }
  [data-theme="dark"]{ color-scheme:dark; }
  body{ margin:0; background:var(--bg);
    background-image:linear-gradient(var(--panel-edge) 1px, transparent 1px), linear-gradient(90deg, var(--panel-edge) 1px, transparent 1px);
    background-size:28px 28px; background-position:-1px -1px;
    color:var(--ink); font-family:'Inter',sans-serif; min-height:100vh; }
  ::selection{ background:var(--rust); color:#fff; }
  .hidden{ display:none !important; }

  /* ===== Center screens (connect + login) ===== */
  .center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
  .center-card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; width:100%; max-width:420px; box-shadow:var(--shadow-lift); overflow:hidden; }
  .center-strip{ height:4px; background:linear-gradient(90deg, var(--accent), var(--accent-dark)); }
  /* Fixed to a dark tone rather than var(--ink): in dark mode --ink is nearly
     white, which made this white-on-white and unreadable. */
  .center-top{ background:#171A1F; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 8px); padding:26px 26px 20px; color:#fff; text-align:center; }
  .center-plate{ width:46px;height:46px;margin:0 auto 12px; border:2px solid #3a4451; background:linear-gradient(155deg,#232a33,#181d24); display:flex;align-items:center;justify-content:center; border-radius:10px; font-family:'Oswald',sans-serif; font-weight:700; color:var(--rust); font-size:16px; }
  .center-top h1{ font-family:'Oswald',sans-serif; font-size:18px; margin:0; text-transform:uppercase; letter-spacing:0.4px;}
  .center-top p{ margin:4px 0 0; font-size:12px; color:#9BA6B3;}
  .center-body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:12px;}
  .badge{ display:inline-flex; align-self:flex-start; align-items:center; gap:6px; background:var(--amber-note); border:1px solid var(--amber-note-edge); color:var(--amber-note-text); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:4px 9px; border-radius:20px; }
  .error-box{ background:var(--error-bg); border:1px solid var(--danger); color:var(--danger); font-size:12.5px; padding:8px 10px; border-radius:10px; }
  .hint{ font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
  .connect-btn{ display:flex; align-items:center; gap:12px; text-align:left; width:100%; background:var(--panel); border:1px solid var(--panel-edge); border-radius:11px; padding:13px 14px; cursor:pointer; font-family:'Inter',sans-serif; transition:border-color .12s ease, background .12s ease; }
  .connect-btn:hover{ border-color:var(--steel); background:var(--surface-hover); }
  .connect-btn .ic{ width:36px;height:36px;border-radius:11px; background:var(--bg); display:flex;align-items:center;justify-content:center; flex:0 0 auto; color:var(--steel); }
  .connect-btn .txt strong{ display:block; font-size:13.5px; }
  .connect-btn .txt span{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:1px;}
  .divider{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:0.4px; }
  .divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--panel-edge); }
  .file-chip{ display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--panel-edge); padding:8px 10px; border-radius:10px; font-size:12px; font-family:'JetBrains Mono',monospace; color:var(--ink-soft); word-break:break-all; }

  /* ===== Login inner / shared field styles ===== */
  .field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px;}
  .field label .req{ color:var(--rust); }
  .field input[type=text], .field input[type=password], .field input[type=number], .field input[type=date], .field textarea, .field select{ width:100%; border:1px solid var(--panel-edge); border-radius:11px; padding:10px 12px; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink); background:var(--panel); box-sizing:border-box; }
  .field input[type=number]{ -moz-appearance:textfield; }
  .field input[type=number]::-webkit-outer-spin-button, .field input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .field input[disabled], .field textarea[disabled], .field select[disabled]{ background:var(--bg); color:var(--ink-soft); }
  .field textarea{ resize:vertical; min-height:64px; font-family:'Inter',sans-serif; font-size:13px;}
  .field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--steel); outline-offset:0; border-color:var(--steel);}
  .cadpath-input{ font-family:'JetBrains Mono',monospace !important; font-size:12px !important; }

  /* ===== Header ===== */
  /* ===== Sidebar navigation (replaces the old top banner) ===== */
  #app{ display:flex; height:100vh; overflow:hidden; }
  .sidebar{ width:236px; flex:0 0 236px; background:var(--panel); border-right:1px solid var(--panel-edge);
    display:flex; flex-direction:column; padding:20px 14px; gap:6px; position:sticky; top:0; height:100vh; box-sizing:border-box; }
  .sidebar-brand{ display:flex; align-items:center; gap:11px; padding:2px 8px 18px; }
  .plate{ width:38px;height:38px;flex:0 0 auto; background:linear-gradient(150deg, var(--accent), var(--accent-dark));
    display:flex;align-items:center;justify-content:center; border-radius:11px; font-family:'Oswald',sans-serif;
    font-weight:700; letter-spacing:0.5px; color:#fff; font-size:14px; }
  .brand-text h1{ font-family:'Oswald',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.3px; margin:0; color:var(--ink); }
  .brand-text p{ margin:1px 0 0; font-size:10.5px; color:var(--ink-soft); }

  .sidebar-nav{ display:flex; flex-direction:column; gap:3px; flex:1; overflow-y:auto; }
  .nav-item{ position:relative; display:flex; align-items:center; gap:11px; width:100%; box-sizing:border-box;
    background:none; border:none; border-radius:11px; padding:10px 12px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; color:var(--ink-soft); text-align:left;
    transition:background .16s ease, color .16s ease; }
  .nav-item:hover{ background:var(--surface-hover); color:var(--ink); }
  .nav-item.active{ background:var(--accent); color:#fff; font-weight:600; }
  .nav-item.active:hover{ background:var(--accent); }
  .nav-item svg{ flex:0 0 auto; }
  .nav-item span{ flex:1; }
  .nav-item:disabled{ opacity:.38; cursor:not-allowed; }
  .nav-item:disabled:hover{ background:none; color:var(--ink-soft); }
  .nav-divider{ height:1px; background:var(--panel-edge); margin:10px 12px; }

  .sidebar-footer{ padding-top:12px; border-top:1px solid var(--panel-edge); display:flex; flex-direction:column; gap:8px; }
  .save-status{ font-size:10.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; padding:0 8px; }
  .save-dot{ width:6px;height:6px;border-radius:50%; background:var(--patina); display:inline-block; flex:0 0 auto; }
  .save-dot.saving{ background:#E3B94F; }
  .save-dot.err{ background:var(--danger); }

  .user-chip{ display:flex; align-items:center; gap:9px; background:var(--surface-soft); border:1px solid var(--panel-edge);
    padding:8px 8px 8px 10px; border-radius:13px; font-size:12.5px; color:var(--ink); }
  .user-chip-text{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
  .user-chip-text > span:first-child{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .user-chip .avatar{ width:30px;height:30px;border-radius:50%; background:linear-gradient(150deg, var(--accent), var(--accent-dark));
    color:#fff; display:flex;align-items:center;justify-content:center; font-family:'Oswald',sans-serif; font-size:12px; font-weight:700; flex:0 0 auto; }
  .role-pill{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; padding:2px 7px;
    border-radius:20px; background:var(--pill-gray-bg); color:var(--pill-gray-text); align-self:flex-start; }
  .role-pill.admin{ background:var(--pill-blue-soft-bg); color:var(--pill-blue-soft-text); }
  .role-pill.editor{ background:var(--pill-blue-bg); color:var(--pill-blue-text); }
  .role-pill.viewer{ background:var(--pill-gray-bg); color:var(--pill-gray-text); }
  .user-chip button{ background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:4px; display:flex; border-radius:11px; flex:0 0 auto; }
  .user-chip button:hover{ color:var(--ink); background:var(--surface-hover); }

  /* ===== Main content area ===== */
  .main-area{ flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  .content-topbar{ padding:20px 28px 0; }
  .search-wrap{ position:relative; max-width:420px; }
  .search-wrap input{ background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink);
    padding:12px 14px 12px 38px; border-radius:13px; font-size:13.5px; width:100%; box-sizing:border-box; font-family:'Inter',sans-serif;
    transition:border-color .16s ease; }
  .search-wrap input:focus{ outline:none; border-color:var(--accent); }
  .search-wrap input::placeholder{ color:var(--ink-soft); }
  .search-wrap svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); }

  .topbar-row2{ display:flex; align-items:center; gap:12px; padding:18px 28px 4px; flex-wrap:wrap; }
  .view-toggle{ display:flex; background:var(--surface-soft); border:1px solid var(--panel-edge); border-radius:12px; padding:3px; gap:3px; }
  .view-toggle button{ background:none; color:var(--ink-soft); border:none; padding:8px 14px; font-size:12.5px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; border-radius:9px; transition:background .16s ease, color .16s ease; }
  .view-toggle button.active{ background:var(--accent); color:#fff; }
  .view-toggle button:not(.active):hover{ background:var(--surface-hover); color:var(--ink); }

  .btn{ font-family:'Inter',sans-serif; font-weight:600; font-size:13px; border:none; border-radius:11px; padding:10px 16px;
    cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:transform .08s ease, box-shadow .12s ease, background .15s ease; }
  .btn:disabled{ opacity:.4; cursor:not-allowed; }
  .btn:disabled:hover{ transform:none; box-shadow:none; }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{ background:var(--accent); color:#fff; }
  .btn-primary:hover{ background:var(--accent-dark); }
  .btn-ghost{ background:var(--surface-soft); color:var(--ink); border:1px solid var(--panel-edge); }
  .btn-ghost:hover{ background:var(--surface-hover); }

  /* ===== Stats ===== */
  .stats{ display:flex; gap:14px; padding:18px 28px 4px; flex-wrap:wrap; }
  .stat-card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius); padding:14px 18px; min-width:150px; flex:1 1 150px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; border-left:3px solid var(--steel); }
  .stat-card.rust{ border-left-color:var(--rust); }
  .stat-card.patina{ border-left-color:var(--patina); }
  .stat-card.slate{ border-left-color:var(--slate); }
  .stat-num{ font-family:'Oswald',sans-serif; font-size:26px; font-weight:600; line-height:1; }
  .stat-label{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; text-transform:uppercase; letter-spacing:0.4px;}

  /* ===== Board ===== */
  .board{ display:flex; gap:16px; padding:20px 28px 24px; overflow-x:auto; overflow-y:auto; align-items:flex-start; flex:1; min-height:0; }
  .lane{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius); width:300px; flex:0 0 300px; box-shadow:var(--shadow); display:flex; flex-direction:column; max-height:calc(100vh - 235px); }
  .lane.drag-over{ outline:2px dashed var(--rust); outline-offset:-2px; }
  .lane-head{ padding:12px 12px 11px; border-bottom:1px solid var(--panel-edge); display:flex; align-items:center; gap:7px; position:relative; }
  .lane-head::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--lane-color, var(--steel)); border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius); }
  .lane-dot{ width:9px; height:9px; border-radius:50%; background:var(--lane-color, var(--steel)); flex:0 0 auto; }
  /* min-width:0 lets this flex child actually shrink, which is what makes
     the ellipsis work instead of the name pushing the buttons off-screen. */
  .lane-name{ display:flex; align-items:baseline; gap:8px; flex:1; min-width:0; font-family:'Oswald',sans-serif; font-weight:600; font-size:13.5px; text-transform:uppercase; letter-spacing:0.3px; cursor:default; }
  .lane-name-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .lane-groupno{ font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--ink-soft); flex:0 0 auto; }
  .lane-count{ background:var(--bg); color:var(--ink-soft); font-size:11px; font-weight:600; padding:2px 7px; border-radius:20px; font-family:'JetBrains Mono',monospace; flex:0 0 auto;}
  .lane-icon-btn{ background:none;border:none;color:var(--ink-soft); cursor:pointer; padding:3px; border-radius:9px; display:flex; flex:0 0 auto;}
  .lane-icon-btn:hover:not(:disabled){ background:var(--bg); }
  .lane-icon-btn:disabled{ opacity:0.25; cursor:default; }
  .lane-icon-btn.accent:hover{ color:var(--rust); }
  .lane-body{ padding:12px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; min-height:60px; }
  .lane-empty{ border:1.5px dashed var(--panel-edge); border-radius:var(--radius); padding:26px 10px; text-align:center; color:var(--ink-soft); font-size:12.5px; }
  .lane-empty button{ background:none;border:none;color:var(--steel); font-weight:600; cursor:pointer; font-size:12.5px; margin-top:4px;}
  .lane-foot{ padding:10px 14px 14px; }
  .lane-foot button{ width:100%; background:var(--bg); border:1px dashed var(--panel-edge); color:var(--ink-soft); padding:8px; border-radius:var(--radius); font-size:12.5px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }
  .lane-foot button:hover{ border-color:var(--steel); color:var(--steel); }

  /* ===== Card ===== */
  .card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius); padding:11px 12px 12px; cursor:grab; position:relative; transition:box-shadow .12s ease, transform .12s ease; }
  .card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-1px); }
  .card.dragging{ opacity:0.35; }
  .card.readonly{ cursor:default; }
  .card-top{ display:flex; align-items:flex-start; gap:8px; margin-bottom:6px;}
  .card-code{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; color:#fff; background:var(--ink); padding:2px 6px; border-radius:9px; flex:0 0 auto; letter-spacing:0.3px; }
  .card-title{ font-weight:600; font-size:13.5px; line-height:1.3; flex:1; }
  .card-actions{ display:flex; gap:2px; opacity:0; transition:opacity .12s ease; }
  .card:hover .card-actions{ opacity:1; }
  .icon-btn{ background:none;border:none;cursor:pointer;color:var(--ink-soft); padding:3px; border-radius:9px; display:flex;}
  .icon-btn:hover{ background:var(--bg); color:var(--ink); }
  .icon-btn.danger:hover{ color:var(--danger); }
  .icon-btn:disabled{ opacity:0.25; cursor:default; }
  .icon-btn:disabled:hover{ background:none; color:var(--ink-soft); }
  .card-row{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); margin-top:5px; }
  .card-row svg{ flex:0 0 auto; opacity:0.7; }
  .cad-chip{ display:flex; align-items:flex-start; gap:5px; font-family:'JetBrains Mono',monospace; font-size:10.3px; font-weight:500; background:var(--bg); border:1px solid var(--panel-edge); color:var(--steel-dark); padding:5px 7px; border-radius:9px; margin-top:7px; width:100%; cursor:pointer; text-align:left; word-break:break-all; line-height:1.4; }
  .cad-chip:hover{ border-color:var(--steel); background:var(--surface-hover); }
  .cad-chip svg{ flex:0 0 auto; margin-top:2px; }
  .status-badge{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; padding:3px 8px; border-radius:20px; }
  .status-todo{ background:var(--pill-gray-bg); color:var(--pill-gray-text); }
  .status-inprogress{ background:var(--pill-blue-bg); color:var(--pill-blue-text); }
  .status-done{ background:var(--pill-green-bg); color:var(--pill-green-text); }
  .status-blocked{ background:var(--pill-red-bg); color:var(--pill-red-text); }
  .card-note{ margin-top:8px; background:var(--amber-note); border:1px solid var(--amber-note-edge); border-left:3px solid var(--amber-note-edge); padding:7px 9px; border-radius:9px; font-size:12px; line-height:1.45; }
  .card-note .note-label{ font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:0.5px; color:var(--amber-note-text); display:flex; align-items:center; gap:4px; margin-bottom:3px; text-transform:uppercase; }
  .card-parts{ display:flex; align-items:flex-start; gap:6px; font-size:11.5px; color:var(--ink-soft); margin-top:7px; padding-top:7px; border-top:1px dashed var(--panel-edge); }
  .card-parts svg{ flex:0 0 auto; margin-top:1px; opacity:0.7;}
  .card-parts span{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

  /* ===== Modal ===== */
  .overlay{ position:fixed; inset:0; background:rgba(20,25,30,0.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; backdrop-filter:blur(1px); }
  /* Secondary modals are opened from inside another modal, so they need to
     sit above it regardless of their order in the document. */
  .overlay.overlay-top{ z-index:150; }
  .modal{ background:var(--panel); border-radius:11px; width:100%; max-width:480px; box-shadow:0 20px 50px rgba(0,0,0,0.3); max-height:88vh; overflow-y:auto; }
  .modal.wide{ max-width:560px; }
  .modal-head{ padding:18px 22px; border-bottom:1px solid var(--panel-edge); display:flex; align-items:center; justify-content:space-between; }
  .modal-head-title{ display:flex; align-items:center; gap:10px; }
  .modal-head-title svg{ color:var(--steel); }
  .modal-head h2{ font-family:'Inter',sans-serif; font-size:16.5px; font-weight:700; margin:0; color:var(--ink);}
  .modal-head button{ background:none;border:none;color:var(--ink-soft); cursor:pointer;}
  .modal-head button:hover{ color:var(--ink); }
  .modal-body{ padding:20px 22px; display:flex; flex-direction:column; gap:16px;}
  .field-row{ display:flex; gap:14px; }
  .field-row .field{ flex:1; min-width:0; }
  .swatch-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
  .swatch-chip{ display:flex; align-items:center; gap:8px; border:2px solid var(--panel-edge); border-radius:11px; padding:8px 10px; cursor:pointer; background:var(--panel); font-size:12.5px; font-weight:600; color:var(--ink); }
  .swatch-chip:hover{ border-color:#C7CDD4; }
  .swatch-chip.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .swatch-chip .dot{ width:14px;height:14px;border-radius:50%; flex:0 0 auto; }
  .modal-foot{ padding:16px 22px 20px; display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--panel-edge);}
  .modal-foot .right{ display:flex; gap:10px; align-items:center; }
  .btn-outline{ background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink-soft);}
  .btn-outline:hover{ background:var(--bg); }
  .btn-danger{ background:none; border:none; color:var(--danger); font-weight:600; cursor:pointer; font-size:13px; padding:8px 4px;}
  .btn-danger:hover{ text-decoration:underline; }
  .readonly-note{ background:var(--surface-soft); border:1px solid var(--panel-edge); color:var(--ink-soft); font-size:12px; padding:8px 10px; border-radius:10px; }

  .user-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--panel-edge); }
  .user-row:last-child{ border-bottom:none; }
  .user-row .avatar{ width:30px;height:30px;border-radius:50%; background:var(--steel); color:#fff; display:flex;align-items:center;justify-content:center; font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:700; flex:0 0 auto;}
  .user-row .uname{ font-weight:600; font-size:13px; flex:1; }
  .user-row select{ border:1px solid var(--panel-edge); border-radius:9px; padding:5px 8px; font-size:12px; font-family:'Inter',sans-serif; }
  .add-user-box{ background:var(--surface-soft); border:1px solid var(--panel-edge); border-radius:13px; padding:16px; display:flex; flex-direction:column; gap:12px; margin-top:6px;}
  .add-user-box input[type=text], .add-user-box input[type=password], .add-user-box select{
    width:100%; box-sizing:border-box;
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:11px;
    padding:10px 12px; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink);
    transition:border-color .16s ease;
  }
  .add-user-box input:focus, .add-user-box select:focus{ outline:none; border-color:var(--accent); }
  .add-user-box input::placeholder{ color:var(--ink-soft); }
  .add-user-box select{ cursor:pointer; }
  .add-user-box .field-row{ gap:10px; }
  .add-user-box input, .add-user-box select{ width:100%; border:1px solid var(--panel-edge); border-radius:11px; padding:9px 10px; font-family:'Inter',sans-serif; font-size:13px;}
  /* ===== Per-user access panel ===== */
  .user-block{ border-bottom:1px solid var(--panel-edge); }
  .user-block:last-of-type{ border-bottom:none; }
  .user-block .user-row{ border-bottom:none; }
  .user-row .uaccess{ font-size:11px; color:var(--ink-soft); font-weight:500; }
  .user-row .uname-wrap{ flex:1; min-width:0; }
  .perm-panel{ background:var(--bg); border:1px solid var(--panel-edge); border-radius:11px; padding:12px; margin:0 0 12px 40px; display:flex; flex-direction:column; gap:10px; }
  .perm-modes{ display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; }
  .perm-modes label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
  .perm-note{ font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
  .perm-note.sub{ padding-left:26px; }
  .perm-tree{ display:flex; flex-direction:column; gap:4px; max-height:320px; overflow:auto; background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; padding:6px; }
  .perm-line{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:9px; font-size:12.5px; }
  .perm-line:hover{ background:var(--bg); }
  .perm-line.sub{ padding-left:26px; font-size:12px; color:var(--ink-soft); }
  .perm-caret{ background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:11px; width:16px; padding:0; }
  .perm-dot{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
  .perm-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
  .perm-line.sub .perm-name{ font-weight:500; }
  .perm-sub{ font-size:10.5px; color:var(--ink-soft); }
  .perm-check{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:var(--ink-soft); cursor:pointer; }
  .perm-check.muted{ opacity:0.45; cursor:not-allowed; }
  .perm-machines{ display:flex; flex-direction:column; gap:2px; }

  .activity-row{ padding:10px 0; border-bottom:1px solid var(--panel-edge); font-size:12.8px; }
  .activity-row:last-child{ border-bottom:none; }
  .activity-row .who{ font-weight:700; }
  .activity-row .when{ color:var(--ink-soft); font-size:11px; margin-top:2px; }
  .activity-empty{ text-align:center; color:var(--ink-soft); font-size:13px; padding:30px 0; }

  /* Parts editor inside card modal */
  .parts-box{ display:flex; flex-direction:column; gap:12px; }
  .part-card{ border:1px solid var(--panel-edge); border-radius:11px; padding:12px; background:var(--bg); display:flex; flex-direction:column; gap:9px; }
  .part-card-head{ display:flex; align-items:center; gap:8px; }
  .part-card-head input.part-name{ flex:1; border:1px solid var(--panel-edge); border-radius:10px; padding:8px 10px; font-size:13px; font-weight:600; font-family:'Inter',sans-serif; background:var(--panel);}
  .part-card-head .icon-btn{ flex:0 0 auto; }
  .part-field-row{ display:flex; gap:8px; }
  .part-field-row input{ flex:1; border:1px solid var(--panel-edge); border-radius:10px; padding:7px 9px; font-size:12.5px; font-family:'Inter',sans-serif; background:var(--panel); min-width:0;}
  .part-field-row input::placeholder{ color:#9BA6B3; }
  .part-notes{ width:100%; border:1px solid var(--panel-edge); border-radius:10px; padding:7px 9px; font-size:12.5px; font-family:'Inter',sans-serif; resize:vertical; min-height:40px; background:var(--panel);}
  .part-files-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
  .file-upload-btn{ display:inline-flex; align-items:center; gap:5px; background:var(--panel); border:1px dashed var(--panel-edge); color:var(--steel); font-weight:600; font-size:11.5px; padding:6px 10px; border-radius:10px; cursor:pointer; }
  .file-upload-btn:hover{ border-color:var(--steel); background:var(--surface-hover); }
  .file-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; padding:4px 6px 4px 4px; font-size:11px; max-width:180px; }
  .file-chip .thumb{ width:20px;height:20px;border-radius:10px; object-fit:cover; flex:0 0 auto; }
  .file-chip .ficon{ width:20px;height:20px;border-radius:10px; background:var(--bg); display:flex;align-items:center;justify-content:center; flex:0 0 auto; color:var(--steel-dark); }
  .file-chip .fname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:90px; color:var(--ink); font-weight:500; }
  .file-chip button{ background:none;border:none;color:var(--ink-soft); cursor:pointer; padding:1px; display:flex; flex:0 0 auto;}
  .file-chip button:hover{ color:var(--danger); }
  .add-part-btn{ align-self:flex-start; background:none; border:1px dashed var(--panel-edge); color:var(--steel); font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:5px;}
  .add-part-btn:hover{ border-color:var(--steel); background:var(--surface-hover); }
  .parts-empty{ font-size:12px; color:var(--ink-soft); font-style:italic; }
  /* Part usage-status pill (Active / Discontinued / Unconfirmed) — tap to cycle */
  .part-status-btn{ flex:0 0 auto; border:1px solid transparent; border-radius:20px; padding:5px 12px; font-size:11px; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; white-space:nowrap; }
  .part-status-btn[data-status="active"]{ background-color:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .part-status-btn[data-status="discontinued"]{ background-color:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border); }
  .part-status-btn[data-status="unconfirmed"]{ background-color:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border); }
  .part-status-btn:disabled{ opacity:.85; cursor:default; }
  /* To-Do */
  .todo-tabs{ display:flex; gap:6px; margin-bottom:14px; border-bottom:1px solid var(--panel-edge); }
  .todo-tab{ padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; border-bottom:2px solid transparent; background:none; border-left:none; border-right:none; border-top:none; }
  .todo-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .todo-section-sub{ font-size:11.5px; color:var(--ink-soft); margin:-6px 0 10px; }
  .todo-row{ display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--panel-edge); border-radius:11px; margin-bottom:8px; background:var(--panel); flex-wrap:wrap; }
  .todo-row.done{ opacity:.6; }
  .todo-title{ flex:1 1 150px; font-weight:700; font-size:13px; min-width:110px; }
  .todo-dates{ font-size:11px; color:var(--ink-soft); flex:0 0 auto; white-space:nowrap; }
  .todo-owner{ font-size:11px; color:var(--ink-soft); flex:0 0 auto; white-space:nowrap; }
  .todo-pill{ flex:0 0 auto; border-radius:20px; padding:4px 10px; font-size:10.5px; font-weight:700; white-space:nowrap; border:1px solid transparent; cursor:default; font-family:'Inter',sans-serif; }
  .todo-pill.clickable{ cursor:pointer; }
  .todo-pill.pri-low{ background:var(--pill-blue-soft-bg); color:var(--pill-blue-soft-text); border-color:var(--pill-blue-soft-border); }
  .todo-pill.pri-medium{ background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border); }
  .todo-pill.pri-high{ background:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border); }
  .todo-pill.st-todo{ background:var(--pill-gray-bg); color:var(--pill-gray-text); border-color:var(--pill-gray-border); }
  .todo-pill.st-inprogress{ background:var(--pill-blue-bg); color:var(--pill-blue-text); border-color:var(--pill-blue-border); }
  .todo-pill.st-done{ background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .todo-del{ flex:0 0 auto; background:none; border:none; color:var(--pill-red-text); cursor:pointer; padding:4px; opacity:.7; }
  .todo-del:hover{ opacity:1; }
  .todo-empty{ font-size:12px; color:var(--ink-soft); font-style:italic; padding:6px 0 14px; }
  .add-todo-box{ background:var(--surface-soft); border:1px solid var(--panel-edge); border-radius:13px; padding:16px; display:flex; flex-direction:column; gap:12px; margin-top:4px; margin-bottom:18px;}
  .add-todo-box .field-row{ gap:12px; align-items:flex-end; }
  .add-todo-box label{ font-size:12.5px; font-weight:700; color:var(--ink); }
  /* These inputs previously had no styling and fell back to raw browser
     defaults, which looked out of place next to the rest of the app. */
  .add-todo-box input[type=text],
  .add-todo-box input[type=date],
  .add-todo-box select{
    width:100%; box-sizing:border-box;
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:11px;
    padding:10px 12px; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink);
    transition:border-color .16s ease;
  }
  .add-todo-box input[type=text]:focus,
  .add-todo-box input[type=date]:focus,
  .add-todo-box select:focus{ outline:none; border-color:var(--accent); }
  .add-todo-box input::placeholder{ color:var(--ink-soft); }
  .add-todo-box select{ cursor:pointer; }
  .add-todo-box .btn{ white-space:nowrap; padding:10px 18px; }
  .todo-date-label{ font-size:10.5px; color:var(--ink-soft); font-weight:600; margin-bottom:4px; display:block; text-transform:uppercase; letter-spacing:.3px; }
  /* Collapsible part rows */
  .part-card{ padding:0; gap:0; overflow:hidden; }
  .part-card-head{ padding:9px 10px; cursor:pointer; background:var(--panel); }
  .part-card.open > .part-card-head{ border-bottom:1px solid var(--panel-edge); }
  .part-toggle{ flex:0 0 auto; background:none; border:none; padding:2px; cursor:pointer; color:var(--ink-soft); display:flex; }
  .part-toggle svg{ transition:transform .15s ease; }
  .part-card.open .part-toggle svg{ transform:rotate(90deg); }
  .part-file-count{ flex:0 0 auto; font-size:10.5px; font-weight:700; color:var(--steel-dark); background:var(--bg); border:1px solid var(--panel-edge); border-radius:20px; padding:2px 7px; display:inline-flex; align-items:center; gap:4px; }
  .part-card-body{ display:flex; flex-direction:column; gap:9px; padding:11px 10px 12px; background:var(--bg); }
  .part-card:not(.open) .part-card-body{ display:none; }

  /* Card face attachment indicators */
  .card-attach-row{ display:flex; align-items:center; gap:6px; margin-top:8px; }
  .attach-btn{ display:inline-flex; align-items:center; gap:5px; background:var(--bg); border:1px solid var(--panel-edge); color:var(--steel-dark); font-size:11px; font-weight:600; padding:4px 8px; border-radius:20px; cursor:pointer; }
  .attach-btn:hover{ border-color:var(--steel); background:var(--surface-hover); }
  .attach-btn svg{ flex:0 0 auto; }

  /* Image lightbox */
  .lightbox-overlay{ position:fixed; inset:0; background:rgba(10,12,15,0.92); display:flex; align-items:center; justify-content:center; z-index:300; padding:30px; }
  .lightbox-img{ max-width:90vw; max-height:78vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
  .lightbox-caption{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#E7EAEE; font-size:13px; text-align:center; background:rgba(0,0,0,0.4); padding:6px 14px; border-radius:20px;}
  .lightbox-close{ position:absolute; top:20px; right:26px; background:none;border:none;color:#fff; cursor:pointer; }
  .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.1); border:none; color:#fff; width:42px;height:42px;border-radius:50%; cursor:pointer; display:flex;align-items:center;justify-content:center;}
  .lightbox-nav:hover{ background:rgba(255,255,255,0.2); }
  .lightbox-nav.prev{ left:20px; } .lightbox-nav.next{ right:20px; }

  /* Files modal */
  .file-list-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--panel-edge); }
  .file-list-row:last-child{ border-bottom:none; }
  .file-list-row .ficon-lg{ width:34px;height:34px;border-radius:10px; background:var(--bg); display:flex;align-items:center;justify-content:center; flex:0 0 auto; color:var(--steel-dark); overflow:hidden;}
  .file-list-row .ficon-lg img{ width:100%;height:100%;object-fit:cover; }
  .file-list-row .finfo{ flex:1; min-width:0; }
  .file-list-row .fname{ font-size:12.8px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .file-list-row .fmeta{ font-size:11px; color:var(--ink-soft); margin-top:1px; }
  .file-list-row .factions{ display:flex; gap:4px; flex:0 0 auto; }

  .toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:9px; font-size:13px; font-weight:500; box-shadow:var(--shadow-lift); z-index:200; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; max-width:90vw; text-align:center;}
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

  @media (max-width:900px){
    #app{ flex-direction:column; }
    .sidebar{ width:100%; flex:0 0 auto; height:auto; position:sticky; top:0; z-index:60;
      border-right:none; border-bottom:1px solid var(--panel-edge); padding:12px 14px; }
    .sidebar-brand{ padding:0 4px 12px; }
    .sidebar-nav{ flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; }
    .nav-item{ width:auto; flex:0 0 auto; padding:9px 13px; white-space:nowrap; }
    .nav-divider{ display:none; }
    .sidebar-footer{ padding-top:10px; }
    .save-status{ display:none; }
  }
  @media (max-width:640px){
    .content-topbar{ padding:14px 16px 0; }
    .topbar-row2{ padding:14px 16px 2px; }
    .board{ padding:16px; }
    .stats{ padding:14px 16px 2px; }
    .lane{ width:86vw; flex:0 0 86vw; }
    .field-row{ flex-direction:column; gap:16px; }
    .swatch-grid{ grid-template-columns:1fr; }
  }

  /* ===== Messenger ===== */
  .msg-badge{ flex:0 0 auto; min-width:19px; height:19px; padding:0 6px; border-radius:20px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .nav-item.active .msg-badge{ background:rgba(255,255,255,0.25); }
  .modal.chat{ max-width:880px; width:100%; }
  .chat-wrap{ display:flex; height:min(70vh, 560px); }
  .chat-people{ width:230px; flex:0 0 230px; border-right:1px solid var(--panel-edge); overflow-y:auto; background:var(--bg); }
  .chat-person{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-bottom:1px solid var(--panel-edge); cursor:pointer; background:none; border-left:3px solid transparent; width:100%; text-align:left; font-family:'Inter',sans-serif; }
  .chat-person:hover{ background:var(--surface-hover); }
  .chat-person.active{ background:var(--panel); border-left-color:var(--steel); }
  .chat-person .av{ width:28px;height:28px;border-radius:50%; background:var(--steel); color:#fff; font-size:12px; font-weight:700; display:flex;align-items:center;justify-content:center; flex:0 0 auto; }
  .chat-person .nm{ flex:1; min-width:0; }
  .chat-person .nm strong{ display:block; font-size:13px; color:var(--ink); }
  .chat-person .nm span{ display:block; font-size:11px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-person .cnt{ background:var(--rust); color:#fff; font-size:10.5px; font-weight:700; border-radius:20px; min-width:18px; height:18px; padding:0 5px; display:flex;align-items:center;justify-content:center; }
  .chat-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .chat-head2{ padding:10px 14px; border-bottom:1px solid var(--panel-edge); font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
  .chat-thread{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--surface-soft); }
  .bubble{ max-width:74%; padding:8px 11px; border-radius:10px; font-size:13px; line-height:1.45; border:1px solid var(--panel-edge); background:var(--panel); align-self:flex-start; word-wrap:break-word; }
  .bubble.mine{ align-self:flex-end; background:var(--steel); border-color:var(--steel-dark); color:#fff; }
  .bubble .btime{ font-size:10.5px; opacity:.7; margin-top:4px; }
  .bubble img{ max-width:100%; border-radius:10px; display:block; margin-bottom:6px; cursor:zoom-in; }
  .chat-compose{ border-top:1px solid var(--panel-edge); padding:10px 12px; display:flex; align-items:flex-end; gap:8px; background:var(--panel); }
  .chat-compose textarea{ flex:1; resize:none; min-height:40px; max-height:120px; border:1px solid var(--panel-edge); border-radius:11px; padding:9px 11px; font-family:'Inter',sans-serif; font-size:13px; }
  .chat-attach-preview{ display:flex; align-items:center; gap:8px; padding:0 12px 8px; font-size:12px; color:var(--ink-soft); }
  .chat-attach-preview img{ width:38px;height:38px;object-fit:cover;border-radius:10px;border:1px solid var(--panel-edge); }
  .chat-empty{ margin:auto; color:var(--ink-soft); font-size:13px; text-align:center; padding:20px; }

  /* ===== Inventory Management ===== */
  #inventoryScreen{ padding:0 22px 24px; flex:1; min-height:0; overflow-y:auto; }
  .inv-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 0 14px; flex-wrap:wrap; gap:10px; }
  .inv-title{ font-family:'Oswald',sans-serif; font-size:20px; font-weight:600; color:var(--ink); letter-spacing:.3px; }
  .inv-toolbar-actions{ display:flex; gap:10px; align-items:center; }
  .inv-search{ border:1px solid var(--panel-edge); border-radius:11px; padding:8px 12px; font-size:13px; font-family:'Inter',sans-serif; width:220px; }
  .inv-table-wrap{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; overflow-x:auto; }
  .inv-table{ width:100%; border-collapse:collapse; font-family:'Inter',sans-serif; font-size:12.5px; min-width:1200px; }
  .inv-table thead th{ text-align:left; padding:10px 12px; background:var(--surface-soft); border-bottom:1px solid var(--panel-edge); font-weight:700; color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; position:sticky; top:0; }
  .inv-table tbody td{ padding:10px 12px; border-bottom:1px solid var(--panel-edge); white-space:nowrap; color:var(--ink); }
  .inv-table tbody tr:hover{ background:var(--surface-hover); cursor:pointer; }
  .inv-table tbody tr:last-child td{ border-bottom:none; }
  .inv-pill{ display:inline-block; border-radius:20px; padding:4px 10px; font-size:10.5px; font-weight:700; white-space:nowrap; border:1px solid transparent; }
  .inv-pill.reorder-yes{ background:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border); }
  .inv-pill.reorder-no{ background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .inv-pill.status-not_ordered{ background:var(--pill-gray-bg); color:var(--pill-gray-text); border-color:var(--pill-gray-border); }
  .inv-pill.status-on_order{ background:var(--pill-blue-bg); color:var(--pill-blue-text); border-color:var(--pill-blue-border); }
  .inv-pill.status-received{ background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .inv-empty{ padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:13px; }
  .inv-summary{ display:flex; gap:24px; padding:14px 4px; font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; }
  .inv-summary b{ color:var(--ink); }
  .inv-link{ color:var(--steel); text-decoration:none; font-weight:600; }
  .inv-link:hover{ text-decoration:underline; }

  /* ===== Inventory — boards, groups ===== */
  .inv-board-select{ border:1px solid var(--panel-edge); border-radius:11px; padding:7px 10px; font-size:13px; font-family:'Inter',sans-serif; background:var(--panel); color:var(--ink); font-weight:600; }
  .inv-group-row{ background:var(--surface-soft); cursor:pointer; user-select:none; }
  .inv-group-row td{ padding:10px 12px !important; font-weight:700; font-size:12.5px; color:var(--ink); border-bottom:1px solid var(--panel-edge); }
  .inv-group-row .inv-group-toggle{ display:inline-block; transition:transform .12s ease; margin-right:6px; }
  .inv-group-row.collapsed .inv-group-toggle{ transform:rotate(-90deg); }
  .inv-group-count{ font-weight:400; color:var(--ink-soft); margin-left:6px; }
  .inv-group-summary{ font-weight:400; color:var(--ink-soft); font-size:11.5px; float:right; }
  #inventoryBtn:disabled{ opacity:.45; cursor:not-allowed; }
  #inventoryBtn:disabled:hover{ transform:none; }
  .inv-perm-box{ background:var(--bg); border:1px dashed var(--panel-edge); border-radius:11px; padding:12px; margin-top:8px; }
  .inv-perm-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12.5px; }
  .inv-perm-cols{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:6px; }
  .inv-perm-cols label{ font-size:12px; display:flex; align-items:center; gap:5px; font-weight:500; }
  .inv-perm-boards{ display:flex; flex-wrap:wrap; gap:8px 14px; margin:6px 0; }
  .inv-perm-boards label{ font-size:12px; display:flex; align-items:center; gap:5px; font-weight:500; }

  /* ===== Theme toggle ===== */
  .theme-toggle-btn{ padding:9px 10px; }
  .theme-toggle-btn svg{ display:block; }

  /* ===== Profile ===== */
  .btn-link{ background:none; border:none; color:var(--accent); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; padding:0; }
  .btn-link:hover{ text-decoration:underline; }
  .user-chip-main{ display:flex; align-items:center; gap:9px; background:none; border:none; padding:0; cursor:pointer; flex:1; min-width:0; text-align:left; font-family:'Inter',sans-serif; color:inherit; }
  .user-chip-main:hover .avatar{ filter:brightness(1.12); }
  .avatar-wrap{ position:relative; flex:0 0 auto; }
  .avatar{ background-size:cover; background-position:center; }
  .status-dot{ position:absolute; right:-2px; bottom:-2px; width:13px; height:13px; border-radius:50%; border:2px solid var(--panel); background:var(--slate); display:flex; align-items:center; justify-content:center; font-size:7px; }
  .status-dot.big{ width:30px; height:30px; right:2px; bottom:2px; border-width:3px; font-size:14px; }
  .status-dot.s-in_office{ background:#4ECB8F; }
  .status-dot.s-working_from_home{ background:#4C8DF6; }
  .status-dot.s-out_sick{ background:#E8734A; }
  .status-dot.s-on_break{ background:#7C6BF5; }
  .status-dot.s-out_of_office{ background:#8E8E9A; }
  .status-dot.s-working_outside{ background:#4ECB8F; }
  .status-dot.s-family_time{ background:#E8B14A; }
  .status-dot.s-do_not_disturb{ background:#E2515C; }

  .profile-modal{ max-width:900px; width:100%; }
  .profile-wrap{ display:flex; min-height:420px; }
  .profile-nav{ width:200px; flex:0 0 200px; border-right:1px solid var(--panel-edge); padding:14px 10px; display:flex; flex-direction:column; gap:3px; background:var(--surface-soft); }
  .profile-nav-item{ display:flex; align-items:center; gap:9px; background:none; border:none; border-radius:10px; padding:9px 11px; cursor:pointer; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:var(--ink-soft); text-align:left; transition:background .16s ease, color .16s ease; }
  .profile-nav-item:hover{ background:var(--surface-hover); color:var(--ink); }
  .profile-nav-item.active{ background:var(--accent); color:#fff; font-weight:600; }
  .profile-body{ flex:1; padding:22px 24px; overflow-y:auto; min-width:0; }
  .profile-pane-title{ font-family:'Oswald',sans-serif; font-size:19px; font-weight:600; margin:0 0 16px; color:var(--ink); }

  .profile-hero{ display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
  .profile-avatar-wrap{ position:relative; flex:0 0 auto; }
  .profile-avatar{ width:120px; height:120px; border-radius:50%; background:linear-gradient(150deg, var(--accent), var(--accent-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:42px; font-weight:700; background-size:cover; background-position:center; }
  .avatar-edit-btn{ position:absolute; right:0; top:4px; width:30px; height:30px; border-radius:50%; background:var(--panel); border:1px solid var(--panel-edge); color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .avatar-edit-btn:hover{ color:var(--ink); background:var(--surface-hover); }
  .profile-hero-text{ flex:1 1 220px; min-width:200px; }
  .profile-name-input{ width:100%; box-sizing:border-box; background:none; border:1px solid transparent; border-radius:10px; padding:4px 8px; font-family:'Oswald',sans-serif; font-size:27px; font-weight:600; color:var(--ink); }
  .profile-name-input:hover, .profile-jobtitle-input:hover{ border-color:var(--panel-edge); }
  .profile-name-input:focus, .profile-jobtitle-input:focus{ outline:none; border-color:var(--accent); background:var(--panel); }
  .profile-jobtitle-input{ width:100%; box-sizing:border-box; background:none; border:1px solid transparent; border-radius:10px; padding:4px 8px; margin-top:2px; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-soft); }
  .profile-contact{ flex:1 1 220px; min-width:200px; display:flex; flex-direction:column; gap:12px; }
  .pc-row label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:3px; }
  .pc-row input{ width:100%; box-sizing:border-box; background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px; padding:8px 10px; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink); }
  .pc-row input:focus{ outline:none; border-color:var(--accent); }
  .profile-actions{ margin-top:22px; padding-top:16px; border-top:1px solid var(--panel-edge); display:flex; justify-content:flex-end; }

  .status-list{ display:flex; flex-direction:column; gap:4px; }
  .status-option{ display:flex; align-items:center; gap:11px; background:none; border:1px solid transparent; border-radius:11px; padding:11px 13px; cursor:pointer; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink); text-align:left; width:100%; transition:background .16s ease; }
  .status-option:hover{ background:var(--surface-hover); }
  .status-option.active{ background:var(--accent); color:#fff; font-weight:600; }
  .status-option .sdot{ width:20px; height:20px; border-radius:50%; flex:0 0 auto; }

  @media (max-width:700px){
    .profile-wrap{ flex-direction:column; }
    .profile-nav{ width:auto; flex:0 0 auto; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--panel-edge); }
    .profile-nav-item{ white-space:nowrap; }
  }

  /* ===== Session history ===== */
  .sessions-table-wrap{ border:1px solid var(--panel-edge); border-radius:12px; overflow-x:auto; margin-top:12px; }
  .sessions-table{ width:100%; border-collapse:collapse; font-family:'Inter',sans-serif; font-size:12.5px; min-width:560px; }
  .sessions-table thead th{ text-align:left; padding:11px 13px; background:var(--surface-soft); border-bottom:1px solid var(--panel-edge); font-weight:700; color:var(--ink-soft); font-size:11px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
  .sessions-table tbody td{ padding:11px 13px; border-bottom:1px solid var(--panel-edge); color:var(--ink); white-space:nowrap; }
  .sessions-table tbody tr:last-child td{ border-bottom:none; }
  .session-current{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:2px 8px; border-radius:20px; background:var(--pill-green-bg); color:var(--pill-green-text); margin-left:7px; }
  .session-logout-btn{ background:none; border:1px solid var(--panel-edge); border-radius:9px; padding:5px 11px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:var(--ink); cursor:pointer; }
  .session-logout-btn:hover{ background:var(--surface-hover); border-color:var(--danger); color:var(--danger); }

  .uname-clickable{ cursor:pointer; border-radius:9px; padding:3px 6px; margin:-3px -6px; transition:background .16s ease; }
  .uname-clickable:hover{ background:var(--surface-hover); }
  .user-row .avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(150deg, var(--accent), var(--accent-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; flex:0 0 auto; }
  .user-row .status-dot{ border-color:var(--panel); }

  /* ===== Boot splash (prevents the login screen flashing on reload) ===== */
  .boot-splash{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
  .boot-plate{ width:52px; height:52px; border-radius:15px; background:linear-gradient(150deg, var(--accent), var(--accent-dark)); display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; color:#fff; font-size:18px; letter-spacing:.5px; }
  .boot-spinner{ width:26px; height:26px; border-radius:50%; border:3px solid var(--panel-edge); border-top-color:var(--accent); animation:boot-spin .7s linear infinite; }
  @keyframes boot-spin{ to{ transform:rotate(360deg); } }

  /* ===== Group chat ===== */
  .chat-section-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); padding:10px 12px 5px; }
  .chat-person .av.group{ background:var(--accent); font-size:15px; }
  .chat-person .av{ background-size:cover; background-position:center; }
  .bubble .bsender{ font-size:11px; font-weight:700; color:var(--accent); margin-bottom:3px; }
  .bubble.mine .bsender{ color:rgba(255,255,255,.85); }
  .btime{ display:flex; align-items:center; gap:6px; }
  .msg-del-btn{ background:none; border:none; color:inherit; opacity:.45; cursor:pointer; font-size:12px; padding:0 2px; line-height:1; }
  .msg-del-btn:hover{ opacity:1; color:var(--danger); }
  .bubble.mine .msg-del-btn:hover{ color:#fff; }
  #chatHead{ display:flex; align-items:center; gap:8px; }

  /* ===== Deleted message placeholder ===== */
  .bubble.deleted{ opacity:.75; }
  .deleted-msg{ display:inline-flex; align-items:center; gap:6px; font-style:italic; color:var(--ink-soft); font-size:12.5px; }
  .bubble.mine .deleted-msg{ color:rgba(255,255,255,.8); }
  .msg-pending{ font-size:10px; font-style:italic; opacity:.7; white-space:nowrap; }
  #delReqBtn{ position:relative; }
  #delReqBtn .msg-badge{ margin-left:6px; }

  /* ===== Owner oversight view ===== */
  .oversight-tag{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:3px 9px; border-radius:20px; background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border:1px solid var(--pill-yellow-border); margin-left:8px; }

  /* Deleted-but-retained message, visible only in the oversight view */
  .bubble.retained{ border:1px dashed var(--pill-yellow-border); background:var(--pill-yellow-bg); }
  .retained-tag{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--pill-yellow-text); margin-bottom:5px; font-style:italic; }

  .ok-box{ background:var(--pill-green-bg); border:1px solid var(--pill-green-border); color:var(--pill-green-text); padding:10px 12px; border-radius:11px; font-size:12.5px; }

  /* Part file chips behave like the ones on the card view */
  .file-chip.clickable{ cursor:pointer; transition:border-color .16s ease, background .16s ease, transform .08s ease; }
  .file-chip.clickable:hover{ border-color:var(--accent); background:var(--surface-hover); }
  .file-chip.clickable:active{ transform:translateY(1px); }
  .file-chip.clickable .fname{ pointer-events:none; }
  .file-chip.clickable .thumb, .file-chip.clickable .ficon{ pointer-events:none; }

  /* ===== Hover tooltip =====
     Used where a native title= would be too slow or get clipped, e.g. a
     truncated group name in the lane header. */
  .hover-tip{ position:fixed; z-index:400; pointer-events:none; max-width:320px;
    background:var(--ink); color:var(--panel); font-family:'Inter',sans-serif; font-size:12px; font-weight:500;
    padding:7px 11px; border-radius:9px; box-shadow:var(--shadow-lift); line-height:1.4;
    opacity:0; transition:opacity .12s ease; }
  .hover-tip.show{ opacity:1; }
  [data-theme="dark"] .hover-tip{ background:#2E2E38; color:var(--ink); border:1px solid var(--panel-edge); }

  /* ===== Blocking busy overlay =====
     Used for backup/restore, where an interrupted operation could leave the
     server half-updated. Covers everything so no stray click can navigate away. */
  .busy-overlay{ position:fixed; inset:0; z-index:500; background:rgba(11,11,15,0.72);
    display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(2px); }
  .busy-card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:16px;
    padding:30px 34px; text-align:center; max-width:380px; box-shadow:var(--shadow-lift); }
  .busy-spinner{ width:38px; height:38px; margin:0 auto 16px; border-radius:50%;
    border:3px solid var(--panel-edge); border-top-color:var(--accent); animation:boot-spin .7s linear infinite; }
  .busy-title{ font-family:'Oswald',sans-serif; font-size:17px; font-weight:600; color:var(--ink); margin-bottom:6px; }
  .busy-note{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

  /* Inline spinner for a button that's mid-operation */
  .nav-item.working{ opacity:.75; cursor:progress; }
  .btn-spinner{ width:15px; height:15px; flex:0 0 auto; border-radius:50%;
    border:2px solid var(--panel-edge); border-top-color:var(--accent); animation:boot-spin .7s linear infinite; }
  .nav-item.active .btn-spinner{ border-color:rgba(255,255,255,.35); border-top-color:#fff; }

  /* ===== Scrollbars =====
     Thicker and permanently visible, so they're easy to grab rather than
     appearing only mid-scroll. */
  *{ scrollbar-width:auto; scrollbar-color:var(--ink-soft) transparent; }
  ::-webkit-scrollbar{ width:14px; height:14px; }
  ::-webkit-scrollbar-track{ background:var(--surface-soft); border-radius:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--panel-edge); border-radius:8px;
    border:3px solid var(--surface-soft); min-height:40px; min-width:40px; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--ink-soft); }
  ::-webkit-scrollbar-corner{ background:var(--surface-soft); }
  /* The board's horizontal bar is the one people drag most, so give it more grip. */
  .board::-webkit-scrollbar{ height:16px; }
  .board::-webkit-scrollbar-thumb{ background:var(--slate); border:3px solid var(--surface-soft); }
  .board::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

  /* ===== Collapsible sidebar ===== */
  .sidebar{ transition:margin-left .26s cubic-bezier(.4,0,.2,1); }
  .sidebar-brand{ position:relative; }
  .sidebar-close{ margin-left:auto; background:none; border:none; color:var(--ink-soft); cursor:pointer;
    padding:6px; border-radius:9px; display:flex; flex:0 0 auto; }
  .sidebar-close:hover{ background:var(--surface-hover); color:var(--ink); }
  /* Collapsed: slide the whole rail out of view rather than resize it, so the
     content reflows once instead of animating a width change every frame. */
  #app.sidebar-collapsed .sidebar{ margin-left:-236px; }
  .hamburger-btn{ display:none; background:var(--panel); border:1px solid var(--panel-edge);
    color:var(--ink); cursor:pointer; padding:10px; border-radius:11px; align-items:center; justify-content:center; flex:0 0 auto; }
  .hamburger-btn:hover{ background:var(--surface-hover); }
  #app.sidebar-collapsed .hamburger-btn{ display:inline-flex; }
  .content-topbar{ display:flex; align-items:center; gap:12px; }
  .content-topbar .search-wrap{ flex:1; }
  .sidebar-scrim{ display:none; }

  /* ===== Data group (accordion) ===== */
  .nav-group-toggle .nav-caret{ margin-left:auto; transition:transform .2s ease; opacity:.7; }
  .nav-group.open .nav-group-toggle .nav-caret{ transform:rotate(180deg); }
  .nav-group-body{ overflow:hidden; padding:2px 0 6px; }
  .nav-sub-label{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    color:var(--ink-soft); padding:8px 12px 4px 14px; }
  .nav-item.nav-sub{ padding:8px 12px 8px 22px; font-size:12.5px; font-weight:500; }
  .nav-item.nav-sub svg{ opacity:.85; }

  @media (max-width:900px){
    /* On narrow screens the sidebar floats over the content instead of
       squeezing it, with a scrim to dismiss. */
    .sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:120; width:236px; flex:0 0 236px;
      height:100vh; border-right:1px solid var(--panel-edge); border-bottom:none;
      flex-direction:column; padding:20px 14px; transform:translateX(0); transition:transform .26s cubic-bezier(.4,0,.2,1); }
    #app.sidebar-collapsed .sidebar{ margin-left:0; transform:translateX(-100%); }
    .sidebar-nav{ flex-direction:column; overflow-y:auto; }
    .nav-item{ width:100%; }
    .nav-divider{ display:block; }
    .save-status{ display:flex; }
    .hamburger-btn{ display:inline-flex; }
    .main-area{ width:100%; }
    .sidebar-scrim{ display:block; position:fixed; inset:0; z-index:110; background:rgba(11,11,15,.5); }
    #app.sidebar-collapsed .sidebar-scrim{ display:none; }
  }

  /* ===== Super-admin lobby ===== */
  #lobbyScreen{ min-height:100vh; background:var(--bg); display:flex; flex-direction:column; }
  .lobby-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:16px 28px; background:var(--panel); border-bottom:1px solid var(--panel-edge); }
  .lobby-brand{ display:flex; align-items:center; gap:12px; }
  .lobby-bar-actions{ display:flex; align-items:center; gap:12px; }
  .lobby-body{ flex:1; padding:28px; max-width:1100px; width:100%; margin:0 auto; box-sizing:border-box; }
  .lobby-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
  .lobby-title{ font-family:'Oswald',sans-serif; font-size:24px; font-weight:600; color:var(--ink); margin:0; }
  .lobby-sub{ margin:3px 0 0; font-size:12.5px; color:var(--ink-soft); }
  .lobby-empty{ padding:50px 20px; text-align:center; color:var(--ink-soft); font-size:13.5px;
    border:1px dashed var(--panel-edge); border-radius:14px; }
  .tenant-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:16px; }
  .tenant-card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px; padding:18px;
    display:flex; flex-direction:column; gap:12px; transition:border-color .16s ease, transform .08s ease, box-shadow .16s ease; }
  .tenant-card:hover{ border-color:var(--accent); box-shadow:var(--shadow-lift); }
  .tenant-card-top{ display:flex; align-items:flex-start; gap:12px; }
  .tenant-logo{ width:42px; height:42px; flex:0 0 auto; border-radius:12px; color:#fff;
    background:linear-gradient(150deg, var(--accent), var(--accent-dark));
    display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:16px; }
  .tenant-name{ font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; color:var(--ink); word-break:break-word; }
  .tenant-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
  .tenant-stats{ display:flex; gap:16px; font-size:12px; color:var(--ink-soft); }
  .tenant-stats b{ color:var(--ink); font-size:15px; display:block; font-family:'Oswald',sans-serif; }
  .tenant-actions{ display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--panel-edge); padding-top:12px; }
  .tenant-actions .btn{ padding:7px 12px; font-size:12px; }
  .tenant-warn{ font-size:11.5px; color:var(--pill-yellow-text); background:var(--pill-yellow-bg);
    border:1px solid var(--pill-yellow-border); border-radius:9px; padding:6px 9px; }

  /* Banner shown while a super-admin is inside someone's company */
  .impersonation-bar{ display:flex; align-items:center; gap:9px; padding:10px 28px; font-size:12.5px;
    background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-bottom:1px solid var(--pill-yellow-border); }
  @media (max-width:640px){
    .lobby-bar, .lobby-body{ padding:14px 16px; }
    .impersonation-bar{ padding:10px 16px; flex-wrap:wrap; }
  }