:root {
    --ink: #e6edf3;
    --muted: #9aa9b9;
    --line: #2b3641;
    --surface: #161c23;
    --surface-raised: #1d2630;
    --canvas: #0d1117;
    --brand: #14b8a6;
    --brand-strong: #0f9a8f;
    --danger: #f97066;
    --danger-strong: #d94841;
    --danger-soft: #2b181b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--canvas);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
button, input, select { font: inherit; }
button { cursor: pointer; }

.login-page { display: grid; min-height: 100vh; place-items: center; background: var(--canvas); }
.login-form { width: min(460px, calc(100vw - 48px)); }
.login-form input { width: 100%; height: 68px; border: 1px solid var(--line); border-radius: 8px; padding: 0 20px; color: var(--ink); background: var(--surface-raised); font-size: 22px; outline: none; }
.login-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18); }
.login-error { margin: 12px 0 0; color: var(--danger); font-size: 15px; line-height: 1.55; }.login-error span { color: var(--muted); }
.error-page { display: grid; min-height: 100vh; place-items: center; background: var(--canvas); }
.error-content { max-width: 480px; padding: 32px; text-align: center; }.error-content h1 { margin: 0 0 8px; font-size: 32px; }.error-content p { margin: 0; color: var(--muted); }

.intro-page { min-height: 100vh; background: var(--canvas); }
.intro-shell { width: min(900px, calc(100% - 40px)); margin: 0 auto; }
.intro-header { background: var(--surface); border-bottom: 1px solid var(--line); }.intro-header .intro-shell { min-height: 58px; display: flex; align-items: center; }
.intro-main { padding: 52px 0 64px; }.intro-heading { margin-bottom: 32px; }.intro-heading h1 { margin: 0; font-size: 30px; }.intro-heading p { max-width: 620px; margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.intro-section { padding: 24px 0; border-top: 1px solid var(--line); }.intro-section h2 { margin: 0 0 10px; font-size: 18px; }.intro-section p { margin: 0 0 14px; color: var(--muted); }.intro-section code { color: #a5f3fc; }
.intro-definition { display: grid; gap: 10px; margin: 0; }.intro-definition div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; }.intro-definition dt { color: var(--muted); }.intro-definition dd { margin: 0; }
.intro-section pre { margin: 14px 0 0; padding: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: #10161d; color: #d8e0e8; line-height: 1.65; }.intro-section pre code { color: inherit; font-size: 12px; }

.admin-page { min-height: 100vh; }
.admin-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.admin-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.admin-header-inner { min-height: 58px; display: flex; align-items: center; gap: 28px; }
.brand { color: var(--ink); font-size: 17px; font-weight: 700; }
.admin-nav { display: flex; gap: 20px; }
.admin-nav a { color: var(--muted); }
.logout-form { margin-left: auto; }
.admin-main { padding: 32px 0 48px; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.page-heading p { margin: 6px 0 0; color: var(--muted); }
.back-link { display: inline-block; margin-bottom: 10px; font-size: 13px; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.metric-card, .summary-item, .data-section { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.metric-card { min-height: 112px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-card span, .summary-item span { color: var(--muted); font-size: 13px; }
.metric-card strong { font-size: 22px; font-weight: 650; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.summary-item { padding: 16px; display: grid; gap: 4px; }
.summary-item strong { font-size: 20px; }.summary-item small { color: var(--muted); }

.data-section { padding: 18px; margin-bottom: 20px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h2, .form-section h2, .danger-section h2 { margin: 0; font-size: 16px; }
.split-section, .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.split-section .data-section { min-width: 0; }

.table-wrap { overflow-x: auto; }
.object-group + .object-group { margin-top: -8px; }
.muted-text { color: var(--muted); font-size: 13px; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 12px; font-weight: 600; }
.table-actions { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.api-key { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.api-key-block { display: block; max-width: none; overflow-wrap: anywhere; white-space: normal; margin-top: 12px; }
.api-key-line { display: flex; align-items: center; gap: 8px; min-width: 0; }.api-key-line .api-key { flex: 1 1 auto; }
.empty-cell { color: var(--muted); text-align: center; padding: 28px; }

.button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; border: 1px solid var(--brand); border-radius: 5px; padding: 0 12px; color: #062c29; background: var(--brand); }
.button:hover { color: #062c29; background: var(--brand-strong); }
.button-small { min-height: 30px; padding: 0 9px; font-size: 12px; }
.button-quiet { color: var(--ink); background: var(--surface); border-color: var(--line); }
.button-quiet:hover { color: var(--ink); background: #222c35; }
.button-danger { border-color: var(--danger); background: var(--danger); }
.button-danger:hover { background: var(--danger-strong); }

.inline-form, .filter-form { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form input, .filter-form select, .form-section input { min-height: 34px; border: 1px solid var(--line); border-radius: 5px; padding: 0 10px; color: var(--ink); background: var(--surface-raised); outline: none; }
.inline-form input:focus, .filter-form select:focus, .form-section input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16); }
.filter-form { margin-bottom: 20px; }
.filter-form select { min-width: 150px; }
.form-section { display: grid; gap: 12px; align-content: start; }
.form-actions { margin: 0; display: flex; gap: 8px; }
.danger-section { border-color: #71343a; background: var(--danger-soft); }.danger-section p { margin: 8px 0 14px; color: var(--muted); }

@media (max-width: 900px) {
    .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .admin-shell { width: min(100% - 28px, 1180px); }
    .admin-header-inner { flex-wrap: wrap; gap: 12px; padding: 12px 0; }
    .admin-nav { order: 3; width: 100%; gap: 16px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .metric-grid, .summary-grid, .split-section, .settings-grid { grid-template-columns: 1fr; }
    .metric-grid { gap: 8px; }
    .metric-card { min-height: 88px; }
    .inline-form { width: 100%; }.inline-form input { flex: 1 1 160px; }
    .filter-form select { flex: 1 1 140px; }
    .intro-shell { width: min(100% - 28px, 900px); }.intro-main { padding-top: 36px; }.intro-definition div { grid-template-columns: 1fr; gap: 4px; }
}