/* Optee — control-plane design system.
   me2's token discipline wearing Optee's identity: gauge mark, indigo→cyan accent.
   Rules: no gradients on surfaces, no shadows/blur/glow, weights 400/500/600 only,
   0.5px tertiary borders, radius 8 small / 12 cards / 99 pills, every color a --color-* var. */

:root {
  /* neutral surfaces */
  --color-background-primary: #ffffff;
  --color-background-secondary: #f5f6f8;
  --color-background-tertiary: #ebedf1;
  --color-page: #fafbfc;
  /* text */
  --color-text-primary: #16181d;
  --color-text-secondary: #666d78;
  --color-text-tertiary: #9aa1ac;
  --color-text-inverse: #ffffff;
  /* borders */
  --color-border-primary: #d3d7de;
  --color-border-secondary: #e1e4ea;
  --color-border-tertiary: #e8eaee;
  --color-border: var(--color-border-secondary);
  /* accent — Optee cyan (settings can override --primary) */
  --primary: #0891b2;
  --primary-2: #4f46e5;
  --color-text-info: var(--primary);
  --color-border-info: var(--primary);
  --color-background-info: color-mix(in srgb, var(--primary) 10%, var(--color-background-primary));
  /* semantic */
  --color-text-success: #157f47; --color-border-success: #157f47; --color-background-success: #e8f6ee;
  --color-text-warning: #94620d; --color-border-warning: #94620d; --color-background-warning: #fbf1e0;
  --color-text-danger: #bf2f2a; --color-border-danger: #bf2f2a; --color-background-danger: #fceceb;
  --color-text-neutral: #5c6270; --color-background-neutral: #eef0f3;
  /* data viz — sequenced, colorblind-safe, same order light & dark */
  --dv-1: #0891b2; --dv-2: #4f46e5; --dv-3: #d97706; --dv-4: #15803d;
  --dv-5: #be185d; --dv-6: #0f766e; --dv-7: #7c3aed; --dv-8: #a16207;
  --dv-spend: #4f46e5; --dv-revenue: #0891b2; --dv-profit: #15803d; --dv-loss: #bf2f2a;
  /* misc */
  --color-overlay: rgba(11, 18, 32, .42);
  --color-focus-ring: color-mix(in srgb, var(--primary) 24%, transparent);
  --radius-sm: 8px; --radius-card: 12px; --radius-pill: 99px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --side-w: 246px;
  color-scheme: light;
}
[data-theme="dark"] {
  --color-background-primary: #16191f;
  --color-background-secondary: #1e222a;
  --color-background-tertiary: #272c35;
  --color-page: #101318;
  --color-text-primary: #eef1f5;
  --color-text-secondary: #99a1ad;
  --color-text-tertiary: #6a7280;
  --color-border-primary: #3c434e;
  --color-border-secondary: #282d36;
  --color-border-tertiary: #2f353f;
  --color-background-info: color-mix(in srgb, var(--primary) 24%, var(--color-background-primary));
  --color-text-info: color-mix(in srgb, var(--primary) 70%, #ffffff);
  --color-border-info: color-mix(in srgb, var(--primary) 66%, #ffffff);
  --color-text-success: #4eb37c; --color-border-success: #2d7a4d; --color-background-success: #142218;
  --color-text-warning: #cf9c33; --color-border-warning: #866221; --color-background-warning: #241d10;
  --color-text-danger: #dd7c74; --color-border-danger: #97403a; --color-background-danger: #251513;
  --color-text-neutral: #a3aab6; --color-background-neutral: #242932;
  --dv-1: #22d3ee; --dv-2: #818cf8; --dv-3: #fbbf24; --dv-4: #4ade80;
  --dv-5: #f472b6; --dv-6: #2dd4bf; --dv-7: #c084fc; --dv-8: #facc15;
  /* Re-stepped for the dark surface: the previous trio sat at OKLCH L .68-.80,
     above the .48-.67 band, so they glared against #16191f. These pass the
     lightness band, the chroma floor, adjacent-pair CVD separation and 3:1
     contrast (scripts/validate_palette.js, --mode dark --surface #16191f). */
  --dv-spend: #6d76ee; --dv-revenue: #12a3c4; --dv-profit: #1a9d54; --dv-loss: #d15a52;
  --color-overlay: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--color-page); color: var(--color-text-primary); font-family: var(--font);
  font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: var(--font); font-size: 14px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.ico { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.hidden { display: none !important; }
.muted { color: var(--color-text-secondary); }
.dim { color: var(--color-text-tertiary); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: 10px; }
.row-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
[data-privacy="on"] .money-v { filter: blur(6px); transition: filter .12s; }
[data-privacy="on"] .money-v:hover { filter: none; }
::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-primary) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--color-border-primary); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------ auth ------------------------------ */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--color-page); }
.auth-card { width: 100%; max-width: 410px; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card); padding: 2rem; }
.auth-card .mark { width: 46px; height: 46px; margin-bottom: 1.25rem; }
.auth-card h1 { font-size: 22px; margin: 0 0 5px; font-weight: 600; }
.auth-card .sub { color: var(--color-text-secondary); margin: 0 0 1.5rem; }
.auth-err { background: var(--color-background-danger); color: var(--color-text-danger); border: 0.5px solid var(--color-border-danger);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 14px; font-size: 13px; }

