/* ============================================================================
   WA Gateway - design system
   Indigo is the brand accent. Green is reserved for one meaning only: a device
   is live. In a table full of status pills, a colour cannot say two things.
   ========================================================================== */

:root{
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#fbfcfe;
  --surface-3:#f2f4f9;
  --line:#e4e7ef;
  --line-soft:#eef1f6;

  --ink:#0b1120;
  --ink-2:#55627a;
  --ink-3:#8a94a8;

  --accent:#4f46e5;
  --accent-hover:#4338ca;
  --accent-ink:#ffffff;
  --accent-soft:#eef0fe;
  --accent-line:#d8dcfb;

  --green:#16a34a;  --green-soft:#e7f6ed;  --green-line:#bfe6cd;
  --amber:#c2740a;  --amber-soft:#fdf4e4;  --amber-line:#f0dfb7;
  --red:#dc2626;    --red-soft:#fdecec;    --red-line:#f7cfcf;
  --slate-soft:#eff1f6; --slate-line:#dfe4ec;

  --sidebar:#0b1120;
  --sidebar-2:#131c30;
  --sidebar-ink:#9aa6c0;
  --sidebar-ink-hi:#ffffff;

  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow-sm:0 1px 2px rgba(11,17,32,.05);
  --shadow:0 1px 3px rgba(11,17,32,.06), 0 8px 24px -12px rgba(11,17,32,.18);
  --shadow-lg:0 24px 60px -24px rgba(11,17,32,.35);

  --font:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

:root[data-theme="dark"]{
  --bg:#080d18;
  --surface:#101828;
  --surface-2:#0d1522;
  --surface-3:#16213a;
  --line:#1e2939;
  --line-soft:#182233;

  --ink:#e6eaf2;
  --ink-2:#98a4bc;
  --ink-3:#6b7794;

  --accent:#818cf8;
  --accent-hover:#a5b0ff;
  --accent-ink:#0b1120;
  --accent-soft:#1b2140;
  --accent-line:#2b3465;

  --green:#4ade80;  --green-soft:#12291d;  --green-line:#1d4430;
  --amber:#fbbf24;  --amber-soft:#2a2113;  --amber-line:#4a3a19;
  --red:#f87171;    --red-soft:#2c1618;    --red-line:#4d2427;
  --slate-soft:#18212f; --slate-line:#26324a;

  --sidebar:#070c16;
  --sidebar-2:#101a2c;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
  --shadow-lg:0 26px 64px -26px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font);
  font-size:14.5px;
  line-height:1.55;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04";
}

/* Numbers line up in columns. Non-negotiable in a data-dense product. */
.num,td.num,.stat-value,table td,.kpi{font-variant-numeric:tabular-nums}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .35rem;line-height:1.2;letter-spacing:-.018em;font-weight:650}
h1{font-size:1.5rem}
h2{font-size:1.075rem}
h3{font-size:.95rem}
p{margin:0 0 .8rem}
code,pre,.mono{font-family:var(--mono);font-size:.85em}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.small{font-size:.82rem}
.tiny{font-size:.75rem}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:2px}

