:root {
  --bg: #0a0c10; --bg-deep: #06080c;
  --surface-1: #11141b; --surface-2: #161a23; --surface-3: #1d2230; --surface-hi: #232a3b;
  --border: #1f2533; --border-soft: #161b26; --border-hi: #2c3344; --border-focus: #4f46e5;
  --text: #eef0f6; --text-muted: #9aa3b8; --text-dim: #6b7388; --text-ghost: #4a5168;
  --indigo: #6366f1; --indigo-hi: #818cf8; --indigo-dim: #4338ca;
  --indigo-wash: rgba(99, 102, 241, 0.10); --indigo-glow: rgba(99, 102, 241, 0.25);
  --green: #22c55e; --green-hi: #4ade80; --green-dim: #166534; --green-wash: rgba(34, 197, 94, 0.10);
  --amber: #f59e0b; --amber-hi: #fbbf24; --amber-dim: #b45309; --amber-wash: rgba(245, 158, 11, 0.10);
  --red: #ef4444; --red-hi: #f87171; --red-dim: #991b1b; --red-wash: rgba(239, 68, 68, 0.10);
  --cyan: #06b6d4; --cyan-wash: rgba(6, 182, 212, 0.10);
  --purple: #a855f7; --purple-hi: #c084fc; --purple-dim: #7e22ce; --purple-wash: rgba(168, 85, 247, 0.10);
  --cf-orange: #f6821f;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;
  --t: 120ms; --t-slow: 200ms;
  --sidebar-w: 220px; --topbar-h: 52px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-ui); background: var(--bg); color: var(--text);
  font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; letter-spacing: inherit; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } }

/* SHELL */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}
.sidebar { grid-area: sidebar; background: var(--bg-deep); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.sb-brand { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); height: var(--topbar-h); }
.sb-brand-mark { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, var(--indigo), var(--indigo-dim)); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--indigo-dim), 0 1px 4px var(--indigo-glow); }
.sb-brand-mark svg { width: 13px; height: 13px; color: var(--bg-deep); }
.sb-brand-name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.sb-brand-tag { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-sm); }
.sb-section { padding: 14px 8px 4px; }
.sb-section-label { padding: 0 10px 6px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-ghost); }
.sb-link { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: background var(--t), color var(--t); position: relative; margin: 1px 0; }
.sb-link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
.sb-link:hover { color: var(--text); background: var(--surface-2); }
.sb-link.active { color: var(--text); background: var(--indigo-wash); }
.sb-link.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--indigo); border-radius: 0 2px 2px 0; }
.sb-link .badge { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; background: var(--red); color: white; letter-spacing: 0.04em; }
.sb-link .badge.muted { background: var(--surface-hi); color: var(--text-muted); }
.sb-foot { margin-top: auto; padding: 8px; border-top: 1px solid var(--border-soft); }
.sb-user { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; }
.sb-user:hover { background: var(--surface-2); }
.sb-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--indigo), var(--indigo-dim)); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: white; }
.sb-user-meta { min-width: 0; flex: 1; }
.sb-user-name { font-size: 12px; font-weight: 600; }
.sb-user-role { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }

.topbar { grid-area: topbar; background: var(--bg-deep); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 30; }
.tb-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
.tb-crumbs .here { color: var(--text); font-weight: 600; }
.tb-search { margin-left: 24px; flex: 1; max-width: 480px; position: relative; }
.tb-search input { width: 100%; height: 32px; padding: 0 12px 0 32px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); }
.tb-search input::placeholder { color: var(--text-dim); }
.tb-search input:focus { outline: none; border-color: var(--border-focus); background: var(--surface-2); }
.tb-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-dim); pointer-events: none; }
.tb-search-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 3px; pointer-events: none; }
.tb-search-kbd kbd { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tb-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 100px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
.tb-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s ease-in-out infinite; }
/* Disconnected variant: same pill shape, red palette. Keeps the dot element
   in place so checkConnection() does not rebuild the DOM on each toggle. */
.tb-status[data-state="disconnected"] { background: var(--red-wash); color: var(--red-hi); border-color: var(--red-dim); }
.tb-status[data-state="disconnected"] .dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
.tb-icon-btn { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--text-muted); position: relative; transition: background var(--t), color var(--t); }
.tb-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.tb-icon-btn svg { width: 16px; height: 16px; }
.tb-icon-btn .dot-notif { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--bg-deep); }

/* margin-left:0 explicitly resets the legacy styles.css `.main` rule which
   uses a flex-row sidebar+main layout. Without this override the grid main
   gets an extra 240px left margin and shrinks to ~980px instead of filling
   the 1fr grid column. */
.main { grid-area: main; padding: 16px 24px 40px; max-width: 1600px; margin-left: 0; }

/* Page header */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.page-title-block h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.page-title-block .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-title-block .sub b { color: var(--text); font-weight: 600; }

.range-picker { display: flex; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; font-family: var(--font-mono); font-size: 11px; }
.range-picker button { padding: 4px 10px; border-radius: var(--r-sm); color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; transition: background var(--t), color var(--t); }
.range-picker button:hover { color: var(--text); }
.range-picker button.active { background: var(--surface-3); color: var(--text); }

/* Data source pill (small mono pill noting endpoint) */
.data-source { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); letter-spacing: 0.04em; padding: 1px 6px; background: var(--surface-2); border-radius: var(--r-sm); border: 1px solid var(--border-soft); display: inline-flex; align-items: center; gap: 4px; }
.data-source svg { width: 10px; height: 10px; }

/* "Today" overnight strip */
.overnight {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(90deg, var(--indigo-wash) 0%, transparent 100%);
  border: 1px solid var(--indigo-dim);
  border-radius: var(--r-lg);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.overnight-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--indigo-hi); padding-right: 12px; border-right: 1px solid var(--indigo-dim); }
.overnight-label svg { width: 12px; height: 12px; }
.overnight-items { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; }
.overnight-item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; cursor: pointer; transition: opacity var(--t); }
.overnight-item:hover { opacity: 0.8; }
.overnight-num { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-size: 14px; letter-spacing: -0.01em; }
.overnight-num.zero { color: var(--text-dim); }
.overnight-name { color: var(--text-muted); font-size: 11px; }
.overnight-tz { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }

/* HERO */
.hero { display: grid; grid-template-columns: 280px 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } }

.health-card { background: linear-gradient(135deg, var(--green-wash) 0%, var(--surface-1) 70%); border: 1px solid var(--green-dim); border-radius: var(--r-xl); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.health-card::after { content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, var(--green-wash) 0%, transparent 70%); pointer-events: none; }
.health-pip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-hi); }
.health-pip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s ease-in-out infinite; }
.health-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.health-sub { font-size: 11px; color: var(--text-muted); line-height: 1.5; }
.health-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: auto; letter-spacing: 0.04em; display: flex; gap: 12px; }
.health-meta span b { color: var(--text-muted); font-weight: 600; }

.prime-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px) { .prime-metrics { grid-template-columns: repeat(2, 1fr); } }

.metric { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; position: relative; cursor: pointer; transition: border-color var(--t), transform var(--t); }
.metric:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.metric-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.metric-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.metric-icon { width: 14px; height: 14px; color: var(--text-ghost); }
.metric-value { font-family: var(--font-mono); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
.metric-value.indigo { color: var(--indigo-hi); }
.metric-value.green { color: var(--green-hi); }
.metric-value.amber { color: var(--amber-hi); }
.metric-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; }
.metric-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 6px; border-radius: var(--r-sm); }
.metric-delta.up { color: var(--green-hi); background: var(--green-wash); }
.metric-delta.down { color: var(--red-hi); background: var(--red-wash); }
.metric-delta.neutral { color: var(--text-muted); background: var(--surface-2); }
.metric-context { color: var(--text-dim); font-size: 11px; }
.metric-spark { position: absolute; bottom: 12px; right: 14px; width: 60px; height: 22px; opacity: 0.7; pointer-events: none; }

/* Secondary metrics */
.sec-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 980px) { .sec-metrics { grid-template-columns: repeat(2, 1fr); } }

.sec-metric { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; cursor: pointer; transition: border-color var(--t); position: relative; }
.sec-metric:hover { border-color: var(--border-hi); }

.sec-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.sec-label svg { width: 11px; height: 11px; }
.sec-value { font-family: var(--font-mono); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1; margin-top: 6px; }
.sec-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sec-meta-item { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.sec-meta-item b { color: var(--text-muted); font-weight: 600; }

.ai-tier-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--surface-2); margin-top: 8px; }
.ai-tier-seg.free { background: var(--surface-hi); }
.ai-tier-seg.pro { background: var(--indigo); }
.ai-tier-seg.premium { background: var(--amber); }
.ai-tier-legend { display: flex; gap: 10px; margin-top: 6px; font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.04em; }
.ai-tier-leg-item { display: inline-flex; align-items: center; gap: 4px; }
.ai-tier-leg-dot { width: 6px; height: 6px; border-radius: 1px; }

/* Layout rows */
.row { display: grid; gap: 12px; margin-bottom: 14px; }
.row.two { grid-template-columns: 2fr 1fr; }
.row.equal { grid-template-columns: 1fr 1fr; }
.row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .row.two, .row.equal, .row.three { grid-template-columns: 1fr; } }

/* In-content kit components (cards, etc.) are scoped under [data-kit="redesign"]
   so they only apply to pages whose render function has migrated to the new
   reference markup (wrapper: <div data-kit="redesign">...</div>). Legacy
   pages keep their styles.css .card rules untouched. Same scoping rule is
   applied to .funnel-bar* below. */
[data-kit="redesign"] .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
[data-kit="redesign"] .card-head { padding: 13px 18px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-kit="redesign"] .card-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
[data-kit="redesign"] .card-title-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; font-weight: 500; }
[data-kit="redesign"] .card-toolbar { display: flex; gap: 4px; align-items: center; }
[data-kit="redesign"] .card-body { padding: 16px 18px; }
[data-kit="redesign"] .card-body.tight { padding: 12px 14px; }

.chart-wrap { height: 220px; margin-top: 8px; position: relative; }
.chart-legend { display: flex; gap: 16px; padding: 0 0 10px 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); cursor: pointer; user-select: none; }
.chart-legend-swatch { width: 8px; height: 8px; border-radius: 2px; }

/* Payment health strip */
.ph-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ph-cell { background: var(--surface-1); padding: 12px 16px; cursor: pointer; transition: background var(--t); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.ph-cell:hover { background: var(--surface-2); }
.ph-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; }
.ph-icon svg { width: 16px; height: 16px; }
.ph-icon.fail { background: var(--red-wash); color: var(--red-hi); }
.ph-icon.refund { background: var(--amber-wash); color: var(--amber-hi); }
.ph-icon.cancel { background: var(--surface-3); color: var(--text-muted); }
.ph-cell-text { display: flex; flex-direction: column; gap: 2px; }
.ph-name { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.ph-value { display: flex; align-items: baseline; gap: 6px; }
.ph-num { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.ph-num.zero { color: var(--green-hi); }
.ph-num.warn { color: var(--amber-hi); }
.ph-num.bad { color: var(--red-hi); }
.ph-period { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }

/* Funnel */
.funnel { display: flex; flex-direction: column; gap: 6px; }
.funnel-stage { position: relative; cursor: pointer; transition: transform var(--t); }
.funnel-stage:hover { transform: translateX(2px); }
[data-kit="redesign"] .funnel-bar-wrap { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 12px; padding: 6px 0; }
.funnel-stage-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
[data-kit="redesign"] .funnel-bar { height: 22px; border-radius: var(--r-sm); background: var(--surface-2); position: relative; overflow: hidden; }
[data-kit="redesign"] .funnel-bar-fill { height: 100%; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--indigo) 0%, var(--indigo-hi) 100%); }
[data-kit="redesign"] .funnel-bar-fill.green { background: linear-gradient(90deg, var(--green-dim) 0%, var(--green) 100%); }
[data-kit="redesign"] .funnel-bar-fill.amber { background: linear-gradient(90deg, var(--amber-dim) 0%, var(--amber) 100%); }
.funnel-stat { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.funnel-stat .pct { color: var(--text-dim); font-weight: 500; margin-left: 6px; }
.funnel-arrow { height: 12px; margin-left: 105px; position: relative; display: flex; align-items: center; }
.funnel-arrow-text { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-dim); }
.funnel-arrow-text.drop { color: var(--red-hi); }

/* Tier + Sync */
.tier-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 4px 0 12px; background: var(--surface-2); }
.tier-seg.free { background: var(--surface-hi); }
.tier-seg.pro { background: var(--indigo); }
.tier-seg.premium { background: var(--amber); }
.tier-rows { display: flex; flex-direction: column; gap: 6px; }
.tier-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12px; cursor: pointer; padding: 3px 0; transition: color var(--t); }
.tier-row:hover { color: var(--indigo-hi); }
.tier-dot { width: 8px; height: 8px; border-radius: 2px; }
.tier-dot.free { background: var(--surface-hi); }
.tier-dot.pro { background: var(--indigo); }
.tier-dot.premium { background: var(--amber); }
.tier-name { color: var(--text-muted); font-weight: 500; }
.tier-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }

.sync-rows { display: flex; flex-direction: column; gap: 6px; }
.sync-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 12px; padding: 3px 0; }
.sync-bucket { color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.sync-bucket svg { width: 11px; height: 11px; opacity: 0.7; }
.sync-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.sync-count.recent { color: var(--green-hi); }
.sync-count.stale { color: var(--amber-hi); }
.sync-count.cold { color: var(--text-dim); }

/* Activity feed */
.feed { display: flex; flex-direction: column; }
.feed-day-label { padding: 10px 18px 5px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); background: var(--surface-1); border-bottom: 1px solid var(--border-soft); }
.feed-item { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background var(--t); }
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: var(--surface-2); }
.feed-icon { width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; }
.feed-icon svg { width: 14px; height: 14px; }
.feed-icon.install { background: var(--indigo-wash); color: var(--indigo-hi); }
.feed-icon.support { background: var(--amber-wash); color: var(--amber-hi); }
.feed-icon.order { background: var(--green-wash); color: var(--green-hi); }
.feed-icon.beta { background: var(--cyan-wash); color: var(--cyan); }
.feed-icon.uninstall { background: var(--red-wash); color: var(--red-hi); }
.feed-icon.system { background: var(--surface-hi); color: var(--text-muted); }
.feed-text { font-size: 12px; color: var(--text); line-height: 1.4; min-width: 0; }
.feed-text .label { font-weight: 600; }
.feed-text .meta { display: block; color: var(--text-muted); font-size: 11px; font-weight: 400; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-text .meta code { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; }
.feed-platform { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 2px 7px; border: 1px solid var(--border); border-radius: 100px; white-space: nowrap; }
.feed-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; letter-spacing: 0.04em; }
.feed-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border-soft); background: var(--surface-1); }
.feed-foot a { font-size: 11px; font-weight: 600; color: var(--indigo-hi); display: inline-flex; align-items: center; gap: 4px; }

/* Quick actions */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qa-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); cursor: pointer; transition: all var(--t); text-align: left; }
.qa-item:hover { background: var(--surface-3); border-color: var(--indigo-dim); transform: translateY(-1px); }
.qa-icon { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--bg-deep); flex-shrink: 0; }
.qa-icon svg { width: 15px; height: 15px; color: var(--indigo-hi); }
.qa-text { min-width: 0; flex: 1; }
.qa-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
.qa-hint { font-size: 10px; color: var(--text-dim); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.02em; }

/* Stores */
.stores-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 760px) { .stores-row { grid-template-columns: 1fr; } }
.store-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 14px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; cursor: pointer; transition: border-color var(--t); }
.store-card:hover { border-color: var(--border-hi); }
.store-logo { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-3); font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.store-logo.cws { color: #4285F4; }
.store-logo.firefox { color: #FF7139; }
.store-info-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.store-name { font-size: 13px; font-weight: 600; }
.store-version { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; }
.store-rating-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.store-rating { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-weight: 700; color: var(--amber-hi); font-size: 12px; }
.store-rating svg { width: 12px; height: 12px; fill: currentColor; }
.store-go { width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--text-dim); }
.store-card:hover .store-go { color: var(--indigo-hi); }
.store-go svg { width: 14px; height: 14px; }

/* Keyboard hint */
.kbd-hint { margin-top: 24px; padding: 12px 16px; background: var(--surface-1); border: 1px dashed var(--border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--text-muted); }
.kbd-hint-shortcuts { display: flex; gap: 16px; flex-wrap: wrap; }
.kbd-hint-shortcut { display: inline-flex; align-items: center; gap: 5px; }
kbd.k { font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--surface-3); border: 1px solid var(--border-hi); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; color: var(--text); }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   ──────────────────────────────────────────────────────────────────────────
   On desktop (the kit's design target) the sidebar is a 220px grid column
   and the hamburger is hidden. Narrow viewports collapse the grid to a
   single column, slide the sidebar off-canvas, and expose the hamburger so
   the admin can be operated from a phone or split-screen window.
   ════════════════════════════════════════════════════════════════════════ */

/* Desktop: hide the hamburger toggle and the click-away overlay. The
   sidebar-overlay element stays in the DOM for the JS toggle handler to
   reuse on resize. */
.sidebar-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; }
.sidebar-toggle:hover { color: var(--text); }
.sidebar-overlay { display: none; }

@media (max-width: 980px) {
  /* 980px breakpoint matches the rest of the kit (.hero/.prime-metrics/
     .sec-metrics also collapse at 980px). Below that the sidebar goes
     off-canvas; the hamburger toggles it back in. */
  .app {
    /* Collapse the two-column grid: sidebar floats off-canvas, main fills. */
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "main";
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -260px;
    width: 240px;
    height: 100vh;
    /* Must sit above .topbar (z-index 30) so the slid-in drawer covers the
       hamburger row instead of being painted underneath it. */
    z-index: 50;
    transition: left 0.2s ease;
  }
  .sidebar.open { left: 0; }
  /* Overlay covers the topbar (30) but not the drawer (50). */
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; }
  .sidebar.open ~ .sidebar-overlay,
  .sidebar-overlay.open { display: block; }
  .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { padding: 0 12px; gap: 8px; }
  .tb-search { display: none; } /* search collapses to a button on narrow viewports - separate feature */
}

/* ════════════════════════════════════════════════════════════════════════════
   CUSTOMERS PAGE - Session 4a migrated markup
   All rules are scoped under [data-kit="redesign"] so they only apply to the
   migrated render function output. Legacy pages keep their styles.css rules
   untouched. The rule order mirrors the reference HTML at
   makro_admin/02_customers.html so future kit drift is easy to follow.
   ════════════════════════════════════════════════════════════════════════ */

[data-kit="redesign"] .split { display: grid; grid-template-columns: 1fr 380px; height: calc(100vh - var(--topbar-h) - 56px); overflow: hidden; }
[data-kit="redesign"] .split-list { overflow-y: auto; border-right: 1px solid var(--border); padding: 14px 20px 40px; min-width: 0; }
[data-kit="redesign"] .split-list::-webkit-scrollbar { width: 6px; }
[data-kit="redesign"] .split-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
[data-kit="redesign"] .split-rail { overflow-y: auto; background: var(--surface-1); }
[data-kit="redesign"] .split-rail::-webkit-scrollbar { width: 6px; }
[data-kit="redesign"] .split-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
@media (max-width: 1280px) {
  [data-kit="redesign"] .split { grid-template-columns: 1fr; }
  [data-kit="redesign"] .split-rail { display: none; }
}

[data-kit="redesign"] .page-title-block h1 { display: flex; align-items: center; gap: 10px; }
[data-kit="redesign"] .page-title-block h1 .total { font-family: var(--font-mono); font-size: 14px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border-hi); padding: 3px 9px; border-radius: 100px; letter-spacing: 0.02em; color: var(--text-muted); }
[data-kit="redesign"] .head-actions { display: flex; gap: 6px; }
[data-kit="redesign"] .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-md); font-size: 12px; font-weight: 600; transition: all var(--t); border: 1px solid transparent; height: 30px; }
[data-kit="redesign"] .btn svg { width: 14px; height: 14px; }
[data-kit="redesign"] .btn-primary { background: var(--indigo); color: white; border-color: var(--indigo-dim); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
[data-kit="redesign"] .btn-primary:hover { background: var(--indigo-hi); }
[data-kit="redesign"] .btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-kit="redesign"] .btn-secondary:hover { background: var(--surface-3); border-color: var(--border-hi); }

[data-kit="redesign"] .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px; }
@media (max-width: 800px) { [data-kit="redesign"] .stat-strip { grid-template-columns: repeat(2, 1fr); } }
[data-kit="redesign"] .stat-cell { background: var(--surface-1); padding: 12px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: background var(--t); position: relative; }
[data-kit="redesign"] .stat-cell:hover { background: var(--surface-2); }
[data-kit="redesign"] .stat-cell.active { background: var(--surface-2); }
[data-kit="redesign"] .stat-cell.active::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--indigo); }
[data-kit="redesign"] .stat-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .stat-label .dot { width: 7px; height: 7px; border-radius: 50%; }
[data-kit="redesign"] .stat-label .dot.healthy { background: var(--green); }
[data-kit="redesign"] .stat-label .dot.moderate { background: var(--amber); }
[data-kit="redesign"] .stat-label .dot.atrisk { background: var(--red); }
[data-kit="redesign"] .stat-label .dot.all { background: var(--text-muted); }
[data-kit="redesign"] .stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; line-height: 1; }
[data-kit="redesign"] .stat-value.healthy { color: var(--green-hi); }
[data-kit="redesign"] .stat-value.moderate { color: var(--amber-hi); }
[data-kit="redesign"] .stat-value.atrisk { color: var(--red-hi); }
[data-kit="redesign"] .stat-meta { font-size: 11px; color: var(--text-muted); }
[data-kit="redesign"] .stat-meta b { color: var(--text); font-weight: 600; }

[data-kit="redesign"] .views-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
[data-kit="redesign"] .view-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; font-size: 11px; font-weight: 500; cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .view-pill:hover { border-color: var(--border-hi); }
[data-kit="redesign"] .view-pill.active { background: var(--indigo-wash); border-color: var(--indigo-dim); color: var(--indigo-hi); }
[data-kit="redesign"] .view-pill svg { width: 11px; height: 11px; opacity: 0.7; }
[data-kit="redesign"] .view-pill .count { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }
[data-kit="redesign"] .view-pill.active .count { color: var(--indigo-hi); }
[data-kit="redesign"] .view-add { font-size: 11px; color: var(--text-dim); padding: 4px 8px; cursor: pointer; transition: color var(--t); }
[data-kit="redesign"] .view-add:hover { color: var(--text); }