/* ------------------------------ shell ------------------------------ */
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
[data-side="mini"] .shell { --side-w: 66px; }
.side { background: var(--color-background-primary); border-right: 0.5px solid var(--color-border-tertiary);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 30; }
.side-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px; height: 60px;
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.side-head .mark { width: 28px; height: 28px; flex-shrink: 0; }
.side-head .name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.015em; }
.side-head .ver { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; padding: 1.5px 7px; border-radius: 99px;
  color: var(--color-text-secondary); background: color-mix(in srgb, var(--primary) 9%, transparent);
  border: .5px solid color-mix(in srgb, var(--primary) 22%, transparent); }
.side-nav { flex: 1; overflow-y: auto; padding: 10px 10px 14px; }
.nav-sec { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--color-text-tertiary); padding: 14px 10px 5px; }
.nav-i { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--color-text-secondary); font-weight: 500; cursor: pointer; transition: background .12s, color .12s; position: relative; }
.nav-i:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.nav-i.on { background: var(--color-background-info); color: var(--color-text-info); }
.nav-i .ico { opacity: .92; }
.nav-i .badge { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 99px;
  background: var(--color-background-danger); color: var(--color-text-danger); }
.nav-i .new { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px;
  border-radius: 4px; background: var(--color-text-success); color: #fff; }
.side-foot { border-top: 0.5px solid var(--color-border-tertiary); padding: 8px 10px; }
[data-side="mini"] .side-head .name, [data-side="mini"] .side-head .ver,
[data-side="mini"] .nav-i span:not(.ico), [data-side="mini"] .nav-sec span { display: none; }
[data-side="mini"] .nav-i { justify-content: center; padding: 9px 0; }
[data-side="mini"] .nav-sec { height: 1px; padding: 0; margin: 10px 8px; background: var(--color-border-tertiary); overflow: hidden; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 20px;
  border-bottom: 0.5px solid var(--color-border-tertiary); background: var(--color-background-primary);
  position: sticky; top: 0; z-index: 25; }
.topbar h1 { font-size: 17px; font-weight: 600; }
.topbar .crumb { color: var(--color-text-tertiary); font-weight: 400; }
.page { padding: 20px; flex: 1; }
.page-wide { max-width: 1560px; }

/* mobile */
.mobile-scrim { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease; }
  .side.open { transform: none; }
  .mobile-scrim.open { display: block; position: fixed; inset: 0; background: var(--color-overlay); z-index: 29; }
  .page { padding: 14px; }
  .topbar { padding: 0 12px; }
  .hide-sm { display: none !important; }
}
@media (min-width: 901px) { .only-sm { display: none !important; } }

