/* Shared look for the small site pages (sign-in, Requests inbox): the tool's tokens (DESIGN_C.md). */
:root {
  --bg: #f4ecdd; --paper: #fff9ee; --paper2: #f9f1e2; --ink: #2a1f3d; --muted: #7a6d8c; --soft: #d9ccb6; --shadow: #2a1f3d;
  --sun: #ffc83d; --sky: #58b5ff; --good: #13804f; --bad: #d02f47;
  --display: "Fredoka", "Nunito", system-ui, sans-serif; --body: "Nunito", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #1b1526; --paper: #261d34; --paper2: #2f2541; --ink: #f6eee0; --muted: #a79bb8; --soft: #3d3152; --shadow: #0f0a18; --good: #4fe0a3; --bad: #ff8593; color-scheme: dark } }
:root[data-theme="dark"] { --bg: #1b1526; --paper: #261d34; --paper2: #2f2541; --ink: #f6eee0; --muted: #a79bb8; --soft: #3d3152; --shadow: #0f0a18; --good: #4fe0a3; --bad: #ff8593; color-scheme: dark }
* { box-sizing: border-box; min-width: 0; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); }
main { max-width: 880px; margin: 0 auto; padding: 32px 16px 80px; }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0 0 12px; }
a { color: var(--ink); font-weight: 800; text-decoration-color: var(--sun); text-decoration-thickness: 2px; }
.card { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--shadow); padding: 20px; margin: 16px 0; }
input, textarea, select { font: inherit; color: inherit; background: var(--paper2); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; width: 100%; }
button { font: 700 15px var(--body); color: #2a1f3d; background: var(--sun); border: 3px solid var(--ink); border-radius: 999px; padding: 9px 18px; box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; }
button.ghost { background: transparent; color: var(--ink); box-shadow: none; border-width: 2px; padding: 5px 12px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > input { flex: 1 1 220px; width: auto; }
.muted { color: var(--muted); }
.ok { color: var(--good); font-weight: 700; }
.err { color: var(--bad); font-weight: 700; }
.mono { font-family: var(--mono); font-size: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--soft); vertical-align: top; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
@media (max-width: 560px) { .hide-sm { display: none; } }
[hidden] { display: none !important; }