*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07070c;--bg2:#0c0c14;--bg3:#12121e;--surface:#181828;--surface2:#1e1e30;
  --border:#2a2a40;--border2:#3a3a55;
  --text:#c8c8d8;--text2:#8888a0;--text3:#5a5a70;
  --red:#ff2244;--red2:#cc1133;--red-glow:rgba(255,34,68,.15);
  --green:#00ff41;--green2:#00cc33;--green-glow:rgba(0,255,65,.12);
  --amber:#ffb000;--amber2:#cc8c00;--amber-glow:rgba(255,176,0,.1);
  --cyan:#00e5ff;--cyan2:#00b8cc;
  --font-mono:'Courier New',Consolas,monospace;
  --font-sans:system-ui,-apple-system,sans-serif;
  --radius:4px;
}
html{font-size:14px}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);min-height:100vh;overflow-x:hidden}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
input,textarea,select{font-family:var(--font-mono);background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--red)}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

.scanline{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px)}

.app{display:grid;grid-template-columns:280px 1fr 320px;grid-template-rows:auto 1fr;min-height:100vh;max-width:1400px;margin:0 auto}
@media(max-width:1100px){.app{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}}

/* header */
.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;
  background:var(--bg2);border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap}
.topbar .brand{display:flex;align-items:center;gap:10px}
.topbar .brand h1{font-size:1.1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red)}
.topbar .brand .eye{font-size:1.4rem;filter:drop-shadow(0 0 6px var(--red))}
.topbar .tagline{font-size:.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:3px}
.topbar .auth-area{display:flex;align-items:center;gap:10px}
.balance-display{font-family:var(--font-mono);font-size:.85rem;color:var(--green);padding:4px 10px;
  border:1px solid rgba(0,255,65,.2);border-radius:var(--radius);background:var(--green-glow)}
.login-btn{padding:6px 14px;font-size:.78rem;text-transform:uppercase;letter-spacing:1px;
  border:1px solid var(--red);color:var(--red);border-radius:var(--radius);transition:all .2s}
.login-btn:hover{background:var(--red);color:#fff}
.login-btn.ghost{border-color:var(--border2);color:var(--text2)}.login-btn.ghost:hover{border-color:var(--text2)}

/* sidebar */
.sidebar{background:var(--bg2);border-right:1px solid var(--border);padding:16px;overflow-y:auto}
.sidebar h2{font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--text3);margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid var(--border)}
.leaderboard-list{list-style:none}
.leaderboard-list li{display:flex;justify-content:space-between;padding:6px 0;font-size:.82rem;
  border-bottom:1px solid rgba(42,42,64,.5);font-family:var(--font-mono)}
.leaderboard-list li .rank{color:var(--amber);width:24px}
.leaderboard-list li .name{flex:1;color:var(--text2)}
.leaderboard-list li .pts{color:var(--green)}
.sidebar .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;text-align:center}
.stat-card .val{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--cyan)}
.stat-card .lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-top:2px}

/* main market area */
.markets-area{padding:16px;overflow-y:auto}
.markets-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.markets-toolbar .filter-btn{padding:4px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:1px;
  border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);transition:all .15s}
.markets-toolbar .filter-btn.active,.markets-toolbar .filter-btn:hover{border-color:var(--red);color:var(--red)}
.create-btn{margin-left:auto;padding:6px 14px;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;
  background:var(--red);color:#fff;border-radius:var(--radius);transition:opacity .2s}
.create-btn:hover{opacity:.85}

.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.market-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:14px;
  transition:border-color .2s;cursor:pointer;position:relative;overflow:hidden}
