/* css/01-base.css — theme tokens, topbar, layout, sidebar, main feed (extracted from index.html) */
/* ============================= THEME TOKENS ============================= */
:root{
  --green:#1c875b; --green-2:#22a06d; --green-glow:rgba(34,160,109,.35);
  --gold:#fdd62e; --gold-2:#f5c518;
  --pos:#22c07a; --neg:#ef4d5a; --live:#ff4d4f;
}
html[data-theme="dark"]{
  --bg:#0f0f13; --bg-2:#15151b; --panel:#181820; --panel-2:#1e1e28;
  --panel-3:#23232f; --line:#2a2a38; --line-2:#33334a;
  --txt:#eef0f4; --txt-2:#a9adba; --txt-3:#71768a;
  --odds-bg:#22232e; --odds-hover:#2c2e3d; --input:#101018;
  --topbar:#121218; --sidebar:#141419; --shadow:rgba(0,0,0,.5);
}
html[data-theme="light"]{
  --bg:#eef1f5; --bg-2:#e6eaef; --panel:#ffffff; --panel-2:#f5f7fa;
  --panel-3:#eef1f5; --line:#dfe4ea; --line-2:#cdd4dd;
  --txt:#12141a; --txt-2:#5b6373; --txt-3:#8b93a3;
  --odds-bg:#f1f4f8; --odds-hover:#e6ebf2; --input:#f0f3f7;
  --topbar:#0f2e22; --sidebar:#ffffff; --shadow:rgba(20,30,50,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI',Inter,Roboto,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--txt); font-size:14px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}
.hidden{display:none !important}
.flag{width:18px;height:13px;border-radius:2px;object-fit:cover;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);font-size:12px;line-height:13px;text-align:center}

/* ============================= TOP BAR ============================= */
#topbar{
  position:sticky;top:0;z-index:60;height:60px;display:flex;align-items:center;
  gap:18px;padding:0 18px;background:var(--topbar);
  border-bottom:1px solid rgba(0,0,0,.35);
  background-image:linear-gradient(90deg,rgba(28,135,91,.14),transparent 55%);
}
.logo{display:flex;align-items:center;font-size:26px;font-weight:800;letter-spacing:-1px;
  cursor:pointer;user-select:none;white-space:nowrap}
.logo .w{color:#fff}
html[data-theme="light"] .logo .w{color:#fff}
.logo .dot{color:var(--gold)}
.logo .g{color:var(--green-2)}
.nav-center{display:flex;gap:6px;margin:0 auto}
.nav-btn{padding:9px 20px;border-radius:8px;font-weight:600;font-size:15px;color:var(--txt-2);
  position:relative;transition:.15s;white-space:nowrap}
.nav-btn:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.nav-btn.active{color:#fff}
.nav-btn.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:3px;
  background:var(--green-2);border-radius:3px}
.nav-btn .soon{font-size:9px;background:var(--gold);color:#1b1b1b;border-radius:4px;
  padding:1px 4px;margin-left:5px;font-weight:800;vertical-align:middle}
.topbar-search{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.07);
  border:1px solid transparent;border-radius:8px;padding:7px 11px;width:210px;transition:.15s}
.topbar-search:focus-within{border-color:var(--green-2);background:rgba(255,255,255,.1);width:250px}
.topbar-search input{background:none;border:none;outline:none;color:var(--txt);width:100%;font-size:13px}
.topbar-search input::placeholder{color:var(--txt-3)}
.topbar-search svg{color:var(--txt-3);flex:none}
.topbar-right{display:flex;align-items:center;gap:12px}
.btn-deposit{background:linear-gradient(180deg,var(--green-2),var(--green));color:#fff;
  font-weight:700;padding:9px 18px;border-radius:8px;font-size:14px;box-shadow:0 4px 14px var(--green-glow);
  transition:.15s}
.btn-deposit:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bal-pill{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;cursor:pointer;padding:2px 4px}
.bal-pill .lbl{font-size:9px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.5px}
.bal-pill .amt{font-size:15px;font-weight:700;color:var(--gold)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--green-2),#0d5e3f);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;cursor:pointer;
  border:2px solid rgba(255,255,255,.15);font-size:14px}

