* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #0a0a0a; color: #f2f2f2; padding-bottom: 74px; }
header { position: sticky; top: 0; background: #000; border-bottom: 2px solid #FFD700; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.logo { color: #FFD700; font-weight: 800; letter-spacing: .5px; }
.badge { font-size: 11px; background: #333; color: #FFD700; padding: 4px 8px; border-radius: 999px; }
.badge.live { background: #14532d; color: #bbf7d0; }
main { padding: 14px; max-width: 720px; margin: 0 auto; }
.page { display: none; } .page.active { display: block; }
h2 { color: #FFD700; margin: 8px 0 10px; } h3 { margin: 14px 0 8px; }
.card { background: #161616; border: 1px solid #2c2c2c; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.note { color: #a3a3a3; font-size: 12.5px; line-height: 1.45; }
.btn { background: #FFD700; color: #000; border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 700; width: 100%; cursor: pointer; }
.dir-buy { color: #22c55e; } .dir-sell { color: #ef4444; }
.row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed #262626; }
.row:last-child { border-bottom: 0; }
.status { font-weight: 800; }
.meter { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: #262626; }
#buyerBar { background: #22c55e; height: 100%; width: 50%; transition: width .5s; }
#sellerBar { background: #ef4444; height: 100%; width: 50%; transition: width .5s; }
.meter-labels { display: flex; justify-content: space-between; margin-top: 6px; font-weight: 700; }
.tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.tab { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid #333; background: #161616; color: #eee; cursor: pointer; }
.tab.active { background: #FFD700; color: #000; font-weight: 700; }
.winrate { font-size: 42px; font-weight: 900; color: #FFD700; text-align: center; }
.trade { font-size: 13.5px; }
.tv-wrap { height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid #2c2c2c; }
.chat { height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 9px 12px; border-radius: 12px; max-width: 85%; line-height: 1.4; font-size: 14px; }
.msg.user { background: #FFD700; color: #000; align-self: flex-end; }
.msg.ai { background: #222; align-self: flex-start; }
.chat-input { display: flex; gap: 8px; } .chat-input input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #333; background: #161616; color: #fff; }
.chat-input .btn { width: auto; }
select { width: 100%; padding: 12px; border-radius: 10px; background: #161616; color: #fff; border: 1px solid #333; margin-top: 8px; }
nav { position: fixed; bottom: 0; left: 0; right: 0; background: #000; border-top: 2px solid #FFD700; display: flex; z-index: 5; }
.navbtn { flex: 1; background: none; border: 0; color: #a3a3a3; padding: 8px 0 10px; font-size: 17px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.navbtn span { font-size: 11px; }
.navbtn.active { color: #FFD700; }
.countdown { color: #FFD700; font-weight: 800; }