:root {
  --black:#000; --panel:#0f0f0f; --line:#2a2a2a;
  --white:#fff; --dim:#9a9a9a; --orange:#f78702;
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--black); color:var(--white); }
main, #gate { max-width: 560px; margin: 0 auto; padding: 16px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 10px 0 18px; }
#logo { height: 34px; width: auto; }
.who { background:none; border:1px solid var(--line); color:var(--dim); border-radius:999px; padding:6px 12px; font-size:.8rem; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
h2 { font-size:1rem; color:var(--dim); margin: 26px 0 8px; }
.actions { display:grid; gap:12px; }
button.big { font-size:1.4rem; font-weight:700; padding:22px; border:0; border-radius:16px; cursor:pointer; }
button.big:active { transform: scale(.98); }
button.in { background:var(--orange); color:var(--black); }
button.out { background:var(--white); color:var(--black); }
.notelabel { color:var(--dim); font-size:.85rem; margin-top:4px; }
textarea { width:100%; background:var(--panel); color:var(--white); border:1px solid var(--line); border-radius:12px; padding:12px; font:inherit; resize:vertical; }
textarea:focus { outline:1px solid var(--orange); }
.status { min-height:3em; padding:12px; border-radius:12px; background:var(--panel); color:var(--dim); font-size:.95rem; white-space:pre-wrap; }
.status.ok { outline:1px solid var(--orange); color:var(--white); }
.status.warn { outline:1px solid var(--orange); color:var(--orange); }
.totals { color:var(--dim); margin-bottom:8px; }
#entries { list-style:none; padding:0; margin:0 0 12px; }
#entries li { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid #141414; font-size:.9rem; }
.pill { border-radius:999px; padding:2px 10px; font-size:.8rem; background:#141414; color:var(--orange); white-space:nowrap; }
button.ghost { background:none; border:1px solid var(--line); color:var(--dim); border-radius:10px; padding:10px 14px; cursor:pointer; }
.warn { color:var(--orange); min-height:1.2em; }
#gate { text-align:center; padding-top:12vh; }
#gate img { height:44px; width:auto; margin-bottom:18px; }
#gate p { color:var(--dim); }