: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;
    /* Brand ramp sampled from the NextERP logo mark: deep indigo, violet,
       and the cyan of the two inset blocks. Used by the landing page,
       the public modals and the sign-in card. */
    --brand-1:#4B3FD1; --brand-2:#6C5CE7; --brand-3:#22C9E0;
    --brand-glow:rgba(75,63,209,0.34);
    --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;
    /* A solid, high-contrast chip: card code badges, toasts, tooltips.
       These CANNOT use --ink as a background. --ink is the *text* colour and
       is deliberately inverted between themes (near-black on light, near-white
       on dark), so `background:var(--ink); color:#fff` renders white-on-white
       the moment dark mode is on — which is exactly what happened to the card
       code badge. The pair below is defined per theme so the contrast holds
       whichever way round the page is. */
    --chip-bg:#1B2127; --chip-text:#FFFFFF;
  }

  [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;
    --brand-1:#7A6BEA; --brand-2:#9B8CF5; --brand-3:#38DCF0;
    --brand-glow:rgba(122,107,234,0.42);
    --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;
    /* Raised rather than inverted: on a near-black page a chip reads as a
       lighter surface, not a black block. #2E2E38 is the tone the tooltip
       already used, so the three now match. */
    --chip-bg:#2E2E38; --chip-text:#F2F3F5;
  }
  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
  :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; }

  /* Background scroll lock: set by app.js whenever any .overlay is open.
     position:fixed is the only thing iOS Safari actually honours — plain
     overflow:hidden on <body> does not stop a touch drag there, which is why
     the landing page used to scroll underneath the "Get a Demo" modal. The
     inline `top:-<scrollY>px` app.js sets alongside this class keeps the page
     visually where it was; app.js restores the offset on unlock. */
  body.scroll-locked{ position:fixed; inset-inline:0; width:100%; overflow:hidden; }

  /* ===== 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(--brand-1), var(--brand-2) 55%, var(--brand-3)); }
  /* 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:start; 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); }
  /* datetime-local, time, url, email and search were never in this list, so
     every one of them rendered as a raw browser control sitting between styled
     neighbours — which is what made the maintenance panes look unfinished.
     Listed explicitly rather than as input:not([type=checkbox]) so radio,
     checkbox, file and range keep their native appearance on purpose. */
  .field input[type=text], .field input[type=password], .field input[type=number], .field input[type=date], .field input[type=datetime-local], .field input[type=time], .field input[type=month], .field input[type=week], .field input[type=url], .field input[type=email], .field input[type=search], .field input[type=tel], .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; }
  /* Chrome draws the calendar/clock glyph in its own colour, which disappears
     against the dark panel. Inverting it is the only hook the control exposes. */
  .field input[type=date]::-webkit-calendar-picker-indicator,
  .field input[type=datetime-local]::-webkit-calendar-picker-indicator,
  .field input[type=time]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.55; }
  .field input[type=date]:hover::-webkit-calendar-picker-indicator,
  .field input[type=datetime-local]:hover::-webkit-calendar-picker-indicator,
  .field input[type=time]:hover::-webkit-calendar-picker-indicator{ opacity:1; }
  [data-theme="dark"] .field input[type=date]::-webkit-calendar-picker-indicator,
  [data-theme="dark"] .field input[type=datetime-local]::-webkit-calendar-picker-indicator,
  [data-theme="dark"] .field input[type=time]::-webkit-calendar-picker-indicator{ filter:invert(1); }
  .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);}

  /* -- Password reveal toggle --
     passwordReveal.js wraps every input[type=password] in .pw-wrap at runtime
     and appends the button, so no markup anywhere carries it — including the
     five password fields dataHub.js renders into modals after load.
     The input keeps its id, its value and its place inside .field, and the
     .field input[type=text] rule above already matches it while revealed, so
     the box does not change shape when the type flips. */
  .pw-wrap{ position:relative; display:block; }
  .field .pw-wrap > input.pw-has-toggle,
  .pw-wrap > input.pw-has-toggle{ padding-inline-end:42px; }
  .pw-toggle{ position:absolute; inset-inline-end:5px; top:50%; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0;
    border:0; border-radius:8px; background:none; color:var(--ink-soft); cursor:pointer;
    transition:color .12s ease, background .12s ease; }
  .pw-toggle:hover{ color:var(--ink); background:var(--surface-hover); }
  .pw-toggle:focus-visible{ outline:2px solid var(--steel); outline-offset:1px; }
  .pw-toggle .pw-ico-off{ display:none; }
  .pw-toggle.is-on{ color:var(--brand-1); }
  .pw-toggle.is-on .pw-ico-on{ display:none; }
  .pw-toggle.is-on .pw-ico-off{ display:flex; }
  @media (max-width:640px){
    /* Touch target, same reasoning as the nav buttons. */
    .pw-toggle{ width:38px; height:38px; }
    .field .pw-wrap > input.pw-has-toggle,
    .pw-wrap > input.pw-has-toggle{ padding-inline-end:48px; }
  }
  .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-inline-end: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:start;
    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; }

  .lang-switch-nav-item{ position:relative; }
  .lang-switch-nav-item span{ pointer-events:none; }
  .lang-switch-select-nav{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
    appearance:none; -webkit-appearance:none; border:none; background:none; }

  .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.tenant-admin{ background:var(--pill-blue-soft-bg); color:var(--pill-blue-soft-text); }
  .role-pill.hr-manager{ background:var(--pill-blue-bg); color:var(--pill-blue-text); }
  .role-pill.standard-user{ 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; inset-inline-start: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-inline-start:3px solid var(--steel); }
  .stat-card.rust{ border-inline-start-color:var(--rust); }
  .stat-card.patina{ border-inline-start-color:var(--patina); }
  .stat-card.slate{ border-inline-start-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; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--lane-color, var(--steel)); border-start-start-radius:var(--radius); border-end-start-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); }

  /* ===== Table View (Monday.com-style grid) =====
     .table-view sits as a sibling of .board inside .main-area's flex column,
     so it needs the exact same "take the remaining height and scroll
     independently" treatment as .board (flex:1 + min-height:0 + its own
     overflow-y), rather than relying on the page/body to scroll. */
  .table-view{ display:flex; flex-direction:column; gap:14px; padding:20px 28px 24px; flex:1; min-height:0; overflow-y:auto; }
  .table-group{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; flex:0 0 auto; }
  /* Header rows get real visual weight — roughly double a data row's height,
     a bold larger name, a coloured accent bar, and a tinted background —
     so a collapsed board reads as a stack of distinct sections rather than
     just more spreadsheet lines. */
  .table-group-head{ display:flex; align-items:center; gap:12px; min-height:56px; padding:16px 18px; cursor:pointer; user-select:none;
    background:var(--surface-soft); border-left:6px solid var(--lane-color, var(--accent)); }
  .table-group-head:hover{ background:var(--surface-hover); }
  .table-group-caret{ color:var(--ink-soft); transition:transform .12s ease; flex:0 0 auto; }
  .table-group-caret.collapsed{ transform:rotate(-90deg); }
  .table-group-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
  .table-group-name{ font-weight:800; font-size:16px; color:var(--ink); letter-spacing:.01em; }
  .table-group-head .lane-count{ margin-left:auto; }
  .table-group-body{ border-top:1px solid var(--panel-edge); }
  .table-group-body .lane-empty{ margin:16px; border:none; }
  .table-scroll{ overflow-x:auto; }
  .data-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
  .data-table thead th{ text-align:left; padding:9px 14px; background:var(--surface-soft); color:var(--ink-soft); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; border-bottom:1px solid var(--panel-edge); position:sticky; top:0; }
  .data-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--panel-edge); color:var(--ink); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
  .data-table tbody tr:last-child td{ border-bottom:none; }
  .table-row{ cursor:pointer; transition:background .1s ease; }
  .table-row:hover, .table-row:focus{ background:var(--surface-hover); outline:none; }
  .table-cell-title{ font-weight:600; }
  .table-code{ color:var(--ink-soft); font-weight:500; margin-right:7px; }
  .table-cell-empty{ color:var(--ink-soft); }
  .data-table .status-badge{ display:inline-block; margin-top:0; }
  .table-view::-webkit-scrollbar{ width:14px; }
  .table-view::-webkit-scrollbar-thumb{ background:var(--slate); border:3px solid var(--surface-soft); border-radius:20px; }
  .table-view::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

  /* ===== 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:var(--chip-text); background:var(--chip-bg); 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; }
  .card-field-row{ gap:5px; }
  .card-field-label{ font-weight:600; color:var(--ink); }
  .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:start; 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-inline-start: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:flex-start; justify-content:center; z-index:100; padding:20px;
    backdrop-filter:blur(2px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  /* 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:14px; width:100%; max-width:480px; box-shadow:0 24px 60px rgba(0,0,0,0.32);
    margin:auto; max-height:88vh; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .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; }
  /* ===== Shared colour picker (js/colorPicker.js) =====
     Mounted into #laneSwatches and #boardColours, replacing the two separate
     swatch styles those used to have. Two variants off one set of rules:
     .cp-labelled shows named chips in a grid, .cp-compact shows bare dots in a
     row. The custom control is the same in both. */
  .cp{ display:flex; flex-direction:column; gap:8px; }
  .cp-labelled .cp-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:7px; }
  .cp-compact .cp-grid{ display:flex; flex-wrap:wrap; gap:7px; }
  /* The collapsed half: the remaining presets and the custom control. */
  .cp-more{ display:flex; flex-direction:column; gap:8px; }
  .cp-toggle{
    align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
    background:none; border:none; padding:2px 0; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    color:var(--ink-soft);
  }
  .cp-toggle:hover{ color:var(--accent); }
  /* The current pick, shown on the toggle only while it is out of sight. */
  .cp-toggle-dot{
    width:12px; height:12px; border-radius:50%; flex:0 0 auto;
    margin-inline-start:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  }
  .cp-caret{ transition:transform .15s ease; }
  .cp-toggle.open .cp-caret{ transform:rotate(180deg); }
  .cp-chip{
    display:flex; align-items:center; gap:8px;
    border:2px solid var(--panel-edge); border-radius:11px;
    background:var(--panel); cursor:pointer;
    font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:var(--ink);
    padding:7px 9px; text-align:start; min-width:0;
  }
  .cp-chip:hover{ border-color:var(--ink-soft); }
  .cp-chip.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .cp-chip .cp-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cp-dot{ width:15px; height:15px; border-radius:50%; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
  /* Compact chips are the swatch and nothing else, so they get a square-ish
     tile rather than a row with an empty label slot. */
  .cp-compact .cp-grid .cp-chip{ padding:5px; border-radius:10px; }
  .cp-compact .cp-grid .cp-dot{ width:24px; height:24px; border-radius:7px; }

  /* The custom row. The native colour input is the click target behind the
     chip — kept in the DOM rather than hidden with display:none, because a
     display:none input cannot be opened by clicking its label. */
  .cp-custom{ display:flex; align-items:center; gap:8px; padding-top:8px; border-top:1px dashed var(--panel-edge); }
  .cp-custom-chip{ position:relative; overflow:hidden; }
  .cp-native{ position:absolute; inset-inline-start:0; bottom:0; width:1px; height:1px; opacity:0; border:none; padding:0; }
  .cp-custom-dot{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
  .cp-hex{
    flex:1 1 110px; min-width:0; max-width:170px;
    border:1px solid var(--panel-edge); border-radius:9px; padding:7px 9px;
    font-family:'JetBrains Mono',monospace; font-size:12px;
    color:var(--ink); background:var(--panel); box-sizing:border-box;
    text-transform:lowercase;
  }
  .cp-hex:focus{ outline:2px solid var(--steel); outline-offset:0; border-color:var(--steel); }
  .modal-foot{ padding:16px 22px 20px; display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--panel-edge); flex-wrap:wrap; align-items:center; }
  .modal-foot .right{ display:flex; gap:10px; align-items:center; margin-inline-start:auto; }
  /* The destructive and the rare-but-deliberate action on the left, the two
     ordinary ones on the right. Both halves are flex rows of equal-height
     buttons, so nothing sits a few pixels above its neighbour, and the whole
     left block drops to its own line before any single button wraps. */
  .modal-foot-split .modal-foot-left{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .modal-foot .btn{ white-space:nowrap; }
  /* Delete reads as destructive without shouting: no fill until hover, which
     keeps Save the only filled control on the row. */
  .btn.btn-danger-quiet{
    background:transparent; color:var(--danger);
    /* Plain border first: a browser without color-mix() drops the line below
       and keeps this one, rather than rendering the button with no border. */
    border:1px solid var(--panel-edge);
    border-color:color-mix(in srgb, var(--danger) 38%, transparent);
  }
  .btn.btn-danger-quiet:hover{ background:var(--error-bg); border-color:var(--danger); }
  /* A secondary action that should not compete with Cancel or Save, but must
     still line up with them. Same height, lighter voice. */
  .btn.btn-quiet{ color:var(--ink-soft); font-weight:600; }
  .btn.btn-quiet:hover{ color:var(--ink); border-color:var(--ink-soft); }
  @media (max-width:560px){
    .modal-foot-split{ flex-direction:column; align-items:stretch; }
    .modal-foot-split .modal-foot-left,
    .modal-foot-split .right{ width:100%; margin-inline-start:0; }
    .modal-foot-split .right .btn{ flex:1; justify-content: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-inline-start: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-inline-start: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-inline-start:none; border-inline-end: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; }

  /* Search hits inside the parts editor.
     Amber is already the app's "look here" colour (design notes, unconfirmed
     status), so matches reuse the yellow pill tokens and inherit dark mode
     for free. Nav is up/down rather than left/right, which keeps it correct
     under RTL without a [dir] override. */
  .part-search-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; margin-bottom:10px;
    background:var(--pill-yellow-bg); border:1px solid var(--pill-yellow-border); color:var(--pill-yellow-text);
    border-radius:10px; font-size:12px; font-weight:600; }
  .part-search-bar.empty{ background:var(--pill-gray-bg); border-color:var(--pill-gray-border); color:var(--pill-gray-text); }
  .part-search-bar > svg{ flex:0 0 auto; }
  .part-search-bar .psb-text{ flex:1 1 140px; min-width:0; }
  .part-search-bar .psb-count, .part-search-bar .psb-term{ font-weight:800; }
  .part-search-bar button{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:4px;
    background:var(--panel); border:1px solid currentColor; color:inherit; border-radius:8px;
    padding:4px 8px; font-size:11px; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; }
  .part-search-bar button:hover:not(:disabled){ background:var(--surface-hover); }
  .part-search-bar button:disabled{ opacity:.4; cursor:default; }

  .part-card.search-hit{ border-color:var(--pill-yellow-border); }
  .part-card.search-hit > .part-card-head{ background:var(--pill-yellow-bg); }
  .part-card.search-hit.current{ border-color:var(--amber-note-edge);
    outline:2px solid var(--amber-note-edge); outline-offset:1px;
    animation:partHitPulse 1.5s ease-out 2; }
  @keyframes partHitPulse{
    0%{ box-shadow:0 0 0 0 rgba(227,185,79,.55); }
    70%{ box-shadow:0 0 0 9px rgba(227,185,79,0); }
    100%{ box-shadow:0 0 0 0 rgba(227,185,79,0); }
  }
  @media (prefers-reduced-motion: reduce){ .part-card.search-hit.current{ animation:none; } }
  .part-hit-badge{ flex:0 0 auto; font-size:10px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
    background:var(--panel); color:var(--pill-yellow-text); border:1px solid var(--pill-yellow-border);
    border-radius:20px; padding:2px 7px; white-space:nowrap; }
  /* The individual field that matched, so a part-number hit reads as clearly
     as a name hit once the row is expanded. */
  .part-card .pf-hit{ border-color:var(--amber-note-edge); background:var(--amber-note); color:var(--amber-note-text);
    box-shadow:0 0 0 2px rgba(227,185,79,.22); }

  /* Card face: why this machine matched, when the hit is buried in a part. */
  .card-part-hit{ display:flex; align-items:center; gap:6px; margin-top:6px; padding:4px 7px;
    background:var(--pill-yellow-bg); border:1px solid var(--pill-yellow-border); color:var(--pill-yellow-text);
    border-radius:8px; font-size:11px; font-weight:700; line-height:1.35; }
  .card-part-hit svg{ flex:0 0 auto; }
  .card-part-hit span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* 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); cursor:zoom-in; }
  /* Actual size: drop the caps so the browser uses the file's own pixel
     dimensions, and let the overlay scroll to reach the parts that no longer
     fit. align-items/justify-content are reset to flex-start because a
     centred flex item larger than its container overflows past the top-left
     edge, which puts it out of scroll reach entirely. */
  .lightbox-overlay.is-zoomed{ overflow:auto; align-items:flex-start; justify-content:flex-start; }
  .lightbox-img.is-actual{
    max-width:none; max-height:none; width:auto; height:auto;
    border-radius:0; margin:auto; cursor:zoom-out;
  }
  .lightbox-zoom{
    position:absolute; top:20px; inset-inline-end:74px; z-index:2;
    background:rgba(255,255,255,0.1); border:none; color:#fff;
    width:38px; height:38px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .lightbox-zoom:hover{ background:rgba(255,255,255,0.22); }
  /* Swap the magnifier's +/− with the state so the button always shows what
     pressing it will do next. */
  .lightbox-zoom-out{ display:none; }
  .lightbox-overlay.is-zoomed .lightbox-zoom-in{ display:none; }
  .lightbox-overlay.is-zoomed .lightbox-zoom-out{ display:block; }
  /* Controls must stay put while the zoomed image scrolls underneath. */
  .lightbox-overlay.is-zoomed .lightbox-close,
  .lightbox-overlay.is-zoomed .lightbox-zoom,
  .lightbox-overlay.is-zoomed .lightbox-nav,
  .lightbox-overlay.is-zoomed .lightbox-caption{ position:fixed; }
  .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; inset-inline-end: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{ inset-inline-start:20px; } .lightbox-nav.next{ inset-inline-end: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; }

  /* ============ Phase 9: audit-trail attribution ============ */
  .creator-avatar{
    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-weight:700;
    flex:0 0 auto; text-transform:uppercase;
  }
  .creator-meta-row{ display:flex; align-items:center; gap:8px; }
  .creator-meta-text{ font-size:11.5px; color:var(--ink-soft); line-height:1.3; }
  .creator-meta-text strong{ color:var(--ink); font-weight:600; }
  .creator-meta-row-wrap{ padding:10px 22px 2px; border-top:1px dashed var(--panel-edge); margin-top:4px; }
  .creator-meta-row-wrap.hidden{ display:none; }

  /* ============ Phase 9: Recycle Bin ============ */
  .rb-pill{
    display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
    padding:2px 7px; border-radius:20px; margin-inline-start:6px; vertical-align:middle;
  }
  .rb-pill-card{ background:var(--pill-blue-bg); color:var(--pill-blue-text); border:1px solid var(--pill-blue-border); }
  .rb-pill-group{ background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border:1px solid var(--pill-yellow-border); }
  .rb-pill-part{ background:var(--pill-gray-bg); color:var(--pill-gray-text); border:1px solid var(--pill-gray-border); }
  .rb-days-left{ font-weight:600; }
  .rb-days-left.soon{ color:var(--rust); }
  .rb-empty{ text-align:center; color:var(--ink-soft); font-size:13px; padding:34px 0; }
  .rb-preview-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .rb-preview-title{ font-family:'Oswald',sans-serif; font-size:17px; font-weight:600; color:var(--ink); }
  .rb-preview-section{ margin-top:14px; }
  .rb-preview-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-soft); margin-bottom:6px; }
  .rb-kv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
  .rb-kv{ font-size:12.5px; }
  .rb-kv .k{ color:var(--ink-soft); font-size:10.5px; text-transform:uppercase; letter-spacing:0.3px; }
  .rb-kv .v{ color:var(--ink); margin-top:1px; }
  .rb-orphan-note{ background:var(--amber-note); border:1px solid var(--amber-note-edge); color:var(--amber-note-text); font-size:11.5px; padding:8px 10px; border-radius:10px; margin-top:10px; }
  .rb-parts-list{ display:flex; flex-direction:column; gap:6px; }
  .rb-part-row{ background:var(--bg); border:1px solid var(--panel-edge); border-radius:10px; padding:8px 10px; font-size:12px; }
  .rb-part-row .rb-part-name{ font-weight:600; color:var(--ink); }
  .rb-files-wrap{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
  .rb-actions{ display:flex; gap:8px; margin-top:18px; }

  .toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--chip-bg); color:var(--chip-text); 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-inline-end: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; }
    .cp-labelled .cp-grid{ grid-template-columns:repeat(2, 1fr); }
    .cp-hex{ max-width:none; }
  }

  /* ===== 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-inline-end: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-inline-start:3px solid transparent; width:100%; text-align:start; font-family:'Inter',sans-serif; }
  .chat-person:hover{ background:var(--surface-hover); }
  .chat-person.active{ background:var(--panel); border-inline-start-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:start; 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-inline-end:6px; }
  .inv-group-row.collapsed .inv-group-toggle{ transform:rotate(-90deg); }
  .inv-group-count{ font-weight:400; color:var(--ink-soft); margin-inline-start: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:start; 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; inset-inline-end:-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; inset-inline-end: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; }

  /* ===== Presence =====
     Availability now has two separate signals, because they answer two
     different questions and one green dot used to answer neither clearly:

       .presence-dot  bottom-end  — is this person connected right now?
       .status-pip    top-end     — what did they say they're doing?

     The presence dot keeps the bottom-end corner because that is the position
     users already read as "are they there". It's also the only one that ever
     shows for a person with no working status set, so the common case stays a
     single unambiguous dot rather than an empty corner. */
  .presence-dot{ position:absolute; inset-inline-end:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; border:2px solid var(--panel); box-sizing:border-box; }
  .presence-dot.on{ background:#3FBF6F; }
  /* Hollow rather than grey-filled: offline reads as "no signal", not as
     another status colour that might be confused with the pip above it. */
  .presence-dot.off{ background:var(--panel); box-shadow:inset 0 0 0 2px var(--slate); opacity:.65; }
  .presence-dot.chat{ width:11px; height:11px; }
  /* Inline variant for the text line — no absolute positioning. */
  .presence-dot.inline{ position:static; width:7px; height:7px; border:none; flex:0 0 auto; }
  .presence-dot.inline.off{ box-shadow:inset 0 0 0 7px var(--slate); opacity:.5; }

  .status-pip{ position:absolute; inset-inline-end:-2px; top:-2px; width:10px; height:10px; border-radius:3px; border:2px solid var(--panel); box-sizing:border-box; background:var(--slate); }
  .status-pip.s-in_office{ background:#4ECB8F; }
  .status-pip.s-working_from_home{ background:#4C8DF6; }
  .status-pip.s-out_sick{ background:#E8734A; }
  .status-pip.s-on_break{ background:#7C6BF5; }
  .status-pip.s-out_of_office{ background:#8E8E9A; }
  .status-pip.s-working_outside{ background:#4ECB8F; }
  .status-pip.s-family_time{ background:#E8B14A; }
  .status-pip.s-do_not_disturb{ background:#E2515C; }

  .presence-line{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; margin-top:2px; }
  .presence-line.on{ color:#2E9E58; }
  .presence-line.off{ color:var(--ink-soft); font-weight:500; }

  .profile-modal{ max-width:900px; width:100%; }
  .profile-wrap{ display:flex; min-height:420px; }
  .profile-nav{ width:200px; flex:0 0 200px; border-inline-end: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:start; 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; inset-inline-end: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:start; 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-inline-end: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:start; 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-inline-start: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; }
  /* Wrapper exists purely to anchor the presence dot; the .av inside keeps
     every dimension it had, so the list geometry is unchanged. */
  .chat-av-wrap{ position:relative; flex:0 0 auto; }
  .chat-online-tag{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:#2E9E58; margin-inline-start:5px; vertical-align:middle; }
  /* The header now stacks a name over a presence line, so it can no longer be
     a single centred row. */
  .chat-head2{ flex-direction:column; align-items:flex-start; gap:1px; }
  .chat-head-name{ display:flex; align-items:center; gap:8px; }
  .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-inline-start: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-inline-start: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(--chip-bg); color:var(--chip-text); 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; }
  /* Colours now come from --chip-bg/--chip-text like the other chips; the
     dark rule only adds the edge that separates a raised tip from the page. */
  [data-theme="dark"] .hover-tip{ 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-inline-start .26s cubic-bezier(.4,0,.2,1); }
  .sidebar-brand{ position:relative; }
  .sidebar-close{ margin-inline-start: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-inline-start:-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-inline-start: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; inset-inline-start:0; bottom:0; z-index:120; width:236px; flex:0 0 236px;
      height:100vh; border-inline-end: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-inline-start: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; }

  /* -- Lobby tabs (Companies / Lead Inbox) -- */
  .lobby-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--panel-edge); margin-bottom:22px; }
  .lobby-tab{ display:flex; align-items:center; gap:8px; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
    padding:10px 16px; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
    color:var(--ink-soft); cursor:pointer; transition:color .16s ease, border-color .16s ease; }
  .lobby-tab:hover{ color:var(--ink); }
  .lobby-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .lobby-tab-badge{ min-width:18px; height:18px; padding:0 5px; border-radius:20px; background:var(--accent); color:#fff;
    font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }

  /* -- Lead Inbox -- */
  .leads-list{ display:flex; flex-direction:column; gap:12px; }
  .lead-card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px; padding:16px 18px;
    display:flex; flex-direction:column; gap:12px; transition:border-color .16s ease, box-shadow .16s ease; }
  .lead-card:hover{ border-color:var(--steel); box-shadow:var(--shadow); }
  .lead-card-top{ display:flex; align-items:center; gap:12px; }
  .lead-type-badge{ flex:0 0 auto; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
    padding:4px 10px; border-radius:20px; }
  .lead-type-demo{ background:var(--pill-blue-bg); color:var(--pill-blue-text); border:1px solid var(--pill-blue-border); }
  .lead-type-contact{ background:var(--pill-green-bg); color:var(--pill-green-text); border:1px solid var(--pill-green-border); }
  .lead-card-name{ min-width:0; flex:1; }
  .lead-name{ font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); word-break:break-word; }
  .lead-when{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
  .lead-field-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px 18px; }
  .lead-field{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .lead-field-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-soft); }
  .lead-field-value{ font-size:13px; color:var(--ink); word-break:break-word; }
  .lead-message{ font-size:12.5px; line-height:1.55; color:var(--ink); background:var(--surface-soft);
    border:1px solid var(--panel-edge); border-radius:10px; padding:10px 12px; white-space:pre-wrap; word-break:break-word; }
  .lead-actions{ display:flex; justify-content:flex-end; border-top:1px solid var(--panel-edge); padding-top:10px; }

  /* 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; }
  }

  /* ===== Tenant plan & usage ===== */
  .limit-row{ display:flex; align-items:flex-end; gap:14px; }
  .limit-row .field{ flex:1; }
  .limit-usage{ flex:0 0 auto; font-size:11.5px; color:var(--ink-soft); padding-bottom:11px; min-width:120px; text-align:end; }
  .tier-badge{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    padding:3px 9px; border-radius:20px; background:var(--pill-blue-soft-bg); color:var(--pill-blue-soft-text);
    border:1px solid var(--pill-blue-soft-border); }
  .usage-list{ display:flex; flex-direction:column; gap:9px; }
  .usage-item{ font-size:11.5px; color:var(--ink-soft); }
  .usage-item .usage-head{ display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; }
  .usage-item b{ color:var(--ink); font-weight:600; }
  .usage-track{ height:6px; border-radius:20px; background:var(--surface-hover); overflow:hidden; }
  .usage-fill{ height:100%; border-radius:20px; background:var(--accent); transition:width .3s ease; }
  .usage-fill.warn{ background:#E8B14A; }
  .usage-fill.full{ background:var(--danger); }

  /* ===== Feature module toggles ===== */
  .module-section{ border-top:1px solid var(--panel-edge); padding-top:14px; margin-top:4px; }
  .module-heading{ font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:10px; }
  .module-list{ display:flex; flex-direction:column; gap:8px; }
  .module-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:11px;
    background:var(--surface-soft); border:1px solid var(--panel-edge); cursor:pointer; user-select:none; }
  .module-row:hover{ background:var(--surface-hover); }
  .module-row .module-name{ flex:1; font-size:13px; font-weight:600; color:var(--ink); }
  .module-row .module-desc{ font-size:11px; color:var(--ink-soft); font-weight:400; display:block; margin-top:1px; }
  /* Switch built from a checkbox so it stays keyboard-accessible. */
  .switch{ position:relative; width:40px; height:22px; flex:0 0 auto; }
  .switch input{ opacity:0; width:0; height:0; position:absolute; }
  .switch .track{ position:absolute; inset:0; border-radius:20px; background:var(--panel-edge); transition:background .18s ease; }
  .switch .knob{ position:absolute; top:3px; inset-inline-start:3px; width:16px; height:16px; border-radius:50%;
    background:var(--panel); box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s ease; }
  .switch input:checked + .track{ background:var(--accent); }
  .switch input:checked + .track .knob{ transform:translateX(18px); }
  .switch input:focus-visible + .track{ outline:2px solid var(--accent); outline-offset:2px; }
  .module-row.locked{ opacity:.55; cursor:not-allowed; }

  .module-chips{ display:flex; flex-wrap:wrap; gap:5px; }
  .module-chip{ font-size:10px; font-weight:600; padding:3px 8px; border-radius:20px; border:1px solid transparent; }
  .module-chip.on{ background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .module-chip.off{ background:var(--pill-gray-bg); color:var(--pill-gray-text); border-color:var(--pill-gray-border); opacity:.7; text-decoration:line-through; }
  /* Phase 21: granted but past its own end date. Distinct from .off — the
     operator needs to see at a glance that this was sold and lapsed, rather
     than never switched on, because those call for opposite actions. */
  .module-chip.lapsed{ background:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border); text-decoration:line-through; }
  .module-chip.ending{ background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border); }

  /* ===== Phase 21: time-based licensing ===== */
  .license-status{ font-size:12px; font-weight:600; padding:9px 12px; border-radius:10px; margin-bottom:12px;
    border:1px solid var(--panel-edge); background:var(--surface-soft); color:var(--ink-soft); }
  .license-status.ok{ background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .license-status.warn{ background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border); }
  .license-status.bad{ background:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border); }

  .license-quick{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:2px 0 12px; }
  .license-quick-label{ font-size:11.5px; color:var(--ink-soft); margin-inline-end:2px; }
  .btn.btn-sm{ padding:5px 10px; font-size:11.5px; border-radius:8px; }

  /* The module row grows a second line holding its own date, so the row stops
     being a single <label> wrapping everything — a date input inside a label
     tied to the checkbox would toggle the module on every click into the
     calendar. Name/switch stay on the top line, date sits under them. */
  .module-row.has-expiry{ flex-direction:column; align-items:stretch; gap:8px; cursor:default; }
  .module-row .module-top{ display:flex; align-items:center; gap:12px; cursor:pointer; }
  .module-row .module-top .module-name{ flex:1; font-size:13px; font-weight:600; color:var(--ink); }
  .module-row .module-expiry{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding-top:8px; border-top:1px dashed var(--panel-edge); }
  .module-row .module-expiry label{ font-size:11px; color:var(--ink-soft); font-weight:500; }
  .module-row .module-expiry input[type="date"]{ font-size:12px; padding:5px 8px; border-radius:8px;
    border:1px solid var(--panel-edge); background:var(--panel); color:var(--ink); }
  .module-row .module-expiry .expiry-note{ font-size:11px; color:var(--ink-soft); margin-inline-start:auto; }
  .module-row .module-expiry .expiry-note.warn{ color:var(--pill-yellow-text); font-weight:600; }
  .module-row .module-expiry .expiry-note.bad{ color:var(--pill-red-text); font-weight:600; }
  .module-row.module-lapsed{ border-color:var(--pill-red-border); }

  /* Lobby card badge, next to the tier badge. */
  .license-badge{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    padding:3px 9px; border-radius:20px; white-space:nowrap;
    background:var(--pill-gray-bg); color:var(--pill-gray-text); border:1px solid var(--pill-gray-border); }
  .license-badge.ok{ background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .license-badge.warn{ background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border); }
  .license-badge.bad{ background:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border); }

  /* In-app banner shown to the expiring company itself. */
  .license-banner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:10px 18px; font-size:12.5px; font-weight:600; border-bottom:1px solid var(--panel-edge); }
  .license-banner.warn{ background:var(--pill-yellow-bg); color:var(--pill-yellow-text); }
  .license-banner.bad{ background:var(--pill-red-bg); color:var(--pill-red-text); }
  .license-banner .license-banner-sub{ font-weight:400; opacity:.85; }

  .no-module-notice{ margin:40px 28px; padding:40px 24px; text-align:center;
    border:1px dashed var(--panel-edge); border-radius:14px; background:var(--panel); }
  .no-module-notice h3{ font-family:'Oswald',sans-serif; font-size:18px; font-weight:600; color:var(--ink); margin:0 0 6px; }
  .no-module-notice p{ margin:0; font-size:13px; color:var(--ink-soft); }

  /* ===== HR module ===== */
  #hrScreen{ padding:0 22px 24px; flex:1; min-height:0; overflow-y:auto; }
  .hr-summary{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
  .hr-stat{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px;
    padding:12px 16px; min-width:120px; }
  .hr-stat b{ display:block; font-family:'Oswald',sans-serif; font-size:22px; font-weight:600; color:var(--ink); }
  .hr-stat span{ font-size:11.5px; color:var(--ink-soft); }
  .emp-status{ display:inline-block; border-radius:20px; padding:3px 10px; font-size:10.5px; font-weight:700; border:1px solid transparent; white-space:nowrap; }
  .emp-status.active{ background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .emp-status.probation{ background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border-color:var(--pill-yellow-border); }
  .emp-status.on_leave{ background:var(--pill-blue-bg); color:var(--pill-blue-text); border-color:var(--pill-blue-border); }
  .emp-status.left{ background:var(--pill-gray-bg); color:var(--pill-gray-text); border-color:var(--pill-gray-border); }

  /* HR: 7-tab employee profile modal. Logical properties throughout so the
     tab strip and dependent rows mirror for Arabic/Kurdish with no separate
     [dir="rtl"] block needed — same approach as the rest of the app. */
  .modal.xwide{ max-width:920px; }
  .hr-profile-modal{ display:flex; flex-direction:column; max-height:88vh; }
  .hr-tabs{ display:flex; gap:2px; padding:0 22px; border-bottom:1px solid var(--panel-edge);
    overflow-x:auto; flex:0 0 auto; }
  .hr-tab-btn{ background:none; border:none; border-bottom:2px solid transparent; padding:11px 12px;
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    cursor:pointer; white-space:nowrap; transition:color .12s ease, border-color .12s ease; }
  .hr-tab-btn:hover{ color:var(--ink); }
  .hr-tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .hr-profile-body{ overflow-y:auto; flex:1 1 auto; }
  .hr-tab-panel{ display:none; flex-direction:column; gap:16px; }
  .hr-tab-panel.active{ display:flex; }
  .hr-subhead{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;
    color:var(--ink-soft); margin-top:4px; }
  .req{ color:var(--danger); }
  .hr-shared-fields{ display:flex; flex-direction:column; gap:16px; margin-top:4px;
    padding-top:16px; border-top:1px solid var(--panel-edge); }
  .hr-dep-toolbar{ display:flex; justify-content:flex-end; }
  .hr-dep-row{ background:var(--surface-soft); border:1px solid var(--panel-edge); border-radius:12px;
    padding:14px; display:flex; flex-direction:column; gap:12px; margin-bottom:12px; position:relative; }
  .hr-dep-row .field-row{ align-items:flex-end; }
  .hr-dep-remove{ flex:0 0 auto; align-self:flex-end; background:none; border:1px solid var(--panel-edge);
    border-radius:9px; color:var(--danger); width:38px; height:38px; display:flex; align-items:center;
    justify-content:center; cursor:pointer; }
  .hr-dep-remove:hover{ background:var(--error-bg); }
  @media (max-width: 640px){
    .hr-tab-panel .field-row{ flex-direction:column; gap:16px; }
    .hr-dep-row .field-row{ flex-direction:column; gap:16px; }
  }
  #hrEmployeeOverlay textarea{ 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); resize:vertical; }
  #hrEmployeeOverlay textarea:focus{ outline:none; border-color:var(--accent); }

  /* HR: roster / points sub-nav */
  .hr-subnav{ display:flex; gap:4px; border-bottom:1px solid var(--panel-edge); margin-bottom:16px; }
  .hr-subnav-item{ background:none; border:none; border-bottom:2px solid transparent; padding:9px 4px 11px;
    margin-inline-end:20px; font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    color:var(--ink-soft); cursor:pointer; transition:color .12s ease, border-color .12s ease; }
  .hr-subnav-item:hover{ color:var(--ink); }
  .hr-subnav-item.active{ color:var(--accent); border-bottom-color:var(--accent); }

  /* HR: onboarding documents tab */
  .hr-doc-slot{ display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--panel-edge);
    border-radius:12px; background:var(--surface-soft); }
  .hr-doc-thumb{ flex:0 0 auto; width:52px; height:52px; border-radius:10px; background-color:var(--panel);
    background-size:cover; background-position:center; border:1px solid var(--panel-edge);
    display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;
    color:var(--ink-soft); letter-spacing:.4px; }
  .hr-doc-slot-info{ flex:1 1 auto; min-width:0; }
  .hr-doc-slot-label{ font-size:13px; font-weight:600; color:var(--ink); }
  .hr-doc-slot-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hr-doc-slot-actions{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
  .hr-doc-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--panel-edge);
    border-radius:10px; background:var(--surface-soft); margin-bottom:8px; }
  .hr-doc-row-name{ flex:1 1 auto; font-size:12.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hr-doc-row-meta{ flex:0 0 auto; font-size:11px; color:var(--ink-soft); }
  @media (max-width: 640px){
    .hr-doc-slot{ flex-wrap:wrap; }
    .hr-doc-slot-actions{ width:100%; justify-content:flex-start; }
  }

  /* HR: Good/Bad Points */
  .hr-pt-btn.good{ background:var(--pill-green-bg); color:var(--pill-green-text); border:1px solid var(--pill-green-border); }
  .hr-pt-btn.good:hover{ filter:brightness(0.97); }
  .hr-pt-btn.bad{ background:var(--pill-red-bg); color:var(--pill-red-text); border:1px solid var(--pill-red-border); }
  .hr-pt-btn.bad:hover{ filter:brightness(0.97); }
  .hr-pt-pill{ display:inline-block; border-radius:20px; padding:3px 10px; font-size:10.5px; font-weight:700; border:1px solid transparent; white-space:nowrap; }
  .hr-pt-pill.good{ background:var(--pill-green-bg); color:var(--pill-green-text); border-color:var(--pill-green-border); }
  .hr-pt-pill.bad{ background:var(--pill-red-bg); color:var(--pill-red-text); border-color:var(--pill-red-border); }
  .hr-pt-category-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:8px; }
  .hr-pt-cat-option{ display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--panel-edge);
    border-radius:10px; background:var(--surface-soft); font-size:12.5px; color:var(--ink); cursor:pointer; }
  .hr-pt-cat-option:has(input:checked){ border-color:var(--accent); background:var(--pill-blue-soft-bg); }
  .hr-pt-cat-option input{ width:auto; margin:0; }
  .hr-pt-occurrence-row{ display:flex; flex-wrap:wrap; gap:14px; }
  .hr-pt-radio{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); cursor:pointer; }
  .hr-pt-radio input{ width:auto; margin:0; }
  /* Kind accent — the modal's own header border/title tint so it's obvious
     at a glance whether this is a merit or a disciplinary record. */
  .hr-point-modal.kind-good .modal-head{ border-bottom-color:var(--pill-green-border); }
  .hr-point-modal.kind-good #hrPointModalTitle{ color:var(--pill-green-text); }
  .hr-point-modal.kind-bad .modal-head{ border-bottom-color:var(--pill-red-border); }
  .hr-point-modal.kind-bad #hrPointModalTitle{ color:var(--pill-red-text); }

  /* Profile: My Points (read-only) */
  .my-pt-card{ border:1px solid var(--panel-edge); border-inline-start:3px solid var(--pill-gray-border);
    border-radius:12px; padding:12px 14px; margin-bottom:10px; background:var(--panel); }
  .my-pt-card.good{ border-inline-start-color:var(--pill-green-border); }
  .my-pt-card.bad{ border-inline-start-color:var(--pill-red-border); }
  .my-pt-card-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .my-pt-card-cat{ font-size:12.5px; font-weight:600; color:var(--ink); }
  .my-pt-card-date{ margin-inline-start:auto; font-size:11px; color:var(--ink-soft); }
  .my-pt-card-desc{ font-size:12.5px; color:var(--ink); margin-top:8px; line-height:1.5; }
  .my-pt-card-meta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:11px; color:var(--ink-soft); }

  /* ===== Organisation screen ===== */
  #orgScreen{ padding:0 22px 24px; flex:1; min-height:0; overflow-y:auto; }
  .org-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--panel-edge); margin-bottom:18px; }
  .org-tab{ background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
    padding:10px 16px; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
    color:var(--ink-soft); cursor:pointer; transition:color .16s ease, border-color .16s ease; }
  .org-tab:hover{ color:var(--ink); }
  .org-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .org-pane-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
  .org-pane-head .perm-note{ flex:1; min-width:240px; }
  .org-list{ display:flex; flex-direction:column; gap:8px; }
  .org-row{ display:flex; align-items:center; gap:14px; background:var(--panel);
    border:1px solid var(--panel-edge); border-radius:12px; padding:13px 16px;
    cursor:pointer; transition:border-color .16s ease, background .16s ease; }
  .org-row:hover{ border-color:var(--accent); background:var(--surface-hover); }
  .org-row-main{ flex:1; min-width:0; }
  .org-row-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .org-row-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
  .org-count{ font-size:11px; font-weight:600; color:var(--ink-soft);
    background:var(--surface-soft); border:1px solid var(--panel-edge);
    border-radius:20px; padding:3px 10px; white-space:nowrap; }
  .org-empty{ padding:36px 20px; text-align:center; color:var(--ink-soft); font-size:13px;
    border:1px dashed var(--panel-edge); border-radius:12px; }

  /* Permission picker */
  .tpl-perm-groups{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-top:10px; }
  .tpl-perm-group{ background:var(--surface-soft); border:1px solid var(--panel-edge); border-radius:12px; padding:12px; }
  .tpl-perm-group h4{ margin:0 0 8px; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; color:var(--ink-soft); }
  .tpl-perm-item{ display:flex; align-items:flex-start; gap:8px; padding:5px 0; cursor:pointer; font-size:12.5px; color:var(--ink); }
  .tpl-perm-item input{ margin-top:2px; flex:0 0 auto; }
  .tpl-perm-item.tri span.state{ font-size:10px; color:var(--ink-soft); margin-inline-start:auto; white-space:nowrap; }
  .perm-count-chip{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:20px;
    background:var(--pill-blue-soft-bg); color:var(--pill-blue-soft-text); border:1px solid var(--pill-blue-soft-border); }
  .system-chip{ font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px;
    background:var(--pill-gray-bg); color:var(--pill-gray-text); border:1px solid var(--pill-gray-border); }

  /* Busy state for any action button mid-request */
  .btn.is-busy, button.is-busy{ opacity:.8; cursor:progress; }
  .btn-spinner-sm{ display:inline-block; width:12px; height:12px; margin-inline-end:7px;
    vertical-align:-1px; border-radius:50%; border:2px solid currentColor;
    border-top-color:transparent; animation:boot-spin .7s linear infinite; opacity:.85; }

  /* ===== Board switcher ===== */
  .board-switcher{ position:relative; flex:0 0 auto; }
  .board-switch-btn{ display:flex; align-items:center; gap:9px; background:var(--panel);
    border:1px solid var(--panel-edge); border-radius:12px; padding:9px 13px; cursor:pointer;
    font-family:'Oswald',sans-serif; font-size:13.5px; font-weight:600; color:var(--ink);
    letter-spacing:.3px; transition:border-color .16s ease, background .16s ease; }
  .board-switch-btn:hover{ border-color:var(--accent); background:var(--surface-hover); }
  .board-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
  .board-switch-name{ max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board-menu{ position:absolute; top:calc(100% + 6px); inset-inline-start:0; z-index:80; min-width:270px;
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:13px;
    box-shadow:var(--shadow-lift); overflow:hidden; }
  .board-menu-list{ max-height:320px; overflow-y:auto; padding:6px; }
  .board-menu-item{ display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
    background:none; border:none; border-radius:10px; padding:9px 11px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:13px; color:var(--ink); text-align:start; }
  .board-menu-item:hover{ background:var(--surface-hover); }
  .board-menu-item.active{ background:var(--accent); color:#fff; }
  .board-menu-item .bm-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
  .board-menu-item .bm-count{ font-size:11px; opacity:.7; white-space:nowrap; }
  .board-menu-foot{ border-top:1px solid var(--panel-edge); padding:6px; display:flex; flex-direction:column; gap:2px; }
  .board-menu-action{ background:none; border:none; border-radius:10px; padding:9px 11px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--accent); text-align:start; }
  .board-menu-action:hover{ background:var(--surface-hover); }

  .confirm-body{ font-size:13.5px; line-height:1.55; color:var(--ink); white-space:pre-line; margin-bottom:6px; }
  .btn.btn-danger-solid{ background:var(--danger); color:#fff; }
  .btn.btn-danger-solid:hover{ filter:brightness(1.08); }

  .board-readonly{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
    padding:5px 11px; border-radius:20px; background:var(--pill-yellow-bg);
    color:var(--pill-yellow-text); border:1px solid var(--pill-yellow-border); white-space:nowrap; }

  /* ===== Scope editors ===== */
  .scope-section{ border-top:1px solid var(--panel-edge); padding-top:14px; margin-top:14px; }
  .scope-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px; flex-wrap:wrap; }
  .scope-inherit{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--ink-soft); cursor:pointer; }
  .scope-block{ background:var(--surface-soft); border:1px solid var(--panel-edge);
    border-radius:12px; padding:13px; margin-top:10px; }
  .scope-block h4{ margin:0 0 4px; font-size:12px; font-weight:700; color:var(--ink); }
  .scope-block .scope-hint{ font-size:11px; color:var(--ink-soft); margin-bottom:9px; }
  .scope-mode{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
  .scope-mode button{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:9px;
    padding:6px 12px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
    color:var(--ink-soft); cursor:pointer; }
  .scope-mode button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .scope-rows{ display:flex; flex-direction:column; gap:5px; }
  .scope-row{ display:flex; align-items:center; gap:10px; background:var(--panel);
    border:1px solid var(--panel-edge); border-radius:10px; padding:8px 11px; }
  .scope-row .sr-name{ flex:1; min-width:0; font-size:12.5px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .scope-row .sr-sub{ font-size:10.5px; color:var(--ink-soft); }
  .scope-level{ display:flex; gap:3px; flex:0 0 auto; }
  .scope-level button{ background:none; border:1px solid var(--panel-edge); border-radius:8px;
    padding:4px 10px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
    color:var(--ink-soft); cursor:pointer; }
  .scope-level button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .scope-level button.none-active{ background:var(--pill-gray-bg); border-color:var(--pill-gray-border); color:var(--pill-gray-text); }
  .scope-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px; }
  .scope-col{ display:flex; align-items:center; gap:7px; padding:5px 7px; border-radius:8px;
    font-size:12px; color:var(--ink); cursor:pointer; }
  .scope-col:hover{ background:var(--surface-hover); }
  .scope-empty{ font-size:11.5px; color:var(--ink-soft); padding:8px 2px; }

  /* ===== Phase 5: dynamic card templates ===== */
  .custom-fields-box{ display:flex; flex-direction:column; gap:14px; }
  .custom-fields-empty{ font-size:12.5px; color:var(--ink-soft); padding:4px 2px; }
  .custom-fields-box .field{ margin:0; }
  .custom-fields-box .field-hint{ font-size:10.5px; color:var(--ink-soft); margin-top:4px; }
  .cf-req-missing input, .cf-req-missing textarea, .cf-req-missing select{ border-color:var(--rust) !important; }

  .tpl-pick-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
  .tpl-pick-item{ display:flex; align-items:center; gap:12px; background:var(--panel);
    border:1.5px solid var(--panel-edge); border-radius:12px; padding:12px 14px; cursor:pointer; text-align:start; width:100%; font-family:'Inter',sans-serif; }
  .tpl-pick-item:hover{ border-color:var(--accent); background:var(--surface-hover); }
  .tpl-pick-item.selected{ border-color:var(--accent); background:var(--surface-hover); box-shadow:0 0 0 1px var(--accent); }
  .tpl-pick-item .tpl-pick-radio{ width:16px; height:16px; border-radius:50%; border:2px solid var(--panel-edge); flex:0 0 auto; position:relative; }
  .tpl-pick-item.selected .tpl-pick-radio{ border-color:var(--accent); }
  .tpl-pick-item.selected .tpl-pick-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent); }
  .tpl-pick-main{ flex:1; min-width:0; }
  .tpl-pick-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
  .tpl-pick-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }

  .tpl-badge{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
    color:var(--steel); background:var(--surface-soft); border:1px solid var(--panel-edge); border-radius:6px; padding:2px 6px; margin-inline-start:8px; }

  .tpl-fields-box{ display:flex; flex-direction:column; gap:10px; }
  .tpl-field-row{ border:1px solid var(--panel-edge); border-radius:11px; padding:11px; background:var(--bg); display:flex; flex-direction:column; gap:9px; }
  .tpl-field-row .tpl-field-top{ display:flex; gap:8px; align-items:flex-start; }
  .tpl-field-row .tpl-field-top .field{ flex:1; margin:0; }
  .tpl-field-row .tpl-field-top .field.tpl-type-field{ flex:0 0 130px; }
  .tpl-field-row .icon-btn{ margin-top:22px; }
  .tpl-field-order-btns{ display:flex; flex-direction:column; gap:1px; margin-top:22px; }
  .tpl-field-order-btns .icon-btn{ margin-top:0; padding:1px; }
  .tpl-field-required{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--ink-soft); cursor:pointer; }
  .tpl-field-options{ display:none; }
  .tpl-field-row.type-select .tpl-field-options{ display:block; }


  /* =========================================================================
     Marketing landing page (Phase 6, restyled)
     -------------------------------------------------------------------------
     Brand-forward pass over the public page: real logo mark in the nav, hero
     split into copy + a live-looking product mock, gradient accents drawn from
     the logo (indigo -> violet -> cyan), and hover states with depth.

     Everything still runs off the existing theme variables plus the three
     --brand-* tokens defined in :root, so dark mode needs no overrides here,
     and every offset uses logical properties so Arabic / Kurdish mirror on
     their own.
     ========================================================================= */
  #landingScreen{ background:var(--bg); min-height:100vh; overflow-x:clip; }
  #landingScreen .lp-section-inner{ max-width:1120px; margin:0 auto; padding:0 32px; }
  /* The sticky nav would otherwise cover the heading an anchor jumps to.
     #features carries the same rule, in landingShowcase.css alongside the
     rest of the showcase. */
  #lp-pricing{ scroll-margin-top:78px; }

  /* -- Logo mark -- */
  .lp-logo{ height:32px; width:auto; display:block; flex:0 0 auto;
    filter:drop-shadow(0 4px 10px var(--brand-glow)); }
  .lp-logo-sm{ height:26px; }

  /* -- Nav -- */
  .lp-nav{ position:sticky; top:0; z-index:20; border-bottom:1px solid var(--panel-edge);
    background:var(--panel); }
  @supports (backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px)){
    .lp-nav{ background:color-mix(in srgb, var(--panel) 78%, transparent);
      -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); }
  }
  .lp-nav-inner{ max-width:1120px; margin:0 auto; padding:12px 32px; display:flex; align-items:center; gap:28px; }
  .lp-brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
  .lp-brand-name{ font-family:'Inter',sans-serif; font-weight:500; font-size:19px; letter-spacing:-0.02em;
    color:var(--brand-1); line-height:1; }
  .lp-brand-name b{ font-weight:800; }
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .lp-brand-name{ background:linear-gradient(95deg, var(--brand-1), var(--brand-2));
      -webkit-background-clip:text; background-clip:text; color:transparent; }
  }
  .lp-nav-menu{ display:flex; flex-direction:row; align-items:center; flex:1; gap:24px; }
  .lp-nav-links{ display:flex; flex-direction:row; align-items:center; gap:24px; flex:1; }
  .lp-nav-links a{ font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; color:var(--ink-soft); text-decoration:none; transition:color .12s ease; }
  .lp-nav-links a:hover{ color:var(--ink); }
  .lp-nav-link-btn{ font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; color:var(--ink-soft); background:none; border:none; padding:0; cursor:pointer; transition:color .12s ease; }
  .lp-nav-link-btn:hover{ color:var(--ink); }
  .lp-nav-menu-actions{ display:flex; flex-direction:row; align-items:center; gap:10px; flex:0 0 auto; }
  .lp-nav-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
  .lp-theme-btn{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px;
    background:var(--surface-soft); border:1px solid var(--panel-edge); color:var(--ink-soft); cursor:pointer; transition:background .12s ease, color .12s ease; }
  .lp-theme-btn:hover{ background:var(--surface-hover); color:var(--ink); }
  .lp-nav-signin{ padding:9px 20px; }

  /* -- Hamburger toggle (landing nav only): hidden on desktop, shown only
     inside the @media (max-width:640px) block below. */
  .lp-hamburger-btn{ display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px;
    background:var(--surface-soft); border:1px solid var(--panel-edge); color:var(--ink); cursor:pointer; flex:0 0 auto; }
  .lp-hamburger-btn:hover{ background:var(--surface-hover); }

  /* -- Language switcher (landing nav, lobby bar) -- */
  .lang-switch{ position:relative; display:flex; align-items:center; height:34px; border-radius:10px;
    background:var(--surface-soft); border:1px solid var(--panel-edge); color:var(--ink-soft); padding-inline-start:9px; padding-inline-end:4px; gap:5px; }
  .lang-switch svg{ flex:0 0 auto; pointer-events:none; }
  .lang-switch-select{ appearance:none; -webkit-appearance:none; background:none; border:none; color:var(--ink);
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 18px 4px 2px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238A93A0' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 2px center; }
  [dir="rtl"] .lang-switch-select{ background-position:left 2px center; padding:4px 2px 4px 18px; }
  .lang-switch-select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

  /* -- Hero -- */
  .lp-hero{ position:relative; overflow:hidden; padding:72px 32px 80px; }
  .lp-hero-bg{ position:absolute; inset:-20% -10%; pointer-events:none; z-index:0; }
  .lp-orb{ position:absolute; display:block; border-radius:50%; filter:blur(90px); opacity:.32;
    animation:lpOrbDrift 16s ease-in-out infinite alternate; }
  .lp-orb-a{ width:440px; height:440px; top:2%; inset-inline-start:4%; background:var(--brand-1); }
  .lp-orb-b{ width:380px; height:380px; top:12%; inset-inline-end:6%; background:var(--brand-3); animation-delay:-5s; }
  .lp-orb-c{ width:340px; height:340px; bottom:0%; inset-inline-start:42%; background:var(--brand-2); animation-delay:-10s; }
  [data-theme="dark"] .lp-orb{ opacity:.22; }

  .lp-hero-inner{ position:relative; z-index:1; max-width:1120px; margin:0 auto;
    display:grid; grid-template-columns:1.04fr 0.96fr; gap:52px; align-items:center; }
  .lp-hero-copy{ text-align:start; }
  .lp-badge{ display:inline-flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:0.3px;
    color:var(--brand-1); background:var(--panel); border:1px solid var(--panel-edge); border-radius:20px; padding:7px 15px; margin-bottom:20px;
    box-shadow:0 2px 10px -4px var(--brand-glow); }
  .lp-badge::before{ content:""; width:6px; height:6px; border-radius:50%; flex:0 0 auto;
    background:var(--brand-3); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-3) 25%, transparent);
    animation:lpPulse 2.4s ease-in-out infinite; }
  .lp-hero h1{ font-family:'Oswald',sans-serif; font-size:clamp(30px, 4.4vw, 50px); font-weight:700; line-height:1.08; letter-spacing:0.2px;
    color:var(--ink); margin:0 0 18px; }
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .lp-hero h1{ background:linear-gradient(175deg, var(--ink) 42%, var(--brand-1) 118%);
      -webkit-background-clip:text; background-clip:text; color:transparent; }
  }
  .lp-hero-sub{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.62; color:var(--ink-soft); max-width:50ch; margin:0 0 30px; }
  .lp-hero-ctas{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .lp-cta-primary, .lp-cta-secondary{ padding:13px 28px; font-size:14px; border-radius:12px; }
  .lp-cta-primary{ background:linear-gradient(120deg, var(--brand-1), var(--brand-2) 58%, var(--brand-3) 190%);
    box-shadow:0 12px 26px -12px var(--brand-glow); }
  .lp-cta-primary:hover{ background:linear-gradient(120deg, var(--brand-2), var(--brand-1) 70%);
    box-shadow:0 16px 30px -12px var(--brand-glow); transform:translateY(-1px); }
  .lp-cta-secondary:hover{ border-color:var(--brand-1); color:var(--brand-1); }

  .lp-stats{ display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:34px; padding-top:24px; border-top:1px solid var(--panel-edge); }
  .lp-stat strong{ display:block; font-family:'Oswald',sans-serif; font-size:27px; font-weight:700; line-height:1.1; color:var(--brand-1); }
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .lp-stat strong{ background:linear-gradient(120deg, var(--brand-1), var(--brand-3));
      -webkit-background-clip:text; background-clip:text; color:transparent; }
  }
  .lp-stat span{ display:block; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:500; color:var(--ink-soft); margin-top:3px; }

  /* -- Hero product mock: chrome built from divs, no screenshot to keep in sync -- */
  .lp-hero-visual{ position:relative; animation:lpFloat 7.5s ease-in-out infinite; }
  .lp-mock{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:16px; overflow:hidden;
    box-shadow:0 34px 70px -28px rgba(20,25,30,0.42), 0 2px 8px rgba(20,25,30,0.06);
    transform:perspective(1400px) rotateY(-8deg) rotateX(3deg) scale(1.02); }
  [dir="rtl"] .lp-mock{ transform:perspective(1400px) rotateY(8deg) rotateX(3deg) scale(1.02); }
  .lp-mock-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--surface-soft); border-bottom:1px solid var(--panel-edge); }
  .lp-mock-dot{ width:9px; height:9px; border-radius:50%; background:var(--panel-edge); flex:0 0 auto; }
  .lp-mock-dot:nth-child(1){ background:#F0655C; } .lp-mock-dot:nth-child(2){ background:#F5BE4F; } .lp-mock-dot:nth-child(3){ background:#4FBE72; }
  .lp-mock-url{ margin-inline-start:auto; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-soft);
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:7px; padding:3px 12px; }
  .lp-mock-body{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:14px; background:var(--bg); }
  .lp-mock-col{ display:flex; flex-direction:column; gap:8px; min-width:0; }
  .lp-mock-col-head{ display:flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:9.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
  .lp-mock-col-head span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lp-mock-col-head b{ margin-inline-start:auto; color:var(--ink-soft); font-size:9px; }
  .lp-mock-pip{ width:7px; height:7px; border-radius:2px; flex:0 0 auto; }
  .lp-mock-pip.pip-todo{ background:var(--slate); }
  .lp-mock-pip.pip-prog{ background:var(--brand-3); }
  .lp-mock-pip.pip-done{ background:var(--patina); }
  .lp-mock-card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:9px; padding:9px;
    display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow); }
  .lp-mock-code{ align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:8.5px; font-weight:700; letter-spacing:.04em;
    color:var(--chip-text); background:var(--chip-bg); border-radius:5px; padding:2px 6px; }
  .lp-mock-line{ display:block; height:5px; border-radius:3px; background:var(--panel-edge); }
  .lp-mock-line.lp-w80{ width:80%; } .lp-mock-line.lp-w75{ width:75%; } .lp-mock-line.lp-w70{ width:70%; }
  .lp-mock-line.lp-w65{ width:65%; } .lp-mock-line.lp-w60{ width:60%; } .lp-mock-line.lp-w55{ width:55%; } .lp-mock-line.lp-w50{ width:50%; }
  .lp-mock-card-live{ border-color:var(--brand-3); box-shadow:0 0 0 1px var(--brand-3), 0 8px 20px -10px var(--brand-glow); }
  .lp-mock-card-done{ opacity:.72; }
  .lp-mock-bar-track{ height:5px; border-radius:3px; background:var(--panel-edge); overflow:hidden; }
  .lp-mock-bar-fill{ height:100%; width:64%; border-radius:3px; background:linear-gradient(90deg, var(--brand-1), var(--brand-3));
    animation:lpProgress 5s ease-in-out infinite; }
  .lp-mock-caption{ font-family:'Inter',sans-serif; font-size:11.5px; color:var(--ink-soft); text-align:center; margin:26px 0 0; }

  /* -- Trust strip -- */
  .lp-trust{ padding:8px 0 46px; }
  .lp-trust-label{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
    color:var(--ink-soft); text-align:center; margin:0 0 18px; }
  .lp-trust-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 12px; }
  .lp-trust-chip{ font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--ink-soft);
    background:var(--panel); border:1px solid var(--panel-edge); border-radius:999px; padding:8px 17px; opacity:.62;
    transition:opacity .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
  .lp-trust-chip:hover{ opacity:1; color:var(--brand-1); border-color:var(--brand-1); transform:translateY(-1px); }

  /* -- Features -- */
  .lp-features{ padding:84px 0; border-top:1px solid var(--panel-edge); }
  .lp-section-head{ text-align:center; max-width:560px; margin:0 auto 46px; }
  .lp-section-head h2{ font-family:'Oswald',sans-serif; font-size:clamp(24px, 3.1vw, 34px); font-weight:600; color:var(--ink); margin:0 0 10px; line-height:1.18; }
  .lp-section-head p{ font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink-soft); margin:0; }
  /* The four .lp-feature-card squares that used to sit here were replaced by
     the tabbed Feature Showcase; its rules live in landingShowcase.css.
     .lp-features (the section padding) and .lp-section-head are still used
     by that section and stay put. */

  /* -- Pricing -- */
  .lp-pricing{ padding:84px 0; border-top:1px solid var(--panel-edge); background:var(--surface-soft); }
  .lp-pricing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:stretch; }
  .lp-price-card{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:16px;
    padding:28px 24px; display:flex; flex-direction:column; position:relative; transition:transform .18s ease, box-shadow .18s ease; }
  .lp-price-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -26px var(--brand-glow), var(--shadow); }
  .lp-price-card.lp-price-featured{ border-color:transparent; box-shadow:0 26px 54px -28px var(--brand-glow), var(--shadow); }
  .lp-price-card.lp-price-featured::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
    background:linear-gradient(140deg, var(--brand-1), var(--brand-3));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
  .lp-price-badge{ position:absolute; top:-11px; inset-inline-start:24px; color:#fff; font-size:10.5px; font-weight:700;
    letter-spacing:0.3px; text-transform:uppercase; padding:5px 12px; border-radius:20px;
    background:linear-gradient(120deg, var(--brand-1), var(--brand-3)); box-shadow:0 6px 16px -8px var(--brand-glow); }
  .lp-price-card h3{ font-family:'Oswald',sans-serif; font-size:18px; font-weight:600; color:var(--ink); margin:6px 0 6px; }
  .lp-price-desc{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink-soft); margin:0 0 18px; }
  .lp-price-list{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; }
  .lp-price-list li{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink); padding-inline-start:24px; position:relative; line-height:1.5; }
  .lp-price-list li::before{ content:"✓"; position:absolute; inset-inline-start:0; top:0; width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700;
    color:var(--brand-1); background:color-mix(in srgb, var(--brand-1) 14%, transparent); }
  .lp-price-cta{ width:100%; justify-content:center; padding:11px; }
  .lp-price-featured .lp-price-cta{ background:linear-gradient(120deg, var(--brand-1), var(--brand-2) 60%, var(--brand-3) 200%);
    box-shadow:0 12px 26px -14px var(--brand-glow); }

  /* -- Final CTA: the one full-bleed brand panel on the page -- */
  .lp-final-cta{ padding:84px 0; border-top:1px solid var(--panel-edge); }
  .lp-final-cta-inner{ position:relative; overflow:hidden; text-align:center; border-radius:26px; padding:58px 28px 62px; color:#fff;
    background:linear-gradient(135deg, #241E7A 0%, #4B3FD1 46%, #22C9E0 135%);
    box-shadow:0 36px 70px -34px var(--brand-glow); }
  .lp-final-cta-inner::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 60% 70% at 82% 8%, rgba(255,255,255,0.20), transparent 60%); }
  .lp-final-cta-inner > *{ position:relative; z-index:1; }
  .lp-final-logo{ width:54px; height:auto; display:block; margin:0 auto 18px;
    filter:brightness(0) invert(1) drop-shadow(0 6px 16px rgba(0,0,0,0.35)); opacity:.95; }
  .lp-final-cta-inner h2{ font-family:'Oswald',sans-serif; font-size:clamp(23px, 3vw, 32px); font-weight:600; color:#fff; margin:0 0 10px; }
  .lp-final-cta-inner p{ font-family:'Inter',sans-serif; font-size:14.5px; color:rgba(255,255,255,0.82); margin:0 0 28px; }
  .lp-final-cta-inner .btn{ padding:13px 32px; font-size:14px; border-radius:12px; background:#fff; color:#2E2796;
    box-shadow:0 14px 28px -14px rgba(0,0,0,0.5); }
  .lp-final-cta-inner .btn:hover{ background:#F1F1FB; color:#241E7A; transform:translateY(-1px); }

  /* Filled brand buttons keep the light ramp in both themes: dark mode's
     lighter --brand-2 is right for text and icons, but white labels on it
     fall below a readable contrast ratio. */
  [data-theme="dark"] .lp-cta-primary,
  [data-theme="dark"] .lp-price-featured .lp-price-cta,
  [data-theme="dark"] .demo-submit-btn,
  [data-theme="dark"] .contact-submit-btn{
    background:linear-gradient(120deg, #4B3FD1, #6C5CE7 60%, #22C9E0 200%); }
  [data-theme="dark"] .lp-cta-primary:hover{ background:linear-gradient(120deg, #6C5CE7, #4B3FD1 70%); }

  /* -- Footer -- */
  .lp-footer{ border-top:1px solid var(--panel-edge); padding:30px 0; }
  .lp-footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  .lp-footer-brand{ display:flex; align-items:center; gap:10px; }
  .lp-footer-brand-text{ display:flex; flex-direction:column; gap:2px; line-height:1.1; }
  .lp-footer-brand-text .lp-brand-name{ font-size:15.5px; }
  .lp-footer-brand-text small{ font-family:'Inter',sans-serif; font-size:10px; font-weight:500; letter-spacing:.07em;
    text-transform:uppercase; color:var(--ink-soft); }
  .lp-footer-links{ display:flex; align-items:center; gap:20px; }
  .lp-footer-links a{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink-soft); text-decoration:none; }
  .lp-footer-links a:hover{ color:var(--ink); }
  .lp-footer-link-btn{ background:none; border:none; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--brand-1); cursor:pointer; padding:0; }
  .lp-footer-link-btn:hover{ text-decoration:underline; }
  .lp-footer-copy{ font-family:'Inter',sans-serif; font-size:11.5px; color:var(--ink-soft); }

  /* -- Logo on the boot splash and the sign-in card -- */
  .boot-logo{ width:58px; height:auto; display:block; filter:drop-shadow(0 6px 16px var(--brand-glow)); }
  .center-logo{ width:52px; height:auto; display:block; margin:0 auto 12px; filter:drop-shadow(0 4px 14px rgba(75,63,209,0.6)); }

  /* -- Keyframes (all suppressed under prefers-reduced-motion, below) -- */
  @keyframes lpOrbDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(4%, -6%, 0) scale(1.12); } }
  @keyframes lpFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }
  @keyframes lpPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
  @keyframes lpProgress{ 0%,100%{ width:52%; } 50%{ width:78%; } }
  @media (prefers-reduced-motion:reduce){
    .lp-orb, .lp-hero-visual, .lp-badge::before, .lp-mock-bar-fill{ animation:none !important; }
    .lp-mock{ transform:none; }
  }

  /* -- Back-to-home link on the login card -- */
  .lp-back-link{ position:absolute; top:16px; inset-inline-start:16px; }
  #loginScreen .center-card{ position:relative; }

  /* -- Shared close button for the Demo / Contact modals -- */
  .modal-x{ position:absolute; top:14px; inset-inline-end:14px; z-index:2; width:32px; height:32px; border-radius:10px;
    background:var(--surface-soft); border:1px solid var(--panel-edge); color:var(--ink-soft);
    font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .12s ease, color .12s ease; }
  .modal-x:hover{ background:var(--surface-hover); color:var(--ink); }

  /* -- Demo modal -- */
  #demoModalOverlay .modal.demo-modal{ max-width:880px; padding:0; position:relative; }
  .demo-modal-grid{ display:grid; grid-template-columns:1.35fr 1fr; }
  .demo-modal-form{ padding:28px 30px 30px; display:flex; flex-direction:column; gap:14px; }
  .demo-modal-head h2{ font-family:'Oswald',sans-serif; font-size:21px; font-weight:600; color:var(--ink); margin:0 0 6px; }
  .demo-modal-head p{ font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-soft); margin:0; line-height:1.5; }
  .field .opt{ color:var(--ink-soft); font-weight:500; text-transform:none; letter-spacing:0; }
  .demo-submit-btn{ justify-content:center; padding:12px; margin-top:2px;
    background:linear-gradient(120deg, var(--brand-1), var(--brand-2) 60%, var(--brand-3) 200%);
    box-shadow:0 12px 26px -14px var(--brand-glow); }
  .demo-form-note{ font-family:'Inter',sans-serif; font-size:11.5px; color:var(--ink-soft); text-align:center; margin:0; }
  .demo-modal-side{ background:var(--surface-soft); border-inline-start:1px solid var(--panel-edge); padding:28px 24px; display:flex; flex-direction:column; gap:18px; }
  .demo-modal-side h3{ font-family:'Inter',sans-serif; font-size:13.5px; font-weight:700; color:var(--ink); margin:0; line-height:1.4; }
  .demo-logo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .demo-logo-chip{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:9px; padding:10px 8px; text-align:center;
    font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.3px; color:var(--ink-soft); }
  .demo-side-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .demo-side-points li{ font-family:'Inter',sans-serif; font-size:12px; line-height:1.5; color:var(--ink-soft); padding-inline-start:18px; position:relative; }
  .demo-side-points li::before{ content:"✓"; position:absolute; inset-inline-start:0; color:var(--brand-1); font-weight:700; }

  /* -- Contact modal -- */
  #contactModalOverlay .modal.contact-modal{ max-width:820px; padding:0; position:relative; overflow:hidden; }
  .contact-modal-grid{ display:grid; grid-template-columns:1fr 1fr; }
  /* Fixed dark tone (matches .center-top elsewhere): this card is intentionally
     dark regardless of site theme, so var(--ink) — which flips near-white in
     dark mode — would be the wrong choice here. */
  .contact-modal-dark{ background:#171A1F; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 8px);
    color:#fff; padding:34px 30px; display:flex; flex-direction:column; justify-content:space-between; gap:26px; }
  .contact-badge{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.14); color:#C9CDF8; margin-bottom:16px; box-shadow:none; }
  .contact-modal-dark h2{ font-family:'Oswald',sans-serif; font-size:23px; font-weight:600; margin:0 0 10px; line-height:1.25; }
  .contact-modal-dark p{ font-family:'Inter',sans-serif; font-size:13px; line-height:1.55; color:#B8BCC8; margin:0 0 20px; }
  .contact-email-btn{ display:inline-flex; text-decoration:none; }
  .contact-follow-label{ display:block; font-family:'Inter',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#8E92A3; margin-bottom:10px; }
  .contact-follow-row{ display:flex; align-items:center; gap:10px; }
  .contact-social-btn{ width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12);
    color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .12s ease; }
  .contact-social-btn:hover{ background:rgba(255,255,255,0.16); }
  .contact-modal-light{ background:var(--panel); padding:34px 30px; display:flex; flex-direction:column; gap:18px; }
  .contact-divider{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; margin:2px 0; }
  .contact-divider::before, .contact-divider::after{ content:""; flex:1; height:1px; background:var(--panel-edge); }
  .contact-submit-btn{ justify-content:center; padding:12px;
    background:linear-gradient(120deg, var(--brand-1), var(--brand-2) 60%, var(--brand-3) 200%);
    box-shadow:0 12px 26px -14px var(--brand-glow); }
  .contact-info-row{ display:flex; align-items:flex-start; gap:13px; }
  .contact-info-icon{ width:38px; height:38px; border-radius:11px; color:#fff; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(140deg, var(--brand-1), var(--brand-2) 60%, var(--brand-3)); box-shadow:0 8px 18px -10px var(--brand-glow); }
  .contact-info-text{ display:flex; flex-direction:column; gap:2px; padding-top:3px; }
  .contact-info-label{ font-family:'Inter',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-soft); }
  .contact-info-text a{ font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none; }
  .contact-info-text a:hover{ color:var(--brand-1); }
  .contact-address{ font-family:'Inter',sans-serif; font-size:13px; color:var(--ink); line-height:1.5; }

  @media (max-width:980px){
    /* Hero stacks: copy centres, the mock drops below it and loses the tilt
       (a rotated card in a narrow column just looks broken). */
    .lp-hero-inner{ grid-template-columns:1fr; gap:40px; }
    .lp-hero-copy{ text-align:center; }
    .lp-hero-sub{ margin-inline:auto; }
    .lp-hero-ctas{ justify-content:center; }
    .lp-stats{ justify-content:center; gap:12px 30px; }
    .lp-mock{ transform:none; }
    [dir="rtl"] .lp-mock{ transform:none; }
    .lp-hero-visual{ max-width:560px; margin:0 auto; }
  }
  @media (max-width:900px){
    .lp-pricing-grid{ grid-template-columns:1fr; max-width:400px; margin:0 auto; }
    .demo-modal-grid{ grid-template-columns:1fr; }
    .demo-modal-side{ border-inline-start:none; border-top:1px solid var(--panel-edge); }
    .contact-modal-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    #landingScreen .lp-section-inner{ padding:0 20px; }
    .lp-nav-inner{ padding:10px 20px; }
    .lp-logo{ height:28px; }
    .lp-brand-name{ font-size:17px; }
    .lp-hero{ padding:52px 20px 56px; }
    .lp-badge{ font-size:10.5px; padding:6px 12px; max-width:100%; }
    .lp-hero-sub{ font-size:14.5px; }
    .lp-hero-ctas{ flex-direction:column; width:100%; }
    .lp-hero-ctas .btn{ width:100%; justify-content:center; }
    .lp-stats{ gap:10px 24px; }
    .lp-stat strong{ font-size:22px; }
    .lp-mock-body{ gap:7px; padding:10px; }
    .lp-mock-card{ padding:7px; }
    .lp-features, .lp-pricing{ padding:56px 0; }
    .lp-final-cta{ padding:56px 0; }
    .lp-final-cta-inner{ border-radius:20px; padding:42px 20px 46px; }
    .lp-footer-inner{ flex-direction:column; align-items:flex-start; }
    .demo-modal-form, .demo-modal-side, .contact-modal-dark, .contact-modal-light{ padding:22px 18px; }

    /* -- Mobile hamburger menu (landing nav) --
       Below 640px, .lp-nav-menu switches from a horizontal flex row
       (the desktop default, set above) to hidden-until-toggled: it's
       display:none by default and becomes a full-width dropdown once
       .lp-nav carries .lp-nav-open (toggled by app.js). Uses logical
       properties (inset-inline, padding-inline-end) so it mirrors
       correctly for RTL locales (Arabic, Kurdish) with no extra
       [dir="rtl"] overrides needed. */
    .lp-hamburger-btn{ display:inline-flex; }
    .lp-nav{ position:relative; }
    .lp-nav-menu{ display:none; }
    /* .lp-nav-menu is what carries flex:1 on desktop, so hiding it here left
       .lp-brand and .lp-nav-actions as the only two flex children — both
       flex:0 0 auto, so the theme and hamburger buttons bunched up against
       the logo with the whole right half of the bar empty. margin auto puts
       them back on the far edge, mirrored for RTL. */
    .lp-nav-actions{ margin-inline-start:auto; gap:8px; }
    /* 34px is under the touch-target floor once there is no pointer. These
       two are the only controls on the bar at this width, so there is room
       to give them the full size. */
    .lp-theme-btn, .lp-hamburger-btn{ width:40px; height:40px; }
    .lp-nav.lp-nav-open .lp-nav-menu{
      display:flex; flex-direction:column; align-items:stretch; gap:2px;
      position:absolute; top:100%; inset-inline:0;
      background:var(--panel); border-bottom:1px solid var(--panel-edge);
      box-shadow:var(--shadow-lift); padding:6px 20px 18px; max-height:calc(100vh - 100%);
      overflow-y:auto; overscroll-behavior:contain;
    }
    .lp-nav.lp-nav-open .lp-nav-links{
      flex-direction:column; align-items:stretch; gap:0; width:100%;
    }
    .lp-nav.lp-nav-open .lp-nav-links a,
    .lp-nav.lp-nav-open .lp-nav-link-btn{
      width:100%; text-align:start; padding:14px 2px; font-size:15px;
      border-bottom:1px solid var(--panel-edge);
    }
    .lp-nav.lp-nav-open .lp-nav-links a{ display:block; }
    .lp-nav.lp-nav-open .lp-nav-menu-actions{
      flex-direction:column; align-items:stretch; gap:10px; width:100%; margin-top:12px;
    }
    .lp-nav.lp-nav-open .lang-switch{ width:100%; height:44px; justify-content:space-between; padding-inline-end:10px; }
    .lp-nav.lp-nav-open .lang-switch-select{ flex:1; }
    .lp-nav.lp-nav-open .lp-nav-signin{ width:100%; justify-content:center; padding:12px; }
  }

/* Ensure confirm/prompt dialogs always render above any open modal */
#confirmOverlay, #promptOverlay {
  z-index: 9999 !important;
}

/* =========================================================================
   RTL support (Arabic / Kurdish Sorani)
   -------------------------------------------------------------------------
   Most of the layout above already uses logical properties (margin-inline-*,
   padding-inline-*, border-inline-*, inset-inline-*, text-align:start/end),
   so it mirrors automatically once <html dir="rtl"> is set — including
   flexbox rows and CSS grid columns, which follow the inline direction by
   spec. This block only covers the handful of things logical properties
   can't reach: transform-based animations (which use physical px offsets)
   and directional icon glyphs (chevrons/arrows drawn as SVG paths, which
   don't flip on their own the way a `<` / `←` character does).
   ========================================================================= */
[dir="rtl"] {
  font-family: 'Inter', 'Noto Sans Arabic', 'Noto Kufi Arabic', sans-serif;
}

/* Toggle switch: the "on" state slides the knob from its inset-inline-start
   resting position towards the end. transform:translateX() is a physical
   offset, so it needs to be mirrored explicitly for RTL. */
[dir="rtl"] .switch input:checked + .track .knob {
  transform: translateX(-18px);
}

/* Mobile sidebar slide-in: the collapsed state translates the sidebar off
   its own edge. In RTL the sidebar now docks on the right, so it should
   slide out to the right instead of the left. */
[dir="rtl"] #app.sidebar-collapsed .sidebar {
  transform: translateX(100%);
}

