:root {
  color-scheme: dark;
  --app-bg: #0f1722;
  --app-surface: #17212f;
  --app-surface-raised: #1d2938;
  --app-surface-hover: #243244;
  --app-border: #273548;
  --app-border-strong: #394a60;
  --app-text: #f3f6fa;
  --app-text-soft: #c6cfdb;
  --app-muted: #8491a3;
  --app-accent: #4299e1;
  --app-accent-hover: #62abe5;
  --app-accent-soft: #172f49;
  --app-on-accent: #fff;
  --app-sidebar-bg: #111a26;
  --app-success: #45c486;
  --app-success-soft: #122a20;
  --app-warning: #eab35d;
  --app-warning-soft: #302516;
  --app-purple: #a78bfa;
  --app-danger: #ef7b86;
  --app-danger-soft: #321a20;
  --app-sidebar: 72px;
  --app-radius: 6px;
  --app-shadow: 0 18px 48px rgb(0 0 0 / 28%);
  --app-font: "Segoe UI Variable", "Segoe UI", "Noto Sans SC", system-ui, sans-serif;
  --app-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --app-bg: #f3f6f9;
  --app-surface: #fff;
  --app-surface-raised: #f7f9fb;
  --app-surface-hover: #edf2f7;
  --app-border: #dfe5ec;
  --app-border-strong: #c8d1dc;
  --app-text: #162131;
  --app-text-soft: #344256;
  --app-muted: #68778a;
  --app-accent: #206bc4;
  --app-accent-hover: #1859a4;
  --app-accent-soft: #e8f1fb;
  --app-on-accent: #fff;
  --app-sidebar-bg: #fff;
  --app-success: #269b55;
  --app-success-soft: #e9f7ee;
  --app-warning: #b87503;
  --app-warning-soft: #fff3d6;
  --app-purple: #7c3aed;
  --app-danger: #d33a45;
  --app-danger-soft: #fcebed;
  --app-shadow: 0 16px 40px rgb(30 45 62 / 14%);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--app-bg); scrollbar-gutter: stable; }
html body {
  min-height: 100dvh;
  margin: 0 !important;
  padding-left: var(--app-sidebar) !important;
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
  font: 13px/1.5 var(--app-font) !important;
  letter-spacing: 0 !important;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }

html body main {
  width: min(100%, 1540px) !important;
  min-width: 0 !important;
  min-height: 100dvh;
  margin: 0 auto !important;
  padding: 24px clamp(20px, 2.4vw, 36px) 32px !important;
}

.rail {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 50 !important;
  display: flex !important;
  width: var(--app-sidebar) !important;
  height: 100dvh;
  padding: 14px 10px 12px !important;
  flex-direction: column;
  align-items: center;
  background: var(--app-sidebar-bg) !important;
  border-right: 1px solid var(--app-border) !important;
}
.rail-brand {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none;
}
.rail-brand b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 6px;
  background: var(--app-accent) !important;
  color: #fff !important;
  font-size: 10px;
  letter-spacing: .04em;
}
.rail-nav { display: grid; width: 100%; gap: 6px; }
.rail-nav a {
  position: relative;
  display: grid !important;
  width: 48px !important;
  height: 44px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  place-items: center;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--app-muted) !important;
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease !important;
}
.rail-nav a:hover { background: var(--app-surface-hover) !important; color: var(--app-text) !important; }
.rail-nav a.active {
  border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-border)) !important;
  background: var(--app-accent-soft) !important;
  color: var(--app-accent) !important;
}
.rail-nav a.active::before {
  position: absolute;
  left: -11px;
  width: 3px;
  height: 20px;
  border-radius: 0 2px 2px 0;
  background: var(--app-accent);
  content: "";
}
.rail .ico { display: grid; width: 20px; height: 20px; place-items: center; }
.rail .ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
.rail .label { display: none; }
.rail-nav a::after {
  position: absolute;
  left: 55px;
  z-index: 60;
  padding: 6px 9px;
  border: 1px solid var(--app-border-strong);
  border-radius: 5px;
  background: var(--app-surface-raised);
  color: var(--app-text);
  box-shadow: var(--app-shadow);
  content: attr(data-label);
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.rail-nav a:hover::after, .rail-nav a:focus-visible::after { opacity: 1; transform: translateX(0); }
.rail-status { display: grid; width: 38px; height: 38px; margin-top: auto; place-items: center; }
.rail-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--app-success); box-shadow: 0 0 0 4px var(--app-success-soft); }

