:root { --red:#E30613; --ink:#111; --bg:#F6F6F6; --mute:#8A8A8A; --line:#E6E6E6; --white:#fff; --font:"Manrope",system-ui,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--font); background:#111; color:var(--ink); }
.app { max-width:430px; height:100%; margin:0 auto; background:var(--bg); display:flex; flex-direction:column; position:relative; overflow:hidden; }
.screen { flex:1; overflow:auto; padding:16px 16px 88px; }
h1 { font-size:26px; font-weight:800; letter-spacing:-.03em; }
.sub { color:var(--mute); font-size:13px; margin-top:4px; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px; margin-top:12px; }
.connect { display:flex; justify-content:space-between; align-items:center; }
.red { color:var(--red); font-weight:800; }
.banner {
  margin-top:14px; height:168px; border-radius:22px; overflow:hidden; color:#fff;
  background: linear-gradient(90deg,#111 0%, #2A0A0C 55%, #E30613 140%);
  padding:18px; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer;
}
.banner small { opacity:.6; font-weight:800; letter-spacing:.12em; font-size:11px; }
.banner b { font-size:22px; line-height:1.15; margin:6px 0; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 12px; min-height:92px; cursor:pointer; }
.tile .dot { width:28px; height:28px; border-radius:10px; margin-bottom:10px; }
.tile span { display:block; font-weight:800; font-size:15px; }
.tile small { color:var(--mute); font-size:12px; }
.nav {
  position:absolute; left:0; right:0; bottom:0; height:72px; background:#fff;
  border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr);
}
.nav button {
  background:none; border:0; font:inherit; font-size:11px; font-weight:700; color:var(--mute); padding-top:8px; cursor:pointer;
}
.nav button.on { color:var(--red); }
.nav svg { display:block; margin:0 auto 4px; }
.hidden { display:none; }
.bar { background:var(--red); color:#fff; text-align:center; font-weight:800; padding:14px; border-radius:16px; cursor:pointer; }
.dtc { border-left:4px solid var(--red); }
.msg { border-radius:16px; padding:12px; margin-top:10px; font-size:14px; line-height:1.4; }
.msg.me { background:#111; color:#fff; margin-left:40px; }
.msg.ai { background:#fff; border:1px solid var(--line); margin-right:24px; }
.rpm { font-size:48px; font-weight:800; letter-spacing:-.04em; }
.chart { height:120px; margin-top:12px; }
.price { background:#141414; color:#fff; border-radius:22px; padding:18px; margin-top:12px; }
.price .sum { font-size:32px; font-weight:800; }
.buy { display:block; margin-top:12px; background:var(--red); color:#fff; text-align:center; text-decoration:none; font-weight:800; padding:12px; border-radius:14px; }
.site-link { position:absolute; top:8px; right:10px; z-index:5; font-size:11px; font-weight:800; color:var(--red); text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px 8px; }
.think { display:none; background:#EFEFEF; color:#555; border-radius:14px; padding:9px 12px; margin-top:8px; font-size:12px; font-weight:700; }
.think.show { display:block; animation: pop .35s ease; }
.think.done { color:#1FA85A; }
.pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pill { background:#F6F6F6; border:1px solid var(--line); border-radius:10px; padding:5px 8px; font-size:11px; font-weight:800; }
.pill.red { color:var(--red); border-color:#ffd0d3; background:#fff5f5; }
.case, .rev { font-size:12px; line-height:1.35; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); color:#444; }
.case b, .rev b { display:block; font-size:11px; color:var(--mute); letter-spacing:.06em; text-transform:uppercase; margin-bottom:3px; }
.msg.play { display:none; }
.msg.play.show { display:block; animation: pop .4s ease; }
@keyframes pop { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.verdict { font-weight:800; margin-top:8px; }