/* Directional chevrons drawn as inline SVG paths (not text glyphs), so they
   need an explicit horizontal flip to keep pointing the intuitive way. */
[dir="rtl"] #sidebarCloseBtn svg,
[dir="rtl"] #orgBackBtn svg,
[dir="rtl"] #hrBackBtn svg,
[dir="rtl"] #invBackBtn svg,
[dir="rtl"] .lightbox-nav svg,
[dir="rtl"] .nav-group-toggle .nav-caret {
  transform: scaleX(-1);
}

/* Lightbox prev/next already swap sides via inset-inline-start/end above;
   flipping their arrow glyphs (handled by the rule above) keeps them
   pointing toward the image they'll navigate to. */

/* Card / stat accent bars and lane-head colour strip already use logical
   border-inline-start / inset-inline-start, so they mirror automatically —
   no extra rule needed here.

   Grid layouts (demo modal, contact modal) use unordered
   grid-template-columns, which — like flex rows — follow the inline
   direction automatically, so the "main" column stays first (reading-order)
   and the side panel mirrors to the opposite edge without extra CSS. */

/* Small type tweak: Arabic/Kurdish numerals and Latin brand names (NextERP,
   emails, phone numbers) should stay LTR even inside an RTL page. */
[dir="rtl"] .lp-brand-name,
[dir="rtl"] .sessions-table,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] .cad-chip {
  direction: ltr;
  text-align: end;
}
[dir="rtl"] .search-wrap input,
[dir="rtl"] .inv-search {
  text-align: start;
}
/* ===== Maintenance Mode ===== */
/* Small admin-facing forms in the lobby's Maintenance tab and the Company
   Settings > Maintenance org tab — same two controls in both places, so one
   set of rules covers both. */
