:root{--bg:#0b0c10;--card:#16181f;--fg:#eceef3;--mut:#8a90a0;--acc:#f5c518;--hi:#3ddc84;--lo:#ff6b6b;--mid:#c9ced8}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.35 -apple-system,system-ui,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
header{position:sticky;top:0;z-index:5;background:rgba(11,12,16,.96);backdrop-filter:blur(8px);padding:calc(env(safe-area-inset-top) + 8px) 12px 6px;border-bottom:1px solid #222}
.top{display:flex;align-items:center;gap:8px}h1{font-size:20px;margin:0;flex:1;color:var(--acc);letter-spacing:.5px}
.pill{background:#222;padding:2px 10px;border-radius:99px;font-size:14px}
#menuBtn{background:none;border:0;color:var(--fg);font-size:24px}
#q{width:100%;margin:8px 0 6px;padding:11px 12px;border-radius:12px;border:1px solid #333;background:#1b1e26;color:var(--fg);font-size:17px}
.tabs{display:flex;gap:4px}.tabs button{flex:1;padding:8px 0;border:0;border-radius:10px;background:#1b1e26;color:var(--mut);font-weight:600;font-size:14px}
.tabs .on{background:var(--acc);color:#000}
.chips{display:flex;gap:6px;overflow-x:auto;padding:6px 0;scrollbar-width:none}.chips button{flex:none;padding:5px 12px;border-radius:99px;border:1px solid #333;background:none;color:var(--fg);font-size:13px}.chips .on{background:#fff;color:#000}
.tools{display:flex;gap:14px;font-size:13px;color:var(--mut)}
main{padding:6px 10px 40px}
section h2{display:flex;align-items:center;gap:6px;font-size:16px;margin:0;padding:13px 6px;border-bottom:1px solid #1f222b;cursor:pointer}
section h2 .c{margin-left:auto;color:var(--mut);font-weight:400;font-size:14px}
.ht{background:#3a2a5c;color:#d8c6ff;font-size:11px;padding:1px 7px;border-radius:99px;font-weight:600}
.beer{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:12px;padding:10px;margin:6px 0}
.beer.had{opacity:.55}.info{flex:1;min-width:0}.nm{font-weight:600}.meta,.note{font-size:13px;color:var(--mut)}.note{font-style:italic}.my{color:var(--acc);font-size:13px}
.rt{min-width:48px;text-align:center;font-weight:700;font-size:14px;text-decoration:none;padding:6px 4px;border-radius:8px;background:#20232c;color:var(--mut)}
.rt.hi{color:#000;background:var(--hi)}.rt.lo{color:#fff;background:#7a2b2b}.rt.mid{color:var(--mid)}
.got{min-width:76px;min-height:48px;border-radius:12px;border:2px solid var(--acc);background:none;color:var(--acc);font-weight:700;font-size:15px}
.got[aria-pressed=true]{background:var(--acc);color:#000;font-size:22px}
.hint,.small{color:var(--mut);font-size:13px}.recap{text-align:center;padding:16px;background:var(--card);border-radius:14px}.big{font-size:48px;font-weight:800;color:var(--acc)}
h3{margin:18px 4px 4px}
#a2hs{background:#2a2410;color:var(--acc);padding:10px 12px;font-size:14px}
dialog{background:#16181f;color:var(--fg);border:1px solid #333;border-radius:16px;width:min(92vw,420px)}dialog::backdrop{background:#000a}
dialog button,.btn{display:block;width:100%;margin:6px 0;padding:11px;border-radius:10px;border:1px solid #333;background:#20232c;color:var(--fg);font-size:15px;text-align:center}
dialog a{color:var(--acc)}.row{display:flex;gap:8px}.primary{background:var(--acc)!important;color:#000!important;font-weight:700}
.stars{display:flex;gap:4px}.stars button{font-size:30px;background:none;border:0;color:#444;padding:4px}.stars .on{color:var(--acc)}
textarea{width:100%;min-height:70px;background:#0f1116;color:var(--fg);border:1px solid #333;border-radius:10px;padding:8px;font-size:16px}