:root{
    --ink:#0C1021;
    --ink-soft:#5B5F72;
    --ink-faint:#9497A8;
    --canvas:#F3F4F7;
    --surface:#FFFFFF;
    --line:#E3E5EB;
    --line-strong:#CDD0DC;
    --indigo:#3B2FC9;
    --indigo-deep:#2A2093;
    --indigo-soft:#ECEBFC;
    --amber:#B5790F;
    --amber-soft:#FBF1DE;
    --rust:#B23B3B;
    --rust-soft:#FAE9E9;
    --shadow: 0 1px 2px rgba(12,16,33,0.04), 0 10px 28px rgba(12,16,33,0.06);
    --radius: 14px;

    /* VAT product accent — matches the dedicated VAT portal's identity,
       kept distinct so switching products visibly feels like switching products */
    --vat-ink:#0E1526;
    --vat-teal:#146356;
    --vat-teal-deep:#0E4A41;
    --vat-teal-soft:#E4EFEC;
    --vat-brass:#B8863C;
    --vat-brass-soft:#F6ECDA;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Libre Franklin',sans-serif;
    background:var(--canvas);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  .mono{ font-family:'Libre Franklin',sans-serif; }
  button{ font-family:'Libre Franklin',sans-serif; cursor:pointer; }
  input, select{ font-family:'Libre Franklin',sans-serif; }
  a{ color:inherit; text-decoration:none; }

  /* ---------- Brand ---------- */
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-mark{
    width:28px; height:28px; border-radius:8px; background:var(--ink); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .brand-name{ font-weight:800; font-size:18px; color:var(--ink); letter-spacing:-0.01em; }
  .brand-tag{ font-size:11px; color:var(--ink-faint); font-weight:600; margin-left:1px; }

  /* ---------- Login ---------- */
  .login-wrap{ min-height:100vh; display:flex; }
  .login-side{
    flex:1.05; background:var(--ink); color:#fff; padding:56px; display:flex; flex-direction:column;
    justify-content:space-between; position:relative; overflow:hidden;
  }
  .login-side::after{
    content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(59,47,201,0.45), transparent 70%); pointer-events:none;
  }
  .login-side-top{ position:relative; z-index:1; }
  .login-side .brand-name{ color:#fff; }
  .login-side .brand-mark{ background:var(--indigo); }
  .login-hero-figure{ position:relative; z-index:1; }
  .login-hero-num{ font-family:'Libre Franklin',sans-serif; font-size:64px; font-weight:600; line-height:1; letter-spacing:-0.01em; }
  .login-hero-label{ font-size:14px; color:rgba(255,255,255,0.6); margin-top:10px; max-width:360px; line-height:1.5; }
  .login-side-bottom{ position:relative; z-index:1; display:flex; gap:32px; flex-wrap:wrap; }
  .side-stat-num{ font-family:'Libre Franklin',sans-serif; font-size:20px; font-weight:600; }
  .side-stat-label{ font-size:12px; color:rgba(255,255,255,0.55); margin-top:3px; }

  .login-form-side{
    flex:0.95; display:flex; align-items:center; justify-content:center; padding:48px;
  }
  .login-form{ width:100%; max-width:380px; }
  .login-form h1{ font-size:24px; font-weight:800; margin:0 0 6px; letter-spacing:-0.01em; }
  .login-form .sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:28px; line-height:1.5; }
  .field-label{ font-size:12.5px; font-weight:700; color:var(--ink); display:block; margin-bottom:7px; }
  .field-box{
    border:1.5px solid var(--line-strong); border-radius:9px; padding:11px 13px; margin-bottom:16px;
    display:flex; align-items:center; gap:9px; background:var(--surface);
  }
  .field-box input{ border:none; outline:none; font-size:14px; width:100%; background:transparent; color:var(--ink); }
  .field-box svg{ flex-shrink:0; color:var(--ink-faint); }
  .otp-note{ font-size:12px; color:var(--ink-faint); line-height:1.6; margin-bottom:20px; }
  .btn{
    border:none; border-radius:9px; font-size:14px; font-weight:700; padding:12px 0; width:100%;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-primary{ background:var(--indigo); color:#fff; }
  .btn-primary:hover{ background:var(--indigo-deep); }
  .btn-ghost{ background:transparent; color:var(--ink-soft); font-weight:600; font-size:13px; margin-top:14px; }
  /* ---------- App shell ---------- */
  .shell{ min-height:100vh; display:flex; }
  .sidebar{
    width:240px; flex-shrink:0; background:var(--ink); color:#fff; display:flex; flex-direction:column; padding:24px 16px;
  }
  .sidebar .brand{ padding:0 8px 28px; }
  .sidebar .brand-name{ color:#fff; }
  .sidebar .brand-tag{ color:rgba(255,255,255,0.45); }
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:8px; border:none;
    background:transparent; text-align:left; width:100%; font-size:13.5px; font-weight:500;
    color:rgba(255,255,255,0.6); margin-bottom:2px;
  }
  .nav-item svg{ flex-shrink:0; }
  .nav-item.active{ background:rgba(59,47,201,0.35); color:#fff; font-weight:700; }
  .nav-item:hover:not(.active){ color:rgba(255,255,255,0.85); }
  .sidebar-footer{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,0.1); }
  .viewer-label{ font-size:11.5px; color:rgba(255,255,255,0.4); padding:0 8px 8px; }
  .viewer-company{ font-size:12.5px; color:rgba(255,255,255,0.85); font-weight:600; padding:0 8px 2px; }
  .switch-btn{
    display:flex; align-items:center; gap:10px; padding:10px 11px; width:100%; border-radius:8px; border:none;
    background:transparent; color:rgba(255,255,255,0.55); font-size:13px;
  }
  .main{ flex:1; min-width:0; padding:32px 40px 48px; max-width:1240px; }

  /* ---------- Product switcher ---------- */
  .product-switch{
    margin:0 0 18px; padding:4px; background:rgba(255,255,255,0.06); border-radius:12px;
    display:flex; flex-direction:column; gap:2px;
  }
  .product-option{
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; border:none;
    background:transparent; width:100%; text-align:left; cursor:pointer;
  }
  .product-option.active{ background:rgba(255,255,255,0.12); }
  .product-icon{
    width:26px; height:26px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  }
  .product-icon.us{ background:var(--indigo); }
  .product-icon.vat{ background:var(--vat-teal); }
  .product-text{ min-width:0; }
  .product-name{ font-size:12.5px; font-weight:700; color:#fff; line-height:1.3; }
  .product-desc{ font-size:10.5px; color:rgba(255,255,255,0.42); line-height:1.3; }
  .product-check{ margin-left:auto; flex-shrink:0; color:rgba(255,255,255,0.5); }

  .page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:16px; }
  .page-title{ font-size:24px; font-weight:800; letter-spacing:-0.01em; margin:0 0 4px; }
  .page-sub{ font-size:13.5px; color:var(--ink-soft); margin:0; }

  /* ---------- view toggle ---------- */
  /* ---------- Hero liability stat ---------- */
  /* ---------- Cards ---------- */
  .grid-2{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; margin-bottom:20px; }
  .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
  .card-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px 14px; }
  .card-head-left{ display:flex; align-items:center; gap:12px; }
  .card-icon{
    width:34px; height:34px; border-radius:9px; background:var(--indigo-soft); color:var(--indigo-deep);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .card-title{ font-size:14.5px; font-weight:700; color:var(--ink); }
  .card-sub{ font-size:12px; color:var(--ink-faint); margin-top:1px; }
  .card-link{ font-size:12.5px; font-weight:700; color:var(--indigo); background:none; border:none; padding:0; }

  /* ---------- Nexus rows ---------- */
  .status-chip{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:6px; white-space:nowrap; }
  .status-chip.exposure{ background:var(--rust-soft); color:var(--rust); }
  .status-chip.approaching{ background:var(--amber-soft); color:var(--amber); }
  .status-chip.unregistered{ background:var(--canvas); color:var(--ink-faint); }
  .status-chip.registered{ background:var(--indigo-soft); color:var(--indigo-deep); }
  .card-foot{ padding:12px 22px 18px; font-size:12px; color:var(--ink-faint); border-top:1px solid var(--line); margin-top:2px; }

  /* ---------- Action needed / registrations list ---------- */
  .list-card{ margin-bottom:20px; }
  .reg-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 22px; border-top:1px solid var(--line); }
  .reg-row:first-of-type{ border-top:none; }
  .reg-state{ font-size:13.5px; font-weight:700; }
  .reg-date{ font-size:12.5px; color:var(--ink-faint); }

  /* ---------- Filing tracker ---------- */
  table.data{ width:100%; border-collapse:collapse; }
  table.data thead th{
    text-align:left; font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:none;
    padding:9px 22px; border-top:1px solid var(--line); background:var(--canvas);
  }
  table.data tbody td{ padding:13px 22px; font-size:13px; border-top:1px solid var(--line); color:var(--ink); vertical-align:middle; }
  table.data tbody tr:hover{ background:var(--canvas); }
  .num{ font-family:'Libre Franklin',sans-serif; font-variant-numeric:tabular-nums; }
  .dl-link{ color:var(--indigo); font-weight:700; font-size:12.5px; background:none; border:none; padding:0; }

  /* ---------- Filings page toolbar ---------- */
  .toolbar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
  .search-box{
    display:flex; align-items:center; gap:8px; border:1px solid var(--line-strong); border-radius:9px;
    padding:8px 12px; background:var(--surface); flex:0 0 240px;
  }
  .search-box input{ border:none; outline:none; font-size:13px; width:100%; background:transparent; }
  .filter-select{
    border:1px solid var(--line-strong); border-radius:9px; padding:8px 11px; font-size:13px; background:var(--surface); color:var(--ink);
  }

  /* ---------- Nexus detail page ---------- */
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
    padding:11px 18px; border-radius:9px; font-size:13.5px; font-weight:600; box-shadow:0 10px 28px rgba(0,0,0,0.22);
    z-index:999; display:flex; align-items:center; gap:8px; opacity:0; transition:opacity .2s ease;
  }
  .toast.show{ opacity:1; }

  .empty-state{ color:var(--ink-soft); font-size:14px; padding:40px 0; text-align:center; }

  @media (max-width: 960px){
    .grid-2{ grid-template-columns:1fr; }
    .sidebar{ width:76px; }
    .sidebar .brand-name, .sidebar .brand-tag, .nav-item span, .viewer-label, .viewer-company, .switch-btn span{ display:none; }
    .main{ padding:24px; }
    .login-side{ display:none; }
  }

/* ---------- restored from the original prototype ---------- */
.hero-stat{
    background:var(--ink); color:#fff; border-radius:18px; padding:32px 36px; margin-bottom:20px;
    display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; position:relative; overflow:hidden;
  }
.hero-stat::after{
    content:""; position:absolute; right:-80px; bottom:-100px; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(59,47,201,0.5), transparent 70%); pointer-events:none;
  }