/* ===== Maintenance Mode panes (platform lobby + company settings) =====
   Both were loose controls on the page background. They sit on a panel now,
   with the save action on its own footer strip, matching every other settings
   surface in the app.

   Named -settings- rather than .maint-card because that name was already taken,
   further down this file, by the full-screen downtime overlay's card. Sharing
   it would have pushed this panel's background, border and overflow:hidden onto
   the lockout screen, which is centred text on a bare backdrop by design. */
.maint-settings-card{
  max-width:560px; background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:14px; overflow:hidden;
}
.maint-form{ display:flex; flex-direction:column; gap:16px; padding:20px 22px; }
.maint-settings-foot{
  display:flex; justify-content:flex-end; gap:10px;
  padding:14px 22px; background:var(--surface-soft);
  border-top:1px solid var(--panel-edge);
}
.maint-divider{ height:1px; background:var(--panel-edge); margin:2px 0; }
.maint-toggle-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.maint-toggle-row input{ width:17px; height:17px; accent-color:var(--rust); cursor:pointer; }

/* A real switch rather than a bare checkbox. The input is still the input —
   every reader in maintenance.js goes through .checked — it is only moved out
   of sight behind the track it draws. */
.maint-switch{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.45;
  /* The hidden input below is absolutely positioned. Without a positioned
     ancestor here it anchors to whatever happens to be positioned further up —
     which in a modal is the modal itself, dragging focus scroll to the wrong
     place. */
  position:relative;
}
/* Inside a .field, `.field label{ display:block }` (0,1,1) outranks
   `.maint-switch` (0,1,0) and was flattening the switch: the track and the
   label text stacked on top of each other and the 0x0 input landed over the
   word. This is 0,2,1, so the flex row survives wherever the switch is used. */