.label{
  font-size:.688rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ==========================================================================
   Shell
   ========================================================================== */

.shell{display:flex;min-height:100vh}

.sidebar{
  width:248px;flex:0 0 248px;background:var(--sidebar);color:var(--sidebar-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
  scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#26324a;border-radius:3px}

.brand{
  display:flex;align-items:center;gap:10px;padding:20px 18px 18px;color:#fff;
  font-weight:680;font-size:1.0rem;letter-spacing:-.02em;text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand-mark{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),#7c73ff);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;
  box-shadow:0 4px 14px -4px rgba(79,70,229,.9);
}
.brand small{display:block;font-size:.66rem;font-weight:600;color:var(--sidebar-ink);letter-spacing:.06em;text-transform:uppercase}

.nav{padding:4px 10px 22px;flex:1}
.nav-sec{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#5b6884;padding:18px 10px 7px;
}
.nav a{
  display:flex;align-items:center;gap:11px;padding:8.5px 11px;border-radius:9px;
  color:var(--sidebar-ink);font-size:.885rem;font-weight:520;margin-bottom:1px;text-decoration:none;
  transition:background .12s ease,color .12s ease;
}
.nav a:hover{background:var(--sidebar-2);color:var(--sidebar-ink-hi);text-decoration:none}
.nav a.on{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 6px 18px -8px rgba(79,70,229,.95)}
.nav a .ico{flex:0 0 auto;opacity:.92}
.nav a .pill{
  margin-left:auto;background:rgba(255,255,255,.13);color:#fff;font-size:.66rem;font-weight:700;
  padding:1px 7px;border-radius:99px;
}
.nav a.on .pill{background:rgba(255,255,255,.25)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);
  padding:11px 24px;display:flex;align-items:center;gap:14px;
}
.topbar h1{font-size:1.02rem;margin:0}
.topbar .crumb{color:var(--ink-3);font-size:.8rem;font-weight:600}

.content{padding:22px 24px 40px;width:100%;flex:1}

/* Impersonation banner - deliberately loud, it is a security state */
.imp-bar{
  background:linear-gradient(90deg,#b45309,#d97706);color:#fff;padding:9px 24px;
  display:flex;align-items:center;gap:12px;font-size:.85rem;font-weight:560;
}
.imp-bar a{color:#fff;text-decoration:underline;font-weight:700}
.imp-bar .ico{flex:0 0 auto}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8.5px 15px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.875rem;font-weight:580;
  cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.25;
  transition:background .12s ease,border-color .12s ease,transform .06s ease,box-shadow .12s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--surface-3);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn .ico{width:17px;height:17px}

.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 6px 18px -8px rgba(79,70,229,.85)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3);color:var(--ink)}
.btn.danger{color:var(--red);border-color:var(--red-line);background:var(--surface)}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{padding:5px 10px;font-size:.8rem;border-radius:7px}
.btn.sm .ico{width:15px;height:15px}
.btn.block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

.icon-btn{
  width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;
}
.icon-btn:hover{background:var(--surface-3);color:var(--ink)}

/* ==========================================================================
   Cards, stats
   ========================================================================== */

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);margin-bottom:18px;
}
.card-pad{padding:18px 20px}
.card > .card-head{
  padding:14px 20px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.card > .card-head h2{margin:0}
.card > .card-head .sub{font-size:.8rem;color:var(--ink-3);margin:1px 0 0}
.card > .card-body{padding:18px 20px}
.card > .card-body.tight{padding:0}
.card-foot{padding:12px 20px;border-top:1px solid var(--line-soft);background:var(--surface-2);
  border-radius:0 0 var(--r) var(--r);font-size:.83rem;color:var(--ink-2)}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin:2px 0 20px;flex-wrap:wrap}
