:root{--gold:#ffd34d;--gold-deep:#b68d2b}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;color:#f4f4f7;background:radial-gradient(1600px 800px at 50% -10%, #1a1c27 0%, #0b0c12 40%, #06070b 100%)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#0f1016;border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:44px;height:44px}
.brand-text .title{font-weight:900;letter-spacing:.08em;background:linear-gradient(180deg,var(--gold),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:18px}
.meta{display:flex;align-items:center;gap:14px}.info{display:flex;flex-direction:column;align-items:flex-end}.label{opacity:.6;font-size:12px}.value{font-weight:800}
.layout{max-width:1250px;margin:24px auto;padding:0 16px;display:grid;grid-template-columns:260px 1fr 300px;gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px}
.values-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.values-list li{font-size:13px;padding:6px 10px;border-radius:10px;background:#15151c;border:1px solid rgba(255,255,255,.08)}
.cases-grid{display:grid;grid-template-columns:repeat(6, minmax(120px,1fr));gap:12px}
.case{position:relative;aspect-ratio:4/3;border-radius:12px;background:linear-gradient(180deg,#2d2d35,#1c1c22);border:1px solid #2a2a31;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.case .plate{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);padding:6px 10px;border-radius:8px;background:linear-gradient(180deg,#3b3013,#221b0a);border:1px solid var(--gold-deep)}.case .plate .num{font-weight:900;color:var(--gold)}
.case.open{filter:grayscale(.35) brightness(.8)} .case.open .plate{opacity:.6}
.offer-amount{font-weight:900;font-size:28px;background:linear-gradient(180deg,var(--gold),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.host-agent{position:fixed;left:20px;bottom:24px;display:flex;align-items:flex-end;gap:12px;z-index:9999}
.host-avatar{width:100px;height:140px;object-fit:contain}
.speech-bubble{max-width:300px;background:#111;color:var(--gold);padding:12px 14px;border-radius:14px;border:2px solid var(--gold-deep);font-weight:700}
.controls{display:flex;align-items:center;gap:8px}.controls input[type=checkbox]{accent-color:#ffd34d}.controls input[type=range]{width:120px}
.reveal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:#0b0c12;background:linear-gradient(180deg,#f1d36a,#c49b2c);border-top:2px solid #b68d2b;border-bottom:2px solid #b68d2b;opacity:0;transform:scale(.92);transition:.15s ease}
.case.open .reveal{opacity:1;transform:scale(1)}

/* --- Buttons --- */
.btn{cursor:pointer;border:none;border-radius:12px;padding:10px 14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:filter .15s ease, opacity .15s ease}
.btn:disabled{opacity:.6;filter:grayscale(.4);cursor:not-allowed}
.btn.ghost{background:#13141a;color:#d8d8dd;border:1px solid rgba(255,255,255,.12)}
.btn.primary{background:linear-gradient(180deg,#33280f,#201a0a);color:var(--gold);border:1px solid var(--gold-deep)}
.btn.deal{background:linear-gradient(180deg,#1b3312,#121f0c);color:#c9ffb1;border:1px solid #5f9d4e}
.btn.nodeal{background:linear-gradient(180deg,#3a1616,#270f0f);color:#ffb1b1;border:1px solid #9d4e4e}