.field label.maint-switch{ display:flex; margin-bottom:0; }
.maint-switch input{ position:absolute; opacity:0; width:0; height:0; margin:0; }
.maint-switch-track{
  position:relative; flex:0 0 auto; width:38px; height:22px; border-radius:20px;
  background:var(--panel-edge); border:1px solid var(--panel-edge);
  transition:background .15s ease, border-color .15s ease;
}
.maint-switch-track::after{
  content:""; position:absolute; top:2px; inset-inline-start:2px;
  width:16px; height:16px; border-radius:50%; background:var(--panel);
  box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
.maint-switch input:checked + .maint-switch-track{ background:var(--accent); border-color:var(--accent); }
.maint-switch input:checked + .maint-switch-track::after{ transform:translateX(16px); }
/* The thumb has to travel the other way once the page is mirrored. */
[dir="rtl"] .maint-switch input:checked + .maint-switch-track::after{ transform:translateX(-16px); }
.maint-switch input:focus-visible + .maint-switch-track{ outline:2px solid var(--steel); outline-offset:2px; }
.maint-switch-sm{ font-size:13px; font-weight:500; align-items:flex-start; }
.maint-switch-sm .maint-switch-track{ width:32px; height:19px; margin-top:1px; }
.maint-switch-sm .maint-switch-track::after{ width:13px; height:13px; }
.maint-switch-sm input:checked + .maint-switch-track::after{ transform:translateX(13px); }
[dir="rtl"] .maint-switch-sm input:checked + .maint-switch-track::after{ transform:translateX(-13px); }

/* The reminder banner shown to an exempt admin whose own company is mid-
   maintenance for everyone else. Uses the hazard palette (already reserved
   for industrial/warning accents elsewhere) rather than --danger, since this
   isn't an error — it's a deliberate state the admin themselves set. */
.maint-admin-banner{
  display:flex; align-items:center; gap:9px;
  background:repeating-linear-gradient(135deg, var(--hazard-a) 0px, var(--hazard-a) 10px, var(--hazard-b) 10px, var(--hazard-b) 20px);
  color:#fff; font-size:12.5px; font-weight:700; padding:9px 16px; letter-spacing:0.2px;
}
.maint-admin-banner svg{ flex:0 0 auto; }

/* ---- Full-screen lockout overlay ---- */
.maint-overlay{
  position:fixed; inset:0; z-index:500; /* above every modal (.overlay-top tops out at 150) — nothing renders over this */
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 20%, #232733 0%, #12141A 60%, #0A0B0F 100%);
  color:#F2F3F5; overflow:hidden; padding:24px;
}
.maint-gear-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.maint-gear{ position:absolute; color:rgba(255,255,255,0.05); }
/* Two gears, opposite corners, opposite directions and speeds — reads as one
   idle machine rather than a single spinning logo. Pure CSS, no JS driving
   the motion, so it keeps turning even while the countdown or a re-check
   is busy on the main thread. */
.maint-gear-a{ width:640px; height:640px; inset-inline-start:-160px; top:-160px; animation:maint-spin 38s linear infinite; }
.maint-gear-b{ width:460px; height:460px; inset-inline-end:-120px; bottom:-120px; animation:maint-spin-rev 26s linear infinite; }
@keyframes maint-spin{ to{ transform:rotate(360deg); } }
@keyframes maint-spin-rev{ to{ transform:rotate(-360deg); } }

.maint-card{ position:relative; z-index:1; max-width:460px; width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.maint-icon{ color:var(--rust); margin-bottom:10px; filter:drop-shadow(0 0 18px rgba(201,98,45,0.45)); }
.maint-title{ font-family:'Oswald',sans-serif; font-weight:600; font-size:26px; letter-spacing:0.3px; margin:0; }
.maint-message{ font-size:14px; color:#B7BBC4; line-height:1.55; margin:4px 0 6px; white-space:pre-wrap; }
.maint-countdown{ margin:14px 0 10px; }
.maint-countdown-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.8px; color:#8E8E9A; margin-bottom:10px; }
.maint-countdown-digits{ display:flex; gap:10px; justify-content:center; }
.maint-cd-cell{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:11px;
  padding:10px 14px; min-width:58px;
}
.maint-cd-num{ font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:700; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.maint-cd-unit{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.6px; color:#8E8E9A; margin-top:3px; }
.maint-status{ font-size:11.5px; color:#6B7280; margin-top:18px; display:flex; align-items:center; gap:7px; }
.maint-status::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--patina);
  animation:maint-pulse 1.6s ease-in-out infinite;
}
@keyframes maint-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }

@media (max-width:520px){
  .maint-title{ font-size:21px; }
  .maint-cd-cell{ min-width:46px; padding:8px 8px; }
  .maint-cd-num{ font-size:19px; }
}

/* ===== News Feed (Phase 12) ===== */
#newsScreen{ padding:0 22px 24px; flex:1; min-height:0; overflow-y:auto; }
.news-notif-wrap{ position:relative; }
.news-notif-btn{ position:relative; padding:8px 10px; }
.news-notif-btn .msg-badge{ position:absolute; top:2px; inset-inline-end:2px; }
.news-notif-panel{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; width:320px; max-height:420px;
  overflow-y:auto; background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,0.18); z-index:40; padding:10px;
}
.news-notif-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:4px 6px 10px; font-size:12.5px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--panel-edge); margin-bottom:6px; }
.news-notif-list{ display:flex; flex-direction:column; gap:2px; }
.news-notif-row{ display:flex; flex-direction:column; gap:2px; padding:9px 8px; border-radius:9px; cursor:pointer; }
.news-notif-row:hover{ background:var(--surface-hover); }
.news-notif-row.unread{ background:var(--surface-soft); }
.news-notif-row.unread::before{ content:""; }
.news-notif-text{ font-size:12.5px; color:var(--ink); }
.news-notif-time{ font-size:10.5px; color:var(--ink-soft); }
.news-notif-empty{ padding:24px 10px; text-align:center; color:var(--ink-soft); font-size:12.5px; }