.page-head .sub{color:var(--ink-2);margin:3px 0 0;font-size:.9rem;max-width:70ch}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px 12px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stat-value{font-size:1.75rem;font-weight:680;letter-spacing:-.03em;line-height:1.15;margin-top:8px}
.stat-value .unit{font-size:.9rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
.stat-note{font-size:.79rem;color:var(--ink-2);margin-top:2px}
.stat .spark{position:absolute;right:0;bottom:0;width:52%;height:36px;opacity:.85}

.spark-line{fill:none;stroke:var(--accent);stroke-width:1.8;vector-effect:non-scaling-stroke}
.spark-fill{fill:var(--accent);opacity:.10}
.spark.green .spark-line{stroke:var(--green)} .spark.green .spark-fill{fill:var(--green)}

/* ==========================================================================
   Signature: cadence ribbon
   ========================================================================== */

.ribbon{width:100%;height:74px;display:block}
.ribbon .lane{fill:var(--surface-3)}
.ribbon .lane.future{fill:transparent;stroke:var(--line);stroke-dasharray:3 4;stroke-width:1}
.ribbon .tick{stroke:var(--green);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ribbon .tick.fail{stroke:var(--red)}
.ribbon .tick.queued{stroke:var(--accent);stroke-width:2;opacity:.45;stroke-dasharray:2 3}
.ribbon .nowline{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
.ribbon .axis,.barchart .axis{fill:var(--ink-3);font-size:11px;font-family:var(--font);font-weight:600}

.ribbon-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-2);margin-top:6px}
.ribbon-legend i{display:inline-block;width:3px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-2px}
.ribbon-legend .s{background:var(--green)} .ribbon-legend .f{background:var(--red)}
.ribbon-legend .q{background:var(--accent);opacity:.5}

.barchart{width:100%;height:220px;display:block}
.barchart .bar rect{fill:var(--accent);opacity:.85;transition:opacity .12s ease}
.barchart .bar:hover rect{opacity:1}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.875rem}
thead th{
  font-size:.688rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;z-index:1;
}
tbody td{padding:11px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.actions{text-align:right;white-space:nowrap}
td .sub{font-size:.78rem;color:var(--ink-3)}

.empty{padding:44px 20px;text-align:center;color:var(--ink-2)}
.empty .ico{width:34px;height:34px;color:var(--ink-3);margin-bottom:8px}
.empty h3{margin:0 0 4px}
.empty p{margin:0 auto;max-width:46ch;font-size:.875rem}

/* ==========================================================================
   Badges, avatars, meters
   ========================================================================== */

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:99px;
  font-size:.725rem;font-weight:650;letter-spacing:.01em;white-space:nowrap;border:1px solid;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge.green{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.badge.red{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
.badge.amber{background:var(--amber-soft);color:var(--amber);border-color:var(--amber-line)}
.badge.indigo{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.badge.slate{background:var(--slate-soft);color:var(--ink-2);border-color:var(--slate-line)}

.avatar{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.78rem;
  border:1px solid var(--accent-line);
}
.avatar.sm{width:28px;height:28px;border-radius:8px;font-size:.7rem}
.who{display:flex;align-items:center;gap:10px;min-width:0}

.meter{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;min-width:70px}
.meter i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.meter.green i{background:var(--green)}
.meter.amber i{background:var(--amber)}
.meter.red i{background:var(--red)}

/* ==========================================================================
   Forms
   ========================================================================== */

.field{display:block;margin-bottom:15px}
.field > .lbl{display:block;font-size:.83rem;font-weight:620;margin-bottom:5px;color:var(--ink)}
.field .hint{display:block;font-size:.78rem;color:var(--ink-3);margin-top:5px;line-height:1.45}

input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=url],input[type=search],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;font-size:.88rem;background:var(--surface);color:var(--ink);
  transition:border-color .12s ease,box-shadow .12s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-soft);
}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-3);color:var(--ink-3);cursor:not-allowed}
textarea{min-height:112px;resize:vertical;line-height:1.6}
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='%238a94a8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 18px}
.grid2 .full,.grid3 .full{grid-column:1/-1}

.check{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;cursor:pointer}
.check input{width:17px;height:17px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--accent)}
.check .lbl{font-size:.86rem;font-weight:620}
.check .hint{font-size:.78rem;color:var(--ink-3);display:block;margin-top:2px;line-height:1.45}

.seg{display:inline-flex;background:var(--surface-3);border-radius:9px;padding:3px;gap:2px}
.seg button,.seg a{
  border:0;background:transparent;padding:5.5px 13px;border-radius:7px;font:inherit;font-size:.83rem;
  font-weight:600;color:var(--ink-2);cursor:pointer;text-decoration:none;
}
.seg button.on,.seg a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