[data-kit="redesign"] .filter-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 8px; flex-wrap: wrap; }
[data-kit="redesign"] .filter-search { flex: 1; min-width: 200px; position: relative; }
[data-kit="redesign"] .filter-search input { width: 100%; height: 28px; padding: 0 10px 0 30px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); }
[data-kit="redesign"] .filter-search input::placeholder { color: var(--text-dim); }
[data-kit="redesign"] .filter-search input:focus { outline: none; border-color: var(--border-focus); }
[data-kit="redesign"] .filter-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-dim); }
[data-kit="redesign"] .filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 11px; font-weight: 500; cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .filter-chip:hover { border-color: var(--border-hi); }
[data-kit="redesign"] .filter-chip.set { background: var(--indigo-wash); color: var(--indigo-hi); border-color: var(--indigo-dim); }
[data-kit="redesign"] .filter-chip svg { width: 11px; height: 11px; opacity: 0.7; }
[data-kit="redesign"] .filter-chip .x { width: 11px; height: 11px; opacity: 0.6; cursor: pointer; }
[data-kit="redesign"] .filter-chip .x:hover { opacity: 1; }

[data-kit="redesign"] .tbl-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
[data-kit="redesign"] .tbl-head { display: grid; grid-template-columns: 28px 2.6fr 1.1fr 1fr 0.8fr 0.8fr 1.1fr 24px; align-items: center; padding: 8px 14px; background: var(--bg-deep); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); position: sticky; top: 0; z-index: 5; }
[data-kit="redesign"] .tbl-head .col { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
[data-kit="redesign"] .tbl-head .col:hover { color: var(--text); }
[data-kit="redesign"] .tbl-head .col svg { width: 10px; height: 10px; opacity: 0.6; }
[data-kit="redesign"] .tbl-head .col.sort-active { color: var(--text); }
[data-kit="redesign"] .tbl-head .col.sort-active svg { opacity: 1; color: var(--indigo-hi); }
[data-kit="redesign"] .tbl-head .col.right { justify-content: flex-end; }

[data-kit="redesign"] .tbl-row { display: grid; grid-template-columns: 28px 2.6fr 1.1fr 1fr 0.8fr 0.8fr 1.1fr 24px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background var(--t); position: relative; }
[data-kit="redesign"] .tbl-row:last-child { border-bottom: none; }
[data-kit="redesign"] .tbl-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .tbl-row.selected { background: var(--surface-2); }
[data-kit="redesign"] .tbl-row.selected::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--indigo); border-radius: 0 2px 2px 0; }

[data-kit="redesign"] input[type="checkbox"].cb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border: 1.5px solid var(--border-hi); border-radius: 3px; background: var(--surface-1); cursor: pointer; display: grid; place-items: center; transition: all var(--t); }
[data-kit="redesign"] input[type="checkbox"].cb:checked { background: var(--indigo); border-color: var(--indigo-dim); }
[data-kit="redesign"] input[type="checkbox"].cb:checked::after { content: "\2713"; color: white; font-size: 10px; font-weight: 700; line-height: 1; }

[data-kit="redesign"] .cust-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-kit="redesign"] .cust-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; background: linear-gradient(135deg, var(--indigo), var(--indigo-dim)); }
[data-kit="redesign"] .cust-id { min-width: 0; flex: 1; }
[data-kit="redesign"] .cust-id-row { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
[data-kit="redesign"] .cust-id-row .id-prefix { color: var(--text); }
[data-kit="redesign"] .cust-id-row .id-suffix { color: var(--text-dim); font-weight: 400; }
[data-kit="redesign"] .cust-id-row .flag-pill { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 5px; border-radius: var(--r-sm); }
[data-kit="redesign"] .cust-id-row .flag-pill.beta { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }
[data-kit="redesign"] .cust-id-row .flag-pill.founding { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .cust-id-row .flag-pill.lifetime { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .cust-email-row { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
[data-kit="redesign"] .email-mask { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 1px 4px; border-radius: var(--r-sm); transition: background var(--t); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--text-muted); }
[data-kit="redesign"] .email-mask:hover { background: var(--surface-3); color: var(--text); }
[data-kit="redesign"] .email-mask svg { width: 10px; height: 10px; opacity: 0.6; }

[data-kit="redesign"] .health-cell { display: flex; align-items: center; gap: 8px; }
[data-kit="redesign"] .health-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 100px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
[data-kit="redesign"] .health-pill.healthy { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .health-pill.moderate { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .health-pill.atrisk { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .health-pill .num { font-weight: 700; }
[data-kit="redesign"] .health-spark { width: 50px; height: 18px; opacity: 0.7; flex-shrink: 0; }

[data-kit="redesign"] .tier-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
[data-kit="redesign"] .tier-badge.premium { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .tier-badge.pro { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .tier-badge.free { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }

[data-kit="redesign"] .num-cell { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
[data-kit="redesign"] .num-cell.dim { color: var(--text-dim); }
[data-kit="redesign"] .num-cell .unit { color: var(--text-dim); font-size: 10px; margin-left: 2px; }

[data-kit="redesign"] .sync-cell { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }
[data-kit="redesign"] .sync-dot { width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .sync-dot.recent { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .sync-dot.stale { background: var(--amber); }
[data-kit="redesign"] .sync-dot.cold { background: var(--text-ghost); }

[data-kit="redesign"] .tbl-chev { width: 14px; height: 14px; color: var(--text-dim); }
[data-kit="redesign"] .tbl-row:hover .tbl-chev { color: var(--text); }

[data-kit="redesign"] .tbl-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }
[data-kit="redesign"] .pager { display: flex; gap: 4px; align-items: center; }
[data-kit="redesign"] .pager button { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-muted); }
[data-kit="redesign"] .pager button:hover { background: var(--surface-2); color: var(--text); }
[data-kit="redesign"] .pager button.active { background: var(--indigo-wash); color: var(--indigo-hi); }
[data-kit="redesign"] .pager button[disabled] { opacity: 0.3; cursor: not-allowed; }
[data-kit="redesign"] .pager button svg { width: 13px; height: 13px; }

/* The .notice block is now only used by the audit-log fetch-error fallback;
   the audit-notices system block and customers-list bug notice were removed
   in Session 10 cleanup. Keep only .notice.bug + its icon variant. */
[data-kit="redesign"] .notices { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
[data-kit="redesign"] .notice { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px 14px; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--border); font-size: 12px; }
[data-kit="redesign"] .notice.bug { border-left: 3px solid var(--red); }
[data-kit="redesign"] .notice-icon { width: 22px; height: 22px; border-radius: var(--r-sm); display: grid; place-items: center; }
[data-kit="redesign"] .notice.bug .notice-icon { background: var(--red-wash); color: var(--red-hi); }
[data-kit="redesign"] .notice-icon svg { width: 13px; height: 13px; }
[data-kit="redesign"] .notice-text { color: var(--text); min-width: 0; }

[data-kit="redesign"] .rail-empty { height: 100%; display: grid; place-items: center; color: var(--text-dim); font-size: 12px; text-align: center; padding: 40px 20px; }
[data-kit="redesign"] .rail-empty-icon { width: 40px; height: 40px; margin: 0 auto 12px; opacity: 0.4; }

/* ════════════════════════════════════════════════════════════════════════════
   CUSTOMER DETAIL PAGE - Session 4b migrated markup
   All rules scoped under [data-kit="redesign"] so they only apply to the
   migrated render function output. Mirrors makro_admin/03_customer_detail.html.
   ════════════════════════════════════════════════════════════════════════ */

/* Customer header */
[data-kit="redesign"] .cust-header { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 24px; margin-bottom: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; position: relative; overflow: hidden; }
[data-kit="redesign"] .cust-header::before { content: ""; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, var(--green-wash) 0%, transparent 70%); pointer-events: none; opacity: 0.5; }
@media (max-width: 980px) { [data-kit="redesign"] .cust-header { grid-template-columns: 1fr; } }
[data-kit="redesign"] .ch-avatar-block { display: flex; align-items: center; gap: 18px; position: relative; }
[data-kit="redesign"] .ch-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--indigo), var(--indigo-dim)); display: grid; place-items: center; font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: white; flex-shrink: 0; box-shadow: 0 0 0 4px var(--surface-1), 0 0 0 5px var(--border-hi); }
[data-kit="redesign"] .ch-status-dot { position: absolute; bottom: 4px; left: 56px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 3px solid var(--surface-1); box-shadow: 0 0 8px var(--green); }
[data-kit="redesign"] .ch-id { min-width: 0; }
[data-kit="redesign"] .ch-id-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
[data-kit="redesign"] .ch-uuid { font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1.2; display: inline-flex; align-items: center; gap: 8px; word-break: break-all; }
[data-kit="redesign"] .ch-uuid .copy-btn { color: var(--text-dim); cursor: pointer; padding: 2px; border-radius: var(--r-sm); transition: all var(--t); display: inline-flex; }
[data-kit="redesign"] .ch-uuid .copy-btn:hover { color: var(--indigo-hi); background: var(--surface-2); }
[data-kit="redesign"] .ch-uuid .copy-btn svg { width: 14px; height: 14px; }
[data-kit="redesign"] .ch-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 3px 10px; background: var(--green-wash); color: var(--green-hi); border-radius: 100px; border: 1px solid var(--green-dim); letter-spacing: 0.04em; }
[data-kit="redesign"] .ch-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
[data-kit="redesign"] .ch-meta { display: flex; align-items: center; gap: 16px; margin-top: 8px; color: var(--text-muted); font-size: 12px; flex-wrap: wrap; }
[data-kit="redesign"] .ch-meta-item { display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .ch-meta-item svg { width: 12px; height: 12px; opacity: 0.7; }
[data-kit="redesign"] .reveal-email { padding: 2px 6px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); letter-spacing: 0.02em; }
[data-kit="redesign"] .reveal-email.is-static { cursor: default; }
[data-kit="redesign"] .reveal-email svg { width: 11px; height: 11px; opacity: 0.6; }
[data-kit="redesign"] .ch-flags { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
[data-kit="redesign"] .flag-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; }
[data-kit="redesign"] .flag-pill.tier-premium { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .flag-pill.tier-pro { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .flag-pill.tier-free { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .flag-pill.beta { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }
[data-kit="redesign"] .flag-pill.founding { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .flag-pill.lifetime { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .flag-pill.subscription { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .ch-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
[data-kit="redesign"] .ch-actions-row { display: flex; gap: 6px; flex-wrap: wrap; }
[data-kit="redesign"] .ch-keyboard-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
[data-kit="redesign"] .ch-keyboard-hint kbd { font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--surface-3); border: 1px solid var(--border-hi); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; color: var(--text); }

/* Profile link callout */
[data-kit="redesign"] .profile-link { background: linear-gradient(90deg, var(--indigo-wash) 0%, transparent 100%); border: 1px solid var(--indigo-dim); border-radius: var(--r-lg); padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .profile-link:hover { background: linear-gradient(90deg, var(--indigo-wash) 0%, var(--indigo-wash) 100%); border-color: var(--indigo); }
[data-kit="redesign"] .profile-link-text { font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 10px; }
[data-kit="redesign"] .profile-link-text .pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo-hi); background: var(--indigo-wash); padding: 2px 7px; border-radius: 100px; border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .profile-link-text b { font-weight: 600; }
[data-kit="redesign"] .profile-link-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--indigo-hi); }
[data-kit="redesign"] .profile-link-cta svg { width: 14px; height: 14px; }

/* Tabs (Overview / Devices / Activity) */
[data-kit="redesign"] .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; padding: 0 4px; position: relative; }
[data-kit="redesign"] .tab { padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; position: relative; transition: color var(--t); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
[data-kit="redesign"] .tab:hover { color: var(--text); }
[data-kit="redesign"] .tab.active { color: var(--indigo-hi); border-bottom-color: var(--indigo); }
[data-kit="redesign"] .tab svg { width: 14px; height: 14px; }
[data-kit="redesign"] .tab .badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; background: var(--surface-3); color: var(--text-muted); padding: 1px 5px; border-radius: 8px; }
[data-kit="redesign"] .tab.active .badge { background: var(--indigo-wash); color: var(--indigo-hi); }

/* Quick stats strip */
[data-kit="redesign"] .qs-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px; }
@media (max-width: 800px) { [data-kit="redesign"] .qs-strip { grid-template-columns: repeat(2, 1fr); } }
[data-kit="redesign"] .qs-cell { background: var(--surface-1); padding: 14px 18px; transition: background var(--t); }
[data-kit="redesign"] .qs-cell:hover { background: var(--surface-2); }
[data-kit="redesign"] .qs-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .qs-value { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-top: 4px; line-height: 1; }
[data-kit="redesign"] .qs-value.indigo { color: var(--indigo-hi); }
[data-kit="redesign"] .qs-value.green { color: var(--green-hi); }
[data-kit="redesign"] .qs-value.amber { color: var(--amber-hi); }
[data-kit="redesign"] .qs-meta { font-size: 10px; color: var(--text-dim); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.02em; }

/* Health block */
[data-kit="redesign"] .health-block { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; }
@media (max-width: 800px) { [data-kit="redesign"] .health-block { grid-template-columns: 1fr; } }
[data-kit="redesign"] .health-score-big { text-align: center; padding: 4px; }
[data-kit="redesign"] .health-ring { position: relative; width: 160px; height: 160px; margin: 0 auto 10px; }
[data-kit="redesign"] .health-ring svg { transform: rotate(-90deg); }
[data-kit="redesign"] .health-ring-text { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
[data-kit="redesign"] .health-ring-text .num { font-family: var(--font-mono); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
[data-kit="redesign"] .health-ring-text .num.healthy { color: var(--green-hi); }
[data-kit="redesign"] .health-ring-text .num.moderate { color: var(--amber-hi); }
[data-kit="redesign"] .health-ring-text .num.atrisk { color: var(--red-hi); }
[data-kit="redesign"] .health-ring-text .lbl { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
[data-kit="redesign"] .health-bucket-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-sm); font-weight: 600; border: 1px solid transparent; }
[data-kit="redesign"] .health-bucket-pill.healthy { background: var(--green-wash); color: var(--green-hi); border-color: var(--green-dim); }
[data-kit="redesign"] .health-bucket-pill.moderate { background: var(--amber-wash); color: var(--amber-hi); border-color: var(--amber-dim); }
[data-kit="redesign"] .health-bucket-pill.atrisk { background: var(--red-wash); color: var(--red-hi); border-color: var(--red-dim); }
[data-kit="redesign"] .health-factors { display: flex; flex-direction: column; gap: 9px; }
[data-kit="redesign"] .health-factor { display: grid; grid-template-columns: 1fr 110px 50px; gap: 14px; align-items: center; font-size: 12px; }
[data-kit="redesign"] .health-factor-label { display: flex; flex-direction: column; min-width: 0; }
[data-kit="redesign"] .health-factor-name { color: var(--text); font-weight: 500; }
[data-kit="redesign"] .health-factor-detail { color: var(--text-dim); font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.04em; margin-top: 2px; }
[data-kit="redesign"] .health-factor-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
[data-kit="redesign"] .health-factor-fill { height: 100%; border-radius: 3px; }
[data-kit="redesign"] .health-factor-fill.good { background: linear-gradient(90deg, var(--green-dim), var(--green)); }
[data-kit="redesign"] .health-factor-fill.warn { background: linear-gradient(90deg, var(--amber-dim), var(--amber)); }
[data-kit="redesign"] .health-factor-fill.bad { background: linear-gradient(90deg, var(--red-dim), var(--red)); }
[data-kit="redesign"] .health-factor-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); text-align: right; }
[data-kit="redesign"] .health-factor-val .max { color: var(--text-dim); font-weight: 400; font-size: 10px; }
[data-kit="redesign"] .health-formula-foot { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--border-soft); display: flex; align-items: center; gap: 6px; letter-spacing: 0.02em; }
[data-kit="redesign"] .health-formula-foot svg { width: 11px; height: 11px; opacity: 0.7; }

/* KV grid (Account fields) */
[data-kit="redesign"] .kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-soft); border-radius: var(--r-md); overflow: hidden; }
[data-kit="redesign"] .kv-grid.three { grid-template-columns: repeat(3, 1fr); }
[data-kit="redesign"] .kv { background: var(--surface-1); padding: 10px 14px; }
[data-kit="redesign"] .kv-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .kv-label svg { width: 11px; height: 11px; }
[data-kit="redesign"] .kv-label .src { font-family: var(--font-mono); font-size: 8px; color: var(--text-ghost); letter-spacing: 0.04em; margin-left: auto; font-weight: 500; text-transform: none; }
[data-kit="redesign"] .kv-value { font-size: 13px; color: var(--text); font-weight: 500; }
[data-kit="redesign"] .kv-value.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }
[data-kit="redesign"] .kv-value.green { color: var(--green-hi); }
[data-kit="redesign"] .kv-value.amber { color: var(--amber-hi); }
[data-kit="redesign"] .kv-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.02em; }
[data-kit="redesign"] .kv-value-row { display: flex; align-items: center; gap: 10px; }

/* Beta toggle (kv-grid inline) */
[data-kit="redesign"] .toggle { width: 36px; height: 20px; border-radius: 100px; background: var(--surface-3); position: relative; cursor: pointer; transition: background var(--t); border: 1px solid var(--border-hi); flex-shrink: 0; }
[data-kit="redesign"] .toggle.on { background: var(--cyan); border-color: var(--cyan); }
[data-kit="redesign"] .toggle::after { content: ""; position: absolute; left: 2px; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: white; transition: transform var(--t); }
[data-kit="redesign"] .toggle.on::after { transform: translateX(15px); }
[data-kit="redesign"] .toggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Devices list */
[data-kit="redesign"] .device-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); align-items: center; }
[data-kit="redesign"] .device-row:last-child { border-bottom: none; }
[data-kit="redesign"] .device-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-3); display: grid; place-items: center; color: var(--text-muted); }
[data-kit="redesign"] .device-icon svg { width: 18px; height: 18px; }
[data-kit="redesign"] .device-info { min-width: 0; }
[data-kit="redesign"] .device-name { font-size: 13px; font-weight: 600; color: var(--text); font-family: var(--font-mono); letter-spacing: 0.02em; word-break: break-word; }
[data-kit="redesign"] .device-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 10px; margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.02em; flex-wrap: wrap; }
[data-kit="redesign"] .device-status { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); }
[data-kit="redesign"] .device-status.live { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .device-status.idle { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .empty-state { padding: 30px 20px; text-align: center; color: var(--text-dim); font-size: 12px; }
[data-kit="redesign"] .empty-state svg { width: 32px; height: 32px; opacity: 0.4; margin-bottom: 10px; }

/* Lifecycle timeline */
[data-kit="redesign"] .timeline { position: relative; padding-left: 24px; }
[data-kit="redesign"] .timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--border); }
[data-kit="redesign"] .tl-item { position: relative; padding: 8px 0; }
[data-kit="redesign"] .tl-dot { position: absolute; left: -22px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-1); border: 2px solid var(--text-dim); z-index: 1; }
[data-kit="redesign"] .tl-dot.indigo { border-color: var(--indigo); background: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-wash); }
[data-kit="redesign"] .tl-dot.green { border-color: var(--green); background: var(--green); }
[data-kit="redesign"] .tl-dot.amber { border-color: var(--amber); background: var(--amber); }
[data-kit="redesign"] .tl-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; }
[data-kit="redesign"] .tl-text { font-size: 13px; color: var(--text); line-height: 1.5; }
[data-kit="redesign"] .tl-text b { font-weight: 600; }
[data-kit="redesign"] .tl-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; white-space: nowrap; }
[data-kit="redesign"] .tl-stub { margin-top: 12px; padding: 10px 14px; background: var(--surface-2); border-radius: var(--r-md); border-left: 3px solid var(--indigo); font-size: 11px; color: var(--text-muted); }
[data-kit="redesign"] .tl-stub b { color: var(--text); font-weight: 600; }

/* Card foot (small mono footer with link) */
[data-kit="redesign"] .card-foot { border-top: 1px solid var(--border-soft); padding: 9px 18px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }
[data-kit="redesign"] .card-foot a { color: var(--indigo-hi); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
[data-kit="redesign"] .card-foot a:hover { color: var(--text); }
[data-kit="redesign"] .card-foot a svg { width: 11px; height: 11px; }

/* On-demand placeholder cards (FreeScout / notifications / audit). The
   endpoint surface for these does not exist yet; the Load buttons are
   disabled until the worker exposes the route. */
[data-kit="redesign"] .placeholder-card { border-style: dashed; }
[data-kit="redesign"] .placeholder-body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
[data-kit="redesign"] .placeholder-line { font-size: 11px; color: var(--text-dim); }
[data-kit="redesign"] .placeholder-card .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Danger zone */
[data-kit="redesign"] .danger-zone { background: var(--surface-1); border: 1px solid var(--red-dim); border-radius: var(--r-xl); padding: 16px 20px; margin-top: 18px; }
[data-kit="redesign"] .danger-title { font-size: 12px; font-weight: 700; color: var(--red-hi); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
[data-kit="redesign"] .danger-title svg { width: 14px; height: 14px; }
[data-kit="redesign"] .danger-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
[data-kit="redesign"] .danger-actions { display: flex; gap: 8px; flex-wrap: wrap; }
[data-kit="redesign"] .danger-action { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--surface-2); border: 1px solid var(--red-dim); border-radius: var(--r-md); font-size: 11px; font-weight: 600; color: var(--red-hi); cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .danger-action:hover { background: var(--red-wash); }
[data-kit="redesign"] .danger-action svg { width: 12px; height: 12px; }
[data-kit="redesign"] .danger-action .endpoint { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.02em; font-weight: 400; margin-left: 4px; }

/* Privacy footer */
[data-kit="redesign"] .privacy-foot { margin-top: 20px; padding: 12px 16px; background: var(--surface-1); border: 1px dashed var(--border); border-radius: var(--r-md); display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted); }
[data-kit="redesign"] .privacy-foot svg { width: 14px; height: 14px; color: var(--green-hi); flex-shrink: 0; }
[data-kit="redesign"] .privacy-foot b { color: var(--text); font-weight: 600; }

/* tb-icon-btn used inside cards on this page (already styled in shell.css
   for the topbar; ensure card-scope toolbar buttons inherit the same look). */
[data-kit="redesign"] .card-toolbar .tb-icon-btn { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-muted); transition: background var(--t), color var(--t); }
[data-kit="redesign"] .card-toolbar .tb-icon-btn:hover { background: var(--surface-2); color: var(--text); }
[data-kit="redesign"] .card-toolbar .tb-icon-btn svg { width: 14px; height: 14px; }

/* ============================================================
   Customer Profile (email-hash-keyed) - Session 5 redesign
   ============================================================ */

