:root { --bg:#f6f4ef; --card:#fff; --ink:#1d1b16; --mut:#6d665a; --line:#e3ddd0; --acc:#b4690e; --ok:#2f7d32; --bad:#b3261e; --warn:#a15c00; --in:#efe9dc; --out:#fbe7c8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#16140f; --card:#211e17; --ink:#efe9dc; --mut:#a59c8b; --line:#3a3428; --acc:#e7a24a; --ok:#7cc47f; --bad:#f2827a; --warn:#e7b05a; --in:#2a261d; --out:#3a2d18; } }
:root[data-theme="dark"] { --bg:#16140f; --card:#211e17; --ink:#efe9dc; --mut:#a59c8b; --line:#3a3428; --acc:#e7a24a; --ok:#7cc47f; --bad:#f2827a; --warn:#e7b05a; --in:#2a261d; --out:#3a2d18; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { min-height: 100dvh; padding-bottom: 40vh; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: 0; z-index: 2; }
.brand { display: flex; gap: 10px; align-items: center; }
.logo { font-size: 26px; }
.sub { font-size: 12px; color: var(--mut); }
.badge { font-size: 12px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--mut); white-space: nowrap; }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.bad { color: var(--bad); border-color: var(--bad); }
.tabs { display: flex; gap: 4px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; padding: 8px 12px; border-radius: 8px; color: var(--mut); font: inherit; cursor: pointer; white-space: nowrap; }
.tabs button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
main { padding: 16px; max-width: 980px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.card h3 { margin: 0 0 6px; font-size: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.stat .v { font-size: 22px; font-weight: 650; }
.stat .k { font-size: 12px; color: var(--mut); }
.mut, .amuted { color: var(--mut); font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; }
.phrase { font-family: ui-monospace, Menlo, monospace; font-size: 15px; background: var(--in); padding: 6px 8px; border-radius: 8px; display: inline-block; }
button.b { font: inherit; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
button.b.pri { background: var(--acc); border-color: var(--acc); color: #fff; }
button.b.danger { color: var(--bad); border-color: var(--bad); }
button.b:disabled { opacity: .45; cursor: not-allowed; }
input, textarea, select { font: inherit; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); max-width: 100%; }
input.wide, textarea.wide { width: 100%; }
label.f { display: block; font-size: 12px; color: var(--mut); margin-top: 8px; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--in); }
.pill.paused { background: var(--out); color: var(--warn); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.log { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bubble { max-width: 88%; padding: 8px 11px; border-radius: 12px; background: var(--in); white-space: pre-wrap; word-break: break-word; }
.bubble.out { align-self: flex-end; background: var(--out); }
.bubble .who { display: block; font-size: 12px; color: var(--mut); margin-bottom: 3px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.placeholder { color: var(--mut); padding: 20px 0; }
.recovery { font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: 1px; padding: 10px; background: var(--out); border-radius: 8px; display: inline-block; }
#toast { position: fixed; left: 50%; top: calc(var(--vv-top, 0px) + var(--vv-h, 100vh) - 20px); transform: translate(-50%, -100%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 10px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; z-index: 10; }
#toast.on { opacity: 1; }
/* Sheets fill the VISIBLE area (visualViewport, set by app.js fitView), not 100vh: the iOS keyboard never covers them. */
.sheet { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv-h, 100%); background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 10px; z-index: 5; overscroll-behavior: contain; }
.sheet > .card { width: min(560px, 100%); max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 0; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.sheet .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 14px -14px -14px; padding: 10px 14px 14px; position: sticky; bottom: -14px; background: var(--card); border-top: 1px solid var(--line); }
.sheet .recovery { display: block; text-align: center; user-select: all; -webkit-user-select: all; word-break: break-all; }
.tablewrap { overflow-x: auto; }
/* iOS zooms the page when a focused field's text is under 16px (SuttonChat uses 16px for the same reason), which
   threw the field off screen inside the tile. scroll-margin keeps a revealed field clear of the sticky header. */
input, textarea, select { font-size: 16px; scroll-margin-top: calc(var(--top-h, 64px) + 8px); scroll-margin-bottom: 12px; }
textarea { resize: vertical; }
input.rkin { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; text-transform: uppercase; }
@media (max-width: 600px) { main { padding: 12px 16px; } .bubble { max-width: 96%; } }
.share { background: var(--in); border-radius: 10px; padding: 10px; margin: 8px 0 10px; }
.share .mono { font-size: 13px; margin: 4px 0; user-select: all; -webkit-user-select: all; }
/* BEERS Reader additions */
.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kv > .mut { grid-column: 1 / -1; font-size: 12px; }
.kv > .phrase { justify-self: start; }
button.b.small { padding: 4px 10px; font-size: 13px; }
.grow { flex: 1; }
.spacer { height: 10px; }
.filerow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
a.b { display: inline-block; text-decoration: none; font: inherit; padding: 7px 12px; border-radius: 8px; }
a.b.pri { background: var(--acc); color: #fff; }