/* ------------------------------ buttons ------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px;
  border-radius: var(--radius-sm); border: 0.5px solid var(--color-border-primary); background: var(--color-background-primary);
  color: var(--color-text-primary); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, opacity .12s; }
.btn:hover { background: var(--color-background-secondary); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-p { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-p:hover { background: color-mix(in srgb, var(--primary) 86%, #000); border-color: color-mix(in srgb, var(--primary) 86%, #000); }
.btn-d { background: var(--color-background-danger); border-color: var(--color-border-danger); color: var(--color-text-danger); }
.btn-d:hover { background: color-mix(in srgb, var(--color-background-danger) 78%, var(--color-text-danger)); }
.btn-g { border-color: transparent; background: transparent; color: var(--color-text-secondary); }
.btn-g:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }
.btn-s { height: 28px; padding: 0 9px; font-size: 12.5px; }
.btn-xs { height: 24px; padding: 0 7px; font-size: 11.5px; gap: 5px; }
.btn-ico { width: 34px; padding: 0; }
.btn-ico.btn-s { width: 28px; }
.btn-block { width: 100%; }

/* ------------------------------ forms ------------------------------ */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; min-width: 0; }
.field > label { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); }
.field .hint { font-size: 11.5px; color: var(--color-text-tertiary); }
.inp, .sel, .txa { width: 100%; height: 36px; padding: 0 11px; border-radius: var(--radius-sm);
  border: 0.5px solid var(--color-border-primary); background: var(--color-background-primary);
  color: var(--color-text-primary); transition: border-color .12s, box-shadow .12s; }
.txa { height: auto; padding: 9px 11px; resize: vertical; min-height: 78px; line-height: 1.5; }
.inp:focus, .sel:focus, .txa:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.inp::placeholder, .txa::placeholder { color: var(--color-text-tertiary); }
.sel { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; }
.inp-s, .sel-s { height: 30px; font-size: 13px; padding: 0 9px; }

/* Remote campaign picker — chips for what is picked, a checklist for what can be.
   One bordered block so the three parts read as one control, not three fields. */
.rp { border: 0.5px solid var(--color-border-primary); border-radius: var(--radius-sm);
  background: var(--color-background-primary); overflow: hidden; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 8px;
  border-bottom: 0.5px solid var(--color-border-tertiary); background: var(--color-background-secondary); }
.rp-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 4px 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500;
  background: var(--color-background-info); color: var(--color-text-info);
  border: 0.5px solid var(--color-border-info); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  padding: 0; border: 0; border-radius: var(--radius-pill); cursor: pointer; flex-shrink: 0;
  background: transparent; color: inherit; opacity: .65; }
.rp-x:hover { opacity: 1; background: color-mix(in srgb, var(--primary) 18%, transparent); }
.rp-empty { font-size: 12px; color: var(--color-text-tertiary); padding: 2px 1px; }
.rp-bar { display: flex; align-items: center; gap: 7px; padding: 7px 8px;
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.rp-bar .inp { flex: 1; }
.rp-list { max-height: 176px; overflow-y: auto; padding: 4px; }
.rp-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 6px 8px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: transparent; color: var(--color-text-primary); font-size: 13px; font-family: inherit; }
.rp-row:hover { background: var(--color-background-secondary); }
.rp-row.on { background: var(--color-background-info); color: var(--color-text-info); }
.rp-box { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 15px; height: 15px; border-radius: 5px; border: 1px solid var(--color-border-primary);
  background: var(--color-background-primary); }
.rp-row.on .rp-box { background: var(--primary); border-color: var(--primary); color: var(--color-text-inverse); }
.rp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-meta { flex-shrink: 0; font-size: 11px; color: var(--color-text-tertiary); }
.rp-row.on .rp-meta { color: inherit; opacity: .8; }
.rp-note { font-size: 12px; color: var(--color-text-tertiary); padding: 12px 9px; text-align: center; }
.rp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 9px; border-top: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-secondary); font-size: 11.5px; color: var(--color-text-tertiary); }
.rp-foot:empty { display: none; }
.rp-acts { display: flex; gap: 10px; }
.lnk { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 11.5px;
  color: var(--color-text-info); }