/* Lens-switcher pills at top of the profile. */
[data-kit="redesign"] .profile-lens-switch { display: flex; gap: 4px; margin-bottom: 14px; }
[data-kit="redesign"] .lens-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 11px; border-radius: 100px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .lens-pill:hover:not(.active):not(.disabled) { background: var(--surface-3); color: var(--text); }
[data-kit="redesign"] .lens-pill.active { background: var(--indigo-wash); border-color: var(--indigo-dim); color: var(--indigo-hi); cursor: default; }
[data-kit="redesign"] .lens-pill.disabled { opacity: 0.4; cursor: not-allowed; }
[data-kit="redesign"] .lens-pill svg { width: 12px; height: 12px; }

/* Rate-limit banner shown when data.rateLimited === true. */
[data-kit="redesign"] .rate-banner { background: var(--amber-wash); border: 1px solid var(--amber-dim); border-left: 3px solid var(--amber); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
[data-kit="redesign"] .rate-banner-icon { color: var(--amber-hi); }
[data-kit="redesign"] .rate-banner-icon svg { width: 16px; height: 16px; }
[data-kit="redesign"] .rate-banner-text { font-size: 12px; color: var(--text); flex: 1; }
[data-kit="redesign"] .rate-banner-text b { font-weight: 600; }
[data-kit="redesign"] .rate-banner-text .meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-left: 8px; letter-spacing: 0.02em; }

/* Profile header card. */
[data-kit="redesign"] .ph-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 24px; margin-bottom: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; position: relative; overflow: hidden; }
[data-kit="redesign"] .ph-card::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, var(--indigo-wash) 0%, transparent 70%); pointer-events: none; opacity: 0.6; }
@media (max-width: 1100px) { [data-kit="redesign"] .ph-card { grid-template-columns: 1fr; } }

[data-kit="redesign"] .ph-avatar-block { display: flex; align-items: center; gap: 18px; position: relative; }
[data-kit="redesign"] .ph-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #06b6d4, #0e7490); display: grid; place-items: center; font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: white; flex-shrink: 0; box-shadow: 0 0 0 4px var(--surface-1), 0 0 0 5px var(--border-hi); }
[data-kit="redesign"] .ph-status-dot { position: absolute; bottom: 4px; left: 56px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 3px solid var(--surface-1); box-shadow: 0 0 8px var(--green); }

[data-kit="redesign"] .ph-id { min-width: 0; }
[data-kit="redesign"] .ph-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
[data-kit="redesign"] .ph-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; }
[data-kit="redesign"] .ph-name.no-name { font-family: var(--font-mono); font-size: 18px; color: var(--text-muted); letter-spacing: 0.02em; }

[data-kit="redesign"] .ph-email-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
[data-kit="redesign"] .ph-email-mask { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 14px; color: var(--text); cursor: pointer; padding: 4px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); letter-spacing: 0.02em; transition: all var(--t); }
[data-kit="redesign"] .ph-email-mask:hover { background: var(--surface-3); border-color: var(--border-hi); }
[data-kit="redesign"] .ph-email-mask svg { width: 12px; height: 12px; opacity: 0.6; }
[data-kit="redesign"] .ph-email-hash { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .ph-email-hash .copy-btn { color: var(--text-dim); cursor: pointer; padding: 2px; border-radius: var(--r-sm); transition: all var(--t); display: inline-flex; }
[data-kit="redesign"] .ph-email-hash .copy-btn:hover { color: var(--indigo-hi); background: var(--surface-2); }
[data-kit="redesign"] .ph-email-hash .copy-btn svg { width: 11px; height: 11px; }

[data-kit="redesign"] .ph-meta { display: flex; align-items: center; gap: 14px; color: var(--text-muted); font-size: 12px; flex-wrap: wrap; }
[data-kit="redesign"] .ph-meta-item { display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .ph-meta-item svg { width: 12px; height: 12px; opacity: 0.7; }
[data-kit="redesign"] .ph-meta-item b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .ph-flags { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
[data-kit="redesign"] .ph-flags .flag-pill.status-active { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .ph-flags .flag-pill.status-active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

[data-kit="redesign"] .ph-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
[data-kit="redesign"] .ph-actions-row { display: flex; gap: 6px; flex-wrap: wrap; }
[data-kit="redesign"] .ph-keyboard-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
[data-kit="redesign"] .ph-keyboard-hint kbd { font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--surface-3); border: 1px solid var(--border-hi); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; color: var(--text); }

/* Source-of-truth badge - Polar live vs D1 cached. */
[data-kit="redesign"] .src-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; display: inline-flex; align-items: center; gap: 4px; }
[data-kit="redesign"] .src-badge.polar { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .src-badge.d1 { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .src-badge svg { width: 9px; height: 9px; }

/* Subscription card grid. */
[data-kit="redesign"] .sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-soft); }
[data-kit="redesign"] .sub-cell { background: var(--surface-1); padding: 12px 16px; }
[data-kit="redesign"] .sub-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
[data-kit="redesign"] .sub-value { font-size: 14px; color: var(--text); font-weight: 500; display: flex; align-items: center; gap: 8px; }
[data-kit="redesign"] .sub-value .green { color: var(--green-hi); }
[data-kit="redesign"] .sub-value .amber { color: var(--amber-hi); }
[data-kit="redesign"] .sub-value .sub-devices-warn { color: var(--red-hi); font-weight: 700; }
[data-kit="redesign"] .sub-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 3px; letter-spacing: 0.02em; }
[data-kit="redesign"] .sub-cell-cta { border-top: 1px solid var(--border-soft); padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; background: var(--surface-1); gap: 10px; }
[data-kit="redesign"] .sub-cell-cta-link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--indigo-hi); cursor: pointer; }
[data-kit="redesign"] .sub-cell-cta-link:hover { color: var(--text); }
[data-kit="redesign"] .sub-cell-cta-link svg { width: 11px; height: 11px; }

/* Section error / empty / retry shells. */
[data-kit="redesign"] .section-error { padding: 16px 18px; background: var(--red-wash); border-left: 3px solid var(--red); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
[data-kit="redesign"] .section-error-msg { font-size: 12px; color: var(--red-hi); }
[data-kit="redesign"] .retry-btn { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--red-dim); color: var(--red-hi); border-radius: var(--r-sm); cursor: pointer; }
[data-kit="redesign"] .retry-btn:hover { background: var(--red-wash); }
[data-kit="redesign"] .section-empty { padding: 24px 20px; text-align: center; color: var(--text-dim); font-size: 12px; }
[data-kit="redesign"] .section-empty svg { width: 28px; height: 28px; opacity: 0.4; margin-bottom: 6px; }
[data-kit="redesign"] .section-empty div { font-size: 12px; }

/* Beta program card body. */
[data-kit="redesign"] .beta-status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
[data-kit="redesign"] .beta-status-pill { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; }
[data-kit="redesign"] .beta-status-pill.activated { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .beta-status-pill.approved { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }
[data-kit="redesign"] .beta-status-pill.declined { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .beta-status-pill.pending { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .beta-status-pill.none { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
[data-kit="redesign"] .beta-since { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em; }
[data-kit="redesign"] .beta-fields { display: flex; flex-direction: column; gap: 10px; }
[data-kit="redesign"] .beta-field { display: flex; flex-direction: column; gap: 3px; }
[data-kit="redesign"] .beta-field-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .beta-field-value { font-size: 12px; color: var(--text); line-height: 1.5; }
[data-kit="redesign"] .beta-field-value.muted { color: var(--text-muted); font-style: italic; }

/* Usage strip (D1 counters). */
[data-kit="redesign"] .usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); }
@media (max-width: 800px) { [data-kit="redesign"] .usage-grid { grid-template-columns: repeat(2, 1fr); } }
[data-kit="redesign"] .usage-cell { background: var(--surface-1); padding: 12px 14px; transition: background var(--t); }
[data-kit="redesign"] .usage-cell:hover { background: var(--surface-2); }
[data-kit="redesign"] .usage-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .usage-value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-top: 4px; line-height: 1; }
[data-kit="redesign"] .usage-value.indigo { color: var(--indigo-hi); }
[data-kit="redesign"] .usage-meta { font-size: 10px; color: var(--text-dim); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.02em; }

/* Contact history. */
[data-kit="redesign"] .contact-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); align-items: start; transition: background var(--t); }
[data-kit="redesign"] .contact-row:last-child { border-bottom: none; }
[data-kit="redesign"] .contact-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .contact-cat-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap; flex-shrink: 0; }
[data-kit="redesign"] .contact-cat-pill.feature_request { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .contact-cat-pill.bug { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .contact-cat-pill.general { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .contact-cat-pill.billing { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .contact-msg { font-size: 12px; color: var(--text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-kit="redesign"] .contact-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; letter-spacing: 0.04em; }

/* Timeline cyan dot (extends the existing tl-dot rules). */
[data-kit="redesign"] .tl-dot.cyan { border-color: var(--cyan); background: var(--cyan); }
[data-kit="redesign"] .tl-text .src-mini { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; margin-left: 6px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-dim); }

/* Admin notes (redesigned to use note-list / note-form classes). */
[data-kit="redesign"] .profile-notes-mount { background: var(--surface-1); }
[data-kit="redesign"] .note-list { display: flex; flex-direction: column; }
[data-kit="redesign"] .note-item { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
[data-kit="redesign"] .note-item:last-child { border-bottom: none; }
[data-kit="redesign"] .note-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-muted); }
[data-kit="redesign"] .note-meta b { color: var(--indigo-hi); font-weight: 600; }
[data-kit="redesign"] .note-meta .dot { color: var(--text-ghost); }
[data-kit="redesign"] .note-text { font-size: 12px; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
[data-kit="redesign"] .note-actions { display: flex; gap: 4px; }
[data-kit="redesign"] .note-actions button { width: 24px; height: 24px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-dim); transition: all var(--t); }
[data-kit="redesign"] .note-actions button:hover { background: var(--surface-2); color: var(--red-hi); }
[data-kit="redesign"] .note-actions svg { width: 12px; height: 12px; }
[data-kit="redesign"] .note-form { padding: 14px 18px; background: var(--surface-2); border-top: 1px solid var(--border-soft); }
[data-kit="redesign"] .note-input { display: block; width: 100%; min-height: 72px; padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font: inherit; font-size: 12px; resize: vertical; font-family: inherit; }
[data-kit="redesign"] .note-input:focus { outline: none; border-color: var(--border-focus); }
[data-kit="redesign"] .note-input::placeholder { color: var(--text-dim); }
[data-kit="redesign"] .note-form-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; gap: 10px; flex-wrap: wrap; }
[data-kit="redesign"] .note-warn { display: inline-flex; align-items: center; gap: 5px; color: var(--amber-hi); }
[data-kit="redesign"] .note-warn svg { width: 11px; height: 11px; }

/* On-demand loader cards. */
[data-kit="redesign"] .ondemand-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 800px) { [data-kit="redesign"] .ondemand-row { grid-template-columns: 1fr; } }
[data-kit="redesign"] .ondemand-card { background: var(--surface-1); border: 1px dashed var(--border-hi); border-radius: var(--r-xl); padding: 18px; text-align: center; cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .ondemand-card:hover { border-color: var(--indigo-dim); background: linear-gradient(180deg, var(--surface-1) 0%, var(--indigo-wash) 100%); }
[data-kit="redesign"] .ondemand-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-2); display: grid; place-items: center; margin: 0 auto 10px; color: var(--indigo-hi); }
[data-kit="redesign"] .ondemand-icon svg { width: 18px; height: 18px; }
[data-kit="redesign"] .ondemand-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
[data-kit="redesign"] .ondemand-sub { font-size: 11px; color: var(--text-muted); line-height: 1.5; font-family: var(--font-mono); letter-spacing: 0.02em; }
[data-kit="redesign"] .ondemand-cta { margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--indigo-hi); display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
[data-kit="redesign"] .ondemand-cta svg { width: 12px; height: 12px; }

/* Retention callout shown for churned subscriptions. */
[data-kit="redesign"] .retention-callout { background: linear-gradient(135deg, var(--amber-wash) 0%, var(--surface-1) 70%); border: 1px solid var(--amber-dim); border-radius: var(--r-lg); padding: 14px 18px; margin-bottom: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
[data-kit="redesign"] .retention-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--amber-wash); display: grid; place-items: center; color: var(--amber-hi); }
[data-kit="redesign"] .retention-icon svg { width: 18px; height: 18px; }
[data-kit="redesign"] .retention-text { font-size: 12px; color: var(--text); }
[data-kit="redesign"] .retention-text b { font-weight: 600; }
[data-kit="redesign"] .retention-text .meta { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 3px; letter-spacing: 0.02em; }

/* GDPR footer. */
[data-kit="redesign"] .gdpr-foot { background: var(--surface-1); border: 1px solid var(--red-dim); border-radius: var(--r-xl); padding: 14px 18px; margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
[data-kit="redesign"] .gdpr-text { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
[data-kit="redesign"] .gdpr-text svg { width: 14px; height: 14px; color: var(--red-hi); flex-shrink: 0; }
[data-kit="redesign"] .gdpr-text b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .gdpr-actions { display: flex; gap: 6px; flex-wrap: wrap; }
[data-kit="redesign"] .btn-danger-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-md); font-size: 12px; font-weight: 600; height: 30px; background: var(--surface-2); border: 1px solid var(--red-dim); color: var(--red-hi); cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .btn-danger-ghost:hover { background: var(--red-wash); }
[data-kit="redesign"] .btn-danger-ghost svg { width: 13px; height: 13px; }

/* ════════════════════════════════════════════════════════════════════════════
   POLAR PAGE - Session 6a migrated markup
   All rules scoped under [data-kit="redesign"] so they only apply to the
   migrated render functions. Mirrors makro_admin/06_polar.html.
   ════════════════════════════════════════════════════════════════════════ */

/* Page-head pulsing status pill (Connected indicator). */
[data-kit="redesign"] .polar-status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .polar-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s ease-in-out infinite; }
[data-kit="redesign"] .data-source { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); letter-spacing: 0.04em; padding: 1px 6px; background: var(--surface-2); border-radius: var(--r-sm); border: 1px solid var(--border-soft); display: inline-flex; align-items: center; gap: 4px; }
[data-kit="redesign"] .data-source svg { width: 10px; height: 10px; }
[data-kit="redesign"] .page-title-block .sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Toolbar (search + filter chips + spacer + actions). */
[data-kit="redesign"] .toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 8px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); flex-wrap: wrap; }
[data-kit="redesign"] .toolbar-search { flex: 1; min-width: 200px; max-width: 320px; position: relative; }
[data-kit="redesign"] .toolbar-search input { width: 100%; height: 28px; padding: 0 10px 0 30px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); font-family: inherit; }
[data-kit="redesign"] .toolbar-search input::placeholder { color: var(--text-dim); }
[data-kit="redesign"] .toolbar-search input:focus { outline: none; border-color: var(--border-focus); }
[data-kit="redesign"] .toolbar-search input:disabled { opacity: 0.5; cursor: not-allowed; }
[data-kit="redesign"] .toolbar-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-dim); }
[data-kit="redesign"] .toolbar-spacer { flex: 1; }

/* Polar-specific grid-aware tables. Each col-* class lives on BOTH the head
   row and the data rows. Using attribute scoping so the rules win over the
   default .tbl-row template defined for the Users page. */
[data-kit="redesign"] .tbl-head-row { display: grid; align-items: center; padding: 8px 14px; background: var(--bg-deep); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .tbl-head-row .col { display: inline-flex; align-items: center; gap: 4px; cursor: default; }
[data-kit="redesign"] .tbl-head-row .col.right { justify-content: flex-end; }

/* Override .tbl-row grid template per Polar tab. The Users-page .tbl-row
   default is overridden here when any col-* modifier is on the same row. */
[data-kit="redesign"] .tbl-row.col-customers { grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr 24px; gap: 12px; }
[data-kit="redesign"] .tbl-row.col-orders { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr auto; gap: 12px; }
[data-kit="redesign"] .tbl-row.col-checkout { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr auto; gap: 12px; }
[data-kit="redesign"] .tbl-row.col-refunds { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr 1fr auto; gap: 12px; }
[data-kit="redesign"] .tbl-head-row.col-customers { grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr 24px; gap: 12px; }
[data-kit="redesign"] .tbl-head-row.col-orders { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr auto; gap: 12px; }
[data-kit="redesign"] .tbl-head-row.col-discounts { grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr 1fr auto; gap: 12px; }
[data-kit="redesign"] .tbl-head-row.col-products { grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; gap: 12px; }
[data-kit="redesign"] .tbl-head-row.col-checkout { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr auto; gap: 12px; }
[data-kit="redesign"] .tbl-head-row.col-refunds { grid-template-columns: 1.6fr 1.6fr 1fr 1fr 1fr 1fr auto; gap: 12px; }

/* Cell-level helpers used inside Polar rows. */
[data-kit="redesign"] .tbl-row .id-mono { font-family: var(--font-mono); font-size: 11px; color: var(--text); letter-spacing: 0.02em; }
[data-kit="redesign"] .tbl-row .id-mono .prefix { font-weight: 600; }
[data-kit="redesign"] .tbl-row .id-mono .suffix { color: var(--text-dim); font-weight: 400; }
[data-kit="redesign"] .tbl-row .name { font-size: 13px; font-weight: 500; color: var(--text); }
[data-kit="redesign"] .tbl-row .name-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.02em; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
[data-kit="redesign"] .tbl-row .num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text); }
[data-kit="redesign"] .tbl-row .num.dim { color: var(--text-dim); }
[data-kit="redesign"] .tbl-row .num.green { color: var(--green-hi); }
[data-kit="redesign"] .tbl-row .num.amber { color: var(--amber-hi); }
[data-kit="redesign"] .tbl-row .num.indigo { color: var(--indigo-hi); }
[data-kit="redesign"] .tbl-row .num.right { text-align: right; }
[data-kit="redesign"] .tbl-row .timestamp { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }
[data-kit="redesign"] .tbl-row .timestamp .rel { color: var(--text-dim); font-size: 10px; }

/* Status / type pills shared across tabs. The .pill family. */
[data-kit="redesign"] .pill { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: 1px solid transparent; }
[data-kit="redesign"] .pill.active { background: var(--green-wash); color: var(--green-hi); border-color: var(--green-dim); }
[data-kit="redesign"] .pill.canceled { background: var(--surface-3); color: var(--text-muted); border-color: var(--border-hi); }
[data-kit="redesign"] .pill.past_due { background: var(--amber-wash); color: var(--amber-hi); border-color: var(--amber-dim); }
[data-kit="redesign"] .pill.paid { background: var(--green-wash); color: var(--green-hi); border-color: var(--green-dim); }
[data-kit="redesign"] .pill.refunded { background: var(--red-wash); color: var(--red-hi); border-color: var(--red-dim); }
[data-kit="redesign"] .pill.partial { background: var(--amber-wash); color: var(--amber-hi); border-color: var(--amber-dim); }
[data-kit="redesign"] .pill.expired { background: var(--surface-3); color: var(--text-dim); border-color: var(--border-hi); }
[data-kit="redesign"] .pill.recurring { background: var(--indigo-wash); color: var(--indigo-hi); border-color: var(--indigo-dim); }
[data-kit="redesign"] .pill.one-time { background: var(--cyan-wash); color: var(--cyan); border-color: var(--cyan); }
[data-kit="redesign"] .pill.archived { background: var(--surface-3); color: var(--text-dim); border-color: var(--border-hi); }

/* Tier-pill (Polar customer/product rows use this; existing tier-badge is
   the Users-page variant - keep both, names differ). */
[data-kit="redesign"] .tier-pill { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); }
[data-kit="redesign"] .tier-pill.premium { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .tier-pill.pro { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .tier-pill.free { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }

/* Row actions container (inline icon button group). */
[data-kit="redesign"] .row-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
[data-kit="redesign"] .row-actions button { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-dim); background: transparent; border: none; cursor: pointer; }
[data-kit="redesign"] .row-actions button:hover { background: var(--surface-3); color: var(--text); }
[data-kit="redesign"] .row-actions button.danger:hover { background: var(--red-wash); color: var(--red-hi); }
[data-kit="redesign"] .row-actions svg { width: 13px; height: 13px; }
[data-kit="redesign"] .action-link { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-sm); cursor: pointer; transition: all var(--t); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); width: auto; height: auto; }
[data-kit="redesign"] .action-link:hover { background: var(--surface-3); border-color: var(--border-hi); }
[data-kit="redesign"] .action-link.invoice { color: var(--text-muted); width: 26px; height: 26px; padding: 0; }
[data-kit="redesign"] .action-link.refund { color: var(--red-hi); border-color: var(--red-dim); }
[data-kit="redesign"] .action-link.refund:hover { background: var(--red-wash); }

/* Discount row (custom grid that mirrors col-discounts). */
[data-kit="redesign"] .discount-row { display: grid; align-items: center; grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr 1fr auto; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); transition: background var(--t); }
[data-kit="redesign"] .discount-row:last-child { border-bottom: none; }
[data-kit="redesign"] .discount-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .discount-code { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--indigo-hi); background: var(--indigo-wash); padding: 3px 8px; border-radius: var(--r-sm); letter-spacing: 0.04em; display: inline-block; width: fit-content; border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .discount-name { font-size: 12px; color: var(--text); margin-top: 4px; }
[data-kit="redesign"] .discount-row .num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text); }
[data-kit="redesign"] .discount-row .num.right { text-align: right; }
[data-kit="redesign"] .discount-row .num.indigo { color: var(--indigo-hi); }
[data-kit="redesign"] .discount-row .timestamp { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }

/* Product card grid (for the Products tab). */
[data-kit="redesign"] .product-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 18px; display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; transition: border-color var(--t); }
[data-kit="redesign"] .product-card:hover { border-color: var(--border-hi); }
[data-kit="redesign"] .product-card .name { font-size: 14px; }
[data-kit="redesign"] .product-card .name-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.02em; }
[data-kit="redesign"] .product-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--surface-3); display: grid; place-items: center; color: var(--text-muted); }
[data-kit="redesign"] .product-icon svg { width: 17px; height: 17px; }
[data-kit="redesign"] .product-card .num { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
[data-kit="redesign"] .product-card .num.right { text-align: right; }
[data-kit="redesign"] .product-card .row-actions button { width: 30px; height: 30px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
[data-kit="redesign"] .product-card .row-actions button:hover { background: var(--surface-3); border-color: var(--border-hi); }
[data-kit="redesign"] .product-card .row-actions svg { width: 14px; height: 14px; }

/* Form input scoped for Polar create forms. */
[data-kit="redesign"] .form-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 4px; }
[data-kit="redesign"] .form-input { width: 100%; height: 32px; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); font-family: inherit; }
[data-kit="redesign"] select.form-input { padding-right: 24px; }
[data-kit="redesign"] .form-input:focus { outline: none; border-color: var(--border-focus); }
[data-kit="redesign"] .hidden { display: none !important; }

