/* Shared semantic palette. Every surface, including dialogs, follows the theme. */
:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --surface-hover: #f0f5f6;
  --ink: #202e3b;
  --muted: #617281;
  --line: #e5ebef;
  --line-strong: #cdd8e0;
  --green: #077b6e;
  --green-hover: #07685e;
  --on-accent: #ffffff;
  --light: #eaf6f2;
  --red: #b94350;
  --red-bg: #fff0f1;
  --amber: #956615;
  --amber-bg: #fff7e7;
  --orange: #b36527;
  --purple: #745ea6;
  --purple-bg: #f2effa;
  --purple-line: #e5def3;
  --blue: #397ca5;
  --track: #e7edef;
  --chart: #94c6b8;
  --focus: #0c9488;
  --shadow: 0 2px 6px #263d501f, 0 0 0 1px #ffffff70 inset;
  --panel-shadow: 0 2px 8px #20304003, 0 6px 28px #20304003;
  --header-bg: #f5f7faed;
  --backdrop: #13223180;
  --brand-bg: #eef4f2;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10161e;
  --surface: #18212c;
  --surface-2: #1c2733;
  --surface-hover: #233140;
  --ink: #e3ebf2;
  --muted: #9babbb;
  --line: #2b3847;
  --line-strong: #435469;
  --green: #65d5b9;
  --green-hover: #86e5cc;
  --on-accent: #102820;
  --light: #1b3833;
  --red: #f18d98;
  --red-bg: #3b2632;
  --amber: #e5bb6b;
  --amber-bg: #393125;
  --orange: #edaa73;
  --purple: #b8a3ed;
  --purple-bg: #2d2944;
  --purple-line: #43395e;
  --blue: #82bfe5;
  --track: #314151;
  --chart: #377e71;
  --focus: #65d5b9;
  --shadow: 0 2px 6px #00000026, 0 0 0 1px #ffffff08 inset;
  --panel-shadow: 0 4px 20px #00000010;
  --header-bg: #10161eed;
  --backdrop: #050b13b3;
  --brand-bg: #152923;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
