:root {
  --bg: #f3f6fb;
  --bg-strong: #e8eef7;
  --panel: #ffffff;
  --panel-soft: #f8fafd;
  --ink: #14243c;
  --ink-soft: #405168;
  --muted: #738196;
  --line: #dbe4ef;
  --line-strong: #c9d5e3;
  --brand: #146ef5;
  --brand-strong: #0a56c8;
  --brand-soft: #e9f1ff;
  --sidebar: #0b1728;
  --sidebar-soft: #12243c;
  --success: #0f9f6e;
  --success-soft: #e5f8f0;
  --warning: #c56a0a;
  --warning-soft: #fff3e3;
  --danger: #cf2f3f;
  --danger-soft: #ffebee;
  --muted-badge: #5e6f84;
  --muted-soft: #eef2f7;
  --shadow: 0 14px 40px rgba(20, 36, 60, 0.08);
  --shadow-soft: 0 4px 16px rgba(20, 36, 60, 0.06);
  --radius: 14px;
  --radius-sm: 9px;
  --font: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
::selection { background: #cfe1ff; color: var(--ink); }
:focus-visible { outline: 3px solid rgba(20, 110, 245, 0.3); outline-offset: 2px; }
[hidden] { display: none !important; }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
h2 { margin-bottom: 0; font-size: 17px; line-height: 1.3; }
h3 { margin-bottom: 6px; font-size: 15px; }
code, pre, .mono { font-family: var(--mono); }
small { font-size: 12px; }
ul, ol { margin-top: 0; }

.muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-success { color: var(--success); }
.nowrap { white-space: nowrap; }
.small-block { margin: 10px 0 14px; }
.full-width { grid-column: 1 / -1; }
.metric-small { font-size: 17px !important; letter-spacing: -0.02em; }

.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 16px 18px;
  overflow-y: auto;
  color: #d8e4f5;
  background: linear-gradient(180deg, #0b1728 0%, #0e1d32 55%, #0a1524 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 24px; color: #fff; }
.brand:hover { color: #fff; }
.brand strong { display: block; font-size: 18px; letter-spacing: -0.02em; }
.brand small { display: block; margin-top: 1px; color: #8fa4c0; font-size: 11px; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  background: linear-gradient(135deg, #287dff, #0a56c8);
  box-shadow: 0 8px 22px rgba(20, 110, 245, 0.35);
}
.nav { display: grid; gap: 4px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: 9px;
  color: #aab9ce;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav a.active { color: #fff; background: linear-gradient(90deg, rgba(20, 110, 245, 0.28), rgba(20, 110, 245, 0.08)); box-shadow: inset 3px 0 0 #3b8cff; }
.nav-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: #7fa3d8; font-family: var(--mono); font-size: 15px; }
.nav a.active .nav-icon { color: #7dbbff; }
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; color: #fff; background: var(--danger); font-size: 11px; text-align: center; }
.sidebar-footer { margin-top: auto; padding: 18px 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.user-line { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: #dce8f8; font-size: 13px; }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #24517e; font-size: 12px; font-weight: 700; }
.link-button { padding: 0; border: 0; color: #8fa4c0; background: none; font-size: 12px; }
.link-button:hover { color: #fff; text-decoration: underline; }

.main { width: 100%; max-width: 1540px; margin: 0 auto; padding: 30px 34px 56px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-head p.muted { max-width: 760px; margin-bottom: 0; }
.eyebrow { margin-bottom: 6px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; }

.panel {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.panel-head .muted { font-size: 12px; text-align: right; }
.empty-state { padding: 34px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); background: var(--panel-soft); text-align: center; }
.empty-state a { margin-left: 4px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { color: #fff; background: linear-gradient(180deg, #2b7cff, var(--brand)); box-shadow: 0 6px 16px rgba(20, 110, 245, 0.24); }
.btn-primary:hover { color: #fff; background: linear-gradient(180deg, #1f73f7, var(--brand-strong)); }
.btn-secondary { color: var(--ink-soft); background: #fff; border-color: var(--line-strong); }
.btn-secondary:hover { color: var(--ink); background: var(--panel-soft); border-color: #aebdd0; }
.btn-ghost { color: var(--ink-soft); background: transparent; border-color: transparent; }
.btn-ghost:hover { color: var(--brand); background: var(--brand-soft); }
.btn-danger { color: #fff; background: var(--danger); }
.btn-danger:hover { color: #fff; background: #b72534; }
.btn-small { min-height: 31px; padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn-block { width: 100%; }
.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.row-actions form { margin: 0; }
.actions-col { width: 1%; white-space: nowrap; }
.text-link { font-size: 13px; font-weight: 600; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric-grid-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #fff, #fbfcff); box-shadow: var(--shadow-soft); }
.metric > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.metric > strong { display: block; margin-bottom: 2px; font-size: 30px; line-height: 1.1; letter-spacing: -0.04em; }
.metric > small { color: var(--muted); }
.metric > .mono { overflow-wrap: anywhere; }

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 12px; border-bottom: 1px solid #edf1f6; text-align: left; vertical-align: top; }
th { color: var(--muted); background: #f7f9fc; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
tbody tr:hover { background: #fbfdff; }
tbody tr:last-child td { border-bottom: 0; }
.url-cell { max-width: 300px; overflow-wrap: anywhere; font-size: 12px; }
.error-cell { max-width: 250px; color: var(--danger); overflow-wrap: anywhere; font-size: 12px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.badge-success { color: #087a52; background: var(--success-soft); }
.badge-warning { color: #96500a; background: var(--warning-soft); }
.badge-danger { color: #a91f2d; background: var(--danger-soft); }
.badge-muted { color: #55657a; background: var(--muted-soft); }
.badge-neutral { color: #3f5f8a; background: #edf3fb; }

.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.filter-row input, .filter-row select { min-width: 150px; }
.filter-row input[type="search"], .filter-row input[name="q"] { min-width: 260px; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tab { padding: 7px 14px; border-radius: 8px; color: var(--muted); font-weight: 600; }
.tab:hover { color: var(--ink); background: var(--panel-soft); }
.tab.active { color: var(--brand); background: var(--brand-soft); }

.pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pagination-links { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); background: #fff; font-size: 12px; }
.page-link:hover { border-color: var(--brand); color: var(--brand); }
.page-link.active { color: #fff; background: var(--brand); border-color: var(--brand); }
.page-link.disabled { color: #a9b4c3; background: #f7f9fc; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-stack { display: grid; gap: 14px; }
label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
label > small { color: var(--muted); font-weight: 400; line-height: 1.45; }
input, select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus { border-color: #7ba9e8; box-shadow: 0 0 0 3px rgba(20, 110, 245, 0.1); outline: none; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.form-section { padding: 20px; }
.form-actions { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); font-weight: 500; }
.checkbox-row input[type="checkbox"] { width: 16px; min-height: 16px; margin: 0; accent-color: var(--brand); }
.switch-row { align-items: flex-start; flex-wrap: wrap; }
.switch-row small { flex-basis: 100%; padding-left: 24px; }
.file-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.file-row input[type="file"] { max-width: 360px; min-height: auto; padding: 7px; background: var(--panel-soft); }
.error-list { margin: 8px 0 0 18px; padding: 0; }

.section-heading { display: flex; align-items: center; gap: 7px; }
.section-icon { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; color: var(--ink-soft); }
.section-help { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.link-section .panel-head { align-items: flex-start; }
.link-editor { display: grid; gap: 12px; }
.link-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) 42px;
  gap: 22px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.link-row:focus-within { border-color: #9bbbe5; box-shadow: 0 0 0 3px rgba(20, 110, 245, 0.07); }
.link-row label { min-width: 0; }
.field-label { display: block; }
.link-row input:not([type="hidden"]) { background: #fff; }
.required { color: var(--danger); }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  line-height: 1;
}
.icon-button svg { width: 18px; height: 18px; fill: currentColor; }
.icon-button:hover { color: var(--ink); background: var(--panel-soft); }
.icon-button.danger { color: var(--danger); border-color: #e6a8b0; background: #fff; }
.icon-button.danger:hover { background: var(--danger-soft); }
.link-editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.link-editor-actions .muted { font-size: 12px; }
.file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.file-button:hover, .file-button:focus-within { color: var(--ink); background: var(--panel-soft); border-color: #aebdd0; }
.file-button input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }

.status-bar { display: flex; width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: #e9eef5; }
.status-segment { display: block; height: 100%; }
.status-segment-active { background: #11a675; }
.status-segment-warming { background: #e0a32b; }
.status-segment-paused { background: #9aa8b8; }
.status-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 18px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.status-dot-active { background: #11a675; }
.status-dot-warming { background: #e0a32b; }
.status-dot-paused { background: #9aa8b8; }
.attention-list { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.attention-title { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.attention-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #f0d2d6; border-radius: 9px; color: var(--ink); background: #fff9fa; }
.attention-item:hover { color: var(--ink); border-color: #e7b9c0; background: #fff5f6; }
.attention-mark { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--danger); font-size: 12px; font-weight: 800; }
.attention-item > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.attention-item strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.attention-item small { display: block; color: var(--muted); font-size: 11px; }

.task-table-wrap { overflow-x: auto; }
.task-table { min-width: 1050px; }
.task-table td { padding-top: 14px; padding-bottom: 14px; }
.task-campaign { min-width: 310px; }
.task-title { display: inline-block; margin-bottom: 3px; font-size: 14px; font-weight: 700; }
.task-subline { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 11px; }
.task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; margin-top: 6px; font-size: 11px; }
.task-last-url { max-width: 480px; margin-top: 6px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.task-actions { flex-wrap: nowrap; }

.flash { margin-bottom: 16px; padding: 11px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; }
.flash-success { color: #087a52; background: var(--success-soft); border-color: #bfead9; }
.flash-error { color: #a91f2d; background: var(--danger-soft); border-color: #f4c7cd; }
.flash-info { color: #2a5e9e; background: var(--brand-soft); border-color: #c8dcff; }
.flash-hide { opacity: 0; transition: opacity 0.3s ease; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; max-width: min(420px, calc(100vw - 44px)); padding: 11px 15px; border: 1px solid #bfead9; border-radius: 10px; color: #087a52; background: #fff; box-shadow: var(--shadow); font-size: 13px; animation: toast-in 0.18s ease; }
.toast-error { color: #a91f2d; border-color: #f4c7cd; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.two-col-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.detail-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.detail-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow-soft); }
.detail-card span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.detail-card strong { display: block; overflow-wrap: anywhere; font-size: 14px; }
.detail-card small { display: block; margin-top: 2px; color: var(--muted); }
.code-label { margin: 13px 0 5px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.code-block { display: block; margin: 0; padding: 11px 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; color: #29405f; background: #f7f9fc; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid #edf1f6; }
.preview-row:last-child { border-bottom: 0; }
.preview-row > span { color: var(--muted); font-size: 12px; }
.preview-row code { overflow-wrap: anywhere; font-size: 12px; }

.checklist { display: grid; gap: 9px; }
.check-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--panel-soft); }
.check-item:hover { color: var(--ink); border-color: #b9c9dc; background: #f4f8fd; }
.check-item.done { border-color: #c8e9dc; background: #f4fcf8; }
.check-mark { display: inline-grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: #a7b5c7; font-size: 12px; font-weight: 700; }
.check-item.done .check-mark { background: var(--success); }
.check-item strong { display: block; font-size: 13px; }
.check-item small { display: block; color: var(--muted); font-size: 12px; }

.alert-list { display: grid; gap: 8px; }
.alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--panel-soft); }
.alert-row:hover { color: var(--ink); background: #f4f8fd; }
.alert-main { min-width: 0; }
.alert-main strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.alert-main small { color: var(--muted); }
.alert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.alert-card { padding: 16px; border: 1px solid var(--line); border-left: 4px solid var(--muted-badge); border-radius: var(--radius-sm); background: #fff; }
.alert-card-critical { border-left-color: var(--danger); }
.alert-card-warning { border-left-color: var(--warning); }
.alert-card-info { border-left-color: var(--brand); }
.alert-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.alert-card-head .mono { margin-left: auto; font-size: 11px; }
.alert-card h3 { margin-bottom: 8px; font-size: 14px; line-height: 1.45; }
.alert-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.alert-details { margin-top: 11px; }
.alert-details summary { color: var(--brand); font-size: 12px; font-weight: 600; cursor: pointer; }
.alert-details pre { max-height: 220px; margin: 9px 0 0; padding: 10px; overflow: auto; border-radius: 8px; color: #334c6c; background: #f7f9fc; font-size: 11px; white-space: pre-wrap; }
.alert-card form { margin-top: 12px; }
.danger-zone { border-color: #f1c9ce; background: #fffafb; }

.secret-row { display: flex; align-items: center; gap: 8px; }
.secret-input { flex: 1 1 auto; min-width: 0; letter-spacing: 0.03em; }
.script-actions { margin-bottom: 10px; }
.script-area { min-height: 310px; padding: 14px; color: #29405f; background: #f7f9fc; font-size: 12px; line-height: 1.55; white-space: pre; }
.steps { margin: 14px 0 0 20px; color: var(--ink-soft); font-size: 13px; }
.steps li { margin-bottom: 7px; }
.api-endpoint { padding: 14px 0; border-bottom: 1px solid #edf1f6; }
.api-endpoint:last-child { border-bottom: 0; }
.api-endpoint > div:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.api-endpoint p { margin-bottom: 8px; font-size: 13px; }

.ua-result { padding: 18px; border: 1px solid #c8dcff; border-radius: var(--radius); background: linear-gradient(135deg, #f4f8ff, #fff); }
.ua-result-label { margin-bottom: 6px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.ua-result-value { margin-bottom: 8px; overflow-wrap: anywhere; color: #213b5e; font-size: 15px; line-height: 1.55; }
.ua-result-meta { font-size: 12px; }
.ua-result-list { display: grid; gap: 8px; margin-top: 12px; }
.ua-result-list code { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 12px; overflow-wrap: anywhere; }
.explain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.explain-grid article { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft); }
.explain-grid p { margin-bottom: 0; font-size: 13px; }

.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 30px 18px; background: radial-gradient(circle at 20% 0%, #e4efff 0, transparent 36%), radial-gradient(circle at 100% 100%, #e6f8f1 0, transparent 30%), var(--bg); }
.auth-card { width: 100%; max-width: 430px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth-brand strong { display: block; font-size: 18px; }
.auth-brand small { display: block; color: var(--muted); font-size: 11px; }
.auth-card h1 { margin-bottom: 6px; font-size: 25px; }
.auth-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.error-card { max-width: 520px; text-align: center; }
.error-code { margin-bottom: 8px; color: var(--brand); font-family: var(--mono); font-size: 54px; font-weight: 800; letter-spacing: -0.06em; }
.error-actions { justify-content: center; margin-top: 20px; }

@media (max-width: 1240px) {
  .metric-grid-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .main { padding: 24px 22px 44px; }
  .metric-grid, .metric-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col, .two-col-wide { grid-template-columns: 1fr; }
  .alert-grid { grid-template-columns: 1fr; }
  .link-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) 42px; gap: 14px; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; padding: 14px; }
  .brand { padding-bottom: 14px; }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav a { min-height: 38px; padding: 7px 9px; }
  .sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
  .user-line { margin-bottom: 0; }
  .main { padding: 20px 14px 40px; }
  .page-head { flex-direction: column; gap: 12px; }
  .page-head > .row-actions { width: 100%; }
  .metric-grid, .metric-grid-six, .metric-grid-four { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { padding: 14px; }
  .metric > strong { font-size: 25px; }
  .form-grid, .explain-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .panel { padding: 15px; }
  .filter-row { align-items: stretch; }
  .filter-row input, .filter-row select { min-width: 0; flex: 1 1 140px; }
  .filter-row input[name="q"] { flex-basis: 100%; }
  .secret-row { flex-wrap: wrap; }
  .secret-input { flex-basis: 100%; }
  .alert-card-head .mono { margin-left: 0; flex-basis: 100%; }
  .pagination { align-items: flex-start; flex-direction: column; }
  .link-row { grid-template-columns: 1fr; }
  .link-row .icon-button { justify-self: end; }
  .task-actions { flex-wrap: wrap; }
}
@media (max-width: 460px) {
  .nav { grid-template-columns: 1fr; }
  .metric-grid, .metric-grid-six, .metric-grid-four, .detail-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 22px 18px; }
  h1 { font-size: 23px; }
}