/* Polar empty-state inside tables (overrides the Users-page .empty-state). */
[data-kit="redesign"] .tbl-card .empty-state { padding: 60px 20px; text-align: center; color: var(--text-dim); font-size: 13px; }
[data-kit="redesign"] .tbl-card .empty-state svg { width: 40px; height: 40px; opacity: 0.3; margin-bottom: 12px; }
[data-kit="redesign"] .tbl-card .empty-state b { color: var(--text-muted); display: block; font-size: 14px; margin-bottom: 4px; }

/* Table head row uses the .col modifier for grid layout - already styled
   above. Foot pagination text and pager buttons reuse the existing
   .tbl-foot / .pager rules at lines 501-507. */
@media (max-width: 1100px) {
  [data-kit="redesign"] .tbl-head-row.col-customers,
  [data-kit="redesign"] .tbl-head-row.col-orders,
  [data-kit="redesign"] .tbl-head-row.col-discounts,
  [data-kit="redesign"] .tbl-head-row.col-products,
  [data-kit="redesign"] .tbl-head-row.col-checkout,
  [data-kit="redesign"] .tbl-head-row.col-refunds { display: none; }
  [data-kit="redesign"] .tbl-row.col-customers,
  [data-kit="redesign"] .tbl-row.col-orders,
  [data-kit="redesign"] .tbl-row.col-checkout,
  [data-kit="redesign"] .tbl-row.col-refunds,
  [data-kit="redesign"] .discount-row { grid-template-columns: 1fr; padding: 14px; gap: 6px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   POLAR CUSTOMER DETAIL - Session 6b
   Subscription card (green-highlighted outer), lens-row (header switcher),
   copy-id meta affordance, identity-card cross-references list. All rules
   scoped under [data-kit="redesign"]; mirrors makro_admin/07_polar_customer_detail.html.
   ════════════════════════════════════════════════════════════════════════ */

/* Header copy-id button (sits inside .ch-meta-item). */
[data-kit="redesign"] .ch-meta-item .copy-id { cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); transition: all var(--t); font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; }
[data-kit="redesign"] .ch-meta-item .copy-id:hover { background: var(--surface-2); color: var(--indigo-hi); }
[data-kit="redesign"] .ch-meta-item .copy-id svg { width: 11px; height: 11px; }

/* Lens-row pill switcher embedded in cust-header. */
[data-kit="redesign"] .lens-row { display: flex; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
[data-kit="redesign"] .lens-row .lens-pill.billing-active { background: var(--green-wash); color: var(--green-hi); border-color: var(--green-dim); cursor: default; }
[data-kit="redesign"] .lens-divider { font-family: var(--font-mono); font-size: 9px; color: var(--text-ghost); letter-spacing: 0.14em; text-transform: uppercase; padding: 0 4px; }

/* Subscription card - green-highlighted outer wrapper. The inner .sub-grid /
   .sub-cell rules are already defined above; this just adds the outer card
   chrome and head/foot. */
[data-kit="redesign"] .sub-card { background: linear-gradient(135deg, var(--green-wash) 0%, var(--surface-1) 30%, var(--surface-1) 100%); border: 1px solid var(--green-dim); border-radius: var(--r-xl); margin-bottom: 14px; position: relative; overflow: hidden; }
[data-kit="redesign"] .sub-card .sub-grid { grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; }
@media (max-width: 900px) { [data-kit="redesign"] .sub-card .sub-grid { grid-template-columns: repeat(2, 1fr); } }
[data-kit="redesign"] .sub-card-head { padding: 14px 22px; border-bottom: 1px solid var(--green-dim); display: flex; align-items: center; justify-content: space-between; gap: 14px; background: rgba(34, 197, 94, 0.04); position: relative; z-index: 1; }
[data-kit="redesign"] .sub-card-head-left { display: flex; align-items: center; gap: 12px; }
[data-kit="redesign"] .sub-icon { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--green-wash); border: 1px solid var(--green-dim); display: grid; place-items: center; color: var(--green-hi); flex-shrink: 0; }
[data-kit="redesign"] .sub-icon svg { width: 17px; height: 17px; }
[data-kit="redesign"] .sub-card-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-kit="redesign"] .sub-card-attr { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 2px; }
[data-kit="redesign"] .sub-card .sub-value.dim { color: var(--text-dim); font-style: italic; }
[data-kit="redesign"] .sub-card .sub-value.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; font-weight: 600; }
[data-kit="redesign"] .sub-card .sub-value.green { color: var(--green-hi); }
[data-kit="redesign"] .sub-card .sub-value.amber { color: var(--amber-hi); }
[data-kit="redesign"] .sub-foot { padding: 12px 18px; border-top: 1px solid var(--border-soft); background: rgba(34, 197, 94, 0.03); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; position: relative; z-index: 1; gap: 12px; flex-wrap: wrap; }
[data-kit="redesign"] .sub-foot-actions { display: flex; gap: 6px; flex-wrap: wrap; }
[data-kit="redesign"] .sub-foot-actions .btn { height: 26px; font-size: 11px; padding: 4px 10px; }
[data-kit="redesign"] .sub-foot-actions .btn-danger-ghost { height: 26px; font-size: 11px; padding: 4px 10px; }

/* Subscription empty state (when subscriptions[] is empty). */
[data-kit="redesign"] .sub-empty { padding: 30px 24px; text-align: center; color: var(--text-dim); font-size: 13px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); margin-bottom: 14px; }
[data-kit="redesign"] .sub-empty svg { width: 32px; height: 32px; opacity: 0.4; margin-bottom: 10px; }
[data-kit="redesign"] .sub-empty b { color: var(--text-muted); display: block; font-size: 14px; margin-bottom: 4px; }

/* KV "dim" value variant (used for None / unset fields). */
[data-kit="redesign"] .kv-value.dim { color: var(--text-dim); font-style: italic; }

/* Cross-references list (other lenses card body). */
[data-kit="redesign"] .xref-list { padding: 0; }
[data-kit="redesign"] .xref-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; cursor: pointer; transition: background var(--t); border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .xref-row:last-child { border-bottom: none; }
[data-kit="redesign"] .xref-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .xref-row.disabled { cursor: not-allowed; opacity: 0.55; }
[data-kit="redesign"] .xref-row.disabled:hover { background: transparent; }
[data-kit="redesign"] .xref-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
[data-kit="redesign"] .xref-icon.indigo { background: var(--indigo-wash); color: var(--indigo-hi); }
[data-kit="redesign"] .xref-icon.cyan { background: var(--cyan-wash); color: var(--cyan); }
[data-kit="redesign"] .xref-icon.neutral { background: var(--surface-3); color: var(--text-muted); }
[data-kit="redesign"] .xref-icon svg { width: 15px; height: 15px; }
[data-kit="redesign"] .xref-title { font-size: 12px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .xref-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 2px; }
[data-kit="redesign"] .xref-arrow { color: var(--text-dim); }
[data-kit="redesign"] .xref-arrow svg { width: 14px; height: 14px; }

/* card-foot link used by the Orders card on this page (already exists; this
   adds the "right-side" arrow link with the meta count on the left). */

/* ════════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE - Session 7a
   Reference: makro_admin/13_notifications.html
   ════════════════════════════════════════════════════════════════════════════ */

/* stat-value color variants used by the feed/triggers stat strips */
[data-kit="redesign"] .stat-value.indigo { color: var(--indigo-hi); }
[data-kit="redesign"] .stat-value.green { color: var(--green-hi); }
[data-kit="redesign"] .stat-value.amber { color: var(--amber-hi); }
[data-kit="redesign"] .stat-value.red { color: var(--red-hi); }

/* card-body.flush - used by feed/trigger rows that lay out a borderless
   list inside a card */
[data-kit="redesign"] .card-body.flush { padding: 0; }

/* Feed row - notifications feed list */
[data-kit="redesign"] .feed-row { display: grid; grid-template-columns: 36px 1fr auto auto auto; gap: 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background var(--t); }
[data-kit="redesign"] .feed-row:last-child { border-bottom: none; }
[data-kit="redesign"] .feed-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .feed-row.unread { background: rgba(99, 102, 241, 0.04); }
[data-kit="redesign"] .feed-row .feed-icon.broadcast { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); width: 36px; height: 36px; }
[data-kit="redesign"] .feed-row .feed-icon.triggered { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); width: 36px; height: 36px; }
[data-kit="redesign"] .feed-row .feed-icon.failed { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); width: 36px; height: 36px; }
[data-kit="redesign"] .feed-row .feed-icon svg { width: 17px; height: 17px; }
[data-kit="redesign"] .feed-body { min-width: 0; }
[data-kit="redesign"] .feed-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
[data-kit="redesign"] .feed-title { font-size: 13px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .feed-trigger-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); white-space: nowrap; }
[data-kit="redesign"] .feed-trigger-pill.broadcast { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .feed-trigger-pill.triggered { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }
[data-kit="redesign"] .feed-trigger-pill.system { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .feed-body-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-kit="redesign"] .feed-recipient { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
[data-kit="redesign"] .feed-recipient svg { width: 10px; height: 10px; opacity: 0.7; }
[data-kit="redesign"] .feed-recipient .seg { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 100px; background: var(--bg-deep); border: 1px solid var(--border-soft); color: var(--text-dim); }
[data-kit="redesign"] .feed-recipient .seg.event-id { color: var(--cyan); }
[data-kit="redesign"] .feed-channels { display: flex; gap: 4px; flex-shrink: 0; }
[data-kit="redesign"] .channel-chip { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); position: relative; }
[data-kit="redesign"] .channel-chip svg { width: 13px; height: 13px; }
[data-kit="redesign"] .channel-chip.active { background: var(--indigo-wash); border-color: var(--indigo-dim); color: var(--indigo-hi); }
[data-kit="redesign"] .channel-chip.failed { background: var(--red-wash); border-color: var(--red-dim); color: var(--red-hi); }
[data-kit="redesign"] .feed-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
[data-kit="redesign"] .feed-recipients-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
[data-kit="redesign"] .feed-recipients-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; }
[data-kit="redesign"] .feed-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; text-align: right; white-space: nowrap; flex-shrink: 0; }

/* Compose tab grid */
[data-kit="redesign"] .compose-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 1100px) { [data-kit="redesign"] .compose-grid { grid-template-columns: 1fr; } }
[data-kit="redesign"] .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
[data-kit="redesign"] .form-textarea { width: 100%; min-height: 120px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; color: var(--text); font-family: inherit; resize: vertical; line-height: 1.5; }
[data-kit="redesign"] .form-textarea:focus { outline: none; border-color: var(--border-focus); }
[data-kit="redesign"] .form-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; display: flex; justify-content: space-between; }

/* Channel toggles inside the Compose card */
[data-kit="redesign"] .channel-toggle-list { display: flex; flex-direction: column; gap: 8px; }
[data-kit="redesign"] .channel-toggle { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
[data-kit="redesign"] .channel-toggle:hover { border-color: var(--border-hi); }
[data-kit="redesign"] .channel-toggle.on { border-color: var(--indigo-dim); background: var(--indigo-wash); }
[data-kit="redesign"] .channel-toggle.disabled { opacity: 0.5; cursor: not-allowed; }
[data-kit="redesign"] .channel-toggle-icon { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; color: var(--text-muted); }
[data-kit="redesign"] .channel-toggle.on .channel-toggle-icon { background: var(--indigo); color: white; }
[data-kit="redesign"] .channel-toggle-icon svg { width: 14px; height: 14px; }
[data-kit="redesign"] .channel-toggle-info { min-width: 0; }
[data-kit="redesign"] .channel-toggle-name { font-size: 12px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .channel-toggle-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 2px; }

/* Audience grid */
[data-kit="redesign"] .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 800px) { [data-kit="redesign"] .audience-grid { grid-template-columns: repeat(2, 1fr); } }
[data-kit="redesign"] .audience-pill { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--t); text-align: center; display: flex; flex-direction: column; gap: 3px; align-items: center; }
[data-kit="redesign"] .audience-pill:hover { border-color: var(--border-hi); }
[data-kit="redesign"] .audience-pill.set { background: var(--indigo-wash); color: var(--indigo-hi); border-color: var(--indigo-dim); }
[data-kit="redesign"] .audience-pill .count { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); font-weight: 600; letter-spacing: 0.04em; }
[data-kit="redesign"] .audience-pill.set .count { color: var(--indigo-hi); }

/* Preview pane (right side of Compose grid) */
[data-kit="redesign"] .preview-pane { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin-top: 4px; }
[data-kit="redesign"] .preview-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
[data-kit="redesign"] .in-app-preview { background: var(--surface-2); border: 1px solid var(--border-hi); border-radius: var(--r-md); padding: 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
[data-kit="redesign"] .in-app-preview-icon { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--indigo), var(--indigo-dim)); display: grid; place-items: center; color: white; flex-shrink: 0; }
[data-kit="redesign"] .in-app-preview-icon svg { width: 14px; height: 14px; }
[data-kit="redesign"] .in-app-preview-body { min-width: 0; }
[data-kit="redesign"] .in-app-preview-title { font-size: 12px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .in-app-preview-text { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; }
[data-kit="redesign"] .in-app-preview-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }

