/* Shared staff panel — tokens mirror login.html / index.html */
:root{
  --ink:#04060b;
  --abyss:#070d1a;
  --midnight:#0b1526;
  --panel:#0d1830;
  --signal:#2e6bff;
  --signal-hover:#3d78ff;
  --signal-lift:#5286ff;
  --sky:#7fadff;
  --paper:#f2f6ff;
  --muted:#8a97b8;
  --muted-strong:#c6d2ee;
  --ok:#3ddc97;
  --warn:#ff9a9a;

  --ink-rgb:4,6,11;
  --abyss-rgb:7,13,26;
  --panel-rgb:14,26,51;
  --signal-rgb:46,107,255;
  --sky-rgb:127,173,255;
  --ok-rgb:61,220,151;
  --warn-rgb:255,154,154;

  --line:rgba(var(--sky-rgb),.12);
  --shadow-strong:rgba(0,0,0,.55);
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","Consolas",monospace;
  --sidebar:15.5rem;
}
:root[data-theme="light"]{
  --ink:#f4f6fb;
  --abyss:#eef2f9;
  --midnight:#ffffff;
  --panel:#ffffff;
  --signal:#1a4fd0;
  --signal-hover:#1642b4;
  --signal-lift:#2f6ae0;
  --sky:#2f62c9;
  --paper:#0a1020;
  --muted:#5b6884;
  --muted-strong:#2f3b52;
  --ok:#07734a;
  --warn:#b3261e;
  --ink-rgb:244,246,251;
  --abyss-rgb:238,242,249;
  --panel-rgb:255,255,255;
  --signal-rgb:26,79,208;
  --sky-rgb:47,98,201;
  --ok-rgb:7,115,74;
  --warn-rgb:179,38,30;
  --line:rgba(10,16,32,.12);
  --shadow-strong:rgba(18,32,66,.18);
}
:root.theme-anim,
:root.theme-anim *{
  transition:background-color .45s ease,border-color .45s ease,
             color .45s ease,fill .45s ease,stroke .45s ease,box-shadow .45s ease;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Author rules like .app{display:grid} beat a non-important [hidden] and leave
   an empty 100svh gate stacked above the panel — scroll to "see" the app, then
   nav clicks feel like an infinite Loading loop. Force collapse. */
[hidden]{display:none !important}
html{color-scheme:dark;height:100%;scroll-padding-top:4rem}
:root[data-theme="light"]{color-scheme:light}
body{
  min-height:100%;
  font-family:var(--body);
  background:var(--ink);
  color:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(var(--signal-rgb),.4)}
a{color:inherit;cursor:pointer}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a,button,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

.skip{
  position:fixed;left:max(1rem,env(safe-area-inset-left));top:max(1rem,env(safe-area-inset-top));z-index:300;
  padding:.75rem 1.25rem;border-radius:999px;
  background:var(--signal);color:#fff;font-weight:600;font-size:.9rem;text-decoration:none;
  transform:translateY(-160%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.skip:focus,.skip:focus-visible{transform:none}

.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%}
.glow-1{width:640px;height:640px;top:-260px;left:-180px;background:radial-gradient(circle,rgba(var(--signal-rgb),.18) 0%,transparent 70%)}
.glow-2{width:520px;height:520px;bottom:-220px;right:-140px;background:radial-gradient(circle,rgba(var(--sky-rgb),.12) 0%,transparent 70%)}
.gridlines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(var(--sky-rgb),.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--sky-rgb),.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 55% at 25% 30%,#000 15%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 25% 30%,#000 15%,transparent 75%);
}

/* ---------- login stage ---------- */
.login-chrome{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem max(1.5rem,env(safe-area-inset-right)) 1.1rem max(1.5rem,env(safe-area-inset-left));
}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--paper)}
.logo svg{width:30px;height:30px}
.logo-word{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.logo-word span{color:var(--sky)}
.theme-toggle{
  display:grid;place-items:center;width:38px;height:38px;
  background:rgba(var(--sky-rgb),.06);color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
}
.theme-toggle:hover{color:var(--paper);background:rgba(var(--sky-rgb),.13)}
.theme-toggle svg{width:18px;height:18px;grid-area:1/1;transition:opacity .3s,transform .45s}
.t-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
:root[data-theme="light"] .t-sun{opacity:0;transform:rotate(60deg) scale(.6)}
:root[data-theme="light"] .t-moon{opacity:1;transform:none}

.login-stage{
  position:relative;z-index:1;min-height:100svh;
  display:grid;place-items:center;
  padding:6rem 1.25rem 3rem;
}
.login-card{
  width:min(420px,100%);
  background:rgba(var(--panel-rgb),.72);
  border:1px solid var(--line);
  border-radius:18px;
  padding:2rem 1.75rem 1.75rem;
  backdrop-filter:blur(16px);
  box-shadow:0 30px 80px -40px var(--shadow-strong);
}
.login-card .eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:.65rem;
}
.login-card h1{
  font-family:var(--display);font-weight:700;font-size:1.65rem;letter-spacing:-.03em;line-height:1.2;margin-bottom:.4rem;
}
.login-card .lede{color:var(--muted);font-size:.95rem;margin-bottom:1.5rem}