.news-feed-wrap{ max-width:680px; margin:0 auto; padding:18px 16px 40px; }
.news-composer{
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px;
  padding:14px; margin-bottom:18px; position:relative;
}
.news-composer textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:52px; border:none; outline:none;
  background:transparent; color:var(--ink); font-family:inherit; font-size:13.5px; line-height:1.5;
}
.news-composer-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;
  padding-top:10px; border-top:1px solid var(--panel-edge); }
.news-mention-list{
  position:absolute; z-index:20; left:14px; right:14px; top:52px; background:var(--panel);
  border:1px solid var(--panel-edge); border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,0.16);
  max-height:200px; overflow-y:auto;
}
.news-mention-opt{ display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:12.5px; }
.news-mention-opt:hover{ background:var(--surface-hover); }
.news-mention-name{ font-weight:600; color:var(--ink); }
.news-mention-user{ color:var(--ink-soft); }
.news-mention{ color:var(--accent); font-weight:600; }

.news-media-preview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.news-media-preview.hidden{ display:none; }
.news-media-chip{ position:relative; width:78px; height:78px; border-radius:10px; overflow:hidden;
  border:1px solid var(--panel-edge); background:var(--bg); }
.news-media-chip img, .news-media-chip video{ width:100%; height:100%; object-fit:cover; }
.news-media-remove{
  position:absolute; top:3px; inset-inline-end:3px; width:18px; height:18px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:#fff; border:none; font-size:10px; line-height:18px; cursor:pointer; padding:0;
}