/* Compose foot bar */
[data-kit="redesign"] .compose-foot { margin-top: 14px; padding: 12px 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
[data-kit="redesign"] .compose-foot-info { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
[data-kit="redesign"] .compose-foot-info b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .compose-foot-actions { display: flex; gap: 6px; }

/* Trigger row (Triggers tab) */
[data-kit="redesign"] .trigger-row { display: grid; grid-template-columns: 38px 1fr 200px auto auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
@media (max-width: 1100px) { [data-kit="redesign"] .trigger-row { grid-template-columns: 38px 1fr auto auto; } [data-kit="redesign"] .trigger-row .trigger-channels { display: none; } }
[data-kit="redesign"] .trigger-row:last-child { border-bottom: none; }
[data-kit="redesign"] .trigger-icon { width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center; }
[data-kit="redesign"] .trigger-icon svg { width: 18px; height: 18px; }
[data-kit="redesign"] .trigger-icon.signup { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .trigger-icon.sync { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .trigger-icon.churn { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .trigger-icon.cart { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .trigger-icon.beta { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }
[data-kit="redesign"] .trigger-icon.quota { background: var(--purple-wash); color: var(--purple-hi); border: 1px solid var(--purple-dim); }
[data-kit="redesign"] .trigger-icon.inactive { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .trigger-body { min-width: 0; }
[data-kit="redesign"] .trigger-name { font-size: 13px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .trigger-event { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
[data-kit="redesign"] .trigger-event .event-id { background: var(--bg-deep); border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--r-sm); color: var(--cyan); }
[data-kit="redesign"] .trigger-channels { display: flex; gap: 5px; }
[data-kit="redesign"] .trigger-channels .channel-chip { width: 22px; height: 22px; }
[data-kit="redesign"] .trigger-channels .channel-chip svg { width: 11px; height: 11px; }
[data-kit="redesign"] .trigger-stats { text-align: right; font-family: var(--font-mono); }
[data-kit="redesign"] .trigger-stats-num { font-size: 13px; font-weight: 700; color: var(--text); }
[data-kit="redesign"] .trigger-stats-label { font-size: 9px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

/* Channel card (Channels tab) */
[data-kit="redesign"] .channel-card { padding: 18px; }
[data-kit="redesign"] .channel-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
[data-kit="redesign"] .channel-card-icon { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
[data-kit="redesign"] .channel-card-icon svg { width: 18px; height: 18px; }
[data-kit="redesign"] .channel-card-icon.in-app { background: var(--indigo); color: white; }
[data-kit="redesign"] .channel-card-icon.email { background: var(--amber); color: white; }
[data-kit="redesign"] .channel-card-icon.push { background: var(--purple); color: white; }
[data-kit="redesign"] .channel-card-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
[data-kit="redesign"] .channel-card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 2px; }
[data-kit="redesign"] .channel-status-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .channel-status-pill.healthy { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .channel-status-pill.disabled { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .channel-status-pill.healthy::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .channel-status-pill.disabled::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); }
[data-kit="redesign"] .kv-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
[data-kit="redesign"] .kv-mini { background: var(--surface-2); padding: 9px 12px; border-radius: var(--r-md); }
[data-kit="redesign"] .kv-mini-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .kv-mini-value { font-family: var(--font-mono); font-size: 14px; font-weight: 700; margin-top: 3px; }
[data-kit="redesign"] .kv-mini-value.green { color: var(--green-hi); }
[data-kit="redesign"] .kv-mini-value.muted { color: var(--text-muted); font-weight: 500; font-size: 12px; }

/* ============================================================================
   Cart Recovery page - all selectors scoped under [data-kit="redesign"]
   ============================================================================ */

/* Header recovery pill (Active / Off badge in h1) */
[data-kit="redesign"] .recovery-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); vertical-align: middle; }
[data-kit="redesign"] .recovery-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s ease-in-out infinite; }
[data-kit="redesign"] .recovery-pill.off { background: var(--surface-3); color: var(--text-muted); border-color: var(--border-hi); }
[data-kit="redesign"] .recovery-pill.off::before { background: var(--text-dim); box-shadow: none; animation: none; }

/* Cart-recovery 3-stage horizontal funnel (cr-* prefix avoids collision with
   the existing .funnel-bar vertical funnel used elsewhere in the redesign). */
[data-kit="redesign"] .cr-funnel { display: flex; align-items: stretch; padding: 18px; gap: 0; }
[data-kit="redesign"] .cr-funnel-stage { flex: 1; padding: 14px 18px; background: var(--surface-2); position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-kit="redesign"] .cr-funnel-stage:not(:last-child) { margin-right: 12px; }
[data-kit="redesign"] .cr-funnel-stage:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border: 12px solid transparent; border-left-color: var(--surface-2); }
[data-kit="redesign"] .cr-funnel-stage:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
[data-kit="redesign"] .cr-funnel-stage:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
[data-kit="redesign"] .cr-funnel-stage.abandoned { background: var(--amber-wash); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .cr-funnel-stage.abandoned::after { border-left-color: var(--amber-wash); }
[data-kit="redesign"] .cr-funnel-stage.nudged { background: var(--indigo-wash); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .cr-funnel-stage.nudged::after { border-left-color: var(--indigo-wash); }
[data-kit="redesign"] .cr-funnel-stage.recovered { background: var(--green-wash); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .cr-funnel-stage-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .cr-funnel-stage-label svg { width: 11px; height: 11px; }
[data-kit="redesign"] .cr-funnel-stage.abandoned .cr-funnel-stage-label { color: var(--amber-hi); }
[data-kit="redesign"] .cr-funnel-stage.nudged .cr-funnel-stage-label { color: var(--indigo-hi); }
[data-kit="redesign"] .cr-funnel-stage.recovered .cr-funnel-stage-label { color: var(--green-hi); }
[data-kit="redesign"] .cr-funnel-stage-num { font-family: var(--font-mono); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
[data-kit="redesign"] .cr-funnel-stage.abandoned .cr-funnel-stage-num { color: var(--amber-hi); }
[data-kit="redesign"] .cr-funnel-stage.nudged .cr-funnel-stage-num { color: var(--indigo-hi); }
[data-kit="redesign"] .cr-funnel-stage.recovered .cr-funnel-stage-num { color: var(--green-hi); }
[data-kit="redesign"] .cr-funnel-stage-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.02em; }
[data-kit="redesign"] .cr-funnel-stage-meta b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .cr-funnel-foot { border-top: 1px solid var(--border-soft); padding: 11px 18px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; display: flex; justify-content: space-between; gap: 10px; }

/* Settings rows */
[data-kit="redesign"] .setting-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .setting-row:last-child { border-bottom: none; }
[data-kit="redesign"] .setting-info { min-width: 0; }
[data-kit="redesign"] .setting-name { font-size: 13px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .setting-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
[data-kit="redesign"] .setting-desc b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .setting-desc code { font-family: var(--font-mono); font-size: 11px; background: var(--bg-deep); padding: 1px 6px; border-radius: 3px; color: var(--cyan); letter-spacing: 0.02em; }

/* Inline number + select inputs (used in setting-row controls) */
[data-kit="redesign"] .inline-input { height: 28px; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); font-family: var(--font-mono); letter-spacing: 0.02em; width: 92px; text-align: center; }
[data-kit="redesign"] .inline-input:focus { outline: none; border-color: var(--border-focus); }
[data-kit="redesign"] .inline-input:disabled { opacity: 0.5; cursor: not-allowed; }
[data-kit="redesign"] .inline-select { height: 28px; padding: 0 26px 0 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); font-family: var(--font-mono); letter-spacing: 0.02em; }
[data-kit="redesign"] .inline-select:focus { outline: none; border-color: var(--border-focus); }
[data-kit="redesign"] .inline-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Cart-recovery row grid (7-col, cr-cols variant of .tbl-row / .tbl-head-row) */
[data-kit="redesign"] .tbl-head-row.cr-cols { grid-template-columns: 1.3fr 1.4fr 0.9fr 1.1fr 0.9fr 1.2fr 1.2fr; gap: 12px; }
[data-kit="redesign"] .tbl-row.cr-cols { grid-template-columns: 1.3fr 1.4fr 0.9fr 1.1fr 0.9fr 1.2fr 1.2fr; gap: 12px; }
[data-kit="redesign"] .tbl-row .id-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-kit="redesign"] .tbl-row .product-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Cart-recovery status pills - cr- prefix avoids collision with shared .pill family */
[data-kit="redesign"] .cr-status-pill { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; width: fit-content; }
[data-kit="redesign"] .cr-status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .cr-status-pill.cr-pill-queued { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .cr-status-pill.cr-pill-queued::before { background: var(--text-dim); }
[data-kit="redesign"] .cr-status-pill.cr-pill-nudged { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .cr-status-pill.cr-pill-nudged::before { background: var(--indigo); }
[data-kit="redesign"] .cr-status-pill.cr-pill-recovered { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .cr-status-pill.cr-pill-recovered::before { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .cr-status-pill.cr-pill-lost { background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .cr-status-pill.cr-pill-lost::before { background: var(--text-ghost); }
[data-kit="redesign"] .cr-status-pill.cr-pill-stuck { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .cr-status-pill.cr-pill-stuck::before { background: var(--red); }

/* Discount tag (cart-recovery rows) */
[data-kit="redesign"] .discount-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--amber-hi); background: var(--amber-wash); padding: 2px 7px; border-radius: var(--r-sm); letter-spacing: 0.04em; border: 1px solid var(--amber-dim); display: inline-block; width: fit-content; }
[data-kit="redesign"] .discount-tag.none { color: var(--text-dim); background: var(--surface-2); border-color: var(--border-hi); }

/* Drop-off / status-breakdown bar rows */
[data-kit="redesign"] .dropoff-list { display: flex; flex-direction: column; padding: 6px 0; }
[data-kit="redesign"] .dropoff-row { display: grid; grid-template-columns: 1.4fr 1fr 60px; gap: 12px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
[data-kit="redesign"] .dropoff-row:last-child { border-bottom: none; }
[data-kit="redesign"] .dropoff-name { color: var(--text); }
[data-kit="redesign"] .dropoff-bar-track { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
[data-kit="redesign"] .dropoff-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--amber-dim), var(--amber)); }
[data-kit="redesign"] .dropoff-bar-fill.green { background: linear-gradient(90deg, var(--green-dim), var(--green)); }
[data-kit="redesign"] .dropoff-bar-fill.indigo { background: linear-gradient(90deg, var(--indigo-dim), var(--indigo)); }
[data-kit="redesign"] .dropoff-bar-fill.amber { background: linear-gradient(90deg, var(--amber-dim), var(--amber)); }
[data-kit="redesign"] .dropoff-bar-fill.dim { background: var(--border-hi); }
[data-kit="redesign"] .dropoff-count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: right; color: var(--text); }

/* Privacy footer */
[data-kit="redesign"] .page-foot { margin-top: 20px; padding: 12px 16px; background: var(--surface-1); border: 1px dashed var(--border); border-radius: var(--r-md); display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted); }
[data-kit="redesign"] .page-foot svg { width: 14px; height: 14px; color: var(--green-hi); flex-shrink: 0; }
[data-kit="redesign"] .page-foot b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .page-foot code { font-family: var(--font-mono); font-size: 10px; background: var(--bg-deep); padding: 1px 5px; border-radius: 3px; color: var(--cyan); }

/* stat-value tone helpers used on cart recovery (extend the existing palette) */
[data-kit="redesign"] .stat-value.amber { color: var(--amber-hi); }
[data-kit="redesign"] .stat-value.green { color: var(--green-hi); }
[data-kit="redesign"] .stat-value.indigo { color: var(--indigo-hi); }
[data-kit="redesign"] .stat-value.dim { color: var(--text-dim); }

/* ============================================================
   Promotions page (renderPromotions)
   - Visual classes for the active-campaign cards, banner preview,
     and the All Promotions list. Scoped under data-kit="redesign"
     so they only apply inside the page wrapper.
   ============================================================ */

/* Banner preview rail */
[data-kit="redesign"] .banner-card-body { padding: 14px 18px; }
[data-kit="redesign"] .surface-row { display: flex; gap: 6px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .surface-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .surface-chip:hover { border-color: var(--border-hi); color: var(--text); }
[data-kit="redesign"] .surface-chip.active { background: var(--indigo-wash); color: var(--indigo-hi); border-color: var(--indigo-dim); }
[data-kit="redesign"] .surface-chip svg { width: 11px; height: 11px; }

[data-kit="redesign"] .banner-mock { background: linear-gradient(135deg, #1a1f2e 0%, #11141b 100%); border: 1px solid var(--amber-dim); border-radius: var(--r-md); padding: 16px; position: relative; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
[data-kit="redesign"] .banner-mock.empty { border-color: var(--border-hi); opacity: 0.7; }
[data-kit="redesign"] .banner-mock::before { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--amber) 0%, transparent 50%); opacity: 0.15; pointer-events: none; }
[data-kit="redesign"] .banner-mock.empty::before { background: linear-gradient(135deg, var(--border-hi) 0%, transparent 50%); }
[data-kit="redesign"] .banner-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-hi); margin-bottom: 8px; position: relative; }
[data-kit="redesign"] .banner-mock.empty .banner-eyebrow { color: var(--text-dim); }
[data-kit="redesign"] .banner-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin-bottom: 6px; position: relative; }
[data-kit="redesign"] .banner-body { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; position: relative; }
[data-kit="redesign"] .banner-body strong { color: var(--text); font-family: var(--font-mono); }
[data-kit="redesign"] .banner-cta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--amber); color: var(--bg-deep); border-radius: var(--r-md); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; position: relative; }
[data-kit="redesign"] .banner-cta svg { width: 12px; height: 12px; }

[data-kit="redesign"] .banner-meta-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }
[data-kit="redesign"] .banner-meta-row b { color: var(--text-muted); font-weight: 600; }
[data-kit="redesign"] .banner-kv { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-soft); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; }
[data-kit="redesign"] .banner-kv-key { color: var(--text-dim); }
[data-kit="redesign"] .banner-kv-val { color: var(--text); font-weight: 500; }
[data-kit="redesign"] .banner-kv-val .code { color: var(--cyan); }

/* Active campaigns - card rows (5 columns: strip, icon, info, stats, actions) */
[data-kit="redesign"] .promo-card-active { display: grid; grid-template-columns: 4px 56px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); transition: background var(--t); }
[data-kit="redesign"] .promo-card-active:last-child { border-bottom: none; }
[data-kit="redesign"] .promo-card-active:hover { background: var(--surface-2); }
[data-kit="redesign"] .promo-strip { width: 4px; height: 50px; border-radius: 2px; background: var(--text-ghost); }
[data-kit="redesign"] .promo-strip.launch { background: var(--green); }
[data-kit="redesign"] .promo-strip.winback { background: var(--amber); }
[data-kit="redesign"] .promo-strip.referral { background: var(--purple); }
[data-kit="redesign"] .promo-strip.seasonal { background: var(--pink); }
[data-kit="redesign"] .promo-strip.founding { background: var(--indigo); }

[data-kit="redesign"] .promo-icon { width: 56px; height: 50px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; font-family: var(--font-mono); text-align: center; }
[data-kit="redesign"] .promo-icon.launch { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .promo-icon.winback { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .promo-icon.referral { background: var(--purple-wash); color: var(--purple-hi); border: 1px solid var(--purple-dim); }
[data-kit="redesign"] .promo-icon.seasonal { background: rgba(236, 72, 153, 0.10); color: var(--pink-hi); border: 1px solid var(--pink); }
[data-kit="redesign"] .promo-icon.founding { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .promo-icon-num { font-size: 18px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
[data-kit="redesign"] .promo-icon-label { font-size: 9px; opacity: 0.75; margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }

[data-kit="redesign"] .promo-info { min-width: 0; }
[data-kit="redesign"] .promo-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
[data-kit="redesign"] .promo-name { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

/* Status pills (active / scheduled / paused / expired / draft) */
[data-kit="redesign"] .promo-status-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .promo-status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .promo-status-pill.active { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .promo-status-pill.active::before { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .promo-status-pill.scheduled { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }
[data-kit="redesign"] .promo-status-pill.scheduled::before { background: var(--cyan); }
[data-kit="redesign"] .promo-status-pill.paused { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .promo-status-pill.paused::before { background: var(--amber); }
[data-kit="redesign"] .promo-status-pill.expired { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .promo-status-pill.expired::before { background: var(--text-dim); }
[data-kit="redesign"] .promo-status-pill.draft { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
[data-kit="redesign"] .promo-status-pill.draft::before { background: var(--text-ghost); }

/* Type pills (launch / winback / referral / seasonal / founding) */
[data-kit="redesign"] .promo-type-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); }
[data-kit="redesign"] .promo-type-pill.launch { color: var(--green-hi); background: var(--green-wash); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .promo-type-pill.winback { color: var(--amber-hi); background: var(--amber-wash); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .promo-type-pill.referral { color: var(--purple-hi); background: var(--purple-wash); border: 1px solid var(--purple-dim); }
[data-kit="redesign"] .promo-type-pill.seasonal { color: var(--pink-hi); background: rgba(236, 72, 153, 0.10); border: 1px solid var(--pink); }
[data-kit="redesign"] .promo-type-pill.founding { color: var(--indigo-hi); background: var(--indigo-wash); border: 1px solid var(--indigo-dim); }

/* Body text (code pill + arrow + meta) */
[data-kit="redesign"] .promo-body-text { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
[data-kit="redesign"] .promo-body-text .code-pill { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--indigo-hi); background: var(--indigo-wash); padding: 1px 7px; border-radius: var(--r-sm); letter-spacing: 0.04em; border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .promo-body-text .arrow { color: var(--text-ghost); }
[data-kit="redesign"] .promo-body-text b { color: var(--text); font-weight: 600; }

/* Right-aligned stats column on the active-campaign row */
[data-kit="redesign"] .promo-stats { text-align: right; display: flex; flex-direction: column; gap: 2px; }
[data-kit="redesign"] .promo-stats-num { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); line-height: 1; }
[data-kit="redesign"] .promo-stats-num.green { color: var(--green-hi); }
[data-kit="redesign"] .promo-stats-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }
[data-kit="redesign"] .promo-revenue { font-family: var(--font-mono); font-size: 10px; color: var(--green-hi); letter-spacing: 0.02em; margin-top: 4px; font-weight: 600; }

/* Row action buttons */
[data-kit="redesign"] .promo-row-actions { display: flex; gap: 4px; align-items: center; }
[data-kit="redesign"] .promo-row-actions button { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-dim); transition: all var(--t); background: none; border: none; cursor: pointer; }
[data-kit="redesign"] .promo-row-actions button:hover { background: var(--surface-3); color: var(--text); }
[data-kit="redesign"] .promo-row-actions button.danger:hover { background: var(--red-wash); color: var(--red-hi); }
[data-kit="redesign"] .promo-row-actions svg { width: 14px; height: 14px; }

/* All promotions table rows - same grid as the head row */
[data-kit="redesign"] .tbl-head-row.promo-cols { grid-template-columns: 1fr 100px 100px 1fr auto auto; gap: 14px; padding: 8px 18px; }
[data-kit="redesign"] .all-promo-row { display: grid; grid-template-columns: 1fr 100px 100px 1fr auto auto; gap: 14px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--border-soft); transition: background var(--t); }
[data-kit="redesign"] .all-promo-row:last-child { border-bottom: none; }
[data-kit="redesign"] .all-promo-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .all-promo-row .name-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-kit="redesign"] .all-promo-row .name { font-size: 13px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .all-promo-row .meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
[data-kit="redesign"] .all-promo-row .num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-align: right; letter-spacing: 0.02em; }
[data-kit="redesign"] .all-promo-row .num.dim { color: var(--text-dim); }
[data-kit="redesign"] .all-promo-row .num.green { color: var(--green-hi); }
[data-kit="redesign"] .all-promo-row .timeline-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }
[data-kit="redesign"] .all-promo-row .timeline-meta .relative { display: block; color: var(--text-dim); font-size: 10px; margin-top: 2px; }

/* Responsive: stack the all-promo grid into label/value pairs below 800px */
@media (max-width: 800px) {
  [data-kit="redesign"] .promo-card-active { grid-template-columns: 4px 1fr; grid-template-areas: "strip info" "strip stats" "strip actions"; }
  [data-kit="redesign"] .promo-card-active .promo-icon { display: none; }
  [data-kit="redesign"] .promo-card-active .promo-info { grid-area: info; }
  [data-kit="redesign"] .promo-card-active .promo-stats { grid-area: stats; text-align: left; }
  [data-kit="redesign"] .promo-card-active .promo-row-actions { grid-area: actions; }
  [data-kit="redesign"] .tbl-head-row.promo-cols { display: none; }
  [data-kit="redesign"] .all-promo-row { grid-template-columns: 1fr auto; gap: 8px; }
}

/* Edit-form button-row + hidden helper (re-use existing .hidden if defined,
   but the renderPromotions output toggles via classList directly) */
[data-kit="redesign"] #promo-form-container.hidden { display: none; }
[data-kit="redesign"] #promo-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
[data-kit="redesign"] #promo-form .form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
[data-kit="redesign"] #promo-form input[type="text"], [data-kit="redesign"] #promo-form input[type="number"], [data-kit="redesign"] #promo-form input[type="datetime-local"], [data-kit="redesign"] #promo-form select { width: 100%; height: 32px; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); font-family: inherit; }
[data-kit="redesign"] #promo-form select[multiple] { height: auto; padding: 4px; }
[data-kit="redesign"] #promo-form input:focus, [data-kit="redesign"] #promo-form select:focus { outline: none; border-color: var(--border-focus); }
@media (max-width: 800px) {
  [data-kit="redesign"] #promo-form .form-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ANNOUNCEMENTS PAGE - split-pane (list left, editor right). The reference
   markup at makro_admin/16_announcements.html is the canonical source for
   class names and the visual model. Scoped under [data-kit="redesign"] so
   these rules only apply inside the renderAnnouncements wrapper.
   ════════════════════════════════════════════════════════════════════════ */

/* Split-pane: distinct from the customers .split which uses fixed 380px and
   100vh. The announcements split is a regular grid that scrolls with the
   page (no inner overflow), which fits the editor card sticking to the top. */
[data-kit="redesign"] .ann-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 1100px) {
  [data-kit="redesign"] .ann-split { grid-template-columns: 1fr; }
}

/* List row */
[data-kit="redesign"] .ann-row { display: grid; grid-template-columns: 5px 1fr auto; gap: 0; align-items: stretch; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background var(--t); position: relative; }
[data-kit="redesign"] .ann-row:last-child { border-bottom: none; }
[data-kit="redesign"] .ann-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .ann-row.selected { background: var(--surface-2); }
[data-kit="redesign"] .ann-row.selected::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--indigo); pointer-events: none; }
[data-kit="redesign"] .ann-row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

[data-kit="redesign"] .ann-strip { width: 5px; background: var(--text-ghost); }
[data-kit="redesign"] .ann-strip.info { background: var(--indigo); }
[data-kit="redesign"] .ann-strip.announcement { background: var(--amber); }
[data-kit="redesign"] .ann-strip.incident { background: var(--red); }

[data-kit="redesign"] .ann-content { padding: 14px 18px; min-width: 0; }
[data-kit="redesign"] .ann-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
[data-kit="redesign"] .ann-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
[data-kit="redesign"] .ann-title.draft { color: var(--text-muted); }

[data-kit="redesign"] .ann-severity-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); }
[data-kit="redesign"] .ann-severity-pill.info { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .ann-severity-pill.announcement { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .ann-severity-pill.incident { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }

[data-kit="redesign"] .ann-status-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .ann-status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .ann-status-pill.published { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .ann-status-pill.published::before { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .ann-status-pill.draft { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
[data-kit="redesign"] .ann-status-pill.draft::before { background: var(--text-ghost); }
[data-kit="redesign"] .ann-status-pill.expired { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .ann-status-pill.expired::before { background: var(--text-dim); }

[data-kit="redesign"] .ann-tier-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); background: var(--purple-wash); color: var(--purple-hi); border: 1px solid var(--purple-dim); }

[data-kit="redesign"] .ann-preview { font-size: 12px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-kit="redesign"] .ann-foot-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; flex-wrap: wrap; }
[data-kit="redesign"] .ann-foot-row .sep { color: var(--text-ghost); }

[data-kit="redesign"] .ann-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 14px 18px 14px 0; gap: 4px; flex-shrink: 0; }
[data-kit="redesign"] .ann-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; text-align: right; white-space: nowrap; }
[data-kit="redesign"] .ann-time .relative { display: block; color: var(--text-muted); font-size: 11px; font-weight: 600; margin-bottom: 2px; }

/* Editor (right rail). Card-level styles come from the existing .card rule;
   these add the head/body/foot inner zones that the reference uses. */
[data-kit="redesign"] .editor-card { position: sticky; top: 18px; }
[data-kit="redesign"] .editor-head { padding: 13px 18px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-deep); }
[data-kit="redesign"] .editor-head-left { display: flex; align-items: center; gap: 10px; }
[data-kit="redesign"] .editor-head-icon { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--indigo); display: grid; place-items: center; color: white; flex-shrink: 0; }
[data-kit="redesign"] .editor-head-icon svg { width: 14px; height: 14px; }
[data-kit="redesign"] .editor-head-title { font-size: 13px; font-weight: 700; line-height: 1.2; }
[data-kit="redesign"] .editor-head-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 1px; }

[data-kit="redesign"] .editor-body { padding: 18px; }

/* The form-label.required and ai-link extensions for the announcement editor
   sit on top of the existing .form-label rule (line 1013). */
[data-kit="redesign"] .editor-body .form-label { display: flex; align-items: center; gap: 6px; }
[data-kit="redesign"] .editor-body .form-label.required::after { content: " *"; color: var(--red-hi); }
[data-kit="redesign"] .editor-body .form-label .ai-link { margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-hi); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: var(--purple-wash); border: 1px solid var(--purple-dim); border-radius: var(--r-sm); transition: all var(--t); }
[data-kit="redesign"] .editor-body .form-label .ai-link:hover { background: var(--purple); color: white; border-color: var(--purple); }
[data-kit="redesign"] .editor-body .form-label .ai-link svg { width: 10px; height: 10px; }

[data-kit="redesign"] .form-select { width: 100%; height: 34px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; color: var(--text); font-family: inherit; }
[data-kit="redesign"] .form-select:focus { outline: none; border-color: var(--border-focus); }

/* Severity selector tabs */
[data-kit="redesign"] .severity-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
[data-kit="redesign"] .severity-tab { padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; font-weight: 500; cursor: pointer; transition: all var(--t); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
[data-kit="redesign"] .severity-tab svg { width: 12px; height: 12px; }
[data-kit="redesign"] .severity-tab:hover { border-color: var(--border-hi); }
[data-kit="redesign"] .severity-tab.set.info { background: var(--indigo-wash); color: var(--indigo-hi); border-color: var(--indigo-dim); }
[data-kit="redesign"] .severity-tab.set.announcement { background: var(--amber-wash); color: var(--amber-hi); border-color: var(--amber-dim); }
[data-kit="redesign"] .severity-tab.set.incident { background: var(--red-wash); color: var(--red-hi); border-color: var(--red-dim); }
[data-kit="redesign"] .severity-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Toggle rows (announcement visibility group). Uses the existing
   [data-kit="redesign"] .toggle rule for the switch itself. */
[data-kit="redesign"] .toggle-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 8px; }
[data-kit="redesign"] .toggle-row-info { min-width: 0; }
[data-kit="redesign"] .toggle-row-name { font-size: 12px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .toggle-row-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 2px; }

/* Editor footer */
[data-kit="redesign"] .editor-foot { padding: 12px 18px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-deep); }
[data-kit="redesign"] .editor-foot-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
[data-kit="redesign"] .editor-foot-meta b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .editor-foot-actions { display: flex; gap: 6px; }

/* ============================================================
   Website page (renderWebsite) - Session 8b migrated markup.
   Scoped under [data-kit="redesign"] so they only apply to the
   migrated render function output. Mirrors makro_admin/17_website.html.
   ============================================================ */

/* Date segments (range selector). The page also reuses .btn / .btn-secondary
   for Refresh + Open site. */
[data-kit="redesign"] .date-segments { display: inline-flex; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; padding: 2px; }
[data-kit="redesign"] .date-seg { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--r-sm); color: var(--text-muted); cursor: pointer; transition: all var(--t); background: transparent; border: none; }
[data-kit="redesign"] .date-seg:hover { color: var(--text); }
[data-kit="redesign"] .date-seg.active { background: var(--indigo-wash); color: var(--indigo-hi); }

/* Realtime badge row (sits between the page-head and stat-strip). */
[data-kit="redesign"] .realtime-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
[data-kit="redesign"] .realtime-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; background: var(--surface-1); border: 1px solid var(--border); color: var(--text-muted); }
[data-kit="redesign"] .realtime-badge.live { background: var(--green-wash); border-color: var(--green-dim); color: var(--green-hi); }
[data-kit="redesign"] .realtime-badge b { font-family: var(--font-mono); font-weight: 700; color: inherit; }
[data-kit="redesign"] .realtime-badge.idle b { color: var(--text); }
[data-kit="redesign"] .realtime-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
[data-kit="redesign"] .realtime-badge.live .realtime-dot { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s ease-in-out infinite; }
[data-kit="redesign"] .realtime-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }

/* Stat-strip extras - stat-cell-l groups the left column of label/value/meta
   so the spark can sit on the right. The base .stat-cell / .stat-strip /
   .stat-label / .stat-value / .stat-meta rules already exist (lines 399-416). */
[data-kit="redesign"] .stat-cell { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
[data-kit="redesign"] .stat-cell-l { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
[data-kit="redesign"] .stat-meta { display: flex; align-items: center; gap: 4px; }
[data-kit="redesign"] .stat-meta svg { width: 11px; height: 11px; }
[data-kit="redesign"] .stat-meta b { color: var(--green-hi); font-weight: 600; }
[data-kit="redesign"] .stat-meta b.down { color: var(--red-hi); }
[data-kit="redesign"] .stat-meta .dim { color: var(--text-dim); }
[data-kit="redesign"] .spark { width: 60px; height: 30px; flex-shrink: 0; }
[data-kit="redesign"] .spark path { fill: none; stroke-width: 1.5; }
[data-kit="redesign"] .spark.indigo path { stroke: var(--indigo-hi); }
[data-kit="redesign"] .spark.green path { stroke: var(--green-hi); }
[data-kit="redesign"] .spark.amber path { stroke: var(--amber-hi); }

/* Row layout: two-column 2fr/1fr (chart + side card) and equal 1fr/1fr.
   Already used elsewhere; ensure the Website page renders correctly when
   shipped on its own. The base .row + .card classes already exist. */
[data-kit="redesign"] .row { display: grid; gap: 14px; margin-bottom: 14px; }
[data-kit="redesign"] .row.two { grid-template-columns: 2fr 1fr; }
[data-kit="redesign"] .row.equal { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) {
  [data-kit="redesign"] .row.two,
  [data-kit="redesign"] .row.equal { grid-template-columns: 1fr; }
}

/* Card body flush variant. Base .card / .card-head / .card-title /
   .card-title-meta / .card-body already exist in the kit. */
[data-kit="redesign"] .card-body.flush { padding: 0; }

/* Tbl-row variants for the Website page tables. The base .tbl-row already
   has a generic grid-template-columns from the Users page; per-table
   overrides scope by column-set class (same pattern as the Polar tabs at
   line 928). */
[data-kit="redesign"] .tbl-row.cols-pages { grid-template-columns: 1.8fr 70px 80px 70px; gap: 12px; align-items: center; padding: 9px 18px; }
[data-kit="redesign"] .tbl-row.cols-ref { grid-template-columns: 1.8fr 70px 80px; gap: 12px; align-items: center; padding: 9px 18px; }
[data-kit="redesign"] .tbl-row.cols-events { grid-template-columns: 1.6fr 100px 100px; gap: 12px; align-items: center; padding: 9px 18px; }
[data-kit="redesign"] .tbl-row.cols-utm { grid-template-columns: 100px 100px 1fr 70px 90px; gap: 12px; align-items: center; padding: 9px 18px; }
[data-kit="redesign"] .tbl-row.src-row { grid-template-columns: 1fr 1fr 60px; gap: 12px; align-items: center; padding: 9px 18px; }
[data-kit="redesign"] .tbl-row.head { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); background: var(--bg-deep); border-bottom: 1px solid var(--border); padding: 8px 18px; cursor: default; }
[data-kit="redesign"] .tbl-row.head:hover { background: var(--bg-deep); }

[data-kit="redesign"] .tbl-row .url { font-family: var(--font-mono); font-size: 11px; color: var(--text); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-kit="redesign"] .tbl-row .ref { font-family: var(--font-mono); font-size: 11px; color: var(--text); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; }
[data-kit="redesign"] .tbl-row .ref svg { width: 11px; height: 11px; opacity: 0.7; flex-shrink: 0; }
[data-kit="redesign"] .tbl-row .ref .source-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm); border: 1px solid var(--border); text-transform: uppercase; }
[data-kit="redesign"] .tbl-row .num { font-family: var(--font-mono); font-weight: 600; font-size: 12px; text-align: right; letter-spacing: 0.02em; color: var(--text); }
[data-kit="redesign"] .tbl-row .num.green { color: var(--green-hi); }
[data-kit="redesign"] .tbl-row .num.dim { color: var(--text-dim); }

