:root {
  color-scheme: light;
  --ink: #182230;
  --muted: #8993a3;
  --line: #e6ebef;
  --surface: #ffffff;
  --soft: #f7f9fa;
  --green: #14be79;
  --green-dark: #0a8d58;
  --green-soft: #d9f9e9;
  --amber: #f3a51b;
  --amber-soft: #fff0d5;
  --red: #ef5a5a;
  --red-soft: #ffe4e4;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #eff8f7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

button, input { font: inherit; letter-spacing: 0; }
button { color: inherit; }

.topbar {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(20px, 3vw, 56px);
  border-bottom: 1px solid rgba(211, 225, 227, .86);
  background: rgba(247, 252, 251, .94);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 760;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #152a32;
  font-size: 15px;
}

.topbar-actions { display: flex; align-items: center; gap: 12px; }

.range-tabs {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #e3e7eb;
  border-radius: 8px;
  background: #f0f2f4;
}

.range-tabs button {
  min-width: 52px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  color: #7a8491;
  background: transparent;
}

.range-tabs button.active {
  color: #222c38;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 34, 48, .08);
  font-weight: 700;
}

.range-tabs button:disabled { cursor: not-allowed; opacity: .75; }

.overall-status {
  display: inline-flex;
  height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 16px;
  color: var(--green-dark);
  background: var(--green-soft);
  font-size: 12px;
  letter-spacing: .05em;
}

.overall-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.overall-status.is-error { color: #c53d3d; background: var(--red-soft); }
.overall-status.is-empty { color: #697483; background: #e8ecef; }

.icon-button, .settings-button, .close-button, .add-button, .token-field button {
  border: 1px solid #dfe5e8;
  background: #fff;
  cursor: pointer;
}

.icon-button {
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 50%;
  color: #687380;
  background: transparent;
  font-size: 25px;
  line-height: 1;
}

.icon-button:hover { background: #e8f1f1; }
.icon-button.is-spinning { animation: spin .8s linear infinite; }

.countdown { min-width: 86px; color: #66717f; font-size: 13px; white-space: nowrap; }

.settings-button {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(30, 42, 55, .06);
  font-size: 13px;
}

#dashboard { padding: 28px clamp(20px, 3vw, 56px) 56px; }

.platform-section + .platform-section { margin-top: 34px; }

.platform-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.platform-heading-main { display: flex; min-width: 0; align-items: center; gap: 10px; }
.platform-heading h2 { margin: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.platform-heading-side { display: flex; align-items: center; gap: 16px; }

.today-cost {
  display: flex;
  min-width: 208px;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid #dcebe6;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(32, 57, 65, .04);
}

.today-cost-icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  color: #0aa563;
  background: #ddf9e9;
  font-size: 20px;
}

.today-cost-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
.today-cost-label { color: #7d8994; font-size: 11px; line-height: 1.2; }
.today-cost strong { overflow: hidden; color: #0baa58; font-size: 20px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.today-cost.is-error .today-cost-icon { color: #c33d3d; background: var(--red-soft); }
.today-cost.is-error strong { color: #b75a5a; }

.today-cost-refresh, .remaining-balance-refresh {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #71808a;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.today-cost-refresh:hover { color: var(--green-dark); background: var(--green-soft); }
.remaining-balance-refresh:hover { color: #087b9e; background: #e0f4fb; }
.today-cost-refresh:disabled, .remaining-balance-refresh:disabled { cursor: wait; opacity: .7; }
.today-cost-refresh span, .remaining-balance-refresh span { display: block; }
.today-cost-refresh.is-spinning span, .remaining-balance-refresh.is-spinning span { animation: spin .7s linear infinite; }

.remaining-balance {
  display: flex;
  min-width: 182px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid #d8e6ef;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(32, 57, 65, .04);
}
.remaining-balance-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: #087b9e; background: #e0f4fb; font-size: 20px; }
.remaining-balance-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
.remaining-balance-label { color: #7d8994; font-size: 11px; line-height: 1.2; }
.remaining-balance strong { overflow: hidden; color: #087b9e; font-size: 20px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.remaining-balance.is-error .remaining-balance-icon { color: #c33d3d; background: var(--red-soft); }
.remaining-balance.is-error strong { color: #b75a5a; }

.channel-count {
  padding: 3px 8px;
  border-radius: 10px;
  color: #70808c;
  background: #e2eded;
  font-size: 11px;
  white-space: nowrap;
}

.platform-health { color: #7e8997; font-size: 12px; }
.platform-health::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.platform-health.bad::before { background: var(--red); }

.channel-grid, .loading-state {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  gap: 20px;
}

.channel-card, .skeleton-card {
  min-width: 0;
  min-height: 370px;
  border: 1px solid #dce4e7;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(32, 57, 65, .06);
}

.channel-card { display: flex; flex-direction: column; padding: 22px; }

.card-head { display: flex; min-height: 58px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-identity { display: flex; min-width: 0; gap: 12px; }

.provider-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #ccefe0;
  border-radius: 10px;
  color: #0aa56a;
  background: #e3faef;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.provider-icon.anthropic { border-color: #f4dfbf; color: #ef6e09; background: #fff3df; }
.provider-icon.other { border-color: #dfe4e8; color: #617080; background: #f0f3f5; }

.channel-title-wrap { min-width: 0; }
.channel-title { margin: 2px 0 6px; overflow: hidden; font-size: 16px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.channel-tags { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; }

.tag {
  max-width: 150px;
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 5px;
  color: #63707e;
  background: #f0f2f4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag.provider { color: var(--green-dark); background: var(--green-soft); }
.tag.provider.anthropic { color: #d45c08; background: var(--amber-soft); }

.status-pill {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 13px;
  color: var(--green-dark);
  background: var(--green-soft);
  font-size: 12px;
  font-weight: 700;
}

.status-pill.degraded { color: #a56a00; background: var(--amber-soft); }
.status-pill.error { color: #c33d3d; background: var(--red-soft); }
.status-pill.unknown { color: #66717e; background: #e9edef; }

.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
  border: 1px solid #edf0f2;
  border-radius: 8px;
  background: #fafbfc;
}

.metric { min-width: 0; padding: 15px; }
.metric + .metric { border-left: 1px solid #edf0f2; }
.metric-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #9aa4b1; font-size: 11px; font-weight: 650; }
.metric-icon { color: #b4bdc7; font-size: 14px; }
.metric-value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 18px; font-weight: 800; }
.metric-value small { margin-left: 2px; color: #aab2bc; font-family: inherit; font-size: 10px; font-weight: 600; }

.availability {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 19px;
  padding-top: 18px;
  border-top: 1px solid #edf0f2;
}

.availability-label { padding-bottom: 5px; color: #9aa4b1; font-size: 12px; }
.availability-value { color: #1bb72c; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(26px, 2.2vw, 34px); font-weight: 850; line-height: 1; }
.availability-value small { font-size: 16px; }
.availability-value.warn { color: var(--amber); }
.availability-value.bad { color: var(--red); }

.timeline-wrap { margin-top: auto; padding-top: 20px; }
.timeline-head, .timeline-foot { display: flex; justify-content: space-between; color: #a1aab6; font-size: 9px; font-weight: 700; text-transform: uppercase; }

.timeline {
  display: grid;
  height: 23px;
  grid-template-columns: repeat(60, minmax(2px, 1fr));
  align-items: end;
  gap: 3px;
  margin: 8px 0 5px;
  overflow: hidden;
}

.timeline-bar { height: 21px; border-radius: 2px; background: var(--green); }
.timeline-bar.degraded { height: 16px; background: var(--amber); }
.timeline-bar.error { height: 12px; background: var(--red); }
.timeline-bar.unknown { height: 8px; background: #cbd2d8; }

.platform-error, .empty-state {
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 30px;
  border: 1px dashed #cfdadd;
  border-radius: 8px;
  color: #6d7885;
  background: rgba(255,255,255,.6);
  text-align: center;
}

.platform-error strong, .empty-state strong { display: block; margin-bottom: 8px; color: #2c3743; font-size: 15px; }
.platform-error p, .empty-state p { max-width: 620px; margin: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.6; }
.empty-state button { margin-top: 18px; }

.skeleton-card { animation: pulse 1.3s ease-in-out infinite; background: #f9fbfb; }

.settings-dialog {
  width: min(860px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #dce3e6;
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 24px 70px rgba(21, 36, 45, .25);
}

.settings-dialog::backdrop { background: rgba(16, 29, 36, .42); backdrop-filter: blur(3px); }
.settings-dialog[open] { display: flex; flex-direction: column; }

.dialog-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 1px 0 0; font-size: 19px; }
.eyebrow { margin: 0; color: var(--green-dark); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.close-button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: #72808c; font-size: 25px; line-height: 1; }

.settings-layout {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: 250px 1fr;
  grid-template-rows: minmax(0, 1fr);
}
.platform-list-wrap { min-height: 0; padding: 20px; border-right: 1px solid var(--line); background: #f8fafb; overflow-y: auto; }
.list-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #77828e; font-size: 11px; font-weight: 700; }
.add-button { width: 28px; height: 28px; border-radius: 6px; color: #fff; background: #172d34; font-size: 19px; line-height: 1; }
.platform-list { display: grid; gap: 6px; }
.platform-list-item { position: relative; display: flex; min-width: 0; align-items: center; gap: 2px; border-radius: 6px; }

.platform-list .platform-select {
  width: calc(100% - 28px);
  min-width: 0;
  flex: 1 1 auto;
  padding: 11px 12px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #53606c;
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-list .platform-select.active { border-color: #d6e5e2; color: #132d31; background: #e8f4f2; font-weight: 700; }
.drag-handle { width: 26px; height: 34px; flex: 0 0 26px; padding: 0; border: 0; border-radius: 5px; color: #a3aeb8; background: transparent; cursor: grab; font-size: 17px; line-height: 1; }
.drag-handle:hover, .drag-handle:focus-visible { color: #53736c; background: #e7f1ef; outline: 0; }
.drag-handle:active { cursor: grabbing; }
.platform-list-item.is-dragging { opacity: .45; }
.platform-list-item.drop-before::before, .platform-list-item.drop-after::after { position: absolute; z-index: 1; right: 0; left: 0; height: 2px; border-radius: 2px; background: var(--green); content: ""; pointer-events: none; }
.platform-list-item.drop-before::before { top: -4px; }
.platform-list-item.drop-after::after { bottom: -4px; }

.platform-form { display: flex; min-width: 0; flex-direction: column; gap: 18px; padding: 28px; overflow-y: auto; }
.form-heading h3 { margin: 3px 0 2px; font-size: 16px; }
.platform-form label > span, .platform-form .field-label { display: block; margin-bottom: 8px; color: #596673; font-size: 12px; font-weight: 700; }
.platform-form input, .platform-form textarea {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #dce3e7;
  border-radius: 6px;
  outline: 0;
  color: var(--ink);
  background: #fff;
}
.platform-form textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}
.platform-form input:focus, .platform-form textarea:focus { border-color: #42ad91; box-shadow: 0 0 0 3px rgba(34, 170, 132, .1); }
.platform-form small { display: block; min-height: 17px; margin-top: 6px; color: #8b96a2; font-size: 11px; }
.mode-tabs {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  border: 1px solid #e3e7eb;
  border-radius: 8px;
  background: #f0f2f4;
}
.mode-tabs button {
  min-width: 104px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  color: #7a8491;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}
.mode-tabs button.active {
  color: #222c38;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 34, 48, .08);
  font-weight: 700;
}
.token-section { display: flex; flex-direction: column; gap: 18px; }
.token-section[hidden] { display: none; }
.form-subsection { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.subsection-heading { display: flex; align-items: center; gap: 8px; }
.subsection-heading h4 { margin: 0; color: #394651; font-size: 13px; }
.subsection-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; color: var(--green-dark); background: var(--green-soft); font-size: 14px; font-weight: 800; }
.token-field { position: relative; }
.token-field input { padding-right: 44px; }
.token-field button { position: absolute; top: 5px; right: 5px; width: 34px; height: 32px; border: 0; border-radius: 5px; color: #7c8793; background: #f2f5f6; }
.form-error { min-height: 20px; margin: -4px 0 0; color: #cf4343; font-size: 12px; }
.form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.primary-button, .danger-button { min-height: 38px; padding: 0 16px; border-radius: 6px; cursor: pointer; }
.primary-button { border: 1px solid #132f35; color: #fff; background: #16333a; }
.danger-button { border: 1px solid #efd3d3; color: #bf4343; background: #fff; }
.danger-button[hidden] { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .48; } }

@media (min-width: 1880px) {
  .channel-grid, .loading-state { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .topbar { align-items: flex-start; }
  .topbar-actions { justify-content: flex-end; flex-wrap: wrap; }
  .countdown { display: none; }
  .settings-layout { grid-template-columns: 190px 1fr; }
}

@media (max-width: 640px) {
  .topbar { min-height: 62px; align-items: center; padding: 10px 14px; }
  .brand > span:last-child, .overall-status, .range-tabs { display: none; }
  .topbar-actions { gap: 5px; }
  #dashboard { padding: 18px 14px 36px; }
  .channel-card { min-height: 350px; padding: 18px; }
  .channel-grid, .loading-state { gap: 14px; }
  .platform-heading { align-items: flex-start; }
  .platform-heading-side { flex-direction: column-reverse; align-items: flex-end; gap: 8px; }
  .today-cost { min-width: 0; width: 190px; gap: 7px; padding: 8px; }
  .today-cost-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .remaining-balance { min-width: 0; width: 190px; gap: 7px; padding: 8px; }
  .remaining-balance-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .settings-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  .settings-layout { display: block; min-height: 0; overflow-y: auto; }
  .platform-list-wrap { padding: 14px 18px; border-right: 0; border-bottom: 1px solid var(--line); overflow-y: visible; }
  .platform-list { display: flex; overflow-x: auto; }
  .platform-list-item { width: auto; max-width: 208px; flex: 0 0 auto; }
  .platform-list .platform-select { width: auto; max-width: 180px; }
  .platform-form { min-height: 430px; padding: 20px 18px; overflow-y: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7eef1;
  --muted: #99a8ae;
  --line: #304047;
  --surface: #1d2a2f;
  --soft: #172328;
  --green-soft: #173f35;
  --amber-soft: #493719;
  --red-soft: #48282b;
}
html[data-theme="dark"] body { background: #122025; }
html[data-theme="dark"] .topbar { border-color: #304047; background: rgba(23, 35, 40, .94); }
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .add-button,
html[data-theme="dark"] .primary-button { background: #2b8470; }
html[data-theme="dark"] .range-tabs,
html[data-theme="dark"] .mode-tabs { border-color: #34454b; background: #202f34; }
html[data-theme="dark"] .range-tabs button,
html[data-theme="dark"] .mode-tabs button { color: #9baab0; }
html[data-theme="dark"] .range-tabs button.active,
html[data-theme="dark"] .mode-tabs button.active { color: #e7eef1; background: #34464c; }
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .settings-button,
html[data-theme="dark"] .close-button,
html[data-theme="dark"] .token-field button { border-color: #3a4b51; background: transparent; }
html[data-theme="dark"] .add-button { border-color: #3a4b51; background: #2b8470; }
html[data-theme="dark"] .icon-button { color: #b4c1c5; }
html[data-theme="dark"] .icon-button:hover { background: #263b40; }
html[data-theme="dark"] .settings-button { color: #dce6e8; background: #25363b; }
html[data-theme="dark"] .channel-count,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .provider-icon.other,
html[data-theme="dark"] .status-pill.unknown { color: #b0bec3; background: #2a393e; }
html[data-theme="dark"] .today-cost { border-color: #304047; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
html[data-theme="dark"] .today-cost-icon,
html[data-theme="dark"] .subsection-icon { color: #70dab3; background: #173f35; }
html[data-theme="dark"] .today-cost-label { color: #9baab0; }
html[data-theme="dark"] .today-cost strong { color: #55d896; }
html[data-theme="dark"] .today-cost.is-error .today-cost-icon { color: #f08d8d; background: #48282b; }
html[data-theme="dark"] .today-cost.is-error strong { color: #f08d8d; }
html[data-theme="dark"] .today-cost-refresh { color: #aebbc0; }
html[data-theme="dark"] .today-cost-refresh:hover { color: #70dab3; background: #173f35; }
html[data-theme="dark"] .remaining-balance-refresh { color: #aebbc0; }
html[data-theme="dark"] .remaining-balance-refresh:hover { color: #77d9f1; background: #173744; }
html[data-theme="dark"] .remaining-balance { border-color: #304047; background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
html[data-theme="dark"] .remaining-balance-icon { color: #77d9f1; background: #173744; }
html[data-theme="dark"] .remaining-balance-label { color: #9baab0; }
html[data-theme="dark"] .remaining-balance strong { color: #77d9f1; }
html[data-theme="dark"] .remaining-balance.is-error .remaining-balance-icon { color: #f08d8d; background: #48282b; }
html[data-theme="dark"] .remaining-balance.is-error strong { color: #f08d8d; }
html[data-theme="dark"] .channel-card,
html[data-theme="dark"] .skeleton-card { border-color: #304047; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
html[data-theme="dark"] .metrics { border-color: #304047; background: #19272c; }
html[data-theme="dark"] .metric + .metric,
html[data-theme="dark"] .availability { border-color: #304047; }
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .metric-icon,
html[data-theme="dark"] .availability-label,
html[data-theme="dark"] .timeline-head,
html[data-theme="dark"] .timeline-foot,
html[data-theme="dark"] .platform-health,
html[data-theme="dark"] .countdown { color: #9baab0; }
html[data-theme="dark"] .platform-error,
html[data-theme="dark"] .empty-state { border-color: #405158; color: #adbbc0; background: rgba(29, 42, 47, .7); }
html[data-theme="dark"] .platform-error strong,
html[data-theme="dark"] .empty-state strong { color: #e0e9eb; }
html[data-theme="dark"] .settings-dialog { border-color: #3a4b51; background: #1d2a2f; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .settings-dialog::backdrop { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .dialog-head,
html[data-theme="dark"] .platform-list-wrap { border-color: #304047; }
html[data-theme="dark"] .platform-list-wrap { background: #172328; }
html[data-theme="dark"] .list-title,
html[data-theme="dark"] .platform-list .platform-select,
html[data-theme="dark"] .platform-form label > span,
html[data-theme="dark"] .platform-form .field-label { color: #aebbc0; }
html[data-theme="dark"] .subsection-heading h4 { color: #dce6e8; }
html[data-theme="dark"] .platform-list .platform-select.active { border-color: #35665d; color: #d9eeea; background: #21433e; }
html[data-theme="dark"] .drag-handle { color: #839399; }
html[data-theme="dark"] .drag-handle:hover,
html[data-theme="dark"] .drag-handle:focus-visible { color: #70dab3; background: #21433e; }
html[data-theme="dark"] .platform-form input,
html[data-theme="dark"] .platform-form textarea { border-color: #3a4b51; color: #e7eef1; background: #162328; }
html[data-theme="dark"] .platform-form input::placeholder,
html[data-theme="dark"] .platform-form textarea::placeholder { color: #718187; }
html[data-theme="dark"] .danger-button { border-color: #633b3d; color: #f08d8d; background: transparent; }