.market-card:hover{border-color:var(--red)}
.market-card.resolved{opacity:.7}.market-card.resolved::after{content:'RESOLVED';position:absolute;top:10px;right:-28px;
  background:var(--amber);color:#000;font-size:.6rem;font-weight:700;padding:2px 32px;transform:rotate(45deg);letter-spacing:1px}
.market-card .category{font-size:.6rem;text-transform:uppercase;letter-spacing:2px;color:var(--amber);margin-bottom:6px}
.market-card h3{font-size:.9rem;color:var(--text);margin-bottom:8px;line-height:1.35}
.market-card .odds-bar{display:flex;height:24px;border-radius:3px;overflow:hidden;margin-bottom:8px}
.market-card .odds-yes{background:var(--green2);display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#000;min-width:28px;transition:width .3s}
.market-card .odds-no{background:var(--red2);display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;color:#fff;min-width:28px;transition:width .3s}
.market-card .meta{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text3)}
.market-card .volume{color:var(--cyan)}

/* bet panel (right sidebar) */
.bet-panel{background:var(--bg2);border-left:1px solid var(--border);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.bet-panel h2{font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--text3);
  padding-bottom:6px;border-bottom:1px solid var(--border)}
.bet-panel .no-selection{color:var(--text3);font-size:.82rem;text-align:center;padding:40px 0}
.bet-panel .selected-market h3{font-size:.88rem;margin-bottom:8px}
.bet-panel .selected-market .current-odds{font-family:var(--font-mono);font-size:.8rem;color:var(--text2);margin-bottom:12px}

.bet-sides{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.side-btn{padding:10px;text-align:center;border:2px solid var(--border);border-radius:var(--radius);
  font-weight:700;font-size:.85rem;transition:all .2s}
.side-btn.yes{color:var(--green)}.side-btn.yes:hover,.side-btn.yes.active{border-color:var(--green);background:var(--green-glow)}
.side-btn.no{color:var(--red)}.side-btn.no:hover,.side-btn.no.active{border-color:var(--red);background:var(--red-glow)}
.side-btn .price{font-family:var(--font-mono);font-size:.7rem;display:block;margin-top:2px;opacity:.7}

.stake-input-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.stake-input-group label{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text3)}
.stake-input-group input{font-size:1rem;text-align:center}
.stake-presets{display:flex;gap:6px}
.stake-presets button{flex:1;padding:4px;font-size:.7rem;border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text2);font-family:var(--font-mono)}
.stake-presets button:hover{border-color:var(--amber);color:var(--amber)}

.payout-preview{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;
  font-family:var(--font-mono);font-size:.8rem;margin-bottom:12px}
.payout-preview .row{display:flex;justify-content:space-between;margin-bottom:4px}
.payout-preview .row.profit{color:var(--green);font-weight:700}

.place-bet-btn{width:100%;padding:12px;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  border-radius:var(--radius);transition:all .2s}
.place-bet-btn.yes-bet{background:var(--green2);color:#000}.place-bet-btn.no-bet{background:var(--red2);color:#fff}
.place-bet-btn:disabled{opacity:.4;cursor:not-allowed}
.place-bet-btn:not(:disabled):hover{filter:brightness(1.15)}

/* positions */
.positions-section{margin-top:auto}
.positions-section h2{font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--text3);
  margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.position-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 10px;margin-bottom:6px;font-size:.78rem}
.position-item .pos-market{color:var(--text);margin-bottom:3px;font-size:.72rem}
.position-item .pos-details{display:flex;justify-content:space-between;font-family:var(--font-mono)}
.position-item .pos-side.yes{color:var(--green)}.position-item .pos-side.no{color:var(--red)}
.position-item .pos-pnl.positive{color:var(--green)}.position-item .pos-pnl.negative{color:var(--red)}

/* modals */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:8px;width:100%;max-width:480px;
  padding:24px;position:relative}
.modal h2{font-size:1rem;color:var(--red);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px}
.modal .close-btn{position:absolute;top:12px;right:16px;font-size:1.2rem;color:var(--text3)}
.modal .close-btn:hover{color:var(--text)}
.modal .form-group{margin-bottom:12px}
.modal .form-group label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text3);margin-bottom:4px}
.modal .form-group input,.modal .form-group textarea,.modal .form-group select{width:100%}
.modal .form-group textarea{resize:vertical;min-height:60px}
.modal .submit-btn{width:100%;padding:12px;background:var(--red);color:#fff;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;border-radius:var(--radius);margin-top:8px;transition:opacity .2s}
.modal .submit-btn:hover{opacity:.85}

/* oracle chat panel */
.oracle-section{margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.oracle-section h2{font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--amber);
  margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.oracle-msgs{max-height:200px;overflow-y:auto;margin-bottom:8px}
.oracle-msg{padding:6px 0;font-size:.78rem;border-bottom:1px solid rgba(42,42,64,.3)}
.oracle-msg .oracle-role{font-weight:700;margin-bottom:2px}.oracle-msg .oracle-role.system{color:var(--amber)}
.oracle-msg .oracle-role.user{color:var(--cyan)}
.oracle-msg .oracle-text{color:var(--text2);line-height:1.4}
.oracle-form{display:flex;gap:6px}
.oracle-form input{flex:1;font-size:.8rem}
.oracle-form button{padding:6px 12px;background:var(--amber);color:#000;font-size:.72rem;font-weight:700;
  text-transform:uppercase;border-radius:var(--radius)}

/* notice */
.notice{padding:8px 16px;font-size:.78rem;border-radius:var(--radius);margin:0 16px 8px}
.notice.warn{background:var(--amber-glow);border:1px solid var(--amber);color:var(--amber)}
.notice.error{background:var(--red-glow);border:1px solid var(--red);color:var(--red)}
.notice.ok{background:var(--green-glow);border:1px solid var(--green);color:var(--green)}

/* admin bar */
.admin-bar{grid-column:1/-1;background:var(--surface);border-top:1px solid var(--border);padding:8px 20px;
  display:flex;align-items:center;gap:10px;font-size:.72rem;color:var(--text3)}
.admin-bar button{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius);
  font-size:.68rem;text-transform:uppercase;color:var(--text2)}
.admin-bar button:hover{border-color:var(--amber);color:var(--amber)}

/* responsive */
@media(max-width:1100px){
  .sidebar{border-right:none;border-bottom:1px solid var(--border)}
  .bet-panel{border-left:none;border-top:1px solid var(--border)}
  .market-grid{grid-template-columns:1fr}
}

/* animations */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.thinking{animation:pulse 1.5s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:.92}}
.topbar .brand h1{animation:flicker 4s ease-in-out infinite}