.news-post{
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:14px;
  padding:14px; margin-bottom:14px;
}
.news-post-head{ display:flex; align-items:center; gap:10px; }
.news-post-head-text{ flex:1; min-width:0; }
.news-post-author{ font-size:13px; font-weight:700; color:var(--ink); }
.news-post-time{ font-size:11px; color:var(--ink-soft); }
.news-post-text{ font-size:13.5px; color:var(--ink); line-height:1.55; margin:10px 0; white-space:pre-wrap; word-break:break-word; }

.news-media-grid{ display:grid; gap:6px; margin:10px 0; border-radius:10px; overflow:hidden; }
.news-media-item{ background:var(--bg); border-radius:10px; overflow:hidden; max-height:420px; }
.news-media-item img, .news-media-item video{ width:100%; height:100%; max-height:420px; object-fit:cover; display:block; }

.news-post-actions{ display:flex; gap:6px; padding-top:10px; margin-top:4px; border-top:1px solid var(--panel-edge); }
.news-action-btn{
  display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  color:var(--ink-soft); font-size:12px; font-weight:600; padding:6px 10px; border-radius:9px;
  transition:background .15s ease, color .15s ease;
}
.news-action-btn:hover{ background:var(--surface-hover); color:var(--ink); }
.news-action-btn:disabled{ cursor:default; opacity:.55; }
.news-action-btn.liked{ color:var(--accent); }

