/* AffLocker — dark, modern UI. TradeLocker-inspired palette + geometric sans.
   Design language: Stripe / Linear / Vercel — lots of whitespace, rounded cards,
   large type, one primary action at a time. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#eaeaee; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f1f1f4; --surface-3:#ebebef;
  --ink:#0e0e11; --ink-2:#3c3c44; --muted:#86868f; --faint:#a2a2ac;
  --line:#ebebef; --line-2:#e0e0e6;
  --brand:#0e0e11; --brand-2:#0e0e11; --brand-ink:#ffffff; --brand-soft:rgba(201,242,77,.13); --brand-line:rgba(201,242,77,.35);
  --blue:#3c3c44; --blue-soft:rgba(14,14,17,.14);
  --amber:#a9741a; --amber-soft:rgba(247,155,60,.14);
  --red:#e2563f; --red-soft:rgba(226,86,63,.14);
  --green:#0e0e11; --green-soft:rgba(201,242,77,.14);
  --purple:#3c3c44;
  --radius:16px; --radius-sm:12px; --radius-lg:22px;
  --shadow:0 1px 0 rgba(14,14,17,.028) inset,0 8px 30px rgba(16,18,27,.112);
  --font:'Inter','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,#ffffff 0,var(--bg) 55%) fixed,var(--bg);
  color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-2)}
::selection{background:var(--brand-soft)}
h1{font-size:33px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:8px}
h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.muted{color:var(--muted)} .small{font-size:14px} .faint{color:var(--faint)}
main{max-width:960px;margin:0 auto;padding:34px 20px 100px}
.pagesub{color:var(--muted);font-size:15px;margin-bottom:26px;max-width:660px}

/* ---- top nav (max 4 items) ---- */
nav{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);padding:12px 22px;position:sticky;top:0;z-index:40;flex-wrap:wrap}
nav .brand{font-weight:800;font-size:18px;letter-spacing:-.03em;margin-right:22px;display:flex;align-items:center;gap:8px}
nav .brand span{color:var(--brand)}
nav a{color:var(--muted);padding:8px 14px;border-radius:10px;font-weight:550;font-size:14.5px;transition:.14s}
nav a.on{color:var(--ink);background:var(--surface-2)}
nav a:hover{color:var(--ink)}
nav .spacer{flex:1}
nav .who{font-size:13px;color:var(--muted);margin-right:8px}
.dropdown{position:relative}
.dropdown>a::after{content:"▾";margin-left:5px;font-size:11px;opacity:.6}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:170px;flex-direction:column;z-index:50}
.dropdown:hover .dropdown-menu{display:flex}
.dropdown-menu a{padding:9px 12px;border-radius:9px;color:var(--ink-2)}
.dropdown-menu a:hover{background:var(--surface-2)}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px}
.pill.dry{background:var(--amber-soft);color:var(--amber)}
.pill.live{background:var(--green-soft);color:var(--green)}

