:root {
  color-scheme: light;
  --ink: #15223c;
  --muted: #73809a;
  --soft: #f4f6fb;
  --panel: #ffffff;
  --line: #e5e9f2;
  --accent: #6678f7;
  --accent-dark: #4f62e2;
  --cyan: #22b7c9;
  --green: #18a777;
  --orange: #e6993f;
  --red: #dc6674;
  --shadow: 0 18px 42px rgba(30, 47, 82, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
body { background: var(--soft); color: var(--ink); font-size: 14px; }
body.workspace-active { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 46%) 1fr; position: relative; overflow: hidden; background: #f4f7ff; }
.login-atmosphere { position: absolute; inset: 0 0 0 46%; background: #172b51; }
.login-atmosphere::before, .login-atmosphere::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.1); transform: rotate(23deg); border-radius: 28px; }
.login-atmosphere::before { width: 52vw; height: 52vw; right: -19vw; top: -13vw; }
.login-atmosphere::after { width: 34vw; height: 34vw; right: 8vw; bottom: -18vw; }
.login-panel { z-index: 1; width: min(480px, calc(100% - 64px)); justify-self: center; align-self: center; padding: 48px 0; }
.brand-lockup, .sidebar-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; }
.brand-lockup strong { display: block; letter-spacing: 0; font-size: 15px; }
.brand-lockup span { color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: uppercase; }
.login-copy { margin: 76px 0 38px; max-width: 390px; }
.eyebrow { margin: 0 0 13px; color: var(--accent); letter-spacing: 0; font-size: 11px; font-weight: 800; }
.login-copy h1 { margin: 0 0 14px; font-size: 44px; line-height: 1.08; letter-spacing: 0; }
.login-copy p:not(.eyebrow) { color: var(--muted); line-height: 1.8; margin: 0; }
.login-form { display: grid; gap: 18px; max-width: 370px; }
.login-form label, .field-label { display: grid; gap: 8px; color: #63708b; font-size: 12px; font-weight: 700; }
.login-form input, .field, .select-field { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.86); color: var(--ink); padding: 13px 14px; outline: none; transition: .2s ease; }
.login-form input:focus, .field:focus, .select-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102,120,247,.14); }
.password-field { position: relative; }
.password-field input { padding-right: 42px; }
.password-field .icon-button { position: absolute; top: 5px; right: 5px; }
.primary-button, .secondary-button, .danger-button, .ghost-button { border: 0; border-radius: 8px; padding: 11px 16px; font-weight: 750; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.primary-button { background: var(--accent); color: white; box-shadow: 0 8px 18px rgba(102,120,247,.2); }
.primary-button:hover { background: var(--accent-dark); transform: translateY(-1px); }
.secondary-button { background: #edf0ff; color: var(--accent-dark); }
.danger-button { color: #b44356; background: #fff0f1; }
.ghost-button { background: transparent; color: var(--muted); }
.full-button { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.button-arrow { font-size: 18px; }
.icon-button { width: 34px; height: 34px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; }
.icon-button:hover { color: var(--ink); background: var(--soft); }
.form-error { margin: 0; min-height: 18px; color: var(--red); font-size: 12px; }
.login-signal { z-index: 1; position: absolute; right: 34px; bottom: 28px; color: rgba(255,255,255,.78); font-size: 12px; letter-spacing: 0; }
.signal-dot, .status-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3de4a0; box-shadow: 0 0 0 4px rgba(61,228,160,.15); margin-right: 8px; }
.login-signal b { color: white; margin-left: 6px; }

.workspace { height: 100vh; min-height: 0; display: flex; overflow: hidden; }
.sidebar { width: 228px; height: 100vh; flex: 0 0 228px; overflow-y: auto; overscroll-behavior: contain; background: #111d36; color: #cad4e7; display: flex; flex-direction: column; padding: 24px 14px 18px; transition: width .2s ease, flex-basis .2s ease, padding .2s ease; }
.sidebar-brand { padding: 0 10px 34px; color: #fff; }
.sidebar-brand img { width: 34px; height: 34px; }
.sidebar-brand strong { display: block; font-size: 13px; letter-spacing: 0; }
.sidebar-brand small { display: block; font-size: 9px; letter-spacing: 0; color: #8694b5; margin-top: 4px; }
.primary-nav { display: grid; gap: 4px; }
.nav-caption { color: #7788ab; font-size: 10px; letter-spacing: 0; text-transform: uppercase; padding: 18px 12px 6px; margin: 0; }
.nav-section-toggle { width: 100%; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.nav-section-toggle:hover { color: #aebbd3; }
.nav-section-chevron { font-size: 14px; line-height: 1; transition: transform .16s ease; }
.nav-section-toggle.collapsed .nav-section-chevron { transform: rotate(-90deg); }
.nav-section-items { display: grid; gap: 4px; }
.nav-section-items.collapsed { display: none; }
.nav-item { border: 0; color: #aebbd3; background: transparent; display: flex; gap: 13px; align-items: center; padding: 12px; text-align: left; border-radius: 8px; font-weight: 650; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: #5265d9; box-shadow: 0 8px 20px rgba(38,54,103,.3); }
.nav-icon { width: 20px; height: 20px; display: grid; place-items: center; text-align: center; }
.nav-icon img { width: 19px; height: 19px; display: block; opacity: .68; transition: opacity .16s ease; }
.nav-item:hover .nav-icon img, .nav-item.active .nav-icon img { opacity: 1; }
.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding: 18px 10px 0; color: #98a8c6; font-size: 11px; }
.sidebar-version { float: right; color: #6d7d9e; }
.sidebar.collapsed { width: 72px; flex-basis: 72px; padding-left: 10px; padding-right: 10px; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sidebar-brand > div, .sidebar.collapsed .nav-item > span:last-child, .sidebar.collapsed .sidebar-footer > span:not(.status-led) { display: none; }
.sidebar.collapsed .nav-caption { height: 1px; margin: 14px 8px; padding: 0; overflow: hidden; color: transparent; background: rgba(255,255,255,.12); }
.sidebar.collapsed .nav-section-chevron { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .nav-icon { width: 24px; }
.sidebar.collapsed .sidebar-footer { display: flex; justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .status-led { margin-right: 0; }
.main-area { min-width: 0; min-height: 0; height: 100vh; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 66px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 30px; }
.menu-toggle { display: block; flex: 0 0 34px; }
.breadcrumb { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); }
.breadcrumb-slash { color: #c2c9d8; }
.shell-quick-nav { min-width: 0; height: 52px; flex: 1 1 auto; position: relative; display: grid; align-content: center; gap: 5px; padding: 4px 0 5px; }
.shell-quick-nav-row { min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.shell-quick-nav-context { flex: 0 0 auto; color: var(--ink); font-size: 12px; white-space: nowrap; }
.shell-quick-nav-items { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.shell-quick-nav-items button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; background: var(--panel); color: var(--muted); font-size: 11px; line-height: 1.2; letter-spacing: 0; cursor: pointer; }
.shell-quick-nav-items button:hover { border-color: #aeb8ef; color: var(--accent); }
.shell-quick-nav-items button.active { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.shell-scroll-track { position: relative; width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: #e4e7ef; cursor: pointer; touch-action: none; }
.shell-scroll-track:focus-visible { outline: 2px solid rgba(82,103,217,.35); outline-offset: 2px; }
.shell-scroll-track i { position: absolute; top: 1px; left: 0; height: 5px; min-width: 30px; border-radius: inherit; background: #8994b2; transform: translate3d(0,0,0); will-change: transform; }
.shell-scroll-track:hover i, .shell-scroll-track.dragging i { background: var(--accent); }
.topbar-actions { flex: 0 0 auto; display: flex; gap: 16px; align-items: center; }
.user-trigger { border: 0; background: transparent; display: flex; gap: 9px; align-items: center; color: var(--ink); font-weight: 700; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: white; background: var(--accent); font-size: 12px; }
.chevron { color: #a0a9b9; }
.user-menu { position: relative; }
.user-dropdown { position: absolute; right: 0; top: 42px; z-index: 10; min-width: 130px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; box-shadow: var(--shadow); }
.user-dropdown button { width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 9px; background: transparent; color: var(--ink); }
.user-dropdown button:hover { background: var(--soft); }
.page-content { width: 100%; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; padding: 28px 30px 42px; max-width: 1500px; margin: 0 auto; }
.page-content::-webkit-scrollbar { width: 0; height: 0; display: none; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.page-heading h1 { font-size: 27px; margin: 0 0 7px; letter-spacing: 0; }
.page-heading p { margin: 0; color: var(--muted); }
.heading-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.dashboard-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; }
.hero-card { min-height: 238px; background: #1d315b; color: white; border-radius: 8px; padding: 28px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.hero-card::after { content: none; }
.hero-card h2 { margin: 12px 0 10px; font-size: 34px; max-width: 440px; letter-spacing: 0; }
.hero-card p { max-width: 440px; line-height: 1.7; color: #c0cbe4; margin: 0; }
.hero-label { color: #97a9d3; text-transform: uppercase; font-size: 11px; letter-spacing: 0; font-weight: 800; }
.hero-card .hero-meta { display: flex; gap: 28px; margin-top: 25px; }
.hero-meta strong { display: block; font-size: 22px; }
.hero-meta span { color: #9eafd3; font-size: 11px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.stats-grid.compact { grid-template-columns: repeat(2, minmax(0, 260px)); margin: 18px 0; }
.stat-card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(36,53,88,.04); }
.stat-card { padding: 20px; min-height: 110px; }
.stat-card .stat-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.stat-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--accent); background: #eef0ff; font-size: 17px; }
.stat-card strong { display: block; margin-top: 13px; font-size: 26px; letter-spacing: 0; }
.stat-card small { color: var(--green); font-size: 11px; }
.panel { padding: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.panel-head h3 { font-size: 15px; margin: 0; }
.panel-head span { color: var(--muted); font-size: 12px; }
.panel-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: nowrap; }
.panel-head-actions .ranking-mine-control, .panel-head-actions .link-button { flex: 0 0 auto; }
.recent-list { display: grid; gap: 3px; }
.recent-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 13px; align-items: center; padding: 11px 0; border-bottom: 1px solid #edf0f5; }
.recent-row:last-child { border-bottom: 0; }
.mini-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #f0f2ff; color: var(--accent); font-weight: 800; }
.recent-row strong { display: block; font-size: 13px; }
.recent-row small { color: var(--muted); font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 800; background: #e9faf4; color: #168460; }
.status-pill.off { background: #fff2e8; color: #c47634; }
.empty-state { text-align: center; color: var(--muted); padding: 38px 16px; }
.empty-state strong { color: var(--ink); display: block; margin-bottom: 7px; }
.hourly-chart { height: 260px; display: grid; grid-template-columns: repeat(24, minmax(18px, 1fr)); gap: 4px; align-items: end; overflow-x: auto; padding: 18px 4px 0; border-top: 1px solid var(--line); }
.hour-column { height: 220px; min-width: 24px; display: grid; grid-template-rows: 1fr auto; gap: 7px; text-align: center; color: var(--muted); font-size: 9px; }
.hour-bars { min-height: 0; display: flex; align-items: end; justify-content: center; gap: 2px; }
.hour-bars i { width: 7px; min-height: 2px; border-radius: 3px 3px 0 0; }
.request-bar { background: var(--accent); }.jar-bar { background: var(--green); }
.download-bar, .error-bar { background: var(--orange); }
.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric-strip article { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.metric-strip small, .metric-strip strong { display: block; }
.metric-strip small { color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.metric-strip strong { font-size: 22px; }
.metric-icon { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 8px; background: #eef0ff; color: var(--accent); font-weight: 800; }
.stats-grid.compact.dashboard-metric-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-board { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr); gap: 16px; }
.dashboard-chart-panel { grid-row: span 2; min-width: 0; }
.dashboard-wide-panel { grid-column: 1 / -1; }
.distribution-list, .ranking-list { display: grid; gap: 12px; }
.distribution-row > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.distribution-row strong { font-size: 12px; }.distribution-row span { color: var(--muted); font-size: 10px; }
.distribution-link { width: 100%; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.distribution-link:hover strong { color: var(--accent-dark); }
.distribution-track { height: 6px; border-radius: 6px; background: #edf0f6; overflow: hidden; }
.distribution-track i { display: block; height: 100%; background: var(--cyan); }
.ranking-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ranking-row:last-child { border-bottom: 0; }.ranking-row b { color: var(--accent); }.ranking-row strong, .ranking-row span { display: block; }
.ranking-row strong { font-size: 12px; }.ranking-row span { color: var(--muted); font-size: 10px; margin-top: 3px; }.ranking-row em { font-style: normal; font-weight: 800; }
.ranking-button { width: 100%; border-width: 0 0 1px; border-radius: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ranking-button:hover { background: var(--soft); }.ranking-copy { min-width: 0; }.ranking-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-modal-toolbar { display: flex; align-items: center; justify-content: flex-end; margin: 0 auto 12px; max-width: 720px; }
.ranking-modal-list { max-width: 720px; margin: 0 auto; }.dashboard-link-panel { cursor: pointer; }.dashboard-link-panel:hover { border-color: #aeb8e8; }
.health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jar-status-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.jar-status-count { min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.jar-status-count small, .jar-status-count strong { display: block; }
.jar-status-count small { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.jar-status-count strong { font-size: 24px; }
.jar-status-count.enabled strong { color: var(--green); }
.jar-status-count.disabled strong { color: var(--orange); }
.jar-status-count.abnormal strong { color: var(--red); }
.health-item { display: grid; grid-template-columns: 9px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); padding: 12px; border-radius: 8px; }
.health-item > span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }.health-item.disabled > span { background: var(--orange); }.health-item.abnormal > span { background: var(--red); }
.health-item strong, .health-item small { display: block; }.health-item small { color: var(--muted); font-size: 9px; margin-top: 3px; }.health-item b { font-size: 10px; }
.health-item-button { width: 100%; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.health-item-button:hover { border-color: var(--accent); background: var(--soft); }
.health-item.ad-config-unconfigured > span { background: var(--red); }
.health-item.ad-config-incomplete > span { background: var(--orange); }
.health-item.ad-config-normal > span { background: var(--green); }
.service-status-strip { margin-bottom: 16px; padding: 14px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.service-status-strip > div { display: flex; align-items: center; gap: 9px; }.service-status-strip small { color: var(--muted); margin-left: auto; }.status-led.warning { background: var(--orange); box-shadow: 0 0 0 4px rgba(230,153,63,.15); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.service-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 8px; padding: 17px; }
.service-card.error { border-left-color: var(--red); }.service-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.service-endpoint { display: flex; gap: 5px; align-items: baseline; margin: 18px 0 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }.service-endpoint strong { font-size: 22px; }
.service-card p { min-height: 34px; margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }.service-card > small { color: var(--muted); }

.toolbar { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 17px; flex-wrap: wrap; }
.search-wrap { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: min(100%, 390px); }
.search-wrap .field { flex: 1 1 auto; min-width: 0; }
.search-wrap .primary-button { flex: 0 0 auto; min-width: 64px; white-space: nowrap; word-break: keep-all; writing-mode: horizontal-tb; }
.filter-row { display: flex; gap: 8px; min-width: min(100%, 420px); }
.filter-row .select-field { min-width: 180px; padding: 10px 12px; }
.service-log-filters { flex: 1 1 590px; min-width: min(100%, 590px); align-items: center; }
.service-log-filters .select-field { min-width: 135px; flex: 1 1 180px; }
.service-log-filters .secondary-button { flex: 0 0 auto; min-width: 64px; white-space: nowrap; }
.limit-control { min-width: 220px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.limit-control .field { width: 150px; padding: 10px 12px; }
.link-button { border: 0; padding: 0; background: transparent; color: var(--accent); cursor: pointer; font: inherit; text-align: left; }
.link-button:hover { text-decoration: underline; }
.data-panel { overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th { text-align: left; color: #8792a6; font-size: 11px; letter-spacing: 0; text-transform: uppercase; font-weight: 800; padding: 12px 15px; background: #fafbfe; border-bottom: 1px solid var(--line); }
td { padding: 15px; border-bottom: 1px solid #edf0f5; color: #43516c; vertical-align: middle; }
tbody tr:hover { background: #fbfcff; }
td strong { color: var(--ink); }
.code-text { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #5265df; font-size: 12px; }
.copy-text { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; padding: 0; background: transparent; color: #5265df; font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; text-align: left; cursor: copy; }
.copy-text:hover { text-decoration: underline; }
.truncate-text { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.muted { color: var(--muted); }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.table-button { border: 1px solid var(--line); color: #5b6880; border-radius: 7px; background: #fff; padding: 7px 9px; font-size: 11px; font-weight: 750; }
.table-button:hover { border-color: #b9c2ff; color: var(--accent-dark); background: #f6f7ff; }
.table-button.danger:hover { color: var(--red); border-color: #f0bfc6; background: #fff7f7; }
.tag { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; background: #e9faf4; color: #168460; }
.tag.warning { color: #bb7435; background: #fff3e7; }
.tag.info { color: #5367dc; background: #eef0ff; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 17px; color: var(--muted); font-size: 12px; }
.pagination-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pagination-summary label { display: flex; align-items: center; gap: 6px; }
.page-jump { white-space: nowrap; }
.page-jump-input { width: 58px; min-width: 58px; padding: 6px 7px; text-align: center; }
.page-jump-button { min-height: 30px; padding: 5px 10px; }
.page-size-select { width: auto; min-width: 74px; padding: 7px 26px 7px 9px; font-size: 11px; }
.page-buttons { display: flex; gap: 6px; }
.page-buttons button { min-width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--muted); }
.page-buttons button.active { background: var(--accent); border-color: var(--accent); color: white; }
.page-buttons button:disabled { opacity: .45; cursor: not-allowed; }
.primary-button:disabled, .secondary-button:disabled, .ghost-button:disabled,
.table-button:disabled, .link-button:disabled, .icon-button:disabled {
  color: var(--muted); background: var(--surface-soft); border-color: var(--border);
  opacity: .72; cursor: wait; box-shadow: none;
}
.info-strip { display: flex; align-items: center; gap: 12px; background: #f3f5ff; color: #5969cd; border-radius: 8px; padding: 12px 15px; margin-bottom: 17px; font-size: 12px; }
.info-strip button { margin-left: auto; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(13, 24, 47, .46); backdrop-filter: blur(4px); }
.modal { width: min(520px, 100%); max-height: min(720px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; background: white; border-radius: 8px; box-shadow: 0 28px 70px rgba(13,24,47,.26); }
.modal.wide { width: min(860px, 100%); }
.modal-header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.modal-header h3 { margin: 0 0 5px; font-size: 17px; }
.modal-header p { margin: 0; color: var(--muted); font-size: 12px; }
.modal-body { min-height: 0; padding: 22px 24px; overflow-y: auto; overscroll-behavior: contain; }
.modal-footer { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 9px; padding: 15px 24px 22px; border-top: 1px solid var(--line); background: var(--panel); }
.form-grid { display: grid; gap: 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-label textarea { min-height: 92px; resize: vertical; }
.field-help { color: var(--muted); font-size: 11px; line-height: 1.5; font-weight: 500; }
.file-drop { display: block; border: 1px dashed #b9c2da; border-radius: 8px; padding: 19px; text-align: center; background: #fafbff; color: var(--muted); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.file-drop:hover, .file-drop:focus-visible, .file-drop.drag-active { border-color: var(--accent); background: #f2f4ff; box-shadow: 0 0 0 3px rgba(91, 105, 210, .12); outline: 0; }
.file-drop input { display: none; }
.file-drop strong { display: block; color: var(--ink); margin-bottom: 5px; }
.upload-progress { display: grid; gap: 7px; padding-top: 2px; }
.upload-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.upload-progress-track { height: 7px; overflow: hidden; border-radius: 4px; background: #e7eaf2; }
.upload-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: #5367dc; transition: width .16s ease; }
.upload-meta { display: grid; gap: 5px; margin-top: 2px; border-radius: 8px; padding: 12px; background: #f5f7fb; color: #43516c; font-size: 11px; line-height: 1.6; }
.upload-meta.complete { background: #ecfbf6; color: #147458; }
.upload-meta > strong { font-size: 12px; }
.upload-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-meta dl { display: grid; gap: 4px; margin: 0; }
.upload-meta dl > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
.upload-meta dt { color: var(--muted); }
.upload-meta dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.credential-box { border: 1px solid var(--line); background: var(--soft); padding: 18px; border-radius: 8px; }
.credential-box span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.credential-box strong { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 18px; overflow-wrap: anywhere; }
.credential-box .secondary-button { margin-top: 13px; }
.profile-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--soft); margin-bottom: 22px; }
.profile-tabs button { flex: 1; border: 0; border-radius: 6px; padding: 10px; color: var(--muted); background: transparent; font-weight: 750; }
.profile-tabs button.active { color: white; background: var(--accent); }
.profile-section { min-height: 250px; }
.profile-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.api-key-state { min-height: 150px; }
.api-key-warning { margin: 0 0 12px; color: var(--orange); font-size: 12px; }
.api-key-meta { display: grid; gap: 8px; padding: 18px 0; }
.api-key-meta strong { font: 16px ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); }
.api-key-meta span, .api-key-meta small { color: var(--muted); }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.permission-grid fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.permission-grid legend { color: var(--muted); font-size: 11px; font-weight: 800; padding: 0 5px; }
.permission-item { display: flex; gap: 9px; padding: 8px 4px; align-items: flex-start; }
.permission-item input { margin-top: 3px; accent-color: var(--accent); }
.permission-item strong, .permission-item small { display: block; }
.permission-item strong { font-size: 12px; }.permission-item small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.group-app-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.group-app-modal-layout { height: min(540px, 62vh); min-height: 320px; display: flex; flex-direction: column; }
.group-app-toolbar { position: relative; z-index: 5; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; overflow: visible; background: var(--panel); }
.group-app-toolbar .search-wrap { min-width: 0; flex: 1 1 auto; }
.group-app-toolbar .dashboard-filter-menu { flex: 0 0 220px; }
.group-app-toolbar .dashboard-filter-popover { right: 0; left: auto; }
.group-app-list { min-height: 0; flex: 1 1 auto; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.group-account-list { min-height: 0; flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.group-account-item { min-width: 0; padding: 11px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.group-account-item:has(input:checked) { border-color: #cbd2ff; background: #f7f8ff; }
.group-account-item > span { min-width: 0; }
.group-account-item small { display: flex; min-width: 0; gap: 7px; align-items: center; }
.group-account-item small > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-account-role { flex: 0 0 auto; color: var(--accent); }
body.dark .group-account-item:has(input:checked) { background: #111c30; }
.dashboard-filter-menu { position: relative; min-width: 220px; }
.dashboard-filter-menu > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; background: rgba(255,255,255,.86); }
.dashboard-filter-menu > summary::-webkit-details-marker { display: none; }
.dashboard-filter-popover { position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; width: min(340px, 80vw); max-height: 300px; overflow: auto; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(20,30,50,.15); }
.dashboard-filter-popover label { display: flex; gap: 8px; align-items: center; padding: 6px 2px; }
.dashboard-filter-popover .filter-option-hidden { display: none !important; }
.dashboard-filter-popover label { white-space: nowrap; }
.dashboard-filter-popover .field { margin-bottom: 8px; }
.filter-menu-tools { position: sticky; z-index: 2; top: -12px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin: -12px -12px 8px; padding: 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.filter-menu-tools .field { min-width: 0; margin: 0; }
.filter-menu-tools .link-button { white-space: nowrap; }
.range-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.api-health-table { margin-top: 18px; }
.storage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .group-app-list, .group-account-list, .storage-grid { grid-template-columns: 1fr; } }
.settings-panel { max-width: 760px; }
.settings-form { display: grid; gap: 18px; max-width: 520px; }
.settings-primary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.settings-primary-grid > .panel { height: 100%; margin: 0; }
.search-settings-panel .primary-button { width: auto; justify-self: start; white-space: nowrap; }
.app-filter-row { flex-wrap: nowrap; align-items: center; min-width: 0; overflow: visible; padding-bottom: 2px; }
.app-filter-row .search-wrap { min-width: 0; }
.data-panel:has(.app-filter-row) { overflow: visible; }
.app-filter-row .dashboard-filter-menu { z-index: 20; }
.app-filter-row .dashboard-filter-popover { z-index: 100; }
.app-filter-row .dashboard-filter-menu { flex: 0 0 220px; }.app-filter-row .select-field { flex: 0 0 220px; }.app-filter-row .check-line { flex: 0 0 auto; white-space: nowrap; }
.app-name-button { appearance: none; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; letter-spacing: 0; }
.app-name-button:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.strategy-display { display: grid; gap: 4px; min-width: 120px; }
.strategy-display-primary { display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; font-weight: 700; white-space: nowrap; }
.strategy-display-primary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strategy-display-accent { flex: 0 0 auto; color: var(--accent); white-space: nowrap; }
.strategy-display-description { max-width: 260px; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.app-metrics-filter { justify-content: flex-start; }
.app-metrics-filter label, .range-filter label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.app-metric-summary { margin-bottom: 16px; }
.app-metric-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
.app-metric-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.app-metric-card { min-height: 132px; }
.metric-subvalues { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 500; }
.metric-subvalue-separator { color: var(--muted); }
.metric-failure.active { color: var(--red); font-weight: 750; }
.ad-config-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ad-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.dark th, body.dark td { border-color: #2a3348; }
.app-metric-sections h4, #app-metric-content > section h4 { margin: 18px 0 9px; font-size: 13px; }
.storage-panel { margin-top: 18px; }
.storage-warning { margin-bottom: 14px; padding: 12px; border-left: 3px solid #d59b32; background: #fff8e9; color: #76561f; font-size: 12px; line-height: 1.6; }
.storage-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
.storage-item > div { min-width: 0; }
.storage-item strong, .storage-item span { display: block; }
.storage-item > div span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.cleanup-choice { display: flex; align-items: center; gap: 7px; }
.cleanup-choice input, .cleanup-api-health input { accent-color: var(--accent); }
.cleanup-choice .select-field { min-width: 105px; padding: 8px; }
.cleanup-api-health { display: flex; gap: 8px; align-items: center; margin-top: 16px; color: var(--muted); font-size: 12px; }
body.dark .storage-warning { background: #2c2619; color: #f1cd83; }
.failure-count { border: 0; padding: 2px 5px; background: transparent; color: var(--red); font: inherit; font-weight: 800; cursor: pointer; }
.failure-count:hover { text-decoration: underline; }.api-health-filter { margin-top: 18px; }.api-health-filter .toolbar { margin-bottom: 0; }
.request-detail-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.request-detail-meta span { padding: 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); overflow-wrap: anywhere; }.request-detail-meta strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 11px; }
.request-detail-section h4, .api-failure-item summary { font-size: 12px; }.request-detail-section pre, .api-failure-item pre { max-height: 280px; overflow: auto; padding: 12px; background: #101828; color: #dce5f5; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-payload-disclosure { margin-top: 12px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.request-payload-disclosure > summary { cursor: pointer; padding: 10px 12px; color: var(--accent); font-size: 12px; font-weight: 700; background: var(--soft); }
.request-payload-content { padding: 0 12px 12px; }.request-payload-content .request-detail-section { margin-top: 12px; }
.api-failure-list { display: grid; gap: 12px; }.api-failure-item { padding: 14px; border: 1px solid var(--line); border-radius: 8px; }.api-failure-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }.api-failure-head span { color: var(--muted); font-size: 11px; }
.health-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; color: var(--muted); font-size: 12px; }
.service-observation-panel { height: 800px; display: flex; flex-direction: column; }
.service-observation-panel .table-wrap { min-height: 0; flex: 1 1 auto; overflow: auto; }
.service-observation-panel .pagination { flex: 0 0 auto; }
.api-health-table, .deletion-audit-panel { height: 700px; display: flex; flex-direction: column; }
.api-health-table .table-wrap, .deletion-audit-panel .table-wrap { min-height: 0; flex: 1 1 auto; overflow: auto; }
.api-health-table .pagination, .deletion-audit-panel .pagination { flex: 0 0 auto; }
.table-wrap { position: relative; }
.page-data-skeleton { min-height: 520px; }
.skeleton-toolbar { width: min(520px, 70%); height: 38px; margin-bottom: 14px; border-radius: 6px; background: var(--soft); }
.skeleton-table-space { height: 360px; }
.table-wrap.table-loading::after { content: '加载数据中'; position: absolute; inset: 41px 0 0; display: grid; place-items: center; background: rgba(255,255,255,.88); color: var(--muted); font-size: 13px; z-index: 4; }
.initial-table-shell .table-wrap { min-height: 360px; }
.service-message { display: grid; gap: 3px; }
.service-message small { color: var(--muted); font-size: 12px; }
.request-column { width: 240px; max-width: 240px; }
.request-preview { display: -webkit-box; overflow: hidden; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.45; }
.service-observation-panel tbody tr { min-height: 58px; }
.api-health-table tbody tr, .deletion-audit-panel tbody tr { min-height: 52px; }
.status-distribution { color: var(--ink); white-space: nowrap; }
.status-distribution-code, .error-summary-code { color: var(--red); font-weight: 750; }
.status-distribution-code.status-success-code { color: var(--accent); }
.status-distribution-punctuation, .status-distribution-count, .error-summary-count { color: var(--ink); }
.status-distribution-separator, .error-summary-separator, .usage-frequency span { color: var(--muted); }
.error-summary { white-space: normal; }.usage-frequency strong { color: var(--accent); }
.usage-frequency { white-space: nowrap; }
.usage-frequency.capacity-exceeded strong { color: var(--red); }
.usage-frequency:has(.health-frequency-warning) strong { color: var(--red); }
.health-frequency-status { display: block; font-size: 11px; margin-top: 3px; }
.health-frequency-warning { color: var(--red); }
.health-frequency-normal { color: var(--green); }
.app-history-table { min-width: 780px; table-layout: fixed; }
.app-history-table th:nth-child(1), .app-history-table td:nth-child(1) { width: 112px; overflow-wrap: anywhere; }
.app-history-table th:nth-child(2), .app-history-table td:nth-child(2) { width: 96px; min-width: 96px; white-space: nowrap; }
.app-history-table th:nth-child(3), .app-history-table td:nth-child(3) { width: 86px; min-width: 86px; white-space: nowrap; }
.app-history-table td:nth-child(4) { overflow-wrap: anywhere; word-break: break-word; }
.app-history-table th:nth-child(5), .app-history-table td:nth-child(5) { width: 78px; min-width: 78px; white-space: nowrap; }
.app-history-table .rollback-unavailable { display: inline-block; font-size: 10px; white-space: nowrap; }
.history-section-title { margin: 22px 0 10px; font-size: 14px; }
@media (max-width: 800px) { .app-metric-sections { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .app-metric-summary { grid-template-columns: 1fr !important; } .ad-config-meta-grid, .ad-config-grid { grid-template-columns: 1fr; } }
.strategy-option-field { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.strategy-option-field legend { padding: 0 5px; color: #63708b; font-size: 12px; font-weight: 700; }
.strategy-option-scroll { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.bind-strategy-field .strategy-option-scroll { min-height: 360px; }
.strategy-option-search { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 8px; align-items: center; padding: 4px 4px 8px; background: var(--panel); }
.strategy-option-search .field { width: 100%; }
.strategy-option-search.single-column { grid-template-columns: minmax(0, 1fr); }
.version-picker-field .strategy-option-list { max-height: 186px; overflow-y: auto; overscroll-behavior: contain; }
.version-picker-field .strategy-option { min-height: 58px; max-height: 58px; }
.role-picker-field .strategy-option-list { max-height: 360px; overflow-y: auto; }
.bind-strategy-toolbar { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 4px 8px; background: var(--panel); }
.bind-strategy-toolbar > .field { width: 100%; }
.bind-strategy-toolbar .dashboard-filter-menu { min-width: 0; }
.bind-strategy-toolbar .dashboard-filter-popover { right: 0; left: auto; width: min(340px, 80vw); }
.locate-group-button { width: 38px; height: 38px; border-color: #cdd4f4; background: #f4f6ff; color: var(--accent); font-size: 22px; line-height: 1; }
.locate-group-button:hover { border-color: var(--accent); background: #e9edff; }
.locate-group-glyph { width: 17px; height: 17px; display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; }
.locate-group-glyph i { width: 7px; height: 7px; display: block; border-radius: 50%; background: currentColor; }
.service-card-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; }.service-uptime { white-space: nowrap; }.uptime-unit { color: var(--green); font-weight: 800; }
@media (max-width: 900px) { .settings-primary-grid { grid-template-columns: 1fr; } }
.strategy-option-list { display: grid; gap: 6px; }
.strategy-option { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 11px 12px; border: 1px solid transparent; border-radius: 7px; color: var(--ink); cursor: pointer; }
.strategy-option:hover { border-color: #cbd2ff; background: #f7f8ff; }
.strategy-option:has(input:checked) { border-color: var(--accent); background: #f1f3ff; }
.strategy-option input { flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.strategy-option-content { display: grid; min-width: 0; flex: 1; gap: 5px; }
.strategy-option-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; min-width: 0; }
.strategy-option-row.secondary { color: var(--muted); font-size: 11px; font-weight: 400; }
.strategy-option-row.secondary > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strategy-option-content strong { font-size: 13px; }
.strategy-option-separator { color: var(--accent); font-weight: 700; }
.strategy-option-version { color: #58657d; font-size: 12px; }
.strategy-option-jar { color: var(--muted); font-size: 11px; font-weight: 400; }
.ranking-missing { cursor: default; }
.two-line-value { display: grid; gap: 2px; line-height: 1.25; white-space: nowrap; }
.two-line-value small { color: var(--muted); font-size: 11px; }
.risk-reason-cell { max-width: 190px; }
.risk-reason-cell, .risk-reason-cell * { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.risk-count-cell { min-width: 58px; width: 58px; text-align: right; }
.ranking-missing .tag { display: inline-block; margin-left: 5px; font-style: normal; }
.deletion-audit-panel { margin-top: 18px; }
.binding-form { display: grid; grid-template-columns: 1fr 120px 130px auto auto; gap: 8px; align-items: center; padding: 13px; background: #f7f8ff; border-radius: 8px; margin-bottom: 15px; }
.binding-form .select-field { padding: 10px; }
.check-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.check-line input { accent-color: var(--accent); }
.toast-root { position: fixed; right: 22px; bottom: 22px; z-index: 100; display: grid; gap: 8px; max-width: min(360px, calc(100vw - 44px)); }
.toast { padding: 12px 15px; border-radius: 8px; color: white; box-shadow: var(--shadow); animation: toast-in .2s ease-out; font-size: 12px; }
.toast.success { background: #168965; }.toast.error { background: #c85a68; }.toast.info { background: #5267d9; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

body.dark {
  color-scheme: dark;
  --ink: #f8fafc;
  --muted: #94a3b8;
  --soft: #121826;
  --panel: #1a2130;
  --line: #2a3348;
  --accent: #335368;
  --accent-dark: #315375;
  --green: #22c55e;
  --orange: #f59e0b;
  --red: #ef4444;
  --shadow: 0 14px 32px rgba(0,0,0,.22);
  background: #121826;
  color: #cbd5e1;
}
body.dark .main-area, body.dark .page-content { background: #121826; }
body.dark .sidebar { background: #101725; color: #cbd5e1; }
body.dark .topbar, body.dark .modal, body.dark .user-dropdown,
body.dark .table-button, body.dark .page-buttons button, body.dark .login-form input,
body.dark .field, body.dark .select-field, body.dark .dashboard-filter-menu > summary {
  background: #1e293b;
  border-color: #2a3348;
  color: #cbd5e1;
}
body.dark .field::placeholder, body.dark input::placeholder, body.dark textarea::placeholder { color: #64748b; }
body.dark .dashboard-filter-popover, body.dark .filter-menu-tools,
body.dark .strategy-option-search, body.dark .bind-strategy-toolbar { background: #1a2130; color: #cbd5e1; }
body.dark .dashboard-filter-popover label, body.dark .check-line, body.dark .field-label,
body.dark .login-form label { color: #cbd5e1; }
body.dark .shell-quick-nav-items button { background: #1a2130; border-color: #2a3348; color: #94a3b8; }
body.dark .shell-quick-nav-items button:hover { border-color: var(--accent); color: #608197; }
body.dark .shell-quick-nav-items button.active { background: var(--accent); border-color: var(--accent); color: #f8fafc; }
body.dark .shell-scroll-track { background: #2a3348; }
body.dark .shell-scroll-track i { background: #64748b; }
body.dark .shell-scroll-track:hover i, body.dark .shell-scroll-track.dragging i { background: var(--accent); }
body.dark .panel, body.dark .stat-card { box-shadow: none; }
body.dark .hero-card { background: #1a2130; border: 1px solid #2a3348; color: #f8fafc; box-shadow: none; }
body.dark .hero-card p { color: #94a3b8; }
body.dark .stat-icon, body.dark .mini-icon, body.dark .metric-icon,
body.dark .info-strip { background: #1e293b; color: #608197; }
body.dark th { background: #1e293b; color: #94a3b8; }
body.dark td { color: #608197; }
body.dark td .muted, body.dark td small, body.dark td .strategy-display-description,
body.dark td .strategy-display-accent, body.dark td .link-button,
body.dark td .status-distribution-code.status-success-code, body.dark td .usage-frequency strong { color: #608197; }
body.dark tbody tr:hover { background: #1e293b; }
body.dark .table-button:hover { background: #1e293b; border-color: var(--accent); color: #608197; }
body.dark .table-button.danger:hover { background: rgba(239,68,68,.1); border-color: #ef4444; color: #ef4444; }
body.dark .secondary-button { background: #1e293b; color: #608197; }
body.dark .danger-button { background: rgba(239,68,68,.12); color: #ef4444; }
body.dark .tag { background: rgba(34,197,94,.12); color: #22c55e; }
body.dark .tag.warning { background: rgba(245,158,11,.12); color: #f59e0b; }
body.dark .tag.info { background: rgba(51,83,104,.22); color: #608197; }
body.dark .modal-header, body.dark .modal-footer { border-color: #2a3348; }
body.dark .file-drop, body.dark .binding-form, body.dark .upload-meta,
body.dark .group-account-item { background: #1e293b; border-color: #2a3348; color: #cbd5e1; }
body.dark .upload-meta.complete { background: rgba(34,197,94,.1); color: #22c55e; }
body.dark .strategy-option:hover, body.dark .strategy-option:has(input:checked),
body.dark .group-account-item:has(input:checked) { background: #1e293b; border-color: var(--accent); }
body.dark .locate-group-button { background: #1e293b; border-color: #2a3348; color: #608197; }
body.dark .storage-warning { background: rgba(245,158,11,.1); border-color: #f59e0b; color: #f59e0b; }
body.dark .table-wrap.table-loading::after { background: rgba(26,33,48,.94); color: #94a3b8; }
body.dark .request-detail-section pre, body.dark .api-failure-item pre { background: #121826; color: #cbd5e1; }
body.dark .request-payload-disclosure > summary { background: #1e293b; color: #608197; }
body.dark .distribution-track, body.dark .upload-progress-track { background: #2a3348; }
body.dark .user-dropdown button:hover { background: #1e293b; }

@media (max-width: 980px) {
  .login-view { grid-template-columns: 1fr; } .login-atmosphere { display: none; } .login-panel { width: min(500px, calc(100% - 40px)); } .login-copy { margin-top: 62px; }
  .login-signal { color: var(--muted); right: 20px; } .login-signal b { color: var(--ink); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-board { grid-template-columns: 1fr; }.dashboard-chart-panel { grid-row: auto; }.dashboard-wide-panel { grid-column: auto; }
  .service-grid { grid-template-columns: 1fr; }.health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; height: 100dvh; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 15px 0 40px rgba(0,0,0,.16); } .sidebar.open { transform: none; }
  .sidebar.collapsed { width: 228px; flex-basis: 228px; padding: 24px 14px 18px; }
  .sidebar.collapsed .sidebar-brand { justify-content: flex-start; padding: 0 10px 34px; }
  .sidebar.collapsed .sidebar-brand > div, .sidebar.collapsed .nav-item > span:last-child, .sidebar.collapsed .sidebar-footer > span:not(.status-led) { display: initial; }
  .sidebar.collapsed .nav-caption { height: auto; margin: 0; padding: 18px 12px 6px; overflow: visible; color: #7788ab; background: transparent; }
  .sidebar.collapsed .nav-item { justify-content: flex-start; gap: 13px; padding: 12px; }
  .sidebar.collapsed .nav-icon { width: 20px; }
  .sidebar.collapsed .sidebar-footer { display: block; padding: 18px 10px 0; }
  .sidebar.collapsed .status-led { margin-right: 8px; }
  .topbar { padding: 0 16px; } .page-content { padding: 22px 16px 35px; }
  .shell-quick-nav-context { display: none; }.shell-quick-nav-row { gap: 0; }
  .page-heading { align-items: flex-start; flex-direction: column; } .page-heading h1 { font-size: 23px; }
  .stats-grid { gap: 10px; } .stat-card { padding: 15px; min-height: 100px; } .stat-card strong { font-size: 22px; }
  .form-grid.two { grid-template-columns: 1fr; } .binding-form { grid-template-columns: 1fr 1fr; } .binding-form .select-field { grid-column: 1 / -1; }
  .permission-grid { grid-template-columns: 1fr; }
  .topbar-actions { gap: 5px; } .user-trigger > #user-name, .chevron { display: none; } .user-trigger { padding: 0; }
  .login-panel { padding: 28px 0; } .login-copy { margin: 55px 0 30px; } .login-copy h1 { font-size: 32px; }
  .service-observation-panel, .api-health-table, .deletion-audit-panel { height: auto; min-height: 420px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; } .hero-card { padding: 21px; } .hero-card h2 { font-size: 25px; }
  .toolbar { align-items: stretch; } .search-wrap { min-width: 100%; width: 100%; } .search-wrap .field { flex: 1 1 auto; min-width: 0; width: 0; } .search-wrap .primary-button { flex: 0 0 auto; min-width: 64px; white-space: nowrap; }
  .filter-row { width: 100%; min-width: 100%; } .filter-row .select-field { min-width: 0; flex: 1; }
  .metric-strip { grid-template-columns: 1fr; }.health-grid { grid-template-columns: 1fr; }.jar-status-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-log-filters { flex-wrap: wrap; }.service-log-filters .select-field { flex: 1 1 140px; }.limit-control { flex: 1 1 220px; }.limit-control .field { flex: 1; min-width: 0; }
  .request-detail-meta { grid-template-columns: 1fr; }
  .panel { padding: 16px; } .modal-backdrop { padding: 10px; } .modal-body, .modal-header { padding-left: 17px; padding-right: 17px; }
  .pagination { align-items: flex-start; flex-direction: column; }.page-buttons { max-width: 100%; flex-wrap: wrap; }
  .modal-footer { padding-left: 17px; padding-right: 17px; } .login-signal { display: none; }
}