.lnk:hover { text-decoration: underline; }
.sel-s { padding-right: 26px; background-position: right 7px center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 620px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.chk { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 6px 0; }
.chk input { margin: 2px 0 0; accent-color: var(--primary); width: 15px; height: 15px; flex-shrink: 0; }
.chk > span { min-width: 0; }
.chk .t { font-weight: 500; display: block; }
.chk .d { font-size: 12px; color: var(--color-text-secondary); display: block; margin-top: 1px; line-height: 1.45; }
.switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .sl { position: absolute; inset: 0; border-radius: 99px; background: var(--color-border-primary); transition: background .15s; }
.switch .sl::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + .sl { background: var(--primary); }
.switch input:checked + .sl::before { transform: translateX(16px); }

/* ------------------------------ cards & tables ------------------------------ */
.card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px;
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.card-h h3 { font-size: 14.5px; font-weight: 600; }
.card-h .sub { font-size: 12px; color: var(--color-text-tertiary); font-weight: 400; }
.card-b { padding: 16px; }
.card-f { padding: 11px 16px; border-top: 0.5px solid var(--color-border-tertiary); background: var(--color-background-secondary);
  border-radius: 0 0 var(--radius-card) var(--radius-card); }
.cards { display: grid; gap: 14px; }
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-tertiary); padding: 9px 12px; border-bottom: 0.5px solid var(--color-border-tertiary);
  white-space: nowrap; background: var(--color-background-primary); position: sticky; top: 0; z-index: 2; }
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--color-text-primary); }
table.tbl td { padding: 10px 12px; border-bottom: 0.5px solid var(--color-border-tertiary); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--color-background-secondary); }
table.tbl td.r, table.tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl td.c, table.tbl th.c { text-align: center; }
.empty { text-align: center; padding: 48px 20px; color: var(--color-text-secondary); }
.empty .ico { color: var(--color-text-tertiary); margin-bottom: 12px; }
.empty h3 { font-size: 15px; margin-bottom: 5px; }
.empty p { margin: 0 auto 16px; max-width: 400px; font-size: 13px; line-height: 1.5; }

/* ------------------------------ tags & pills ------------------------------ */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 500; background: var(--color-background-neutral); color: var(--color-text-neutral);
  border: 0.5px solid transparent; white-space: nowrap; }
.tag-ok { background: var(--color-background-success); color: var(--color-text-success); }
.tag-warn { background: var(--color-background-warning); color: var(--color-text-warning); }
.tag-bad { background: var(--color-background-danger); color: var(--color-text-danger); }
.tag-info { background: var(--color-background-info); color: var(--color-text-info); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; display: inline-block; }
.dot-live { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pos { color: var(--color-text-success); }
.neg { color: var(--color-text-danger); }
.seg { display: inline-flex; background: var(--color-background-secondary); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg button { height: 28px; padding: 0 11px; border: none; background: transparent; border-radius: 6px;
  color: var(--color-text-secondary); font-weight: 500; font-size: 12.5px; cursor: pointer; }
.seg button.on { background: var(--color-background-primary); color: var(--color-text-primary); box-shadow: 0 0 0 .5px var(--color-border-tertiary); }

/* ------------------------------ KPI tiles ------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.kpi { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); padding: 13px 15px; position: relative; overflow: hidden; }
.kpi .lab { font-size: 11.5px; color: var(--color-text-tertiary); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .val { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 11.5px; color: var(--color-text-secondary); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.kpi .spark { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 30px; opacity: .4; pointer-events: none; }
/* Reserve the sparkline's strip so the value never sits on top of the line —
   the tile grows taller on narrow screens and would otherwise collide. */
.kpi:has(.spark) { padding-bottom: 32px; }
.kpi.feat { border: 2px solid var(--color-border-info); }

/* ------------------------------ charts ------------------------------ */
.chart-wrap { position: relative; }
.chart { width: 100%; display: block; overflow: visible; }
.chart .grid-l { stroke: var(--color-border-tertiary); stroke-width: .5; }
/* The zero line is structure, not a gridline: profit crossing it is the point. */
.chart .grid-l.zero { stroke: var(--color-border-primary); stroke-width: 1; }
.chart .axis-t { fill: var(--color-text-tertiary); font-size: 10px; font-family: var(--font); font-variant-numeric: tabular-nums; }
/* A value label wears text ink, never the series colour. */
.chart .axis-v { fill: var(--color-text-secondary); font-size: 10.5px; font-family: var(--font); font-weight: 500; font-variant-numeric: tabular-nums; }
.chart .bar { transition: opacity .12s; }
.chart-band { fill: transparent; }
.chart-band:hover { fill: var(--color-text-primary); fill-opacity: .04; }
.chart-cross { stroke: var(--color-border-primary); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 168px;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-primary);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12px; }
.chart-tip .t-d { font-weight: 600; margin-bottom: 6px; color: var(--color-text-primary); }
.chart-tip .t-r { display: flex; align-items: center; gap: 7px; padding: 2px 0; color: var(--color-text-secondary); }
.chart-tip .t-r span { flex: 1; }
.chart-tip .t-r b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.chart-tip .t-r b.pos { color: var(--color-text-success); }
.chart-tip .t-r b.neg { color: var(--color-text-danger); }
.chart-tip i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.chart-tip i.ln, .legend i.ln { height: 3px; border-radius: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--color-text-secondary); }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* ------------------------------ modal ------------------------------ */
.scrim { position: fixed; inset: 0; background: var(--color-overlay); z-index: 1340; display: grid; place-items: start center;
  padding: 18px; overflow-y: auto; }
