:root {
    --bg: #ece5d7;
    --surface: #faf6ee;
    --surface-2: #f3ecdf;
    --sunken: #e7dfce;
    --fg: #2a2620;
    --fg-muted: #6f6a5d;
    --fg-faint: #9c9484;
    --border: #ddd4c1;
    --border-strong: #c9bda6;
    --accent: #bb4e27;
    --accent-ink: #9c3f1f;
    --accent-soft: #f1ddd0;
    --ok: #5c7a40;
    --ok-dot: #7d9e67;
    --ok-soft: #e6ecdb;
    --err: #b6451f;
    --err-dot: #bb4e27;
    --err-soft: #f3dccf;
    --neutral: #7c7c76;
    --neutral-dot: #a9a9a3;
    --neutral-soft: #e8e4db;
    --radius: 8px;
    --radius-sm: 5px;
    --shadow: 0 1px 2px rgba(70, 55, 30, .05), 0 2px 8px rgba(70, 55, 30, .05);
    --shadow-sm: 0 1px 1px rgba(70, 55, 30, .06);
    --row-pad: 8px;
    --group-gap: 16px;
    --card-pad: 16px;
}

html[data-theme="dark"] {
    --bg: #181612;
    --surface: #221f19;
    --surface-2: #2a261f;
    --sunken: #141210;
    --fg: #ece5d6;
    --fg-muted: #a79f8e;
    --fg-faint: #7b7464;
    --border: #37322a;
    --border-strong: #494236;
    --accent: #d47049;
    --accent-ink: #e08659;
    --accent-soft: #382419;
    --ok: #98b57c;
    --ok-dot: #8fb073;
    --ok-soft: #28301f;
    --err: #dd7b55;
    --err-dot: #d9744f;
    --err-soft: #38241b;
    --neutral: #9a978e;
    --neutral-dot: #89857c;
    --neutral-soft: #2a261f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "Hanken Grotesk", system-ui, sans-serif;
    font-size: 14.5px;
}

.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.faint { color: var(--fg-faint); }

/* --- login --- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-column { max-width: 372px; width: 100%; padding: 32px 20px; }
.login-head { text-align: center; }
.wordmark { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.wordmark.small { font-size: 14px; white-space: nowrap; }
.accent-bar { height: 2px; width: 34px; background: var(--accent); border-radius: 2px; margin: 11px auto 0; }
.login-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 26px 24px 24px; margin-top: 24px;
}
.field-label {
    display: block; text-transform: uppercase; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; color: var(--fg-muted); margin-bottom: 7px;
}
.field-gap { margin-top: 16px; display: block; }
input[type=text], input[type=password], select {
    width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--bg); font-size: 14.5px; color: var(--fg);
    font-family: inherit;
}
.login-error {
    margin-top: 14px; background: var(--err-soft); border: 1px solid var(--err-dot);
    border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; color: var(--err);
}
.btn-accent {
    background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
    font-size: 14.5px; font-weight: 700; padding: 12px; cursor: pointer;
}
.btn-accent:hover { filter: brightness(1.06); }
.full-width { width: 100%; margin-top: 20px; }
.login-foot { text-align: center; font-size: 11.5px; color: var(--fg-faint); margin-top: 16px; }

@keyframes mb-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.mb-shake .login-card, .login-card.mb-shake { animation: mb-shake .4s; }

/* --- nav --- */
.topnav { position: sticky; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); z-index: 10; }
.topnav-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 58px; display: flex; align-items: center; gap: 26px; }
.tabs { display: flex; gap: 4px; height: 100%; }
.tab { display: flex; align-items: center; height: 100%; padding: 0 4px; text-decoration: none; color: var(--fg-muted); font-weight: 500; border-bottom: 2px solid transparent; }
.tab.active { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 32px; height: 32px; border: 1px solid var(--border-strong); background: var(--bg); border-radius: var(--radius-sm); cursor: pointer; color: var(--fg); }
.icon-btn.danger:hover { border-color: var(--err); color: var(--err); }
.role-badge {
    text-transform: uppercase; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--fg-muted);
    background: var(--surface-2); border: 1px solid var(--border); padding: 5px 10px; border-radius: 100px;
}
.link-btn { background: none; border: none; font-size: 13px; color: var(--fg-muted); cursor: pointer; padding: 0; }
.link-btn:hover { color: var(--accent); }
.inline-form { display: inline; }