/* UTM source/medium pills - tone matches the reference markup. */
[data-kit="redesign"] .utm-pill { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 7px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); display: inline-block; }
[data-kit="redesign"] .utm-pill.organic { color: var(--green-hi); border-color: var(--green-dim); background: var(--green-wash); }
[data-kit="redesign"] .utm-pill.paid { color: var(--amber-hi); border-color: var(--amber-dim); background: var(--amber-wash); }
[data-kit="redesign"] .utm-pill.social { color: var(--purple-hi); border-color: var(--purple-dim); background: var(--purple-wash); }
[data-kit="redesign"] .utm-pill.direct { color: var(--text-dim); }
[data-kit="redesign"] .utm-pill.referral { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-wash); }

/* Inline progress bar used inside .tbl-row.src-row. */
[data-kit="redesign"] .bar-cell { display: flex; align-items: center; gap: 8px; }
[data-kit="redesign"] .bar-cell .bar-track { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
[data-kit="redesign"] .bar-cell .bar-fill { height: 100%; background: linear-gradient(90deg, var(--indigo) 0%, var(--indigo-hi) 100%); border-radius: 2px; }
[data-kit="redesign"] .bar-cell .bar-fill.green { background: linear-gradient(90deg, var(--green-dim), var(--green)); }

/* Custom event row chrome (icon tile + tone palette). */
[data-kit="redesign"] .event-name { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
[data-kit="redesign"] .event-icon { width: 22px; height: 22px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-hi); color: var(--text-muted); flex-shrink: 0; }
[data-kit="redesign"] .event-icon svg { width: 12px; height: 12px; }
[data-kit="redesign"] .event-icon.signup { background: var(--green-wash); color: var(--green-hi); border-color: var(--green-dim); }
[data-kit="redesign"] .event-icon.download { background: var(--indigo-wash); color: var(--indigo-hi); border-color: var(--indigo-dim); }
[data-kit="redesign"] .event-icon.click { background: var(--cyan-wash); color: var(--cyan); border-color: var(--cyan); }
[data-kit="redesign"] .event-icon.scroll { background: var(--purple-wash); color: var(--purple-hi); border-color: var(--purple-dim); }

/* Empty-state row for tables where the worker returned no data. */
[data-kit="redesign"] .empty-row { padding: 18px 18px; color: var(--text-muted); font-size: 12px; text-align: center; }

/* Tbl-foot "View all" anchor is reused from the kit; ensure it picks up the
   indigo highlight when used as a CSV export trigger. */
[data-kit="redesign"] .tbl-foot a { color: var(--indigo-hi); cursor: pointer; font-weight: 600; }
[data-kit="redesign"] .tbl-foot a:hover { color: var(--indigo); }
[data-kit="redesign"] .tbl-foot .dim { color: var(--text-dim); }

/* ════════════════════════════════════════════════════════════════════════════
   BLOG POSTS - list rows + editor (split-pane spec from 18_blog_posts.html)
   ════════════════════════════════════════════════════════════════════════════ */

[data-kit="redesign"] .blog-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 1100px) {
  [data-kit="redesign"] .blog-split { grid-template-columns: 1fr; }
}

[data-kit="redesign"] .post-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px; align-items: stretch;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: background var(--t);
  position: relative;
}
[data-kit="redesign"] .post-row:last-child { border-bottom: none; }
[data-kit="redesign"] .post-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .post-row.selected { background: var(--surface-2); }
[data-kit="redesign"] .post-row.selected::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--indigo);
}
[data-kit="redesign"] .post-row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

[data-kit="redesign"] .post-thumb {
  width: 80px; height: 60px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--indigo-dim), var(--indigo));
  display: grid; place-items: center;
  flex-shrink: 0; position: relative; overflow: hidden;
}
[data-kit="redesign"] .post-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.15), transparent 70%);
}
[data-kit="redesign"] .post-thumb svg {
  width: 24px; height: 24px;
  color: rgba(255,255,255,0.85);
  position: relative;
}
[data-kit="redesign"] .post-thumb.draft { background: linear-gradient(135deg, var(--surface-3), var(--surface-hi)); }
[data-kit="redesign"] .post-thumb.draft svg { color: var(--text-dim); }

[data-kit="redesign"] .post-info { min-width: 0; }
[data-kit="redesign"] .post-meta-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
[data-kit="redesign"] .post-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; }
[data-kit="redesign"] .post-title.draft { color: var(--text-muted); }

[data-kit="redesign"] .post-status-pill {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 4px;
}
[data-kit="redesign"] .post-status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .post-status-pill.published { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .post-status-pill.published::before { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .post-status-pill.scheduled { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }
[data-kit="redesign"] .post-status-pill.scheduled::before { background: var(--cyan); }
[data-kit="redesign"] .post-status-pill.draft { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
[data-kit="redesign"] .post-status-pill.draft::before { background: var(--text-ghost); }

[data-kit="redesign"] .post-tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted);
  display: inline-block;
}
[data-kit="redesign"] .post-tag.technical { color: var(--purple-hi); border-color: var(--purple-dim); background: var(--purple-wash); }
[data-kit="redesign"] .post-tag.product { color: var(--amber-hi); border-color: var(--amber-dim); background: var(--amber-wash); }
[data-kit="redesign"] .post-tag.privacy { color: var(--green-hi); border-color: var(--green-dim); background: var(--green-wash); }
[data-kit="redesign"] .post-tag.encryption { color: var(--indigo-hi); border-color: var(--indigo-dim); background: var(--indigo-wash); }

[data-kit="redesign"] .post-foot-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.04em;
  flex-wrap: wrap;
}
[data-kit="redesign"] .post-foot-row .sep { color: var(--text-ghost); }
[data-kit="redesign"] .post-foot-row .views { color: var(--green-hi); font-weight: 600; }
[data-kit="redesign"] .post-foot-row .reading { color: var(--text-muted); }

/* Editor stats bar above the editor body. Reused on the preview pane in the
   list page and on the editor head in the edit page. */
[data-kit="redesign"] .post-stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border-soft);
  padding: 1px 0;
  border-bottom: 1px solid var(--border);
}
[data-kit="redesign"] .post-stat { background: var(--bg-deep); padding: 10px 14px; }
[data-kit="redesign"] .post-stat-label { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .post-stat-value { font-family: var(--font-mono); font-size: 14px; font-weight: 700; margin-top: 3px; letter-spacing: -0.01em; }
[data-kit="redesign"] .post-stat-value.green { color: var(--green-hi); }
[data-kit="redesign"] .post-stat-value.indigo { color: var(--indigo-hi); }

/* Form row split (used for slug+status, hero+og). */
[data-kit="redesign"] .form-row.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) {
  [data-kit="redesign"] .form-row.split-row { grid-template-columns: 1fr; }
}
[data-kit="redesign"] .form-input.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
[data-kit="redesign"] .form-textarea.body-area { min-height: 320px; font-family: var(--font-mono); resize: vertical; line-height: 1.6; letter-spacing: 0.01em; }

/* Image upload zone (stubbed until upload endpoint exists). */
[data-kit="redesign"] .image-zone {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 12px; align-items: center;
  padding: 12px;
  background: var(--surface-2); border: 1px dashed var(--border-hi);
  border-radius: var(--r-md);
  cursor: not-allowed; transition: all var(--t);
}
[data-kit="redesign"] .image-zone:hover { border-color: var(--indigo-dim); }
[data-kit="redesign"] .image-zone-thumb {
  width: 80px; height: 60px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--indigo-dim), var(--indigo));
  display: grid; place-items: center;
  flex-shrink: 0; position: relative; overflow: hidden;
}
[data-kit="redesign"] .image-zone-thumb::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.15), transparent 70%);
}
[data-kit="redesign"] .image-zone-thumb svg { width: 22px; height: 22px; color: rgba(255,255,255,0.85); position: relative; }
[data-kit="redesign"] .image-zone-info { min-width: 0; }
[data-kit="redesign"] .image-zone-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-kit="redesign"] .image-zone-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Markdown toolbar above the body textarea. */
[data-kit="redesign"] .md-toolbar {
  display: flex; gap: 2px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border-bottom: none;
}
[data-kit="redesign"] .md-toolbar button {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--text-dim); transition: all var(--t);
  background: none; border: none; cursor: pointer;
}
[data-kit="redesign"] .md-toolbar button:hover { background: var(--surface-3); color: var(--text); }
[data-kit="redesign"] .md-toolbar button svg { width: 14px; height: 14px; }
[data-kit="redesign"] .md-toolbar .sep { width: 1px; height: 18px; background: var(--border); margin: 5px 4px; }
[data-kit="redesign"] .md-toolbar .sp { flex: 1; }
[data-kit="redesign"] .md-toolbar .ai-btn {
  display: inline-flex; align-items: center; gap: 5px;
  width: auto; padding: 0 9px;
  background: var(--purple-wash); color: var(--purple-hi);
  border: 1px solid var(--purple-dim); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
[data-kit="redesign"] .md-toolbar .ai-btn:hover { background: var(--purple); color: white; }
[data-kit="redesign"] .md-toolbar .ai-btn svg { width: 10px; height: 10px; }

/* Editor body + preview, side-by-side. Collapses to one column under 1100px
   so the textarea always gets at least the full width of the screen. */
[data-kit="redesign"] .blog-edit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 1100px) {
  [data-kit="redesign"] .blog-edit-grid { grid-template-columns: 1fr; }
}
[data-kit="redesign"] .blog-edit-grid .form-textarea.body-area {
  border-radius: 0 0 var(--r-md) var(--r-md);
  border-top: none;
}
[data-kit="redesign"] .blog-preview-pane {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px;
  font-size: 13px; line-height: 1.55;
  max-height: 480px; overflow-y: auto;
  min-height: 200px;
}
[data-kit="redesign"] .blog-preview-content h1,
[data-kit="redesign"] .blog-preview-content h2,
[data-kit="redesign"] .blog-preview-content h3 { margin: 12px 0 6px; color: var(--text); font-weight: 700; letter-spacing: -0.01em; }
[data-kit="redesign"] .blog-preview-content h1 { font-size: 18px; }
[data-kit="redesign"] .blog-preview-content h2 { font-size: 15px; }
[data-kit="redesign"] .blog-preview-content h3 { font-size: 13px; }
[data-kit="redesign"] .blog-preview-content p { margin: 8px 0; color: var(--text-muted); }
[data-kit="redesign"] .blog-preview-content ul,
[data-kit="redesign"] .blog-preview-content ol { margin: 8px 0 8px 18px; color: var(--text-muted); }
[data-kit="redesign"] .blog-preview-content code {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-deep); padding: 1px 5px; border-radius: 3px;
  color: var(--cyan);
}
[data-kit="redesign"] .blog-preview-content pre {
  background: var(--bg-deep); padding: 10px 12px; border-radius: var(--r-sm);
  margin: 8px 0; overflow-x: auto;
}
[data-kit="redesign"] .blog-preview-content pre code { background: none; padding: 0; }
[data-kit="redesign"] .blog-preview-content blockquote { border-left: 3px solid var(--indigo-dim); padding: 4px 12px; color: var(--text-muted); margin: 8px 0; }
[data-kit="redesign"] .blog-preview-content a { color: var(--indigo-hi); text-decoration: underline; }

/* AI Generate modal (rendered as a generic overlay - styled tighter than the
   legacy .modal). */
[data-kit="redesign"] .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
[data-kit="redesign"] .modal-overlay.hidden { display: none; }
[data-kit="redesign"] .modal-overlay .modal { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px 20px; width: 100%; max-width: 500px; }
[data-kit="redesign"] .modal-overlay .modal h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }

/* ============================================================================
   Social page (mastodon / bluesky / reddit). All scoped under [data-kit="redesign"]
   so the styles only apply on the Social route and never leak into other admin
   pages. Three platform-specific accent colors are defined at the top of this
   block; everything else reuses the base palette (indigo, green, amber, cyan).
   ============================================================================ */
[data-kit="redesign"] {
  --mastodon: #6364ff;
  --mastodon-wash: rgba(99, 100, 255, 0.10);
  --mastodon-dim: rgba(99, 100, 255, 0.4);
  --bluesky: #0085ff;
  --bluesky-wash: rgba(0, 133, 255, 0.10);
  --bluesky-dim: rgba(0, 133, 255, 0.4);
  --reddit: #ff4500;
  --reddit-wash: rgba(255, 69, 0, 0.10);
  --reddit-dim: rgba(255, 69, 0, 0.4);
}

/* Tab brand accent overrides for the three social tabs. The base .tab.active
   selector at line ~587 already sets indigo; these win on specificity because
   they include the brand class. */
[data-kit="redesign"] .social-tab.active.mastodon { color: var(--mastodon); border-bottom-color: var(--mastodon); }
[data-kit="redesign"] .social-tab.active.bluesky  { color: var(--bluesky);  border-bottom-color: var(--bluesky); }
[data-kit="redesign"] .social-tab.active.reddit   { color: var(--reddit);   border-bottom-color: var(--reddit); }

/* CONNECTION CARD - sits at the top of each tab's content. Single row layout:
   round brand icon - account meta - actions. */
[data-kit="redesign"] .connection-card {
  display: grid; grid-template-columns: 50px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 18px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 14px;
}
[data-kit="redesign"] .connection-icon {
  width: 50px; height: 50px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: 700; font-size: 18px;
}
[data-kit="redesign"] .connection-icon.mastodon { background: var(--mastodon-wash); color: var(--mastodon); border: 1px solid var(--mastodon-dim); }
[data-kit="redesign"] .connection-icon.bluesky  { background: var(--bluesky-wash);  color: var(--bluesky);  border: 1px solid var(--bluesky-dim); }
[data-kit="redesign"] .connection-icon.reddit   { background: var(--reddit-wash);   color: var(--reddit);   border: 1px solid var(--reddit-dim); }
[data-kit="redesign"] .connection-icon svg { width: 22px; height: 22px; }
[data-kit="redesign"] .connection-info { min-width: 0; }
[data-kit="redesign"] .connection-handle {
  font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
[data-kit="redesign"] .connection-status-pill {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 5px;
}
[data-kit="redesign"] .connection-status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .connection-status-pill.connected { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .connection-status-pill.connected::before { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .connection-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.02em; margin-top: 4px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
[data-kit="redesign"] .connection-meta b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .connection-meta .sep { color: var(--text-ghost); }
[data-kit="redesign"] .connection-actions { display: flex; gap: 6px; }

/* Stat value brand accent variants. Reuses the base [data-kit="redesign"] .stat-value
   defined for blog/notifications; just adds the three platform-tinted overrides. */
[data-kit="redesign"] .stat-value.mastodon { color: var(--mastodon); }
[data-kit="redesign"] .stat-value.bluesky  { color: var(--bluesky); }
[data-kit="redesign"] .stat-value.reddit   { color: var(--reddit); }
[data-kit="redesign"] .stat-value.amber    { color: var(--amber-hi); }

/* RECENT POSTS ROWS - Mastodon/Bluesky shape. Reddit has its own variant
   (.social-reddit-row) without the 3rd engagement column.

   Note: blog's .post-row is also defined under [data-kit="redesign"] but uses
   a different grid (80px+1fr for the thumbnail). The Social rows use a unique
   class name (.social-post-row) so the two layouts coexist on different pages.
*/
[data-kit="redesign"] .post-row-head {
  display: grid;
  grid-template-columns: 1fr 60px 60px 60px auto;
  gap: 14px; align-items: center;
  padding: 8px 18px;
  background: var(--bg-deep); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}
[data-kit="redesign"] .post-row-head.reddit { grid-template-columns: 1fr 70px 70px auto; }
[data-kit="redesign"] .post-row-head svg { width: 11px; height: 11px; vertical-align: -1px; display: inline-block; }

[data-kit="redesign"] .social-post-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px 60px auto;
  gap: 14px; align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t);
}
[data-kit="redesign"] .social-post-row:last-child { border-bottom: none; }
[data-kit="redesign"] .social-post-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .social-post-row .post-content { min-width: 0; }

[data-kit="redesign"] .social-reddit-row {
  display: grid;
  grid-template-columns: 1fr 70px 70px auto;
  gap: 14px; align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t);
}
[data-kit="redesign"] .social-reddit-row:last-child { border-bottom: none; }
[data-kit="redesign"] .social-reddit-row:hover { background: var(--surface-2); }

/* Override the blog post-meta-row to add the timestamp / sep colors used here
   without affecting the blog page (which doesn't render a .timestamp inside). */
[data-kit="redesign"] .social-post-row .post-meta-row .timestamp,
[data-kit="redesign"] .social-reddit-row .post-meta-row .timestamp {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em;
}
[data-kit="redesign"] .social-post-row .post-meta-row .sep,
[data-kit="redesign"] .social-reddit-row .post-meta-row .sep { color: var(--text-ghost); }

/* Status pill: failed variant (other status classes already defined for blog). */
[data-kit="redesign"] .post-status-pill.posted { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .post-status-pill.posted::before { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .post-status-pill.failed { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .post-status-pill.failed::before { background: var(--red); }

[data-kit="redesign"] .social-post-row .post-text,
[data-kit="redesign"] .social-reddit-row .reddit-body {
  font-size: 13px; color: var(--text);
  line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-kit="redesign"] .social-reddit-row .reddit-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 5px 0 4px; line-height: 1.4;
}
[data-kit="redesign"] .social-reddit-row .reddit-body {
  font-size: 12px; color: var(--text-muted);
  -webkit-line-clamp: 2;
}

[data-kit="redesign"] .subreddit-pill {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--reddit); background: var(--reddit-wash);
  padding: 2px 7px; border-radius: var(--r-sm);
  letter-spacing: 0.04em; border: 1px solid var(--reddit-dim);
  display: inline-block;
}

[data-kit="redesign"] .post-engagement-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  text-align: right; letter-spacing: 0.02em; color: var(--text);
}
[data-kit="redesign"] .post-engagement-num.dim { color: var(--text-dim); }
[data-kit="redesign"] .post-engagement-num.green { color: var(--green-hi); }

[data-kit="redesign"] .post-action-icons { display: flex; gap: 4px; align-items: center; }
[data-kit="redesign"] .post-action-icons button {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--text-dim); transition: all var(--t);
  background: none; border: none; cursor: pointer;
}
[data-kit="redesign"] .post-action-icons button:hover { background: var(--surface-3); color: var(--text); }
[data-kit="redesign"] .post-action-icons svg { width: 13px; height: 13px; }

/* COMPOSER */
[data-kit="redesign"] .composer-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
}
[data-kit="redesign"] .composer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-deep);
  gap: 12px;
}
[data-kit="redesign"] .composer-head-left { display: flex; align-items: center; gap: 10px; }
[data-kit="redesign"] .composer-head-icon {
  width: 28px; height: 28px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
  color: white;
}
[data-kit="redesign"] .composer-head-icon.mastodon { background: var(--mastodon); }
[data-kit="redesign"] .composer-head-icon.bluesky  { background: var(--bluesky); }
[data-kit="redesign"] .composer-head-icon.reddit   { background: var(--reddit); }
[data-kit="redesign"] .composer-head-icon svg { width: 14px; height: 14px; }
[data-kit="redesign"] .composer-head-title { font-size: 13px; font-weight: 700; line-height: 1.2; }
[data-kit="redesign"] .composer-head-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  letter-spacing: 0.04em; margin-top: 1px;
}
[data-kit="redesign"] .composer-body { padding: 18px; }
[data-kit="redesign"] .composer-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  background: var(--bg-deep);
}
[data-kit="redesign"] .composer-foot-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.04em;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
[data-kit="redesign"] .composer-foot-meta b { color: var(--text); font-weight: 600; }
[data-kit="redesign"] .composer-foot-actions { display: flex; gap: 6px; }

/* form-label.required - matches the spec. */
[data-kit="redesign"] .form-label.required::after { content: " *"; color: var(--red-hi); }

/* CHARACTER COUNTER */
[data-kit="redesign"] .char-count {
  font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 0.04em;
}
[data-kit="redesign"] .char-count.ok { color: var(--green-hi); }
[data-kit="redesign"] .char-count.warn { color: var(--amber-hi); }
[data-kit="redesign"] .char-count.over { color: var(--red-hi); }
[data-kit="redesign"] .char-bar-track {
  height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden;
  margin-top: 6px;
}
[data-kit="redesign"] .char-bar-fill {
  height: 100%; border-radius: 2px;
  transition: all var(--t);
}
[data-kit="redesign"] .char-bar-fill.ok { background: var(--green); }
[data-kit="redesign"] .char-bar-fill.warn { background: var(--amber); }
[data-kit="redesign"] .char-bar-fill.over { background: var(--red); }

/* ============================================================================
   Infrastructure page (Session 9a-2)
   ============================================================================ */

[data-kit="redesign"] .cf-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(246, 130, 31, 0.10); color: var(--cf-orange, #f6821f); border: 1px solid var(--cf-orange, #f6821f);
  margin-left: 8px;
}
[data-kit="redesign"] .cf-pill svg { width: 11px; height: 11px; }

