:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --anilot-canvas: #000000;
  --anilot-bg: #05070f;
  --anilot-surface: #0b0f1f;
  --anilot-surface-2: #10162b;
  --anilot-card: #0d1328;
  --anilot-card-2: #121a33;
  --anilot-chip: rgba(255,255,255,.06);
  --anilot-text: #eef4ff;
  --anilot-muted: #9aa7bd;
  --anilot-border: rgba(255,255,255,.10);
  --anilot-border-strong: rgba(34,211,238,.32);
  --anilot-cyan: #00d9ff;
  --anilot-purple: #a855f7;
  --anilot-gold: #eab308;
  --anilot-primary: #eab308;
  --anilot-focus: #22d3ee;
  --anilot-danger: #ff6b6b;
  --anilot-ok: #52d1b8;
  --anilot-shadow: 0 18px 40px rgba(0,0,0,.34);
}

html[data-theme="light"] {
  color-scheme: light;
  --anilot-canvas: #f8fafc;
  --anilot-bg: #f8fafc;
  --anilot-surface: #ffffff;
  --anilot-surface-2: #eef3f8;
  --anilot-card: #ffffff;
  --anilot-card-2: #f3f7fb;
  --anilot-chip: rgba(15,23,42,.055);
  --anilot-text: #101828;
  --anilot-muted: #526070;
  --anilot-border: #dbe5ef;
  --anilot-border-strong: rgba(0,119,163,.42);
  --anilot-cyan: #0077a3;
  --anilot-purple: #5b5bd6;
  --anilot-gold: #a86f00;
  --anilot-primary: #0077a3;
  --anilot-focus: #0b7fab;
  --anilot-danger: #dc2626;
  --anilot-ok: #0f766e;
  --anilot-shadow: 0 16px 36px rgba(8,47,73,.12);
}

html[data-theme] {
  --bg: var(--anilot-bg);
  --panel: var(--anilot-surface);
  --panel-2: var(--anilot-surface-2);
  --card: var(--anilot-card);
  --chip: var(--anilot-chip);
  --text: var(--anilot-text);
  --ink: var(--anilot-text);
  --muted: var(--anilot-muted);
  --brand: var(--anilot-cyan);
  --accent: var(--anilot-cyan);
  --accent-2: var(--anilot-purple);
  --focus: var(--anilot-focus);
  --border: var(--anilot-border);
  --border-2: var(--anilot-border-strong);
  --shadow: var(--anilot-shadow);
  --anilot-action: var(--anilot-primary);
  --anilot-action-hover: #075985;
  --anilot-action-text: #ffffff;
  --anilot-highlight: var(--anilot-gold);
  --danger: var(--anilot-danger);
  --ok: var(--anilot-ok);
  --group-bg-1: var(--anilot-card);
  --group-bg-2: var(--anilot-card-2);
  --font-body: 'Manrope', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
  --font-display: 'Manrope', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', system-ui, sans-serif;
}

html[data-theme] body {
  font-family: var(--font-body);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 700px at 10% -10%, #1a2250 0%, #142042 58%, var(--anilot-bg) 100%),
    linear-gradient(var(--anilot-bg), var(--anilot-bg));
}

html[data-theme="light"] body {
  background:
    radial-gradient(1050px 620px at 10% -10%, #dfeaf4 0%, #f8fafc 56%, #eef3f8 100%),
    linear-gradient(var(--anilot-bg), var(--anilot-bg));
}

html[data-theme] body::before {
  opacity: .08;
}

html[data-theme="light"] body::before {
  opacity: .18;
  mix-blend-mode: multiply;
}

html[data-theme="light"] a {
  color: #0e7490;
}


html[data-theme="light"] {
  --anilot-action: #0077a3;
  --anilot-action-hover: #075985;
  --anilot-action-text: #ffffff;
  --anilot-highlight: #a86f00;
}

html[data-theme="dark"] {
  --anilot-action: #00d9ff;
  --anilot-action-hover: #0e7490;
  --anilot-action-text: #06111f;
  --anilot-highlight: #eab308;
}

html[data-theme="light"] .btn,
html[data-theme="light"] button,
html[data-theme="light"] select,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="file"],
html[data-theme="light"] .select,
html[data-theme="light"] .checkbox,
html[data-theme="light"] .pill,
html[data-theme="light"] .tag,
html[data-theme="light"] .copy-mode,
html[data-theme="light"] .toggle-group,
html[data-theme="light"] .toolbar .group {
  box-shadow: none;
}