/* --- content pages --- */
.page-container { max-width: 1120px; margin: 0 auto; padding: 28px 24px 64px; }
.content-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
h1 { font-size: 27px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.sub { font-size: 13.5px; color: var(--fg-muted); margin-top: 5px; }
.content-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.meta-line { font-size: 11.5px; line-height: 1.5; color: var(--fg-muted); }
.update-row { display: flex; align-items: center; gap: 10px; }
.already-running-hint { font-size: 12px; color: var(--accent); font-weight: 600; }
.already-running-hint[hidden] { display: none; }
.update-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; }
.update-btn[data-running="true"] { background: var(--sunken); color: var(--fg-muted); cursor: default; }
.update-btn .spinner { display: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--fg-faint); border-top-color: transparent; }
.update-btn[data-running="true"] .spinner { display: inline-block; animation: mb-spin .7s linear infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }
.divider { border: none; height: 1px; background: var(--border); margin: 16px 0 22px; }

.headline-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.headline-row {
    display: flex; align-items: baseline; gap: 13px; padding: var(--row-pad) 16px; border-top: 1px solid var(--border);
}
.headline-row:first-child { border-top: none; }
.headline-source {
    flex: 0 0 132px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.headline-title { flex: 1; font-size: 14.5px; font-weight: 600; line-height: 1.35; min-width: 0; color: var(--fg); text-decoration: none; }
.headline-title:hover { color: var(--accent); }
.headline-time { flex: 0 0 auto; font-size: 10.5px; color: var(--fg-faint); white-space: nowrap; }

.failing-hint { margin-top: 12px; font-size: 12.5px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; }
.err-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--err-dot); display: inline-block; }

.empty-card { text-align: center; padding: 48px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.empty-card.dashed { border-style: dashed; border-color: var(--border-strong); }
.empty-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.empty-text { color: var(--fg-muted); font-size: 13.5px; margin-bottom: 16px; }

/* --- admin --- */
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--card-pad); margin-bottom: 22px; }
.admin-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-title { text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .1em; display: block; margin-bottom: 8px; }
.legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--fg-muted); }
.legend-item { display: flex; align-items: center; gap: 5px; }
.explain { font-size: 12.5px; color: var(--fg-muted); margin: 0 0 14px; }

.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ok-dot); display: inline-block; }
.tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--err-dot); display: inline-block; }
.ring { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--neutral-dot); display: inline-block; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.status-card { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.status-card.status-error { border-color: var(--err-dot); background: var(--err-soft); }
.status-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.status-name { font-size: 14px; font-weight: 600; }
.status-card-row { display: flex; justify-content: space-between; align-items: center; }
.status-label { text-transform: uppercase; font-size: 11px; font-weight: 700; }
.status-label.status-ok { color: var(--ok); }
.status-label.status-error { color: var(--err); }
.status-label.status-not_configured { color: var(--neutral); }
.status-last { margin-top: 4px; font-size: 10.5px; }

.token-form { max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.token-input-row { display: flex; gap: 8px; align-items: center; }
.token-input-row input { font-size: 13px; padding: 10px 12px; }
.token-toggle { border: 1px solid var(--border-strong); background: var(--bg); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; font-size: 12px; color: var(--fg-muted); white-space: nowrap; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 10.5px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.badge.neutral { color: var(--neutral); background: var(--neutral-soft); }
.badge.accent { color: var(--accent-ink); background: var(--accent-soft); }

.user-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; overflow-x: auto; display: block; }
.user-table thead, .user-table tbody { display: table; width: 100%; table-layout: fixed; }
.user-table th { text-transform: uppercase; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--fg-muted); border-bottom: 1px solid var(--border); text-align: left; padding: 6px 8px; }
.user-table th:nth-child(4), .user-table th:nth-child(5) { width: 52px; }
.user-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.user-row.editing { background: var(--accent-soft); }
.cell-username .view-value { font-weight: 700; }
.save-btn { background: var(--accent); color: #fff; border: none; }
.dashed-btn {
    margin-top: 12px; width: 100%; padding: 10px; border: 1px dashed var(--border-strong); background: none;
    color: var(--fg-muted); border-radius: var(--radius-sm); cursor: pointer;
}
.dashed-btn:hover { color: var(--accent); border-color: var(--accent); }

.admin-error { margin-bottom: 16px; }

[hidden] { display: none !important; }