:root {
  --bg: #fafafa;
  --card: #ffffff;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --ink: #18181b;
  --muted: #71717a;
  --faint: #a1a1aa;
  --accent: #16a34a;
  --accent-hover: #15803d;
  --accent-soft: #f0fdf4;
  --accent-soft2: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --warn-border: #fde68a;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .16);
  --ring: 0 0 0 3px rgba(22, 163, 74, .16);
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit }
button { cursor: pointer }
svg { display: block }

/* ---------- App shell ---------- */

.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh }

.side {
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px }
.brandmark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
}
.brandmark svg { width: 17px; height: 17px }
.brand strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em }
.brand small { display: block; color: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .14em; margin-top: 1px }

.side-label { color: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 10px 8px }

.nav { display: grid; gap: 2px }
.nav a {
  position: relative;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  display: flex; gap: 10px; align-items: center;
  color: var(--muted); font-size: 13px; font-weight: 500;
}
.nav a:hover { background: #f4f4f5; color: var(--ink) }
.nav a span { width: 16px; height: 16px; display: grid; place-items: center; line-height: 1 }
.nav a span svg { width: 16px; height: 16px }
.nav a.active { background: #f4f4f5; color: var(--ink); font-weight: 600 }
.nav a.active::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}

.side-foot { margin-top: auto; border-top: 1px solid var(--border); padding: 16px 10px 0 }
.side-foot b { font-size: 12px; font-weight: 600 }
.status-dot { display: inline-block; background: var(--accent); width: 7px; height: 7px; border-radius: 50%; margin-right: 7px }
.side-foot .small { color: var(--faint); font-size: 11px; margin-top: 6px }

.main { min-width: 0; padding: 24px clamp(20px, 3.5vw, 48px) 64px }

.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px }
.crumb { font-size: 12px; color: var(--faint) }
.crumb strong { color: var(--muted); font-weight: 600 }
.top-right { display: flex; align-items: center; gap: 10px }
.top-right .small { color: var(--muted); font-size: 12px }
.live {
  display: inline-flex; align-items: center;
  border: 1px solid var(--accent-soft2); background: var(--accent-soft);
  border-radius: 100px; padding: 5px 11px;
  color: var(--accent-hover); font-size: 11px; font-weight: 600;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #f4f4f5; border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--muted); font-size: 12px; font-weight: 600;
}

/* ---------- Headings ---------- */

.eyebrow { text-transform: uppercase; color: var(--faint); letter-spacing: .14em; font-size: 10px; font-weight: 600; margin: 0 0 8px }
.heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px }
.heading h1 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 0 }
.heading p { color: var(--muted); font-size: 13px; margin: 8px 0 0 }

/* ---------- Buttons ---------- */

.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 13px;
  background: var(--card); color: var(--ink);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--shadow);
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #f4f4f5 }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600 }
.btn.primary:hover { background: var(--accent-hover) }
.btn.soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-hover); box-shadow: none }
.btn.soft:hover { background: var(--accent-soft2) }
.btn.danger { color: var(--danger) }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger-border) }
.btn.small { padding: 5px 10px; font-size: 12px }
.btn:disabled { opacity: .5; cursor: wait }
.btn:focus-visible, a:focus-visible { outline: 3px solid rgba(22, 163, 74, .35); outline-offset: 2px }

/* ---------- Cards & stats ---------- */

.grid { display: grid; gap: 14px }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.stat { padding: 18px; }
.stat .symbol {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: #f4f4f5; color: var(--muted);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.stat .symbol svg { width: 16px; height: 16px }
.stat .label { color: var(--muted); font-size: 12px }
.stat .value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px }
.stat .note { font-size: 12px; color: var(--faint); margin-top: 4px }
.stat.alert .note { color: var(--warn) }
.stat.feature .symbol { background: var(--accent); color: #fff }
.stat.feature .value { color: var(--accent-hover) }

/* ---------- Sections ---------- */

.section { margin-top: 24px }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px }
.section h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0 }
.section .sub { font-size: 12px; color: var(--faint) }
.panel { padding: 20px }
.stack { display: grid; gap: 14px }

/* ---------- Chart ---------- */

