:root {
    --ink: #1c1e21;
    --muted: #6b7280;
    --line: #e5e7eb;
    --accent: #1f6feb;
    --danger: #b00020;
    --ok: #157347;
    --bg: #f7f8fa;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 210px;
    flex: none;
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand { font-size: 18px; font-weight: 600; margin: 4px 8px 16px; }

.sidebar a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
}
.sidebar a:hover { background: #f0f2f5; }
.sidebar a.active { background: var(--accent); color: #fff; }

.signout { margin-top: auto; }
.signout button {
    width: 100%; padding: 7px 10px; border: 1px solid var(--line);
    background: #fff; border-radius: 6px; cursor: pointer;
}
.who { color: var(--muted); font-size: 12px; padding: 8px 10px 0; word-break: break-all; }

main { flex: 1; padding: 26px 30px; max-width: 1100px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 26px 0 10px; }
.lede { color: var(--muted); margin: 0 0 20px; }

table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; min-width: 150px; }
.card .n { font-size: 26px; font-weight: 600; }
.card .k { color: var(--muted); font-size: 12px; }

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: #eef0f3; }
.pill.ok { background: #e6f4ea; color: var(--ok); }
.pill.warn { background: #fff4e5; color: #8a5300; }
.pill.bad { background: #fdecef; color: var(--danger); }

button, .btn {
    padding: 6px 12px; border: 1px solid var(--line); background: #fff;
    border-radius: 6px; cursor: pointer; font: inherit;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--danger); border-color: #f3c2ca; }
button:disabled { opacity: .5; cursor: default; }

input, select {
    padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
    background: #fff;
}
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 3px; }

.error { color: var(--danger); margin: 10px 0; }
.ok { color: var(--ok); margin: 10px 0; }

.login { max-width: 340px; margin: 90px auto; background: #fff; padding: 26px; border: 1px solid var(--line); border-radius: 10px; }
.login h1 { margin-bottom: 18px; }
.login input { width: 100%; }
.login button { width: 100%; margin-top: 16px; }

.toolbar { display: flex; gap: 8px; align-items: end; margin-bottom: 14px; flex-wrap: wrap; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; word-break: break-all; }

/* ---------------------------------------------------------------------------
   Panels — a titled block of related controls. Used by the admin pages and by
   the account page, so it has to sit on the plain background of one and the
   shell of the other.
   --------------------------------------------------------------------------- */
.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
    margin: 0 0 16px;
}
.panel > h2, .panel > h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.panel-head h2 { margin: 0; }

/* A short explanation under a heading, or a consequence under a control. */
.note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.muted { color: var(--muted); }

/* Standing information that is not an error and not a success — "this is what
   this button will do to someone". */
.notice {
    background: #fff8e6;
    border: 1px solid #f2dfae;
    color: #7a5600;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin: 12px 0 0;
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.field { margin-bottom: 12px; max-width: 340px; }

/* A note explains the controls under it; without this the explanation and the
   first label read as one run-on line. */
.note + .field, .note + .field-row,
.notice + .field, .notice + .field-row { margin-top: 16px; }
.field label { margin-top: 0; }
.field input, .field select { width: 100%; }

/* Side-by-side fields that still stack on a narrow window. */
.field-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.field-row .field { flex: 1 1 220px; margin-bottom: 12px; }

.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
input:disabled { background: #f4f5f7; color: var(--muted); }

button:hover:not(:disabled) { background: #f4f5f7; }
button.primary:hover:not(:disabled) { background: #1a5fd0; }
button.danger:hover:not(:disabled) { background: #fdf3f5; }

/* ---------------------------------------------------------------------------
   The account page. Its own shell rather than the admin sidebar: an ordinary
   user has no admin navigation to show, and a sidebar of one link is worse
   than no sidebar.
   --------------------------------------------------------------------------- */
.account-shell { min-height: 100vh; background: var(--bg); }

.account-bar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
}
.account-bar-inner {
    max-width: 760px;
    margin: 0 auto;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.account-bar .brand { margin: 0; margin-right: auto; }
.account-bar .who { padding: 0; font-size: 13px; }
.account-bar form { margin: 0; }

.account { max-width: 760px; margin: 0 auto; padding: 26px 24px 60px; }
.account > h1 { margin-bottom: 18px; }

/* The three facts an account holder actually opens this page for. */
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.summary .card { min-width: 0; }
.summary .card .k { margin-bottom: 4px; }
.summary .card .v { font-size: 17px; font-weight: 600; }

@media (max-width: 620px) {
    .summary { grid-template-columns: 1fr; }
    .account-bar-inner { height: auto; padding: 10px 0; flex-wrap: wrap; }
}

/* A secret shown once, meant to be copied. */
.secret {
    background: #f7f8fa;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0;
    user-select: all;
}