html[data-theme="light"] .site-nav,
html[data-theme="light"] .back-link,
html[data-theme="light"] [data-theme-toggle],
html[data-theme="light"] .theme-toggle {
  background: #ffffff;
  color: #0b5573;
}

html[data-theme="light"] .site-nav a {
  color: #475569;
}

html[data-theme="light"] .site-nav a:hover,
html[data-theme="light"] .site-nav a:focus-visible {
  color: #101828;
  background: #eef3f8;
}

html[data-theme="light"] .card,
html[data-theme="light"] .side,
html[data-theme="light"] .panel,
html[data-theme="light"] .group,
html[data-theme="light"] .modal {
  background: linear-gradient(180deg, #ffffff, #f8fbfe);
}

html[data-theme="light"] .chip,
html[data-theme="light"] .pill,
html[data-theme="light"] .tag,
html[data-theme="light"] label.chk,
html[data-theme="light"] .copy,
html[data-theme="light"] .flag,
html[data-theme="light"] .badge {
  background: #eef3f8;
  color: #101828;
  border-color: #d7e0ea;
}

html[data-theme="light"] button.ghost,
html[data-theme="light"] .btn.secondary,
html[data-theme="light"] #clearSelection,
html[data-theme="light"] #selectAllFiltered,
html[data-theme="light"] #resetProgress,
html[data-theme="light"] #clearCache,
html[data-theme="light"] #runTests,
html[data-theme="light"] #exportProgress,
html[data-theme="light"] #shareBtn,
html[data-theme="light"] #btn-clear,
html[data-theme="light"] #prevPage,
html[data-theme="light"] #nextPage {
  background: #f8fafc;
  color: #26374a;
  border: 1px solid #d7e0ea;
}

.site-identity {
  display: grid;
  gap: 4px;
  min-width: min(100%, 260px);
}

.site-brand {
  width: max-content;
  color: var(--anilot-text);
  text-decoration: none;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: 0;
}

.site-brand::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--anilot-cyan), var(--anilot-purple), var(--anilot-gold));
}

.tool-kicker {
  color: var(--anilot-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-actions,
.top-links,
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  border: 1px solid var(--anilot-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--anilot-surface) 88%, transparent);
}

.site-nav a {
  color: var(--anilot-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 10px;
  border-radius: 999px;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--anilot-text);
  background: var(--anilot-chip);
}

.brand h1,
.title h1,
header h1 {
  letter-spacing: 0;
}

[data-theme-toggle],
.theme-toggle,
.back-link,
.btn,
button,
select,
input[type="text"],
input[type="search"],
input[type="file"],
.select,
.checkbox,
.pill,
.tag,
.copy-mode,
.toggle-group,
.toolbar .group {
  border-color: var(--anilot-border);
  font-family: var(--font-body);
}

[data-theme-toggle],
.theme-toggle,
.back-link {
  min-height: 34px;
  border: 1px solid var(--anilot-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--anilot-surface) 88%, transparent);
  color: var(--anilot-text);
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

[data-theme-toggle],
.theme-toggle {
  min-width: 72px;
  padding: 8px 12px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  text-decoration: none;
}

[data-theme-toggle]:hover,
[data-theme-toggle]:focus-visible,
.theme-toggle:hover,
.theme-toggle:focus-visible,
.back-link:hover,
.back-link:focus-visible {
  color: var(--anilot-text);
  border-color: var(--anilot-border-strong);
  outline: none;
}

html[data-theme] .btn,
html[data-theme] button.primary,
html[data-theme] #markCaught,
html[data-theme] #fetchSwSh,
html[data-theme] #fetchSV,
html[data-theme] #load {
  background: linear-gradient(180deg, var(--anilot-action), var(--anilot-action-hover));
  color: var(--anilot-action-text);
  border: 0;
  box-shadow: 0 10px 22px rgba(0,119,163,.18);
  font-weight: 800;
}

html[data-theme] .btn.secondary,
html[data-theme] button.ghost,
html[data-theme] #clearSelection,
html[data-theme] #selectAllFiltered,
html[data-theme] #resetProgress,
html[data-theme] #clearCache,
html[data-theme] #runTests,
html[data-theme] #exportProgress,
html[data-theme] #shareBtn,
html[data-theme] #btn-clear {
  background: color-mix(in srgb, var(--anilot-surface-2) 92%, transparent);
  color: var(--anilot-text);
  border: 1px solid var(--anilot-border);
  box-shadow: none;
}

html[data-theme] .btn:hover,
html[data-theme] button:hover {
  border-color: var(--anilot-border-strong);
}

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea,
html[data-theme] .select,
html[data-theme] .search,
html[data-theme] .toolbar .group,
html[data-theme] .copy-mode,
html[data-theme] .toggle-group {
  background: color-mix(in srgb, var(--anilot-surface) 94%, transparent);
  color: var(--anilot-text);
}