.hero-stat-left{ position:relative; z-index:1; }
.hero-stat-label{ font-size:13px; color:rgba(255,255,255,0.55); font-weight:600; margin-bottom:8px; }
.hero-stat-num{ font-family:'Libre Franklin',sans-serif; font-size:46px; font-weight:600; letter-spacing:-0.01em; line-height:1; }
.hero-stat-num .cur{ font-size:22px; color:rgba(255,255,255,0.5); margin-right:3px; }
.hero-stat-sub{ font-size:12.5px; color:rgba(255,255,255,0.45); margin-top:10px; }
.hero-stat-chips{ display:flex; gap:10px; position:relative; z-index:1; flex-wrap:wrap; }
.hero-chip{
    background:rgba(255,255,255,0.08); border-radius:10px; padding:14px 18px; min-width:118px;
  }
.hero-chip-num{ font-family:'Libre Franklin',sans-serif; font-size:19px; font-weight:600; }
.hero-chip-label{ font-size:11.5px; color:rgba(255,255,255,0.5); margin-top:4px; }
.nexus-row{
    display:grid; grid-template-columns:90px 140px 1fr; align-items:center; gap:16px;
    padding:13px 22px; border-top:1px solid var(--line);
  }
.nexus-row:first-of-type{ border-top:none; }
.nexus-state{ font-size:13.5px; font-weight:700; color:var(--ink); }
.nexus-bar-track{ height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.nexus-bar-fill{ height:100%; border-radius:4px; }
.nexus-bar-fill.exposure{ background:var(--rust); }
.nexus-bar-fill.approaching{ background:var(--amber); }
.nexus-bar-fill.ok{ background:var(--indigo); }
.nexus-detail-row{
    background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin-bottom:12px;
  }
.action-row{
    display:flex; align-items:flex-start; gap:12px; padding:13px 22px; border-top:1px solid var(--line);
  }
.action-row:first-of-type{ border-top:none; }
.action-dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); flex-shrink:0; margin-top:5px; }
.action-text{ font-size:13px; color:var(--ink); line-height:1.45; }
.action-text strong{ font-weight:700; }
.fp-track{ display:flex; height:8px; border-radius:5px; overflow:hidden; background:var(--line); margin-bottom:10px; }
.fp-seg.complete{ background:var(--indigo); }
.fp-seg.progress{ background:var(--amber); }
.fp-legend{ display:flex; gap:18px; font-size:12px; color:var(--ink-soft); padding-bottom:16px; flex-wrap:wrap; }
.fp-legend span{ display:inline-flex; align-items:center; gap:6px; }
.fp-dot{ width:7px; height:7px; border-radius:50%; }
.fp-dot.complete{ background:var(--indigo); }
.fp-dot.progress{ background:var(--amber); }
.fp-dot.pending{ background:var(--line-strong); }
.filing-progress{ padding:20px 22px 0; }
.login-side .brand-mark{background:var(--indigo)}
.fp-seg.overdue{background:var(--rust)}
.fp-dot.overdue{background:var(--rust)}
.hero-stat-num .cur{margin-right:3px}
.brand-name{font-weight:800}
.action-empty{color:var(--ink-faint);font-size:13px;padding:13px 22px}