/* ---- cards ---- */
.card{background:linear-gradient(180deg,rgba(14,14,17,.028),transparent),var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:18px;box-shadow:var(--shadow)}
.card.tight{padding:16px 18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-head h2{margin:0}

.banner{border-radius:14px;padding:14px 16px;margin-bottom:20px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.banner.dry{background:var(--amber-soft);color:#a9741a}
.banner.live{background:var(--green-soft);color:var(--brand-2)}
.banner.info{background:var(--blue-soft);color:#3c3c44}
.alert{background:var(--red-soft);color:#b23a26;border-radius:12px;padding:12px 15px;margin-bottom:14px;font-size:14px}
.notice{background:var(--green-soft);color:var(--brand-2);border-radius:12px;padding:12px 15px;margin-bottom:14px;font-size:14px}

/* ---- forms ---- */
label{display:block;font-size:13.5px;font-weight:550;color:var(--ink-2);margin-bottom:14px}
input,select,textarea{width:100%;background:var(--bg-2);border:1.5px solid var(--line-2);border-radius:11px;color:var(--ink);
  padding:11px 14px;font-size:14.5px;font-family:inherit;margin-top:7px;transition:border-color .14s,box-shadow .14s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea{min-height:96px;resize:vertical;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b9a' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.row2{grid-template-columns:1fr}}
.inline{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.inline label{margin-bottom:0;flex:1;min-width:180px}
.field-hint{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:400}

.switch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-weight:550;font-size:14px;color:var(--ink-2);margin-top:6px}
.switch input{display:none}
.switch .track{width:46px;height:27px;border-radius:20px;background:var(--surface-3);position:relative;transition:background .16s;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,18,27,.128);transition:transform .16s}
.switch input:checked + .track{background:var(--brand)}
.switch input:checked + .track::after{transform:translateX(19px)}
.switch.live-switch .track{width:54px;height:31px}
.switch.live-switch .track::after{width:25px;height:25px}
.switch.live-switch input:checked + .track::after{transform:translateX(23px)}
.switch.live-switch input:checked + .track{background:var(--green)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-2);border:1.5px solid var(--line-2);
  color:var(--ink);border-radius:11px;padding:11px 18px;font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:.14s}
.btn:hover{border-color:var(--faint);background:var(--surface-3)}
.btn.primary{background:linear-gradient(135deg,#17a273,#0e6b4c);border-color:#12805d;color:#fff;font-weight:700;box-shadow:0 2px 14px rgba(16,18,27,.25),inset 0 1px 0 rgba(14,14,17,.166)}
.btn.primary:hover{background:linear-gradient(135deg,#1cb883,#118059);border-color:#169a70;color:#fff;box-shadow:0 6px 26px rgba(16,18,27,.4),inset 0 1px 0 rgba(14,14,17,.189)}
.btn.danger{border-color:var(--red-soft);color:#b23a26;background:transparent}
.btn.danger:hover{background:var(--red-soft)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:var(--surface-2)}
.btn.small{padding:7px 12px;font-size:13px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:16px}
.badge.green{background:var(--green-soft);color:var(--brand-2)} .badge.amber{background:var(--amber-soft);color:#a9741a}
.badge.red{background:var(--red-soft);color:#b23a26} .badge.gray{background:var(--surface-3);color:var(--ink-2)}
.badge.brand{background:var(--brand-soft);color:var(--brand-2)} .badge.blue{background:var(--blue-soft);color:#3c3c44}

/* ---- link rows / channels ---- */
.linkrow{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--surface-2)}
.linkrow .ico{width:40px;height:40px;border-radius:11px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
.linkrow .grow{flex:1;min-width:0}
.linkrow .lname{font-weight:650}
.linkrow .lurl{font-size:12.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.linkrow .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px}
.chan-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.chan-head .title{font-size:18px;font-weight:700}
.stepnum{width:25px;height:25px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-right:10px}
.steps{list-style:none;display:flex;flex-direction:column;gap:12px;margin:8px 0 4px}
.steps li{display:flex;align-items:flex-start;font-size:14.5px;line-height:1.5}
code{background:var(--surface-3);border-radius:7px;padding:2px 7px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--brand-2)}
code.big{font-size:16px;font-weight:600;background:var(--brand-soft);color:var(--brand-2);padding:5px 13px}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:13px 10px;border-bottom:1px solid var(--line);color:var(--ink-2)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s} tbody tr:hover{background:var(--surface-2)}

/* ---- KPIs / stat cards ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.kpi .v,.kpi-v{font-size:28px;font-weight:800;letter-spacing:-.03em}
.kpi .l,.kpi-l{font-size:13px;color:var(--muted);margin-top:2px} .kpi-s{font-size:12px;color:var(--faint);margin-top:3px}

.msg-preview{white-space:pre-wrap;background:var(--surface-2);border-radius:14px;padding:15px 16px;font-size:14px;line-height:1.55;margin-top:8px;border:1px solid var(--line);color:var(--ink-2)}
details{margin-top:8px}
details summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--brand);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+ ";font-weight:700}
details[open] summary::before{content:"– "}

.login-box{max-width:400px;margin:11vh auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow)}
.login-box h1{display:flex;align-items:center;gap:8px;font-size:26px}

/* legacy status badges */
.badge.st-ok,.badge.st-verified,.badge.st-connected{background:var(--green-soft);color:var(--brand-2)}
.badge.st-at_risk,.badge.st-pending{background:var(--amber-soft);color:#a9741a}
.badge.st-violation,.badge.st-kicked,.badge.st-error{background:var(--red-soft);color:#b23a26}
.badge.st-no_ftd,.badge.st-declined,.badge.st-none{background:var(--surface-3);color:var(--ink-2)}
.who em{background:var(--surface-3);border-radius:6px;padding:1px 7px;font-style:normal;font-size:11px;margin-left:4px;color:var(--ink-2)}
.dur-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chk{display:block;position:relative;padding:13px 70px 13px 15px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;font-size:13px;font-weight:450;color:var(--muted);line-height:1.55;cursor:pointer;transition:border-color .14s}
.chk:hover{border-color:var(--faint)}
.chk strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.chk input{position:absolute;right:15px;top:50%;transform:translateY(-50%);appearance:none;-webkit-appearance:none;width:46px;height:26px;margin:0;border-radius:999px;border:1px solid var(--line-2);background-color:#ebebef;background-image:radial-gradient(circle 9px at 13px 12px,#86868f 96%,transparent 100%);background-repeat:no-repeat;background-position:0 0;transition:background-position .18s ease,background-color .18s ease,border-color .18s ease;cursor:pointer}
.chk input:checked{background-color:var(--amber);border-color:var(--amber);background-image:radial-gradient(circle 9px at 13px 12px,#fff 96%,transparent 100%);background-position:19px 0}
.chk input:focus-visible{box-shadow:0 0 0 3px var(--amber-soft)}
.h-sub{font-weight:400;font-size:15px;color:var(--muted)}
.pos{color:var(--green)} .neg{color:var(--red)}
.filters{margin-bottom:16px}
.broker-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:12.5px;overflow-x:auto;margin:8px 0;color:var(--ink-2)}
.chart-box{position:relative}

/* ============ SETUP WIZARD (one-page, progressive) ============ */
.hero{margin:6px 0 30px}
.hero h1{font-size:34px}
.hero .lead{color:var(--muted);font-size:16.5px;max-width:600px;margin-top:6px}
.progress-rail{display:flex;align-items:center;gap:8px;margin:22px 0 26px}
.progress-rail .seg{height:5px;flex:1;border-radius:4px;background:var(--surface-3)}
.progress-rail .seg.done{background:var(--brand)}
.progress-rail .seg.active{background:linear-gradient(90deg,var(--brand),var(--surface-3))}
.progress-label{font-size:13px;color:var(--muted);margin-bottom:22px;font-weight:550}

.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:16px;overflow:hidden;transition:.2s}
.step.active{border-color:var(--brand-line);box-shadow:0 0 0 1px var(--brand-line),0 18px 50px rgba(16,18,27,.128)}
.step.locked{opacity:.62}
.step.locked:hover{opacity:.85}
.step-head{display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;user-select:none}
.step-head:hover{background:rgba(14,14,17,.028)}
.step.active .step-head,.step.done .step-head{padding-bottom:20px}
.step-badge{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
  background:var(--surface-3);color:var(--muted);border:1.5px solid var(--line-2)}
.step.active .step-badge{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.step.done .step-badge{background:var(--green-soft);color:var(--brand-2);border-color:var(--brand-line)}
.step-titles{flex:1;min-width:0}
.step-titles .t{font-size:17px;font-weight:700;letter-spacing:-.02em}
.step-titles .s{font-size:13.5px;color:var(--muted);margin-top:1px}
.step-state{font-size:12.5px;font-weight:600;color:var(--muted)}
.step.done .step-state{color:var(--brand-2)}
.step-body{padding:0 24px 24px;border-top:1px solid var(--line);margin-top:2px;padding-top:20px;display:none}
.step.open .step-body{display:block}
.step .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}

/* broker picker grid */
.brokergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
.brokertile{border:1.5px solid var(--line-2);border-radius:14px;padding:16px;background:var(--bg-2);cursor:pointer;transition:.14s;text-align:center;font-weight:600}
.brokertile:hover{border-color:var(--brand);background:var(--surface-2)}
.brokertile.sel{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.brokertile .logo{width:44px;height:44px;border-radius:11px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--surface-3)}
.brokertile .sub{font-size:12px;color:var(--muted);font-weight:400;margin-top:3px}

/* detection result */
.detect{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;font-weight:600;font-size:15px}
.detect.ok{background:var(--green-soft);color:var(--brand-2)}
.detect.no{background:var(--red-soft);color:#b23a26}
.detect .dot{font-size:20px}

/* generated invite result */
.invite-out{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:6px}
.invite-out .qr{width:150px;height:150px;border-radius:14px;background:#fff;padding:10px;flex:none}
.invite-out .linkbox{flex:1;min-width:240px}
.copyfield{display:flex;gap:8px}
.copyfield input{margin-top:0;font-family:ui-monospace,Menlo,monospace;font-size:13px}

/* ============ OVERVIEW (big status cards) ============ */
.overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:22px}
.statcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.statcard::before{content:"";position:absolute;inset:0 auto auto 0;width:4px;height:100%;background:var(--c,var(--brand))}
.statcard .label{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);font-weight:550}
.statcard .dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--brand))}
.statcard .num{font-size:44px;font-weight:800;letter-spacing:-.04em;margin-top:12px;line-height:1}
.statcard .cap{font-size:13px;color:var(--faint);margin-top:6px}
.statcard.green{--c:#0e0e11} .statcard.blue{--c:#3c3c44} .statcard.amber{--c:#a9741a} .statcard.red{--c:#e2563f} .statcard.mint{--c:#0e0e11}

.bigrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
@media(max-width:640px){.bigrow{grid-template-columns:1fr}}
.moneycard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.moneycard .k{font-size:13px;color:var(--muted);font-weight:550}
.moneycard .v{font-size:38px;font-weight:800;letter-spacing:-.03em;margin-top:8px}

/* ============ MEMBERS + side drawer ============ */
.searchbar{position:relative;margin-bottom:18px}
.searchbar input{padding-left:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b9a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;margin-top:0}
.memrow{display:flex;align-items:center;gap:14px;padding:14px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.memrow:hover{background:var(--surface-2)}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:var(--surface-3);color:var(--ink-2)}
.drawer-scrim{position:fixed;inset:0;background:rgba(16,18,27,.176);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s;z-index:60}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,92vw);background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);z-index:61;padding:26px;overflow-y:auto;box-shadow:-20px 0 60px rgba(16,18,27,.16)}
.drawer.open{transform:translateX(0)}
.drawer .x{position:absolute;top:20px;right:22px;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.drawer .x:hover{color:var(--ink)}
.drawer .drow{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.drawer .drow .k{color:var(--muted)}

/* ---- OAuth button + divider (login/signup + landing) ---- */
.gbtn{background:#fff;color:#1c1c21;border-color:#e0e0e6;font-weight:650;gap:9px}
.gbtn:hover{background:#f1f1f4;border-color:#a2a2ac;color:#1c1c21}
.oauth-div{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:16px 0}
.oauth-div span{flex:none}
.oauth-div::before,.oauth-div::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- admin console (owner backend) ---- */
.admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 22px;border-bottom:1px solid var(--line);padding-bottom:14px}
.admin-tabs a{color:var(--muted);padding:8px 14px;border-radius:10px;font-weight:600;font-size:14px}
.admin-tabs a:hover{color:var(--ink);background:var(--surface-2)}
.admin-tabs a.on{color:var(--brand-ink);background:var(--brand)}
/* ticket thread */
.thread{display:flex;flex-direction:column;gap:12px;margin:8px 0 18px}
.tmsg{max-width:80%;padding:12px 15px;border-radius:14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.tmsg .meta{font-size:11.5px;color:var(--muted);margin-bottom:5px;font-weight:600}
.tmsg.user{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:5px}
.tmsg.staff{align-self:flex-end;background:var(--brand-soft);border:1px solid var(--brand-line);border-bottom-right-radius:5px}
.tlist-row{display:flex;align-items:center;gap:14px;padding:14px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.tlist-row:hover{background:var(--surface-2)}
.tlist-row .grow{flex:1;min-width:0}
.tlist-row .subj{font-weight:650}
.prio-urgent{background:var(--red-soft);color:#b23a26} .prio-high{background:var(--amber-soft);color:#a9741a}
.prio-normal{background:var(--surface-3);color:var(--ink-2)} .prio-low{background:var(--surface-3);color:var(--muted)}

/* ---- admin CRM/analytics shared rows (also used outside the drawer) ---- */
.drow{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.drow:last-child{border-bottom:none}
.drow .k{color:var(--muted)}
.urow{cursor:pointer;transition:background .12s}
.urow:hover{background:var(--surface-2)}
.note{padding:12px 0;border-bottom:1px solid var(--line)}
.note:last-child{border-bottom:none}

/* ============ nav: logo, account menu, mobile bottom bar (front-end only) ============ */
nav a.brand{padding:0;margin-right:22px;color:var(--ink);display:flex;align-items:center}
nav a.brand:hover{opacity:.85}
nav .navlinks{display:flex;gap:4px}
nav .acct{margin:0;position:relative}
nav .acct>summary{list-style:none;cursor:pointer;color:var(--muted);padding:8px 12px;border-radius:10px;
  font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;transition:.14s}
nav .acct>summary::before{content:none}
nav .acct>summary::-webkit-details-marker{display:none}
nav .acct>summary::after{content:"\25BE";font-size:11px;opacity:.6}
nav .acct>summary:hover,nav .acct[open]>summary,nav .acct>summary.on{color:var(--ink);background:var(--surface-2)}
nav .acct-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:6px;min-width:210px;display:flex;flex-direction:column;z-index:60}
nav .acct-menu a{padding:10px 12px;border-radius:9px;color:var(--ink-2);font-size:14px;white-space:nowrap;font-weight:550}
nav .acct-menu a:hover{background:var(--surface-2);color:var(--ink)}
nav .acct-menu a.danger{color:#b23a26}
nav .acct-menu a.danger:hover{background:var(--red-soft);color:#b23a26}
nav .menu-sep{height:1px;background:var(--line);margin:5px 8px}

@media(max-width:820px){
  /* nav's backdrop-filter traps position:fixed children into nav's box; drop it on mobile
     so the bottom tab bar can pin to the viewport. Keep a solid bg for the top bar. */
  nav{flex-wrap:nowrap;padding:10px 14px;gap:8px;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg-2)}
  nav a.brand{margin-right:0}
  nav .spacer{display:none}
  nav .acct{margin-left:auto}
  nav .acct>summary{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  nav .acct-menu{position:fixed;left:10px;right:10px;top:56px;min-width:0}
  nav .navlinks{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    height:auto !important;display:flex;justify-content:space-around;gap:0;
    background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--line);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:60}
  nav .navlinks a{flex:1;text-align:center;font-size:11px;line-height:1.2;padding:8px 2px;border-radius:8px}
}

/* ---- responsive tables: scroll horizontally inside their card instead of overflowing ---- */
.card>table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
@media(max-width:820px){
  .card{overflow-x:auto}
  table th,table td{white-space:nowrap}
  /* roomier, tappable bottom tabs */
  nav .navlinks a{font-size:11.5px;padding:10px 2px}
}

/* ============ premium nav v2: icons, segmented mode, refined bottom bar ============ */
nav .navlinks a{display:inline-flex;align-items:center;gap:7px}
nav .ni{display:inline-flex}
nav .ni svg{width:17px;height:17px;display:block}
nav .navlinks a.on{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
nav .navlinks a.on .ni{color:var(--brand)}
/* segmented Test/Live control */
.modeseg{display:inline-flex;align-items:center;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:3px;gap:2px}
.modeseg .seg{padding:5px 12px;border-radius:9px;font-size:12px;font-weight:700;color:var(--faint);white-space:nowrap;transition:.14s}
.modeseg .seg.on.dry{background:linear-gradient(135deg,rgba(247,155,60,.25),rgba(247,155,60,.12));color:var(--amber);box-shadow:inset 0 0 0 1px rgba(247,155,60,.35)}
.modeseg .seg.on.live{background:linear-gradient(135deg,rgba(201,242,77,.28),rgba(201,242,77,.12));color:var(--brand-2);box-shadow:inset 0 0 0 1px rgba(16,18,27,.4)}
.modeseg:hover .seg:not(.on){color:var(--muted)}

@media(max-width:820px){
  /* icon-over-label bottom tabs with depth */
  nav .navlinks{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,249,251,.99));box-shadow:0 -8px 24px rgba(16,18,27,.144)}
  nav .navlinks a{flex-direction:column;gap:3px;font-size:10px;padding:7px 2px 6px;font-weight:600;color:var(--faint)}
  nav .navlinks a .ni svg{width:21px;height:21px}
  nav .navlinks a.on{background:transparent;box-shadow:none;color:var(--ink)}
  nav .navlinks a.on .ni{color:var(--brand);filter:drop-shadow(0 0 7px rgba(16,18,27,.55))}
  nav .navlinks a.on .nl{color:var(--brand-2)}
  .modeseg .seg{padding:4px 9px;font-size:11px}
}
/* CRM tags + sort control */
.tag{display:inline-block;padding:1px 8px;margin:2px 4px 2px 0;border-radius:20px;font-size:11px;font-weight:600;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.crm-sort{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font-size:13px;cursor:pointer;max-width:180px}
.signup-more{border-top:1px solid var(--line);margin-top:14px;padding-top:6px}
.signup-more select{width:100%}