.modal { background: var(--color-background-primary); border-radius: var(--radius-card); width: 100%; max-width: 560px;
  border: 0.5px solid var(--color-border-tertiary); max-height: calc(100vh - 36px); display: flex; flex-direction: column; z-index: 1350; }
.modal-lg { max-width: 880px; }
.modal-xl { max-width: 1180px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px;
  border-bottom: 0.5px solid var(--color-border-tertiary); }
.modal-h h3 { font-size: 16px; }
.modal-b { padding: 18px; overflow-y: auto; }
.modal-f { padding: 13px 18px; border-top: 0.5px solid var(--color-border-tertiary); display: flex; gap: 9px; justify-content: flex-end; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  background: var(--color-text-primary); color: var(--color-background-primary); padding: 10px 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; z-index: 1400; transition: opacity .16s, transform .16s; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------ integrations grid ------------------------------ */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 13px; }
.mod { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); padding: 15px; display: flex; flex-direction: column; gap: 11px; transition: border-color .12s; }
.mod:hover { border-color: var(--color-border-primary); }
.mod.conn { border: 2px solid var(--color-border-success); padding: 14px; }
.mod .top { display: flex; align-items: center; gap: 11px; }
.mod .top .mlogo { align-self: flex-start; }
/* Vendor marks come on every conceivable background — dark wordmarks, white
   knockouts, transparent PNGs. A fixed light chip is the only thing that keeps
   all 55 legible in both themes, so the chip does not follow the theme. */
.mlogo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 6px; background: #fff; border: .5px solid var(--color-border-tertiary);
  padding: 2px; overflow: hidden; vertical-align: middle; }
.mlogo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.mlogo-plain { background: transparent; border: none; padding: 0; }
.mlogo-txt { background: var(--color-background-secondary); color: var(--color-text-secondary);
  font-weight: 600; letter-spacing: -0.02em; border-color: var(--color-border-tertiary); }
[data-theme="dark"] .mlogo { background: #f4f5f7; border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .mlogo-txt { background: var(--color-background-tertiary); color: var(--color-text-secondary); }
/* White knockout wordmarks are invisible on the light chip, so they get a dark
   one. Declared last, and matching the theme selector's specificity, so it wins
   in both themes rather than being overridden by the rule above. */
.mlogo.mlogo-dark,
[data-theme="dark"] .mlogo.mlogo-dark { background: #10151f; border-color: rgba(255, 255, 255, .16); }
.mrow { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
/* Wordmarks cannot overlap the way circular avatars can — they'd hide each
   other's text — so the integration chain sits in a spaced row instead. */
.mstack { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.mod .logo { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--color-background-secondary); font-weight: 600; font-size: 14px; color: var(--color-text-secondary); flex-shrink: 0; }
.mod .nm { font-weight: 600; font-size: 14px; }
.mod .ty { font-size: 11.5px; color: var(--color-text-tertiary); }
.caps { display: flex; flex-wrap: wrap; gap: 4px; }
.cap { font-size: 10.5px; padding: 1.5px 6px; border-radius: 5px; background: var(--color-background-secondary); color: var(--color-text-tertiary); }
.cap.yes { background: var(--color-background-success); color: var(--color-text-success); }

/* ------------------------------ rule builder ------------------------------ */
.cond { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border-radius: var(--radius-sm);
  background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); margin-bottom: 8px; }
.cond .sel, .cond .inp { height: 32px; font-size: 13px; width: auto; }
.cond .and { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--color-text-tertiary); }
.flow { display: flex; align-items: stretch; border-radius: var(--radius-card); overflow: hidden;
  border: 0.5px solid var(--color-border-tertiary); flex-wrap: wrap; }
.flow .node { flex: 1 1 150px; padding: 12px 14px; background: var(--color-background-primary); min-width: 0; }
.flow .node + .node { border-left: 0.5px solid var(--color-border-tertiary); }
.flow .node .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-tertiary); font-weight: 600; }
.flow .node .v { font-weight: 500; margin-top: 3px; }
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: .5px; background: var(--color-border-tertiary); }
.timeline .ev { position: relative; padding: 7px 0; }
.timeline .ev::before { content: ""; position: absolute; left: -18px; top: 13px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-background-primary); border: 1.5px solid var(--color-border-primary); }
.timeline .ev.ok::before { border-color: var(--color-text-success); }
.timeline .ev.bad::before { border-color: var(--color-text-danger); }

