/* 福彩3D智能分析预测系统 - 样式 */
:root{--bg:#08080e;--bg2:#0e0e1a;--card:#13132a;--card2:#1a1a35;--border:rgba(240,180,41,.12);--gold:#f0b429;--gold2:#d4a017;--gold3:#b8860b;--text:#e8e6e3;--muted:#6b7280;--hot:#ef4444;--warm:#f97316;--cool:#3b82f6;--cold:#06b6d4;--green:#10b981;--red:#ef4444;--teal:#14b8a6}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--gold3) var(--bg2)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--gold3);border-radius:3px}
body{font-family:'Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;height:100vh}
.font-display{font-family:'Orbitron','Noto Sans SC',sans-serif}
.ball{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;background:linear-gradient(145deg,#f5c842,#c9951a);color:#1a1a2e;box-shadow:0 3px 10px rgba(240,180,41,.35),inset 0 -3px 6px rgba(0,0,0,.25);flex-shrink:0;transition:transform .2s}
.ball:hover{transform:scale(1.15)}
.ball-sm{width:28px;height:28px;font-size:13px;box-shadow:0 2px 6px rgba(240,180,41,.3),inset 0 -2px 4px rgba(0,0,0,.2)}
.ball-test{background:linear-gradient(145deg,#2dd4bf,#0d9488);color:#fff;box-shadow:0 3px 10px rgba(20,184,166,.3),inset 0 -3px 6px rgba(0,0,0,.25)}
.ball-test:hover{transform:scale(1.15)}
.ball-rec{width:44px;height:44px;font-size:18px;background:linear-gradient(145deg,#fbbf24,#f59e0b);box-shadow:0 4px 15px rgba(245,158,11,.4),inset 0 -3px 6px rgba(0,0,0,.2);animation:ballPulse 2s ease-in-out infinite}
@keyframes ballPulse{0%,100%{box-shadow:0 4px 15px rgba(245,158,11,.4)}50%{box-shadow:0 4px 25px rgba(245,158,11,.7)}}
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .3s}
.nav-item{padding:11px 18px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);border-left:3px solid transparent;transition:all .2s;user-select:none}
.nav-item:hover{color:var(--text);background:rgba(240,180,41,.05)}
.nav-item.active{color:var(--gold);border-left-color:var(--gold);background:rgba(240,180,41,.08)}
.nav-item i{width:18px;text-align:center;font-size:13px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:16px}
.card-title{font-size:15px;font-weight:700;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card-title i{font-size:14px}
table.data-table{width:100%;border-collapse:collapse;font-size:13px}
table.data-table th{background:rgba(240,180,41,.08);color:var(--gold);font-weight:500;padding:8px 10px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap}
table.data-table td{padding:7px 10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.03)}
table.data-table tr:hover td{background:rgba(240,180,41,.03)}
.heat-0{background:rgba(16,185,129,.15);color:#34d399}
.heat-1{background:rgba(16,185,129,.08);color:#6ee7b7}
.heat-2{background:rgba(240,180,41,.06);color:#fbbf24}
.heat-3{background:rgba(249,115,22,.08);color:#fb923c}
.heat-4{background:rgba(239,68,68,.12);color:#f87171}
.cold-bar{height:6px;border-radius:3px;transition:width .5s}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}
.tag-gold{background:rgba(240,180,41,.15);color:var(--gold)}
.tag-green{background:rgba(16,185,129,.15);color:#34d399}
.tag-red{background:rgba(239,68,68,.15);color:#f87171}
.tag-blue{background:rgba(59,130,246,.15);color:#60a5fa}
.btn{padding:8px 20px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s;font-family:inherit}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a2e}
.btn-gold:hover{box-shadow:0 4px 15px rgba(240,180,41,.4);transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--gold)}
.btn-outline:hover{background:rgba(240,180,41,.08)}
input,select{background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:6px;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s}
input:focus,select:focus{border-color:var(--gold)}
.section{display:none;height:100%;overflow-y:auto;padding:24px}
.section.active{display:block}
.toast-wrap{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:8px;font-size:13px;color:#fff;animation:toastIn .3s ease-out;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.toast-success{background:linear-gradient(135deg,#059669,#047857)}
.toast-error{background:linear-gradient(135deg,#dc2626,#b91c1c)}
.toast-info{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1a2e}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .4s ease-out}
.stat-num{font-family:'Orbitron',monospace;font-weight:700;font-size:22px;color:var(--gold)}
.progress-bg{height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;border-radius:4px;transition:width .6s ease-out}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:700px;width:90%;max-height:80vh;overflow-y:auto}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}