/* Kansas Pick 4 — p4-styles.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#0d0f14;--surface:#161a23;--surface2:#1e2330;--surface3:#252b3b;--gold:#f5c842;--gold2:#e6a817;--gold-dim:rgba(245,200,66,.15);--red:#ff4f4f;--green:#4ade80;--blue:#60a5fa;--text:#e8eaf0;--muted:#7a8099;--border:#252b3b;--radius:12px;}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;}
.ad-banner-top{width:100%;background:#111520;border-bottom:1px solid #1e2330;display:flex;align-items:center;justify-content:center;padding:8px;min-height:60px;}
.ad-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;text-align:center;}
.ad-inline{text-align:center;padding:16px 0;}
.ad-sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;text-align:center;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.p4-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-family:'DM Sans',sans-serif;font-size:13px;padding:10px 20px;transition:color .2s;}
.p4-back:hover{color:var(--gold);}
header{background:linear-gradient(135deg,#0d0f14 0%,#161a23 100%);border-bottom:1px solid var(--border);}
.header-inner{max-width:1100px;margin:0 auto;padding:20px 24px 24px;}
.game-badge{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0d0f14;font-weight:800;font-size:11px;padding:4px 10px;border-radius:6px;letter-spacing:.06em;text-transform:uppercase;}
.game-title{font-size:clamp(22px,4vw,34px);font-weight:700;color:var(--gold);}
.game-title-row{display:flex;align-items:center;gap:14px;}
.game-meta{font-size:13px;color:var(--muted);margin-top:6px;}
.layout{max-width:1100px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:1fr 300px;gap:24px;}
@media(max-width:860px){.layout{grid-template-columns:1fr;}}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:22px;width:fit-content;}
.tab-btn{background:none;border:none;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;padding:8px 18px;border-radius:7px;cursor:pointer;transition:background .2s,color .2s;}
.tab-btn.active{background:var(--gold);color:#0d0f14;}
.tab-btn:hover:not(.active){color:var(--text);background:var(--surface2);}
.tab-panel{display:none;} .tab-panel.active{display:block;}
.play-area{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.play-area h2{font-size:16px;font-weight:600;margin-bottom:18px;}
/* Pick-type selector */
.play-type-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.play-type-btn{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;transition:all .2s;}
.play-type-btn.active{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
/* Digit boxes */
.digit-row{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.digit-box{display:flex;flex-direction:column;align-items:center;gap:8px;}
.digit-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.digit-input{width:68px;height:68px;background:var(--surface2);border:2px solid var(--border);border-radius:12px;font-family:'DM Sans',sans-serif;font-size:32px;font-weight:700;color:var(--gold);text-align:center;outline:none;}
.digit-input:focus{border-color:var(--gold);}
.digit-btns{display:flex;gap:4px;}
.digit-btn{width:28px;height:28px;background:var(--surface3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.digit-btn:hover{background:var(--gold);color:#0d0f14;border-color:var(--gold);}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#0d0f14;border:none;font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;padding:12px 24px;border-radius:9px;cursor:pointer;transition:opacity .2s;}
.btn-primary:hover{opacity:.88;}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;padding:12px 20px;border-radius:9px;cursor:pointer;}
.result-box{margin-top:20px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:20px;display:none;}
.result-box.show{display:block;}
.drawn-num{font-size:36px;font-weight:800;color:var(--gold);letter-spacing:8px;margin:10px 0;}
.prize-display{margin-top:14px;padding:14px;background:var(--bg);border-radius:8px;border-left:3px solid var(--gold);font-size:18px;font-weight:700;color:var(--gold);}
.match-info{font-size:13px;color:var(--muted);margin-top:6px;}
.freq-table{width:100%;border-collapse:collapse;font-size:14px;}
.freq-table th{text-align:left;padding:10px 14px;color:var(--muted);font-size:12px;text-transform:uppercase;border-bottom:1px solid var(--border);}
.freq-table td{padding:10px 14px;border-bottom:1px solid var(--border);}
.freq-table tr:hover td{background:var(--surface2);}
.freq-bar{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold2));min-width:4px;}
.hot-badge{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:700;background:rgba(255,79,79,.15);color:var(--red);margin-left:6px;}
.cold-badge{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:700;background:rgba(96,165,250,.15);color:var(--blue);margin-left:6px;}
.history-list{display:flex;flex-direction:column;gap:10px;}
.history-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.history-date{font-size:12px;color:var(--muted);min-width:90px;}
.history-num{font-size:28px;font-weight:800;color:var(--gold);letter-spacing:6px;}
.history-draw{font-size:11px;color:var(--muted);}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.stat-val{font-size:28px;font-weight:700;color:var(--gold);}
.stat-label{font-size:12px;color:var(--muted);margin-top:4px;}
.sidebar{display:flex;flex-direction:column;gap:18px;}
.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.info-card h3{font-size:14px;font-weight:600;color:var(--gold);margin-bottom:12px;}
.info-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;}
.info-row:last-child{border:none;}
.info-row-label{color:var(--muted);}
.prize-tier{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;}
.prize-tier:last-child{border:none;}
.prize-tier-label{color:var(--muted);}
.prize-tier-val{color:var(--text);font-weight:600;}
.prize-tier-val.top{color:var(--gold);}
footer{background:var(--surface);border-top:1px solid var(--border);padding:24px;text-align:center;font-size:12px;color:var(--muted);}
footer a{color:var(--gold);text-decoration:none;}
.footer-ad{max-width:1100px;margin:0 auto 16px;min-height:90px;background:var(--bg);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;}