:root { --orange:#c8501a; --orange-d:#a53f12; --cream:#fff6ec; --ink:#2b1d14; --muted:#7a6558; --line:#ecd9c6; --card:#fff; --ok:#237a3b; --bad:#b3261e; --r:14px; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--cream); color:var(--ink); padding-bottom:env(safe-area-inset-bottom); }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem 1rem; background:var(--orange); color:#fff; }
.brand { display:flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-weight:700; }
.logo { background:#fff; color:var(--orange); border-radius:999px; padding:.25rem .5rem; font-size:.8rem; }
nav { display:flex; gap:.25rem; flex-wrap:wrap; }
nav a, nav button { color:#fff; background:transparent; border:0; padding:.4rem .6rem; border-radius:8px; font:inherit; text-decoration:none; cursor:pointer; }
nav a.on, nav a:hover, nav button:hover { background:rgba(255,255,255,.18); }
main { max-width:960px; margin:0 auto; padding:1rem; }
.pad { padding:1rem; }
h1 { font-size:1.5rem; margin:.5rem 0 1rem; } h2 { font-size:1.15rem; margin:1.25rem 0 .5rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1rem; margin:.75rem 0; }
.grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.stat { text-align:center; } .stat b { display:block; font-size:1.8rem; color:var(--orange); }
.btn { display:inline-block; background:var(--orange); color:#fff; border:0; border-radius:12px; padding:.75rem 1.1rem; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--orange-d); } .btn:disabled { opacity:.55; cursor:not-allowed; }
.btn.ghost { background:#fff; color:var(--orange); border:1px solid var(--orange); } .btn.bad { background:var(--bad); } .btn.ok { background:var(--ok); }
.btn.big { width:100%; padding:1rem; font-size:1.1rem; } .btn.sm { padding:.35rem .6rem; font-size:.85rem; border-radius:8px; }
label { display:block; font-weight:600; margin:.7rem 0 .25rem; }
input, select, textarea { width:100%; padding:.7rem; border:1px solid var(--line); border-radius:10px; font:inherit; background:#fff; }
textarea { min-height:5rem; }
.row { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; } .row > * { flex:1 1 auto; }
.pill { display:inline-block; padding:.15rem .6rem; border-radius:999px; font-size:.8rem; background:#f6e2cf; color:var(--orange-d); font-weight:600; }
.pill.ok { background:#dff3e4; color:var(--ok); } .pill.bad { background:#fbe0de; color:var(--bad); } .pill.mute { background:#eee; color:#555; }
.muted { color:var(--muted); } .err { color:var(--bad); font-weight:600; }
.choices { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.choice { padding:.8rem; border:2px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; text-align:center; font:inherit; }
.choice.sel { border-color:var(--orange); background:#fff0e1; font-weight:700; }
.steps { display:flex; gap:.3rem; margin:.25rem 0 1rem; } .steps i { flex:1; height:6px; border-radius:3px; background:var(--line); } .steps i.on { background:var(--orange); }
.pulse { width:84px; height:84px; margin:1rem auto; border-radius:50%; background:var(--orange); animation:pulse 1.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(200,80,26,.5);} 100% { box-shadow:0 0 0 40px rgba(200,80,26,0);} }
.offer { border:2px solid var(--orange); }
.bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin:.5rem 0; } .bar > div { height:100%; background:var(--orange); transition:width .25s linear; }
table { width:100%; border-collapse:collapse; font-size:.9rem; } th, td { text-align:left; padding:.45rem .4rem; border-bottom:1px solid var(--line); vertical-align:top; }
.scroll { overflow-x:auto; }
.chat { display:flex; flex-direction:column; gap:.4rem; max-height:55vh; overflow:auto; padding:.5rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.msg { max-width:80%; padding:.5rem .75rem; border-radius:14px; background:#f3ece4; } .msg.me { align-self:flex-end; background:var(--orange); color:#fff; }
#toasts { position:fixed; left:0; right:0; bottom:1rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; pointer-events:none; z-index:20; }
.toast { background:#2b1d14; color:#fff; padding:.6rem 1rem; border-radius:12px; max-width:90%; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.toggle { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
pre { background:#fbf3ea; padding:.6rem; border-radius:8px; overflow:auto; font-size:.8rem; }
@media (min-width:700px) { main { padding:1.5rem; } }