:root {
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-soft: #f7f9f8;
  --ink: #17201c;
  --muted: #69736e;
  --line: #dfe5e1;
  --line-strong: #cdd6d1;
  --sidebar: #202124;
  --sidebar-soft: #303238;
  --green: #3559b7;
  --green-dark: #284697;
  --green-soft: #eaf0ff;
  --amber: #a9680d;
  --amber-soft: #fff2dc;
  --red: #be3e46;
  --red-soft: #fdebed;
  --blue: #2e67a0;
  --blue-soft: #e8f0f8;
  --shadow: 0 8px 28px rgba(22, 38, 31, .08);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.is-hidden { display: none !important; }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 1fr) minmax(420px, 560px); background: var(--surface); }
.login-brand { padding: clamp(48px, 8vw, 120px); display: flex; align-items: flex-start; gap: 18px; color: #f3faf6; background: var(--sidebar); position: relative; overflow: hidden; }
.login-brand::after { content: ""; position: absolute; inset: auto 8% 12% 8%; height: 1px; background: rgba(255,255,255,.16); }
.login-brand h1 { margin: 3px 0 8px; font-size: 30px; letter-spacing: 0; }
.login-brand p { margin: 0; color: #9dafA6; font-size: 15px; }
.brand-mark { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; background: #4b65ad; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; font-weight: 800; font-size: 18px; }
.brand-mark.small { width: 40px; height: 40px; flex-basis: 40px; font-size: 13px; }
.login-panel { width: min(390px, calc(100% - 48px)); align-self: center; justify-self: center; }
.login-heading { margin-bottom: 34px; }
.login-heading span, .eyebrow { color: var(--green); font-size: 12px; font-weight: 700; margin: 0 0 8px; }
.login-heading h2 { margin: 0; font-size: 30px; font-weight: 750; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field > span:first-child { font-size: 13px; font-weight: 650; color: #3f4944; }
.input-wrap { display: flex; align-items: center; min-height: 46px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); transition: .18s ease; }
.input-wrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(53,89,183,.11); }
.input-wrap svg { width: 18px; margin-left: 14px; color: #7f8984; }
.input-wrap input, .input-wrap select { width: 100%; min-width: 0; border: 0; outline: 0; padding: 11px 13px; background: transparent; color: var(--ink); }
.input-wrap textarea { width: 100%; border: 0; outline: 0; resize: vertical; padding: 12px 13px; background: transparent; min-height: 92px; }
.login-button { width: 100%; min-height: 46px; margin-top: 4px; justify-content: center; }
.form-error { min-height: 20px; color: var(--red); font-size: 13px; margin: 12px 0 0; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { background: var(--sidebar); color: #fff; padding: 18px 14px; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; z-index: 30; }
.sidebar-brand { height: 58px; padding: 0 8px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar-brand strong, .sidebar-brand span { display: block; }
.sidebar-brand strong { font-size: 15px; }
.sidebar-brand span { color: #9eada6; font-size: 11px; margin-top: 3px; }
.nav-list { display: grid; gap: 5px; margin-top: 22px; }
.nav-list button { height: 43px; border: 0; border-radius: 5px; color: #b9c5bf; background: transparent; display: flex; align-items: center; gap: 11px; padding: 0 13px; text-align: left; font-size: 14px; }
.nav-list button:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-list button.active { background: var(--sidebar-soft); color: #fff; box-shadow: inset 3px 0 #637fcd; }
.nav-list svg { width: 18px; }
.sidebar-footer { margin-top: auto; padding: 14px 10px 6px; border-top: 1px solid rgba(255,255,255,.09); display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 10px; }
.sidebar-footer strong, .sidebar-footer span { display: block; }
.sidebar-footer strong { font-size: 12px; color: #dce5e0; }
.sidebar-footer span:not(.server-dot) { color: #899891; font-size: 10px; margin-top: 3px; }
.server-dot { width: 8px; height: 8px; border-radius: 50%; background: #6380d0; box-shadow: 0 0 0 4px rgba(99,128,208,.13); }
.workspace { min-width: 0; }
.topbar { height: 76px; padding: 0 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 20; }
.topbar h1 { font-size: 20px; margin: 0; line-height: 1; }
.eyebrow { margin-bottom: 7px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.today { color: var(--muted); font-size: 12px; margin-right: 5px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: #4c5852; }
.icon-button:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.icon-button svg { width: 17px; height: 17px; }
.mobile-menu { display: none; }
.user-chip { min-height: 40px; border: 0; border-left: 1px solid var(--line); padding: 0 0 0 14px; margin-left: 5px; background: transparent; display: flex; align-items: center; gap: 9px; color: var(--ink); }
.user-chip svg { width: 15px; color: var(--muted); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green-dark); font-size: 12px; font-weight: 800; }
.page { padding: 24px 28px 42px; max-width: 1560px; margin: 0 auto; }
.page-loading { min-height: 55vh; display: grid; place-items: center; color: var(--muted); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { min-height: 122px; padding: 19px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); display: grid; grid-template-columns: 1fr 42px; align-items: start; }
.stat-card p { margin: 0 0 13px; color: var(--muted); font-size: 13px; }
.stat-card strong { font-size: 27px; line-height: 1; }
.stat-card small { display: block; color: #8a948f; margin-top: 11px; font-size: 11px; }
.stat-icon { width: 42px; height: 42px; border-radius: 6px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.stat-icon.amber { background: var(--amber-soft); color: var(--amber); }
.stat-icon.blue { background: var(--blue-soft); color: var(--blue); }
.stat-icon.red { background: var(--red-soft); color: var(--red); }
.stat-icon svg { width: 20px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .9fr); gap: 14px; margin-top: 14px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.panel-header { min-height: 60px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: 15px; }
.panel-header p { margin: 5px 0 0; font-size: 11px; color: var(--muted); }
.panel-body { padding: 18px; }
.chart-wrap { height: 284px; position: relative; }
.page-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.page-toolbar h2 { margin: 0 0 5px; font-size: 17px; }
.page-toolbar p { margin: 0; color: var(--muted); font-size: 12px; }
.toolbar-actions { display: flex; gap: 9px; align-items: center; }
.button { min-height: 38px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; font-weight: 650; font-size: 13px; }
.button:hover { background: var(--surface-soft); }
.button svg { width: 16px; height: 16px; }
.button-primary { background: var(--green); border-color: var(--green); color: #fff; }
.button-primary:hover { background: var(--green-dark); }
.button-danger { color: var(--red); border-color: #efc7cb; background: #fff; }
.button-quiet { border-color: transparent; background: transparent; }
.button-small { min-height: 32px; padding: 0 10px; font-size: 12px; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { height: 42px; padding: 0 15px; background: var(--surface-soft); color: #69736e; font-size: 11px; font-weight: 700; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 13px 15px; border-bottom: 1px solid #e8ecea; font-size: 12px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfb; }
.cell-primary { font-weight: 700; font-size: 13px; }
.cell-secondary { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.status { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--green-soft); color: var(--green-dark); white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.warning { background: var(--amber-soft); color: var(--amber); }
.status.danger { background: var(--red-soft); color: var(--red); }
.status.muted { background: #edf0ee; color: #64706a; }
.status.info { background: var(--blue-soft); color: var(--blue); }
.action-row { display: flex; gap: 5px; flex-wrap: wrap; }
.action-row .icon-button { width: 32px; height: 32px; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }
.empty svg { width: 34px; height: 34px; color: #9ba69f; margin-bottom: 9px; }
.empty strong { display: block; color: var(--ink); margin-bottom: 6px; }
.filter-select { min-height: 38px; min-width: 200px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); padding: 0 10px; outline: none; }
.money { font-variant-numeric: tabular-nums; font-weight: 750; }
.recent-orders { padding: 4px 18px; }
.recent-order { min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.recent-order:last-child { border-bottom: 0; }
.recent-order strong, .recent-order span { display: block; }
.recent-order strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-order span { color: var(--muted); font-size: 10px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-order > div:last-child { text-align: right; }
.recent-order b { font-size: 12px; }
.modal-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(13, 21, 17, .54); }
.modal { width: min(620px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--surface); border-radius: 7px; box-shadow: 0 22px 70px rgba(0,0,0,.28); }
.modal.wide { width: min(780px, 100%); }
.modal-header { min-height: 66px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 17px; }
.modal-header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-section-title { margin: 5px 0 15px; display: flex; align-items: center; gap: 10px; color: #2d3850; font-size: 12px; font-weight: 800; }
.form-section-title::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.compact-setting { min-height: 62px; margin: 2px 0 18px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px; background: #f8f9fb; }
.form-grid .full { grid-column: 1 / -1; }
.domain-input { display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--surface); }
.domain-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(53,89,183,.11); }
.domain-input input { min-width: 0; border: 0; outline: 0; padding: 11px 13px; }
.domain-input span { padding: 11px 12px; background: var(--surface-soft); border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.file-drop { min-height: 104px; padding: 16px; border: 1px dashed #b9c6bf; border-radius: 6px; display: grid; place-items: center; text-align: center; color: var(--muted); background: var(--surface-soft); cursor: pointer; }
.file-drop:hover { border-color: var(--green); }
.file-drop svg { width: 24px; color: var(--green); }
.file-drop strong { display: block; color: var(--ink); margin: 6px 0 3px; font-size: 12px; }
.file-drop input { display: none; }
.link-list { display: grid; gap: 10px; }
.link-item { padding: 13px; border: 1px solid var(--line); border-radius: 5px; display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.blessing-card { margin-bottom: 14px; padding: 14px 15px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #ead9ac; border-radius: 6px; background: #fff9e9; color: #765213; }
.blessing-card > svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.blessing-card strong, .blessing-card p { display: block; margin: 0; }
.blessing-card strong { font-size: 13px; }
.blessing-card p { margin-top: 4px; color: #8a6729; font-size: 12px; line-height: 1.65; }
.link-item span { color: var(--muted); font-size: 12px; }
.link-item code { overflow-wrap: anywhere; font-family: Consolas, monospace; font-size: 12px; }
.check-list { border: 1px solid var(--line); border-radius: 6px; max-height: 280px; overflow: auto; }
.check-item { display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 8px 13px; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-item input { width: 16px; height: 16px; accent-color: var(--green); }
.check-item span { display: block; }
.check-item small { display: block; color: var(--muted); margin-top: 3px; }
.notice-strip { padding: 11px 13px; margin-bottom: 14px; border-left: 3px solid var(--amber); background: var(--amber-soft); color: #6c4a17; font-size: 12px; }
.audit-list { display: grid; }
.audit-row { min-height: 56px; padding: 10px 0; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 11px; align-items: start; border-bottom: 1px solid var(--line); }
.audit-row:last-child { border-bottom: 0; }
.audit-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-top: 5px; }
.audit-row strong { display: block; font-size: 12px; }
.audit-row p, .audit-row time { color: var(--muted); font-size: 11px; margin: 5px 0 0; }
.toast-stack { position: fixed; right: 20px; top: 20px; z-index: 200; display: grid; gap: 9px; }
.toast { width: min(360px, calc(100vw - 40px)); padding: 13px 15px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 5px; background: var(--surface); box-shadow: var(--shadow); display: flex; align-items: flex-start; gap: 10px; animation: toast-in .2s ease; }
.toast.error { border-left-color: var(--red); }
.toast svg { width: 17px; flex: 0 0 17px; color: var(--green); }
.toast.error svg { color: var(--red); }
.toast strong { display: block; font-size: 12px; }
.toast p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } }

@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .today { display: none; }
}
@media (max-width: 760px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-brand { min-height: 190px; padding: 42px 28px; }
  .login-panel { margin: 44px auto; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: -244px; width: 232px; transition: left .2s ease; box-shadow: 12px 0 30px rgba(0,0,0,.18); }
  .sidebar.open { left: 0; }
  .mobile-menu { display: grid; }
  .topbar { height: 70px; padding: 0 14px; }
  .topbar h1 { font-size: 17px; }
  .user-chip span:not(.avatar) { display: none; }
  .page { padding: 18px 14px 34px; }
  .stats-grid { grid-template-columns: 1fr; }
  .page-toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { width: 100%; flex-wrap: wrap; }
  .toolbar-actions .button { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .link-item { grid-template-columns: 1fr auto; }
  .link-item span { grid-column: 1 / -1; }
}

/* 2026 operations workspace */
:root {
  --bg: #f4f6f8;
  --surface-soft: #f7f9fa;
  --ink: #15201b;
  --muted: #68736d;
  --line: #e1e6e3;
  --line-strong: #cbd4cf;
  --sidebar: #202124;
  --sidebar-soft: #303238;
  --green: #3559b7;
  --green-dark: #284697;
  --green-soft: #eaf0ff;
  --shadow: 0 10px 34px rgba(23, 32, 28, .07);
}

body { color: var(--ink); }
button, input, select, textarea { font-size: 13px; }
button:disabled { cursor: not-allowed; opacity: .55; }
.login-brand { min-height: 100vh; }
.login-status { position: absolute; left: clamp(48px, 8vw, 120px); right: clamp(48px, 8vw, 120px); bottom: 54px; display: flex; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); }
.login-status > span { width: 9px; height: 9px; border-radius: 50%; background: #5f7ed1; box-shadow: 0 0 0 5px rgba(95,126,209,.14); }
.login-status strong, .login-status small { display: block; }
.login-status strong { font-size: 12px; }
.login-status small { margin-top: 4px; color: #91a098; font-size: 10px; }
.sidebar { padding: 16px 12px; }
.sidebar-brand { height: 64px; }
.nav-list { gap: 4px; }
.nav-list button { height: 44px; border-radius: 6px; }
.nav-divider { margin: 18px 12px 4px; border-top: 1px solid rgba(255,255,255,.08); }
.nav-divider span { display: inline-block; transform: translateY(-8px); padding-right: 8px; color: #718078; background: var(--sidebar); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.topbar { height: 78px; padding: 0 30px; }
.page { padding: 25px 30px 48px; }
.panel, .stat-card { border-radius: 7px; }
.stat-card { min-height: 132px; padding: 21px; box-shadow: 0 1px 0 rgba(10, 30, 20, .02); }
.stat-card strong { font-size: 29px; font-variant-numeric: tabular-nums; }
.status { min-height: 25px; }
.status.success { background: var(--green-soft); color: var(--green-dark); }
.status svg { width: 13px; height: 13px; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: var(--green); font-size: 12px; font-weight: 700; }
.button { min-height: 40px; border-radius: 6px; }
.button-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.danger-hover:hover { color: var(--red); border-color: #efc7cb; background: var(--red-soft); }
.page-loading { gap: 12px; align-content: center; }
.page-loading span { font-size: 12px; }
.page-loading.compact { min-height: 180px; }

.operations-bar { min-height: 76px; margin-bottom: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #d5def7; border-radius: 7px; background: #f5f7ff; }
.operations-bar.has-alert { border-color: #ead7b6; background: #fffbf3; }
.operations-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.operations-main strong { display: block; font-size: 14px; }
.operations-main p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.operations-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 6px; background: var(--green-soft); color: var(--green); }
.has-alert .operations-icon { background: var(--amber-soft); color: var(--amber); }
.operations-icon svg { width: 19px; }
.operations-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 14px; margin-top: 14px; }
.dashboard-grid .recent-panel { grid-column: 1 / -1; }
.chart-panel .chart-wrap { height: 310px; }
.site-health-list { padding: 4px 17px; }
.site-health-row { min-height: 57px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.site-health-row:last-child { border-bottom: 0; }
.site-health-row strong, .site-health-row small { display: block; }
.site-health-row strong { font-size: 12px; }
.site-health-row small { margin-top: 4px; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.site-health-row > span:last-child { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.health-indicator { width: 7px; height: 7px; border-radius: 50%; }
.health-indicator.ok { background: #5270c5; box-shadow: 0 0 0 4px rgba(82,112,197,.12); }
.health-indicator.bad { background: var(--red); box-shadow: 0 0 0 4px rgba(190,62,70,.10); }

.filter-bar { min-height: 58px; margin-bottom: 12px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.search-box { width: min(400px, 100%); min-height: 39px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; }
.search-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(53,89,183,.10); }
.search-box svg { width: 16px; flex: 0 0 16px; color: #829089; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.filter-summary { margin-left: auto; display: flex; align-items: baseline; gap: 5px; padding: 0 10px; white-space: nowrap; }
.filter-summary strong { font-size: 15px; }
.filter-summary span { color: var(--muted); font-size: 10px; }
.filter-summary i { width: 1px; height: 16px; margin: 0 8px; background: var(--line); }
.table-panel { overflow: hidden; }
.cell-link { display: flex; align-items: center; gap: 5px; width: fit-content; margin-top: 4px; color: var(--muted); font-size: 11px; text-decoration: none; }
.cell-link:hover { color: var(--green); }
.cell-link svg { width: 11px; }
.cell-warning { display: block; max-width: 210px; margin-top: 5px; color: var(--red); font-size: 9px; line-height: 1.4; }
.mono { font-family: Consolas, "SFMono-Regular", monospace; font-size: 11px; }
.summary-strip { margin-bottom: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.summary-strip > div { min-height: 77px; padding: 16px 19px; border-right: 1px solid var(--line); }
.summary-strip > div:last-child { border-right: 0; }
.summary-strip span, .summary-strip strong { display: block; }
.summary-strip span { margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.summary-strip strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.blacklist-summary .current-ip { font-size: 14px; overflow-wrap: anywhere; }
.security-banner { margin-bottom: 12px; padding: 15px 17px; display: flex; align-items: flex-start; gap: 13px; border: 1px solid #dfe4ed; border-left: 3px solid var(--red); border-radius: 7px; background: #f8f9fc; }
.security-banner > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 6px; background: var(--red-soft); color: var(--red); }
.security-banner svg { width: 18px; height: 18px; }
.security-banner strong, .security-banner p { display: block; margin: 0; }
.security-banner strong { font-size: 13px; }
.security-banner p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.ip-address { font-size: 13px; }
.compact-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.confirm-block.danger + .field { margin-top: 18px; }

.automation-note { margin-bottom: 18px; padding: 12px 13px; display: flex; gap: 11px; border: 1px solid #ead7b6; border-radius: 6px; background: #fffbf3; color: #6c4a17; }
.automation-note.ready { border-color: #d5def7; background: #f5f7ff; color: var(--green-dark); }
.automation-note > svg { width: 18px; flex: 0 0 18px; }
.automation-note strong, .automation-note span { display: block; }
.automation-note strong { font-size: 12px; }
.automation-note span { margin-top: 4px; font-size: 10px; line-height: 1.5; }
.confirm-block { display: flex; gap: 13px; align-items: flex-start; padding: 16px; border: 1px solid #d5def7; border-radius: 6px; background: #f5f7ff; }
.confirm-block.danger { border-color: #efc7cb; background: var(--red-soft); }
.confirm-block > svg { width: 24px; color: var(--green); }
.confirm-block.danger > svg { color: var(--red); }
.confirm-block strong, .confirm-block span { display: block; }
.confirm-block span { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.check-summary { display: flex; align-items: center; gap: 13px; padding: 15px; border-radius: 6px; }
.check-summary.ok { background: var(--green-soft); color: var(--green-dark); }
.check-summary.bad { background: var(--red-soft); color: var(--red); }
.check-summary > svg { width: 27px; }
.check-summary strong, .check-summary span { display: block; }
.check-summary span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.health-check-list { margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; }
.health-check-list > div { min-height: 61px; padding: 10px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.health-check-list > div:last-child { border-bottom: 0; }
.health-check-list strong, .health-check-list small { display: block; }
.health-check-list strong { font-size: 12px; }
.health-check-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.check-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 5px; }
.check-icon.ok { background: var(--green-soft); color: var(--green); }
.check-icon.bad { background: var(--red-soft); color: var(--red); }
.check-icon svg { width: 16px; }
.secret-value { letter-spacing: 2px; }

.release-overview { min-height: 104px; margin-bottom: 14px; padding: 17px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.release-overview > div:first-child { display: flex; align-items: center; gap: 13px; }
.release-overview span, .release-overview strong, .release-overview small { display: block; }
.release-overview > div:first-child > div > span, .release-count span { color: var(--muted); font-size: 10px; }
.release-overview > div:first-child strong { margin: 5px 0; font-size: 19px; }
.release-overview small { color: var(--muted); font-size: 10px; }
.release-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 6px; background: var(--blue-soft); color: var(--blue); }
.release-count { min-height: 55px; padding-left: 20px; border-left: 1px solid var(--line); }
.release-count strong { margin-top: 8px; font-size: 22px; }
.version-name { display: flex; align-items: center; gap: 10px; }
.version-name > svg { width: 27px; padding: 6px; border-radius: 5px; background: var(--surface-soft); color: var(--green); }
.version-name strong, .version-name small { display: block; }
.version-name small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.selection-toolbar { min-height: 39px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }
.selection-toolbar label { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 650; }
.selection-toolbar input { accent-color: var(--green); }
.check-item > .status { margin-left: auto; }

.server-hero { min-height: 114px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.server-hero h2 { margin: 9px 0 5px; font-size: 24px; font-family: Consolas, monospace; }
.server-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.server-state { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; font-weight: 700; }
.server-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(53,89,183,.11); }
.server-state.offline { color: var(--red); }
.resource-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.resource-grid section { padding: 16px 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.resource-grid small { color: var(--muted); font-size: 9px; }
.resource-heading { display: flex; justify-content: space-between; align-items: center; }
.resource-heading span { color: var(--muted); font-size: 11px; }
.resource-heading strong { font-size: 17px; }
.progress { height: 6px; margin: 12px 0 10px; overflow: hidden; border-radius: 3px; background: #ecf0ee; }
.progress i { display: block; height: 100%; max-width: 100%; background: var(--green); }
.progress.blue i { background: var(--blue); }
.progress.amber i { background: var(--amber); }
.progress.red i { background: var(--red); }
.monitor-section { margin-top: 22px; }
.section-heading { min-height: 52px; display: flex; align-items: center; justify-content: space-between; }
.section-heading h2 { margin: 0 0 5px; font-size: 16px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.monitor-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr); gap: 14px; margin-top: 14px; }
.monitor-grid .audit-list { max-height: 420px; overflow: auto; padding: 0 18px; }

.automation-status { min-height: 100px; margin-bottom: 14px; padding: 17px 19px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid #ead7b6; border-radius: 7px; background: #fffbf3; }
.automation-status.ready { border-color: #d5def7; background: #f5f7ff; }
.automation-status > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: var(--amber-soft); color: var(--amber); }
.automation-status.ready > span { background: var(--green-soft); color: var(--green); }
.automation-status > span svg { width: 23px; }
.automation-status strong { display: block; font-size: 15px; }
.automation-status p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .65fr); gap: 14px; }
.panel-footer { padding: 13px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.credential-note { margin: 0 0 18px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-soft); color: var(--muted); font-size: 10px; }
.credential-note svg { width: 15px; color: var(--green); }
.setting-rows { border-top: 1px solid var(--line); }
.setting-row { min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.setting-row strong, .setting-row small { display: block; }
.setting-row strong { font-size: 12px; }
.setting-row small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.setting-row input { display: none; }
.setting-row > i { width: 39px; height: 22px; padding: 3px; border-radius: 11px; background: #cdd5d1; transition: .18s ease; }
.setting-row > i::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s ease; }
.setting-row input:checked + i { background: var(--green); }
.setting-row input:checked + i::before { transform: translateX(17px); }
.setting-row.interval-row { grid-template-columns: minmax(0, 1fr) 130px; cursor: default; }
.setting-row.interval-row .filter-select { min-width: 0; }
.settings-side { display: grid; align-content: start; gap: 14px; }
.workflow-list { padding: 4px 17px; }
.workflow-list > div { min-height: 65px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.workflow-list > div:last-child { border-bottom: 0; }
.workflow-list > div > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 800; }
.workflow-list strong, .workflow-list small { display: block; }
.workflow-list strong { font-size: 11px; }
.workflow-list small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.compact-panel { padding: 4px 17px; }
.info-pair { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.info-pair:last-child { border-bottom: 0; }
.info-pair span { color: var(--muted); font-size: 10px; }
.info-pair strong { font-size: 10px; text-align: right; overflow-wrap: anywhere; }
.toast.warning { border-left-color: var(--amber); }
.toast.warning svg { color: var(--amber); }

.club-cell { min-width: 205px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; }
.club-logo { width: 42px; height: 42px; position: relative; overflow: hidden; display: grid; place-items: center; border: 1px solid #d9dfe8; border-radius: 7px; background: #eef1f6; color: #4d5c76; font-size: 14px; font-weight: 800; }
.club-logo img { width: 100%; height: 100%; display: block; object-fit: cover; background: #fff; }
.club-logo b { display: none; }
.club-logo.fallback b { display: block; }
.club-cell .cell-primary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-cell .cell-link { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-row { min-width: 400px; gap: 6px; flex-wrap: wrap; }
.action-button { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #d9dee7; border-radius: 5px; background: #f0f2f5; color: #465064; font-size: 11px; font-weight: 700; white-space: nowrap; }
.action-button:hover { border-color: #b9c2d2; background: #e7eaf0; color: #222b3a; }
.action-button svg { width: 14px; height: 14px; }
.action-button.primary { border-color: #d3dcf7; background: #eaf0ff; color: #284697; }
.action-button.primary:hover { border-color: #aebdea; background: #dfe7fb; }
.action-button.warning { border-color: #eed9b7; background: #fff3df; color: #91600f; }
.action-button.warning:hover { border-color: #dfbd83; background: #ffe9c5; }
.action-button.danger { border-color: #efcdd1; background: #fcedef; color: #ad3740; }
.action-button.danger:hover { border-color: #e7aeb4; background: #f9dfe2; }
#sites-table tbody tr { min-height: 70px; }
#sites-table td { padding-top: 14px; padding-bottom: 14px; }
#sites-table th:first-child, #sites-table td:first-child { padding-left: 18px; }
#sites-table th:last-child, #sites-table td:last-child { padding-right: 18px; }

@media (max-width: 1180px) {
  .dashboard-grid, .settings-layout, .monitor-grid { grid-template-columns: 1fr; }
  .dashboard-grid .recent-panel { grid-column: auto; }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .login-brand { min-height: 180px; }
  .login-status { display: none; }
  .page { padding: 16px 13px 34px; }
  .operations-bar, .automation-status, .server-hero { align-items: flex-start; flex-direction: column; }
  .automation-status { display: flex; }
  .automation-status > .button { width: 100%; }
  .operations-actions { width: 100%; }
  .operations-actions .button { flex: 1; }
  .filter-bar { align-items: stretch; flex-direction: column; }
  .search-box, .filter-select { width: 100%; min-width: 0; }
  .filter-summary { width: 100%; justify-content: center; margin: 3px 0; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-strip > div:nth-child(2) { border-right: 0; }
  .summary-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .release-overview { grid-template-columns: 1fr 1fr; }
  .release-overview > div:first-child { grid-column: 1 / -1; }
  .release-count { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .resource-grid { grid-template-columns: 1fr; }
  .server-hero .button { width: 100%; }
  .setting-row { grid-template-columns: minmax(0, 1fr) 42px; }
  .setting-row.interval-row { grid-template-columns: 1fr; padding: 12px 0; }
  .automation-status p { line-height: 1.45; }
  .action-row { min-width: 360px; }
  .action-button { min-height: 34px; padding: 0 11px; }
}

/* Executive console refinement */
:root {
  --bg: #f0f2f6;
  --surface: #ffffff;
  --surface-soft: #f6f7fa;
  --ink: #161b27;
  --muted: #697184;
  --line: #e0e4eb;
  --line-strong: #c9d0dc;
  --sidebar: #171a21;
  --sidebar-soft: #272c37;
  --green: #2f5bc4;
  --green-dark: #23479d;
  --green-soft: #edf2ff;
  --amber: #9b6518;
  --amber-soft: #fff5e4;
  --red: #bd3f4b;
  --red-soft: #fdefF0;
  --blue: #32749f;
  --blue-soft: #eaf4f8;
  --shadow: 0 9px 26px rgba(21, 29, 46, .07);
}

body { color: var(--ink); background: var(--bg); }
::selection { color: #fff; background: var(--green); }

.brand-mark {
  padding: 5px;
  overflow: hidden;
  background: #fff;
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .18);
}
.brand-mark.small { padding: 3px; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 4px; }

.login-screen { background: #fff; }
.login-brand { background: #171a21; }
.login-brand h1 { font-size: 32px; font-weight: 780; }
.login-brand p { color: #aab2c1; }
.login-brand::after { background: rgba(255,255,255,.11); }
.login-panel { padding: 34px 0; }
.login-heading span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid #dbe3f6; border-radius: 4px; background: var(--green-soft); }
.login-heading h2 { margin-top: 12px; color: #111621; }
.login-panel .input-wrap { min-height: 50px; background: #fbfcfe; }
.login-button { min-height: 50px; box-shadow: 0 7px 16px rgba(47,91,196,.19); }

.app-shell { grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { padding: 16px 13px; background: var(--sidebar); border-right: 1px solid #292d36; }
.sidebar-brand { height: 68px; padding: 0 9px 13px; }
.sidebar-brand strong { color: #fff; font-size: 15px; }
.sidebar-brand span { color: #858e9e; }
.sidebar-brand-copy { min-width: 0; flex: 1; }
.sidebar-brand-copy strong, .sidebar-brand-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapse-button { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 0; border-radius: 5px; color: #919aaa; background: transparent; }
.sidebar-collapse-button:hover { color: #fff; background: #292e38; }
.sidebar-collapse-button svg { width: 17px; height: 17px; }
.nav-list { gap: 4px; margin-top: 20px; }
.nav-list button { position: relative; height: 46px; padding: 0 14px; color: #aab1be; font-weight: 650; }
.nav-list button:hover { color: #fff; background: #21252e; }
.nav-list button.active { color: #fff; background: var(--sidebar-soft); box-shadow: none; }
.nav-list button.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: #6f91e9; }
.nav-list button.active svg { color: #8eabf4; }
.nav-divider span { color: #737b89; background: var(--sidebar); }
.sidebar-footer { margin: auto 4px 0; padding: 16px 7px 7px; }
.sidebar-footer strong { color: #e3e7ee; }
.sidebar-footer span:not(.server-dot) { color: #808896; }

.topbar { height: 80px; padding: 0 32px; background: rgba(255,255,255,.97); border-color: #e2e5eb; box-shadow: 0 1px 0 rgba(24,31,47,.02); }
.topbar h1 { color: #171c27; font-size: 20px; }
.eyebrow { color: var(--green); font-size: 10px; text-transform: uppercase; }
.today { padding-right: 12px; border-right: 1px solid var(--line); }
.topbar .icon-button { background: #f8f9fb; }
.user-chip { min-height: 44px; padding-left: 16px; }
.avatar { width: 32px; height: 32px; border-radius: 6px; }
.page { max-width: 1580px; padding: 28px 32px 52px; }

.panel, .stat-card, .table-panel, .filter-bar, .summary-strip, .release-overview, .server-hero, .resource-grid section {
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.panel, .table-panel { overflow: hidden; }
.panel-header { min-height: 64px; padding: 16px 20px; }
.panel-header h2 { color: #1b2130; font-size: 15px; }
.panel-header p { color: #7b8393; }
.panel-body { padding: 20px; }

.stats-grid { gap: 16px; }
.stat-card { min-height: 138px; padding: 22px; border-top: 3px solid #416ac8; transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:nth-child(2) { border-top-color: #c08832; }
.stat-card:nth-child(3) { border-top-color: #3f829f; }
.stat-card:nth-child(4) { border-top-color: #b84a55; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 13px 32px rgba(21,29,46,.1); }
.stat-card p { color: #727b8c; font-weight: 650; }
.stat-card strong { color: #151b27; font-size: 30px; }
.stat-icon { width: 44px; height: 44px; border: 1px solid #dbe4fb; }
.content-grid, .dashboard-grid { gap: 16px; margin-top: 16px; }

.page-toolbar { min-height: 62px; margin-bottom: 16px; }
.page-toolbar h2 { color: #151b27; font-size: 18px; }
.page-toolbar p { margin-top: 6px; color: #747d8d; }
.button { min-height: 40px; border-color: #ccd2dc; border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(20,27,42,.04); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.button:hover { border-color: #b4bdcb; background: #f7f8fa; box-shadow: 0 3px 8px rgba(20,27,42,.07); }
.button:active { transform: translateY(1px); }
.button-primary { border-color: var(--green); background: var(--green); box-shadow: 0 5px 12px rgba(47,91,196,.16); }
.button-primary:hover { border-color: var(--green-dark); background: var(--green-dark); }
.button-danger { color: #ae3541; border-color: #e9c4c8; background: #fffafa; }
.icon-button { border-color: #d6dbe4; background: #fff; }
.icon-button:hover { border-color: #bfc7d3; color: var(--green-dark); }

.operations-bar, .automation-status { box-shadow: 0 7px 22px rgba(35,71,157,.06); }
.filter-bar { min-height: 62px; padding: 10px 12px; }
.search-box { min-height: 42px; }
.filter-select { min-height: 42px; border-color: #cdd3dd; }
.summary-strip > div { min-height: 82px; padding: 17px 20px; }
.summary-strip strong { color: #151b27; font-size: 20px; }

.table-wrap { scrollbar-color: #bdc5d1 transparent; scrollbar-width: thin; }
table { font-variant-numeric: tabular-nums; }
th { height: 46px; padding: 0 17px; color: #5f6878; background: #f5f7fa; border-color: #dfe3e9; font-size: 10px; text-transform: uppercase; }
td { padding: 14px 17px; color: #2d3441; border-color: #eceef2; }
tbody tr { transition: background .14s ease; }
tbody tr:hover { background: #f8faff; }
.cell-primary { color: #1c2330; }
.cell-secondary, .cell-link { color: #778091; }
.club-logo { border-color: #d9dfe9; background: #f1f3f7; box-shadow: 0 2px 7px rgba(22,29,43,.06); }
.status { border: 1px solid transparent; border-radius: 4px; }
.status.success { border-color: #d9e3fb; }
.status.warning { border-color: #f0dfbf; }
.status.danger { border-color: #edcfd2; }
.action-button { min-height: 34px; border-color: #d8dde6; background: #f7f8fa; }
.action-button:hover { border-color: #b9c2d2; background: #eceff4; }

.modal-layer { background: rgba(12, 17, 27, .62); backdrop-filter: blur(3px); }
.modal { border: 1px solid rgba(255,255,255,.55); border-radius: 8px; box-shadow: 0 28px 90px rgba(9,13,22,.34); }
.modal-header { min-height: 72px; padding: 17px 22px; background: #fff; }
.modal-header h2 { color: #151b27; font-size: 18px; }
.modal-header p { margin-top: 6px; color: #757e8e; }
.modal-body { padding: 22px; }
.modal-footer { padding: 15px 22px; background: #f7f8fa; }
.field > span:first-child { color: #394151; }
.input-wrap { min-height: 47px; border-color: #cbd2dd; background: #fbfcfd; }
.input-wrap:focus-within { background: #fff; }
.input-wrap svg { color: #7f899a; }
.notice-strip { border: 1px solid #efdcb9; border-left: 3px solid var(--amber); border-radius: 5px; line-height: 1.55; }

.change-preview { margin-bottom: 16px; display: grid; grid-template-columns: minmax(0, .9fr) 40px minmax(0, 1.35fr); align-items: stretch; gap: 10px; }
.change-preview-current, .change-preview-new { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 6px; background: #f7f8fa; }
.change-preview-new { border-color: #d5def4; background: #f8faff; }
.change-preview-current > span, .change-preview-new > span { display: block; margin-bottom: 10px; color: #788193; font-size: 10px; font-weight: 750; }
.change-preview-current strong { display: block; overflow-wrap: anywhere; color: #1f2734; font-family: Consolas, "SFMono-Regular", monospace; font-size: 13px; line-height: 1.5; }
.change-preview-current small, .change-preview-new small { display: block; margin-top: 8px; color: #7b8495; font-size: 10px; line-height: 1.45; }
.change-preview-new .input-wrap { margin: 0; background: #fff; }
.change-preview-arrow { display: grid; place-items: center; color: #7889b2; }
.change-preview-arrow svg { width: 18px; height: 18px; }
.change-password-field { margin: 0 0 16px; }

.modal.task-modal { width: min(660px, 100%); overflow: hidden; }
.task-progress-header { min-height: 106px; background: #171b24; color: #fff; }
.task-progress-header h2 { margin-top: 5px; color: #fff; font-size: 20px; }
.task-progress-header p { color: #aeb5c1; font-size: 11px; }
.task-progress-kicker { display: block; color: #8da8ee; font-size: 9px; font-weight: 800; }
.task-percent { min-width: 76px; text-align: right; color: #9db5f3; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.task-percent.success { color: #7fd1a2; }
.task-percent.failed { color: #f19aa0; }
.task-progress-body { padding-top: 24px; }
.task-progress-track { height: 10px; overflow: hidden; border-radius: 5px; background: #e7eaf0; }
.task-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: #3559b7; transition: width .25s ease; }
.task-progress-track i.success { background: #2e8b5a; }
.task-progress-track i.failed { background: var(--red); }
.task-current { min-height: 74px; margin: 17px 0 20px; padding: 14px 15px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid #dce2ed; border-radius: 7px; background: #f8faff; }
.task-current.success { border-color: #cfe5d8; background: #f4fbf7; }
.task-current.failed { border-color: #edcfd2; background: #fff7f8; }
.task-current-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 6px; background: #e7edfc; color: #3559b7; }
.task-current.running .task-current-icon svg { animation: spin .9s linear infinite; }
.task-current.success .task-current-icon { background: #dff2e7; color: #26764a; }
.task-current.failed .task-current-icon { background: #f9e1e3; color: var(--red); }
.task-current-icon svg { width: 20px; height: 20px; }
.task-current strong, .task-current p { display: block; }
.task-current strong { color: #202734; font-size: 12px; }
.task-current p { margin: 5px 0 0; color: #747e8e; font-size: 10px; line-height: 1.5; }
.task-history-heading { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; color: #303847; }
.task-history-heading span { font-size: 11px; font-weight: 800; }
.task-history-heading small { color: #7b8493; font-size: 9px; }
.task-history { max-height: 270px; overflow-y: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.task-step { min-height: 58px; padding: 10px 12px; display: grid; grid-template-columns: 27px minmax(0, 1fr) 36px; align-items: center; gap: 10px; border-bottom: 1px solid #edf0f4; }
.task-step:last-child { border-bottom: 0; }
.task-step > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #edf0f4; color: #7c8594; }
.task-step > span svg { width: 13px; height: 13px; }
.task-step.current { background: #f8faff; }
.task-step.current > span { background: #e3eafd; color: #3559b7; }
.task-step.current > span svg { animation: spin .9s linear infinite; }
.task-step.done > span { background: #dff2e7; color: #26764a; }
.task-step.failed { background: #fff8f8; }
.task-step.failed > span { background: #f9e1e3; color: var(--red); }
.task-step strong { display: block; color: #2c3442; font-size: 10px; }
.task-step p { margin: 4px 0 0; color: #7d8593; font-size: 9px; line-height: 1.45; }
.task-step > small { text-align: right; color: #8b93a1; font-size: 9px; font-variant-numeric: tabular-nums; }
.task-history-empty { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #7e8795; font-size: 10px; }
.task-history-empty .button-spinner { border-color: #d6dce6; border-top-color: #3559b7; }
.task-progress-footer { min-height: 65px; align-items: center; justify-content: space-between; }
.task-progress-footer > span { color: #7b8493; font-size: 9px; }

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { left: -256px; width: 244px; }
  .sidebar-collapse-button { display: none; }
  .topbar { height: 72px; padding: 0 14px; }
  .topbar-actions { gap: 6px; }
  .page { padding: 18px 14px 38px; }
  .stat-card { min-height: 126px; }
  .modal-layer { align-items: end; padding: 10px; }
  .modal { max-height: calc(100vh - 20px); }
  .modal-header, .modal-body, .modal-footer { padding-left: 17px; padding-right: 17px; }
  .change-preview { grid-template-columns: 1fr; }
  .change-preview-arrow { height: 24px; transform: rotate(90deg); }
  .change-preview-current, .change-preview-new { padding: 14px; }
  .task-progress-header { min-height: 92px; }
  .task-percent { min-width: 62px; font-size: 25px; }
  .task-history { max-height: 36vh; }
  .task-progress-footer { align-items: flex-start; flex-direction: column; }
  .task-progress-footer .button { width: 100%; }
}

@media (min-width: 761px) {
  .app-shell, .sidebar, .sidebar-brand-copy, .nav-list button span, .sidebar-footer > div { transition: width .2s ease, grid-template-columns .2s ease, opacity .14s ease; }
  .app-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
  .app-shell.sidebar-collapsed .sidebar { padding-left: 9px; padding-right: 9px; }
  .app-shell.sidebar-collapsed .sidebar-brand { height: 112px; padding: 4px 0 12px; flex-direction: column; justify-content: center; gap: 9px; }
  .app-shell.sidebar-collapsed .sidebar-brand-copy,
  .app-shell.sidebar-collapsed .nav-list button span,
  .app-shell.sidebar-collapsed .nav-divider span,
  .app-shell.sidebar-collapsed .sidebar-footer > div { display: none; }
  .app-shell.sidebar-collapsed .nav-list { margin-top: 14px; }
  .app-shell.sidebar-collapsed .nav-list button { padding: 0; justify-content: center; gap: 0; }
  .app-shell.sidebar-collapsed .nav-list button svg { width: 19px; height: 19px; }
  .app-shell.sidebar-collapsed .nav-divider { margin: 10px 6px; border-top: 1px solid #343943; }
  .app-shell.sidebar-collapsed .sidebar-footer { grid-template-columns: 1fr; justify-items: center; padding-left: 0; padding-right: 0; }
}

/* Server intelligence and system management */
.server-monitor-panel { margin-top: 16px; }
.server-monitor-panel .panel-header { background: #fbfcfe; }
.server-monitor-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.server-metric { min-width: 0; min-height: 158px; padding: 20px; border-right: 1px solid var(--line); }
.server-metric:last-child { border-right: 0; }
.server-metric > span { display: flex; align-items: center; gap: 7px; color: #6b7485; font-size: 11px; font-weight: 750; }
.server-metric > span svg { width: 15px; height: 15px; color: var(--green); }
.server-metric > strong { display: block; margin-top: 17px; color: #161c28; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
.server-metric > strong small { color: #7a8392; font-size: 12px; font-weight: 650; }
.server-metric > p { margin: 9px 0 0; overflow: hidden; color: #7b8493; font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.metric-track { height: 5px; margin-top: 17px; overflow: hidden; border-radius: 3px; background: #e8ebf0; }
.metric-track i { display: block; height: 100%; max-width: 100%; background: #3b67cb; }
.metric-track.load i { background: #9a6c25; }
.metric-track.flow i { background: #398162; }
.metric-track.memory i { background: #397e9d; }
.metric-track.disk i { background: #ad4d58; }
.hardware-strip { display: grid; grid-template-columns: 1.25fr 1fr .7fr .8fr .8fr .7fr; border-top: 1px solid var(--line); background: #f8f9fb; }
.hardware-strip > div { min-width: 0; min-height: 66px; padding: 14px 18px; border-right: 1px solid var(--line); }
.hardware-strip > div:last-child { border-right: 0; }
.hardware-strip span, .hardware-strip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hardware-strip span { margin-bottom: 7px; color: #838b99; font-size: 9px; }
.hardware-strip strong { color: #303746; font-size: 11px; }

.system-console-hero { min-height: 116px; margin-bottom: 16px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #292f3a; border-radius: 7px; background: #1b1f27; color: #fff; box-shadow: 0 12px 28px rgba(15,20,31,.14); }
.system-console-hero > div:first-child { min-width: 0; display: flex; align-items: center; gap: 16px; }
.system-hero-icon { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 1px solid #44506b; border-radius: 7px; background: #252b37; color: #88a7f1; }
.system-hero-icon svg { width: 23px; height: 23px; }
.system-console-hero h2 { margin: 5px 0 6px; font-size: 20px; }
.system-console-hero p { margin: 0; color: #aab2c0; font-size: 11px; }
.system-console-hero > div:first-child > div > span { color: #7999e5; font-size: 9px; font-weight: 800; }
.system-health { display: grid; justify-items: end; gap: 8px; }
.system-health .server-state { color: #86a5ef; }
.system-health .server-state.offline { color: #e89a70; }
.system-health small { color: #8f98a8; font-size: 9px; }
.system-settings-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 16px; align-items: start; }
.system-setting-panel { min-width: 0; }
.system-setting-panel.system-wide { grid-column: 1 / -1; }
.system-setting-panel .panel-body { min-height: 256px; }
.brand-editor { margin-bottom: 20px; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 16px; }
.brand-preview { width: 92px; height: 92px; padding: 7px; overflow: hidden; display: grid; place-items: center; border: 1px solid #d9dfe9; border-radius: 7px; background: #f7f8fa; }
.brand-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.brand-upload { min-height: 72px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px dashed #c5ccd8; border-radius: 6px; background: #fafbfc; cursor: pointer; }
.brand-upload:hover { border-color: #8da4dc; background: #f7f9ff; }
.brand-upload input { display: none; }
.brand-upload > svg { width: 22px; color: var(--green); }
.brand-upload strong, .brand-upload small { display: block; }
.brand-upload strong { color: #313847; font-size: 12px; }
.brand-upload small { margin-top: 5px; color: #7d8696; font-size: 9px; }
.system-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.system-toggle-grid .setting-row { padding: 0 16px; border-bottom: 0; }
.system-toggle-grid .setting-row:nth-child(2) { border-left: 1px solid var(--line); }
.system-toggle-grid .setting-row.interval-row { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.recovery-banner { margin-bottom: 18px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid #ead39f; border-left: 4px solid #bd8127; border-radius: 6px; background: #fff9eb; color: #755219; }
.recovery-banner > svg { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.recovery-banner strong, .recovery-banner p { display: block; }
.recovery-banner strong { color: #624617; font-size: 12px; }
.recovery-banner p { margin: 5px 0 0; color: #8a692d; font-size: 10px; line-height: 1.6; }
.automation-status.recovery { border-color: #e5ca90; background: #fffaf0; }
.account-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(420px, 1.28fr); gap: 28px; align-items: start; }
.account-password-form { min-width: 0; }
.account-password-form .button { margin-top: 2px; }
.admin-management { min-width: 0; border-left: 1px solid var(--line); padding-left: 28px; }
.admin-management-heading { min-height: 40px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.admin-management-heading strong, .admin-management-heading span { display: block; }
.admin-management-heading strong { color: #202735; font-size: 12px; }
.admin-management-heading span { margin-top: 4px; color: #7c8595; font-size: 9px; }
.admin-list { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.admin-row { min-height: 66px; padding: 11px 13px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.admin-row:last-child { border-bottom: 0; }
.admin-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 5px; background: #edf2fd; color: #3559b7; font-size: 12px; font-weight: 800; }
.admin-row > div > strong, .admin-row > div > small { display: block; }
.admin-row > div > strong { color: #242b38; font-size: 11px; }
.admin-row > div > small { margin-top: 5px; color: #818998; font-size: 9px; }
.account-permission-note { min-height: 150px; padding: 24px; display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--line); border-radius: 6px; background: #f8f9fb; }
.account-permission-note > svg { width: 24px; color: var(--green); }
.account-permission-note strong { color: #252c39; font-size: 12px; }
.account-permission-note p { margin: 7px 0 0; color: #798292; font-size: 10px; line-height: 1.6; }

@media (max-width: 1280px) {
  .server-monitor-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .server-metric:nth-child(3) { border-right: 0; }
  .server-metric:nth-child(n+4) { border-top: 1px solid var(--line); }
  .hardware-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hardware-strip > div:nth-child(3) { border-right: 0; }
  .hardware-strip > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}

@media (max-width: 980px) {
  .system-settings-grid { grid-template-columns: 1fr; }
  .system-setting-panel.system-wide { grid-column: auto; }
  .account-grid { grid-template-columns: 1fr; }
  .admin-management { padding: 24px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 760px) {
  .server-monitor-metrics { grid-template-columns: 1fr 1fr; }
  .server-metric { min-height: 145px; padding: 17px; border-top: 1px solid var(--line); }
  .server-metric:nth-child(odd) { border-right: 1px solid var(--line); }
  .server-metric:nth-child(even) { border-right: 0; }
  .server-metric:first-child, .server-metric:nth-child(2) { border-top: 0; }
  .server-metric:last-child { grid-column: 1 / -1; border-right: 0; }
  .hardware-strip { grid-template-columns: 1fr 1fr; }
  .hardware-strip > div { border-top: 1px solid var(--line); }
  .hardware-strip > div:nth-child(odd) { border-right: 1px solid var(--line); }
  .hardware-strip > div:nth-child(even) { border-right: 0; }
  .hardware-strip > div:first-child, .hardware-strip > div:nth-child(2) { border-top: 0; }
  .system-console-hero { align-items: flex-start; flex-direction: column; padding: 19px; }
  .system-health { justify-items: start; }
  .brand-editor { grid-template-columns: 72px minmax(0, 1fr); }
  .brand-preview { width: 72px; height: 72px; }
  .system-toggle-grid { grid-template-columns: 1fr; }
  .system-toggle-grid .setting-row:nth-child(2) { border-left: 0; border-top: 1px solid var(--line); }
  .system-toggle-grid .setting-row.interval-row { grid-column: auto; }
}