/* ---------- app shell ---------- */
.app{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  min-height:100svh;
}
.sidebar{
  position:sticky;top:0;align-self:start;height:100svh;
  display:flex;flex-direction:column;gap:1.25rem;
  padding:1.25rem 1rem 1.25rem max(1rem,env(safe-area-inset-left));
  border-right:1px solid var(--line);
  background:rgba(var(--abyss-rgb),.55);
  backdrop-filter:blur(12px);
}
.sidebar-brand{display:flex;align-items:center;gap:.55rem;padding:.35rem .4rem;text-decoration:none}
.nav{display:flex;flex-direction:column;gap:.2rem;flex:1}
.nav a{
  display:flex;align-items:center;gap:.65rem;
  padding:.65rem .75rem;border-radius:10px;
  color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;
  transition:background .2s,color .2s;
}
.nav a:hover{color:var(--paper);background:rgba(var(--sky-rgb),.08)}
.nav a.is-active{color:var(--paper);background:rgba(var(--signal-rgb),.16)}
.nav a svg{width:18px;height:18px;flex-shrink:0;opacity:.85}
.sidebar-foot{display:flex;flex-direction:column;gap:.55rem;padding:.25rem .4rem}
.who{font-size:.82rem;color:var(--muted);line-height:1.35}
.who strong{display:block;color:var(--paper);font-weight:600;font-size:.9rem}
.role-pill{
  display:inline-block;margin-top:.25rem;
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sky);border:1px solid rgba(var(--sky-rgb),.28);
  padding:.15rem .45rem;border-radius:999px;
}

.main{
  min-width:0;
  padding:1.35rem max(1.5rem,env(safe-area-inset-right)) 3rem max(1.35rem,env(safe-area-inset-left));
}
.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:1.5rem;flex-wrap:wrap;
}
.page-title{
  font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.85rem);
  letter-spacing:-.03em;line-height:1.15;
}
.page-sub{color:var(--muted);font-size:.92rem;margin-top:.35rem;max-width:42rem}
.topbar-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}

/* ---------- forms / buttons ---------- */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .95rem;border-radius:12px;
  background:rgba(var(--ink-rgb),.45);border:1px solid var(--line);color:var(--paper);
}
.field textarea{min-height:6.5rem;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(var(--signal-rgb),.55);
  box-shadow:0 0 0 3px rgba(var(--signal-rgb),.18);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.75rem 1.15rem;border-radius:12px;font-weight:600;font-size:.92rem;
  border:1px solid transparent;text-decoration:none;transition:background .2s,border-color .2s,transform .15s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-signal{background:var(--signal);color:#fff}
.btn-signal:hover:not(:disabled){background:var(--signal-hover)}
.btn-line{background:transparent;border-color:var(--line);color:var(--paper)}
.btn-line:hover:not(:disabled){border-color:rgba(var(--sky-rgb),.4);background:rgba(var(--sky-rgb),.06)}
.btn-danger{background:rgba(var(--warn-rgb),.12);border-color:rgba(var(--warn-rgb),.35);color:var(--warn)}
.btn-sm{padding:.45rem .75rem;font-size:.82rem;border-radius:9px}
.btn.is-sending{position:relative;color:transparent !important}
.btn.is-sending::after{
  content:"";position:absolute;inset:0;margin:auto;width:1.1rem;height:1.1rem;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.form-status{min-height:1.25rem;font-size:.88rem;margin-top:.75rem;color:var(--muted)}
.form-status.is-err{color:var(--warn)}
.form-status.is-ok{color:var(--ok)}

/* ---------- dashboard ---------- */
.stat-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:1.5rem;
}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.stat-grid{grid-template-columns:1fr}}
.stat{
  background:rgba(var(--panel-rgb),.65);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.15rem 1.2rem;
}
.stat .k{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--display);font-weight:700;font-size:1.85rem;letter-spacing:-.03em;margin:.35rem 0 .15rem}
.stat .d{font-size:.82rem;color:var(--muted)}