[data-kit="redesign"] .row { display: grid; gap: 14px; margin-bottom: 14px; }
[data-kit="redesign"] .row.two { grid-template-columns: 2fr 1fr; }
[data-kit="redesign"] .row.three { grid-template-columns: 1fr 1fr 1fr; }
[data-kit="redesign"] .row.equal { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) {
  [data-kit="redesign"] .row.two,
  [data-kit="redesign"] .row.three,
  [data-kit="redesign"] .row.equal { grid-template-columns: 1fr; }
}

[data-kit="redesign"] .card-body.flush { padding: 0; }

/* Cost breakdown */
[data-kit="redesign"] .cost-row {
  display: grid;
  grid-template-columns: 32px 1fr 100px 1fr 130px;
  gap: 14px; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
}
[data-kit="redesign"] .cost-row:last-child { border-bottom: none; }
[data-kit="redesign"] .cost-row.total { background: var(--bg-deep); padding: 13px 18px; font-weight: 700; }
[data-kit="redesign"] .cost-icon {
  width: 32px; height: 32px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-muted);
  flex-shrink: 0;
}
[data-kit="redesign"] .cost-icon svg { width: 16px; height: 16px; }
[data-kit="redesign"] .cost-icon.workers { background: rgba(246, 130, 31, 0.15); color: var(--cf-orange, #f6821f); }
[data-kit="redesign"] .cost-icon.d1 { background: var(--indigo-wash); color: var(--indigo-hi); }
[data-kit="redesign"] .cost-icon.kv { background: var(--cyan-wash); color: var(--cyan); }
[data-kit="redesign"] .cost-icon.r2 { background: var(--green-wash); color: var(--green-hi); }
[data-kit="redesign"] .cost-icon.ai { background: var(--purple-wash); color: var(--purple-hi); }
[data-kit="redesign"] .cost-info { min-width: 0; }
[data-kit="redesign"] .cost-name { font-size: 13px; font-weight: 600; }
[data-kit="redesign"] .cost-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 2px; }
[data-kit="redesign"] .cost-amount { font-family: var(--font-mono); font-size: 14px; font-weight: 700; text-align: right; letter-spacing: 0.02em; color: var(--text); }
[data-kit="redesign"] .cost-row.total .cost-amount { color: var(--green-hi); font-size: 16px; }
[data-kit="redesign"] .cost-trend { font-family: var(--font-mono); font-size: 10px; text-align: right; letter-spacing: 0.04em; }
[data-kit="redesign"] .cost-trend.up { color: var(--amber-hi); }
[data-kit="redesign"] .cost-trend.down { color: var(--green-hi); }
[data-kit="redesign"] .cost-trend.flat { color: var(--text-dim); }

[data-kit="redesign"] .quota-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
[data-kit="redesign"] .quota-bar-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; }
[data-kit="redesign"] .quota-bar-meta b { color: var(--text-muted); font-weight: 600; }
[data-kit="redesign"] .quota-track { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
[data-kit="redesign"] .quota-fill { height: 100%; border-radius: 3px; }
[data-kit="redesign"] .quota-fill.green { background: linear-gradient(90deg, var(--green-dim), var(--green)); }
[data-kit="redesign"] .quota-fill.amber { background: linear-gradient(90deg, var(--amber-dim), var(--amber)); }
[data-kit="redesign"] .quota-fill.red { background: linear-gradient(90deg, var(--red-dim, #991b1b), var(--red)); }
[data-kit="redesign"] .quota-fill.indigo { background: linear-gradient(90deg, var(--indigo-dim), var(--indigo)); }

/* Latency trio */
[data-kit="redesign"] .latency-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-soft); }
[data-kit="redesign"] .latency-cell { background: var(--surface-1); padding: 12px 16px; text-align: left; }
[data-kit="redesign"] .latency-cell .label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .latency-cell .num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; margin-top: 5px; }
[data-kit="redesign"] .latency-cell .num.good { color: var(--green-hi); }
[data-kit="redesign"] .latency-cell .num.med { color: var(--amber-hi); }
[data-kit="redesign"] .latency-cell .num.bad { color: var(--red-hi); }
[data-kit="redesign"] .latency-cell .num .unit { color: var(--text-dim); font-size: 13px; margin-left: 3px; font-weight: 500; }

/* Storage cards */
[data-kit="redesign"] .storage-card { padding: 16px 18px; }
[data-kit="redesign"] .storage-card .name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
[data-kit="redesign"] .storage-card .name svg { width: 16px; height: 16px; }
[data-kit="redesign"] .storage-card .name .id-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); margin-left: auto; padding: 2px 7px; border-radius: 100px; background: var(--bg-deep); border: 1px solid var(--border); }
[data-kit="redesign"] .storage-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
[data-kit="redesign"] .storage-stat-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .storage-stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1; margin-top: 4px; }
[data-kit="redesign"] .storage-stat-value.indigo { color: var(--indigo-hi); }
[data-kit="redesign"] .storage-stat-value.cyan { color: var(--cyan); }
[data-kit="redesign"] .storage-stat-value.green { color: var(--green-hi); }
[data-kit="redesign"] .storage-stat-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 3px; letter-spacing: 0.02em; }

/* Cron schedule list */
[data-kit="redesign"] .cron-row {
  display: grid;
  grid-template-columns: 110px 1fr 130px 200px 130px;
  gap: 14px; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
}
[data-kit="redesign"] .cron-row:last-child { border-bottom: none; }
[data-kit="redesign"] .cron-schedule { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--cyan); letter-spacing: 0.04em; background: var(--cyan-wash); border: 1px solid var(--cyan); padding: 3px 8px; border-radius: var(--r-sm); width: fit-content; }
[data-kit="redesign"] .cron-info { min-width: 0; }
[data-kit="redesign"] .cron-name { font-size: 13px; font-weight: 600; }
[data-kit="redesign"] .cron-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.02em; word-break: break-word; }
[data-kit="redesign"] .cron-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }
[data-kit="redesign"] .cron-time .relative { display: block; color: var(--text-dim); font-size: 10px; margin-top: 2px; }
[data-kit="redesign"] .cron-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
[data-kit="redesign"] .cron-status.healthy { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .cron-status.degraded { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .cron-status.failing { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .cron-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .cron-status.healthy::before { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .cron-status.degraded::before { background: var(--amber); }
[data-kit="redesign"] .cron-status.failing::before { background: var(--red); }

/* AI usage row */
[data-kit="redesign"] .ai-row {
  display: grid; grid-template-columns: 90px 1fr 80px;
  gap: 14px; align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-soft);
}
[data-kit="redesign"] .ai-row:last-child { border-bottom: none; }
[data-kit="redesign"] .ai-row .name { font-family: var(--font-mono); font-size: 11px; color: var(--text); letter-spacing: 0.02em; }
[data-kit="redesign"] .ai-row .bar-track { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
[data-kit="redesign"] .ai-row .bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple-dim), var(--purple)); border-radius: 3px; }
[data-kit="redesign"] .ai-row .num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-align: right; letter-spacing: 0.02em; }

/* Chart wrap */
[data-kit="redesign"] .chart-wrap { padding: 8px 14px 14px; height: auto; }

/* ============================================================================
   Status & Incidents page (Session 9a-2)
   ============================================================================ */

[data-kit="redesign"] .overall-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 14px;
  position: relative; overflow: hidden;
}
[data-kit="redesign"] .overall-banner.healthy::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); }
[data-kit="redesign"] .overall-banner.degraded::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber); }
[data-kit="redesign"] .overall-banner.outage::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }
[data-kit="redesign"] .overall-status-large {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim);
}
[data-kit="redesign"] .overall-status-large::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
}
[data-kit="redesign"] .overall-status-large.degraded { background: var(--amber-wash); color: var(--amber-hi); border-color: var(--amber-dim); }
[data-kit="redesign"] .overall-status-large.degraded::before { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
[data-kit="redesign"] .overall-status-large.outage { background: var(--red-wash); color: var(--red-hi); border-color: var(--red-dim, #991b1b); }
[data-kit="redesign"] .overall-status-large.outage::before { background: var(--red); box-shadow: 0 0 6px var(--red); }
[data-kit="redesign"] .overall-meta-block { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
[data-kit="redesign"] .overall-public-row { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }
[data-kit="redesign"] .overall-public-row a { color: var(--cyan); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
[data-kit="redesign"] .overall-public-row a:hover { color: var(--cyan); text-decoration: underline; }
[data-kit="redesign"] .overall-public-row a svg { width: 10px; height: 10px; opacity: 0.7; }
[data-kit="redesign"] .overall-public-row .copy-btn { width: 22px; height: 22px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-dim); transition: all var(--t); border: none; background: none; cursor: pointer; }
[data-kit="redesign"] .overall-public-row .copy-btn:hover { background: var(--surface-2); color: var(--text); }
[data-kit="redesign"] .overall-public-row .copy-btn svg { width: 11px; height: 11px; }
[data-kit="redesign"] .overall-cron-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; }

/* Service status strip with sparklines */
[data-kit="redesign"] .svc-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--border-soft);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 14px;
}
[data-kit="redesign"] .svc-cell {
  background: var(--surface-1); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: background var(--t);
}
[data-kit="redesign"] .svc-cell:hover { background: var(--surface-2); }
[data-kit="redesign"] .svc-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
[data-kit="redesign"] .svc-name-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-kit="redesign"] .svc-name { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .svc-label { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
[data-kit="redesign"] .svc-status-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
[data-kit="redesign"] .svc-status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .svc-status-pill.operational { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .svc-status-pill.operational::before { background: var(--green); box-shadow: 0 0 4px var(--green); }
[data-kit="redesign"] .svc-status-pill.degraded { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .svc-status-pill.degraded::before { background: var(--amber); }
[data-kit="redesign"] .svc-status-pill.outage { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim, #991b1b); }
[data-kit="redesign"] .svc-status-pill.outage::before { background: var(--red); }

[data-kit="redesign"] .svc-uptime-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); }
[data-kit="redesign"] .svc-uptime-label { font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; }
[data-kit="redesign"] .svc-uptime-value { font-size: 18px; font-weight: 700; color: var(--green-hi); letter-spacing: -0.01em; }
[data-kit="redesign"] .svc-uptime-value.warn { color: var(--amber-hi); }
[data-kit="redesign"] .svc-uptime-value.bad { color: var(--red-hi); }

/* 90-day uptime sparkline */
[data-kit="redesign"] .svc-spark { display: flex; gap: 1px; height: 18px; margin-top: 2px; }
[data-kit="redesign"] .svc-spark-tick { flex: 1; background: var(--green); border-radius: 1px; min-height: 4px; }
[data-kit="redesign"] .svc-spark-tick.dim { background: var(--green-dim); }
[data-kit="redesign"] .svc-spark-tick.degraded { background: var(--amber); }
[data-kit="redesign"] .svc-spark-tick.outage { background: var(--red); }
[data-kit="redesign"] .svc-spark-tick.gap { background: var(--surface-3); }

[data-kit="redesign"] .svc-foot-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; padding-top: 6px; border-top: 1px solid var(--border-soft); }
[data-kit="redesign"] .svc-foot-row b { color: var(--text-muted); font-weight: 600; }

/* Section heads (re-used by status page) */
[data-kit="redesign"] .section-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .section-head-left { display: flex; align-items: baseline; gap: 8px; }
[data-kit="redesign"] .section-head h2 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
[data-kit="redesign"] .section-head .count { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; background: var(--surface-2); padding: 1px 7px; border-radius: 100px; }

/* Incident cards */
[data-kit="redesign"] .incident-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
  margin-bottom: 10px; position: relative;
}
[data-kit="redesign"] .incident-card.investigating::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }
[data-kit="redesign"] .incident-card.identified::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber); }
[data-kit="redesign"] .incident-card.monitoring::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cyan); }
[data-kit="redesign"] .incident-card.resolved::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--green); }

[data-kit="redesign"] .incident-head { padding: 12px 18px 12px 22px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .incident-head-info { min-width: 0; }
[data-kit="redesign"] .incident-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
[data-kit="redesign"] .incident-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
[data-kit="redesign"] .incident-state-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .incident-state-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .incident-state-pill.investigating { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim, #991b1b); }
[data-kit="redesign"] .incident-state-pill.investigating::before { background: var(--red); box-shadow: 0 0 4px var(--red); }
[data-kit="redesign"] .incident-state-pill.identified { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .incident-state-pill.identified::before { background: var(--amber); }
[data-kit="redesign"] .incident-state-pill.monitoring { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }
[data-kit="redesign"] .incident-state-pill.monitoring::before { background: var(--cyan); }
[data-kit="redesign"] .incident-state-pill.resolved { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .incident-state-pill.resolved::before { background: var(--green); }

[data-kit="redesign"] .incident-severity-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); }
[data-kit="redesign"] .incident-severity-pill.major { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim, #991b1b); }
[data-kit="redesign"] .incident-severity-pill.minor { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .incident-severity-pill.maintenance { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }

[data-kit="redesign"] .incident-services-row { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
[data-kit="redesign"] .incident-services-row .svc { background: var(--bg-deep); padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--border-soft); color: var(--text-muted); }
[data-kit="redesign"] .incident-services-row .sep { color: var(--text-ghost, var(--text-dim)); }

[data-kit="redesign"] .incident-timing-block { text-align: right; font-family: var(--font-mono); flex-shrink: 0; }
[data-kit="redesign"] .incident-duration { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
[data-kit="redesign"] .incident-duration.live { color: var(--red-hi); }
[data-kit="redesign"] .incident-timestamps { font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 3px; }

/* Timeline inside incident card */
[data-kit="redesign"] .incident-timeline { padding: 14px 18px 14px 22px; display: flex; flex-direction: column; gap: 0; }
[data-kit="redesign"] .timeline-event { display: grid; grid-template-columns: 130px 16px 1fr; gap: 12px; align-items: start; padding: 8px 0; position: relative; }
[data-kit="redesign"] .timeline-event:not(:last-child)::after { content: ""; position: absolute; left: 139px; top: 24px; bottom: -8px; width: 1px; background: var(--border); }
[data-kit="redesign"] .timeline-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; text-align: right; padding-top: 2px; }
[data-kit="redesign"] .timeline-time .day { display: block; color: var(--text-ghost, var(--text-dim)); font-size: 9px; }
[data-kit="redesign"] .timeline-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--border-hi); margin-top: 2px; position: relative; z-index: 1; }
[data-kit="redesign"] .timeline-dot.investigating { background: var(--red); border-color: var(--red-dim, #991b1b); }
[data-kit="redesign"] .timeline-dot.identified { background: var(--amber); border-color: var(--amber-dim); }
[data-kit="redesign"] .timeline-dot.monitoring { background: var(--cyan); border-color: var(--cyan); }
[data-kit="redesign"] .timeline-dot.resolved { background: var(--green); border-color: var(--green-dim); }
[data-kit="redesign"] .timeline-content { min-width: 0; }
[data-kit="redesign"] .timeline-event-head { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
[data-kit="redesign"] .timeline-event-head .state-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--r-sm); }
[data-kit="redesign"] .timeline-event-head .state-tag.investigating { color: var(--red-hi); background: var(--red-wash); border: 1px solid var(--red-dim, #991b1b); }
[data-kit="redesign"] .timeline-event-head .state-tag.identified { color: var(--amber-hi); background: var(--amber-wash); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .timeline-event-head .state-tag.monitoring { color: var(--cyan); background: var(--cyan-wash); border: 1px solid var(--cyan); }
[data-kit="redesign"] .timeline-event-head .state-tag.resolved { color: var(--green-hi); background: var(--green-wash); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .timeline-event-head .state-tag.note { color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); }
[data-kit="redesign"] .timeline-event-body { font-size: 12px; color: var(--text-muted); line-height: 1.55; }

/* Update composer */
[data-kit="redesign"] .incident-composer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-deep);
  padding: 12px 18px 12px 22px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
[data-kit="redesign"] .composer-state-picker { display: inline-flex; gap: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; }
[data-kit="redesign"] .composer-state-btn { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-sm); color: var(--text-dim); cursor: pointer; transition: all var(--t); border: none; background: none; }
[data-kit="redesign"] .composer-state-btn:hover { color: var(--text); }
[data-kit="redesign"] .composer-state-btn.set.investigating { background: var(--red-wash); color: var(--red-hi); }
[data-kit="redesign"] .composer-state-btn.set.identified { background: var(--amber-wash); color: var(--amber-hi); }
[data-kit="redesign"] .composer-state-btn.set.monitoring { background: var(--cyan-wash); color: var(--cyan); }
[data-kit="redesign"] .composer-state-btn.set.resolved { background: var(--green-wash); color: var(--green-hi); }
[data-kit="redesign"] .composer-input { flex: 1; min-width: 200px; height: 28px; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); }
[data-kit="redesign"] .composer-input::placeholder { color: var(--text-dim); }
[data-kit="redesign"] .composer-input:focus { outline: none; border-color: var(--border-focus); }

/* Probes table */
[data-kit="redesign"] .probes-row {
  display: grid; grid-template-columns: 1fr 110px 110px 90px;
  gap: 14px; align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
}
[data-kit="redesign"] .probes-row:last-child { border-bottom: none; }
[data-kit="redesign"] .probes-row.head { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); background: var(--bg-deep); border-bottom: 1px solid var(--border); padding: 8px 18px; }
[data-kit="redesign"] .probes-row .url { color: var(--text); display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-kit="redesign"] .probes-row .url .method-pill { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); flex-shrink: 0; }
[data-kit="redesign"] .probes-row .num { text-align: right; color: var(--text); }
[data-kit="redesign"] .probes-row .num.green { color: var(--green-hi); }
[data-kit="redesign"] .probes-row .num.amber { color: var(--amber-hi); }
[data-kit="redesign"] .probes-row .num.red { color: var(--red-hi); }

/* ============================================================================
   VISIBILITY PAGE
   Scoped under [data-kit="redesign"] only. Note: a global .store-card rule
   exists earlier in this file (used by the legacy Overview page) - do not
   redefine .store-card unscoped. The visibility store cards use vis-store-*
   class names to avoid that collision.
   ============================================================================ */

/* Brand color tokens for stores - referenced by .vis-store-card variants. */
[data-kit="redesign"] .vis-store-card { --vis-store-color: var(--indigo); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; position: relative; }
[data-kit="redesign"] .vis-store-card.chrome { --vis-store-color: #4285f4; }
[data-kit="redesign"] .vis-store-card.firefox { --vis-store-color: #ff7139; }
[data-kit="redesign"] .vis-store-card.edge { --vis-store-color: #0078d7; }
[data-kit="redesign"] .vis-store-strip { height: 3px; background: var(--vis-store-color); }
[data-kit="redesign"] .vis-store-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .vis-store-head-left { display: flex; align-items: center; gap: 10px; }
[data-kit="redesign"] .vis-store-icon { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--vis-store-color); color: white; }
[data-kit="redesign"] .vis-store-icon svg { width: 18px; height: 18px; }
[data-kit="redesign"] .vis-store-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
[data-kit="redesign"] .vis-store-platform { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
[data-kit="redesign"] .vis-store-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
[data-kit="redesign"] .vis-store-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
[data-kit="redesign"] .vis-store-pill.stale { background: var(--amber-wash); color: var(--amber-hi); border-color: var(--amber-dim); }
[data-kit="redesign"] .vis-store-pill.stale::before { background: var(--amber); }
[data-kit="redesign"] .vis-store-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-soft); }
[data-kit="redesign"] .vis-store-stat-cell { background: var(--surface-1); padding: 14px 18px; }
[data-kit="redesign"] .vis-store-stat-cell.stale { border-left: 2px solid var(--amber); }
[data-kit="redesign"] .vis-store-stat-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .vis-store-stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 24px; letter-spacing: -0.01em; line-height: 1; margin-top: 5px; }
[data-kit="redesign"] .vis-store-stat-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.02em; }
[data-kit="redesign"] .vis-store-stat-meta b { color: var(--green-hi); font-weight: 600; }
[data-kit="redesign"] .vis-store-stat-meta b.down { color: var(--red-hi); }
[data-kit="redesign"] .vis-store-rating { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border-soft); font-size: 12px; }
[data-kit="redesign"] .vis-store-rating-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .vis-store-rating-value { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--amber-hi); letter-spacing: -0.01em; }
[data-kit="redesign"] .vis-store-rating-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-left: auto; }
[data-kit="redesign"] .vis-store-foot { padding: 10px 18px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; gap: 10px; }
[data-kit="redesign"] .vis-store-empty { padding: 22px 18px; text-align: center; color: var(--text-dim); font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
[data-kit="redesign"] .vis-store-empty svg { width: 22px; height: 22px; opacity: 0.5; }

/* Three-column row used by the store-card row. */
[data-kit="redesign"] .row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 1100px) { [data-kit="redesign"] .row.three { grid-template-columns: 1fr; } }

/* GSC strip - 4 cells inside a card. */
[data-kit="redesign"] .vis-gsc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); }
@media (max-width: 800px) { [data-kit="redesign"] .vis-gsc-strip { grid-template-columns: repeat(2, 1fr); } }
[data-kit="redesign"] .vis-gsc-cell { background: var(--surface-1); padding: 14px 18px; }
[data-kit="redesign"] .vis-gsc-cell-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .vis-gsc-cell-value { font-family: var(--font-mono); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; line-height: 1; margin-top: 5px; color: var(--indigo-hi); }
[data-kit="redesign"] .vis-gsc-cell-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.02em; }
[data-kit="redesign"] .vis-gsc-cell-meta b { color: var(--green-hi); font-weight: 600; }
[data-kit="redesign"] .vis-gsc-cell-meta b.down { color: var(--red-hi); }

/* Recent change alerts list. */
[data-kit="redesign"] .vis-alert-row { display: grid; grid-template-columns: 22px 1fr 80px 90px; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
[data-kit="redesign"] .vis-alert-row:last-child { border-bottom: none; }
[data-kit="redesign"] .vis-alert-arrow { font-family: var(--font-mono); font-weight: 700; text-align: center; color: var(--text-dim); }
[data-kit="redesign"] .vis-alert-arrow.green { color: var(--green-hi); }
[data-kit="redesign"] .vis-alert-arrow.red { color: var(--red-hi); }
[data-kit="redesign"] .vis-alert-info { min-width: 0; }
[data-kit="redesign"] .vis-alert-name { font-weight: 600; color: var(--text); }
[data-kit="redesign"] .vis-alert-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.02em; }
[data-kit="redesign"] .vis-alert-pct { font-family: var(--font-mono); font-weight: 700; text-align: right; color: var(--text); }
[data-kit="redesign"] .vis-alert-pct.green { color: var(--green-hi); }
[data-kit="redesign"] .vis-alert-pct.red { color: var(--red-hi); }
[data-kit="redesign"] .vis-alert-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-align: right; letter-spacing: 0.02em; }

