:root { --ink:#16212b; --muted:#5b6b78; --line:#d9e1e7; --bg:#f3f6f8; --brand:#0f3d4a; --brand-2:#1a7f93; --danger:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; font-size:17px; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.center { text-align:center; }
.error { color:var(--danger); }
.wrap { max-width:640px; margin:0 auto; padding:20px 16px calc(32px + env(safe-area-inset-bottom)); }
.store { border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px; }
.store-name { font-weight:700; font-size:18px; color:var(--brand); }
h1 { font-size:24px; margin:0 0 12px; }
.player { background:#0b1a22; border-radius:12px; overflow:hidden; aspect-ratio:16/9; margin-bottom:16px; }
.player video { width:100%; height:100%; display:block; background:#000; }
.placeholder { height:100%; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; color:#cfe3ea; }
.play { width:56px; height:56px; border-radius:50%; background:var(--brand-2); color:#fff; display:grid; place-items:center; font-size:22px; }
.message { white-space:pre-wrap; font-size:17px; }
.rep { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin:20px 0; }
.rep-name { font-weight:700; }
.rep-store { color:var(--muted); font-size:15px; }
.rep-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.btn { display:inline-block; padding:10px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; text-decoration:none; font-size:15px; cursor:pointer; }
.btn.primary { background:var(--brand-2); border-color:var(--brand-2); color:#fff; }
.btn.big { padding:14px 20px; font-size:16px; }
.btn:disabled { opacity:.5; }
.foot { color:var(--muted); font-size:13px; text-align:center; margin-top:24px; }