button, a, input, select, textarea, summary { outline-offset: 4px; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--focus); }
button, a { touch-action: manipulation; }
button:disabled { opacity: .48; cursor: not-allowed; }
::selection { background: var(--light); color: var(--green); }
[hidden] { display: none !important; }
.ui-icon { width: 20px; height: 20px; display: block; flex: none; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 20; padding: 12px 18px; background: var(--surface); border-radius: 10px; }
.skip-link:focus { top: 12px; }
.shell { display: flex; min-height: 100vh; }
aside { width: 224px; position: fixed; inset: 0 auto 0 0; z-index: 3; display: flex; flex-direction: column; padding: 30px 16px 20px; background: var(--surface); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 6px; font-size: 15px; font-weight: 650; letter-spacing: -.4px; }
.mark { width: 38px; height: 38px; display: inline-grid; place-items: center; flex: none; border-radius: 12px; box-shadow: var(--shadow); }
.mark img { display: block; width: 100%; height: 100%; }
.brand small { display: block; margin-top: 5px; font-size: 8px; font-weight: 500; letter-spacing: 1.7px; color: var(--muted); }
.nav-label { margin: 48px 14px 14px; color: var(--muted); font-size: 10px; letter-spacing: 1px; }
nav { display: grid; gap: 7px; }
nav a { display: flex; align-items: center; gap: 12px; position: relative; padding: 13px 15px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
nav a:hover { background: var(--surface-2); color: var(--ink); }
nav a.active { background: var(--light); color: var(--green); font-weight: 650; }
nav a.active::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-left: auto; }
.sidebar-bottom { margin-top: auto; padding: 24px 4px 0; }
.connection { display: flex; align-items: flex-start; gap: 10px; padding: 15px 12px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 11px; font-size: 11px; }
.connection small { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.connection i, .live-dot, .database-tag i { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--green); }
.connection i { margin-top: 4px; box-shadow: 0 0 0 4px var(--light); }
.live-dot { margin-right: 7px; }
.admin-profile { display: flex; align-items: center; gap: 10px; padding: 22px 6px 0; font-size: 12px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--purple-line); background: var(--purple-bg); color: var(--purple); border-radius: 11px; font-weight: 650; }
.admin-profile small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.admin-profile button { margin-left: auto; }
.workspace { margin-left: 224px; flex: 1; min-width: 0; }
header { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 36px; font-size: 12px; border-bottom: 1px solid var(--line); background: var(--header-bg); }
.breadcrumbs { display: flex; align-items: center; white-space: nowrap; }
.breadcrumb { color: var(--muted); }
.slash { color: var(--line-strong); margin: 0 14px; }
#crumb { font-weight: 550; }
.header-right { display: flex; align-items: center; gap: 18px; color: var(--muted); }
#clock { font-size: 11px; font-variant-numeric: tabular-nums; }
.database-tag { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 6px 9px; font-size: 10px; }
.theme-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.theme-switch button { display: grid; place-items: center; width: 31px; height: 29px; background: transparent; color: var(--muted); border-radius: 7px; }
.theme-switch .ui-icon { width: 16px; height: 16px; }
.theme-switch button:hover { color: var(--ink); background: var(--surface-hover); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--green); box-shadow: var(--shadow); }
main { padding: 36px 36px 48px; max-width: 1680px; margin: auto; min-height: calc(100vh - 129px); }
footer { display: flex; justify-content: space-between; gap: 12px; padding: 18px 36px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.footer-dot { color: var(--line-strong); margin: 0 8px; }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.page-title h1 { font-size: 27px; letter-spacing: -.8px; font-weight: 650; margin: 0 0 10px; line-height: 1.35; }
.page-title p { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 0; }
.actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 550; line-height: 1.5; padding: 10px 15px; white-space: nowrap; transition: box-shadow .15s; }
.primary { background: var(--green); color: var(--on-accent); border-color: var(--green); box-shadow: 0 2px 3px #0000000a; }
.primary:hover { background: var(--green-hover); border-color: var(--green-hover); }
.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 1px 2px #00000003; }
.secondary:hover { background: var(--surface-hover); }
.icon-btn { display: inline-grid; place-items: center; background: transparent; color: var(--muted); border-radius: 8px; width: 34px; height: 34px; padding: 7px; }
.icon-btn:hover { background: var(--surface-hover); color: var(--ink); }
.icon-btn .ui-icon { width: 18px; height: 18px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--panel-shadow); padding: 20px 22px; overflow: hidden; }
.stat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.stat-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--green); background: var(--light); }
.stat:nth-child(2) .stat-icon { color: var(--purple); background: var(--purple-bg); }
.stat:nth-child(3) .stat-icon { color: var(--blue); background: var(--surface-2); }
.stat:nth-child(4) .stat-icon { color: var(--amber); background: var(--amber-bg); }
.stat-icon .ui-icon { width: 17px; height: 17px; }
.stat-value { font-size: 34px; font-weight: 620; letter-spacing: -1.2px; line-height: 1.2; margin: 13px 0 16px; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 15px; margin-left: 7px; font-weight: 400; color: var(--muted); }
.stat-foot { color: var(--muted); font-size: 10px; }
.stat-foot b { color: var(--green); font-weight: 600; margin-left: 3px; }
.overview-mid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; margin-bottom: 24px; }
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--panel-shadow); overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 23px 24px; }
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.panel-head p { color: var(--muted); margin: 7px 0 0; font-size: 11px; }
.subtle { color: var(--muted); font-size: 11px; font-weight: 400; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 207px; position: relative; padding: 18px 25px 27px; background: repeating-linear-gradient(to top, transparent 0px, transparent 48px, var(--line) 49px, transparent 50px); }
.chart-bar { flex: 1; min-width: 3px; border-radius: 4px 4px 1px 1px; background: var(--chart); position: relative; }
.chart-bar:hover { background: var(--green); }
.chart-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 8px 10px; background: var(--ink); color: var(--surface); white-space: nowrap; font-size: 10px; border-radius: 6px; z-index: 2; }
.chart-bar:hover .chart-tip { display: block; }
.chart-labels { display: flex; justify-content: space-between; padding: 0 25px 21px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.health-panel { padding: 24px; background: var(--light); position: relative; }
.health-panel h2 { font-size: 12px; color: var(--green); font-weight: 600; margin: 0; }
.health-symbol { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--green); border-radius: 50%; margin: 18px 0 12px; color: var(--green); }
.health-symbol .ui-icon { width: 19px; height: 19px; }
.health-panel h3 { font-size: 19px; font-weight: 600; letter-spacing: -.4px; margin: 0 0 8px; }
.health-panel p { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 0; }
.health-row { display: flex; justify-content: space-between; border-top: 1px solid var(--line-strong); margin-top: 15px; padding-top: 12px; font-size: 11px; color: var(--muted); }
.health-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.search { position: relative; display: flex; align-items: center; }
.search>span { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.search .ui-icon { width: 16px; height: 16px; }
.search input { min-width: 240px; padding-left: 36px; }
input, select, textarea { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px; padding: 11px 12px; min-width: 0; transition: box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--light); outline-offset: 1px; border-color: var(--focus); box-shadow: 0 0 0 3px var(--light); }
select { font-size: 12px; padding: 10px; max-width: 190px; }
.toolbar input { font-size: 12px; }
.table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 550; padding: 14px 22px; border-bottom: 1px solid var(--line); }
td { padding: 19px 22px; font-size: 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
.name-cell { display: flex; align-items: center; gap: 12px; }
.item-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.item-icon .ui-icon { width: 19px; height: 19px; }
.cell-sub { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; line-height: 1.5; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font-size: 10px; line-height: 1.5; font-weight: 550; border-radius: 6px; background: var(--light); color: var(--green); }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.gray { background: var(--surface-hover); color: var(--muted); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.row-actions { display: flex; align-items: center; gap: 10px; }
.text-btn { background: transparent; color: var(--green); font-size: 11px; line-height: 1.6; padding: 4px 0; border-radius: 4px; }
.text-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-btn.danger { color: var(--red); }
.empty { padding: 62px 24px; text-align: center; color: var(--muted); }
.empty-symbol { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 16px; margin: 0 auto 18px; color: var(--muted); }
.empty-symbol .ui-icon { width: 25px; height: 25px; }
.empty h3 { font-size: 15px; color: var(--ink); font-weight: 550; }
.empty p { font-size: 12px; line-height: 1.8; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 22px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.pagination .actions button { padding: 7px 11px; font-size: 11px; }
.note { display: flex; gap: 9px; margin-top: 18px; font-size: 11px; line-height: 1.9; color: var(--muted); }
.loading { padding: 100px 20px; text-align: center; color: var(--muted); font-size: 12px; }
dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 28px 100px #00000040; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(5px); }
.modal-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 2; padding: 20px 26px; border-bottom: 1px solid var(--line); background: var(--surface); }
.modal-heading h2 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.4px; }
#modal-body { padding: 24px 26px 28px; }
label { display: grid; gap: 9px; font-size: 12px; font-weight: 500; margin-bottom: 19px; }
label small, .hint { font-size: 11px; color: var(--muted); font-weight: 400; line-height: 1.85; }
textarea { min-height: 125px; resize: vertical; font: 12px/1.7 ui-monospace, monospace; white-space: pre-wrap; }
label select { max-width: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkbox { display: flex; align-items: center; gap: 9px; }
.checkbox input { accent-color: var(--green); width: 15px; height: 15px; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.error { color: var(--red); font-size: 12px; line-height: 1.7; }
.secret-box { overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--line); padding: 16px; border-radius: 9px; font: 12px/1.8 ui-monospace, monospace; margin: 16px 0; }
.detail-grid { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; font-size: 12px; line-height: 1.7; margin-top: 0; }
.detail-grid dt, .detail-grid dd { padding: 10px 0; border-bottom: 1px solid var(--line); }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 14px 22px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; box-shadow: 0 8px 40px #00000026; font-size: 12px; z-index: 10; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px; align-items: start; }
.settings-form { padding: 0 24px 26px; }
.chip { padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; background: var(--surface-2); color: var(--muted); }
.refresh-time { font-size: 10px; color: var(--muted); }
/* Login uses native vector artwork; no remote fonts or images are required. */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); }
.login-brand { position: relative; overflow: hidden; padding: 48px 12%; background: var(--brand-bg); border-right: 1px solid var(--line); }
.login-wordmark { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 650; letter-spacing: -.5px; }
.login-intro { margin-top: 76px; }
.eyebrow { font-size: 10px; font-weight: 550; color: var(--green); letter-spacing: 1.8px; }
.login-brand h1 { font-size: clamp(30px, 3vw, 43px); line-height: 1.45; font-weight: 620; letter-spacing: -1.5px; margin: 20px 0; }
.login-brand p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.login-brand>small { position: absolute; bottom: 32px; font-size: 9px; letter-spacing: 2px; color: var(--muted); }
.login-art { position: relative; width: 270px; height: 270px; display: grid; place-items: center; margin: 32px auto 70px; }
.login-art i { position: absolute; width: 100%; height: 100%; border: 1px solid var(--line-strong); border-radius: 50%; }
.login-art i:nth-child(2) { width: 72%; height: 72%; border-style: dashed; }
.login-art i:nth-child(3) { width: 44%; height: 44%; background: var(--light); border-color: var(--line-strong); }
.login-art b { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; transform: rotate(-8deg); z-index: 1; box-shadow: 0 12px 35px #087f7226; }
.login-art b img { display: block; width: 100%; height: 100%; }
.orbit-node { display: grid; place-items: center; position: absolute; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface); color: var(--green); box-shadow: var(--panel-shadow); }
.node-one { left: 0; top: 55px; transform: rotate(-9deg); }
.node-two { right: 0; top: 90px; transform: rotate(9deg); color: var(--purple); }
.node-three { bottom: 0; left: 95px; transform: rotate(-6deg); color: var(--blue); }
.login-side { display: flex; align-items: center; justify-content: center; position: relative; padding: 100px 32px; }
.login-theme { position: absolute; top: 30px; right: 32px; }
.login-card { width: 100%; max-width: 352px; }
.login-card h2 { font-size: 30px; font-weight: 650; letter-spacing: -.8px; margin: 16px 0 12px; }
.login-card>p { font-size: 12px; color: var(--muted); margin-bottom: 36px; }
.login-card>p.error { color: var(--red); margin: 0 0 14px; }
.login-card label { margin-bottom: 22px; }
.login-card input { padding: 13px; background: var(--surface-2); }
.login-card .primary { width: 100%; justify-content: space-between; padding: 13px 16px; margin: 6px 0 22px; font-size: 13px; }
.login-card>small { display: block; font-size: 10px; color: var(--muted); line-height: 1.9; }
.login-card code { font-size: 10px; }
.login-foot { position: absolute; bottom: 30px; color: var(--muted); font-size: 8px; letter-spacing: 1.6px; }
.login-foot span { margin: 0 8px; }
@media (max-width: 1100px) {
  main { padding: 28px 24px 40px; }
  header { padding: 0 24px; }
  .stat { padding: 17px; }
  .stats-grid { gap: 12px; }
  .overview-mid { grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; }
  th, td { padding: 15px 16px; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .header-right #clock { display: none; }
}
@media (max-width: 800px) {
  aside { width: 72px; padding: 22px 10px 18px; }
  .brand { padding: 0 6px; }
  .brand>div, .nav-label, nav .nav-text, .sidebar-bottom .connection, .admin-profile .avatar, .admin-profile>div { display: none; }
  nav { margin-top: 35px; gap: 10px; }
  nav a { padding: 14px 16px; gap: 0; }
  nav a.active::after { display: none; }
  .sidebar-bottom { padding: 18px 0 0; }
  .admin-profile { justify-content: center; padding: 0; }
  .admin-profile button { margin: 0; }
  .workspace { margin-left: 72px; }
  header { height: 68px; padding: 0 20px; }
  .header-right { gap: 10px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-mid { grid-template-columns: minmax(0, 1fr); }
  .health-panel { display: none; }
  .page-title h1 { font-size: 23px; }
  .page-title { align-items: flex-start; }
  .page-title p { max-width: 330px; }
  .login-page { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-side { min-height: 100dvh; padding: 110px 30px; }
  main { padding: 26px 20px 36px; min-height: calc(100vh - 121px); }
  .toolbar { padding: 15px; }
  footer { padding: 18px 20px; }
}
@media (max-width: 520px) {
  aside { width: 60px; padding: 20px 6px 16px; }
  .brand { padding: 0 7px; }
  .mark { width: 34px; height: 34px; border-radius: 10px; }
  nav a { padding: 13px 14px; }
  .workspace { margin-left: 60px; }
  header { padding: 0 14px; height: 64px; }
  .breadcrumb, .slash, .database-tag { display: none; }
  .theme-switch button { width: 29px; height: 30px; }
  main { padding: 24px 14px 30px; }
  .page-title { flex-direction: column; gap: 18px; margin-bottom: 22px; }
  .page-title h1 { font-size: 23px; margin-bottom: 8px; }
  .page-title p { font-size: 11px; }
  .stats-grid { gap: 10px; margin-bottom: 18px; }
  .stat { padding: 15px 12px; border-radius: 12px; }
  .stat-value { font-size: 27px; margin: 14px 0 12px; }
  .stat-top { font-size: 10px; }
  .stat-icon { width: 22px; height: 24px; border-radius: 6px; }
  .stat-icon .ui-icon { width: 14px; height: 14px; }
  .stat-foot { font-size: 9px; line-height: 1.8; }
  .panel-head { padding: 18px 16px; }
  .panel-head h2 { font-size: 13px; }
  .chart { gap: 4px; padding-left: 16px; padding-right: 16px; }
  .chart-labels { padding-left: 16px; padding-right: 16px; font-size: 9px; }
  .search, .search input { min-width: 0; width: 100%; }
  .filter-group { width: 100%; }
  .filter-group>input, .filter-group>select { flex: 1; min-width: 0; max-width: 100%; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pagination { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
  .pagination .actions { width: 100%; justify-content: space-between; }
  footer { padding: 16px 14px; }
  footer>span:last-child { display: none; }
  dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 15px; }
  .modal-heading { padding: 16px 18px; }
  #modal-body { padding: 20px 18px; }
  .detail-grid { grid-template-columns: 96px minmax(0, 1fr); gap: 0 10px; font-size: 11px; }
  .settings-form { padding: 0 16px 22px; }
  .row-actions button { min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.login-steps{padding-left:20px;font-size:12px;line-height:1.8}.login-steps li{margin:12px 0}.login-steps small{display:block;color:var(--muted);overflow-wrap:anywhere}#callback-form{margin-top:24px}#oauth-link{width:100%;font:11px ui-monospace,monospace}

.request-table th,.request-table td{padding:14px 12px}.request-table td:nth-child(2),.request-table td:nth-child(3){max-width:160px;overflow:hidden;text-overflow:ellipsis}.request-table .cell-sub{overflow:hidden;text-overflow:ellipsis}

.request-table{min-width:1040px}.request-table th,.request-table td{padding:16px 12px}.request-table th{font-size:11px}.request-table td:nth-child(2),.request-table td:nth-child(3){max-width:155px}.request-table td:nth-child(5){min-width:190px}.request-table td:nth-child(6){min-width:112px}.request-table td:nth-child(7){min-width:165px}.request-table td:last-child{min-width:118px}.token-cell{display:grid;gap:9px;text-align:left;background:none;padding:0;font-size:11px;line-height:1.5;color:var(--ink);border-radius:4px}.token-cell:hover{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}.token-line{display:flex;gap:6px;align-items:center}.token-line b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-variant-numeric:tabular-nums}.token-in{color:var(--green)}.token-out{color:var(--purple);margin-left:8px}.token-cache{color:var(--blue);font-size:10px}.token-write{color:var(--amber);margin-left:5px}.cache-hit{display:grid;gap:5px;width:90px;font-variant-numeric:tabular-nums}.cache-hit>b{font-size:13px;font-weight:550}.cache-hit small{font-size:9px;color:var(--muted)}.cache-hit meter{height:5px;width:86px;appearance:none;border:0;background:var(--track);border-radius:3px}.cache-hit meter::-webkit-meter-bar{height:5px;background:var(--track);border:0;border-radius:3px}.cache-hit meter::-webkit-meter-optimum-value{background:var(--green);border-radius:3px}.cache-hit meter::-moz-meter-bar{background:var(--green)}.latency-cell{display:flex;gap:9px;align-items:stretch}.latency-rail{display:flex;flex-direction:column;width:3px;flex-shrink:0;border-radius:3px;overflow:hidden}.latency-rail i{flex:1;background:currentColor;opacity:.6}.latency-values{display:grid;grid-template-columns:max-content max-content;gap:5px 11px;align-items:baseline;font-size:10px}.latency-values>span{color:var(--muted)}.latency-values b{font-weight:500;font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.level-good{color:var(--green)}.level-warn{color:var(--amber)}.level-slow{color:var(--orange)}.level-critical{color:var(--red)}.level-unknown{color:var(--muted)}.output-rate{color:var(--ink)}

/* Account pool: two quota windows share one column, as in sub2api. */
.account-table{min-width:930px;table-layout:fixed}.account-table th,.account-table td{padding:18px 14px;white-space:normal;vertical-align:middle}.account-table th{font-size:11px}.account-table th:nth-child(1){width:24%}.account-table th:nth-child(2){width:12%}.account-table th:nth-child(3){width:32%}.account-table th:nth-child(4){width:18%}.account-table th:nth-child(5){width:14%}.account-identity .name-cell{gap:9px}.account-identity .name-cell>div{min-width:0;overflow-wrap:anywhere;font-weight:550}.account-identity .cell-sub{font-weight:400;line-height:1.5;color:var(--muted)}.account-tags{display:flex;align-items:center;gap:8px;margin:12px 0 0 43px}.plan-tag{border:1px solid var(--purple-line);border-radius:4px;color:var(--purple);background:var(--purple-bg);padding:2px 6px;font-size:10px;text-transform:uppercase}.account-table .cell-sub{line-height:1.5;overflow-wrap:anywhere}.account-proxy{display:block;overflow-wrap:anywhere;font-size:11px}.quota-sync{margin-top:13px;font-size:10px;color:var(--muted)}.quota-sync .cell-sub{margin-top:3px}.account-usage{min-width:0;max-width:350px}.quota-window+.quota-window{margin-top:13px;padding-top:13px;border-top:1px dashed var(--line)}.quota-line{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}.window-label{width:28px;flex:none;text-align:center;border-radius:4px;background:var(--purple-bg);color:var(--purple);font-size:10px;font-weight:600;padding:3px 0}.weekly .window-label{background:var(--light);color:var(--green)}.quota-line>b{font-size:11px;min-width:32px;font-weight:550}.quota-countdown{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}.quota-meter{appearance:none;display:block;border:0;width:58px;height:6px;flex:1;max-width:86px;min-width:25px;background:var(--track);border-radius:4px}.quota-meter::-webkit-meter-bar{border:0;background:var(--track);height:6px;border-radius:4px}.quota-meter::-webkit-meter-optimum-value{background:var(--green);border-radius:4px}.quota-meter.warn::-webkit-meter-optimum-value{background:var(--amber)}.quota-meter.critical::-webkit-meter-optimum-value{background:var(--red)}.quota-meter::-moz-meter-bar{background:var(--green);border-radius:4px}.quota-meter.warn::-moz-meter-bar{background:var(--amber)}.quota-meter.critical::-moz-meter-bar{background:var(--red)}.quota-window-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:10px;color:var(--muted)}.quota-window-stats>span{border-radius:3px;background:var(--surface-2);padding:2px 5px}.quota-estimate{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:7px;font-size:10px}.estimate-value{color:var(--purple);cursor:help}.estimate-value b{font-weight:550;color:var(--purple)}.quota-threshold{color:var(--muted)}.quota-expired .quota-countdown{color:var(--amber)}.quota-help{font-size:11px;color:var(--muted);line-height:1.9;margin-top:15px;max-width:950px}.quota-help summary{cursor:pointer;color:var(--green)}.quota-help p{margin:8px 0}.account-table td:nth-child(2)>.cell-sub{max-width:120px}
@media(max-width:1250px){
 .account-table{display:block;min-width:0;width:100%;table-layout:auto}.account-table thead{display:none}.account-table tbody{display:grid;gap:16px;padding:16px}.account-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}.account-table td{display:block;min-width:0;border:0;padding:14px 16px}.account-table td::before{content:attr(data-label);display:block;margin-bottom:10px;font-size:10px;color:var(--muted)}.account-table td:first-child{border-bottom:1px solid var(--line)}.account-table td:nth-child(2){border-bottom:1px solid var(--line);text-align:right}.account-table td:nth-child(2)>.cell-sub{max-width:none}.account-table td:last-child{grid-column:1/-1;border-top:1px solid var(--line)}.account-table .account-usage{max-width:none}.account-table .name-cell{min-width:0}.account-tags{margin-left:0}.account-table td:nth-child(3){background:var(--surface-2)}
}
@media(max-width:650px){.account-table tr{grid-template-columns:minmax(0,1fr)}.account-table tbody{padding:10px;gap:12px}.account-table td{padding:12px}.account-table td:nth-child(2){text-align:left;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.account-table td:nth-child(2)::before{display:none}.account-table td:nth-child(2) .cell-sub{margin:0}.account-table td:nth-child(4){font-size:11px}.quota-countdown{font-size:9px}.quota-line{gap:6px}.quota-sync{margin-top:8px}.quota-help{overflow-wrap:anywhere}}
.model-test-modal{width:min(760px,calc(100vw - 30px));max-height:90vh}.test-result{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;overflow-wrap:anywhere}.test-status{font-size:13px;font-weight:550;margin-bottom:12px}#test-output{font:13px/1.8 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto;background:var(--surface-2);padding:16px;border-radius:8px}#test-images img{display:block;width:100%;max-height:440px;object-fit:contain;border:1px solid var(--line);border-radius:8px;margin:12px 0}#test-metrics{white-space:pre-line;margin:12px 0}#test-models{display:none}

.test-model-catalog{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:-2px 0 18px}.test-model-catalog .hint{margin:0}.test-model-catalog button{white-space:nowrap;flex-shrink:0}

.fingerprint-summary{background:var(--light);border:1px solid var(--line);padding:16px;border-radius:8px;font-size:13px;overflow-wrap:anywhere}.fingerprint-summary p{font-size:12px;line-height:1.7;margin:9px 0}.fingerprint-ranking{list-style:none;padding:0}.fingerprint-ranking li{display:grid;grid-template-columns:minmax(0,1fr) 100px 52px;gap:12px;align-items:center;font-size:12px;padding:8px 0}.fingerprint-ranking span{overflow-wrap:anywhere}.fingerprint-ranking meter{width:100%}.fingerprint-ranking b{text-align:right}.fingerprint-probes{padding-left:20px;font-size:12px;line-height:2}.fingerprint-history{border-top:1px solid var(--line);margin-top:24px;padding-top:16px}.fingerprint-history h3{display:flex;justify-content:space-between;font-size:13px}.fingerprint-history-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:10px;margin-bottom:8px;font-size:12px;overflow-wrap:anywhere}.fingerprint-history-item small{grid-column:1/-1;color:var(--muted)}#fingerprint-panel details{font-size:12px;margin:16px 0;overflow-wrap:anywhere}@media(max-width:520px){.fingerprint-ranking li{grid-template-columns:minmax(0,1fr) 54px}.fingerprint-ranking meter{display:none}}

/* Feature surfaces use the same visual language as the main console. */




.account-tags { margin-left: 45px; }
.account-table .quota-window-stats>span { border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; }
.account-table .plan-tag { border-radius: 5px; }
.account-table .window-label { border-radius: 5px; }
.quota-window+.quota-window { margin-top: 14px; padding-top: 14px; }
.quota-help summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.fingerprint-summary { border-radius: 12px; padding: 20px; }
.fingerprint-ranking { display: grid; gap: 3px; margin: 18px 0; }
.fingerprint-ranking li { padding: 11px 12px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.fingerprint-ranking li:first-child { background: var(--surface-2); }
.fingerprint-ranking meter { height: 6px; appearance: none; background: var(--track); border-radius: 4px; border: 0; }
.fingerprint-ranking meter::-webkit-meter-bar { height: 6px; background: var(--track); border: 0; border-radius: 4px; }
.fingerprint-ranking meter::-webkit-meter-optimum-value { background: var(--green); border-radius: 4px; }
.fingerprint-ranking meter::-moz-meter-bar { background: var(--green); border-radius: 4px; }
.fingerprint-history-item { border-radius: 9px; padding: 13px; color: var(--ink); }
.fingerprint-history-item:hover { background: var(--surface-hover); border-color: var(--line-strong); }
#test-output { border: 1px solid var(--line); border-radius: 10px; }
.test-status { display: flex; align-items: center; gap: 8px; }
#fingerprint-panel details summary { cursor: pointer; }
@media (max-width: 1250px) {
  .account-table tr { border-radius: 12px; box-shadow: var(--panel-shadow); }
  
  
  .account-tags { margin-left: 0; }
}
@media (max-width: 650px) {
  
  .account-table .quota-window-stats { gap: 5px; }
}

/* Keep account controls compact; quota controls stay beside their data. */
.account-actions { display:flex; align-items:center; gap:3px; }
.account-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:38px; min-height:48px; padding:7px 5px; border-radius:9px; background:transparent; color:var(--muted); font-size:10px; }
.account-action .ui-icon { width:17px; height:17px; }
.account-action:hover,.account-action[aria-expanded=true] { background:var(--surface-hover); color:var(--ink); }
.account-action-test { color:var(--green); }
.account-action-test:hover { background:var(--light); color:var(--green); }
.account-action-menu { position:fixed; inset:auto; margin:0; width:224px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; padding:6px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--ink); box-shadow:0 12px 40px #00000026; }
.account-menu-heading { padding:9px 10px 12px; }
.account-menu-heading small { display:block; color:var(--muted); font-size:10px; margin-bottom:6px; }
.account-menu-heading strong { display:block; font-size:12px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu-group { padding:5px 0; border-top:1px solid var(--line); }
.account-menu-item { display:flex; width:100%; align-items:center; gap:11px; padding:10px; border-radius:7px; background:transparent; color:var(--ink); font-size:12px; text-align:left; }
.account-menu-item .ui-icon { width:17px; height:17px; color:var(--muted); }
.account-menu-item:hover,.account-menu-item:focus-visible { background:var(--surface-hover); outline-offset:-2px; }
.account-menu-item.menu-purple .ui-icon { color:var(--purple); }
.account-menu-item.menu-blue .ui-icon { color:var(--blue); }
.account-menu-item.danger,.account-menu-item.danger .ui-icon { color:var(--red); }
.account-menu-item.danger:hover { background:var(--red-bg); }
.quota-actions { margin-top:9px; }
.quota-refresh { display:inline-flex; align-items:center; gap:5px; padding:4px 6px; margin-left:-6px; border-radius:5px; background:transparent; color:var(--blue); font-size:10px; }
.quota-refresh .ui-icon { width:12px; height:12px; }
.quota-refresh:hover { background:var(--surface-hover); }
.quota-refresh:disabled .ui-icon { animation:quota-spin 1s linear infinite; }
@keyframes quota-spin { to { transform:rotate(360deg); } }
@media(max-width:1250px) {
 .account-table td:last-child::before { display:none; }
 .account-table td:last-child { padding:9px 12px; }
 .account-actions { justify-content:flex-end; gap:8px; }
 .account-action { flex-direction:row; min-height:36px; gap:7px; padding:8px 12px; font-size:11px; }
}
@media(max-width:650px) {
 .account-actions { justify-content:space-between; gap:4px; }
 .account-action { flex:1; min-height:40px; padding:8px; }
 .quota-refresh { min-height:32px; }
 .account-menu-item { min-height:44px; }
}

.detection-layout { display:grid; grid-template-columns:310px minmax(0,1fr); gap:22px; align-items:start; }
.detection-setup form { padding:0 22px 22px; }
.detection-setup .panel-head { padding:22px; }
.detection-select-heading { display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px; font-size:12px; }
.detection-accounts { max-height:330px; overflow:auto; border:1px solid var(--line); border-radius:9px; }
.detection-account { display:flex; align-items:center; gap:10px; padding:13px; margin:0; border-bottom:1px solid var(--line); cursor:pointer; }
.detection-account:last-child { border:0; }
.detection-account:hover { background:var(--surface-2); }
.detection-account input { accent-color:var(--green); }
.detection-account span { min-width:0; }
.detection-account b { display:block; overflow-wrap:anywhere; font-size:12px; font-weight:550; }
.detection-account small { display:block; margin-top:5px; font-size:10px; }
.detection-setup .primary { width:100%; }
.detection-note { margin:0; padding:0 24px 18px; border-bottom:1px solid var(--line); }
#detection-jobs { padding:18px; display:grid; gap:14px; }
.detection-job { padding:19px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.detection-job-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.detection-job h3 { margin:0 0 7px; font-size:13px; overflow-wrap:anywhere; }
.detection-job-head small { font-size:11px; color:var(--muted); }
.probe-steps { display:flex; gap:8px; margin:20px 0 14px; }
.probe-steps>span { flex:1; border-top:3px solid var(--line-strong); padding:9px 0 0; color:var(--muted); font-size:11px; }
.probe-steps small { margin-left:7px; }
.probe-steps .complete { border-color:var(--green); color:var(--green); }
.probe-steps .invalid { border-color:var(--red); color:var(--red); }
.probe-steps .current { border-color:var(--blue); color:var(--blue); }
.detection-job-message { font-size:12px; line-height:1.8; overflow-wrap:anywhere; }
.detection-prediction { font-size:14px; font-weight:600; color:var(--green); }
.detection-job-foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:12px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.detection-job-foot>div { display:flex; gap:14px; }
@media(max-width:1100px) { .detection-layout { grid-template-columns:minmax(0,1fr); } .detection-accounts { max-height:240px; } }
@media(max-width:520px) { .detection-job { padding:14px; } #detection-jobs { padding:10px; } .detection-results .panel-head { flex-wrap:wrap; } .detection-job-head { align-items:flex-start; } .detection-job-head .badge { flex-shrink:0; } }
.detection-setup select[name=model] { width:100%; max-width:none; }
#pelican-jobs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:18px; }
.pelican-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.pelican-card h3 { font-size:12px; margin:0 0 6px; overflow-wrap:anywhere; }
.pelican-card small { color:var(--muted); font-size:10px; }
.pelican-canvas { aspect-ratio:16/10; display:grid; place-items:center; margin:16px 0; border:1px solid var(--line); border-radius:9px; background:white; overflow:hidden; }
.pelican-canvas img { width:100%; height:100%; object-fit:contain; }
.pelican-canvas p { color:#617281; font-size:12px; padding:20px; overflow-wrap:anywhere; }
.pelican-actions { display:flex; gap:14px; flex-wrap:wrap; }
.pelican-prompt { font-size:11px; line-height:1.8; margin-top:20px; color:var(--muted); }
.pelican-prompt summary { cursor:pointer; }
.pelican-source { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.8 ui-monospace,monospace; max-height:65vh; overflow:auto; }
@media(max-width:650px) { #pelican-jobs { grid-template-columns:minmax(0,1fr); padding:12px; } }
@media(max-height:720px) { aside { overflow-y:auto; } nav { gap:2px; } .nav-label { margin-top:22px; } }
.pelican-history { margin-top:24px; }
#pelican-history-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:0 24px 24px; }
.pelican-history-card .detection-job-head>div { min-width:0; }
.pelican-history-model { margin:10px 0 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.pelican-history-card .pelican-canvas .error { color:var(--red,#c43b43); }
.pelican-history-card .pelican-actions { flex-wrap:wrap; }
@media(max-width:650px){#pelican-history-list { padding:0 16px 16px; }}

.pelican-canvas iframe { width:100%; height:100%; border:0; background:white; }

.proxy-entry-tabs { display:flex; gap:8px; margin-bottom:20px; }
.proxy-entry-tabs [aria-pressed=true] { color:var(--green); border-color:var(--green); background:var(--light); }
#proxy-link-panel { padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); margin-bottom:20px; }
#proxy-link-panel textarea { min-height:88px; }

/* Give HTML artifacts a landscape viewport and room for their own controls. */
.pelican-layout { grid-template-columns:minmax(0,1fr); }
.pelican-layout .detection-setup { position:static; }
#pelican-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; }
#pelican-form .detection-accounts, #pelican-form .detection-select-heading, #pelican-form .pelican-prompt, #pelican-form>p, #pelican-form>button { grid-column:1/-1; }
#pelican-form .detection-accounts { max-height:200px; }
#modal:has(.pelican-canvas iframe) { width:min(1200px,96vw); max-width:96vw; }
@media(max-width:1050px){#pelican-history-list,#pelican-jobs { grid-template-columns:minmax(0,1fr); }}
@media(max-width:650px){#pelican-form { grid-template-columns:minmax(0,1fr); }}

.pelican-canvas { position:relative; }
.pelican-canvas iframe { position:absolute; top:0; left:0; width:100%; height:100%; transform:translateZ(0); }
.account-action-reauth { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, var(--line)); background: color-mix(in srgb, var(--red) 8%, transparent); }
.account-action-reauth:hover { background: color-mix(in srgb, var(--red) 14%, transparent); border-color: var(--red); }
.reauth-hero { display:flex; align-items:center; gap:13px; padding:15px; margin-bottom:18px; border:1px solid color-mix(in srgb, var(--red) 25%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--red) 6%, var(--surface-2)); }
.reauth-hero h3 { margin:0 0 4px; font-size:14px; overflow-wrap:anywhere; }
.reauth-hero p { margin:0; color:var(--muted); font-size:12px; }
.reauth-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:11px; color:var(--red); background:color-mix(in srgb, var(--red) 13%, transparent); }
.reauth-icon .ui-icon { width:20px; height:20px; }
.proxy-table { min-width:880px; }
.proxy-endpoint { max-width:260px; overflow-wrap:anywhere; white-space:normal; margin-top:8px; }
.proxy-members { min-width:210px; max-width:340px; }
.proxy-members-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; }
.proxy-members-head b { font-size:13px; }
.proxy-account-chips { display:flex; flex-wrap:wrap; gap:6px; }
.proxy-account-chip { display:inline-block; max-width:100%; overflow-wrap:anywhere; white-space:normal; padding:4px 8px; border:1px solid var(--line); background:var(--surface-2); border-radius:7px; font-size:12px; }
.proxy-account-chip.is-disabled { color:var(--muted); }
.proxy-members details { margin-top:8px; color:var(--muted); font-size:12px; }
.proxy-members details[open] summary { margin-bottom:8px; }
.proxy-transfer-source { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); margin-bottom:18px; overflow-wrap:anywhere; }
.proxy-transfer-source small { flex-basis:100%; color:var(--muted); }
.proxy-transfer-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:12px; margin:12px 0; }
.proxy-transfer-heading>span { margin-right:auto; color:var(--muted); }
.proxy-transfer-list { max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:18px; }
.proxy-transfer-account { display:flex; align-items:center; flex-direction:row; gap:12px; padding:10px; margin:0; border-radius:7px; cursor:pointer; }
.proxy-transfer-account:hover,.proxy-transfer-account:has(input:checked) { background:var(--light); }
.proxy-transfer-account input { width:16px; height:16px; flex:none; }
.proxy-transfer-account span { min-width:0; overflow-wrap:anywhere; }
.proxy-transfer-account b,.proxy-transfer-account small { display:block; }
.proxy-transfer-account small { color:var(--muted); margin-top:3px; }
.proxy-transfer-account[hidden] { display:none; }
.test-image-open { display:block; width:100%; padding:0 0 12px; background:transparent; border:0; cursor:zoom-in; }
.test-image-open:hover { background:var(--surface-2); }
.original-image-viewer { width:96vw; max-width:96vw; height:94vh; max-height:94vh; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); overflow:hidden; }
.original-image-viewer::backdrop { background:#000b; }
.original-image-viewer[open] { display:flex; flex-direction:column; }
.original-image-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.original-image-toolbar small { font-size:12px; font-weight:400; color:var(--muted); }
.original-image-canvas { flex:1; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center; padding:12px; background:var(--surface-2); }
.original-image-canvas img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.original-image-viewer.actual-size .original-image-canvas { display:block; }
.original-image-viewer.actual-size img { width:auto; height:auto; max-width:none; max-height:none; margin:auto; }
#pelican-history-error,#pelican-sync-error { padding:0 24px; }
.pelican-quality-toolbar { flex-wrap:wrap; align-items:center; }
.pelican-quality-toolbar label { display:flex; flex-direction:row; align-items:center; gap:10px; margin:0; }
.pelican-quality-toolbar select { width:auto; max-width:100%; }
.pelican-quality-toolbar .hint { flex-basis:100%; margin:0; }
.work-quality-row { margin:10px 0 4px; }
.work-quality-info { padding:14px; margin:12px 0; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); overflow-wrap:anywhere; }
.work-quality-info .hint:last-child { margin-bottom:0; }
@media(max-width:650px){
 .proxy-table,.proxy-table tbody,.proxy-table tr,.proxy-table td { display:block; min-width:0; width:100%; }
 .proxy-table thead { display:none; }
 .proxy-table tr { padding:14px 0; border-bottom:1px solid var(--line); }
 .proxy-table td { border:0; padding:8px 16px; white-space:normal; }
 .proxy-table td::before { content:attr(data-label); display:block; color:var(--muted); font-size:11px; margin-bottom:6px; }
 .proxy-members,.proxy-endpoint { min-width:0; max-width:100%; }
}

/* Console visual system — restrained light, luminous midnight. */
:root {
 --bg:#f0f4f9; --surface:#fff; --surface-2:#f6f8fc; --surface-hover:#edf3fa;
 --ink:#17263c; --muted:#65758c; --line:#e1e8f2; --line-strong:#ced9e8;
 --green:#087e97; --green-hover:#066a82; --light:#e9f6fa; --chart:#179bb7; --focus:#008aa8;
 --blue:#3e7edb; --header-bg:#f0f4f9dc; --brand-bg:#e9f6fa;
 --panel-shadow:0 5px 22px #20385805,0 1px 3px #20385804;
 --accent-glow:#1fadd51a; --hero-bg:linear-gradient(118deg,#11243c,#102f44 64%,#124859);
 --sidebar-bg:#ffffffdb;
}
:root[data-theme="dark"] {
 --bg:#080f1c; --surface:#111d2e; --surface-2:#142235; --surface-hover:#1b2c43;
 --ink:#e4ecf7; --muted:#91a3bc; --line:#233249; --line-strong:#35475f;
 --green:#5cd8eb; --green-hover:#8ce8f6; --on-accent:#082334; --light:#16303f;
 --purple:#baa9f5; --purple-bg:#27243e; --purple-line:#3c345a;
 --chart:#53c8ed; --blue:#83b4ff; --track:#243750; --focus:#5cd8eb;
 --header-bg:#080f1cde; --brand-bg:#16303f; --accent-glow:#2dbbe41a;
 --panel-shadow:0 10px 30px #00000012,0 1px 0 #ffffff03 inset;
 --hero-bg:linear-gradient(118deg,#13223b,#102c40 64%,#123b4b); --sidebar-bg:#0d1729ed;
}
body { background-image:radial-gradient(ellipse at 85% 0%,var(--accent-glow),transparent 55%); background-attachment:fixed; }
aside { background:var(--sidebar-bg); padding-top:32px; backdrop-filter:blur(18px); }
.brand .mark { box-shadow:0 0 22px var(--accent-glow); }
.brand small { font-size:8px; letter-spacing:2px; }
.nav-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; }
nav { gap:8px; }
nav a { border:1px solid transparent; transition:background .18s,color .18s,border-color .18s; }
nav a.active { background:linear-gradient(105deg,var(--light),color-mix(in srgb,var(--light) 35%,transparent)); border-color:color-mix(in srgb,var(--green) 18%,var(--line)); box-shadow:0 3px 16px var(--accent-glow); }
nav a.active::after { box-shadow:0 0 9px var(--green); }
.connection { border-style:dashed; background:transparent; }
header { background:var(--header-bg); backdrop-filter:blur(16px); height:72px; }
main { padding-top:30px; }
.section-kicker { display:block; margin-bottom:9px; font-size:9px; font-weight:650; line-height:1.5; letter-spacing:2px; color:var(--muted); }
.page-title h1 { font-size:29px; font-weight:700; letter-spacing:-1px; }
.page-title p { font-size:12px; }
.primary { background:linear-gradient(115deg,var(--green),color-mix(in srgb,var(--green) 75%,var(--blue))); box-shadow:0 4px 14px var(--accent-glow),inset 0 1px #ffffff20; }
.primary:hover { box-shadow:0 5px 20px var(--accent-glow); filter:brightness(1.06); }
.primary,.secondary,.account-action,.icon-btn { transition:background .18s,box-shadow .18s,transform .18s,border-color .18s; }
.primary:active,.secondary:active,.account-action:active { transform:translateY(1px); }
.panel { border-radius:17px; }
.panel-head { padding:22px 24px; }
.panel-head h2 { font-size:15px; }
.panel-head .section-kicker { margin-bottom:6px; font-size:8px; }
.toolbar { background:color-mix(in srgb,var(--surface-2) 60%,transparent); }
input,textarea,select { transition:border-color .18s,box-shadow .18s; }
input:focus,textarea:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--accent-glow); }
.badge { border:1px solid color-mix(in srgb,currentColor 12%,transparent); border-radius:6px; }
thead { background:var(--surface-2); }
th { letter-spacing:.3px; }
tbody tr { transition:background .18s; }
.item-icon { background:linear-gradient(135deg,var(--light),var(--surface-2)); border:1px solid color-mix(in srgb,var(--green) 14%,var(--line)); color:var(--green); border-radius:11px; }
.mono,.stat-value,.pool-stat strong,.availability,.quota-line { font-variant-numeric:tabular-nums; }
dialog { border-radius:20px; box-shadow:0 24px 100px #0005; }
dialog::backdrop { backdrop-filter:blur(5px); }
.modal-heading { background:var(--surface-2); }
.theme-switch { border-radius:12px; }
.theme-switch button[aria-pressed=true] { box-shadow:0 2px 9px var(--accent-glow); }

.overview-hero { display:flex; justify-content:space-between; align-items:center; gap:16px; position:relative; overflow:hidden; background:var(--hero-bg); color:#eaf4ff; border:1px solid #8ad9ff26; border-radius:22px; padding:30px 36px; margin-bottom:30px; box-shadow:0 12px 35px #08223c13; }
.overview-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(#9edaff06 1px,transparent 1px),linear-gradient(90deg,#9edaff06 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(90deg,transparent,#000); }
.hero-copy { position:relative; z-index:1; }
.hero-copy .section-kicker { color:#91c5d9; font-size:9px; margin-bottom:15px; }
.hero-copy .section-kicker i { display:inline-block; width:5px; height:5px; background:#6de4eb; border-radius:50%; margin:0 8px 2px 0; box-shadow:0 0 10px #6de4eb; }
.hero-copy h1 { font-size:34px; font-weight:650; line-height:1.45; letter-spacing:-.8px; margin:0; }
.hero-copy h1 span { color:#a1eaf2; }
.hero-copy p { color:#a2bacf; font-size:12px; line-height:1.8; margin:12px 0 21px; }
.hero-actions { display:flex; gap:20px; align-items:center; }
.hero-actions .primary { color:#082637; background:linear-gradient(110deg,#77e3e9,#74c8f5); border-color:#a7f1f44d; }
.hero-actions .ui-icon { width:16px; height:16px; margin-left:8px; }
.hero-link { font-size:11px; color:#c3d6e7; }
.hero-link:hover { color:white; }
.hero-status { display:flex; flex-wrap:wrap; gap:18px; color:#99b4cb; font-size:10px; margin-top:24px; }
.hero-status span+span { padding-left:17px; border-left:1px solid #7dacc930; }
.hero-status .live-dot { background:#6de4cf; }
.gateway-orbit { width:360px; height:248px; position:relative; flex-shrink:0; }
.gateway-orbit>svg { width:100%; height:100%; stroke:#6ecfef38; stroke-width:1; }
.gateway-orbit>svg circle { fill:#91e6f3; stroke:none; }
.orbit-core { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); border:1px solid #6ac9e64d; padding:14px; border-radius:28px; background:#163e51a8; box-shadow:0 0 55px #42c1e926,0 0 0 14px #67c4df06; }
.orbit-core img { display:block; border-radius:16px; }
.orbit-tag { display:flex; align-items:center; gap:8px; position:absolute; padding:10px 13px; border:1px solid #7bd1e931; border-radius:9px; font:9px ui-monospace,monospace; letter-spacing:1px; color:#a6d9e8; background:#123044; box-shadow:0 8px 20px #0001; }
.orbit-tag .ui-icon { width:14px; height:14px; }
.orbit-device { left:12px; top:50px; }
.orbit-model { right:0; bottom:46px; }
.orbit-caption { position:absolute; bottom:1px; width:100%; text-align:center; font:8px ui-monospace,monospace; letter-spacing:3px; color:#75a7bb; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin:0 0 16px; gap:14px; }
.section-heading .section-kicker { margin-bottom:5px; font-size:8px; }
.section-heading h2 { margin:0; font-size:17px; font-weight:650; }
.stats-grid { gap:16px; }
.stat { border-radius:15px; padding:21px 22px; background:linear-gradient(130deg,var(--surface),var(--surface-2)); }
.stat::before { content:''; position:absolute; left:22px; top:0; width:30px; height:2px; background:var(--green); opacity:.65; }
.stat:nth-child(2)::before { background:var(--purple); }.stat:nth-child(3)::before { background:var(--blue); }.stat:nth-child(4)::before { background:var(--amber); }
.stat-value { font-family:var(--font); font-size:35px; font-weight:650; margin:12px 0; letter-spacing:-1.4px; }
.stat-index { position:absolute; right:20px; bottom:17px; color:var(--line-strong); font:10px ui-monospace,monospace; }
.stat-foot { padding-right:15px; line-height:1.6; }
.overview-mid { grid-template-columns:minmax(0,1fr) 275px; gap:20px; }
.chart-legend { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:10px; }
.chart-legend i { width:16px; height:2px; border-radius:2px; background:var(--green); }
.traffic-chart { height:190px; display:flex; padding:0 24px 0 16px; gap:12px; }
.chart-scale { display:flex; flex-direction:column; justify-content:space-between; padding:25px 0 15px; min-width:26px; text-align:right; color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }
.traffic-plot { flex:1; min-width:0; position:relative; background:repeating-linear-gradient(to top,transparent 0,transparent 45px,var(--line) 46px,transparent 47px); color:var(--green); }
.traffic-plot>svg { width:100%; height:100%; overflow:visible; }
.traffic-hitareas { display:flex; position:absolute; inset:0; }
.traffic-hour { flex:1; position:relative; border-radius:4px; }
.traffic-hour:hover,.traffic-hour:focus-visible { background:var(--accent-glow); }
.traffic-hour .chart-tip { bottom:auto; top:5px; color:var(--ink); background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--line); }
.traffic-hour:hover .chart-tip,.traffic-hour:focus-visible .chart-tip { display:block; }
.traffic-hour:nth-child(-n+5) .chart-tip { left:0; transform:none; }.traffic-hour:nth-last-child(-n+5) .chart-tip { left:auto; right:0; transform:none; }
.trend-panel .chart-labels { padding:10px 24px 22px 54px; }
.health-panel { padding:24px; background:linear-gradient(145deg,var(--surface),var(--light)); }
.health-heading { display:flex; align-items:center; justify-content:space-between; }
.health-heading .ui-icon { width:17px; color:var(--green); }
.health-heading .section-kicker { font-size:8px; }
.health-panel h2 { margin:6px 0 22px; font-size:14px; color:var(--ink); }
.availability { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.availability strong { font-size:44px; font-weight:600; line-height:1; letter-spacing:-1.5px; }
.availability>span { font-size:14px; color:var(--muted); }
.availability small { display:block; margin-top:6px; font-size:10px; }
.availability-meter { display:block; width:100%; height:6px; appearance:none; background:var(--track); border:0; border-radius:5px; margin:0 0 16px; }
.availability-meter::-webkit-meter-bar { background:var(--track); border:0; height:6px; }
.availability-meter::-webkit-meter-optimum-value { background:linear-gradient(90deg,var(--green),var(--blue)); border-radius:5px; }
.availability-meter::-moz-meter-bar { background:var(--green); }
.health-row { padding:8px 0; font-size:11px; border:none; }
.health-link { display:flex; justify-content:space-between; margin-top:16px; padding-top:15px; border-top:1px solid var(--line); color:var(--green); font-size:11px; }

.account-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.pool-stat { display:flex; align-items:center; gap:14px; padding:19px 22px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(125deg,var(--surface),var(--surface-2)); }
.pool-stat-icon { display:grid; place-items:center; height:38px; width:38px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); border-radius:12px; flex:none; }
.pool-stat.good .pool-stat-icon { color:var(--green); background:var(--light); }.pool-stat.attention .pool-stat-icon { color:var(--amber); background:var(--amber-bg); }
.pool-stat>div { display:flex; flex-direction:column; gap:5px; }.pool-stat>div>span { font-size:10px; color:var(--muted); }.pool-stat strong { font-size:25px; line-height:1.2; font-weight:620; }
.account-table tbody tr:nth-child(even) { background:color-mix(in srgb,var(--surface-2) 45%,var(--surface)); }
.account-table tbody tr:hover { background:var(--surface-hover); }
.account-table .account-identity .name-cell>div { font-size:12px; line-height:1.6; }
.account-tags { margin-top:10px; }
.account-table .quota-meter::-webkit-meter-optimum-value { background:linear-gradient(90deg,var(--green),color-mix(in srgb,var(--green) 50%,var(--blue))); }
.account-table .quota-meter.warn::-webkit-meter-optimum-value { background:var(--amber); }.account-table .quota-meter.critical::-webkit-meter-optimum-value { background:var(--red); }
.quota-window-stats>span { font-variant-numeric:tabular-nums; }
.account-action-test { box-shadow:0 2px 10px var(--accent-glow); }

.pelican-history { background:transparent; box-shadow:none; border:0; overflow:visible; }
.pelican-history>.panel-head { padding:12px 0 20px; }
.pelican-history>.toolbar { border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.pelican-history>.pelican-prompt { padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); margin-top:12px; }
#pelican-history-list { padding:0; gap:22px; align-items:start; }
.pelican-history-card { background:var(--surface); padding:0 0 17px; border-radius:17px; box-shadow:var(--panel-shadow); overflow:hidden; transition:border-color .18s,box-shadow .18s; }
.pelican-history-card:hover { border-color:color-mix(in srgb,var(--green) 35%,var(--line)); box-shadow:0 8px 28px var(--accent-glow); }
.gallery-preview { position:relative; padding:10px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.pelican-history-card .pelican-canvas { margin:0; border-radius:10px; }
.gallery-preview .work-quality-row { position:absolute; top:19px; right:19px; z-index:1; margin:0; pointer-events:none; }
.gallery-preview .badge { background:var(--surface); box-shadow:0 3px 14px #00000012; backdrop-filter:blur(8px); }
.pelican-history-card>.detection-job-head { padding:17px 18px 0; align-items:flex-start; }
.pelican-history-card h3 { font-size:12px; line-height:1.65; margin-bottom:4px; }
.gallery-complete { flex:none; font-size:10px; color:var(--muted); padding-top:4px; }
.pelican-history-model { display:flex; justify-content:space-between; gap:12px; padding:0 18px; margin-top:12px; font-size:10px; }
.pelican-history-model>span:first-child { font-family:ui-monospace,monospace; color:var(--green); background:var(--light); border-radius:5px; padding:4px 7px; }
.pelican-history-model>span:last-child { padding:4px 0; }
.gallery-review { padding:0 18px; margin:14px 0; color:var(--muted); font-size:11px; }
.gallery-review summary { cursor:pointer; }.gallery-review p { line-height:1.85; overflow-wrap:anywhere; padding:10px 12px; border-radius:8px; background:var(--surface-2); }
.pelican-history-card .pelican-actions { margin:15px 18px 0; padding-top:13px; border-top:1px solid var(--line); justify-content:flex-end; gap:14px; }
.pelican-history-card .pelican-actions .text-btn { font-size:10px; }
#pelican-history-pagination { padding-left:0; padding-right:0; }
.login-brand { background:var(--hero-bg); color:#e4f0fa; }
.login-brand .eyebrow,.login-brand p,.login-brand>small { color:#9bbacf; }
.login-art { color:#8adfee; }
@media(min-width:1600px) { .overview-hero { padding:36px 42px; }.gateway-orbit { margin-right:45px; }.hero-copy h1 { font-size:39px; } }
@media(max-width:1100px) { .gateway-orbit { width:275px; }.overview-hero { padding:26px; }.hero-copy h1 { font-size:29px; }.pool-stat { padding:16px 14px; gap:10px; } }
@media(max-width:800px) {
 .overview-hero { padding:25px; }.gateway-orbit { display:none; }.hero-copy h1 { font-size:30px; }
 .overview-mid { grid-template-columns:minmax(0,1fr); }.health-panel { display:block; }
 .account-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.pool-stat strong { font-size:24px; }
 header { height:68px; }.stats-grid { gap:12px; }
 .hero-status { gap:10px; }.hero-status span+span { padding-left:10px; }
}
@media(max-width:520px) {
 header { height:64px; }.overview-hero { border-radius:16px; padding:22px 18px; margin-bottom:24px; }.hero-copy h1 { font-size:27px; }
 .hero-actions { gap:14px; flex-wrap:wrap; }.hero-actions .primary { font-size:11px; }.hero-status { font-size:9px; gap:9px; }.hero-status span+span { border:0; padding:0; }
 .section-heading { align-items:flex-start; flex-direction:column; gap:8px; }.section-heading .subtle { font-size:10px; }
 .stat { padding:16px 12px; }.stat-value { font-size:28px; }.stat-index { display:none; }.stat::before { left:12px; }.stat-foot { padding:0; }
 .pool-stat { padding:14px 10px; gap:9px; }.pool-stat-icon { width:29px; height:29px; border-radius:9px; }.pool-stat-icon .ui-icon { width:16px; height:16px; }
 .page-title h1 { font-size:25px; }.page-title .actions { flex-wrap:wrap; }.page-title .actions .secondary,.page-title .actions .primary { font-size:11px; padding:9px 11px; }
 .traffic-chart { padding-right:16px; padding-left:10px; }.trend-panel .chart-labels { padding-left:46px; padding-right:16px; }
 .pelican-history>.panel-head { gap:10px; }.pelican-history>.panel-head .secondary { padding:8px 10px; }
 #pelican-history-list { padding:0; }.pelican-history-card>.detection-job-head { padding:14px 12px 0; }.pelican-history-model,.gallery-review { padding-left:12px; padding-right:12px; }.pelican-history-card .pelican-actions { margin-left:12px; margin-right:12px; gap:12px; }
 .gallery-preview { padding:7px; }.gallery-preview .work-quality-row { top:13px; right:13px; }.gallery-preview .badge { font-size:9px; }
}

/* Workspace-wide layouts, tools and inspectors. */
.resource-summary .pool-stat:nth-child(2) .pool-stat-icon { color:var(--green); background:var(--light); }
.resource-summary .pool-stat:nth-child(3) .pool-stat-icon { color:var(--purple); background:var(--purple-bg); }
.resource-summary .pool-stat:nth-child(4) .pool-stat-icon { color:var(--blue); }
.proxy-table .name-cell,.key-table .name-cell { font-weight:600; }
.proxy-table td,.key-table td { padding-top:22px; padding-bottom:22px; }
.proxy-table td { vertical-align:top; }
.proxy-endpoint { font-family:ui-monospace,monospace; font-size:10px; padding:7px 10px; border:1px solid var(--line); background:var(--surface-2); border-radius:7px; }
.proxy-members-head b { font-weight:600; color:var(--ink); }
.proxy-account-chip { font-size:10px; padding:5px 8px; background:linear-gradient(120deg,var(--surface-2),var(--surface)); }
.proxy-members details summary { font-size:10px; cursor:pointer; }
.resource-panel .row-actions { gap:6px; flex-wrap:wrap; }
.resource-panel .row-actions .text-btn { padding:5px 8px; border:1px solid var(--line); background:var(--surface-2); font-size:10px; border-radius:7px; white-space:nowrap; }
.resource-panel .row-actions .text-btn:hover { background:var(--light); text-decoration:none; border-color:var(--green); }
.resource-panel .row-actions .danger:hover { background:var(--red-bg); border-color:var(--red); }
.key-table td:first-child .cell-sub { font:10px ui-monospace,monospace; letter-spacing:.6px; margin-top:9px; color:var(--green); }
.key-table .name-cell>div { overflow-wrap:anywhere; }
.key-table td { white-space:normal; }
.request-summary { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr; align-items:center; gap:20px; padding:24px; background:linear-gradient(120deg,var(--surface-2),var(--surface),var(--light)); border-bottom:1px solid var(--line); }
.request-summary>div+div { border-left:1px solid var(--line); padding-left:24px; }
.request-summary strong { font-size:29px; font-weight:620; font-variant-numeric:tabular-nums; letter-spacing:-.8px; margin-right:9px; }
.request-summary>div>span:not(.section-kicker) { display:block; font-size:10px; color:var(--muted); margin-bottom:9px; }
.request-summary b { display:block; font:600 20px var(--font); font-variant-numeric:tabular-nums; }
.request-summary small { font-size:10px; color:var(--muted); font-weight:400; }.request-summary>div:last-child>small { display:block; margin-top:5px; }
#filters { align-items:flex-end; gap:16px; }
#filters .filter-group { display:flex; flex:1; flex-wrap:wrap; gap:10px; }
#filters .search { flex:1 1 240px; }
#filters select { flex:1 1 130px; min-width:100px; max-width:220px; }
#filters input[type=datetime-local] { flex:1 1 190px; }
#filters .secondary { background:var(--light); color:var(--green); border-color:color-mix(in srgb,var(--green) 20%,var(--line)); }
.request-table thead th { font-size:10px; font-weight:500; }
.request-table .mono { color:var(--ink); }
.request-table td:first-child .text-btn { color:var(--green); background:var(--light); padding:3px 7px; border-radius:5px; }
.request-detail-hero { border:1px solid var(--line); border-radius:13px; background:linear-gradient(120deg,var(--surface-2),var(--light)); padding:20px; margin-bottom:22px; }
.request-detail-hero>div:not(.request-detail-metrics) { display:flex; align-items:center; justify-content:space-between; gap:12px; }.request-detail-hero b { overflow-wrap:anywhere; }
.request-detail-hero>p { font-size:11px; color:var(--muted); margin:10px 0 20px; overflow-wrap:anywhere; }
.request-detail-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-top:1px solid var(--line); padding-top:14px; }
.request-detail-metrics span { color:var(--muted); font-size:10px; }.request-detail-metrics b { display:block; color:var(--ink); font:600 16px var(--font); margin-top:6px; font-variant-numeric:tabular-nums; }
.settings-grid { grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr); }
.settings-security .panel-head { padding-bottom:12px; }
.settings-intro { margin:0 24px 22px; padding:18px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(115deg,var(--light),var(--surface-2)); }
.settings-intro b { font-size:13px; font-weight:600; }.settings-intro p { font-size:11px; color:var(--muted); line-height:1.8; margin:8px 0 0; }
.settings-form .primary { width:100%; justify-content:space-between; }
.audit-timeline { list-style:none; padding:0 24px 24px; margin:0; max-height:650px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.audit-timeline li { position:relative; display:flex; gap:14px; padding:13px 0; }
.audit-timeline li:not(:last-child)::after { content:''; position:absolute; left:16px; top:45px; bottom:-14px; width:1px; background:var(--line); }
.audit-node { display:grid; place-items:center; width:33px; height:33px; border:1px solid var(--line); border-radius:10px; color:var(--green); background:var(--surface-2); flex:none; }
.audit-node .ui-icon { width:15px; height:15px; }
.audit-timeline li>div { min-width:0; flex:1; border-bottom:1px solid var(--line); padding:2px 0 13px; }
.audit-timeline b { font:500 11px ui-monospace,monospace; color:var(--ink); }.audit-timeline p { font-size:11px; line-height:1.6; overflow-wrap:anywhere; color:var(--muted); margin:6px 0; }.audit-timeline time { font-size:9px; color:var(--muted); font-variant-numeric:tabular-nums; }
.detection-setup { background:linear-gradient(150deg,var(--surface),var(--surface-2)); }
.detection-setup .panel-head { border-bottom:1px solid var(--line); margin-bottom:20px; }
.detection-select-heading { padding-top:16px; border-top:1px solid var(--line); }
.detection-accounts { border-radius:11px; border:1px solid var(--line); background:var(--surface); scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.detection-account { border:1px solid transparent; border-radius:8px; transition:background .18s,border-color .18s; }
.detection-account:has(input:checked) { border-color:color-mix(in srgb,var(--green) 20%,var(--line)); background:var(--light); }
.detection-account input { accent-color:var(--green); }
.detection-results .panel-head { border-bottom:1px solid var(--line); }
.detection-results .detection-note { background:var(--surface-2); margin:0; padding:14px 22px; }
.detection-empty { min-height:340px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.lab-symbol { position:relative; display:flex; gap:14px; margin:0 0 26px; }.lab-symbol::before { content:''; height:1px; position:absolute; top:24px; left:0; right:0; background:var(--line-strong); }
.lab-symbol span { position:relative; display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--line-strong); border-radius:15px; font:12px ui-monospace,monospace; background:var(--surface-2); color:var(--muted); }.lab-symbol span:nth-child(2) { color:var(--green); background:var(--light); border-color:color-mix(in srgb,var(--green) 35%,var(--line)); box-shadow:0 0 25px var(--accent-glow); }
.detection-job { background:linear-gradient(140deg,var(--surface-2),var(--surface)); border-radius:14px; }
.probe-steps>span { border-radius:8px; padding:8px 12px; background:var(--surface); }.probe-steps .current { background:var(--light); border-color:var(--green); color:var(--green); box-shadow:0 0 12px var(--accent-glow); }
.form-intro { display:flex; align-items:center; gap:14px; background:linear-gradient(120deg,var(--light),var(--surface-2)); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:24px; }
.form-intro b { font-size:13px; font-weight:600; }.form-intro p { font-size:11px; color:var(--muted); line-height:1.7; margin:6px 0 0; }.form-intro .stat-icon { width:38px; height:38px; flex:none; }.form-intro .section-kicker { font-size:8px; margin-bottom:5px; }
.protocol-mark { display:grid; place-items:center; width:42px; height:42px; flex:none; background:var(--surface); color:var(--green); border:1px solid var(--line); border-radius:12px; font-size:22px; }
.modal-heading { background:linear-gradient(110deg,var(--surface-2),var(--surface)); border-top:2px solid color-mix(in srgb,var(--green) 40%,var(--line)); }
#modal-body input:not([type=checkbox]),#modal-body select,#modal-body textarea { background:var(--surface-2); }
#modal-body input:focus,#modal-body select:focus,#modal-body textarea:focus { background:var(--surface); }
.modal-actions { border-top:1px solid var(--line); padding-top:18px; }
.test-context { border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:linear-gradient(120deg,var(--light),var(--surface-2)); margin-bottom:22px; }.test-context p { margin:5px 0 0; overflow-wrap:anywhere; }.test-context .section-kicker { font-size:8px; }
.test-result { border:1px solid var(--line); border-radius:12px; padding:18px; background:var(--surface-2); }
.test-result #test-output { background:var(--surface); border:1px solid var(--line); }
.test-model-catalog { padding:10px 12px; border:1px dashed var(--line-strong); border-radius:9px; margin-bottom:18px; }
.proxy-entry-tabs { border:1px solid var(--line); background:var(--surface-2); padding:4px; border-radius:11px; gap:4px; }.proxy-entry-tabs button { flex:1; box-shadow:none; border:0; background:transparent; }.proxy-entry-tabs [aria-pressed=true] { background:var(--surface); box-shadow:var(--shadow); }
.proxy-transfer-source { background:linear-gradient(110deg,var(--light),var(--surface-2)); }.proxy-transfer-list { background:var(--surface-2); }.proxy-transfer-account { border:1px solid transparent; }.proxy-transfer-account:has(input:checked) { border-color:color-mix(in srgb,var(--green) 25%,var(--line)); }
.login-side { background:radial-gradient(ellipse at 90% 10%,var(--accent-glow),transparent 60%),var(--surface); }.login-card { padding:28px; max-width:412px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--panel-shadow); }.login-card h2 { font-size:28px; }
.login-brand::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(#9edaff08 1px,transparent 1px),linear-gradient(90deg,#9edaff08 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(transparent,#000); }.login-wordmark,.login-intro,.login-art { position:relative; }
.login-art i { border-color:#92c9dc40; }.login-art i:nth-child(3) { background:#347b9626; border-color:#92c9dc40; }.login-art b { box-shadow:0 0 50px #4cc8eb35; }
@media(max-width:1100px){.settings-grid { grid-template-columns:minmax(0,1fr); }.audit-timeline { max-height:550px; }}
@media(max-width:650px){
 .request-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; padding:18px 16px; }.request-summary>div+div { padding-left:12px; }.request-summary>div:nth-child(odd) { border-left:0; padding-left:0; }.request-summary strong { font-size:24px; }.request-summary b { font-size:18px; }.request-summary .section-kicker { font-size:7px; letter-spacing:1px; }
 #filters .search { flex-basis:100%; }#filters select { min-width:0; max-width:none; }#filters input[type=datetime-local] { min-width:0; }#filters>.secondary { width:100%; }
 .key-table,.key-table tbody,.key-table tr,.key-table td { display:block; width:100%; min-width:0; }.key-table thead { display:none; }.key-table tr { padding:8px 0; border-bottom:1px solid var(--line); }.key-table td { padding:9px 16px; border:0; }.key-table td::before { content:attr(data-label); display:block; font-size:10px; color:var(--muted); margin-bottom:7px; }.key-table td:nth-child(2),.key-table td:nth-child(4) { display:inline-block; width:48%; vertical-align:top; }.key-table .row-actions { gap:8px; }
 .settings-intro { margin:0 16px 20px; }.audit-timeline { padding:0 16px 16px; }.form-intro { padding:13px; gap:10px; }
 .request-detail-hero { padding:14px; }.request-detail-metrics { gap:7px; }.request-detail-metrics b { font-size:13px; }.test-context { padding:13px; }.test-result { padding:14px; }.login-card { padding:22px; }.login-side { padding-left:18px; padding-right:18px; }
 .detection-empty { min-height:280px; padding:35px 16px; }.probe-steps { flex-wrap:wrap; }
}
/* Keep date filters paired instead of stretching the last field across a row. */
#filters .filter-group { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
#filters .search { grid-column:span 2; width:100%; }
#filters select,#filters input[type=datetime-local] { width:100%; min-width:0; max-width:none; }
@media(max-width:800px){#filters .filter-group { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media(max-width:520px){#filters input[type=datetime-local] { grid-column:1/-1; }}

/* Keep history controls visible when navigating filtered results or pages. */
.pelican-quality-toolbar, #pelican-history-pagination { scroll-margin-top:16px; }

/* Six-work gallery: devote the viewport to the artwork, keep tools compact. */
.pelican-history { scroll-margin-top:16px; }
.pelican-history>.panel-head { padding:0; margin-bottom:12px; align-items:center; }
.pelican-history>.panel-head .section-kicker { display:none; }
.pelican-history>.panel-head h2 { margin:0; }
.pelican-history>.panel-head p { margin:5px 0 0; font-size:11px; }
.pelican-history>.pelican-quality-toolbar { padding:10px 12px; gap:12px; margin:0 0 12px; }
.pelican-quality-toolbar select { padding:7px 10px; font-size:11px; }
#pelican-history-pagination { flex:1; border:0; padding:0; gap:12px; }
#pelican-history-pagination .actions { gap:6px; }
#pelican-history-pagination .actions button { padding:7px 10px; }
#pelican-history-error:empty { display:none; }
.pelican-review-settings { position:relative; flex:none; font-size:11px; color:var(--muted); }
.pelican-review-settings>summary { cursor:pointer; padding:8px 0; }
.pelican-review-popover { position:absolute; top:calc(100% + 12px); left:0; z-index:5; width:min(360px,calc(100vw - 110px)); max-height:70dvh; overflow:auto; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 36px #00000024; }
.pelican-review-popover>.hint { display:block; line-height:1.7; margin:0 0 12px; }
.pelican-review-popover>button { margin-bottom:16px; }
#pelican-history-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }
.pelican-history-card { padding:0 0 8px; border-radius:12px; }
.pelican-history-card .gallery-preview { padding:6px; }
.pelican-history-card .gallery-preview .work-quality-row { top:12px; right:12px; }
.pelican-history-card .gallery-preview .badge { font-size:9px; padding:4px 7px; }
.pelican-history-card>.detection-job-head { padding:8px 10px 0; margin:0; }
.pelican-history-card h3 { font-size:11px; line-height:1.5; margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pelican-history-card small { display:block; font-size:10px; line-height:1.5; white-space:nowrap; }
.pelican-history-card .gallery-complete { display:none; }
.pelican-history-card .pelican-history-model { padding:0 10px; margin:5px 0 0; gap:6px; }
.pelican-history-card .pelican-history-model>span { padding:2px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pelican-history-card .pelican-actions { margin:6px 10px 0; padding-top:5px; gap:9px; flex-wrap:nowrap; justify-content:space-between; }
.pelican-history-card .pelican-actions .text-btn { font-size:10px; padding:3px 0; white-space:nowrap; }
@media(min-width:1000px) {
 .pelican-history { height:calc(100dvh - 32px); min-height:480px; display:flex; flex-direction:column; }
 .pelican-history>.panel-head,.pelican-history>.toolbar,#pelican-history-error { flex:none; }
 #pelican-history-list { flex:1; min-height:0; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
 .pelican-history-card { min-height:0; display:flex; flex-direction:column; }
 .pelican-history-card .gallery-preview { flex:1; min-height:0; display:flex; }
 .pelican-history-card .pelican-canvas { width:100%; height:100%; min-height:0; aspect-ratio:auto; }
 .pelican-history-card>.detection-job-head,.pelican-history-card>.pelican-history-model,.pelican-history-card>.pelican-actions { flex:none; }
}
@media(max-width:650px) {
 #pelican-history-list { grid-template-columns:minmax(0,1fr); }
 .pelican-history>.pelican-quality-toolbar { gap:8px 12px; }
 #pelican-history-pagination { flex-basis:100%; flex-direction:row; flex-wrap:wrap; }
 #pelican-history-pagination .actions { width:auto; }
 .pelican-review-settings { margin-left:auto; }
 .pelican-review-popover { left:auto; right:0; }
}
/* Copy feedback lives inside the dialog's top layer, beside its action. */
#copy-login { min-width:94px; }
#copy-login.is-copied { color:var(--green); border-color:var(--green); background:var(--light); }
.copy-link-feedback { color:var(--green); font-size:11px; line-height:1.8; margin:10px 0 0; min-height:20px; }
.copy-link-feedback.error { color:var(--red); }

/* Current batch mirrors the gallery's three-column desktop comparison. */
#pelican-jobs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#pelican-jobs .pelican-card { padding:12px; }
#pelican-jobs .detection-job-head>div { min-width:0; }
#pelican-jobs h3 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#pelican-jobs .detection-job-head>.badge { flex:none; }
.pelican-job-quality { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 0; min-height:26px; }
.pelican-job-quality:empty { display:none; }
.pelican-job-quality .badge { font-size:10px; }
#pelican-jobs .pelican-canvas { margin:10px 0; }
#pelican-jobs .hint { font-size:11px; line-height:1.6; }
@media(min-width:1000px){#pelican-jobs { grid-template-columns:repeat(3,minmax(0,1fr)); }}
@media(max-width:650px){#pelican-jobs { grid-template-columns:minmax(0,1fr); }}
/* Longer manual-to-visual action labels must stay reachable on narrow cards. */
.pelican-history-card .pelican-actions { flex-wrap:wrap; row-gap:2px; }

/* Keep the fingerprint conclusion above sampling details in every view. */
.fingerprint-verdict,.fingerprint-verdict-badge { --verdict-color:var(--amber); --verdict-bg:var(--amber-bg); }
.fingerprint-verdict.match,.fingerprint-verdict-badge.match { --verdict-color:var(--green); --verdict-bg:var(--light); }
.fingerprint-verdict.differs,.fingerprint-verdict-badge.differs { --verdict-color:var(--red); --verdict-bg:var(--red-bg); }
.fingerprint-verdict { display:flex; gap:16px; margin:16px 0; padding:22px; border:1px solid color-mix(in srgb,var(--verdict-color) 42%,var(--line)); border-left:4px solid var(--verdict-color); border-radius:14px; background:linear-gradient(120deg,var(--verdict-bg),var(--surface)); }
.fingerprint-verdict-icon { flex-shrink:0; display:grid; place-items:center; width:44px; height:44px; border:1px solid color-mix(in srgb,var(--verdict-color) 35%,transparent); border-radius:12px; color:var(--verdict-color); background:var(--verdict-bg); font-size:28px; font-weight:700; }
.fingerprint-verdict-body { flex:1; min-width:0; }
.fingerprint-verdict-eyebrow { color:var(--muted); font-size:10px; letter-spacing:.08em; }
.fingerprint-verdict h3,.detection-job .fingerprint-verdict h3 { color:var(--verdict-color); font-size:clamp(20px,2vw,26px); font-weight:750; line-height:1.4; margin:5px 0 6px; }
.fingerprint-verdict p { margin:0; color:var(--ink); font-size:12px; line-height:1.7; }
.fingerprint-model-comparison { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 12px; padding-top:14px; border-top:1px solid color-mix(in srgb,var(--verdict-color) 20%,transparent); }
.fingerprint-model-comparison small { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }
.fingerprint-model-comparison strong { font-size:13px; color:var(--ink); overflow-wrap:anywhere; }
.fingerprint-verdict-caveat { display:block; color:var(--muted); font-size:11px; line-height:1.6; }
.fingerprint-verdict-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid color-mix(in srgb,var(--verdict-color) 30%,transparent); border-radius:7px; background:var(--verdict-bg); color:var(--verdict-color); font-size:12px; font-weight:650; }
.detection-verdict-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:18px 18px 0; }
.detection-verdict-totals[hidden] { display:none; }
.detection-verdict-totals>div { justify-content:space-between; padding:12px; }
.detection-verdict-totals strong { font-size:24px; font-variant-numeric:tabular-nums; }
@media(max-width:520px) {
 .fingerprint-verdict { gap:10px; padding:14px 12px; }
 .fingerprint-verdict-icon { width:30px; height:30px; font-size:21px; border-radius:8px; }
 .fingerprint-model-comparison { grid-template-columns:1fr; gap:10px; }
 .fingerprint-history-item { grid-template-columns:1fr; }
 .fingerprint-history-item .fingerprint-verdict-badge { justify-self:start; }
 .detection-verdict-totals { gap:6px; padding:12px 10px 0; }
 .detection-verdict-totals>div { flex-wrap:wrap; padding:8px; }
}

.fingerprint-verdict.incomplete,.fingerprint-verdict-badge.incomplete { --verdict-color:var(--muted); --verdict-bg:var(--surface-2); }
.detection-verdict-totals { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:520px) { .detection-verdict-totals { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.scheduling-switch { display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:5px 0; border:0; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }
.scheduling-switch i { position:relative; width:28px; height:16px; border-radius:20px; background:var(--line-strong); transition:background .15s; }
.scheduling-switch i::after { content:''; position:absolute; width:10px; height:10px; top:3px; left:3px; border-radius:50%; background:var(--surface); transition:transform .15s; }
.scheduling-switch.is-on { color:var(--green); }
.scheduling-switch.is-on i { background:var(--green); }
.scheduling-switch.is-on i::after { transform:translateX(12px); background:var(--on-accent); }

.reset-card-actions { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:5px; }
.reset-card-actions .reset-card-use { color:var(--orange); }
.reset-card-actions button:disabled { opacity:.45; cursor:not-allowed; }
.reset-card-expiry { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin-top:7px; color:var(--muted); font-size:10px; }
.reset-card-expiry>span,.reset-card-expiry summary { padding:3px 6px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line); }
.reset-card-expiry details small { display:block; padding:4px 6px; }
.reset-card-expiry summary { cursor:pointer; }
.reset-card-confirm h3 { margin:12px 0; overflow-wrap:anywhere; }
.reset-card-confirm p { line-height:1.8; overflow-wrap:anywhere; }

.account-sort-label { display:flex; flex-direction:row; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:12px; }
.account-sort-label select { width:auto; min-width:175px; padding:8px 10px; font-size:12px; }
.resource-panel .toolbar { flex-wrap:wrap; }
@media(max-width:520px) { .account-sort-label { width:100%; }.account-sort-label select { flex:1; min-width:0; } }