.filters{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end}
.filters .field{margin-bottom:0;min-width:150px}
.filters .field.wide{min-width:230px}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert{
  padding:11px 14px;border-radius:var(--r-sm);margin-bottom:14px;font-size:.875rem;
  border:1px solid;display:flex;gap:10px;align-items:flex-start;line-height:1.5;
}
.alert .ico{flex:0 0 auto;margin-top:1px}
.alert.ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.alert.err{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.alert.warn{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber)}
.alert.info{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.alert strong{font-weight:700}

/* ==========================================================================
   Code, keys
   ========================================================================== */

pre.code{
  background:#0b1120;color:#d9e2f0;padding:15px 17px;border-radius:var(--r-sm);overflow-x:auto;
  font-family:var(--mono);font-size:.805rem;line-height:1.62;margin:0 0 12px;border:1px solid #1c2740;
}
:root[data-theme="dark"] pre.code{background:#070c16}
.copy-wrap{position:relative}
.copy-wrap .copy{
  position:absolute;top:9px;right:9px;padding:3.5px 10px;font-size:.72rem;font-weight:650;
  background:#1c2740;border:1px solid #2b3956;color:#c4d1e4;border-radius:6px;cursor:pointer;
}
.copy-wrap .copy:hover{background:#26334d;color:#fff}

.keybox{
  display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 10px;font-family:var(--mono);font-size:.8rem;margin-bottom:9px;
}
.keybox span{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.keybox span::-webkit-scrollbar{display:none}

/* ==========================================================================
   Tabs
   ========================================================================== */

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs button,.tabs a{
  background:none;border:0;border-bottom:2px solid transparent;padding:9px 13px;margin-bottom:-1px;
  font:inherit;font-size:.87rem;font-weight:600;color:var(--ink-2);cursor:pointer;text-decoration:none;
}
.tabs button:hover,.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs button.on,.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab-body{display:none}
.tab-body.on{display:block}

/* ==========================================================================
   QR pairing
   ========================================================================== */

.qr-stage{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.qr-box{
  width:272px;height:272px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;display:grid;place-items:center;padding:12px;
}
.qr-box img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;border-radius:4px}
.qr-help{flex:1;min-width:250px}
.qr-steps{list-style:none;padding:0;margin:10px 0 0;counter-reset:s}
.qr-steps li{
  counter-increment:s;position:relative;padding:0 0 12px 34px;color:var(--ink-2);font-size:.89rem;
}
.qr-steps li::before{
  content:counter(s);position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:7px;
  background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-weight:700;
  display:grid;place-items:center;border:1px solid var(--accent-line);
}
.qr-steps li b{color:var(--ink)}
.spinner{width:26px;height:26px;border:2.5px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.qr-done{text-align:center;color:var(--green)}
.qr-done svg{width:52px;height:52px}

/* ==========================================================================
   Docs
   ========================================================================== */

.doc-layout{display:grid;grid-template-columns:214px 1fr;gap:26px;align-items:start}
.doc-nav{position:sticky;top:70px;font-size:.85rem;max-height:calc(100vh - 96px);overflow-y:auto}
.doc-nav a{display:block;padding:5px 10px;border-radius:6px;color:var(--ink-2);font-weight:520}
.doc-nav a:hover{background:var(--surface-3);color:var(--ink);text-decoration:none}
.doc-nav .t{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 5px;padding:0 10px}

.endpoint{border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;overflow:hidden;
  background:var(--surface)}
.endpoint > .h{background:var(--surface-2);padding:11px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.endpoint > .b{padding:16px}
.verb{background:var(--accent);color:#fff;font-size:.68rem;font-weight:750;padding:3px 8px;
  border-radius:5px;letter-spacing:.04em}
.verb.get{background:#0e7490}
.verb.del{background:var(--red)}
.path{font-family:var(--mono);font-size:.845rem;font-weight:600}

table.params td:first-child{font-family:var(--mono);font-size:.8rem;font-weight:600;white-space:nowrap;
  vertical-align:top;width:1%}
table.params td{padding:8px 14px 8px 0;font-size:.85rem;border-bottom:1px solid var(--line-soft)}
table.params tr:last-child td{border-bottom:0}
.req{color:var(--red);font-weight:700}

/* ==========================================================================
   Auth screens
   ========================================================================== */

.auth-body{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(79,70,229,.5), transparent 60%),
    radial-gradient(700px 480px at 95% 105%, rgba(14,116,144,.42), transparent 62%),
    #070c16;
}
.auth-card{
  width:100%;max-width:392px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-lg);
}
.auth-card.wide{max-width:760px}
.auth-head{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.auth-head .brand-mark{width:36px;height:36px;font-size:.9rem;border-radius:10px}
.auth-head h1{font-size:1.12rem;margin:0}
.auth-head p{margin:0;font-size:.8rem;color:var(--ink-3)}
.auth-foot{margin-top:16px;text-align:center;font-size:.8rem;color:var(--ink-3)}

.steps{padding-left:19px;color:var(--ink-2);font-size:.88rem}
.steps li{margin-bottom:7px}

/* ==========================================================================
   Pager, misc
   ========================================================================== */

.pager{display:flex;gap:7px;align-items:center;justify-content:center;padding:14px;flex-wrap:wrap}
.pager a,.pager .pos{
  padding:5.5px 12px;border:1px solid var(--line);border-radius:7px;font-size:.83rem;
  background:var(--surface);color:var(--ink-2);font-weight:560;
}
.pager a:hover{background:var(--surface-3);color:var(--ink);text-decoration:none}

/* ==========================================================================
   Team inbox
   ========================================================================== */

.inbox{
  display:grid;grid-template-columns:320px 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;height:calc(100vh - 190px);min-height:520px;
}

.inbox-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;
  min-height:0;background:var(--surface-2)}
.inbox-search{padding:12px 12px 8px}
.inbox-search input{font-size:.85rem}

.inbox-tabs{display:flex;gap:2px;padding:0 10px 8px;flex-wrap:wrap}
.inbox-tabs a{
  padding:5px 10px;border-radius:7px;font-size:.8rem;font-weight:600;color:var(--ink-2);
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
}
.inbox-tabs a:hover{background:var(--surface-3);text-decoration:none}
.inbox-tabs a.on{background:var(--accent);color:#fff}
.inbox-tabs a.on .badge{background:rgba(255,255,255,.2);color:#fff;border-color:transparent}

.inbox-threads{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}

.thread{
  display:flex;gap:10px;padding:11px 13px;border-top:1px solid var(--line-soft);
  text-decoration:none;color:inherit;
}
.thread:hover{background:var(--surface-3);text-decoration:none}
.thread.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.thread-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.thread-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.thread-top b{font-size:.875rem;font-weight:620}
.thread-time{font-size:.7rem;color:var(--ink-3);white-space:nowrap}
.thread-last{font-size:.79rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.thread-meta .badge{font-size:.65rem;padding:1px 6px}

.inbox-thread{display:flex;flex-direction:column;min-width:0;min-height:0}

.thread-head{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap;
}
.thread-head b{font-size:.93rem}
.thread-head select{width:auto;min-width:130px;font-size:.82rem;padding:5px 26px 5px 9px}

.thread-scroll{flex:1;min-height:0;overflow-y:auto;padding:18px 16px;background:var(--bg);
  display:flex;flex-direction:column;gap:8px;scrollbar-width:thin}

.thread-day{text-align:center;margin:8px 0}
.thread-day span{
  background:var(--surface-3);color:var(--ink-3);font-size:.7rem;font-weight:650;
  padding:3px 11px;border-radius:99px;
}

.bubble{
  max-width:min(70%,560px);padding:8px 12px;border-radius:12px;position:relative;
  background:var(--surface);border:1px solid var(--line);align-self:flex-start;
  box-shadow:var(--shadow-sm);
}
.bubble.out{align-self:flex-end;background:var(--accent-soft);border-color:var(--accent-line)}
.bubble.failed{background:var(--red-soft);border-color:var(--red-line)}
.bubble.note{align-self:center;background:var(--amber-soft);border-color:var(--amber-line);max-width:min(80%,620px)}
.bubble-text{font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.bubble-meta{font-size:.68rem;color:var(--ink-3);margin-top:3px;text-align:right}
.bubble.in .bubble-meta,.bubble.note .bubble-meta{text-align:left}
.bubble-media{font-size:.78rem;display:flex;align-items:center;gap:5px;margin-bottom:3px}

.thread-compose{border-top:1px solid var(--line);padding:12px 16px;background:var(--surface);
  flex:0 0 auto}
.compose-row{display:flex;gap:8px;align-items:flex-end}
.compose-row textarea{min-height:40px;max-height:140px;resize:vertical;font-size:.88rem}
.compose-row select{width:auto;min-width:120px;flex:0 0 auto}
.note-row{margin-top:8px}
.note-row input{font-size:.82rem}

@media(max-width:860px){
  .inbox{grid-template-columns:1fr;height:auto}
  .inbox-list{border-right:0;border-bottom:1px solid var(--line);max-height:300px}
  .inbox-thread{min-height:460px}
  .bubble{max-width:88%}
}

/* ==========================================================================
   Setup wizard illustrations
   Drawn, not screenshotted — Meta redesigns these screens, and a stale
   screenshot that still looks authentic is worse than an honest diagram.
   ========================================================================== */

.art{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2)}
img.art{object-fit:contain}

.art-bg{fill:var(--surface)}
.art-bar{fill:var(--surface-3)}
.art-dot{fill:var(--ink-3);opacity:.45}
.art-url{fill:var(--surface)}
.art-urltext{fill:var(--ink-3);font:11px var(--mono)}
.art-h{fill:var(--ink);font:600 16px var(--font);letter-spacing:-.01em}
.art-h2{fill:var(--ink);font:600 12.5px var(--font)}
.art-p{fill:var(--ink-2);font:11.5px var(--font)}
.art-label{fill:var(--ink-3);font:700 9.5px var(--font);letter-spacing:.06em;text-transform:uppercase}
.art-value{fill:var(--ink);font:11px var(--mono)}
.art-mono{fill:var(--ink);font:11.5px var(--mono)}
.art-side{fill:var(--ink-2);font:11.5px var(--font)}
.art-side.on{fill:var(--accent);font-weight:650}
.art-panel,.art-card{fill:var(--surface-2);stroke:var(--line);stroke-width:1}
.art-card.sel{stroke:var(--accent);stroke-width:1.8;fill:var(--accent-soft)}
.art-input{fill:var(--surface);stroke:var(--line);stroke-width:1}
.art-note{fill:var(--accent-soft);stroke:var(--accent-line);stroke-width:1}
.art-note.warn{fill:var(--amber-soft);stroke:var(--amber-line)}
.art-btn{fill:var(--surface);stroke:var(--line);stroke-width:1}
.art-btn.primary{fill:var(--accent);stroke:var(--accent)}
.art-btntext{fill:var(--ink);font:600 11.5px var(--font)}
.art-btntext.on{fill:#fff}
.art-chip{fill:var(--slate-soft);stroke:var(--slate-line);stroke-width:1}
.art-chip.ok{fill:var(--green-soft);stroke:var(--green-line)}
.art-chiptext{fill:var(--ink-2);font:600 10.5px var(--font)}
.art-chiptext.ok{fill:var(--green)}
.art-check{fill:var(--surface);stroke:var(--line);stroke-width:1.4}
.art-check.on{fill:var(--accent);stroke:var(--accent)}

.art-pin{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.art-pinnum{fill:#fff;font:700 11px var(--font)}
.art-pulse{fill:var(--accent);opacity:.3}
.art-marker .art-pulse{animation:artpulse 2.4s ease-out infinite}
@keyframes artpulse{0%{r:11;opacity:.45}70%{r:21;opacity:0}100%{r:21;opacity:0}}

.art-arrow{fill:var(--ink);stroke:var(--surface);stroke-width:1.2}
.art-click{fill:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .art-cursor{display:none}
  .art-marker .art-pulse{animation:none;opacity:.3}
}

/* ---------- inline troubleshooting ---------- */
.trouble{
  margin-top:12px;border:1px solid var(--amber-line);background:var(--amber-soft);
  border-radius:var(--r-sm);
}
.trouble > summary{
  cursor:pointer;padding:10px 14px;font-size:.85rem;font-weight:620;color:var(--amber);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.trouble > summary::-webkit-details-marker{display:none}
.trouble > summary::before{content:"?";flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background:var(--amber);color:var(--surface);font-size:.72rem;font-weight:800;
  display:grid;place-items:center}
.trouble[open] > summary{border-bottom:1px solid var(--amber-line)}
.trouble-body{padding:12px 16px 14px;font-size:.85rem;color:var(--ink-2);line-height:1.6}
.trouble-body p{margin:0 0 8px}
.trouble-body ol{margin:0 0 8px;padding-left:20px}
.trouble-body li{margin-bottom:6px}
.trouble-body b{color:var(--ink)}

/* ---------- wizard layout ---------- */
.wiz{counter-reset:wz}
.wiz-step{
  display:grid;grid-template-columns:38px 1fr;gap:16px;
  padding:22px 0;border-top:1px solid var(--line-soft);
}
.wiz-step:first-child{border-top:0;padding-top:4px}
.wiz-num{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
  font-weight:700;font-size:.82rem;
}
.wiz-step.done .wiz-num{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.wiz-step.now .wiz-num{background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft)}
.wiz-body h3{margin:4px 0 6px;font-size:1rem}
.wiz-body > p{color:var(--ink-2);font-size:.89rem;margin:0 0 10px;max-width:70ch}
.wiz-art{margin:12px 0 4px;max-width:640px}
.wiz-cap{font-size:.76rem;color:var(--ink-3);margin:6px 0 0}
.wiz-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;align-items:center}

.wiz-state{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:650}
.wiz-state.ok{color:var(--green)}
.wiz-state.todo{color:var(--ink-3)}

@media(max-width:600px){
  .wiz-step{grid-template-columns:1fr;gap:8px}
  .wiz-num{margin-bottom:2px}
}

.app-foot{
  margin-top:auto;padding:16px 24px 22px;border-top:1px solid var(--line);
  background:var(--surface);color:var(--ink-3);font-size:.79rem;
  display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.app-foot b{color:var(--ink-2);font-weight:640}
.app-foot .sep{opacity:.5}

.toast-host{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:9px}
.toast{
  background:var(--ink);color:var(--bg);padding:10px 15px;border-radius:9px;font-size:.85rem;
  font-weight:560;box-shadow:var(--shadow-lg);animation:rise .22s ease;
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

.menu-btn{display:none}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:1000px){
  .doc-layout{grid-template-columns:1fr}
  .doc-nav{display:none}
}
@media(max-width:820px){
  .sidebar{
    position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:none}
  .menu-btn{display:grid}
  .content{padding:16px 15px 48px}
  .topbar{padding:10px 15px}
  .grid2{grid-template-columns:1fr}
  .qr-box{width:100%;max-width:290px;height:auto;aspect-ratio:1}
  .scrim{position:fixed;inset:0;background:rgba(4,8,16,.5);z-index:55}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

@media print{
  .sidebar,.topbar,.btn,.pager{display:none}
  .content{padding:0;max-width:none}
  .card{break-inside:avoid;box-shadow:none}
}

/* ==========================================================================
   Analytics

   The delivery stages are one hue at three strengths, not four colours: sent
   is the pale base, delivered the mid tint, read the full accent. Green is
   deliberately absent - in this product green means "device connected" and
   nothing else, so a green bar here would read as a connection state.
   ========================================================================== */

.spark.soft .spark-line{stroke:var(--accent);opacity:.5}
.spark.soft .spark-fill{fill:var(--accent);opacity:.07}
.spark.red  .spark-line{stroke:var(--red)}
.spark.red  .spark-fill{fill:var(--red)}

.filterbar{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;margin-bottom:18px;
}
.filterbar label{display:flex;flex-direction:column;gap:5px;min-width:170px}
.filterbar select{margin:0}
.filter-note{margin-left:auto;font-size:.8rem;color:var(--ink-3);padding-bottom:9px}

.grid-2up{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-2up > .card{margin-bottom:0}

/* ------------------------------------------------------------------ funnel */

.funnel{display:flex;flex-direction:column;gap:11px}
.funnel-row{display:grid;grid-template-columns:86px 1fr 62px 54px;align-items:center;gap:12px}
.funnel-label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.funnel-track{height:22px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.funnel-bar{height:100%;border-radius:5px;background:var(--accent);transition:width .4s ease}
.funnel-bar.base{background:var(--accent);opacity:.22}
.funnel-bar.soft{background:var(--accent);opacity:.52}
.funnel-bar.amber{background:var(--amber)}
.funnel-bar.red{background:var(--red)}
.funnel-n{text-align:right;font-size:.875rem;font-weight:650;font-variant-numeric:tabular-nums}
.funnel-pct{text-align:right;font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- stacked day chart */

.stackchart{width:100%;height:240px;display:block}
.stackchart .seg.read{fill:var(--accent)}
.stackchart .seg.delivered{fill:var(--accent);opacity:.5}
.stackchart .seg.unacked{fill:var(--ink-3);opacity:.3}
.stackchart .seg.fail{fill:var(--red)}
.stackchart .seg.none{fill:var(--line)}
.stackchart .col:hover .seg{opacity:1;filter:brightness(1.08)}
.stackchart .axis{fill:var(--ink-3);font:500 11px var(--font)}

.stack-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:.78rem;color:var(--ink-2)}
.stack-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.stack-legend i.read{background:var(--accent)}
.stack-legend i.delivered{background:var(--accent);opacity:.5}
.stack-legend i.unacked{background:var(--ink-3);opacity:.3}
.stack-legend i.fail{background:var(--red)}

/* ----------------------------------------------------------- hour of day */

.heat{display:grid;grid-template-columns:repeat(24,1fr);gap:4px}
.heat-cell{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default}
.heat-box{
  width:100%;aspect-ratio:1;border-radius:4px;border:1px solid var(--line);
  background:var(--accent);opacity:var(--v,0);min-height:22px;
}
/* An hour with nothing in it still needs an outline, or the grid loses its shape. */
.heat-cell .heat-box{box-shadow:inset 0 0 0 1px var(--line-soft)}
.heat-hour{font-size:.65rem;color:var(--ink-3);font-variant-numeric:tabular-nums;height:1em}
.heat-cell:hover .heat-box{outline:2px solid var(--accent-line);outline-offset:1px}

/* ------------------------------------------------------------- latency */

.latency{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.latency > div{
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:13px 14px;
}
.latency b{display:block;margin-top:4px;font-size:1.15rem;font-variant-numeric:tabular-nums}

.bad{color:var(--red);font-weight:650}

@media (max-width:900px){
  .grid-2up{grid-template-columns:1fr}
  .latency{grid-template-columns:1fr}
  .heat{grid-template-columns:repeat(12,1fr)}
  .funnel-row{grid-template-columns:72px 1fr 52px 46px;gap:8px}
  .filter-note{margin-left:0;width:100%;padding-bottom:0}
}

/* The approved copy, shown as it will arrive. Meta owns this text, so it is
   presented as a quote rather than an editable field. */
.tpl-preview{
  margin-top:10px;padding:12px 14px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);
  font-size:.875rem;line-height:1.55;white-space:pre-wrap;color:var(--ink-2);
}

/* ==========================================================================
   Template header media picker
   ========================================================================== */

.mediafield{display:block}
.mediafield .lbl{display:block;margin-bottom:7px}
.mediafield input[type=file],
.mediafield input[type=url]{margin-top:8px}

.media-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:10px;margin-bottom:10px;
}
.media-pick{display:block;cursor:pointer;position:relative}
.media-pick input{position:absolute;opacity:0;width:0;height:0}
.media-thumb{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  aspect-ratio:16/9;border:1.5px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);transition:border-color .15s,box-shadow .15s;
}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.media-doc{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:.7rem;font-weight:700;color:var(--ink-3)}
.media-pick input:checked + .media-thumb{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.media-pick input:focus-visible + .media-thumb{outline:2px solid var(--accent);outline-offset:2px}
.media-name{display:block;margin-top:5px;font-size:.75rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-meta{display:block;font-size:.68rem;color:var(--ink-3)}

.media-pick-new{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:.82rem;font-weight:600;color:var(--ink-2);margin-top:8px;
}
.media-pick-new input{accent-color:var(--accent)}
.media-pick-new span{display:flex;align-items:center;gap:6px}

.media-empty{
  padding:18px;text-align:center;border:1.5px dashed var(--line);
  border-radius:var(--r);color:var(--ink-3);font-size:.82rem;
}

.media-card{display:flex;flex-direction:column}
.media-card .media-thumb{cursor:default}
.media-actions{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.media-actions .btn{padding:3px 9px;font-size:.72rem}

/* Campaign audience source */
.src-pick{display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}
.src-pick label{display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:.86rem;font-weight:600;color:var(--ink-2)}
.src-pick input{accent-color:var(--accent)}
.src-pick label:has(input:checked){color:var(--accent)}

/* ==========================================================================
   Inbox: labels, follow-up, attachments
   ========================================================================== */

.inbox-labels{display:flex;gap:5px;flex-wrap:wrap;padding:0 10px 9px}

.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:.72rem;font-weight:650;text-decoration:none;
  background:var(--slate-soft);color:var(--ink-2);border:1px solid var(--slate-line);
}
a.chip:hover{background:var(--surface-3);text-decoration:none}
.chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.chip-n{opacity:.6;font-weight:600}
.chip button{
  background:none;border:0;padding:0 0 0 2px;margin:0;cursor:pointer;
  color:inherit;font-size:.95rem;line-height:1;opacity:.6;
}
.chip button:hover{opacity:1}

.thread-tools{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 16px;border-bottom:1px solid var(--line);background:var(--surface);
}
.thread-tools .labels{display:flex;align-items:center;gap:5px;flex-wrap:wrap;flex:1;min-width:0}
.chip-form{display:inline-flex;margin:0}
.label-input{
  width:98px;padding:3px 9px;font-size:.72rem;border-radius:99px;margin:0;
  border:1px dashed var(--line);background:transparent;
}
.label-input:focus{width:160px;border-style:solid;border-color:var(--accent)}

.followup{display:flex;align-items:center;gap:6px;margin:0;flex:0 0 auto}
.followup select{width:auto;min-width:118px;font-size:.78rem;padding:4px 24px 4px 9px}
.followup .badge{gap:4px}

/* the paperclip sits in the composer row, same height as the send button */
.attach{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
}
.attach:hover{border-color:var(--accent);color:var(--accent)}
.attach input{display:none}
.attach.has-file{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

.attach-name{
  font-size:.74rem;color:var(--ink-2);padding:5px 10px;margin-bottom:6px;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:8px;
  display:none;align-items:center;gap:7px;
}
.attach-name button{background:none;border:0;cursor:pointer;color:inherit;font-size:1rem;line-height:1}

@media(max-width:860px){
  .thread-tools{padding:8px 12px}
  .followup{width:100%}
}

/* Business profile */
.profile-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.profile-row .grow{flex:1;min-width:240px;margin:0}
.profile-pic{
  width:104px;height:104px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.profile-pic img{width:100%;height:100%;object-fit:cover}
.profile-empty{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:.68rem;color:var(--ink-3);text-align:center}