.top {
  display: flex !important;
  min-height: 64px;
  margin: 0 0 18px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}
.workspace-label { display: block; margin-bottom: 3px; color: var(--app-accent); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
h1, .top h1 { margin: 0 !important; color: var(--app-text) !important; font-size: 21px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
h2, .panel h2, .toolbar h2 { margin: 0 !important; color: var(--app-text) !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
h3 { color: var(--app-text-soft) !important; font-size: 12px !important; letter-spacing: 0 !important; }
.sub { margin-top: 3px !important; }
.sub, .muted, .help, .hint, .empty, .job-meta { color: var(--app-muted) !important; -webkit-text-fill-color: currentColor !important; }
.mono, pre, code { font-family: var(--app-mono) !important; }

.panel, .group, .config-section, .account, .campaign {
  background: var(--app-surface) !important;
  border-color: var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: none !important;
}
.panel { border: 1px solid var(--app-border) !important; }
.toolbar {
  display: flex !important;
  min-height: 58px;
  padding: 12px 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border-color: var(--app-border) !important;
}
.panel > .toolbar:first-child { border-bottom: 1px solid var(--app-border) !important; }

button, .button {
  display: inline-flex !important;
  min-width: 0;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 5px !important;
  background: var(--app-surface-raised) !important;
  color: var(--app-text-soft) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .08s ease !important;
}
button:hover, .button:hover { background: var(--app-surface-hover) !important; color: var(--app-text) !important; }
html body .react-app button:not(:disabled):active,
html body .react-app .button:not(:disabled):active,
html body .react-app .sub2api-download:active {
  border-color: var(--app-accent) !important;
  background: var(--app-accent-soft) !important;
  color: var(--app-accent) !important;
  transform: translateY(1px);
}
button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .rail a:focus-visible { outline: 2px solid var(--app-accent) !important; outline-offset: 2px !important; }
button:disabled { opacity: .42 !important; cursor: not-allowed !important; transform: none; }
button.primary, .button.primary { border-color: var(--app-accent) !important; background: var(--app-accent) !important; color: var(--app-on-accent) !important; -webkit-text-fill-color: currentColor !important; font-weight: 650 !important; }
button.primary:hover, .button.primary:hover { background: var(--app-accent-hover) !important; }
button.danger, .button.danger { border-color: color-mix(in srgb, var(--app-danger) 55%, var(--app-border)) !important; background: var(--app-danger-soft) !important; color: var(--app-danger) !important; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px !important;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 5px !important;
  background: var(--app-bg) !important;
  color: var(--app-text) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
  outline: 0 !important;
}
input::placeholder, textarea::placeholder { color: var(--app-muted) !important; opacity: .8; }
input:focus, select:focus, textarea:focus { border-color: var(--app-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 16%, transparent) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--app-accent); }
label { color: var(--app-text-soft) !important; font-size: 12px !important; }
textarea { resize: vertical; }

.stats {
  display: flex !important;
  min-height: 58px;
  margin: 0 0 14px !important;
  overflow-x: auto;
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius) !important;
  background: var(--app-surface) !important;
}
.stat {
  position: relative;
  flex: 1 0 112px;
  min-width: 112px !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-right: 1px solid var(--app-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.stat:last-child { border-right: 0 !important; }
.stat:hover { background: var(--app-surface-hover) !important; transform: none !important; }
.stat.selected { background: var(--app-accent-soft) !important; box-shadow: inset 0 -2px var(--app-accent) !important; }
.stat strong { display: inline; color: var(--app-text) !important; font-size: 17px !important; font-weight: 650 !important; font-variant-numeric: tabular-nums; line-height: 1.1 !important; }
.stat span { display: inline; margin-left: 7px !important; color: var(--app-muted) !important; font-size: 11px !important; }

.table-wrap { position: relative; min-width: 0; overflow: auto !important; background: var(--app-surface) !important; scrollbar-color: var(--app-border-strong) transparent; scrollbar-width: thin; }
table { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; }
th, td { height: 43px; padding: 8px 11px !important; border: 0 !important; border-bottom: 1px solid var(--app-border) !important; color: var(--app-text-soft) !important; -webkit-text-fill-color: currentColor !important; font-size: 12px !important; line-height: 1.35; vertical-align: middle !important; }
th { position: sticky !important; top: 0; z-index: 3 !important; height: 38px; background: var(--app-surface-raised) !important; color: var(--app-muted) !important; font-size: 10px !important; font-weight: 650 !important; }
tbody tr { background: var(--app-surface); }
tbody tr:hover { background: var(--app-surface-hover) !important; }
tbody tr:last-child td { border-bottom: 0 !important; }
.empty { padding: 44px 20px !important; text-align: center; }
.pager { display: flex !important; min-height: 52px; padding: 9px 14px !important; align-items: center; justify-content: flex-end !important; gap: 10px !important; color: var(--app-muted) !important; border-top: 1px solid var(--app-border); }

.pill {
  display: inline-flex !important;
  min-height: 21px;
  padding: 2px 7px !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: 999px !important;
  background: var(--app-surface-raised) !important;
  color: var(--app-text-soft) !important;
  font-size: 10px !important;
  font-weight: 600;
  line-height: 1 !important;
}
.pill.success, .pill.running { border-color: color-mix(in srgb, var(--app-success) 42%, var(--app-border)) !important; background: var(--app-success-soft) !important; color: var(--app-success) !important; }
.pill.info { border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-border)) !important; background: var(--app-accent-soft) !important; color: var(--app-accent) !important; }
.pill.pending, .pill.rebound, .pill.plus { border-color: color-mix(in srgb, var(--app-warning) 42%, var(--app-border)) !important; background: var(--app-warning-soft) !important; color: var(--app-warning) !important; }
.pill.failed { border-color: color-mix(in srgb, var(--app-danger) 42%, var(--app-border)) !important; background: var(--app-danger-soft) !important; color: var(--app-danger) !important; }
.progress { background: var(--app-border) !important; }
.progress i { background: var(--app-accent) !important; }

dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0 !important; overflow: auto; border: 1px solid var(--app-border-strong) !important; border-radius: 7px !important; background: var(--app-surface) !important; color: var(--app-text) !important; box-shadow: var(--app-shadow) !important; }
dialog::backdrop { background: rgb(4 7 11 / 72%) !important; backdrop-filter: blur(2px); }
.dialog-head { display: flex; padding: 15px 17px !important; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--app-border) !important; }
.dialog-head > div { min-width: 0; }
.dialog-close { width: 30px !important; min-width: 30px !important; padding: 0 !important; flex: 0 0 30px; }
.dialog-wide { width: min(720px, calc(100vw - 32px)); }
.dialog-body { padding: 17px !important; }
.dialog-footer { display: flex !important; padding: 12px 17px !important; align-items: center; justify-content: flex-end !important; gap: 8px !important; border-top: 1px solid var(--app-border) !important; background: var(--app-surface-raised) !important; }