/* ------------------------------ misc ------------------------------ */
.bar-track { height: 5px; border-radius: 99px; background: var(--color-background-tertiary); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: var(--primary); }
.skel { background: linear-gradient(90deg, var(--color-background-secondary) 25%, var(--color-background-tertiary) 37%, var(--color-background-secondary) 63%);
  background-size: 400% 100%; animation: sk 1.3s ease infinite; border-radius: var(--radius-sm); }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.spin { animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.cmdk { position: fixed; inset: 0; background: var(--color-overlay); z-index: 1360; display: flex; justify-content: center; padding-top: 12vh; }
.cmdk-box { width: 100%; max-width: 580px; height: fit-content; max-height: 68vh; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-card); display: flex; flex-direction: column; overflow: hidden; }
.cmdk-in { height: 50px; border: none; border-bottom: 0.5px solid var(--color-border-tertiary); padding: 0 16px; font-size: 15px;
  background: transparent; color: var(--color-text-primary); outline: none; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-i { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); cursor: pointer; }
.cmdk-i.on { background: var(--color-background-info); color: var(--color-text-info); }
.cmdk-i .kb { margin-left: auto; font-size: 11px; color: var(--color-text-tertiary); }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 5px; border: 0.5px solid var(--color-border-primary);
  background: var(--color-background-secondary); color: var(--color-text-secondary); }
.notif { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 0.5px solid var(--color-border-tertiary); }
.notif:last-child { border-bottom: none; }
.notif.unread { background: var(--color-background-info); }
.notif .b { min-width: 0; flex: 1; }
.notif .t { font-weight: 500; font-size: 13px; }
.notif .m { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.45; }
.notif .w { font-size: 11px; color: var(--color-text-tertiary); margin-top: 4px; }
.pop { position: absolute; right: 0; top: calc(100% + 7px); width: 372px; max-width: calc(100vw - 24px); max-height: 460px; overflow-y: auto;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); z-index: 1200; }
.pop-wrap { position: relative; }
.log-l { display: grid; grid-template-columns: 152px 92px 104px 1fr; gap: 10px; padding: 8px 12px; font-size: 12.5px;
  border-bottom: 0.5px solid var(--color-border-tertiary); align-items: start; }
@media (max-width: 760px) { .log-l { grid-template-columns: 1fr; gap: 3px; } }
.code { font-family: var(--mono); font-size: 12px; background: var(--color-background-secondary); padding: 12px;
  border-radius: var(--radius-sm); overflow-x: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.55;
  border: 0.5px solid var(--color-border-tertiary); }
.tabs { display: flex; gap: 2px; border-bottom: 0.5px solid var(--color-border-tertiary); overflow-x: auto; }
.tabs button { height: 38px; padding: 0 13px; border: none; background: transparent; color: var(--color-text-secondary);
  font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -0.5px; white-space: nowrap; }
.tabs button.on { color: var(--color-text-info); border-bottom-color: var(--color-border-info); }
.heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(11px, 1fr)); gap: 3px; }

/* ------------------------------ release notes ------------------------------ */
/* The unread marker. Same shape as the notification dot so the two read as one
   family, but in the accent rather than the danger colour — a new release is
   news, not a problem. */
.nub { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 2px var(--color-background-primary); }
.nub-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
  margin-left: 5px; vertical-align: 1px; }
.side-head .ver { cursor: pointer; transition: background .12s, border-color .12s; }
.side-head .ver:hover { background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--color-text-primary); }