/* profile dropdown */
.dropdown{position:absolute;top:56px;right:14px;width:290px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px var(--shadow);
  padding:14px;z-index:80;animation:pop .14s ease}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.dd-user{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dd-user .avatar{width:44px;height:44px}
.dd-user b{font-size:15px}.dd-user span{font-size:12px;color:var(--txt-3)}
.dd-bal{margin:12px 0;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dd-bal .row{display:flex;justify-content:space-between;padding:10px 13px;font-size:13px}
.dd-bal .row+.row{border-top:1px solid var(--line)}
.dd-bal .row b{font-weight:700}
.dd-bal .tot{background:rgba(34,160,109,.12)} .dd-bal .tot b{color:var(--green-2);font-size:15px}
.dd-actions{display:flex;gap:8px;margin-bottom:10px}
.dd-actions .mini{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:8px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.dd-actions .mini:hover{border-color:var(--green-2);color:var(--green-2)}
.dd-section{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--txt-3);margin:12px 4px 7px}
.dd-item{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:8px;
  font-size:13px;transition:.12s}
.dd-item:hover{background:var(--panel-3)}
.dd-item .val{color:var(--txt-3);font-size:12px;display:flex;align-items:center;gap:6px}
.toggle{width:42px;height:23px;border-radius:20px;background:var(--line-2);position:relative;transition:.2s;flex:none}
.toggle.on{background:var(--green-2)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:#fff;transition:.2s}
.toggle.on::after{left:21px}

/* ============================= LAYOUT ============================= */
#app{min-height:calc(100vh - 60px)}
.view{display:none}.view.active{display:block}
.layout{display:grid;grid-template-columns:270px 1fr;gap:0;align-items:start}
.layout.with-right{grid-template-columns:250px 1fr 330px}

/* ============================= SIDEBAR ============================= */
.sidebar{background:var(--sidebar);border-right:1px solid var(--line);min-height:calc(100vh - 60px);
  padding:12px 10px;position:sticky;top:60px;max-height:calc(100vh - 60px);overflow-y:auto}
.side-search{display:flex;align-items:center;gap:8px;background:var(--input);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;margin-bottom:10px}
.side-search input{background:none;border:none;outline:none;color:var(--txt);width:100%;font-size:13px}
.side-search svg{color:var(--txt-3);flex:none}
.side-item{display:flex;align-items:center;gap:10px;padding:11px 11px;border-radius:9px;font-size:14px;
  font-weight:600;transition:.12s;position:relative;cursor:pointer;color:var(--txt)}
.side-item:hover{background:var(--panel-3)}
.side-item.active{background:linear-gradient(90deg,rgba(28,135,91,.22),transparent);color:#fff}
.side-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:var(--green-2);border-radius:3px}
.side-item .ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:none;font-size:17px}
.side-item .count{margin-left:auto;font-size:11px;color:var(--txt-3);background:var(--panel-3);
  padding:2px 7px;border-radius:20px;font-weight:700}
.side-item .star{color:var(--txt-3);font-size:15px;transition:.12s}
.side-item .star.on{color:var(--gold)}
.side-item .arrow{color:var(--txt-3);transition:.2s;font-size:12px;width:16px;text-align:center}
.side-item .arrow.open{transform:rotate(90deg)}
.side-sep{height:1px;background:var(--line);margin:8px 4px}
.side-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--txt-3);margin:6px 8px 4px;font-weight:700}
/* nested */
.nation{display:flex;align-items:center;gap:9px;padding:8px 10px 8px 30px;font-size:13px;border-radius:8px;cursor:pointer;color:var(--txt-2)}
.nation:hover{background:var(--panel-3);color:var(--txt)}
.nation .arrow{margin-left:auto;font-size:11px;transition:.2s}.nation .arrow.open{transform:rotate(90deg)}
.league{display:flex;align-items:center;gap:9px;padding:7px 10px 7px 50px;font-size:12.5px;border-radius:8px;cursor:pointer;color:var(--txt-2)}
.league:hover{background:var(--panel-3);color:var(--txt)}
.league .cbx{width:15px;height:15px;border:1.5px solid var(--line-2);border-radius:4px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}
.league.on .cbx{background:var(--green-2);border-color:var(--green-2)}
.league .count{margin-left:auto;font-size:10px;color:var(--txt-3)}