@media (max-width: 820px) {
  html body { padding: 0 0 62px !important; }
  html body main { min-height: calc(100dvh - 62px); padding: 16px 12px 22px !important; }
  .rail { inset: auto 0 0 0 !important; width: 100% !important; height: 62px !important; padding: 6px 10px !important; flex-direction: row !important; border: 0 !important; border-top: 1px solid var(--app-border) !important; }
  .rail-brand, .rail-status { display: none !important; }
  .rail-nav { position: static; display: flex; width: 100%; justify-content: space-around; gap: 4px; transform: none; }
  .rail-nav a { width: min(82px, 23vw) !important; height: 49px !important; margin: 0 !important; gap: 2px; grid-template-rows: 22px 14px; }
  .rail-nav a.active::before { inset: auto 12px -7px; width: auto; height: 3px; border-radius: 2px 2px 0 0; }
  .rail-nav a::after { display: none; }
  .rail .ico { display: grid; }
  .rail .label { display: block; font-size: 9px; line-height: 1; }
  .top { min-height: 54px; margin-bottom: 14px !important; align-items: flex-start !important; }
  h1, .top h1 { font-size: 19px !important; }
  .workspace-label { display: none; }
  .toolbar { align-items: flex-start !important; flex-direction: column; }
  .pager { justify-content: center !important; }
  .pool-panel { height: auto !important; }
}

@media (max-width: 520px) {
  .top { position: relative; flex-direction: column; }
  .page-actions { width: 100%; }
  .react-app:not(.page-pool) .top > .page-actions { padding-right: 42px; }
  .react-app:not(.page-pool) .top > .page-actions > .theme-toggle { position: absolute; top: 0; right: 0; }
  .stats { margin-inline: -12px !important; border-inline: 0 !important; border-radius: 0 !important; }
  .stat { min-width: 104px !important; padding-inline: 12px !important; }
  dialog { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 82px) !important; }
}

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