.news-comments{ margin-top:10px; padding-top:10px; border-top:1px solid var(--panel-edge); }
.news-comments.hidden{ display:none; }
.news-comments-list{ display:flex; flex-direction:column; gap:8px; }
.news-comment-row{ display:flex; align-items:flex-start; gap:8px; }
.news-comment-body{ flex:1; min-width:0; background:var(--surface-soft); border-radius:10px; padding:7px 10px; font-size:12.5px; }
.news-comment-author{ font-weight:700; color:var(--ink); margin-inline-end:6px; }
.news-comment-text{ color:var(--ink); word-break:break-word; }
.news-comment-time{ display:block; font-size:10.5px; color:var(--ink-soft); margin-top:2px; }
.news-comment-compose{ display:flex; gap:8px; margin-top:10px; }
.news-comment-input{
  flex:1; border:1px solid var(--panel-edge); border-radius:20px; padding:7px 14px;
  font-size:12.5px; background:var(--bg); color:var(--ink); outline:none;
}
.news-comment-input:focus{ border-color:var(--accent); }

.news-empty{ padding:48px 20px; text-align:center; color:var(--ink-soft); font-size:13px;
  border:1px dashed var(--panel-edge); border-radius:14px; }

@media (max-width:640px){
  .news-notif-panel{ width:280px; }
  .news-media-item{ max-height:280px; }
}

/* ===== Selective Backup / Restore =====
   The pickers for choosing which boards, warehouses and modules go into an
   archive, and which parts of an archive come back out. Everything is built
   from the shared tokens so both themes and both text directions are covered
   by construction: colours come from the palette variables (no literal white
   or near-black, which is what broke contrast on the ID pills in Phase 17),
   and spacing uses logical properties so the rows mirror under [dir="rtl"]
   without a single direction-specific override. */
.modal-head-sub{ font-size:11.5px; color:var(--ink-soft); font-weight:500; margin-top:3px; line-height:1.45; max-width:52ch; }
.modal-head-title h2 + .modal-head-sub{ margin-top:2px; }

.sel-loading{ font-size:12.5px; color:var(--ink-soft); padding:14px 2px; }

.sel-group{ border-top:1px solid var(--panel-edge); padding-top:13px; }
.sel-group:first-child{ border-top:none; padding-top:0; }
.sel-group-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; font-weight:700; color:var(--ink); text-transform:uppercase;
  letter-spacing:.4px; margin-bottom:8px; }
.sel-all{ background:none; border:1px solid var(--panel-edge); border-radius:8px;
  padding:3px 10px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
  color:var(--ink-soft); cursor:pointer; text-transform:none; letter-spacing:0; }
.sel-all:hover{ background:var(--surface-hover); color:var(--ink); }

.sel-rows{ display:flex; flex-direction:column; gap:5px; }
.sel-row{ display:flex; align-items:flex-start; gap:10px; background:var(--surface-soft);
  border:1px solid var(--panel-edge); border-radius:10px; padding:9px 12px; cursor:pointer; }
.sel-row:hover{ background:var(--surface-hover); }
.sel-row input{ margin-top:2px; flex:0 0 auto; accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }
.sel-row.disabled{ opacity:.55; cursor:not-allowed; }
.sel-row.disabled input{ cursor:not-allowed; }
.sel-row-main{ flex:1; min-width:0; }
.sel-row-name{ font-size:12.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sel-row-meta{ font-size:10.5px; color:var(--ink-soft); margin-top:2px; }
.sel-row-size{ flex:0 0 auto; font-size:11px; font-weight:600; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; padding-top:1px; }
/* The dot is the board's own colour, so a row is recognisable at a glance from
   the same cue the board switcher uses. */
.sel-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block;
  margin-inline-end:6px; vertical-align:middle; }
.sel-empty{ font-size:11.5px; color:var(--ink-soft); padding:6px 2px; }
.sel-warn{ font-size:10.5px; color:var(--pill-yellow-text); margin-top:3px; }

.sel-files-row, .sel-mode-row{ display:flex; align-items:flex-start; gap:10px;
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-radius:10px; padding:11px 13px; cursor:pointer; margin-top:6px; }
.sel-files-row input, .sel-mode-row input{ margin-top:2px; flex:0 0 auto;
  accent-color:var(--accent); width:15px; height:15px; cursor:pointer; }
.sel-files-row strong, .sel-mode-row strong{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); }
.sel-hint{ display:block; font-size:11px; color:var(--ink-soft); margin-top:3px; line-height:1.5; }
/* Replace is the destructive choice, so it colours itself once it's the one
   selected rather than shouting for attention while merge is still active. */
.sel-mode-row:has(input[value="replace"]:checked){ border-color:var(--danger); }
.sel-mode-row:has(input[value="replace"]:checked) strong{ color:var(--danger); }

.sel-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; border-top:1px solid var(--panel-edge); padding-top:14px; }
.sel-total{ font-size:12px; color:var(--ink-soft); font-weight:600; }
.sel-total strong{ color:var(--ink); }
.sel-foot-actions{ display:flex; gap:10px; margin-inline-start:auto; }

/* ============ Phase 20: Admin Recycle Bin & Cross-Board Transfers ============
   Reuses the Phase 9 Recycle Bin styles wholesale (.rb-pill, .rb-empty,
   .rb-preview-*, .file-list-row) — the two bins should look like the same
   kind of screen, because they are. Only what genuinely differs is new. */

/* Why an item was demoted. Colour-coded because the distinction that
   matters to a reviewer is "a person did this" (manual, amber) versus "a
   timer did this while nobody was looking" (expired/overflow, grey) — the
   first has somebody to ask about it and the second does not. */
.rb-pill-manual  { background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border:1px solid var(--pill-yellow-border); }
.rb-pill-expired { background:var(--pill-gray-bg);   color:var(--pill-gray-text);   border:1px solid var(--pill-gray-border); }
.rb-pill-overflow{ background:var(--pill-gray-bg);   color:var(--pill-gray-text);   border:1px solid var(--pill-gray-border); }
/* Aliases: adminRecycleBin.js emits arb-pill-* names. Kept as separate
   selectors rather than renamed, so the standard bin's pill classes and
   these can never be confused for one another at a glance in the markup. */
.arb-pill-manual  { background:var(--pill-yellow-bg); color:var(--pill-yellow-text); border:1px solid var(--pill-yellow-border); }
.arb-pill-expired { background:var(--pill-gray-bg);   color:var(--pill-gray-text);   border:1px solid var(--pill-gray-border); }
.arb-pill-overflow{ background:var(--pill-gray-bg);   color:var(--pill-gray-text);   border:1px solid var(--pill-gray-border); }

/* Standing warning at the top of the second-tier bin. Deliberately always
   visible rather than shown on hover or only in the confirm dialog: this is
   the one screen in the application where an action cannot be undone, and
   that should be apparent before anybody starts clicking. */
.arb-banner{
  background:var(--pill-red-bg); color:var(--pill-red-text);
  border:1px solid var(--pill-red-border); border-radius:8px;
  padding:9px 12px; font-size:12px; font-weight:600; margin-bottom:10px;
}
.arb-provenance .rb-kv-grid{ row-gap:6px; }

/* Transfer modal: the subject line naming what is about to move. */
.xfer-subject{
  font-family:'Oswald',sans-serif; font-size:15px; font-weight:600;
  color:var(--ink); margin-bottom:4px;
}
.xfer-subject .xfer-kind{
  display:inline-block; font-family:inherit; font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.3px; padding:2px 7px; border-radius:20px;
  margin-inline-end:6px; vertical-align:middle;
  background:var(--pill-gray-bg); color:var(--pill-gray-text); border:1px solid var(--pill-gray-border);
}
/* The "…and its N machines will move too" line. Uses .perm-note's box in
   the markup; this only tightens the spacing under the subject. */
#xferNote{ margin-bottom:12px; }

/* Transfer entry points inside the card and group editors. Sized to sit
   inline with the existing header controls rather than as a primary action —
   moving something to another board is a rare, deliberate operation, not a
   button that should compete with Save. */
.xfer-open-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:7px;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--panel-edge); cursor:pointer;
}
.xfer-open-btn:hover{ color:var(--ink); border-color:var(--ink-soft); }

/* ===== Maintenance Mode, layer two: closing the public website =====
   Indented under the master switch and dimmed when it is off, so the panel
   reads as "and additionally…" rather than as two independent toggles that
   happen to sit near each other. */
.maint-sublayer{
  margin-inline-start:26px; padding-inline-start:14px;
  border-inline-start:2px solid var(--panel-edge);
  display:flex; flex-direction:column; gap:8px;
  transition:opacity .15s;
}
.maint-sublayer.is-disabled{ opacity:.42; pointer-events:none; }
.maint-sublayer .maint-toggle-row{ font-size:13px; font-weight:500; align-items:flex-start; }
.maint-sublayer .maint-toggle-row input{ margin-top:1px; }
.maint-sublayer .maint-switch{ align-items:flex-start; }
.maint-sublayer-note{ margin:0; font-size:11.5px; line-height:1.5; color:var(--ink-soft); }

/* The escape hatch. Shown only while the public block is armed — it is
   reassurance at the exact moment somebody is about to close their own front
   door, and clutter at every other moment. */
.maint-escape-hatch{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-radius:8px; padding:8px 10px; font-size:11.5px; color:var(--ink-soft);
}
.maint-escape-hatch.hidden{ display:none; }
.maint-escape-hatch code{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink);
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:5px; padding:2px 7px; word-break:break-all;
}
.btn-linkish{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:600; color:var(--accent);
  text-decoration:underline; text-underline-offset:2px;
}
.btn-linkish:hover{ color:var(--accent-dark); }

/* ============================================================
   Product catalog: list view, wizard and directory
   ============================================================
   Built on the same tokens as the rest of the app (--panel, --panel-edge,
   --ink, --accent) rather than the literal colours from the mockups, so both
   themes work. In dark mode those tokens already resolve to the dark slate
   the mockups show; in light mode this follows the app instead of forcing a
   dark island into a light page. */