html[data-theme] input::placeholder {
  color: color-mix(in srgb, var(--anilot-muted) 82%, transparent);
}

html[data-theme] .card,
html[data-theme] .side,
html[data-theme] .panel,
html[data-theme] .group,
html[data-theme] .modal,
html[data-theme] .destination-card,
html[data-theme] .tool-card,
html[data-theme] .about-panel {
  background: linear-gradient(180deg, var(--anilot-card), var(--anilot-card-2));
  border-color: var(--anilot-border);
  box-shadow: var(--anilot-shadow);
}

html[data-theme="light"] .card,
html[data-theme="light"] .side,
html[data-theme="light"] .panel,
html[data-theme="light"] .group,
html[data-theme="light"] .modal,
html[data-theme="light"] .destination-card,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .about-panel {
  box-shadow: var(--anilot-shadow);
}

html[data-theme] .chip,
html[data-theme] .pill,
html[data-theme] .tag,
html[data-theme] label.chk,
html[data-theme] .copy,
html[data-theme] .flag,
html[data-theme] .badge {
  background: var(--anilot-chip);
  color: var(--anilot-text);
  border-color: var(--anilot-border);
}

html[data-theme] .muted,
html[data-theme] .small,
html[data-theme] .desc,
html[data-theme] .hint,
html[data-theme] .zh,
html[data-theme] .cname,
html[data-theme] .num,
html[data-theme] .footer,
html[data-theme] footer {
  color: var(--anilot-muted);
}

html[data-theme] .progress {
  background: color-mix(in srgb, var(--anilot-muted) 14%, transparent);
}

html[data-theme] .progress > span,
html[data-theme] .bar {
  background: linear-gradient(90deg, var(--anilot-cyan), var(--anilot-purple));
}

html[data-theme] .avatar {
  background: color-mix(in srgb, var(--anilot-surface-2) 92%, black 8%);
}

html[data-theme] pre,
html[data-theme] .kbd,
html[data-theme] .toast {
  background: var(--anilot-surface-2);
  color: var(--anilot-text);
  border-color: var(--anilot-border);
}

html[data-theme] .banner {
  color: color-mix(in srgb, var(--anilot-ok) 78%, white 22%);
  border-color: color-mix(in srgb, var(--anilot-ok) 50%, transparent);
}

html[data-theme="light"] .banner {
  background: rgba(15,118,110,.08);
  color: #0f766e;
}

html[data-theme] .banner.error {
  color: color-mix(in srgb, var(--anilot-danger) 78%, white 22%);
  border-color: color-mix(in srgb, var(--anilot-danger) 50%, transparent);
}

html[data-theme="light"] .banner.error {
  background: rgba(220,38,38,.08);
  color: #b91c1c;
}

html[data-theme="light"] .aura {
  opacity: .24;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .copy-mode button[aria-pressed="true"],
html[data-theme="light"] .toggle-group button[aria-pressed="true"] {
  color: #ffffff;
}

html[data-theme="light"] .copy.ok {
  background: rgba(15,118,110,.12);
  color: #0f766e;
  border-color: rgba(15,118,110,.24);
}

html[data-theme="dark"] .copy-mode button[aria-pressed="true"],
html[data-theme="dark"] .toggle-group button[aria-pressed="true"] {
  color: #07111f;
}


html[data-theme] .aura {
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

html[data-theme] .panel,
html[data-theme] .group,
html[data-theme] .chip,
html[data-theme] .pill {
  animation: none;
  opacity: 1;
}

@media (max-width: 760px) {
  .site-actions,
  .top-links,
  .header-actions,
  .site-nav {
    justify-content: flex-start;
    width: 100%;
  }

  .site-nav {
    border-radius: 16px;
  }

  .site-nav a,
  .back-link,
  [data-theme-toggle],
  .theme-toggle {
    min-height: 38px;
  }

  .toolbar,
  .toolbar .group,
  .row,
  .pager,
  .pager-controls {
    width: 100%;
  }

  .toolbar .group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  .toolbar .group label,
  .toolbar .group select,
  .toolbar .group input,
  .toolbar .group button,
  .row select,
  .row button,
  .row label,
  .copy-mode,
  .pager .pill,
  .pager button {
    width: 100%;
    max-width: 100%;
  }

  .copy-mode,
  .toggle-group {
    border-radius: 16px;
    justify-content: stretch;
  }

  .copy-mode button,
  .toggle-group button {
    flex: 1 1 0;
  }
}