:root{
    --ink:#111827;
    --ink-soft:#4b5563;
    --ink-faint:#9aa3af;
    --brand:#2563eb;
    --brand-deep:#1d4ed8;
    --brand-bright:#3b82f6;
    --accent:#bfdbfe;
    --page:#f3f5f9;
    --line:#e5e7eb;
    --glass:#ffffff;
    --glass-strong:#ffffff;
    --glass-border:#e5e7eb;
    --shadow:0 10px 30px -20px rgba(15,23,42,.22);
    --r-lg:16px; --r-md:13px; --r-sm:9px;
    --stage-lead:#3b82f6; --stage-outreach:#f59e0b; --stage-response:#8b5cf6;
    --stage-discussion:#0ea5e9; --stage-won:#16a34a; --stage-hot:#ea580c;
    font-size:15px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
    color:var(--ink);
    background:var(--page);
    min-height:100%;
  }
  /* warm depth blobs retired for the flat blue/white scheme */
  .blob{display:none;}

  .app{position:relative; z-index:1; max-width:2160px; margin:0 auto; padding:22px 26px 60px;}

  .glass{
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow);
  }

  /* ============ top bar (logo + account) ============ */
  .topbar{
    display:flex; align-items:center; gap:16px; height:64px; padding:0 22px;
    position:sticky; top:22px; z-index:55;
  }
  .brand{display:flex; align-items:center; gap:14px; min-width:0;}
  .logo-slot svg{height:34px; width:auto; display:block;}

  /* ============ collapsible side menu (nav only) ============
     The rail reserves 64px in flow; the inner is fixed and expands over the
     content on hover, so nothing reflows when the labels appear. It sits below
     the sticky top bar (22 app pad + 64 bar + 20 gap = 106). */
  .appbody{display:flex; gap:20px; margin-top:20px;}
  .sidebar{flex:0 0 64px;}
  .sidebar-inner{
    position:fixed; top:106px; left:26px;
    display:flex; flex-direction:column; gap:4px;
    width:64px; height:calc(100vh - 128px);
    padding:12px 10px; overflow:hidden;
    transition:width .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
    z-index:60;
  }
  .sidebar-inner:hover{width:214px; box-shadow:0 24px 48px -22px rgba(15,23,42,.35);}
  .main{flex:1 1 auto; min-width:0;}

  nav.tabs{display:flex; flex-direction:column; gap:4px;}
  nav.tabs button{
    border:0; background:transparent; padding:11px 11px; border-radius:12px; cursor:pointer;
    font-weight:650; font-size:.92rem; color:var(--ink-soft); transition:background .15s ease, color .15s ease;
    display:flex; align-items:center; gap:15px; white-space:nowrap; width:100%; text-align:left;
  }
  nav.tabs button svg{flex:0 0 auto;}
  nav.tabs button:hover{background:#eef1f6; color:var(--brand-deep);}
  nav.tabs button.active{background:var(--brand); color:#fff; box-shadow:0 6px 16px -8px rgba(37,99,235,.55);}
  .navlabel{flex:1 1 auto; overflow:hidden;}
  nav.tabs button .cnt{background:rgba(37,99,235,.12); color:var(--brand-deep);
    border-radius:999px; padding:1px 8px; font-size:.75rem; flex:0 0 auto;}
  nav.tabs button.active .cnt{background:rgba(255,255,255,.28); color:#fff;}

  /* account button (top-right of the top bar) */
  .acct{display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:8px 15px;
    border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font:inherit;
    font-weight:650; font-size:.85rem; color:var(--ink); white-space:nowrap; transition:all .15s ease;}
  .acct:hover{background:#f3f5f9; border-color:var(--brand); color:var(--brand-deep);}
  .acct svg{color:var(--ink-soft); flex:0 0 auto;}
  .acct .rolebadge{flex:0 0 auto;}

  /* ============ stats ============ */
  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:18px 0;}
  .stat{padding:16px 20px; border-radius:var(--r-md);}
  .stat .v{font-size:1.65rem; font-weight:800; color:var(--ink); line-height:1.1;}
  .stat .l{font-size:.78rem; color:var(--ink-faint); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:3px;}

  /* ============ toolbar ============ */
  .toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 16px; margin-bottom:16px;}
  .search-wrap{position:relative; flex:1 1 240px; min-width:200px;}
  .search-wrap svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.45;}
  input,select,textarea{
    font:inherit; color:var(--ink);
    background:#fff; border:1px solid var(--line);
    border-radius:var(--r-sm); padding:10px 13px; outline:none;
    transition:box-shadow .15s ease, border-color .15s ease;
  }
  input:focus,select:focus,textarea:focus{
    border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.15);
  }
  input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.15);}
  .search-wrap input{width:100%; padding-left:38px;}
  select{cursor:pointer; -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2355493c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;}
  .btn{
    border:0; cursor:pointer; font:inherit; font-weight:650; border-radius:var(--r-sm);
    padding:10px 17px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--brand); color:#fff;
    box-shadow:0 8px 18px -10px rgba(37,99,235,.6);}
  .btn-primary:hover{background:var(--brand-deep); box-shadow:0 10px 22px -10px rgba(37,99,235,.7);}
  .btn-ghost{background:#fff; border:1px solid var(--line); color:var(--brand-deep);}
  .btn-ghost:hover{background:#f3f5f9;}
  .btn-danger{background:rgba(220,60,60,.1); color:#b42318; border:1px solid rgba(220,60,60,.25);}
  .btn-danger:hover{background:rgba(220,60,60,.18);}
  .btn-sm{padding:6px 12px; font-size:.85rem; border-radius:9px;}

  /* ============ table ============ */
  .tablecard{overflow:hidden;}
  .tscroll{overflow-x:auto;}
  table{width:100%; border-collapse:collapse; min-width:1440px;}
  thead th{
    text-align:left; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-faint); font-weight:700; padding:12px 16px;
    border-bottom:1px solid var(--line);
    background:#fbfcfe; position:sticky; top:0;
  }
  thead th:first-child, tbody td:first-child{padding-left:22px;}
  thead th:last-child, tbody td:last-child{padding-right:22px;}
  thead th.sortable{cursor:pointer; user-select:none; white-space:nowrap; transition:color .12s ease;}
  thead th.sortable:hover{color:var(--ink);}
  thead th.sorted{color:var(--ink);}
  .sortind{font-size:.68rem; letter-spacing:0;}
  /* per-column filter row */
  thead tr.filterrow th{
    top:41px; padding:6px 8px; text-transform:none; letter-spacing:0;
    border-bottom:1px solid var(--line); background:#fbfcfe;
  }
  .filterrow input, .filterrow select{
    width:100%; min-width:0; box-sizing:border-box; font-size:.74rem; font-weight:600;
    padding:5px 7px; border:1px solid rgba(45,37,28,.16); border-radius:8px;
    background:rgba(255,255,255,.7); color:var(--ink);
  }
  .filterrow select{padding-right:20px; background-position:right 6px center; background-repeat:no-repeat;}
  .filterrow input::placeholder{color:var(--ink-faint); font-weight:500;}
  .filterrow input:focus, .filterrow select:focus{outline:none; border-color:var(--brand); background:#fff;}
  tbody td{padding:13px 16px; border-bottom:1px solid rgba(45,37,28,.06); vertical-align:middle; font-size:.88rem;}
  .cell-ell{max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  tbody tr{cursor:pointer; transition:background .12s ease;}
  tbody tr:hover{background:rgba(255,255,255,.55);}
  .co-name{font-weight:700; color:var(--ink);}
  .co-sub{font-size:.78rem; color:var(--ink-faint); margin-top:2px; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .flag{font-size:1.05rem; margin-right:7px;}
  .muted{color:var(--ink-faint);}
  .cell-links{display:flex; gap:7px;}
  .iconlink{
    width:30px;height:30px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:9px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9);
    color:var(--brand); transition:all .15s ease; text-decoration:none;
  }
  .iconlink:hover{background:var(--brand); color:#fff; transform:translateY(-1px);}
  .iconlink.off{opacity:.25; pointer-events:none;}
  .movebtn{font-size:1rem; font-weight:800; line-height:1;}
  .movebtn:disabled{opacity:.2; pointer-events:none;}
  .chip{
    display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
    font-size:.76rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  }
  .chip .dot{width:7px;height:7px;border-radius:50%; background:currentColor;}
  .chip.none{background:rgba(45,37,28,.07); color:var(--ink-faint);}
  .chip.lead{background:rgba(59,130,246,.13); color:#1d4ed8;}
  .chip.outreach{background:rgba(245,158,11,.15); color:#b45309;}
  .chip.response{background:rgba(139,92,246,.14); color:#6d28d9;}
  .chip.discussion{background:rgba(14,165,233,.14); color:#0369a1;}
  .chip.won{background:rgba(22,163,74,.15); color:#15803d;}
  .chip.hot{background:rgba(234,88,12,.13); color:#c2410c;}
  .chip.type{background:rgba(36,31,25,.09); color:var(--brand-deep); font-size:.7rem; padding:3px 9px;}
  button.typepill{border:1px solid rgba(36,31,25,.12); cursor:pointer; font:inherit; font-size:.7rem; font-weight:700;
    transition:transform .12s ease, box-shadow .15s ease;}
  button.typepill:hover{transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(45,37,28,.35);}
  button.typepill .caret{font-size:.58rem; opacity:.6; margin-left:4px;}
  .chip.type.farm{background:rgba(180,120,20,.12); color:#92600a;}
  .chip.noticp{background:rgba(225,29,72,.12); color:#be123c;}
  .srcchip{
    display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
    font-size:.72rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  }
  .srcchip.sm{padding:2px 8px; font-size:.68rem;}
  .srcchip.src-agri{background:rgba(192,122,58,.14); color:#8a5320;}
  .srcchip.src-euro{background:rgba(59,130,246,.12); color:#1d4ed8;}
  .srcchip.src-manual{background:rgba(45,37,28,.08); color:var(--ink-soft);}
  .srccell{display:flex; flex-wrap:wrap; gap:4px;}
  .domlink{color:var(--ink); font-weight:400; text-decoration:none; display:inline-block; max-width:200px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;}
  .domlink:hover{text-decoration:underline;}
  .maillink{color:var(--ink); font-weight:650; text-decoration:none; display:block; max-width:230px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .maillink:hover{text-decoration:underline;}
  .phonecell{font-size:.8rem; color:var(--ink-faint); white-space:nowrap;}
  .countrycell{font-size:.85rem; white-space:nowrap;}
  .addr{font-size:.8rem; color:var(--ink-soft); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .stagepill{
    display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:.78rem; font-weight:700;
    padding:5px 12px; border-radius:999px; cursor:pointer; white-space:nowrap;
    border:1px solid rgba(31,26,21,.1); background:rgba(255,255,255,.6); color:var(--ink-faint);
    transition:transform .12s ease, box-shadow .15s ease;
  }
  .stagepill:hover{transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(45,37,28,.35);}
  .stagepill .dot{width:7px;height:7px;border-radius:50%; background:currentColor;}
  .stagepill .caret{font-size:.6rem; opacity:.65; margin-left:2px;}
  .stagepill.outreach{color:#b45309; background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.3);}
  .stagepill.response{color:#6d28d9; background:rgba(139,92,246,.13); border-color:rgba(139,92,246,.25);}
  .stagepill.discussion{color:#0369a1; background:rgba(14,165,233,.13); border-color:rgba(14,165,233,.25);}
  .stagepill.hot{color:#c2410c; background:rgba(234,88,12,.13); border-color:rgba(234,88,12,.3);}
  .stagepill.won{color:#15803d; background:rgba(22,163,74,.14); border-color:rgba(22,163,74,.3);}
  .stagepill.noticp{color:#be123c; background:rgba(225,29,72,.12); border-color:rgba(225,29,72,.25);}
  .stagepill.qualified{color:#15803d; background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.28);}
  .stagepill.pending{color:var(--ink-soft); background:rgba(45,37,28,.07); border-color:rgba(45,37,28,.14);}
  .stagepill.inpipeline{color:#0369a1; background:rgba(14,165,233,.13); border-color:rgba(14,165,233,.25);}
  /* email counts cell (icon + number) — always one line */
  .ecnts{display:inline-flex; align-items:center; gap:18px; white-space:nowrap;}
  .ecnt{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600;
    color:var(--ink); white-space:nowrap;}
  .ecnt svg{opacity:.5; flex:0 0 auto;}
  /* campaign names: plain text with a small colour dot (no filled pill) */
  .camprows{display:flex; flex-direction:column; gap:3px;}
  .camprow{display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .campdot{flex:0 0 auto; width:8px; height:8px; border-radius:50%;}
  .stagemenu{width:210px;}
  .sm-item{
    display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
    border:0; background:transparent; padding:7px 9px; border-radius:10px; cursor:pointer; font:inherit;
    transition:background .12s ease;
  }
  .sm-item:hover{background:rgba(45,37,28,.07);}
  .sm-item.active{background:rgba(192,122,58,.12);}
  .sm-item .chip{font-size:.78rem;}
  .sm-check{font-weight:800; color:var(--ink);}
  .sbtn.on[data-s="noticp"]{background:#be123c;}
  .sbtn.on[data-s="hot"]{background:var(--stage-hot);}
  .btn-notipc{background:linear-gradient(145deg,#be123c 0%, #e11d48 100%); color:#fff;
    box-shadow:0 8px 18px -8px rgba(190,18,60,.6);}
  .modal-overlay{
    position:fixed; inset:0; z-index:150; background:rgba(30,24,18,.35); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .modal-overlay.open{opacity:1; pointer-events:auto;}
  .modal{width:min(440px, calc(100vw - 40px)); padding:22px 24px; display:flex; flex-direction:column; gap:14px;
    transform:scale(.95); transition:transform .2s ease;}
  .modal-overlay.open .modal{transform:scale(1);}
  .modal h3{font-size:1.05rem; font-weight:800; color:var(--ink);}
  .modal textarea{width:100%; resize:vertical;}
  .ppl{display:inline-flex; align-items:center; gap:5px; font-size:.83rem; color:var(--ink-soft); font-weight:600;}
  .empty{padding:60px 20px; text-align:center; color:var(--ink-faint);}
  .resultmeta{font-size:.82rem; color:var(--ink-faint); padding:0 4px 8px; font-weight:600;}

  /* ============ pipeline ============ */
  .board{display:grid; grid-template-columns:repeat(3,minmax(250px,1fr)); gap:14px; align-items:start; overflow-x:auto; padding-bottom:20px;}
  @media(max-width:900px){.board{grid-template-columns:repeat(3,280px);}}
  .col{padding:14px; min-height:300px; display:flex; flex-direction:column; gap:10px; transition:background .15s ease, border-color .15s ease;}
  .col.dragover{background:rgba(255,255,255,.8); border-color:var(--brand-bright);}
  .col-head{display:flex; align-items:center; gap:9px; padding:2px 4px 8px; border-bottom:2px solid transparent;}
  .col-head .cdot{width:10px;height:10px;border-radius:50%;}
  .col-head h3{font-size:.86rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); flex:1;}
  .col-head .ccount{font-size:.78rem; font-weight:700; color:var(--ink-faint); background:rgba(255,255,255,.6); border-radius:999px; padding:2px 9px;}
  .card{
    background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
    border-radius:var(--r-md); padding:13px 14px; cursor:grab;
    box-shadow:0 6px 16px -8px rgba(45,37,28,.25);
    transition:transform .13s ease, box-shadow .15s ease;
  }
  .card:hover{transform:translateY(-2px); box-shadow:0 12px 22px -10px rgba(45,37,28,.35);}
  .card.dragging{opacity:.45; transform:rotate(2deg);}
  .card .cn{font-weight:750; font-size:.93rem; color:var(--ink); margin-bottom:4px;}
  .card .cc{font-size:.79rem; color:var(--ink-faint); display:flex; align-items:center; gap:5px; margin-bottom:8px;}
  .card .cfoot{display:flex; align-items:center; gap:7px;}
  .card.hotcard{border-left:4px solid var(--stage-hot);}
  .cdays{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; color:var(--ink-faint);
    background:rgba(45,37,28,.06); border-radius:999px; padding:2px 9px; margin-bottom:8px;}
  .wonbtn{
    border:0; cursor:pointer; padding:0; background:none; line-height:0;
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:999px; color:#16a34a;
    transition:transform .12s ease, color .15s ease, background .15s ease;
  }
  .wonbtn:hover{transform:scale(1.12); color:#15803d; background:rgba(22,163,74,.12);}
  .wonbtn:active{transform:scale(.96);}
  .ctable{min-width:900px;}
  .ctable .cgroup td{
    background:rgba(45,37,28,.05); padding:12px 16px; font-size:.95rem;
    border-top:1px solid rgba(45,37,28,.1);
  }
  .ctable .cgroup .cm-ic{vertical-align:middle; margin-right:8px;}
  .ctable .cgroup b{color:var(--ink);}
  .cg-meta{margin-left:12px; font-size:.8rem; font-weight:650; color:var(--ink-faint);}
  .cg-flex{display:flex; align-items:center; gap:4px;}
  .ctable .cempty td{padding:18px 16px; color:var(--ink-faint); font-size:.86rem; cursor:default;}
  .ctable .cempty{cursor:default;}
  .empty-col{border:1.5px dashed rgba(45,37,28,.18); border-radius:var(--r-md); padding:22px 10px; text-align:center;
    font-size:.8rem; color:var(--ink-faint);}

  /* ============ campaigns ============ */
  .camp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; align-items:start;}
  .camp-card{padding:20px; display:flex; flex-direction:column; gap:16px;}
  .camp-head{display:flex; align-items:center; gap:11px;}
  .camp-head h3{font-size:1rem; font-weight:800; color:var(--ink);}
  .camp-ic{width:38px;height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
    font-size:1.05rem; font-weight:800; color:#fff;}
  .camp-ic.camp-email, .cm-ic.camp-email{background:linear-gradient(145deg,#b45309,#f59e0b);}
  .camp-ic.camp-phone, .cm-ic.camp-phone{background:linear-gradient(145deg,#0369a1,#0ea5e9);}
  .camp-ic.camp-linkedin, .cm-ic.camp-linkedin{background:linear-gradient(145deg,#1d4ed8,#3b82f6);}
  .camp-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  .cm{background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85); border-radius:var(--r-md); padding:12px 14px;}
  .cm-v{font-size:1.45rem; font-weight:800; color:var(--ink); line-height:1.1; display:flex; align-items:baseline; gap:6px;}
  .cm-pct{font-size:.78rem; font-weight:750; color:var(--ink);}
  .cm-l{font-size:.68rem; color:var(--ink-faint); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:4px;}
  .camp-members{display:flex; flex-direction:column; gap:7px; max-height:420px; overflow-y:auto;}
  .camp-row{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.9);
    border-radius:var(--r-sm); padding:8px 11px; cursor:pointer; transition:background .12s ease;}
  .camp-row:hover{background:rgba(255,255,255,.85);}
  .camp-name{flex:1; font-weight:700; font-size:.87rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .campbtn{
    width:30px;height:30px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:9px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9);
    color:var(--ink-faint); cursor:pointer; transition:all .15s ease; font-size:.8rem; font-weight:800;
  }
  .campbtn:hover{color:var(--brand-deep); background:#fff; transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(45,37,28,.3);}
  .campbtn.in{color:#fff; border:0;}
  .campbtn.off{opacity:.32;}
  .campcell{display:flex; gap:5px;}
  /* read-only outreach-campaign chips (which sent campaign(s) a lead is in) */
  .ocamps{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:5px;}
  .ocamp{
    padding:6px 15px; border-radius:999px; font-size:.95rem; font-weight:700;
    letter-spacing:.02em; cursor:default; white-space:nowrap;
    border:1px solid transparent;
  }
  .ocamp.oc-sent{background:rgba(45,37,28,.08); color:var(--ink-soft);}
  .ocamp.oc-opened{background:rgba(59,130,246,.14); color:#1d4ed8;}
  .ocamp.oc-replied{background:rgba(21,128,61,.15); color:#15803d;}
  .ocamp.oc-bounced{background:rgba(190,18,60,.13); color:#be123c;}
  /* engagement-category colours (Campaigns page) */
  .ocamp.cat-completed{background:rgba(59,130,246,.14); color:#1d4ed8;}
  .ocamp.cat-inprogress{background:rgba(202,138,4,.16); color:#a16207;}
  .ocamp.cat-blocked{background:rgba(120,113,108,.15); color:#57534e;}
  .ocamp.cat-other{background:rgba(45,37,28,.08); color:var(--ink-soft);}

  /* ===== Campaigns page: collapsible cards ===== */
  #campgrid{display:flex; flex-direction:column; gap:12px;}
  /* floating "new campaign" button */
  .fab{position:fixed; bottom:28px; right:34px; z-index:120; display:inline-flex; align-items:center;
    gap:9px; padding:14px 22px; border:0; cursor:pointer; border-radius:999px; font:inherit;
    font-weight:700; font-size:.92rem; color:#fff; background:var(--brand);
    box-shadow:0 12px 28px -8px rgba(37,99,235,.6); transition:transform .12s ease, box-shadow .15s ease, background .15s ease;}
  .fab:hover{background:var(--brand-deep); transform:translateY(-2px); box-shadow:0 16px 32px -8px rgba(37,99,235,.7);}
  .fab:active{transform:translateY(0);}
  .camp-empty{padding:22px; border-radius:14px; color:var(--ink-soft); font-size:.9rem;}
  .camp-empty code{background:rgba(45,37,28,.08); padding:2px 6px; border-radius:5px;}
  .camp-card{border-radius:14px; overflow:hidden;}
  .camp-head{
    width:100%; display:flex; align-items:center; gap:12px; padding:15px 18px;
    background:transparent; border:0; cursor:pointer; text-align:left; font:inherit;
  }
  .camp-head:hover{background:rgba(45,37,28,.03);}
  .camp-caret{color:var(--brand); font-size:2.6rem; line-height:1; width:34px; text-align:center; flex:0 0 auto;}
  .camp-name{font-weight:800; font-size:1.02rem; color:var(--ink);}
  .camp-total{color:var(--ink-soft); font-size:.82rem; font-weight:600;}
  .camp-pills{display:flex; flex-wrap:wrap; gap:5px; margin-left:auto;}
  .camp-body{padding:2px 14px 14px 30px; display:flex; flex-direction:column; gap:6px;}
  .cat{border-top:1px solid rgba(45,37,28,.07);}
  .cat-head{
    width:100%; display:flex; align-items:center; gap:9px; padding:9px 4px;
    background:transparent; border:0; cursor:pointer; text-align:left; font:inherit;
  }
  .cat-head:hover{background:rgba(45,37,28,.03);}
  .cat-caret{color:var(--brand); font-size:2rem; line-height:1; width:28px; text-align:center; flex:0 0 auto;}
  .cat-n{color:var(--ink-faint); font-size:.78rem; font-weight:700;}
  .cat-leads{display:flex; flex-direction:column; gap:1px; padding:2px 0 8px 22px;}
  /* fixed columns so every row lines up like a table, packed to the left */
  .lead{display:grid; grid-template-columns:280px 150px 290px 110px max-content;
    align-items:center; gap:18px; padding:8px 10px; border-radius:7px;}
  .lead:hover{background:rgba(45,37,28,.04);}
  .lead-co{font-weight:650; color:var(--ink); font-size:.86rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lead-country{display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .lead-mail{color:var(--ink-soft); text-decoration:none; font-size:.83rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lead-mail:hover{text-decoration:underline; color:var(--ink);}
  .lead-sub{color:var(--ink-faint); font-size:.76rem; white-space:nowrap;}
  /* sortable column header for the campaign lead table (aligns with .lead) */
  .lead-head{display:grid; grid-template-columns:280px 150px 290px 110px max-content;
    gap:18px; padding:6px 10px 8px 32px; border-bottom:1px solid var(--line); margin-bottom:4px;}
  .lh{display:flex; align-items:center; gap:5px; background:transparent; border:0; cursor:pointer;
    font:inherit; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-faint); text-align:left; padding:0;}
  .lh:hover{color:var(--ink);}
  .lh.on{color:var(--ink);}
  .lh-ind{font-size:.7rem;}
  .lead-reply{font-size:.78rem; color:#15803d; background:rgba(21,128,61,.07); border-radius:6px;
    padding:4px 10px; margin:0 8px 6px 26px;}
  /* campaigns search bar */
  .camp-searchbar{display:flex; align-items:center; gap:10px; padding:10px 16px; margin-bottom:12px;}
  .camp-searchbar input{border:0; background:transparent; flex:1; padding:4px 2px; font-size:.92rem;}
  .camp-searchbar input:focus{box-shadow:none;}
  .lead-pipe{flex:0 0 auto; padding:2px 9px; font-size:.72rem;}
  .lead-inpipe{flex:0 0 auto; font-size:.68rem; font-weight:700; color:#0369a1; background:rgba(3,105,161,.10); padding:2px 8px; border-radius:999px; white-space:nowrap;}
  /* campaign sections: LEADS + ALREADY IN CAMPAIGN */
  .camp-sec{padding:6px 0 4px;}
  .camp-sec + .camp-sec{border-top:1px solid rgba(45,37,28,.10); margin-top:8px;}
  .camp-sec-h{display:flex; align-items:center; gap:10px; padding:6px 2px 8px;
    font-size:.74rem; font-weight:800; letter-spacing:.06em; color:var(--ink-soft);}
  .camp-sec-h > span:first-child{flex:1;}
  .camp-hint{color:var(--ink-faint); font-size:.82rem; padding:4px 2px 10px;}
  .staged{border:1px solid rgba(45,37,28,.10); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:rgba(255,255,255,.4);}
  .staged-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
  .staged-head b{font-size:.92rem;}
  .staged-head .btn{margin-left:auto;}
  .staged-emails{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:640px){ .staged-emails{grid-template-columns:1fr;} }
  .epgroup-h{font-size:.72rem; font-weight:700; color:var(--ink-soft); margin-bottom:5px;}
  .epick{display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; cursor:pointer; font-size:.82rem;}
  .epick:hover{background:rgba(45,37,28,.04);}
  .epick.on{background:rgba(21,128,61,.07);}
  .epick.locked{cursor:default; opacity:.85;}
  .epick-mail{font-weight:600; color:var(--ink);}
  .epick-meta{color:var(--ink-faint); font-size:.74rem;}
  .epick-flag{margin-left:auto; font-size:.66rem; font-weight:700; color:#15803d; background:rgba(21,128,61,.12); padding:1px 7px; border-radius:999px; white-space:nowrap;}
  .epick-empty{color:var(--ink-faint); font-size:.78rem; padding:2px 6px;}
  .campbtn.in.camp-email{background:linear-gradient(145deg,#b45309,#f59e0b);}
  .campbtn.in.camp-phone{background:linear-gradient(145deg,#0369a1,#0ea5e9);}
  .campbtn.in.camp-linkedin{background:linear-gradient(145deg,#1d4ed8,#3b82f6);}
  .campmenu{
    position:fixed; z-index:160; width:280px; padding:8px; flex-direction:column; gap:4px;
    background:rgba(253,251,247,.92);
  }
  .cm-item{
    display:flex; align-items:center; gap:10px; text-align:left; border:0; background:transparent;
    padding:9px 10px; border-radius:11px; cursor:pointer; font:inherit; font-weight:650; color:var(--ink);
    transition:background .12s ease;
  }
  .cm-item:hover:not(:disabled){background:rgba(45,37,28,.07);}
  .cm-item:disabled{opacity:.5; cursor:not-allowed;}
  .cm-item.active{background:rgba(192,122,58,.12);}
  .cm-item .cm-ic{width:28px;height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
    color:#fff; font-size:.8rem; font-weight:800; flex:0 0 auto;}
  .cm-item .cm-txt{display:flex; flex-direction:column; line-height:1.25; font-size:.88rem;}
  .cm-item .cm-txt small{font-weight:600; color:#b42318; font-size:.72rem;}
  .cm-item.remove .cm-txt{color:var(--ink-soft);}
  .bulksel{font-weight:650; color:var(--brand-deep); max-width:250px;}
  .chip.type.oem{background:rgba(29,78,216,.1); color:#1d4ed8;}
  input[type="checkbox"]{width:16px;height:16px; accent-color:#241f19; cursor:pointer;}
  tr.rowsel{background:rgba(192,122,58,.07);}

  /* ============ drawer ============ */
  .overlay{position:fixed; inset:0; background:rgba(30,24,18,.28); backdrop-filter:blur(3px);
    z-index:90; opacity:0; pointer-events:none; transition:opacity .25s ease;}
  .overlay.open{opacity:1; pointer-events:auto;}
  .drawer{
    position:fixed; top:50%; left:50%; z-index:100;
    width:min(880px, calc(100vw - 48px)); max-height:calc(100vh - 48px);
    transform:translate(-50%,-50%) scale(.96); opacity:0; pointer-events:none;
    transition:transform .26s cubic-bezier(.3,.9,.3,1), opacity .2s ease;
    display:flex; flex-direction:column; overflow:hidden;
    background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--r-lg);
    box-shadow:0 40px 100px -24px rgba(15,23,42,.4);
  }
  .drawer.open{transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto;}
  .dhead{position:relative; display:flex; align-items:flex-start; gap:12px;
    padding:20px 56px 14px 24px; border-bottom:1px solid var(--line);}
  .dhead h2{font-size:1.2rem; font-weight:800; color:var(--ink); line-height:1.25; flex:1;}
  .dclose{position:absolute; top:14px; right:14px; border:0; background:rgba(17,24,39,.06);
    width:32px; height:32px; border-radius:10px; cursor:pointer; font-size:1rem; color:var(--ink-soft);
    display:inline-flex; align-items:center; justify-content:center;}
  .dclose:hover{background:rgba(17,24,39,.12); color:var(--ink);}
  .dbody{flex:1; overflow-y:auto; padding:20px 24px 26px; display:flex; flex-direction:column; gap:20px;}
  .fgroup{display:flex; flex-direction:column; gap:5px;}
  .fgroup label{font-size:.73rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
  .frow{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .dsection h4{font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
    display:flex; align-items:center; gap:8px; margin-bottom:10px;}
  .dsection h4::after{content:""; flex:1; height:1px; background:var(--line);}
  .contact-card{padding:9px 2px; border-bottom:1px solid var(--line);}
  .contact-card:last-child{border-bottom:0;}
  .contact-card .cc-top{display:flex; align-items:center; gap:8px;}
  /* editable person fields */
  .cc-in{width:100%; border:1px solid transparent; background:transparent; border-radius:7px;
    padding:5px 8px; font:inherit; color:var(--ink);}
  .cc-in:hover{background:#f3f5f9;}
  .cc-in:focus{background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.15);}
  .cc-name-in{font-weight:700; font-size:.92rem; flex:1;}
  .contact-card .cc-fields{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px;}
  @media (max-width:560px){ .contact-card .cc-fields{grid-template-columns:1fr;} }
  .cc-field{display:flex; align-items:center; gap:4px;}
  .cc-field > span{color:var(--ink-faint); font-size:.85rem; flex:0 0 auto; padding-left:2px;}
  .contact-card .cc-name{font-weight:750; color:var(--ink); flex:1;}
  .contact-card .cc-role{font-size:.78rem; color:var(--ink-faint); margin-top:1px;}
  .contact-card .cc-links{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
  .cc-link{font-size:.78rem; color:var(--brand-deep); text-decoration:none; font-weight:650;
    background:rgba(37,99,235,.08); padding:3px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px;}
  .cc-link:hover{background:rgba(37,99,235,.16);}
  .cc-del{border:0; background:transparent; color:#b42318; cursor:pointer; font-size:.85rem; opacity:.6; padding:4px;}
  .cc-del:hover{opacity:1;}
  .cc-edit{border:0; background:transparent; color:var(--brand-deep); cursor:pointer; font-size:.9rem; opacity:.7; padding:4px;}
  .cc-edit:hover{opacity:1;}
  /* multi-value token field (email-style: only selected shown, add via dropdown) */
  .tokenfield{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
  .token{display:inline-flex; align-items:center; gap:7px; padding:4px 6px 4px 12px;
    border-radius:999px; font-size:.8rem; font-weight:700;}
  .token-x{border:0; background:rgba(0,0,0,.14); color:inherit; width:17px; height:17px; border-radius:999px;
    cursor:pointer; font-size:.62rem; display:inline-flex; align-items:center; justify-content:center; line-height:1;}
  .token-x:hover{background:rgba(0,0,0,.28);}
  .tokenadd{margin-top:9px; max-width:280px;}
  /* emails-on-record list (drawer) */
  .emailrec{display:flex; flex-direction:column; gap:4px;}
  .emailrec-row{display:flex; align-items:center; gap:10px; padding:5px 8px; border-radius:7px;}
  .emailrec-row:hover{background:#f3f5f9;}
  .emailrec-mail{color:var(--ink); text-decoration:none; font-size:.86rem; font-weight:600;}
  .emailrec-mail:hover{text-decoration:underline;}
  .emailrec-tag{font-size:.66rem; font-weight:700; padding:1px 8px; border-radius:999px; white-space:nowrap;}
  .emailrec-tag.gen{background:rgba(17,24,39,.06); color:var(--ink-soft);}
  .emailrec-tag.per{background:rgba(21,128,61,.13); color:#15803d;}
  .emailrec-person{font-size:.78rem; color:var(--ink-faint); margin-left:auto;}
  .addcontact{background:var(--page); border:1px solid var(--line); border-radius:var(--r-md);
    padding:13px 14px; margin-top:10px; display:none; flex-direction:column; gap:9px;}
  .addcontact.open{display:flex;}
  .stagegrid{display:flex; gap:7px; flex-wrap:wrap;}
  .stagegrid .sbtn{border:1px solid rgba(45,37,28,.14); background:rgba(255,255,255,.55); border-radius:999px;
    padding:7px 14px; font-size:.8rem; font-weight:700; cursor:pointer; color:var(--ink-soft); transition:all .15s;}
  .stagegrid .sbtn:hover{border-color:var(--brand-bright);}
  .stagegrid .sbtn.on{color:#fff; border-color:transparent;}
  .sbtn.on[data-s="none"]{background:var(--ink-faint);}
  .sbtn.on[data-s="lead"]{background:var(--stage-lead);}
  .sbtn.on[data-s="outreach"]{background:var(--stage-outreach);}
  .sbtn.on[data-s="response"]{background:var(--stage-response);}
  .sbtn.on[data-s="discussion"]{background:var(--stage-discussion);}
  .sbtn.on[data-s="won"]{background:var(--stage-won);}
  .dfoot{padding:14px 24px; border-top:1px solid var(--line); display:flex; gap:10px;
    background:var(--glass);}
  .dfoot .spacer{flex:1;}

  /* ============ toast ============ */
  .toast{
    position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(80px); z-index:200;
    background:rgba(28,23,18,.92); color:#f8f2e7; padding:12px 22px; border-radius:999px;
    font-weight:650; font-size:.9rem; box-shadow:0 16px 40px -10px rgba(0,0,0,.4);
    transition:transform .3s cubic-bezier(.3,.9,.3,1); backdrop-filter:blur(10px); pointer-events:none;
  }
  .toast.show{transform:translateX(-50%) translateY(0);}

  .reconnectbar{
    display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
    margin-top:20px; padding:12px 18px; font-size:.88rem; font-weight:650; color:var(--ink-soft);
  }
  footer{margin-top:34px; text-align:center; font-size:.78rem; color:var(--ink-faint);}
  footer button{border:0;background:none;color:var(--ink-faint);cursor:pointer;text-decoration:underline;font:inherit;}
  ::-webkit-scrollbar{width:9px;height:9px;}
  ::-webkit-scrollbar-thumb{background:rgba(45,37,28,.18); border-radius:99px;}
  ::-webkit-scrollbar-track{background:transparent;}

  /* ---- merge companies modal ---- */
  .mergeov{position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
    justify-content:center; background:rgba(30,24,18,.42); backdrop-filter:blur(3px);}
  .mergebox{width:min(520px,92vw); max-height:85vh; overflow:auto; background:var(--panel,#fff);
    border-radius:16px; padding:22px 24px; box-shadow:0 24px 60px -18px rgba(20,15,10,.55);}
  .mergebox h3{margin:0 0 8px; font-size:1.15rem; color:var(--ink);}
  .mergehint{margin:0 0 16px; font-size:.85rem; line-height:1.5; color:var(--ink-faint,#6b6156);}
  .mergelist{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
  .mergerow{display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px;
    border:1px solid rgba(45,37,28,.14); cursor:pointer; transition:background .12s,border-color .12s;}
  .mergerow:hover{background:rgba(45,37,28,.04);}
  .mergerow:has(input:checked){border-color:var(--brand,#8a6d3b); background:rgba(138,109,59,.08);}
  .mergerow input{accent-color:var(--brand,#8a6d3b); flex:none;}
  .mergename{font-weight:600; color:var(--ink);}
  .mergemeta{margin-left:auto; font-size:.8rem; color:var(--ink-faint,#6b6156); text-align:right;}
  .mergeacts{display:flex; justify-content:flex-end; gap:10px;}

  /* ---- non-production environment banner ----
     Sticky strip above everything, so a pre-prod tab is recognisable at a
     glance and from a screenshot. Hidden entirely on production. */
  /* environment banner (dev/preprod stripe) hidden — clean top edge */
  .envbanner{display:none !important;}
  .envbanner-legacy{position:sticky; top:0; z-index:1200; display:flex; gap:10px;
    align-items:center; justify-content:center; padding:7px 14px;
    background:repeating-linear-gradient(135deg,#b4531f,#b4531f 14px,#9c4619 14px,#9c4619 28px);
    color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; box-shadow:0 2px 10px -4px rgba(20,15,10,.5);}
  .envbanner .envtarget{font-weight:500; letter-spacing:.02em; text-transform:none;
    opacity:.92;}

/* ===== users / roles + pipeline ownership ===== */
  .rolebadge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:.68rem;
    font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-left:6px;
    background:#eef2f7; color:var(--ink-soft); border:1px solid var(--line);}
  .rolebadge.admin{background:rgba(37,99,235,.12); color:var(--brand); border-color:rgba(37,99,235,.3);}
  .rolebadge.sales{background:#f1f5f0; color:#3f7d4e; border-color:#cfe3d4;}
  .linkbtn{background:none; border:none; padding:0; margin:0; cursor:pointer;
    color:var(--brand); font-size:.8rem; font-weight:600;}
  .linkbtn:hover{text-decoration:underline;}
  .releasebtn{color:#b42318; margin-left:6px;}
  .claimbtn{background:#fff; border:1px solid var(--brand); color:var(--brand); font-weight:650;}
  .claimbtn:hover{background:rgba(37,99,235,.08);}
  .ownercell{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .ownercell .ownername{font-weight:650; font-size:.86rem; color:var(--ink);}
  .ownercell.mine .ownername{color:var(--brand);}
  .claimclock{font-size:.72rem; font-weight:700; padding:1px 7px; border-radius:999px;
    background:#eef2f7; color:var(--ink-soft);}
  .claimclock.ok{background:#eef7f0; color:#3f7d4e;}
  .claimclock.mid{background:#fff5e6; color:#a15c00;}
  .claimclock.soon{background:#fdecec; color:#b42318;}
  .pooltag{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem;
    font-weight:650; background:#f1f5f9; color:var(--ink-soft); border:1px dashed var(--line);}
  .ownertag{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.82rem;
    font-weight:700; background:#eef2f7; color:var(--ink);}
  .ownertag.mine{background:rgba(37,99,235,.12); color:var(--brand);}
  .usertable th{border-bottom:1px solid var(--line); font-size:.74rem; text-transform:uppercase;
    letter-spacing:.05em; color:var(--ink-faint);}
  .usertable td{border-bottom:1px solid var(--line); font-size:.9rem;}
  .userform input, .userform select{padding:7px 10px; border:1px solid var(--line);
    border-radius:8px; font-size:.9rem;}

/* ===== named pipelines ===== */
  .sm-head{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-faint); padding:4px 9px 6px;}
  .pipechip{display:inline-block; padding:1px 8px; border-radius:999px; font-size:.72rem;
    font-weight:700; background:rgba(37,99,235,.1); color:var(--brand-deep); border:1px solid rgba(37,99,235,.22);}
  /* pipeline picker on the board */
  .pipe-picker{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px; margin-bottom:14px;}
  .pipe-picker .pp-label{font-size:.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--ink-faint); margin-right:4px;}
  .pp-tab{border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer;
    font:inherit; font-weight:650; font-size:.85rem; padding:6px 14px; border-radius:999px; transition:all .15s ease;}
  .pp-tab:hover{border-color:var(--brand); color:var(--brand-deep);}
  .pp-tab.active{background:var(--brand); color:#fff; border-color:var(--brand);}
  /* admin: member checklist + pipeline list */
  .memberbox{display:flex; flex-wrap:wrap; gap:6px 16px; max-width:520px; padding:8px 10px;
    border:1px solid var(--line); border-radius:9px; background:#fff; min-height:40px; align-items:center;}
  .memberchk{display:inline-flex; align-items:center; gap:6px; font-size:.86rem; font-weight:600; cursor:pointer;}
  .memberchk input{width:auto; margin:0;}
  .pipe-row{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line);}
  .pipe-name{font-weight:700; font-size:.95rem;}
  .pipe-members{display:flex; flex-wrap:wrap; gap:6px; margin-top:5px;}
  .memberpill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.76rem; font-weight:600;
    background:#eef2f7; color:var(--ink-soft); border:1px solid var(--line);}

  /* ── account menu + access states (added with authentication) ───────── */
  .acctmenu{position:fixed; z-index:200; min-width:240px; padding:6px;
    border-radius:12px; border:1px solid var(--line); background:#fff;
    box-shadow:0 12px 34px rgba(15,23,42,.16);}
  .acctmenu-who{padding:10px 12px 12px; border-bottom:1px solid var(--line);}
  .acctmenu-name{font-weight:700; font-size:.9rem;}
  .acctmenu-mail{font-size:.78rem; margin-top:2px; word-break:break-all;}
  .acctmenu-item{display:block; width:100%; text-align:left; padding:10px 12px;
    margin-top:4px; border:0; border-radius:8px; background:transparent;
    font-size:.88rem; font-weight:600; color:var(--ink); cursor:pointer;}
  .acctmenu-item:hover{background:#f1f5f9;}

  /* Shown in place of the app when signed in but not on the user list. */
  .noaccess{max-width:520px; margin:64px auto; padding:32px; border-radius:16px;
    text-align:center;}
  .noaccess h2{margin:0 0 14px; font-size:1.2rem;}
  .noaccess p{margin:0 0 12px; font-size:.9rem; line-height:1.55;}
  .noaccess .btn{margin-top:10px;}

  /* ── boot gate ───────────────────────────────────────────────────────
     The SPA shell is served anonymously (it has to be - it is what shows the
     sign-in page). So the app must not RENDER until /api/me confirms who the
     viewer is. Default state is hidden; app.js reveals it only for a signed-in,
     allowlisted user. Anything else redirects or shows the no-access panel. */
  .app{ visibility:hidden; }
  html[data-booted] .app{ visibility:visible; }
  .bootgate{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:var(--page);
  }
  html[data-booted] .bootgate{ display:none; }
  .bootgate-dot{
    width:22px; height:22px; border-radius:50%;
    border:2.5px solid var(--line); border-top-color:var(--brand);
    animation:bootspin .7s linear infinite;
  }
  @keyframes bootspin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .bootgate-dot{ animation:none; border-top-color:var(--line); }
  }