.rel-wrap { display: flex; flex-direction: column; gap: 26px; }
.rel { position: relative; }
.rel + .rel { border-top: 0.5px solid var(--color-border-tertiary); padding-top: 24px; }
.rel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.rel-v { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: -0.02em;
  padding: 2px 9px; border-radius: var(--radius-pill); color: var(--color-text-info);
  background: var(--color-background-info); border: .5px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.rel-group { margin-bottom: 15px; }
.rel-group:last-child { margin-bottom: 0; }
.rel-group-h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.rel-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.rel-list li { font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); max-width: 68ch; }
.rel-list li::marker { color: var(--color-text-tertiary); }
.road-item { padding: 11px 13px; border-radius: var(--radius-sm); background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary); margin-bottom: 8px; }
.road-item:last-child { margin-bottom: 0; }
.heat i { aspect-ratio: 1; border-radius: 2px; background: var(--color-background-tertiary); display: block; }

/* ---------------------- date range picker ----------------------
   Same discipline as everything else: 0.5px tertiary borders, no shadow, no
   gradient, the accent used only for the selected range and the primary action.
   The calendar cells are square and the range is a continuous band, so a swept
   selection reads as one object rather than fourteen highlighted buttons. */
.tf-btn { gap: 7px; font-variant-numeric: tabular-nums; }
.tf-btn svg:last-child { opacity: .5; }
.rangepop { position: absolute; right: 0; top: calc(100% + 7px); z-index: 1200; display: flex;
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--radius-card); overflow: hidden; }
.rp-side { width: 158px; flex: none; padding: 8px; display: flex; flex-direction: column; gap: 1px;
  border-right: 0.5px solid var(--color-border-tertiary); background: var(--color-background-secondary); }
.rp-preset { text-align: left; padding: 7px 10px; border-radius: var(--radius-sm); border: none; cursor: pointer;
  background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 12.5px; }
.rp-preset:hover { background: var(--color-background-tertiary); color: var(--color-text-primary); }
.rp-preset.on { background: var(--color-background-info); color: var(--color-text-info); font-weight: 500; }
.rp-sep { height: 1px; background: var(--color-border-tertiary); margin: 6px 4px; }
.rp-main { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.rp-cals { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.rp-nav { position: absolute; top: -2px; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--radius-sm); color: var(--color-text-secondary); }
.rp-nav:hover:not(:disabled) { background: var(--color-background-secondary); color: var(--color-text-primary); }
.rp-nav:disabled { opacity: .3; cursor: default; }
.rp-nav-r { right: 0; }
.cal { width: 224px; }
.cal-h { text-align: center; font-size: 12.5px; padding: 3px 0 9px; color: var(--color-text-primary); }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.cal-w { font-size: 10.5px; color: var(--color-text-tertiary); text-align: center; padding-bottom: 5px; font-weight: 500; }
.cal-d { height: 30px; border: none; background: transparent; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--color-text-primary); font-variant-numeric: tabular-nums; position: relative; }
.cal-d.out { visibility: hidden; }
.cal-d:hover:not(:disabled):not(.in) { background: var(--color-background-tertiary); border-radius: var(--radius-sm); }
.cal-d.off { color: var(--color-text-tertiary); opacity: .45; cursor: default; }
/* the band */
.cal-d.in { background: var(--color-background-info); color: var(--color-text-info); }
.cal-d.edge { background: var(--primary); color: var(--color-text-inverse); font-weight: 500; }
.cal-d.start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cal-d.end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cal-d.start.end { border-radius: var(--radius-sm); }
.cal-d.today::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: currentColor; opacity: .55; }
.rp-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 10px;
  border-top: 0.5px solid var(--color-border-tertiary); }
.rp-f { display: flex; flex-direction: column; gap: 4px; }
.rp-f label { font-size: 10.5px; color: var(--color-text-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.rp-note-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 16px; }
.rp-span { font-size: 12px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.rp-hint { font-size: 11.5px; color: var(--color-text-tertiary); display: inline-flex; align-items: center; gap: 5px; }
.rp-foot-b { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 0.5px solid var(--color-border-tertiary); }
@media (max-width: 900px) {
  .rangepop { flex-direction: column; max-width: calc(100vw - 24px); }
  .rp-side { width: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 0.5px solid var(--color-border-tertiary); }
  .rp-sep { display: none; }
  .rp-cals { flex-direction: column; align-items: center; }
  .rp-nav { top: -2px; }
  .rp-clock { grid-template-columns: repeat(2, 1fr); }
}