/* ---------- additions for the wired portal ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.side-select{width:100%;margin-bottom:12px;background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.2)}
.side-select option{color:var(--ink)}
.btn:disabled,.btn-inline:disabled{opacity:.55;cursor:default}
.form-error{color:var(--rust);background:var(--rust-soft);border-radius:8px;padding:9px 12px;font-size:13px;margin:-4px 0 14px}
.form-info{color:var(--indigo-deep);background:var(--indigo-soft);border-radius:8px;padding:9px 12px;font-size:13px;margin:-4px 0 14px}
.loading{padding:48px 0;text-align:center;color:var(--ink-soft);font-size:14px}
.error-state{background:var(--rust-soft);color:var(--rust);border-radius:12px;padding:18px 22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.error-state p{margin:0;font-size:14px}
.btn-inline{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600}
.sync-note{font-size:12.5px;border-radius:9px;padding:9px 14px;margin-bottom:16px;background:var(--indigo-soft);color:var(--indigo-deep)}
.sync-note.ok{background:transparent;color:var(--ink-faint);padding:0 0 12px}
.sync-note.stale{background:var(--amber-soft);color:var(--amber)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.tile-num{font-size:30px;font-weight:600}
.tile-label{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.tile.warn .tile-num{color:var(--rust)}
.next-card,.placeholder{padding:18px 22px;margin-bottom:14px}
.next-line{font-size:14px;margin-top:6px}
.placeholder p{margin:6px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.section-title{font-size:15px;font-weight:700;margin:26px 0 12px}
.table-card{overflow-x:auto}
.right{text-align:right}
.muted{color:var(--ink-faint);font-size:12.5px}
.status-chip.complete{background:var(--indigo-soft);color:var(--indigo-deep)}
.status-chip.upcoming{background:var(--canvas);color:var(--ink-soft)}
.status-chip.overdue{background:var(--rust-soft);color:var(--rust)}
.status-chip.ended{background:var(--canvas);color:var(--ink-faint)}
.dl-link{text-decoration:underline}
.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:16px}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
@media (max-width:640px){
  .shell{flex-direction:column}
  .sidebar{width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px}
  .sidebar .brand{padding:0 8px 0 0}
  .sidebar .brand-name{display:inline}
  .sidebar nav{display:flex;gap:4px;flex:1 1 100%;order:3}
  .nav-item{width:auto;padding:8px 10px}
  .nav-item span{display:inline}
  .product-switch{flex-direction:row;margin:0;flex:1 1 auto}
  .product-desc{display:none}
  .product-text{display:block}
  .sidebar-footer{margin:0 0 0 auto;padding:0;border:none;display:flex;align-items:center;gap:8px;order:2}
  .viewer-company,.viewer-label{display:none}
  .switch-btn{width:auto;padding:8px}
  .switch-btn span{display:inline}
  .side-select{width:auto;margin:0;flex:1 1 100%}
  .main{padding:20px 16px 36px}
  .tiles{grid-template-columns:1fr}
  table.data thead{display:none}
  table.data,table.data tbody,table.data tr,table.data td{display:block}
  table.data tr{border-top:1px solid var(--line);padding:10px 0}
  table.data tbody td{border:none;padding:4px 18px;display:flex;justify-content:space-between;gap:12px;text-align:right}
  table.data td::before{content:attr(data-label);color:var(--ink-faint);font-weight:600;text-align:left}
}
.product-name,.product-desc{display:block}
.product-text{display:block}
.brand-mark.dark{background:var(--ink)}
.login-form-brand{margin-bottom:28px}
.action-dot.warn{background:var(--rust)}
.action-dot.soon{background:var(--amber)}
.card-body-note{padding:6px 22px 20px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.empty-row{text-align:center;color:var(--ink-faint);padding:24px}
.filing-progress .fp-track{margin-bottom:10px}
.placeholder p+p{margin-top:10px}

/* ---------- Staff screen ---------- */
.staff-card{margin-top:24px}
.staff-form{max-width:520px}
.staff-hint{margin:-8px 0 16px}
.staff-select{border:none;outline:none;font-size:14px;width:100%;background:transparent;color:var(--ink)}
.staff-submit{max-width:240px}
.staff-conn{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:2px 0}
.staff-error-note{flex-basis:100%;font-size:12px;color:var(--rust)}
.main .form-error,.main .form-info{margin:0 0 18px}

.staff-h{font-size:14px;font-weight:700;margin:18px 0 10px;color:var(--ink)}
.staff-file{font-size:13px;margin-bottom:8px}
.logo-preview{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;display:inline-block;margin-bottom:10px}
.logo-preview img{display:block;max-height:56px;max-width:220px}
.client-logo-wrap{background:#fff;border-radius:10px;padding:10px 12px;margin:14px 0 6px;display:flex;align-items:center;justify-content:center}
.client-logo{display:block;max-height:34px;max-width:100%}
.page-actions{display:flex;gap:10px;align-items:center}
.btn-link{display:inline-flex;align-items:center;text-decoration:none}