:root {
    --accent: #FF3C00;
    --ink: #17181b;
    --muted: #6b7078;
    --line: #e3e5e9;
    --panel: #ffffff;
    --ground: #f7f7f8;
    --bad: #b3261e;
    --good: #1f7a44;
}

* { box-sizing: border-box; }

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

.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.brand { font-weight: 650; text-decoration: none; color: var(--ink); }
.brand::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 8px; }

.topbar nav { display: flex; gap: 18px; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }
.signout { margin-left: auto; }

main { max-width: 1080px; margin: 0 auto; padding: 24px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
p.muted, .muted { color: var(--muted); }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 20px;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
td.mono, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
.numeric { font-variant-numeric: tabular-nums; }

input[type=text], input[type=password], input[type=file], textarea, select {
    font: inherit;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    min-width: 200px;
}

button, .button {
    font: inherit;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
}

button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.danger { color: var(--bad); border-color: #f0c8c5; }
button.link { border: 0; background: none; color: var(--muted); padding: 0; }

form.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }

.notice { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--good); padding: 10px 14px; border-radius: 6px; }
.notice.error { border-left-color: var(--bad); }

.token {
    display: block;
    margin-top: 8px;
    padding: 12px;
    background: #17181b;
    color: #f4f4f5;
    border-radius: 6px;
    word-break: break-all;
}

.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--ground); border: 1px solid var(--line); }
.pill.withdrawn { color: var(--bad); border-color: #f0c8c5; }
.pill.served { color: var(--good); border-color: #c6e3d1; }
.pill.refused { color: var(--bad); border-color: #f0c8c5; }

.matrix td { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }

.signin { max-width: 360px; margin: 12vh auto; }
.scroll-x { overflow-x: auto; }