:root { --bg:#10150e; --panel:#1a2117; --panel2:#202a1c; --text:#edf4e8; --muted:#9ba995; --acid:#b8e65b; --danger:#f36a54; --line:rgba(237,244,232,.12); font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -20%,#344624 0,var(--bg) 45%); }
button,input { font:inherit; }
button { border:0; border-radius:14px; background:var(--acid); color:#17200e; font-weight:800; padding:12px 14px; cursor:pointer; }
button:active { transform:scale(.98); }
button.ghost { padding:7px 10px; background:transparent; color:var(--muted); font-size:13px; }
.shell { width:min(100%,680px); margin:0 auto; padding:calc(16px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.mark { color:var(--acid); letter-spacing:.14em; font-size:13px; font-weight:900; }
.loading,.error { min-height:100vh; display:grid; place-content:center; text-align:center; padding:30px; gap:10px; }
.loading .mark,.error .mark { font-size:22px; }
h1,h2,h3,p { margin:0; } h1 { font-size:26px; } h2 { font-size:17px; } h3 { font-size:18px; } small,.muted { color:var(--muted); }
.hero,.panel,.card,.role,.status,.notice { border:1px solid var(--line); border-radius:20px; background:rgba(26,33,23,.92); }
.hero { padding:20px; margin-bottom:22px; background:linear-gradient(135deg,#26371b,#172014); } .hero h1 { margin:8px 0; }
.hero p { margin-bottom:16px; color:var(--muted); }.clickable { cursor:pointer; }
.section { margin:24px 0; }.section h2 { margin-bottom:12px; text-transform:uppercase; font-size:14px; letter-spacing:.08em; }
.cards { display:grid; gap:10px; }.card { padding:16px; }.card p { color:var(--muted); margin:8px 0 14px; }
.notice { margin-bottom:16px; padding:13px; color:var(--muted); }.notice.static { border-color:rgba(184,230,91,.25); }.notice:not(.static) { position:fixed; z-index:5; left:16px; right:16px; top:16px; color:#221a0e; background:#f3c454; }
.status { padding:17px; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }.status h1 { margin-top:3px; font-size:20px; }.status time { font-size:27px; font-variant-numeric:tabular-nums; color:var(--acid); font-weight:800; }
.role { padding:16px; margin-bottom:10px; background:linear-gradient(135deg,#253719,#1b2815); }.role h2 { color:var(--acid); margin:6px 0; }.role p { color:var(--muted); font-size:14px; }
.panel { padding:16px; margin-bottom:10px; }.panel>h2 { margin-bottom:12px; }.panel>p { color:var(--muted); font-size:14px; margin-bottom:12px; }
.systems { display:grid; gap:8px; }.system { display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px; padding:10px; border-radius:12px; background:var(--panel2); }.system div { display:flex; gap:8px; align-items:center; }.system b { color:var(--acid); }.system small { grid-column:1/-1; padding-left:28px; }.system.danger b { color:var(--danger); }
.action-grid,.vote-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.action-grid button,.vote-list button { min-height:70px; display:grid; place-content:center; gap:5px; text-align:center; }.action-grid button span { font-size:12px; }.vote-list { grid-template-columns:1fr; }.vote-list button { min-height:auto; text-align:left; display:block; color:var(--text); background:var(--panel2); }.selection h2 { color:var(--acid); margin-top:5px; }
.reports p { white-space:normal; padding:10px 0; border-top:1px solid var(--line); font-size:14px; }.reports p:first-of-type { border-top:0; }.chat { margin-top:16px; }.chat-message { border-top:1px solid var(--line); padding:10px 0; }.chat-message b { font-size:13px; }.chat-message b span { color:var(--muted); font-weight:500; }.chat-message p { margin-top:4px; line-height:1.35; }.chat form { display:flex; gap:8px; margin-top:12px; }.chat input { min-width:0; flex:1; border:1px solid var(--line); background:#11170f; border-radius:12px; padding:12px; color:var(--text); }.chat form button { padding:10px; font-size:12px; }
@media (min-width:560px) { .action-grid { grid-template-columns:repeat(3,1fr); } }