.chart-card { padding: 20px }
.chart-top { display: flex; justify-content: space-between; align-items: start }
.chart-meta { font-size: 12px; color: var(--muted); margin: 4px 0 0 }
.chart {
  height: 180px; display: flex; align-items: end; gap: 7px;
  padding: 22px 0 0; border-bottom: 1px solid var(--border);
  position: relative;
}
.chart::before, .chart::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px dashed #ececee }
.chart::before { top: 40% }
.chart::after { top: 70% }
.bar { flex: 1; max-width: 22px; min-width: 6px; background: var(--accent-soft2); border-radius: 4px 4px 0 0; z-index: 1 }
.bar.dark { background: var(--accent) }
.axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 10px; margin-top: 8px }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted) }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); margin-right: 5px }
.legend i.light { background: var(--accent-soft2) }

/* ---------- Health / rows ---------- */

.health { padding: 20px }
.health .section-head { margin-bottom: 6px }
.health-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f4f4f5 }
.health-row:last-child { border: 0; padding-bottom: 0 }
.source-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-hover);
}
.source-icon.gold { background: var(--warn-soft); color: var(--warn) }
.source-icon.red { background: var(--danger-soft); color: var(--danger) }
.health-row strong { font-size: 13px; font-weight: 600 }
.health-row small { display: block; color: var(--faint); font-size: 11px; margin-top: 2px }
.health-row .right { margin-left: auto; text-align: right }
.health-row .right b { display: block; font-size: 13px; font-weight: 600 }
.health-row .right small { font-size: 11px }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex; align-items: center;
  border-radius: 100px; padding: 3px 9px;
  background: var(--accent-soft); color: var(--accent-hover);
  font-size: 11px; font-weight: 600;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 6px }