.panel-block{
  background:rgba(var(--panel-rgb),.55);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.15rem 1.2rem;
  margin-bottom:1.15rem;
}
.panel-block h2{
  font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:.85rem;
}
.breakdown{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .65rem;border-radius:999px;font-size:.8rem;font-weight:500;
  background:rgba(var(--sky-rgb),.08);border:1px solid rgba(var(--sky-rgb),.18);color:var(--muted-strong);
}
.chip b{color:var(--paper);font-weight:600}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ---------- tables ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:flex-end;margin-bottom:1rem}
.toolbar .field{margin:0;min-width:10rem;flex:1}
.toolbar .field.search{flex:2;min-width:14rem}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:rgba(var(--panel-rgb),.4)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:rgba(var(--abyss-rgb),.5);position:sticky;top:0;
}
tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer;transition:background .15s}
tbody tr:hover{background:rgba(var(--sky-rgb),.06)}
tbody tr.is-selected{background:rgba(var(--signal-rgb),.12)}
.empty{padding:2rem 1rem;text-align:center;color:var(--muted)}
.mono{font-family:var(--mono);font-size:.82rem}
.muted{color:var(--muted)}
.status{
  display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  background:rgba(var(--sky-rgb),.1);color:var(--sky);
}
.status-new{background:rgba(var(--signal-rgb),.15);color:var(--signal-lift)}
.status-contacted,.status-qualified{background:rgba(var(--sky-rgb),.14);color:var(--sky)}
.status-won{background:rgba(var(--ok-rgb),.15);color:var(--ok)}
.status-lost,.status-archived{background:rgba(var(--warn-rgb),.12);color:var(--warn)}
.status-active{background:rgba(var(--ok-rgb),.15);color:var(--ok)}
.status-unsubscribed{background:rgba(var(--warn-rgb),.12);color:var(--warn)}

.pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.pager .meta{font-size:.85rem;color:var(--muted)}

/* ---------- detail drawer ---------- */
.layout-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:1.15rem;align-items:start}
@media(max-width:980px){.layout-split{grid-template-columns:1fr}}
.detail{
  background:rgba(var(--panel-rgb),.6);border:1px solid var(--line);border-radius:16px;padding:1.2rem;
  position:sticky;top:1rem;
}
.detail[hidden]{display:none}
.detail h3{font-family:var(--display);font-size:1.1rem;letter-spacing:-.02em;margin-bottom:.35rem}
.detail dl{display:grid;gap:.65rem;margin:1rem 0}
.detail dt{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.detail dd{font-size:.92rem;white-space:pre-wrap;word-break:break-word}
.detail-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}

.gate{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;color:var(--muted);padding:2rem;text-align:center}
.viewer-only[hidden],.write-only[hidden],.owner-only[hidden]{display:none !important}

@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:relative;height:auto;border-right:none;border-bottom:1px solid var(--line);
    padding-bottom:1rem;
  }
  .nav{flex-direction:row;flex-wrap:wrap;gap:.35rem}
  .nav a{padding:.5rem .7rem;font-size:.82rem}
  .nav a span.label{display:none}
  .sidebar-foot{flex-direction:row;align-items:center;justify-content:space-between}
}