/* ================================================
   MATKA BOSS — Complete Stylesheet
   RapidAPI Live Integration
   ================================================ */

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --bg:        #07090f;
    --bg2:       #0d1117;
    --bg3:       #111827;
    --bg4:       #1a2235;
    --border:    #1e293b;
    --border2:   #263248;
    --gold:      #fbbf24;
    --gold2:     #f59e0b;
    --green:     #10b981;
    --green2:    #059669;
    --red:       #ef4444;
    --orange:    #f97316;
    --blue:      #3b82f6;
    --purple:    #8b5cf6;
    --text1:     #f1f5f9;
    --text2:     #94a3b8;
    --text3:     #64748b;
    --mono:      'JetBrains Mono', monospace;
    --sans:      'Inter', system-ui, sans-serif;
    --r1:        6px;
    --r2:        10px;
    --r3:        14px;
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text1);
    min-height: 100vh;
    line-height: 1.6;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--gold); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ── TOP BANNER ─────────────────────────────── */
.top-banner {
    background: linear-gradient(90deg,#7f1d1d,#4c1d95);
    color:#fff; text-align:center;
    padding:6px 16px; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:12px;
    position:sticky; top:0; z-index:1000;
}
.api-pill {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 12px; border-radius:20px;
    font-size:11px; font-weight:700; letter-spacing:.5px;
}
.live-pill { background:rgba(16,185,129,.2); color:#10b981; border:1px solid #10b981; }

/* ── HEADER ─────────────────────────────────── */
.site-header {
    background: linear-gradient(135deg,#0d1117 0%,#111827 100%);
    border-bottom:1px solid var(--border2);
    padding:14px 0;
}
.header-inner {
    display:flex; align-items:center;
    justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-icon { font-size:36px; }
.logo-name {
    font-size:26px; font-weight:900; letter-spacing:1px;
    background:linear-gradient(90deg,var(--gold),var(--orange));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.logo-sub {
    font-size:9px; color:var(--text3); letter-spacing:3px;
    text-transform:uppercase; margin-top:-2px;
}

.header-center { flex:1; overflow:hidden; max-width:400px; }
.marquee-wrap {
    background:rgba(251,191,36,.08);
    border:1px solid rgba(251,191,36,.2);
    border-radius:20px; padding:5px 14px; overflow:hidden;
}
.marquee-text {
    white-space:nowrap; font-size:12px; font-weight:700;
    color:var(--gold); animation:marquee 18s linear infinite;
}
@keyframes marquee { from{transform:translateX(100%)} to{transform:translateX(-100%)} }

.header-clock { display:flex; align-items:center; gap:8px; }
.clock-live-dot {
    width:10px; height:10px; border-radius:50%;
    background:var(--green); animation:pulse 1.4s infinite;
    flex-shrink:0;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
.clock-time {
    font-family:var(--mono); font-size:18px; font-weight:800;
    color:var(--green); font-variant-numeric:tabular-nums;
}
.clock-date { font-size:10px; color:var(--text3); }

/* ── NAVIGATION ─────────────────────────────── */
.site-nav {
    background:var(--bg2);
    border-bottom:1px solid var(--border);
    position:sticky; top:28px; z-index:999;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.nav-row { display:flex; }
.nav-link {
    display:flex; flex-direction:column; align-items:center;
    padding:10px 16px; gap:2px; flex:1;
    color:var(--text3); font-size:11px; font-weight:700;
    border-bottom:3px solid transparent;
    transition:all .2s; white-space:nowrap;
    text-decoration:none; min-width:80px;
}
.nav-link:hover { color:var(--gold); background:rgba(251,191,36,.04); }
.nav-link.active { color:var(--gold); border-bottom-color:var(--gold); background:rgba(251,191,36,.07); }
.nav-icon { font-size:16px; }
.nav-label { font-size:11px; }

/* ── MAIN ───────────────────────────────────── */
.page-main { padding:24px 0; min-height:60vh; }

/* ── SECTION HEADERS ────────────────────────── */
.sec-title { font-size:20px; font-weight:800; color:var(--gold); margin-bottom:4px; }
.sec-sub   { font-size:12px; color:var(--text3); margin-bottom:18px; }

/* ── API STATUS BAR ─────────────────────────── */
.api-status-bar {
    display:flex; align-items:center; gap:10px;
    background:var(--bg3); border-radius:var(--r2);
    padding:10px 16px; margin-bottom:16px;
    border:1px solid var(--border);
    font-size:12px; flex-wrap:wrap;
}
.api-status-bar .dot { animation:pulse 1.4s infinite; }

/* ── GOLDEN ANK ─────────────────────────────── */
.ank-section { text-align:center; margin-bottom:20px; }
.golden-ank {
    display:inline-block;
    background:linear-gradient(135deg,#312e81,#4c1d95);
    border-radius:14px; padding:14px 36px;
    border:1px solid rgba(139,92,246,.5);
}
.ank-label { font-size:11px; color:#c4b5fd; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.ank-value { font-size:34px; font-weight:900; font-family:var(--mono); color:var(--gold); letter-spacing:8px; margin-top:4px; }

/* ── FINAL ANK GRID ─────────────────────────── */
.final-ank-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:6px; margin-bottom:24px;
}
.final-ank-item {
    display:flex; justify-content:space-between; align-items:center;
    background:var(--bg3); border-radius:var(--r1);
    padding:8px 12px; border:1px solid var(--border);
}
.fa-market { font-size:10px; color:var(--text2); font-weight:600; }
.fa-num    { font-size:20px; font-weight:900; color:var(--gold); font-family:var(--mono); }

/* ── LIVE TICKER ────────────────────────────── */
.live-ticker {
    background:linear-gradient(90deg,#064e3b,#065f46);
    border-radius:var(--r2); padding:12px 18px; margin-bottom:22px;
    border:1px solid #047857;
}
.ticker-title {
    font-size:12px; font-weight:800; color:var(--green);
    margin-bottom:8px; letter-spacing:.5px;
}
.ticker-items { display:flex; gap:20px; flex-wrap:wrap; }
.ticker-item  { display:flex; align-items:center; gap:7px; }
.ticker-dot   { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.4s infinite; flex-shrink:0; }
.ticker-name  { font-size:11px; color:#6ee7b7; font-weight:700; }
.ticker-res   { font-size:15px; font-weight:900; color:#fff; font-family:var(--mono); }

/* ── REFRESH BAR ────────────────────────────── */
.refresh-bar {
    display:flex; align-items:center; gap:10px;
    background:var(--bg3); border-radius:var(--r1);
    padding:8px 14px; margin-bottom:14px;
    border:1px solid var(--border); font-size:12px; color:var(--text3);
}
.progress-track { flex:1; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.progress-fill  { height:100%; background:var(--green); border-radius:2px; transition:width 1s linear; }
.refresh-btn {
    display:inline-flex; align-items:center; gap:5px;
    background:linear-gradient(135deg,var(--green2),#047857);
    color:#fff; border:none; padding:6px 14px;
    border-radius:var(--r1); font-size:12px; font-weight:700;
    cursor:pointer; transition:all .2s;
}
.refresh-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(5,150,105,.4); }
.refresh-btn.spinning .ri { animation:spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── MARKET CARDS ───────────────────────────── */
.market-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
    gap:12px; margin-bottom:32px;
}
.market-card {
    background:var(--bg3); border-radius:var(--r3);
    padding:16px 18px; border:1px solid var(--border);
    border-left:4px solid var(--text3);
    cursor:pointer; transition:transform .15s,box-shadow .15s,background .15s;
    position:relative; overflow:hidden;
}
.market-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,transparent 70%,rgba(255,255,255,.02));
    pointer-events:none;
}
.market-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.5); background:var(--bg4); }
.market-card.live     { border-left-color:var(--green); }
.market-card.closed   { border-left-color:var(--gold2); }
.market-card.upcoming { border-left-color:var(--text3); opacity:.65; }
.market-card.upcoming:hover { opacity:1; }
.market-card.error    { border-left-color:var(--red); }

.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.card-name   { font-weight:800; font-size:13px; color:var(--text1); letter-spacing:.3px; }

.badge { font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.5px; }
.badge.live     { background:#064e3b; color:var(--green); }
.badge.closed   { background:#451a03; color:var(--orange); }
.badge.upcoming { background:#1e293b; color:var(--text2); }

.card-result {
    font-family:var(--mono); font-size:26px; font-weight:800;
    letter-spacing:4px; margin-bottom:8px; color:var(--gold);
}
.card-result.live-res { color:var(--green); }
.card-result .star    { color:var(--border2); }

.card-time  { font-size:11px; color:var(--text3); margin-bottom:8px; }
.card-links { display:flex; gap:14px; }
.card-links a { font-size:11px; color:var(--blue); font-weight:700; transition:color .2s; }
.card-links a:hover { color:var(--gold); }

/* ── STARLINE ───────────────────────────────── */
.starline-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:8px; margin-bottom:28px;
}
.sl-card {
    background:var(--bg3); border-radius:var(--r2);
    padding:12px; text-align:center; border:1px solid var(--border);
    transition:transform .15s;
}
.sl-card:hover { transform:translateY(-2px); }
.sl-card.pending { opacity:.35; }
.sl-time { font-size:11px; color:var(--text3); font-weight:600; margin-bottom:4px; }
.sl-res  { font-size:20px; font-weight:800; color:var(--gold); font-family:var(--mono); }

/* ── CHART TABLE ────────────────────────────── */
.chart-table {
    width:100%; border-collapse:collapse;
    background:var(--bg3); border-radius:var(--r2);
    overflow:hidden; border:1px solid var(--border); margin-bottom:24px;
}
.chart-table thead th {
    background:#1e293b; color:var(--gold);
    font-size:11px; font-weight:700; padding:11px 14px;
    text-align:center; text-transform:uppercase; letter-spacing:.5px;
}
.chart-table tbody td {
    padding:9px 14px; text-align:center;
    font-size:13px; font-weight:700; font-family:var(--mono);
    color:var(--text1); border-bottom:1px solid var(--border);
}
.chart-table tbody tr:last-child td { border-bottom:none; }
.chart-table tbody tr:hover { background:rgba(251,191,36,.03); }
.td-date  { color:var(--text2); font-family:var(--sans); font-size:11px; font-weight:600; }
.td-jodi  { color:var(--gold); font-size:16px; }
.td-open  { color:var(--green); }
.td-close { color:var(--red); }

/* ── MARKET SELECTOR ────────────────────────── */
.market-selector {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:7px; margin-bottom:22px;
}
.ms-btn {
    background:transparent; border:1px solid var(--blue);
    color:var(--blue); border-radius:var(--r1);
    padding:9px 12px; font-size:12px; font-weight:700;
    cursor:pointer; transition:all .2s; text-align:center;
    text-decoration:none; display:block;
}
.ms-btn:hover,.ms-btn.active { background:var(--blue); color:#fff; }
.ms-btn.panel-btn { border-color:var(--orange); color:var(--orange); }
.ms-btn.panel-btn:hover,.ms-btn.panel-btn.active { background:var(--orange); color:#fff; }

/* ── WEEKLY TABLE ───────────────────────────── */
.weekly-grid {
    display:inline-grid; grid-template-columns:repeat(4,1fr);
    gap:6px; background:var(--bg3);
    border-radius:var(--r2); padding:16px; border:1px solid var(--border); margin-bottom:24px;
}
.wk-cell {
    background:var(--bg4); border-radius:var(--r1);
    padding:12px 18px; text-align:center;
    font-weight:800; font-size:18px; color:var(--gold);
    font-family:var(--mono); transition:transform .15s;
}
.wk-cell:hover { transform:scale(1.06); }

/* ── API DOCS ───────────────────────────────── */
.doc-section {
    background:var(--bg3); border-radius:var(--r3);
    padding:24px; margin-bottom:20px; border:1px solid var(--border);
}
.doc-section h3 { font-size:15px; font-weight:700; color:var(--gold); margin-bottom:12px; }
.code-box {
    background:#050810; border-radius:var(--r1);
    padding:18px; overflow-x:auto; margin:12px 0;
    border:1px solid var(--border);
}
.code-box pre { font-family:var(--mono); font-size:12px; color:#86efac; line-height:1.7; white-space:pre-wrap; word-wrap:break-word; }
code { background:#050810; padding:2px 8px; border-radius:4px; font-size:12px; color:var(--green); font-family:var(--mono); }

/* ── FORUM ──────────────────────────────────── */
.forum-post {
    background:var(--bg3); border-radius:var(--r2);
    padding:18px 20px; margin-bottom:12px; border:1px solid var(--border);
}
.fp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.fp-author  { font-weight:700; font-size:14px; color:var(--blue); }
.fp-date    { font-size:11px; color:var(--text3); }
.fp-market  { display:inline-block; background:var(--bg4); color:var(--gold); padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; margin-bottom:8px; }
.fp-content { font-size:13px; color:var(--text2); line-height:1.7; }
.fp-numbers { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.fp-num     { background:linear-gradient(135deg,#312e81,#1e1b4b); color:var(--gold); padding:6px 14px; border-radius:var(--r1); font-weight:800; font-size:15px; font-family:var(--mono); }

/* ── NOTIFICATION ───────────────────────────── */
.notif {
    position:fixed; bottom:20px; right:20px;
    padding:12px 20px; border-radius:var(--r2); font-size:13px; font-weight:700;
    z-index:9999; animation:slideUp .3s ease; box-shadow:0 4px 16px rgba(0,0,0,.5); color:#fff;
}
.notif.success { background:var(--green2); }
.notif.error   { background:#b91c1c; }
@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── FOOTER ─────────────────────────────────── */
.site-footer {
    background:#050810; border-top:1px solid var(--border);
    padding:36px 0 20px; margin-top:48px;
}
.footer-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:28px; margin-bottom:24px;
}
.footer-logo { font-size:18px; font-weight:900; color:var(--gold); margin-bottom:8px; }
.site-footer p { font-size:12px; color:var(--text3); line-height:1.7; }
.site-footer h4 { font-size:13px; font-weight:700; color:var(--gold); margin-bottom:10px; }
.site-footer a  { display:block; font-size:12px; color:var(--text2); margin-bottom:5px; transition:color .2s; }
.site-footer a:hover { color:var(--gold); }
.footer-bottom { text-align:center; padding-top:18px; border-top:1px solid var(--border); font-size:11px; color:var(--text3); }

/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:768px) {
    .header-center { display:none; }
    .header-inner  { justify-content:space-between; }
    .market-grid   { grid-template-columns:1fr; }
    .logo-name     { font-size:20px; }
    .card-result   { font-size:22px; }
    .ank-value     { font-size:26px; }
    .footer-grid   { grid-template-columns:1fr; }
    .market-selector { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px) {
    .nav-label  { display:none; }
    .nav-link   { padding:10px 8px; }
    .nav-icon   { font-size:18px; }
    .weekly-grid { grid-template-columns:repeat(2,1fr); }
    .final-ank-grid { grid-template-columns:repeat(2,1fr); }
}