@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/static/material-symbols-rounded.woff2") format("woff2");
}

:root {
  --bg: #f5f7fb;
  --sidebar: #edf5ff;
  --surface: rgba(255, 255, 255, .94);
  --surface-solid: #ffffff;
  --line: #e5eaf1;
  --line-strong: #d7e0ea;
  --text: #182234;
  --muted: #6e7a8d;
  --blue: #59a8e8;
  --blue-strong: #328fd5;
  --blue-soft: #eaf5ff;
  --green: #59ad76;
  --green-soft: #e9f7ee;
  --red: #dc665d;
  --red-soft: #fff0ee;
  --amber: #d89033;
  --amber-soft: #fff6e7;
  --primary-fill: #328fd5;
  --primary-hover: #237fc2;
  --on-primary: #ffffff;
  --neutral-soft: #f0f3f7;
  --info-text: #2873aa;
  --info-line: #bfe0f7;
  --error-text: #ad4b43;
  --error-line: #f3c9c4;
  --warning-text: #9a6826;
  --warning-line: #f1dbb4;
  --danger-action: #b94f48;
  --danger-action-hover: #a33e37;
  --radius: 14px;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1420;
  --sidebar: #101c2b;
  --surface: rgba(20, 31, 46, .94);
  --surface-solid: #152235;
  --line: #29384b;
  --line-strong: #3a4b60;
  --text: #e7edf6;
  --muted: #9aa9bb;
  --blue: #62afea;
  --blue-strong: #7bc2f3;
  --blue-soft: #18334c;
  --green: #78c28e;
  --green-soft: #193829;
  --red: #ef8178;
  --red-soft: #432421;
  --amber: #e5a94f;
  --amber-soft: #402f19;
  --primary-fill: #246b9e;
  --primary-hover: #1c5c8a;
  --neutral-soft: #26364a;
  --info-text: #8dccf5;
  --info-line: #315878;
  --error-text: #ff9a91;
  --error-line: #6b3833;
  --warning-text: #f0bd68;
  --warning-line: #6a512b;
  --danger-action: #ff9a91;
  --danger-action-hover: #ffb0a9;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg) url("/static/dashboard-bg.png") center top / cover fixed no-repeat; color: var(--text); font-size: 15px; line-height: 1.55; }
html[data-theme="dark"] body { background-image: linear-gradient(rgba(9, 16, 26, .88), rgba(9, 16, 26, .93)), url("/static/dashboard-bg.png"); }
a { color: var(--blue-strong); text-decoration: none; }
button, input, select { font: inherit; }
button, .button { min-height: 40px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.material-symbols-rounded { display: inline-block; overflow: hidden; direction: ltr; white-space: nowrap; word-wrap: normal; font-family: "Material Symbols Rounded"; font-size: 21px; font-style: normal; font-weight: 400; font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; letter-spacing: normal; line-height: 1; text-transform: none; -webkit-font-smoothing: antialiased; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 224px; padding: 18px 12px 16px; display: flex; flex-direction: column; border-right: 1px solid #dfe8f2; background: rgba(237, 245, 255, .95); backdrop-filter: blur(18px); z-index: 30; transition: transform .2s ease; }
.brand { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; color: var(--text); margin-bottom: 26px; }
.brand strong, .brand small { display: block; white-space: nowrap; }
.brand strong { font-size: 1.08rem; letter-spacing: -.02em; }
.brand small { margin-top: 1px; color: var(--muted); font-size: .72rem; }
.brand-mark { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 7px 18px rgba(50, 143, 213, .24); }
.brand-mark.material-symbols-rounded { font-size: 21px; }
.brand-mark.large { width: 56px; height: 56px; margin-bottom: 22px; border-radius: 16px; font-size: 28px; }
nav { display: grid; gap: 5px; }
.nav-section { margin: 20px 13px 6px; color: #9aa8ba; font-size: .71rem; font-weight: 700; letter-spacing: .08em; }
.nav-section:first-child { margin-top: 0; }
nav a { min-height: 46px; display: flex; align-items: center; gap: 13px; padding: 0 14px; color: #5c697b; border: 1px solid transparent; border-radius: 11px; font-weight: 650; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
nav a .material-symbols-rounded { color: #66758a; }
nav a:hover { color: var(--blue-strong); background: rgba(255, 255, 255, .62); }
nav a.active { color: var(--blue-strong); background: rgba(255, 255, 255, .94); border-color: rgba(89, 168, 232, .14); box-shadow: inset -3px 0 var(--blue), 0 6px 18px rgba(57, 105, 145, .06); }
nav a.active .material-symbols-rounded { color: var(--blue); }
.sidebar-foot { margin-top: auto; min-height: 58px; padding: 15px 12px 0; border-top: 1px solid #dce6f0; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; color: var(--muted); }
.sidebar-foot .material-symbols-rounded { color: var(--blue); }
.sidebar-foot strong, .sidebar-foot small { display: block; }
.sidebar-foot strong { color: #536174; font-size: .8rem; }
.sidebar-foot small { font-size: .72rem; }
.sidebar-product-title { display: flex; align-items: center; gap: 6px; }
.update-available-slot { display: inline-flex; align-items: center; }
.update-available-slot:empty { display: none; }
.update-available-link { width: 23px; height: 23px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: rgba(229, 72, 77, .12); transition: background .15s ease, transform .15s ease; }
.update-available-link:hover { background: rgba(229, 72, 77, .22); transform: translateY(-1px); }
.update-available-icon { width: 16px; height: 16px; display: block; }
.sidebar-product-title .update-available-link { width: 20px; height: 20px; border-radius: 6px; }
.sidebar-product-title .update-available-icon { width: 14px; height: 14px; }
.service-facts .update-available-link { margin-left: 1px; }

.topbar { position: fixed; top: 0; right: 0; left: 224px; height: 57px; padding: 0 18px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid rgba(221, 228, 237, .82); background: rgba(255, 255, 255, .54); backdrop-filter: blur(18px); z-index: 20; transition: left .2s ease; }
.topbar > strong { font-size: .98rem; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.topbar-actions form { margin: 0; }
.icon-button { width: 38px; height: 38px; min-height: 38px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #687487; background: transparent; }
.icon-button:hover { color: var(--blue-strong); background: rgba(255, 255, 255, .86); }
.local-icon { display: inline-block; width: 21px; height: 21px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; }
.theme-icon-moon { --icon-url: url("/static/moon.svg"); }
.theme-icon-sun { --icon-url: url("/static/sun.svg"); display: none; }
.icon-lock { --icon-url: url("/static/lock.svg"); }
.icon-lock-open { --icon-url: url("/static/lock-open.svg"); }
.icon-github { --icon-url: url("/static/github.svg"); }
.settings-card-head .local-icon { width: 25px; height: 25px; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: inline-block; }
.danger-icon:hover { color: var(--red); }
.sidebar-toggle { color: var(--text); }
.sidebar-backdrop { display: none; }

.main-shell { min-height: 100vh; margin-left: 224px; padding: 86px clamp(24px, 3vw, 48px) 64px; transition: margin-left .2s ease; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .topbar { left: 0; }
body.sidebar-collapsed .main-shell { margin-left: 0; }
.page-head { min-height: 74px; display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 17px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -.045em; line-height: 1.14; }
h2 { margin-bottom: 0; font-size: 1.08rem; letter-spacing: -.02em; }
.eyebrow { margin-bottom: 5px; color: var(--blue-strong); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-subtitle { margin: 0; color: var(--muted); font-size: .9rem; }
.muted { color: var(--muted); }
.page-tabs { height: 46px; display: flex; align-items: end; gap: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--line-strong); }
.page-tabs a, .page-tabs span { height: 46px; display: inline-flex; align-items: center; padding: 0 17px; color: var(--muted); font-weight: 650; border-bottom: 2px solid transparent; }
.page-tabs .active { color: var(--blue-strong); border-bottom-color: var(--blue); }

.panel, .metric-card, .auth-card { border: 1px solid rgba(218, 228, 239, .82); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 30px rgba(50, 65, 85, .065); backdrop-filter: blur(12px); }
.panel { padding: 23px; }
.panel-head { min-height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.panel-title { display: flex; align-items: center; gap: 12px; }
.panel-title .eyebrow { margin-bottom: 2px; }
.panel-icon, .metric-icon { color: var(--blue); }
.panel-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-soft); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px; }
.metric-card { position: relative; min-height: 178px; padding: 20px 21px; overflow: hidden; }
.metric-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, rgba(89, 168, 232, .85), rgba(126, 203, 190, .72)); opacity: .72; }
.metric-card.accent { border-color: rgba(89, 168, 232, .36); box-shadow: 0 15px 36px rgba(58, 142, 206, .11); }
.metric-top { display: flex; align-items: center; gap: 10px; }
.metric-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--blue-strong); background: var(--blue-soft); }
.dashboard-icon { width: 19px; height: 19px; }
.metric-label { color: #536174; font-size: .84rem; font-weight: 750; }
.metric-status-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #a9b4c2; box-shadow: 0 0 0 4px rgba(169, 180, 194, .14); }
.metric-status-dot.success { background: var(--green); box-shadow: 0 0 0 4px rgba(89, 173, 118, .13); }
.metric-status-dot.warning { background: var(--amber); box-shadow: 0 0 0 4px rgba(216, 144, 51, .13); }
.metric-status-dot.danger { background: var(--red); box-shadow: 0 0 0 4px rgba(220, 102, 93, .13); }
.metric-warning::before { background: linear-gradient(90deg, var(--amber), #f2c46d); }
.metric-danger::before { background: linear-gradient(90deg, var(--red), #ec9c91); }
.metric-value { display: block; margin: 18px 0 7px; font-size: 2.25rem; line-height: 1.12; letter-spacing: -.045em; }
.metric-value.small { font-size: 1.3rem; letter-spacing: -.025em; }
.metric-value em { color: var(--muted); font-size: .92rem; font-style: normal; }
.metric-number { display: flex; align-items: baseline; gap: 7px; margin: 15px 0 4px; font-size: 2.15rem; line-height: 1.15; letter-spacing: -.05em; }
.metric-number em { color: #536174; font-size: .9rem; font-style: normal; font-weight: 650; letter-spacing: 0; }
.metric-card small { display: block; color: var(--muted); }
.metric-note { display: block; color: var(--muted); font-size: .82rem; }
.metric-note b { color: var(--blue-strong); font-size: .92rem; }
.metric-task-list { max-height: 76px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; color: #536174; font-size: .8rem; }
.metric-task-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 9px; align-items: center; }
.metric-task-list li + li { margin-top: 7px; }
.metric-task-list b, .metric-task-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-task-list b { display: block; color: var(--text); font-size: .8rem; }
.metric-task-list small { font-size: .72rem; }
.task-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.task-state-dot.queued { background: var(--amber); }
.metric-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-result { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 10px; color: #536174; font-size: .8rem; }
.metric-result > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-time { display: block; margin-top: 7px; color: #98a3b2; font-size: .7rem; font-variant-numeric: tabular-nums; }
.status-text.running { color: var(--green); }
.status-text.stopped { color: var(--red); }
.split-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 20px; margin-bottom: 20px; }
.build-strip { display: flex; gap: 42px; flex-wrap: wrap; }
.build-strip div { display: flex; gap: 10px; align-items: center; }

.account-list, .timeline { display: grid; }
.account-row, .timeline-row { min-height: 66px; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; border-top: 1px solid var(--line); color: var(--text); }
.account-row:first-child, .timeline-row:first-child { border-top: 0; }
.account-row strong, .account-row small, .timeline-row strong, .timeline-row small, td strong, td small { display: block; }
.account-row small, .timeline-row small, td small { color: var(--muted); margin-top: 2px; }
.account-avatar { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: var(--blue-strong); background: var(--blue-soft); font-weight: 800; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #a9b4c2; }
.status-dot.running, .status-dot.queued { background: var(--blue); box-shadow: 0 0 0 4px rgba(89, 168, 232, .13); }
.status-dot.success { background: var(--green); }
.status-dot.failed, .status-dot.stopped { background: var(--red); }
.pill { display: inline-flex; width: fit-content; padding: 3px 9px; border-radius: 99px; color: var(--muted); background: var(--neutral-soft); font-size: .74rem; font-weight: 750; }
.pill.success { color: var(--green); background: var(--green-soft); }
.pill.running, .pill.queued { color: var(--blue-strong); background: var(--blue-soft); }
.pill.failed, .pill.stopped, .pill.interrupted { color: var(--red); background: var(--red-soft); }
.pill.warning { color: var(--amber); background: var(--amber-soft); }

.primary, .secondary { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 9px; font-weight: 700; }
.primary { border: 1px solid var(--primary-fill); background: var(--primary-fill); color: var(--on-primary); box-shadow: 0 7px 16px rgba(50, 143, 213, .17); }
.primary:hover { background: var(--primary-hover); }
.secondary { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .84); color: #536174; }
.secondary:hover { border-color: #b8d5eb; color: var(--blue-strong); }
.button { display: inline-flex; align-items: center; justify-content: center; }
.link-button, .danger-link { min-height: auto; padding: 0; border: 0; background: none; color: var(--muted); }
.danger-link { color: var(--red); }
.flash, .form-error { margin-bottom: 18px; padding: 12px 15px; border: 1px solid var(--info-line); border-radius: 9px; background: var(--blue-soft); color: var(--info-text); }
.flash.error, .form-error { border-color: var(--error-line); background: var(--red-soft); color: var(--error-text); }
.flash.warning { border-color: var(--warning-line); background: var(--amber-soft); color: var(--warning-text); }

.table-panel { padding: 0; overflow: hidden; }
.table-panel > .panel-head { padding: 22px 24px 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 16px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
th { color: #748195; background: rgba(244, 247, 250, .78); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
tbody tr:hover { background: rgba(236, 246, 253, .52); }
.actions { display: flex; gap: 14px; align-items: center; }
.actions form { margin: 0; }
.action-cell { white-space: nowrap; }
.schedule-state { color: #536174; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .83rem; }
.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.empty strong { color: var(--text); font-size: 1.1rem; }
.empty .button { margin-top: 8px; }

.form-panel { max-width: 980px; }
.narrow-panel { max-width: 620px; }
fieldset { margin: 0 0 30px; padding: 0 0 30px; border: 0; border-bottom: 1px solid var(--line); }
legend { padding: 0; margin-bottom: 20px; font-size: 1.06rem; font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
label { display: grid; gap: 7px; color: #536174; font-size: .88rem; font-weight: 650; }
label small { color: var(--muted); font-weight: 400; }
input, select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; background: rgba(255, 255, 255, .92); color: var(--text); }
input::placeholder { color: #8995a6; opacity: 1; }
input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(89, 168, 232, .14); }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-toggle { position: absolute; top: 50%; right: 5px; width: 36px; height: 36px; min-height: 36px; padding: 8px; transform: translateY(-50%); display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--blue-strong); background: var(--blue-soft); outline: none; }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-closed { display: block; }
.switch-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.switch-row input { width: 18px; min-height: 18px; accent-color: var(--blue-strong); }
.keepalive-config { display: grid; gap: 18px; }
.keepalive-config > label { max-width: 360px; }
.keepalive-period { display: grid; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: rgba(247, 250, 253, .72); }
.keepalive-period[hidden], [data-keepalive-hint][hidden] { display: none !important; }
.form-label { display: block; margin-bottom: 9px; color: #536174; font-size: .88rem; font-weight: 650; }
.weekday-options { display: flex; flex-wrap: wrap; gap: 8px; }
.weekday-option { position: relative; display: block; cursor: pointer; }
.weekday-option input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-option span { display: block; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--muted); font-size: .82rem; transition: .16s ease; }
.weekday-option input:checked + span { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-strong); font-weight: 750; }
.weekday-option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(89, 168, 232, .14); }
.schedule-box { display: grid; grid-template-columns: minmax(210px, .7fr) 1fr; gap: 24px; align-items: center; padding: 17px 0; }
.schedule-box + .schedule-box { border-top: 1px solid var(--line); }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.stack-form { display: grid; gap: 17px; }
.auth-card { width: min(100%, 480px); padding: 42px; background: var(--surface); }
.auth-card.compact { width: min(100%, 420px); }
.auth-card h1 { margin-bottom: 18px; font-size: 2.1rem; }

.task-launch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 18px; margin-bottom: 22px; align-items: stretch; }
.launch-card { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.launch-card > div:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.launch-card .account-avatar { grid-row: span 2; }
.launch-card small { color: var(--muted); }
.launch-actions { display: flex; gap: 8px; }
.platform-card { position: relative; min-width: 0; min-height: 336px; display: flex; flex-direction: column; padding: 22px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.platform-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--blue), #7dc9ce); opacity: .72; }
.platform-card:hover { transform: translateY(-2px); border-color: rgba(89, 168, 232, .35); box-shadow: 0 18px 42px rgba(50, 90, 125, .11); }
.platform-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.platform-account { display: flex; align-items: center; gap: 12px; }
.platform-account strong, .platform-account small, .points-summary strong, .points-summary small { display: block; }
.platform-account small { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.account-state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.account-state-dot.success { background: var(--green); box-shadow: 0 0 0 3px rgba(89, 173, 118, .12); }
.account-state-dot.stopped { background: var(--red); box-shadow: 0 0 0 3px rgba(220, 102, 93, .1); }
.points-summary { min-width: 94px; padding: 8px 11px; text-align: right; border: 1px solid rgba(89, 168, 232, .14); border-radius: 10px; background: rgba(234, 245, 255, .58); }
.points-summary strong { margin-top: 1px; color: var(--blue-strong); font-size: 1.55rem; line-height: 1.15; }
.redeem-panel-head { align-items: flex-start; }
.redeem-panel-head h2 { margin: 0; }
.redeem-points { flex: 0 0 auto; min-width: 112px; }
.redeem-points.unavailable strong { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.platform-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 20px 0 14px; }
.platform-task { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(247, 250, 253, .78); }
.platform-task.success { border-color: rgba(89, 173, 118, .17); background: rgba(233, 247, 238, .34); }
.platform-task.warning { border-color: rgba(216, 144, 51, .15); background: rgba(255, 246, 231, .34); }
.platform-task.stale { border-color: var(--line); background: rgba(244, 247, 250, .64); }
.platform-task-top { min-height: 59px; display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.platform-task-name { display: block; font-size: .82rem; font-weight: 750; }
.platform-task .pill { flex: 0 0 auto; padding-inline: 7px; font-size: .68rem; }
.platform-progress { height: 4px; margin: 7px 0 8px; overflow: hidden; border-radius: 99px; background: #e8edf3; }
.platform-progress span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.platform-task.success .platform-progress span { background: var(--green); }
.platform-task.warning .platform-progress span { background: var(--amber); }
.platform-task.stale .platform-progress span { background: #aeb8c5; }
.platform-task small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platform-updated { margin-top: auto; margin-bottom: 14px; display: flex; align-items: center; gap: 5px; overflow: hidden; color: var(--muted); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.platform-updated .material-symbols-rounded { color: #94a3b5; font-size: 15px; }
.platform-updated.stale { color: var(--amber); }
.platform-updated.stale .material-symbols-rounded { color: var(--amber); }
.platform-error { margin: 0 0 8px; color: var(--red); font-size: .8rem; }
.platform-card .launch-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.platform-card .launch-actions form { min-width: 0; margin: 0; }
.platform-card .launch-actions button { width: 100%; min-width: 0; padding-inline: 8px; white-space: nowrap; font-size: .78rem; }
.button-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.platform-card .material-symbols-rounded { font-size: 18px; }
.task-empty-card { grid-column: 1 / -1; min-height: 112px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 22px 24px; }
.task-empty-card > .material-symbols-rounded { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); font-size: 24px; }
.task-empty-card strong { display: block; font-size: 1rem; }
.task-empty-card p { margin: 3px 0 0; color: var(--muted); font-size: .84rem; }
.task-empty-card .button { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.task-history-panel { margin-top: 4px; }
.inline-filter select { min-width: 160px; }
.log-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
.log-sources { padding: 12px; max-height: 72vh; overflow-y: auto; }
.log-sources h2 { padding: 12px 10px 6px; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.log-sources a { display: grid; gap: 3px; padding: 10px; border-radius: 9px; color: var(--text); transition: background .15s ease, color .15s ease; }
.log-sources a:hover, .log-sources a.active { color: var(--blue-strong); background: var(--blue-soft); }
.log-sources small { color: var(--muted); }
.log-source-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.log-source-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-empty { margin: 8px 10px 14px; color: var(--muted); font-size: .8rem; }
.log-panel { min-width: 0; padding: 0; overflow: hidden; }
.log-panel-head { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.log-panel-head p { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.log-panel-actions { display: flex; align-items: center; gap: 9px; }
.log-panel-actions form { margin: 0; }
.log-clear-button { width: 34px; height: 34px; min-height: 34px; border: 1px solid var(--line); background: rgba(255, 255, 255, .72); }
.log-clear-button:hover { color: var(--red); border-color: rgba(220, 102, 93, .3); background: rgba(220, 102, 93, .08); }
.log-clear-button img { width: 19px; height: 19px; opacity: .55; }
.log-clear-button:hover img { opacity: .8; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(89, 173, 118, .12); }
.live-indicator.snapshot { color: var(--muted); }
.live-indicator.snapshot i { box-shadow: 0 0 0 4px rgba(110, 122, 141, .1); }
pre { height: 58vh; margin: 0; padding: 18px; overflow: auto; border: 1px solid #253248; border-radius: 9px; background: #111827; color: #d5e2ef; font: .84rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.log-panel pre { height: calc(72vh - 74px); border: 0; border-radius: 0; background: linear-gradient(145deg, #101827, #111c2e); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.settings-card { max-width: none; min-width: 0; padding: 30px; }
.password-settings-card, .deployment-settings-card { min-height: 500px; }
.password-settings-card { display: flex; flex-direction: column; }
.password-change-form { display: flex; flex: 1; flex-direction: column; }
.password-settings-head { justify-content: space-between; }
.settings-auth-toggle-form { flex: 0 0 210px; width: 210px; margin: 0 0 0 auto; }
.auth-toggle-button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 8px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: rgba(247, 250, 253, .9); text-align: left; box-shadow: none; }
.auth-toggle-button:hover { border-color: rgba(87, 150, 218, .42); background: #f4f8fc; transform: none; }
.auth-toggle-button strong { font-size: .82rem; white-space: nowrap; }
.auth-switch-control { position: relative; flex: 0 0 46px; width: 46px; height: 26px; border-radius: 99px; background: #cbd5e1; transition: background .2s ease; }
.auth-switch-control i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(28, 45, 65, .2); transition: transform .2s ease; }
.auth-switch-control.active { background: var(--blue-strong); }
.auth-switch-control.active i { transform: translateX(20px); }
.log-settings-panel { grid-column: 1 / -1; }
.settings-card-head { display: flex; align-items: center; gap: 15px; padding-bottom: 24px; }
.settings-card-head .panel-icon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; font-size: 25px; }
.settings-card-head .panel-icon.neutral { color: #58677a; background: #f1f3f6; }
.settings-card-head h2 { margin: 0; font-size: 1.08rem; }
.settings-card-head small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; }
.deployment-project { flex: 0 0 auto; min-height: 42px; margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }
.deployment-project-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; color: var(--text); }
.deployment-project .icon-github { width: 24px; height: 24px; }
.deployment-project-name { color: var(--text); font-size: .86rem; font-weight: 750; white-space: nowrap; }
.deployment-project-icon:hover, .deployment-project-name:hover { color: var(--blue-strong); }
.settings-fields { display: grid; grid-template-columns: 1fr; gap: 16px; }
.settings-fields label { font-size: .79rem; }
.settings-hint { margin: 10px 0 16px; color: var(--muted); font-size: .76rem; }
.settings-primary-action { width: fit-content; align-self: flex-start; margin-top: auto; }
.deployment-facts { display: grid; gap: 12px; margin: 10px 0 0; }
.deployment-facts div { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; padding: 14px 17px; border: 1px solid rgba(223, 230, 239, .55); border-radius: 11px; background: #f7f9fb; }
.deployment-facts dt { color: var(--muted); font-size: .82rem; }
.deployment-facts dd { margin: 0; color: #253248; font-weight: 750; text-align: right; }
.update-status { margin: 14px 0 0; padding: 9px 12px; border-radius: 9px; font-size: .8rem; font-weight: 650; }
.update-status.success { color: var(--green); background: var(--green-soft); }
.update-status.warning { color: var(--amber); background: var(--amber-soft); }
.update-status.error { color: var(--error-text); background: var(--red-soft); }
.update-status.neutral { color: var(--muted); background: #f0f3f7; }
.update-message-queue { display: grid; gap: 8px; margin-top: 14px; }
.update-message-queue:empty { display: none; }
.update-message-queue .update-status { margin: 0; opacity: 0; transform: translateY(-5px); transition: opacity .2s ease, transform .2s ease; }
.update-message-queue .update-status.is-visible { opacity: 1; transform: translateY(0); }
.update-proxy-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 16px; }
.update-proxy-form label { gap: 6px; }
.update-proxy-form button { height: 44px; }
.deployment-actions { display: flex; gap: 10px; margin-top: 14px; }
.deployment-actions form { margin: 0; }
.update-release { margin: 8px 0 0; color: var(--muted); font-size: .78rem; }
.update-progress-state { display: grid; gap: 7px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(247, 250, 253, .72); }
.update-progress-state progress { width: 100%; height: 8px; accent-color: var(--blue-strong); }
.update-progress-state small { color: var(--muted); }
.update-install-form { display: flex; align-items: center; }
.deployment-actions { flex-wrap: wrap; align-items: end; }
.log-settings-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.retention-form { padding-top: 22px; }
.retention-controls { display: grid; grid-template-columns: minmax(240px, 380px) max-content max-content; align-items: end; justify-content: start; gap: 12px; }
.retention-save-form { display: contents; }
.retention-controls form { margin: 0; }
.retention-controls label { min-width: 0; }
.retention-controls button { width: auto; min-height: 42px; white-space: nowrap; }
.retention-note { margin: 12px 0 0; color: var(--muted); font-size: .78rem; }
.number-field { position: relative; }
.number-field input { padding-right: 42px; }
.number-field span { position: absolute; top: 50%; right: 13px; color: var(--muted); font-size: .8rem; transform: translateY(-50%); }
.danger-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 9px; color: var(--danger-action); border: 1px solid rgba(220, 102, 93, .3); background: rgba(220, 102, 93, .08); font-weight: 700; }
.danger-button:hover { color: var(--danger-action-hover); border-color: rgba(220, 102, 93, .5); background: rgba(220, 102, 93, .13); }
.danger-button img { width: 18px; height: 18px; filter: invert(39%) sepia(34%) saturate(1450%) hue-rotate(315deg) brightness(96%) contrast(82%); }
.dashboard-info-head { margin-bottom: 18px; }
.dashboard-panel-icon { width: 39px; height: 39px; color: var(--blue-strong); }
.service-health { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: .74rem; font-weight: 750; }
.service-health i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(89, 173, 118, .12); }
.info-panel dl.service-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.info-panel dl.service-facts div { min-width: 0; padding: 15px 16px; border: 1px solid rgba(218, 228, 239, .8); border-radius: 11px; background: rgba(247, 250, 253, .74); }
.info-panel dl.service-facts dt { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .78rem; }
.info-panel dl.service-facts dd { margin: 9px 0 0 31px; color: #354258; font-size: 1rem; font-weight: 750; text-align: left; font-variant-numeric: tabular-nums; }
.fact-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--blue-strong); }
.fact-icon .dashboard-icon { width: 17px; height: 17px; }
code { color: var(--blue-strong); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

html[data-theme="dark"] .sidebar { border-right-color: var(--line); background: rgba(16, 28, 43, .96); }
html[data-theme="dark"] .nav-section { color: #93a3b7; }
html[data-theme="dark"] nav a, html[data-theme="dark"] nav a .material-symbols-rounded, html[data-theme="dark"] .icon-button { color: #9aabbe; }
html[data-theme="dark"] nav a:hover, html[data-theme="dark"] nav a.active { color: var(--blue-strong); background: rgba(38, 55, 76, .86); }
html[data-theme="dark"] nav a.active .material-symbols-rounded { color: var(--blue); }
html[data-theme="dark"] .sidebar-foot { border-top-color: var(--line); }
html[data-theme="dark"] .sidebar-foot strong { color: var(--text); }
html[data-theme="dark"] .topbar { border-bottom-color: rgba(50, 67, 88, .86); background: rgba(12, 21, 33, .78); }
html[data-theme="dark"] .icon-button:hover { color: var(--blue-strong); background: rgba(42, 59, 80, .8); }
html[data-theme="dark"] .brand-mark { background: var(--primary-fill); }
html[data-theme="dark"] .panel, html[data-theme="dark"] .metric-card, html[data-theme="dark"] .auth-card { border-color: rgba(52, 70, 92, .9); box-shadow: 0 14px 34px rgba(0, 0, 0, .2); }
html[data-theme="dark"] .metric-label, html[data-theme="dark"] .metric-number em, html[data-theme="dark"] .metric-task-list, html[data-theme="dark"] .metric-result, html[data-theme="dark"] label, html[data-theme="dark"] .form-label, html[data-theme="dark"] .schedule-state { color: #a8b6c7; }
html[data-theme="dark"] .secondary { border-color: var(--line-strong); background: rgba(25, 39, 57, .9); color: #b5c2d2; }
html[data-theme="dark"] .secondary:hover { border-color: var(--blue); color: var(--blue-strong); }
html[data-theme="dark"] th { color: #9baabd; background: rgba(27, 41, 59, .86); }
html[data-theme="dark"] tbody tr:hover { background: rgba(33, 55, 76, .55); }
html[data-theme="dark"] input, html[data-theme="dark"] select { border-color: var(--line-strong); background: rgba(16, 29, 45, .94); color: var(--text); }
html[data-theme="dark"] input::placeholder { color: #a6b4c5; }
html[data-theme="dark"] .keepalive-period, html[data-theme="dark"] .platform-task, html[data-theme="dark"] .auth-toggle-button, html[data-theme="dark"] .info-panel dl.service-facts div { background: rgba(22, 35, 52, .82); }
html[data-theme="dark"] .weekday-option span { border-color: var(--line-strong); background: #17263a; }
html[data-theme="dark"] .points-summary { background: rgba(25, 53, 78, .72); }
html[data-theme="dark"] .platform-task.success { background: rgba(25, 56, 41, .5); }
html[data-theme="dark"] .platform-task.warning { background: rgba(64, 47, 25, .52); }
html[data-theme="dark"] .platform-task.stale { background: rgba(25, 38, 55, .72); }
html[data-theme="dark"] .platform-progress { background: #344357; }
html[data-theme="dark"] .log-clear-button { background: rgba(24, 38, 56, .82); }
html[data-theme="dark"] .log-clear-button img { filter: invert(78%) sepia(14%) saturate(354%) hue-rotate(173deg) brightness(91%); opacity: .82; }
html[data-theme="dark"] .auth-toggle-button:hover { background: #1c3046; }
html[data-theme="dark"] .auth-switch-control { background: #506176; }
html[data-theme="dark"] .auth-switch-control.active { background: var(--blue); }
html[data-theme="dark"] .settings-card-head .panel-icon.neutral { color: #aab7c8; background: #243246; }
html[data-theme="dark"] .deployment-facts div { border-color: var(--line); background: #172439; }
html[data-theme="dark"] .deployment-facts dd, html[data-theme="dark"] .info-panel dl.service-facts dd { color: var(--text); }
html[data-theme="dark"] .update-status.neutral { background: var(--neutral-soft); }
html[data-theme="dark"] .update-status.error { background: var(--red-soft); }
html[data-theme="dark"] .update-progress-state { background: #172439; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media (max-width: 1080px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .split-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .password-settings-card, .deployment-settings-card, .log-settings-panel { grid-column: auto; min-height: auto; }
  .info-panel dl.service-facts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { width: min(82vw, 280px); transform: translateX(-100%); box-shadow: 20px 0 50px rgba(35, 56, 78, .16); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .topbar { left: 0; }
  .topbar > strong { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main-shell { margin-left: 0; padding: 82px 16px 54px; }
  .sidebar-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(25, 36, 50, .28); z-index: 25; }
  body.sidebar-open .sidebar-backdrop { display: block; }
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  .metric-grid { grid-template-columns: 1fr; }
  .split-grid, .form-grid, .schedule-box, .log-layout { grid-template-columns: 1fr; }
  .table-wrap { overflow: visible; }
  table { min-width: 0; }
  table thead { display: none; }
  table, table tbody, table tr, table td { display: block; width: 100%; }
  table tbody { padding: 8px 16px; }
  table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table tr:last-child { border-bottom: 0; }
  table td { min-height: 39px; padding: 8px 4px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; border: 0; }
  table td::before { content: attr(data-label); color: var(--muted); font-size: .76rem; font-weight: 700; }
  table td.action-cell { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  table td.action-cell > .actions { min-width: 0; flex-wrap: wrap; }
  .log-sources { display: flex; max-height: none; overflow-x: auto; }
  .log-sources h2 { display: none; }
  .log-sources a { min-width: 150px; }
  .launch-card { align-items: stretch; flex-direction: column; }
  .launch-actions button { flex: 1; }
  .platform-task-grid { grid-template-columns: 1fr; }
  .platform-task-name { min-height: 0; }
  .task-launch-grid { grid-template-columns: 1fr; }
  .platform-card .launch-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-card .launch-actions, .platform-card .launch-actions form, .platform-card .launch-actions button { width: 100%; }
  .task-empty-card { grid-template-columns: auto 1fr; }
  .task-empty-card .button { grid-column: 1 / -1; }
  .settings-card { padding: 22px; }
  .settings-card-head { align-items: flex-start; }
  .deployment-settings-head { flex-wrap: wrap; }
  .deployment-project { flex: 1 1 220px; justify-content: flex-end; }
  .password-settings-head { flex-wrap: wrap; }
  .password-settings-head .settings-auth-toggle-form { flex-basis: 210px; width: 210px; margin: 4px 0 0 auto; }
  .page-head { align-items: flex-start; }
  .page-head > form, .page-head > .button { margin-top: 6px; }
}
@media (max-width: 480px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .topbar-actions { gap: 0; }
  .topbar-actions .icon-button { width: 34px; }
  .page-head { flex-direction: column; }
  .page-head > form, .page-head > .button { width: 100%; }
  .page-head button, .page-head > .button { width: 100%; }
  .panel, .metric-card { padding: 18px; }
  .settings-fields { grid-template-columns: 1fr; }
  .retention-controls { grid-template-columns: 1fr 1fr; }
  .retention-save-form label { grid-column: 1 / -1; }
  .retention-controls button { width: 100%; }
  .settings-card-footer { align-items: stretch; flex-direction: column; }
  .settings-card-footer button { width: 100%; }
  .deployment-project { flex-basis: 100%; margin-left: 67px; justify-content: flex-start; }
  .platform-card .launch-actions { grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 30px 24px; }
  .build-strip { gap: 18px; flex-direction: column; }
}