/* ============================= MAIN FEED ============================= */
.main{padding:16px 18px;min-height:calc(100vh - 60px)}
.feed-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.feed-head h1{font-size:20px;font-weight:800}
.timeframes{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.tf{padding:7px 13px;border-radius:8px;background:var(--panel);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--txt-2);transition:.12s;white-space:nowrap}
.tf:hover{border-color:var(--green-2)}
.tf.active{background:var(--green);color:#fff;border-color:var(--green)}
.sport-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.sport-tab{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:8px 8px 0 0;font-size:13px;
  font-weight:600;color:var(--txt-2);white-space:nowrap;transition:.12s;position:relative}
.sport-tab:hover{color:var(--txt);background:var(--panel)}
.sport-tab.active{color:#fff}
.sport-tab.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-9px;height:3px;background:var(--green-2);border-radius:3px}
.sport-tab .badge{font-size:10px;background:var(--panel-3);padding:1px 6px;border-radius:10px;color:var(--txt-3)}

/* competition group */
.comp{margin-bottom:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.comp-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--panel-2);cursor:pointer;
  font-size:13px;font-weight:700}
.comp-head .arrow{margin-left:auto;color:var(--txt-3);transition:.2s;font-size:12px}
.comp-head .arrow.closed{transform:rotate(-90deg)}
.comp-head .live-dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 6px var(--live);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.col-head{display:grid;grid-template-columns:1fr repeat(3,66px) 20px;gap:6px;padding:6px 14px;font-size:11px;
  color:var(--txt-3);text-transform:uppercase;letter-spacing:.4px}
.col-head.mkt5{grid-template-columns:1fr repeat(5,60px) 20px}
.col-head span{text-align:center}.col-head span:first-child{text-align:left}

/* match row */
.match{border-top:1px solid var(--line)}
.match-main{display:grid;grid-template-columns:1fr repeat(3,66px) 20px;gap:6px;align-items:center;padding:11px 14px;transition:.1s}
.match-main.mkt5{grid-template-columns:1fr repeat(5,60px) 20px}
.match-main:hover{background:var(--panel-2)}
.match-info{display:flex;align-items:center;gap:11px;min-width:0;cursor:pointer}
.match-drop{width:22px;height:22px;border-radius:6px;background:var(--panel-3);display:flex;align-items:center;
  justify-content:center;flex:none;color:var(--txt-3);transition:.15s;font-size:11px}
.match-drop:hover{background:var(--green);color:#fff}
.match-drop.open{transform:rotate(90deg);background:var(--green);color:#fff}
.match-teams{min-width:0}
.match-teams .t{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-teams .sc{color:var(--green-2);font-weight:800;margin-left:auto;padding-left:8px}
.match-meta{font-size:11px;color:var(--txt-3);margin-top:2px;display:flex;align-items:center;gap:7px}
.match-time{font-size:11px}
.live-clock{color:var(--live);font-weight:700;display:flex;align-items:center;gap:5px}
.live-clock .live-dot{width:6px;height:6px}
.odd{background:var(--odds-bg);border:1px solid transparent;border-radius:7px;padding:9px 4px;text-align:center;
  font-weight:700;font-size:13px;transition:.1s;display:flex;flex-direction:column;gap:1px;min-width:0}
.odd:hover{background:var(--odds-hover);border-color:var(--green-2)}
.odd.sel{background:var(--green);color:#fff;border-color:var(--green)}
.odd .k{font-size:9px;color:var(--txt-3);font-weight:600}
.odd.sel .k{color:rgba(255,255,255,.8)}
.odd .up{animation:flashUp .6s}.odd .down{animation:flashDown .6s}
@keyframes flashUp{0%{color:var(--pos)}100%{}}
@keyframes flashDown{0%{color:var(--neg)}100%{}}
.odd .ar{font-size:8px;margin-left:3px}
.match-fav{display:flex;align-items:center;justify-content:center;color:var(--txt-3);font-size:15px}
.match-fav.on{color:var(--gold)}
.more-mkts{font-size:11px;color:var(--txt-3);padding:8px 14px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:6px;cursor:pointer}
.more-mkts:hover{color:var(--green-2)}

/* expanded inline markets */
.match-expand{background:var(--bg-2);border-top:1px solid var(--line);padding:14px}
.mkt-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.mkt-tab{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;background:var(--panel-3);color:var(--txt-2);transition:.12s}
.mkt-tab:hover{color:var(--txt)}.mkt-tab.active{background:var(--green);color:#fff}
.mkt-block{margin-bottom:14px}
.mkt-block h4{font-size:12px;color:var(--txt-2);margin-bottom:8px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.mkt-row{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.mkt-pick{display:flex;justify-content:space-between;align-items:center;background:var(--odds-bg);border:1px solid transparent;
  border-radius:8px;padding:11px 13px;font-size:12.5px;transition:.1s}
.mkt-pick:hover{border-color:var(--green-2);background:var(--odds-hover)}
.mkt-pick.sel{background:var(--green);color:#fff;border-color:var(--green)}
.mkt-pick .o{font-weight:800}