.pill.warn { background: var(--warn-soft); color: var(--warn) }
.pill.bad { background: var(--danger-soft); color: var(--danger) }
.pill.neutral { background: #f4f4f5; color: var(--muted) }

/* ---------- Tables ---------- */

.table-wrap { overflow: auto }
.table { width: 100%; border-collapse: collapse; text-align: left; min-width: 720px }
.table th {
  font-size: 11px; color: var(--faint); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
}
.table td { padding: 13px 16px; border-bottom: 1px solid #f4f4f5; font-size: 13px; vertical-align: middle }
.table tbody tr:hover { background: #fafafa }
.table tr:last-child td { border-bottom: 0 }
.table strong { font-size: 13px; font-weight: 600 }
.table small { color: var(--faint); display: block; margin-top: 3px; font-size: 11px }
.table .muted { color: var(--muted) }
.table .mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px }
.table .actions { gap: 6px }

.quality { display: flex; gap: 4px; flex-wrap: wrap }
.quality span { background: #f4f4f5; color: var(--muted); font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 6px }

/* ---------- Meters & progress ---------- */

.meter { height: 6px; background: #f4f4f5; border-radius: 10px; overflow: hidden; min-width: 90px }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 10px }
.meter i.amber { background: #f59e0b }
.meter i.red { background: var(--danger) }

.progress { height: 8px; background: #f4f4f5; border-radius: 20px; overflow: hidden }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 20px }
.progress i.warn { background: #f59e0b }

/* ---------- Forms ---------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); padding: 8px 11px;
  outline: none; color: var(--ink); font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
.field input:read-only, .field textarea:read-only { background: #fafafa; color: var(--muted) }
.field textarea { resize: vertical; min-height: 88px }
.field .hint { font-size: 11px; color: var(--faint); margin: 6px 0 0; line-height: 1.5 }
.field.wide { grid-column: 1 / -1 }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: var(--ring) }
.field .checkbox-label { display: flex; gap: 8px; align-items: center; margin-top: 24px; font-weight: 500 }
.field .quality-checkboxes input, .field .checkbox-label input { width: auto; margin: 0; padding: 0 }
.form-error { color: var(--danger); line-height: 1.6; font-size: 12px; min-height: 18px }

.search-input {
  width: 220px; padding: 7px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font-size: 13px; outline: none;
}
.search-input:focus { border-color: var(--accent); box-shadow: var(--ring) }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px }
.tabs a { padding: 0 14px 11px; font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: -1px }
.tabs a:hover { color: var(--ink) }
.tabs a.active { border-bottom: 2px solid var(--accent); color: var(--ink); font-weight: 600 }

/* ---------- Misc components ---------- */

.upload {
  border: 1.5px dashed var(--border-strong); background: #fafafa;
  border-radius: var(--radius); min-height: 180px;
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.upload .up-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-hover);
  display: grid; place-items: center; margin: 0 auto 10px;
}
.upload .up-icon svg { width: 19px; height: 19px }
.upload strong { display: block; font-size: 13px }
.upload p { margin: 6px 0 14px; color: var(--faint); font-size: 12px }

.info-box { background: var(--accent-soft); border-radius: 10px; padding: 14px 16px; color: #166534; font-size: 12px; line-height: 1.65 }
.info-box strong { display: block; font-size: 12px; margin-bottom: 3px }

.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); gap: 14px }

.notice {
  background: var(--warn-soft); border: 1px solid var(--warn-border);
  padding: 12px 15px; border-radius: 10px;
  color: #92400e; font-size: 12px; line-height: 1.6;
}
.notice strong { font-weight: 600 }

.rules { display: grid }
.rule { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid #f4f4f5 }
.rule:last-child { border: 0 }
.rule strong { font-size: 13px; font-weight: 600 }
.rule small { display: block; color: var(--faint); font-size: 11px; margin-top: 3px }
.rule b { font-size: 13px; font-weight: 600 }

.toggle { height: 20px; width: 34px; background: var(--accent); border-radius: 20px; position: relative }
.toggle::after { content: ''; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff }

.code {
  background: #18181b; color: #d4d4d8;
  padding: 14px 16px; border-radius: 10px; overflow: auto;
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.caption { font-size: 12px; color: var(--muted); line-height: 1.6 }
.device { font-size: 12px; color: var(--muted) }
.link { color: var(--accent-hover); font-weight: 600; font-size: 13px }
.divline { height: 1px; background: var(--border); margin: 18px 0 }
.kicker { font-weight: 600; color: var(--accent-hover); font-size: 12px }

.tagrow { display: flex; gap: 6px; flex-wrap: wrap }
.tag { border: 1px solid var(--border); color: var(--muted); padding: 5px 9px; border-radius: 7px; font-size: 11px; font-weight: 500 }

.empty { text-align: center; padding: 40px 24px; color: var(--faint) }
.empty .illustration { display: flex; justify-content: center; margin-bottom: 10px; color: var(--border-strong) }
.empty .illustration svg { width: 28px; height: 28px }
.empty strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600 }
.empty p { font-size: 12px }

.footer-note { color: var(--faint); font-size: 11px; margin-top: 24px }

/* ---------- Live management pages ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }

.feedback {
  padding: 11px 14px; margin: 14px 0;
  border: 1px solid var(--accent-soft2); border-radius: 10px;
  background: var(--accent-soft); color: #166534;
  font-size: 12px; line-height: 1.6;
}
.feedback.error { background: var(--danger-soft); border-color: var(--danger-border); color: #991b1b }

.editor-dialog {
  width: min(760px, calc(100% - 28px));
  max-height: calc(100vh - 40px); overflow: auto;
  border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; box-shadow: var(--shadow-lg);
  background: var(--card); color: var(--ink);
}
.editor-dialog.compact { width: min(480px, calc(100% - 28px)) }
.editor-dialog::backdrop { background: rgba(9, 9, 11, .45); backdrop-filter: blur(3px) }
.editor-dialog [hidden] { display: none !important }
.editor-dialog select, .editor-dialog input { accent-color: var(--accent) }

.dialog-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 20px }
.dialog-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0 }
.dialog-foot { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--border); margin-top: 16px }

.editor-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border) }
.editor-section h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600 }

.source-setting { margin: 0; border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.source-setting legend { padding: 0 7px; font-size: 12px; color: var(--ink); font-weight: 600 }
.source-setting .remove-platform { justify-self: start }

.quality-checkboxes { display: flex; flex-wrap: wrap; gap: 14px }
.quality-checkboxes label { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400 }

#new-platform { border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; background: var(--card); font-size: 12px }

.access-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-left: 18px; margin: 18px 0 4px }
.access-steps li { font-size: 13px; font-weight: 600; padding-left: 4px }
.access-steps p { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.65 }

#issued-card input { margin-top: 6px }
#issued-card textarea { margin-top: 6px; min-height: 60px }

/* ---------- Responsive ---------- */

@media (max-width: 1050px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .split { grid-template-columns: 1fr }
}

@media (max-width: 720px) {
  .app { display: block }
  .side { position: relative; padding: 14px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--border) }
  .nav { display: flex; overflow: auto }
  .nav a { white-space: nowrap }
  .nav a.active::before { display: none }
  .side-label, .side-foot { display: none }
  .brand { padding: 0 }
  .main { padding: 20px 14px 48px }
  .top { margin-bottom: 20px }
  .heading { align-items: start; flex-direction: column }
  .grid.four, .grid.two, .form-grid { grid-template-columns: 1fr }
  .field.wide { grid-column: auto }
  .editor-dialog { padding: 18px }
  .source-setting { grid-template-columns: 1fr }
  .source-setting .wide { grid-column: auto }
  .section-head { gap: 12px; flex-wrap: wrap }
  .access-steps { grid-template-columns: 1fr; gap: 10px }
  .search-input { width: 100% }
  .dialog-head h2 { font-size: 16px }
}

/* Administrator sign-in */
.login-body { background: var(--bg) }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .95fr) minmax(450px, 1.05fr) }
.login-story { background: #09090b; color: #fafafa; display: flex; flex-direction: column; padding: 44px 52px; position: relative; overflow: hidden }
.login-story::after { content: ''; position: absolute; width: 440px; height: 440px; border: 1px solid rgba(255, 255, 255, .05); border-radius: 50%; right: -210px; bottom: -180px; box-shadow: 0 0 0 80px rgba(22, 163, 74, .03), 0 0 0 160px rgba(22, 163, 74, .02) }
.login-brand { display: flex; gap: 12px; align-items: center; width: max-content }
.login-mark { background: var(--accent); color: #fff; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px }
.login-mark svg { width: 20px; height: 20px }
.login-brand strong { font-size: 19px; font-weight: 700; letter-spacing: -.02em }
.login-brand small { display: block; font-size: 9px; letter-spacing: .18em; font-weight: 600; margin-top: 2px; color: #71717a }
.login-story-content { margin: auto 0; padding: 64px 0; position: relative; z-index: 1 }
.login-story .eyebrow { color: #4ade80; font-size: 11px; letter-spacing: .16em }
.login-story h1 { color: #fafafa; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.3; letter-spacing: -.03em; margin: 18px 0 20px; font-weight: 700 }
.login-story-content > p:not(.eyebrow) { color: #a1a1aa; line-height: 1.85; font-size: 14px }
.login-story-foot { color: #52525b; font-size: 12px; margin: 0; position: relative; z-index: 1 }
.signal-art { margin-top: 44px; display: flex; align-items: center; max-width: 420px; height: 134px }
.signal-sources { display: grid; gap: 12px }
.signal-sources span { width: 45px; padding: 5px 0; text-align: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; font-size: 10px; color: #a1a1aa; letter-spacing: 1px }
.signal-path { display: grid; width: 90px; height: 105px; align-content: space-between; padding: 15px 0 }
.signal-path i { height: 1px; background: rgba(74, 222, 128, .4); width: 100% }
.signal-path i:first-child { transform: rotate(24deg); transform-origin: left center }
.signal-path i:last-child { transform: rotate(-24deg); transform-origin: left center }
.signal-core { width: 72px; height: 72px; border: 1px solid rgba(74, 222, 128, .5); border-radius: 16px; display: grid; place-items: center; color: #4ade80; background: rgba(22, 163, 74, .12); box-shadow: 0 0 0 12px rgba(255, 255, 255, .02) }
.signal-core svg { width: 30px; height: 30px }
.signal-output { display: flex; gap: 5px; margin-left: 38px; align-items: center }
.signal-output i { width: 4px; height: 20px; background: #16a34a; border-radius: 4px }
.signal-output i:nth-child(2n) { height: 40px; opacity: .75 }
.signal-output i:nth-child(3n) { height: 64px; opacity: .45 }
.login-panel { background: var(--card); display: flex; flex-direction: column; padding: 44px; align-items: center; justify-content: center }
.login-form-wrap { max-width: 400px; width: 100%; margin: auto 0 }
.login-lock { width: 40px; height: 40px; background: #f4f4f5; border: 1px solid var(--border); color: var(--muted); border-radius: 10px; display: grid; place-items: center; margin-bottom: 24px }
.login-lock svg { width: 19px; height: 19px }
.login-form-wrap .eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--faint) }
.login-form-wrap h2 { font-size: 24px; font-weight: 700; margin: 6px 0 6px; letter-spacing: -.02em }
.login-subtitle { color: var(--muted); font-size: 13px; margin: 0 0 26px }
.login-form-wrap form { display: grid; gap: 18px; margin-top: 22px }
.login-form-wrap input { padding: 10px 12px; min-height: 44px; background: #fff }
.password-wrap { position: relative }
.password-wrap input { padding-right: 62px; width: 100% }
.password-wrap button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); background: none; border: 0; padding: 6px }
.password-wrap button:hover { color: var(--ink) }
.login-submit { display: flex; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 3px; padding: 10px 14px; font-weight: 600 }
.login-help { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 26px }
.login-security { display: flex; gap: 12px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 12px }
.login-security > span { color: var(--accent); flex-shrink: 0; margin-top: 1px }
.login-security > span svg { width: 16px; height: 16px }
.login-security strong { font-weight: 600; color: var(--ink) }
.login-security p { color: var(--muted); margin: 4px 0 0; line-height: 1.65 }
.login-session-note { margin: 18px 0 0; font-size: 11px; color: var(--faint) }
.login-panel-foot { color: var(--faint); font-size: 11px; margin: 44px 0 0 }
.login-form-wrap .feedback { margin: 16px 0 }
.login-form-wrap [hidden] { display: none }
@media (max-width: 900px) { .login-story { padding: 36px 32px } .login-panel { padding: 36px } .login-layout { grid-template-columns: .8fr 1fr } .login-story h1 { font-size: 30px } .signal-output { margin-left: 22px; gap: 3px } .signal-path { width: 60px } }
@media (max-width: 680px) { .login-layout { display: block } .login-story { padding: 22px 24px } .login-story::after { display: none } .login-story-content, .login-story-foot { display: none } .login-panel { min-height: calc(100vh - 84px); padding: 32px 24px } .login-brand strong { font-size: 17px } .login-mark { width: 34px; height: 34px } .login-mark svg { width: 17px; height: 17px } .login-lock { margin-bottom: 20px } .login-form-wrap h2 { font-size: 22px } .login-panel-foot { margin-top: 28px } }

/* Group permissions share the same source controls. */
.group-flow{display:flex;align-items:center;gap:24px;padding:20px 0;flex-wrap:wrap}.group-flow>div{flex:1;min-width:160px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px}.group-flow small,.group-option small{display:block;margin-top:6px;color:var(--muted)}.group-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.group-option{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--border);border-radius:8px;padding:12px;cursor:pointer}.group-option input{margin-top:4px;flex:0 0 auto}.policy-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border:1px solid var(--border);border-radius:8px}.policy-row>label:last-child:not(:first-child){display:flex;align-items:center;gap:12px;font-size:13px}.policy-row select{min-width:150px}.group-filter{min-width:180px}.group-options .group-option strong{font-size:14px}@media(max-width:650px){.group-options{grid-template-columns:1fr}.policy-row{align-items:flex-start;flex-direction:column}.group-flow{gap:10px}.group-flow>span{display:none}}
.metric-bar{position:relative;flex:1;min-width:3px;background:var(--accent);border-radius:4px 4px 0 0;z-index:1;overflow:hidden}.metric-errors{position:absolute;top:0;left:0;right:0;background:var(--danger)}.legend i.error-dot{background:var(--danger)}#feedback{margin-bottom:16px}#updated-at{font-variant-numeric:tabular-nums}.rule>span{overflow-wrap:anywhere;text-align:right}#chart{gap:5px}#chart-axis{gap:8px}#provider-status .health-row small{overflow-wrap:anywhere}

.mfa-enrollment{text-align:center;margin:16px 0}.mfa-enrollment img{max-width:100%;height:auto;background:white}.mfa-enrollment .hint{text-align:left}#mfa-secret{font-family:monospace;font-size:12px}#setup-cancel{margin-top:12px;width:100%}