:root {
    --fg: #1f2328;
    --muted: #656d76;
    --border: #d0d7de;
    --bg: #ffffff;
    --bg-alt: #f6f8fa;
    --ok: #1a7f37;
    --warn: #9a6700;
    --bad: #cf222e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--fg);
    background: var(--bg-alt);
}

.top {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--fg);
    color: #fff;
}

.brand { font-weight: 600; }

.top nav { display: flex; gap: 1rem; }
.top nav a { color: #fff; text-decoration: none; opacity: 0.85; }
.top nav a:hover { opacity: 1; text-decoration: underline; }
.top .logout { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.top .user { opacity: 0.85; }

button.link { background: none; border: none; color: #fff; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }

h2 { font-size: 1.15rem; margin-top: 1.5rem; }

code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; background: var(--bg-alt); padding: 0.1em 0.3em; border-radius: 3px; }

.narrow { max-width: 360px; margin: 0 auto; }

.form { display: flex; flex-direction: column; gap: 0.9rem; }
.narrow-form { max-width: 360px; }
.form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; }
.form input { font: inherit; font-weight: normal; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; }
.form input:focus { outline: 2px solid #0969da; outline-offset: 0; }

button.primary { font: inherit; font-weight: 600; padding: 0.5rem 1rem; border: 1px solid #1f883d; border-radius: 4px; background: #1f883d; color: #fff; cursor: pointer; }
button.primary:hover { background: #1a7f37; }

.alert { padding: 0.6rem 0.8rem; border-radius: 4px; border: 1px solid; }
.alert.bad { color: var(--bad); border-color: #ffcecb; background: #ffebe9; }
.alert.ok { color: var(--ok); border-color: #aceebb; background: #dafbe1; }

table.grid { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
table.grid th, table.grid td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.grid thead th { background: var(--bg-alt); }
table.grid tr.bad td { color: var(--bad); }
table.grid tr.warn td { color: var(--warn); }
/* Długie wartości (e-maile, txn_… z Paddle, błędy SMTP) łamią się w komórce zamiast wypychać tabelę poza ramkę. */
table.grid td { overflow-wrap: anywhere; }
table.grid td.nowrap { overflow-wrap: normal; }
table.grid td .sub { display: block; font-size: 0.8rem; color: var(--muted); }
form.inline { display: inline; }
table.grid tr.revoked td { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Przyciski: <button> i <a class="button"> */
button, a.button {
    display: inline-block; font: inherit; padding: 0.4rem 0.9rem; border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-alt); color: var(--fg); cursor: pointer; text-decoration: none; line-height: 1.4;
}
button:hover, a.button:hover { background: #eaeef2; }
a.button.primary { font-weight: 600; border-color: #1f883d; background: #1f883d; color: #fff; }
a.button.primary:hover { background: #1a7f37; }
button.danger { border-color: var(--bad); background: var(--bad); color: #fff; font-weight: 600; }
button.danger:hover { background: #a40e26; }
button.link { border: none; }

.title-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.title-row h1 { margin: 0; }
.title-row a.button { margin-left: auto; }

.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters input, .filters select, .form select, .form textarea {
    font: inherit; font-weight: normal; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 4px; background: #fff;
}
.filters input { min-width: 18rem; flex: 1; }

.form.wide { max-width: 560px; }
.form .row { display: flex; gap: 1rem; }
.form .row > label { flex: 1; }
.actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 1px solid; }
.badge.ok { color: var(--ok); border-color: #aceebb; background: #dafbe1; }
.badge.bad { color: var(--bad); border-color: #ffcecb; background: #ffebe9; }
.badge.warn { color: var(--warn); border-color: #f5e0a0; background: #fff8c5; }

.alert.warn { color: var(--warn); border-color: #f5e0a0; background: #fff8c5; }
.inline-form { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

textarea.key { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; resize: vertical; background: var(--bg-alt); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 6px; }
.card.form label { font-weight: normal; }
.card .button, .card button { align-self: flex-start; }

.pre { white-space: pre-wrap; }

.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }

fieldset.scopes { border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.9rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
fieldset.scopes legend { font-weight: 600; padding: 0 0.3rem; }
.form label.check { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: normal; }
pre.mono { background: var(--bg-alt); padding: 0.75rem; border-radius: 4px; overflow-x: auto; color: var(--fg); }

main {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}

h1 { margin-top: 0; font-size: 1.5rem; }

.muted { color: var(--muted); }

.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; color: var(--muted); word-break: break-all; }

table.status { border-collapse: collapse; width: 100%; }
table.status th, table.status td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.status th { width: 14rem; font-weight: 600; }
table.status tr.ok td { color: var(--ok); }
table.status tr.warn td { color: var(--warn); }
table.status tr.bad td { color: var(--bad); }

.bottom { text-align: center; color: var(--muted); font-size: 0.85rem; padding-bottom: 1.5rem; }


/* S9: dwuskładnikowe logowanie */
.qr svg { display: block; border: 1px solid var(--border); border-radius: 4px; }
.twofa-option { margin-bottom: 1.5rem; }
.twofa-option h2 { margin: 0; font-size: 1.1rem; }
form.inline-action { display: inline; margin-left: 0.75rem; }