/* ---------- view toggle (Table | Catalog) ---------- */
.inv-view-toggle{
  display:inline-flex; background:var(--surface-soft);
  border:1px solid var(--panel-edge); border-radius:9px; padding:2px; gap:2px;
}
.inv-view-toggle button{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  padding:5px 13px; border-radius:7px; transition:background .13s, color .13s;
}
.inv-view-toggle button:hover{ color:var(--ink); }
.inv-view-toggle button.active{ background:var(--accent); color:#fff; }

/* ---------- catalog filters ---------- */
.cat-filters{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; margin-bottom:12px;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:12px;
}
.cat-filter-select{
  font-family:inherit; font-size:12.5px; color:var(--ink);
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-radius:8px; padding:7px 11px; min-width:150px; cursor:pointer;
}
.cat-filter-select:focus{ outline:none; border-color:var(--accent); }

/* ---------- catalog table ---------- */
.cat-table-wrap{
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:12px; overflow:auto;
}
.cat-table{ width:100%; border-collapse:collapse; font-size:13px; }
.cat-table thead th{
  text-align:start; font-size:11px; font-weight:600; letter-spacing:0.4px;
  text-transform:uppercase; color:var(--ink-soft);
  padding:13px 14px; border-bottom:1px solid var(--panel-edge);
  background:var(--surface-soft); white-space:nowrap;
  position:sticky; top:0; z-index:1;
}
.cat-table tbody td{
  padding:11px 14px; border-bottom:1px solid var(--panel-edge);
  color:var(--ink); vertical-align:middle;
}
.cat-table tbody tr{ cursor:pointer; transition:background .12s; }
.cat-table tbody tr:hover{ background:var(--surface-hover); }
.cat-table tbody tr:last-child td{ border-bottom:none; }
.cat-col-img{ width:56px; }
.cat-col-actions{ width:52px; text-align:end; }

.cat-thumb{
  width:36px; height:36px; border-radius:8px; object-fit:cover; display:block;
  background:var(--surface-soft); border:1px solid var(--panel-edge);
}
/* The thumbnail is a button now. It keeps the plain <img> footprint so rows
   with and without a photo stay the same height, and only grows a ring on
   hover/focus to say it is clickable in its own right — the row behind it
   still opens the editor. */
.cat-thumb-btn{
  position:relative; display:block; padding:0; border:none; background:none;
  cursor:zoom-in; border-radius:8px; line-height:0;
}
.cat-thumb-btn:hover .cat-thumb{ border-color:var(--accent); }
.cat-thumb-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Only drawn from the second image, where it means "there is more here". */
.cat-thumb-count{
  position:absolute; bottom:-3px; inset-inline-end:-3px;
  min-width:15px; height:15px; padding:0 3px; border-radius:8px;
  background:var(--accent); color:#fff;
  font-size:9.5px; font-weight:700; line-height:15px; text-align:center;
  border:1.5px solid var(--panel); box-sizing:content-box;
}
/* Placeholder for a product with no photo yet. Same footprint as a real
   thumbnail so rows don't change height when one is added. */
.cat-thumb-empty{
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.cat-name{ font-weight:600; }
.cat-sub{ font-size:11px; color:var(--ink-soft); margin-top:2px; font-family:'JetBrains Mono',monospace; }
.cat-muted{ color:var(--ink-soft); }
.cat-qty-zero{ color:var(--rust); font-weight:600; }
.cat-price-sale{ font-weight:600; }
.cat-price-was{ margin-inline-start:6px; font-size:11.5px; color:var(--ink-soft); text-decoration:line-through; }

/* Status pills. Colour is deliberately not the only signal — each carries its
   own word — because a red and an amber pill are the same pill to a
   red-green colourblind reader. */
.cat-badge{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:0.2px;
  padding:3px 9px; border-radius:999px; white-space:nowrap; border:1px solid transparent;
}
.cat-badge.ok{ background:color-mix(in srgb, var(--patina) 16%, transparent); color:var(--patina); border-color:color-mix(in srgb, var(--patina) 32%, transparent); }
.cat-badge.warn{ background:color-mix(in srgb, #C99A2D 18%, transparent); color:#B8891F; border-color:color-mix(in srgb, #C99A2D 34%, transparent); }
.cat-badge.bad{ background:color-mix(in srgb, var(--rust) 16%, transparent); color:var(--rust); border-color:color-mix(in srgb, var(--rust) 32%, transparent); }
[data-theme="dark"] .cat-badge.warn{ color:#E5B347; }

.cat-actions-btn{
  border:none; background:none; cursor:pointer; color:var(--ink-soft);
  font-size:17px; line-height:1; padding:4px 8px; border-radius:6px;
}
.cat-actions-btn:hover{ background:var(--surface-hover); color:var(--ink); }

/* Appended to <body>, so it is positioned in viewport coordinates and needs a
   z-index above the modals it can be opened from. */
.cat-menu{
  position:fixed; z-index:400; min-width:150px; padding:5px;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.18); display:flex; flex-direction:column; gap:1px;
}
.cat-menu button{
  border:none; background:none; cursor:pointer; font-family:inherit; font-size:12.5px;
  color:var(--ink); text-align:start; padding:8px 11px; border-radius:7px;
}
.cat-menu button:hover:not(:disabled){ background:var(--surface-hover); }
.cat-menu button:disabled{ opacity:.4; cursor:not-allowed; }
.cat-menu button.danger{ color:var(--rust); }
.cat-footer{ padding:12px 4px 0; font-size:11.5px; color:var(--ink-soft); }

/* ============================================================
   Product wizard
   ============================================================ */
/* The wizard is a top-level app-screen and must own its scrolling exactly
   the way #inventoryScreen, #hrScreen, #orgScreen and #newsScreen do:
   flex:1 to fill .main-area, min-height:0 so the flex item is allowed to be
   shorter than its content, and overflow-y:auto so that content scrolls
   inside the screen. Without this rule the wizard's full height leaked out
   of .main-area and the document itself had to be scrolled to reach the
   form — which is why "Edit Product" opened far below the fold. */
#productWizardScreen{ padding:0 22px 24px; flex:1; min-height:0; overflow-y:auto; }
.wiz-shell{ max-width:1080px; margin:0 auto; padding:4px 0 40px; }
.wiz-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:18px;
}
.wiz-head-text h1{
  font-family:'Oswald',sans-serif; font-size:24px; font-weight:600;
  margin:0 0 4px; color:var(--ink); letter-spacing:0.2px;
}
.wiz-head-text p{ margin:0; font-size:13px; color:var(--ink-soft); }
.wiz-head-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.wiz-readonly{
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-inline-start:3px solid var(--rust); border-radius:9px;
  padding:10px 14px; font-size:12.5px; color:var(--ink-soft); margin-bottom:16px;
}

.wiz-body{ display:grid; grid-template-columns:210px 1fr; gap:22px; align-items:start; }

.wiz-nav{ display:flex; flex-direction:column; gap:3px; position:sticky; top:8px; }
.wiz-nav button{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:500; color:var(--ink-soft);
  text-align:start; padding:11px 14px; border-radius:9px;
  transition:background .13s, color .13s;
}
.wiz-nav button:hover{ background:var(--surface-hover); color:var(--ink); }
.wiz-nav button.active{
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  color:var(--accent); font-weight:600;
}

.wiz-panels{ min-width:0; }
.wiz-panel{ display:flex; flex-direction:column; gap:18px; }
.wiz-card{
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:13px; padding:20px 22px;
  display:flex; flex-direction:column; gap:15px;
}
.wiz-card-title{ font-size:14.5px; font-weight:700; color:var(--ink); }
.wiz-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.field-hint{ font-weight:400; font-size:11.5px; color:var(--ink-soft); }
.wiz-panel .field-hint{ margin:5px 0 0; line-height:1.45; }

.wiz-check-row{
  display:flex; align-items:flex-start; gap:9px; cursor:pointer;
  font-size:13px; font-weight:500; color:var(--ink);
}
.wiz-check-row input{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; margin-top:1px; }
.wiz-check-field{ justify-content:flex-start; padding-top:22px; }

/* ---------- currency toggle ---------- */
.wiz-currency-toggle{
  display:inline-flex; background:var(--surface-soft);
  border:1px solid var(--panel-edge); border-radius:9px; padding:2px; gap:2px; width:max-content;
}
.wiz-currency-toggle button{
  border:none; background:none; cursor:pointer; font-family:'JetBrains Mono',monospace;
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  padding:6px 18px; border-radius:7px; transition:background .13s, color .13s;
}
.wiz-currency-toggle button.active{ background:var(--accent); color:#fff; }
.wiz-cur-tag{ font-weight:400; color:var(--ink-soft); font-size:11.5px; }

/* ---------- supplier / manufacturer pickers ---------- */
.wiz-party-row{ position:relative; display:flex; gap:8px; align-items:stretch; }
.wiz-party-search{ flex:1; min-width:0; }
.wiz-party-add{ flex:0 0 auto; white-space:nowrap; font-size:12px; padding:0 12px; }
.wiz-party-menu{
  position:absolute; inset-inline-start:0; top:calc(100% + 4px); z-index:60;
  width:100%; max-height:230px; overflow:auto; padding:5px;
  background:var(--panel); border:1px solid var(--panel-edge); border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,0.16); display:flex; flex-direction:column; gap:1px;
}
.wiz-party-menu.hidden{ display:none; }
.wiz-party-menu button{
  border:none; background:none; cursor:pointer; font-family:inherit; font-size:12.5px;
  color:var(--ink); text-align:start; padding:8px 11px; border-radius:7px;
}
.wiz-party-menu button:hover{ background:var(--surface-hover); }
.wiz-party-none{ padding:9px 11px; font-size:12px; color:var(--ink-soft); }

.wiz-party-chosen{ margin-top:8px; }
.wiz-party-chosen.hidden{ display:none; }
.wiz-party-chip{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-radius:9px; padding:9px 12px;
}
.wiz-party-chip-name{ font-size:13px; font-weight:600; color:var(--ink); }
.wiz-party-chip-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.wiz-party-chip button{
  border:none; background:none; cursor:pointer; color:var(--ink-soft);
  font-size:13px; padding:3px 6px; border-radius:6px; flex:0 0 auto;
}
.wiz-party-chip button:hover{ background:var(--panel); color:var(--rust); }

/* ---------- media gallery ---------- */
.wiz-drop{
  border:2px dashed var(--panel-edge); border-radius:12px;
  padding:34px 20px; text-align:center; cursor:pointer;
  background:var(--surface-soft); transition:border-color .15s, background .15s;
}
.wiz-drop:hover, .wiz-drop:focus-visible{ border-color:var(--accent); outline:none; }
.wiz-drop.is-over{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 9%, transparent);
}
.wiz-drop.is-busy{ opacity:.6; pointer-events:none; }
.wiz-drop-icon{
  width:44px; height:44px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
}
.wiz-drop-title{ font-size:13.5px; font-weight:600; color:var(--ink); }
.wiz-drop-browse{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.wiz-drop-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:5px; }

.wiz-gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(126px, 1fr)); gap:12px;
}
.wiz-gallery:empty{ display:none; }
.wiz-shot{
  position:relative; aspect-ratio:1; border-radius:11px; overflow:hidden;
  border:1px solid var(--panel-edge); background:var(--surface-soft);
}
/* The primary image is the catalog thumbnail, so it is marked visibly rather
   than left as "the first one, if you happen to know that". */
.wiz-shot.is-primary{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.wiz-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.wiz-shot-flag{
  position:absolute; top:7px; inset-inline-start:7px; z-index:2;
  background:var(--accent); color:#fff; font-size:9.5px; font-weight:700;
  letter-spacing:0.4px; text-transform:uppercase; padding:3px 7px; border-radius:5px;
}
.wiz-shot-tools{
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:3px; padding:6px;
  background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  opacity:0; transition:opacity .15s;
}
.wiz-shot:hover .wiz-shot-tools, .wiz-shot:focus-within .wiz-shot-tools{ opacity:1; }
/* Always visible on touch, where there is no hover to reveal them. */
@media (hover:none){ .wiz-shot-tools{ opacity:1; } }
.wiz-shot-tools button{
  border:none; cursor:pointer; font-family:inherit; font-size:10.5px; font-weight:600;
  color:#fff; background:rgba(255,255,255,0.18); border-radius:6px; padding:4px 7px;
  backdrop-filter:blur(3px);
}
.wiz-shot-tools button:hover:not(:disabled){ background:rgba(255,255,255,0.32); }
.wiz-shot-tools button:disabled{ opacity:.35; cursor:not-allowed; }
.wiz-shot-tools button.danger:hover{ background:var(--rust); }

/* ---------- variants ---------- */
.wiz-variant{
  display:grid; grid-template-columns:1fr 1.6fr 40px; gap:14px; align-items:end;
  padding:14px 0; border-bottom:1px solid var(--panel-edge);
}
.wiz-variant:last-child{ border-bottom:none; padding-bottom:0; }
.wiz-variant-del{
  border:1px solid var(--panel-edge); background:var(--surface-soft); cursor:pointer;
  color:var(--ink-soft); border-radius:8px; height:38px; width:38px;
  display:flex; align-items:center; justify-content:center;
}
.wiz-variant-del:hover{ color:var(--rust); border-color:var(--rust); }
.wiz-variant-del-spacer{ width:38px; }
.wiz-variants-empty{ font-size:12.5px; color:var(--ink-soft); padding:6px 0; }
.wiz-variants-empty.hidden{ display:none; }

/* ============================================================
   Suppliers & Manufacturers directory
   ============================================================ */
.dir-tabs{
  display:flex; gap:4px; border-bottom:1px solid var(--panel-edge);
  margin-bottom:14px; padding-bottom:0;
}
.dir-tabs button{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--ink-soft);
  padding:9px 15px; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.dir-tabs button:hover{ color:var(--ink); }
.dir-tabs button.active{ color:var(--accent); border-bottom-color:var(--accent); }
.dir-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:14px; }
.dir-toolbar .inv-search{ flex:1; min-width:0; }

.dir-list{ display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow:auto; }
.dir-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--surface-soft); border:1px solid var(--panel-edge);
  border-radius:10px; padding:12px 14px;
}
.dir-row-main{ min-width:0; }
.dir-row-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.dir-row-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; word-break:break-word; }
.dir-row-side{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.dir-row-count{
  font-size:11px; color:var(--ink-soft); background:var(--panel);
  border:1px solid var(--panel-edge); border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.btn-linkish.danger{ color:var(--rust); }
.btn-linkish.danger:hover{ color:var(--rust-dark); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  /* The wizard's side nav becomes a horizontal strip. Sticky is dropped with
     it — a sticky bar plus the app's own header eats most of a phone screen. */
  .wiz-body{ grid-template-columns:1fr; gap:16px; }
  .wiz-nav{
    flex-direction:row; overflow-x:auto; position:static; gap:4px;
    border-bottom:1px solid var(--panel-edge); padding-bottom:6px;
  }
  .wiz-nav button{ white-space:nowrap; padding:9px 13px; }
  .wiz-head{ flex-direction:column; align-items:stretch; }
  .wiz-head-actions{ justify-content:flex-end; }
  .wiz-card{ padding:16px; }
  .wiz-variant{ grid-template-columns:1fr; gap:10px; }
  .wiz-variant-del{ width:100%; }
  .wiz-variant-del-spacer{ display:none; }
  .wiz-gallery{ grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:9px; }
}
@media (max-width:700px){
  /* Category and Price are the first columns a phone can do without: the
     status badge and the stock count are what somebody checks on the floor. */
  .cat-table thead th:nth-child(3), .cat-table tbody td:nth-child(3),
  .cat-table thead th:nth-child(4), .cat-table tbody td:nth-child(4){ display:none; }
  .cat-filters{ padding:10px 12px; gap:8px; }
  .cat-filter-select{ min-width:0; flex:1 1 130px; }
  .dir-row{ flex-direction:column; align-items:flex-start; gap:9px; }
  .dir-row-side{ width:100%; justify-content:flex-start; }
}