:root {
  color-scheme: dark;
  --bg: #101213;
  --sidebar: #0d0f10;
  --surface: #191c1e;
  --surface-raised: #1d2022;
  --surface-soft: #141718;
  --surface-hover: #202427;
  --text: #f0f2f3;
  --text-soft: #c5cacf;
  --muted: #8a9298;
  --line: #292d30;
  --line-strong: #373c40;
  --accent: #2aa8ff;
  --accent-hover: #1597e8;
  --teal: #20c7b7;
  --danger: #ef6a6a;
  --warning: #f0b94d;
  --info: #73a9ff;
  --radius: 7px;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus { outline: 0; }
button:focus-visible { outline: 2px solid #4ab7f5; outline-offset: 1px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #68c2ff; }
svg { display: block; }
i[data-lucide] { width: 15px; height: 15px; display: inline-block; flex: 0 0 auto; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #111314; }
::-webkit-scrollbar-thumb { background: #34393d; border: 2px solid #111314; border-radius: 7px; }
::-webkit-scrollbar-thumb:hover { background: #454b50; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 218px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 12;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid #242729;
}
.brand {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border-bottom: 1px solid #202325;
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #8ed5ff;
  background: #162633;
  border: 1px solid #24435a;
  border-radius: 7px;
}
.brand-mark svg { width: 16px; height: 16px; }
.brand strong, .brand small { display: block; }
.brand strong { color: #f5f6f7; font-size: 13px; font-weight: 650; }
.brand small { margin-top: 1px; color: #646d74; font-size: 9px; }
#nav { padding: 10px 9px; display: flex; flex-direction: column; gap: 2px; }
.nav-group-label {
  display: block;
  margin: 12px 9px 5px;
  color: #555d63;
  font-size: 10px;
  font-weight: 650;
}
.nav-group-label:first-child { margin-top: 2px; }
.nav-item {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #aab1b6;
  text-align: left;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.nav-item svg { width: 15px; height: 15px; color: #737c83; stroke-width: 1.8; }
.nav-item:hover { background: #16191b; color: #e9ecee; }
.nav-item:hover svg { color: #aab1b6; }
.nav-item.active { background: #172532; border-color: #1e3446; color: #d6efff; font-weight: 650; }
.nav-item.active svg { color: var(--accent); }
.sidebar-status {
  min-height: 64px;
  margin-top: auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #202325;
  background: #0f1112;
}
.sidebar-status strong, .sidebar-status small { display: block; }
.sidebar-status strong { color: #cbd0d4; font-size: 11px; font-weight: 600; }
.sidebar-status small { max-width: 160px; margin-top: 2px; overflow: hidden; color: #626a70; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #35cf91; box-shadow: 0 0 0 3px rgba(53, 207, 145, .11); }
.status-dot.off { background: var(--danger); box-shadow: 0 0 0 3px rgba(239, 106, 106, .1); }
.status-dot.muted { background: #586066; box-shadow: none; }

.main { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 66px;
  padding: 9px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(16, 18, 19, .96);
  border-bottom: 1px solid #25282a;
  backdrop-filter: blur(14px);
}
.page-heading { min-width: 0; }
.page-kicker { display: block; margin-bottom: 1px; color: #50585e; font-size: 8px; font-weight: 700; }
.topbar h1 { margin: 0; color: #f5f6f7; font-size: 17px; line-height: 1.2; }
.topbar p { margin: 2px 0 0; color: #737b81; font-size: 10px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
#menuButton { display: none; }
.page { display: none; padding: 18px 22px 30px; }
.page.active { display: block; animation: page-in .16s ease; }
@keyframes page-in { from { opacity: .5; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

.panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .015), 0 12px 28px rgba(0, 0, 0, .08);
}
.panel-heading {
  min-height: 58px;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.panel-heading h2 { margin: 0; color: #e8ebed; font-size: 13px; font-weight: 650; }
.panel-heading p { margin: 3px 0 0; color: #747c82; font-size: 10px; }
.split-layout { display: grid; grid-template-columns: minmax(440px, 1.08fr) minmax(350px, .92fr); gap: 13px; }
.generation-form { padding-bottom: 15px; }
.generation-form > :not(.panel-heading) { margin-left: 15px; margin-right: 15px; }
.panel-body { padding: 0 15px 15px; }
.compact-form-panel, .watermark-result-panel { min-height: 402px; }
.watermark-result-panel .result-video { min-height: 290px; }
.result-panel { min-height: 520px; }
.table-panel { margin-top: 13px; overflow: hidden; }

.form-grid { display: grid; gap: 11px; margin-top: 13px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label > span, .field-block > span { display: block; margin-bottom: 5px; color: #a6adb2; font-size: 10px; font-weight: 600; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #121516;
  color: #e8ebed;
  outline: 0;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input, select { min-height: 34px; padding: 0 10px; }
select { color-scheme: dark; }
textarea { min-height: 82px; resize: vertical; padding: 9px 10px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: #555d63; }
input:hover, select:hover, textarea:hover { border-color: #444a4f; }
input:focus, select:focus, textarea:focus { border-color: #238fd2; background: #14191c; box-shadow: 0 0 0 2px rgba(42, 168, 255, .1); }
input[type="file"] { min-height: 36px; padding: 4px; color: #7f888e; font-size: 10px; }
input[type="file"]::file-selector-button {
  height: 26px;
  margin-right: 8px;
  padding: 0 9px;
  border: 1px solid #3a4044;
  border-radius: 4px;
  background: #202427;
  color: #cbd0d4;
  cursor: pointer;
}
.field-block { display: block; margin-top: 13px; }
.form-actions { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.button {
  min-height: 33px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 620;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.button.primary { background: #188bd1; border-color: #239be2; color: #fff; }
.button.primary:hover { background: var(--accent-hover); border-color: #42b2f5; }
.button.secondary { background: #181b1d; border-color: #34393d; color: #bdc3c7; }
.button.secondary:hover { background: #222629; border-color: #454b50; color: #f0f2f3; }
.button.danger { background: rgba(239, 106, 106, .06); border-color: #5c3535; color: #f08383; }
.button.danger:hover { background: rgba(239, 106, 106, .12); border-color: #815050; }
.button.text { min-height: 27px; padding: 0 3px; background: transparent; color: var(--accent); }
.button.small { min-height: 27px; padding: 0 8px; font-size: 10px; }
.icon-text { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icon-text svg { width: 13px; height: 13px; stroke-width: 1.9; }
.icon-button {
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #34393d;
  border-radius: 5px;
  background: #181b1d;
  color: #aeb5ba;
}
.icon-button:hover { background: #23272a; color: #f4f5f6; }
.icon-button svg { width: 15px; height: 15px; }

.badge {
  min-height: 21px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.badge.neutral { color: #939ba1; background: #222628; border-color: #303538; }
.badge.queued, .badge.stale, .badge.unknown, .badge.estimated, .badge.expiring, .badge.needs_manual { color: #e9bb61; background: #292419; border-color: #443921; }
.badge.running, .badge.checking { color: #74c5f5; background: #172630; border-color: #244357; }
.badge.completed, .badge.available, .badge.valid { color: #4ed9a0; background: #172820; border-color: #25503c; }
.badge.failed, .badge.disabled, .badge.error, .badge.account_error, .badge.exhausted, .badge.expired, .badge.missing { color: #f08888; background: #2a1c1d; border-color: #4d2b2d; }

.progress-steps { height: 74px; padding: 0 21px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-bottom: 1px solid var(--line); background: #171a1c; }
.progress-steps div { position: relative; display: flex; align-items: center; gap: 7px; color: #676f75; }
.progress-steps div:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 31px; right: 9px; height: 1px; background: #33383b; }
.progress-steps span { z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #34393d; border-radius: 50%; background: #1e2224; font-size: 9px; }
.progress-steps strong { font-size: 10px; }
.progress-steps div.done, .progress-steps div.active { color: #7bcaff; }
.progress-steps div.done span, .progress-steps div.active span { border-color: #248fd0; background: #1c6f9f; color: #fff; }
.progress-steps div.done:not(:last-child)::after { background: #276d92; }
.empty-state { min-height: 210px; padding: 20px; display: grid; place-items: center; color: #697178; text-align: center; }
.result-video { padding: 15px; }
.result-video video { width: 100%; max-height: 285px; border: 1px solid #2a2e31; border-radius: 5px; background: #080909; }
.result-warning { margin-bottom: 9px; padding: 8px 10px; border-left: 2px solid var(--warning); background: #292317; color: #dbbd7b; font-size: 10px; line-height: 1.5; }
.result-links { margin-top: 9px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 10px; }
.log-view { max-height: 145px; overflow: auto; padding: 9px 15px; border-top: 1px solid var(--line); background: #121415; color: #778087; font: 10px/1.6 "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; }

.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th:first-child, td:first-child { width: 38px; text-align: center; }
th input[type="checkbox"], td input[type="checkbox"] { width: 15px; min-height: 15px; accent-color: var(--accent); }
th, td { height: 43px; padding: 7px 12px; border-bottom: 1px solid #272b2d; text-align: left; vertical-align: middle; }
th { height: 35px; background: #151819; color: #697178; font-size: 9px; font-weight: 700; }
td { color: #b7bdc1; font-size: 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #1d2123; }
.cell-title { display: block; color: #d7dbde; font-weight: 620; }
.cell-subtitle { display: block; max-width: 300px; margin-top: 2px; overflow: hidden; color: #6d757b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.credit-value { display: inline-block; min-width: 26px; margin-right: 5px; color: #f0f2f3; font-size: 14px; font-weight: 700; }
.row-actions { display: flex; gap: 5px; }
.empty-row { height: 76px; color: #656d73; text-align: center; }
.account-table-footer { min-height: 49px; padding: 8px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.account-selection-count { color: #7bcaff; font-size: 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.account-pagination { display: flex; align-items: center; gap: 9px; color: #8a9298; font-size: 10px; font-variant-numeric: tabular-nums; }
.account-page-button { width: 31px; min-width: 31px; height: 31px; padding: 0; display: inline-grid; place-items: center; }
.account-page-button svg { width: 14px; height: 14px; }
.account-page-fallback { grid-area: 1 / 1; font-size: 19px; line-height: 1; }
.account-page-button svg + .account-page-fallback { display: none; }

.toolbar-band {
  min-height: 73px;
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 150px)) 1fr;
  align-items: stretch;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.metric { padding: 11px 15px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.metric span { color: #70787e; font-size: 9px; }
.metric strong { margin-top: 3px; color: #f0f2f3; font-size: 18px; font-variant-numeric: tabular-nums; }
.metric:nth-child(2) strong { color: #50d7a1; }
.metric:nth-child(3) strong { color: #ef8a8a; }
.metric:nth-child(4) strong { color: #7bcaff; }
.toolbar-actions { padding: 10px 13px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.compact { width: auto; min-width: 115px; min-height: 31px; }
.inline-controls, .input-action { display: flex; align-items: center; gap: 7px; }
.table-panel .panel-heading .inline-controls { flex-wrap: wrap; justify-content: flex-end; }
.input-action input { flex: 1; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.service-grid .panel { padding-bottom: 15px; }
.service-grid .panel > :not(.panel-heading) { margin-left: 15px; margin-right: 15px; }
.detail-list { margin-top: 7px; }
.detail-list div { min-height: 40px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.detail-list dt { color: #747c82; font-size: 10px; }
.detail-list dd { margin-left: auto; color: #d6dade; font-size: 10px; font-weight: 600; }
.toggle-row { margin-top: 13px; display: flex; align-items: center; gap: 7px; }
.toggle-row input { width: 15px; min-height: 15px; accent-color: var(--accent); }
.toggle-row span { margin: 0; }
.inline-message { min-height: 18px; color: #7a8288; font-size: 10px; }
.clash-toolbar .metric strong { max-width: 145px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.clash-toolbar { grid-template-columns: repeat(5, minmax(105px, 150px)) minmax(0, 1fr); }
.clash-toolbar .toolbar-actions { min-width: 0; flex-wrap: wrap; }
.clash-subscription-panel { margin-top: 13px; }
.clash-subscription-body { padding: 0 15px 15px; }
.clash-subscription-body .field-block { max-width: 980px; }
.clash-subscription-body .input-action input { min-width: 220px; }
.clash-node-selected { background: #172532; }
.clash-node-name { display: flex; align-items: center; gap: 7px; }
.clash-node-name svg { width: 13px; height: 13px; color: #4ed9a0; }
#page-clash th:first-child, #page-clash td:first-child { width: auto; min-width: 220px; text-align: left; }
.delay-good { color: #4ed9a0; }
.delay-medium { color: #e9bb61; }
.delay-bad { color: #f08888; }

dialog { width: min(600px, calc(100vw - 32px)); padding: 0; border: 1px solid #383d41; border-radius: var(--radius); background: #181b1d; color: var(--text); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
dialog::backdrop { background: rgba(5, 7, 8, .76); backdrop-filter: blur(3px); }
.dialog-form { padding: 0 17px 17px; }
.dialog-heading { min-height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: 0; font-size: 14px; }
.auth-dialog { width: min(420px, calc(100vw - 32px)); }
.auth-dialog .dialog-form { padding-bottom: 20px; }
.auth-dialog .dialog-heading { margin-bottom: 17px; }
.auth-dialog .dialog-heading svg { width: 18px; height: 18px; color: #7fd0ff; }
.auth-dialog .field-block + .field-block { margin-top: 11px; }
.auth-dialog .form-actions { justify-content: stretch; }
.auth-dialog .form-actions .button { width: 100%; justify-content: center; }
.auth-dialog .inline-message { min-height: 20px; margin: 8px 0 0; color: #f08888; }
.admin-password-panel .panel-heading > svg { width: 18px; height: 18px; color: #4ed9a0; }
.toast { position: fixed; z-index: 30; right: 18px; bottom: 18px; max-width: min(380px, calc(100vw - 36px)); padding: 10px 13px; border: 1px solid #36566a; border-radius: 6px; background: #172b37; color: #dff3ff; box-shadow: 0 14px 36px rgba(0, 0, 0, .38); opacity: 0; transform: translateY(9px); pointer-events: none; transition: .16s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #66383a; background: #351f21; color: #ffc3c3; }

@media (min-width: 1500px) {
  .page { padding-right: 28px; padding-left: 28px; }
  .split-layout { grid-template-columns: minmax(540px, 1.05fr) minmax(450px, .95fr); }
}

@media (max-width: 1180px) {
  .toolbar-band { grid-template-columns: repeat(4, minmax(95px, 1fr)); }
  .clash-toolbar { grid-template-columns: repeat(5, minmax(95px, 1fr)); }
  .toolbar-actions { grid-column: 1 / -1; justify-content: flex-start; border-top: 1px solid var(--line); }
}

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; width: 218px; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 18px 0 45px rgba(0, 0, 0, .35); }
  .sidebar.open { transform: translateX(0); }
  #menuButton { display: grid; }
  .split-layout, .service-grid { grid-template-columns: 1fr; }
  .result-panel { min-height: 420px; }
}

@media (max-width: 680px) {
  .topbar { min-height: 60px; padding: 8px 11px; }
  .topbar p, .page-kicker, #openDownloadsButton .icon-text { display: none; }
  .topbar h1 { font-size: 15px; }
  .page { padding: 11px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .toolbar-band { grid-template-columns: repeat(2, 1fr); }
  .clash-toolbar { grid-template-columns: repeat(2, 1fr); }
  .metric { min-height: 62px; padding: 9px 11px; }
  .metric:nth-child(2) { border-right: 0; }
  .metric strong { font-size: 16px; }
  .toolbar-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .toolbar-actions .button { flex: 1 1 130px; }
  .clash-subscription-body .input-action { align-items: stretch; flex-direction: column; }
  .panel-heading { align-items: flex-start; }
  .inline-controls { align-items: stretch; flex-direction: column; }
  .account-table-footer { align-items: flex-start; flex-direction: column; }
  .account-pagination { width: 100%; justify-content: space-between; }
  .progress-steps { padding: 0 13px; }
  .progress-steps strong { display: none; }
}