/* Source configuration rows. */
[data-kit="redesign"] .vis-config-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .vis-config-row:last-child { border-bottom: none; }
[data-kit="redesign"] .vis-config-info { min-width: 0; }
[data-kit="redesign"] .vis-config-name { font-size: 13px; font-weight: 600; color: var(--text); }
[data-kit="redesign"] .vis-config-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 3px; letter-spacing: 0.02em; }
[data-kit="redesign"] .vis-config-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
[data-kit="redesign"] .vis-config-status { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); }
[data-kit="redesign"] .vis-config-status.active { background: var(--green-wash); color: var(--green-hi); border-color: var(--green-dim); }
[data-kit="redesign"] .vis-config-status.pending { background: var(--amber-wash); color: var(--amber-hi); border-color: var(--amber-dim); }
[data-kit="redesign"] .vis-config-status.disabled { background: var(--surface-3); color: var(--text-dim); }
[data-kit="redesign"] .vis-config-form { padding: 0 18px 14px 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
[data-kit="redesign"] .vis-config-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-right: 4px; }
[data-kit="redesign"] .vis-config-input { height: 30px; padding: 0 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 12px; color: var(--text); min-width: 240px; font-family: var(--font-mono); }
[data-kit="redesign"] .vis-config-input:focus { outline: none; border-color: var(--border-focus); }
[data-kit="redesign"] .vis-config-result { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); width: 100%; min-height: 16px; }
[data-kit="redesign"] .vis-danger { color: var(--red-hi); border-color: var(--red-dim); }
[data-kit="redesign"] .vis-danger:hover { background: var(--red-wash); }

/* ============================================================================
   Intelligence page (3-tab redesign: insights / growth / competitors)
   Purple-themed AI surface. All rules scoped under [data-kit="redesign"].
   ============================================================================ */

/* Purple-active variant for the Intelligence tab strip (default tab is indigo). */
[data-kit="redesign"] .intel-tabs .tab.active { color: var(--purple-hi); border-bottom-color: var(--purple); }
[data-kit="redesign"] .intel-tabs .tab.active .badge { background: var(--purple-wash); color: var(--purple-hi); }

/* AI accent pill in the page header. */
[data-kit="redesign"] .ai-accent { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: var(--purple-wash); color: var(--purple-hi); border: 1px solid var(--purple-dim); }
[data-kit="redesign"] .ai-accent svg { width: 11px; height: 11px; }

/* AI brief / synthesis cards. */
[data-kit="redesign"] .btn-ai { background: var(--purple); color: white; border-color: var(--purple-dim); box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); }
[data-kit="redesign"] .btn-ai:hover { background: var(--purple-hi); }

[data-kit="redesign"] .ai-brief { background: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%); border: 1px solid var(--purple-dim); border-radius: var(--r-xl); position: relative; overflow: hidden; margin-bottom: 14px; }
[data-kit="redesign"] .ai-brief::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--purple-dim), var(--purple), var(--purple-hi), var(--purple), var(--purple-dim)); background-size: 200% 100%; }
[data-kit="redesign"] .ai-brief-head { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .ai-brief-head-left { display: flex; align-items: center; gap: 12px; }
[data-kit="redesign"] .ai-brief-head-icon { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--purple-wash); color: var(--purple-hi); border: 1px solid var(--purple-dim); display: grid; place-items: center; }
[data-kit="redesign"] .ai-brief-head-icon svg { width: 16px; height: 16px; }
[data-kit="redesign"] .ai-brief-head-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
[data-kit="redesign"] .ai-brief-head-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; margin-top: 2px; display: flex; gap: 8px; align-items: center; }
[data-kit="redesign"] .ai-brief-head-meta .sep { color: var(--text-ghost); }
[data-kit="redesign"] .ai-brief-body { padding: 18px; }

/* Severity / confidence pill. */
[data-kit="redesign"] .severity-pill { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; }
[data-kit="redesign"] .severity-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .severity-pill.low { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .severity-pill.low::before { background: var(--text-dim); }
[data-kit="redesign"] .severity-pill.medium { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .severity-pill.medium::before { background: var(--amber); }
[data-kit="redesign"] .severity-pill.high { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .severity-pill.high::before { background: var(--green); }
[data-kit="redesign"] .severity-pill.failed { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .severity-pill.failed::before { background: var(--red); }

/* Inline citation chip + unverified marker for AI text. */
[data-kit="redesign"] .cite { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--cyan); background: var(--cyan-wash); border: 1px solid var(--cyan); padding: 1px 5px; border-radius: var(--r-sm); letter-spacing: 0.02em; margin: 0 2px; }
[data-kit="redesign"] .intel-unverified { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--amber-hi); background: var(--amber-wash); border: 1px solid var(--amber-dim); padding: 1px 5px; border-radius: var(--r-sm); letter-spacing: 0.02em; margin: 0 2px; }

/* Stat-value purple tone (used by Insights + Growth tabs). */
[data-kit="redesign"] .stat-value.purple { color: var(--purple-hi); }
[data-kit="redesign"] .stat-value.amber { color: var(--amber-hi); }

/* Growth signals table. */
[data-kit="redesign"] .signals-head { display: grid; grid-template-columns: 160px 1fr 70px 90px 120px; gap: 14px; align-items: center; padding: 8px 18px; background: var(--bg-deep); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .signals-head .col { display: inline-flex; align-items: center; gap: 4px; }
[data-kit="redesign"] .signals-head .col.right { justify-content: flex-end; }
[data-kit="redesign"] .signal-row { display: grid; grid-template-columns: 160px 1fr 70px 90px 120px; gap: 14px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
[data-kit="redesign"] .signal-row:last-child { border-bottom: none; }
[data-kit="redesign"] .signal-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .signal-source { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-kit="redesign"] .signal-source .source-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--border-hi); color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; }
[data-kit="redesign"] .signal-source .source-pill.reddit { background: rgba(255, 69, 0, 0.10); color: #ff8a4a; border-color: rgba(255, 69, 0, 0.3); }
[data-kit="redesign"] .signal-source .source-pill.hn { background: rgba(255, 102, 0, 0.10); color: #ffa466; border-color: rgba(255, 102, 0, 0.3); }
[data-kit="redesign"] .signal-title { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-width: 0; }
[data-kit="redesign"] a.signal-title:hover { color: var(--indigo-hi); text-decoration: underline; }
[data-kit="redesign"] .signal-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-align: right; letter-spacing: 0.02em; }
[data-kit="redesign"] .signal-num.score { color: var(--text); }
[data-kit="redesign"] .signal-num.score.hot { color: var(--amber-hi); }
[data-kit="redesign"] .signal-num.comments { color: var(--text-muted); }
[data-kit="redesign"] .signal-tags { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
[data-kit="redesign"] .signal-tag { font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-sm); letter-spacing: 0.04em; }
[data-kit="redesign"] .signal-tag.privacy { background: var(--purple-wash); color: var(--purple-hi); border: 1px solid var(--purple-dim); }
[data-kit="redesign"] .signal-tag.productivity { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .signal-tag.rel { background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-hi); }

/* Competitor snapshots table. */
[data-kit="redesign"] .comp-head { display: grid; grid-template-columns: 1.3fr 80px 110px 70px 90px 110px 80px auto; gap: 12px; align-items: center; padding: 8px 18px; background: var(--bg-deep); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
[data-kit="redesign"] .comp-head .col.right { text-align: right; }
[data-kit="redesign"] .comp-row { display: grid; grid-template-columns: 1.3fr 80px 110px 70px 90px 110px 80px auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
[data-kit="redesign"] .comp-row:last-child { border-bottom: none; }
[data-kit="redesign"] .comp-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .comp-name { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
[data-kit="redesign"] .comp-favicon { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--border-hi); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
[data-kit="redesign"] .channel-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-sm); letter-spacing: 0.06em; text-transform: uppercase; display: inline-block; }
[data-kit="redesign"] .channel-pill.cws { background: rgba(66, 133, 244, 0.10); color: #6fa3f5; border: 1px solid rgba(66, 133, 244, 0.3); }
[data-kit="redesign"] .channel-pill.amo { background: rgba(255, 102, 0, 0.10); color: #ffa466; border: 1px solid rgba(255, 102, 0, 0.3); }
[data-kit="redesign"] .channel-pill.web { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .comp-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-align: right; letter-spacing: 0.02em; }
[data-kit="redesign"] .comp-num.installs { color: var(--text); }
[data-kit="redesign"] .comp-num.installs.dim { color: var(--text-dim); }
[data-kit="redesign"] .comp-num.delta { color: var(--text-muted); }
[data-kit="redesign"] .comp-num.delta.up { color: var(--green-hi); }
[data-kit="redesign"] .comp-num.delta.down { color: var(--red-hi); }
[data-kit="redesign"] .comp-num.rating { color: var(--amber-hi); }
[data-kit="redesign"] .comp-num.version { font-size: 10px; color: var(--cyan); background: var(--cyan-wash); border: 1px solid var(--cyan); padding: 1px 6px; border-radius: var(--r-sm); text-align: center; letter-spacing: 0.02em; display: inline-block; }
[data-kit="redesign"] .changed-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; width: fit-content; }
[data-kit="redesign"] .changed-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
[data-kit="redesign"] .changed-pill.yes { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .changed-pill.yes::before { background: var(--amber); }
[data-kit="redesign"] .changed-pill.no { background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .changed-pill.no::before { background: var(--text-ghost); }
[data-kit="redesign"] .comp-actions { display: flex; gap: 4px; align-items: center; }
[data-kit="redesign"] .comp-actions button { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-dim); background: transparent; border: none; cursor: pointer; transition: all var(--t); }
[data-kit="redesign"] .comp-actions button:hover { background: var(--surface-3); color: var(--text); }
[data-kit="redesign"] .comp-actions svg { width: 13px; height: 13px; }

/* Sources / competitors toggle list. */
[data-kit="redesign"] .config-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background var(--t); }
[data-kit="redesign"] .config-row:last-child { border-bottom: none; }
[data-kit="redesign"] .config-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .config-checkbox { width: 16px; height: 16px; border: 1.5px solid var(--border-hi); border-radius: 3px; display: grid; place-items: center; background: var(--surface-2); flex-shrink: 0; transition: all var(--t); }
[data-kit="redesign"] .config-checkbox.on { background: var(--purple); border-color: var(--purple); }
[data-kit="redesign"] .config-checkbox.on::after { content: ""; width: 8px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translate(1px, -1px); }
[data-kit="redesign"] .config-info { min-width: 0; }
[data-kit="redesign"] .config-name { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
[data-kit="redesign"] .config-name .src-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); letter-spacing: 0.04em; text-transform: uppercase; }
[data-kit="redesign"] .config-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
[data-kit="redesign"] .config-meta .sep { color: var(--text-ghost); }
[data-kit="redesign"] .config-meta .err-pill { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); padding: 1px 5px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
[data-kit="redesign"] .config-meta .err-pill svg { width: 10px; height: 10px; }

/* Insight stream. */
[data-kit="redesign"] .insight-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-top: 14px; }
[data-kit="redesign"] .insight-row { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
[data-kit="redesign"] .insight-row:last-child { border-bottom: none; }
[data-kit="redesign"] .insight-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--purple-wash); color: var(--purple-hi); border: 1px solid var(--purple-dim); display: grid; place-items: center; flex-shrink: 0; }
[data-kit="redesign"] .insight-icon svg { width: 17px; height: 17px; }
[data-kit="redesign"] .insight-body { min-width: 0; }
[data-kit="redesign"] .insight-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
[data-kit="redesign"] .insight-text { font-size: 12px; color: var(--text-muted); line-height: 1.55; }
[data-kit="redesign"] .insight-meta { margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.02em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
[data-kit="redesign"] .insight-meta .sep { color: var(--text-ghost); }
[data-kit="redesign"] .insight-scale { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-sm); }
[data-kit="redesign"] .insight-scale.product { background: var(--purple-wash); color: var(--purple-hi); border: 1px solid var(--purple-dim); }
[data-kit="redesign"] .insight-scale.cohort { background: var(--indigo-wash); color: var(--indigo-hi); border: 1px solid var(--indigo-dim); }
[data-kit="redesign"] .insight-scale.user { background: var(--cyan-wash); color: var(--cyan); border: 1px solid var(--cyan); }

/* JSON viewer. */
[data-kit="redesign"] .json-viewer { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--text-muted); letter-spacing: 0.02em; white-space: pre-wrap; max-height: 320px; overflow-y: auto; }

/* Top users (insights tab). */
[data-kit="redesign"] .top-users-head { background: var(--bg-deep); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); padding: 8px 14px; }
[data-kit="redesign"] .top-users-row { display: grid; grid-template-columns: 22px 1fr 70px 70px; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border-soft); font-size: 11px; }
[data-kit="redesign"] .top-users-row:last-child { border-bottom: none; }
[data-kit="redesign"] .top-users-row .rank { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-dim); text-align: center; }
[data-kit="redesign"] .top-users-row .rank.gold { color: var(--amber-hi); }
[data-kit="redesign"] .top-users-row .user-id { font-family: var(--font-mono); font-size: 11px; color: var(--text); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-kit="redesign"] .top-users-row .user-num { font-family: var(--font-mono); font-size: 11px; text-align: right; color: var(--text); }

/* Test-prompt drawer overlay. */
[data-kit="redesign"] .intel-drawer { position: fixed; inset: 0; background: rgba(6, 8, 12, 0.55); z-index: 60; display: flex; justify-content: flex-end; }
[data-kit="redesign"] .intel-drawer-panel { width: 560px; max-width: 100vw; background: var(--surface-1); border-left: 1px solid var(--border); display: flex; flex-direction: column; height: 100vh; overflow-y: auto; }
[data-kit="redesign"] .intel-drawer-head { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-kit="redesign"] .intel-drawer-body { padding: 18px; }

/* ============================================================
 * Support page (Session 9b-4)
 * Reference: makro_admin/08_support.html
 * ============================================================ */

/* FreeScout connected pill in the page header */
[data-kit="redesign"] .fs-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim);
}
[data-kit="redesign"] .fs-status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
}
[data-kit="redesign"] .stat-value.amber { color: var(--amber-hi); }
[data-kit="redesign"] .stat-value.green { color: var(--green-hi); }
[data-kit="redesign"] .stat-value.indigo { color: var(--indigo-hi); }
[data-kit="redesign"] .stat-value.red { color: var(--red-hi); }

/* Conversation rows (used on Overview's recent list and Conversations tab) */
[data-kit="redesign"] .conv-row {
  display: grid;
  grid-template-columns: 38px 1fr auto auto auto;
  gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: background var(--t);
  align-items: center;
}
[data-kit="redesign"] .conv-row:last-child { border-bottom: none; }
[data-kit="redesign"] .conv-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .conv-row.unread { background: var(--surface-2); }
[data-kit="redesign"] .conv-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: white; flex-shrink: 0;
}
[data-kit="redesign"] .conv-body { min-width: 0; }
[data-kit="redesign"] .conv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
[data-kit="redesign"] .conv-from {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
[data-kit="redesign"] .conv-id-mono {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  letter-spacing: 0.02em;
}
[data-kit="redesign"] .conv-subject {
  font-size: 12px; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-kit="redesign"] .conv-row.unread .conv-subject { font-weight: 600; }
[data-kit="redesign"] .conv-preview {
  font-size: 11px; color: var(--text-muted); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-kit="redesign"] .conv-status {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-sm);
  white-space: nowrap;
}
[data-kit="redesign"] .conv-status.active  { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .conv-status.pending { background: var(--amber-wash); color: var(--amber-hi); border: 1px solid var(--amber-dim); }
[data-kit="redesign"] .conv-status.closed  { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .conv-status.spam    { background: var(--red-wash); color: var(--red-hi); border: 1px solid var(--red-dim); }
[data-kit="redesign"] .conv-mailbox {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
  color: var(--text-dim); border: 1px solid var(--border);
}
[data-kit="redesign"] .conv-mailbox.support { color: var(--indigo-hi); border-color: var(--indigo-dim); background: var(--indigo-wash); }
[data-kit="redesign"] .conv-mailbox.billing { color: var(--amber-hi); border-color: var(--amber-dim); background: var(--amber-wash); }
[data-kit="redesign"] .conv-time {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.04em; white-space: nowrap;
  text-align: right; min-width: 60px;
}
[data-kit="redesign"] .conv-time .threads {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 2px;
}
[data-kit="redesign"] .conv-time .threads svg { width: 9px; height: 9px; }
[data-kit="redesign"] .conv-unread-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--indigo); flex-shrink: 0;
  box-shadow: 0 0 4px var(--indigo);
}

/* Mailbox list inside the Mailboxes card on Overview */
[data-kit="redesign"] .mb-list { display: flex; flex-direction: column; }
[data-kit="redesign"] .mb-row {
  display: grid; grid-template-columns: 4px 1fr auto auto;
  gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
[data-kit="redesign"] .mb-row:last-child { border-bottom: none; }
[data-kit="redesign"] .mb-color { width: 4px; height: 32px; border-radius: 2px; }
[data-kit="redesign"] .mb-info { min-width: 0; }
[data-kit="redesign"] .mb-name { font-size: 13px; font-weight: 600; }
[data-kit="redesign"] .mb-email {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  letter-spacing: 0.02em; margin-top: 2px;
}
[data-kit="redesign"] .mb-stat { text-align: right; font-family: var(--font-mono); font-size: 11px; }
[data-kit="redesign"] .mb-stat-num { font-weight: 700; color: var(--text); font-size: 14px; line-height: 1; }
[data-kit="redesign"] .mb-stat-label {
  font-size: 9px; color: var(--text-dim);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px;
}
[data-kit="redesign"] .mb-last {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.02em; white-space: nowrap;
}

/* Active-conversations card foot (link to full Conversations tab) */
[data-kit="redesign"] .support-card-foot {
  border-top: 1px solid var(--border-soft);
  padding: 10px 18px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  letter-spacing: 0.04em; background: var(--surface-1);
}
[data-kit="redesign"] .support-foot-link {
  color: var(--indigo-hi); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
[data-kit="redesign"] .support-foot-link svg { width: 11px; height: 11px; }

/* Customer rows on Customers tab */
[data-kit="redesign"] .fs-cust-row {
  display: grid;
  grid-template-columns: 38px 1.5fr 1.5fr auto auto;
  gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer; transition: background var(--t);
  align-items: center;
}
[data-kit="redesign"] .fs-cust-row:last-child { border-bottom: none; }
[data-kit="redesign"] .fs-cust-row:hover { background: var(--surface-2); }
[data-kit="redesign"] .fs-cust-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: white; flex-shrink: 0;
}
[data-kit="redesign"] .fs-cust-name { font-size: 13px; font-weight: 600; }
[data-kit="redesign"] .fs-cust-email {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.02em; margin-top: 2px;
  display: inline-flex; align-items: center; gap: 5px;
}
[data-kit="redesign"] .fs-cust-email .reveal-btn {
  cursor: default; padding: 1px 4px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 3px;
}
[data-kit="redesign"] .fs-cust-email svg { width: 10px; height: 10px; opacity: 0.6; }
[data-kit="redesign"] .fs-cust-cross { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
[data-kit="redesign"] .fs-cross-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
[data-kit="redesign"] .fs-cross-pill svg { width: 9px; height: 9px; }
[data-kit="redesign"] .fs-cross-pill.has-polar { background: var(--green-wash); color: var(--green-hi); border: 1px solid var(--green-dim); }
[data-kit="redesign"] .fs-cross-pill.no-polar { background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-hi); }
[data-kit="redesign"] .fs-cust-stats { text-align: right; }
[data-kit="redesign"] .fs-cust-stat-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
[data-kit="redesign"] .fs-cust-stat-label {
  font-family: var(--font-mono); font-size: 9px; color: var(--text-dim);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px;
}

/* ===== Settings -> Team ===== */
[data-kit="redesign"] .team-table { width: 100%; border-collapse: collapse; }
[data-kit="redesign"] .team-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
[data-kit="redesign"] .team-table td {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text);
}
[data-kit="redesign"] .team-table tr:last-child td { border-bottom: none; }
[data-kit="redesign"] .team-cell-email { font-weight: 500; }
[data-kit="redesign"] .team-you {
  display: inline-block; margin-left: 6px; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--border-hi);
  border-radius: 4px; padding: 1px 6px;
}
[data-kit="redesign"] .team-role {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-hi);
}
[data-kit="redesign"] .team-role svg { width: 12px; height: 12px; }
[data-kit="redesign"] .team-role-crown { color: #b78a00; background: rgba(183,138,0,0.08); border-color: rgba(183,138,0,0.3); }
[data-kit="redesign"] .team-role-admin { color: #2563eb; background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.3); }
[data-kit="redesign"] .team-role-support { color: #16a34a; background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.3); }
[data-kit="redesign"] .team-role-viewer { color: var(--text-dim); background: var(--surface-3); }

/* Invite form */
[data-kit="redesign"] .team-invite-form { padding: 18px; margin-bottom: 14px; }
[data-kit="redesign"] .team-invite-form-head h3 { margin: 0 0 14px 0; font-size: 14px; }
[data-kit="redesign"] .team-invite-form-grid { display: grid; grid-template-columns: 2fr 1.2fr auto; gap: 12px; align-items: end; }
[data-kit="redesign"] .team-invite-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
[data-kit="redesign"] .team-invite-form-grid input,
[data-kit="redesign"] .team-invite-form-grid select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--text); font-size: 13px;
}
[data-kit="redesign"] .team-invite-form-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Just-created invite success card */
[data-kit="redesign"] .team-created-card { padding: 14px 18px; margin-bottom: 14px; border-left: 3px solid var(--green, #16a34a); }
[data-kit="redesign"] .team-created-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
[data-kit="redesign"] .team-created-head svg { width: 18px; height: 18px; color: var(--green, #16a34a); }
[data-kit="redesign"] .team-created-title { font-size: 13px; font-weight: 600; }
[data-kit="redesign"] .team-created-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
[data-kit="redesign"] .team-created-url-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
[data-kit="redesign"] .team-created-url {
  flex: 1; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 11px; color: var(--text);
  overflow-x: auto; white-space: nowrap; user-select: all;
}

/* Per-row actions */
[data-kit="redesign"] .team-row-actions {
  text-align: right; white-space: nowrap;
}
[data-kit="redesign"] .team-row-actions .team-role-select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--text); font-size: 12px; margin-right: 6px;
}
[data-kit="redesign"] .team-row-actions .team-role-select:disabled {
  opacity: 0.5; cursor: not-allowed;
}
[data-kit="redesign"] .team-row-actions .btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}