*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  background:#0a0e1a;
  color:#e2e8f0;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.header{
  background:linear-gradient(135deg,#0a0e1a 0%,#1a1a3e 50%,#0d1117 100%);
  border-bottom:1px solid rgba(0,240,255,0.15);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 20px rgba(0,240,255,0.08);
}
.header-inner{
  max-width:1100px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-size:20px;font-weight:800;
  background:linear-gradient(135deg,#00f0ff,#7c3aed);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:1px;
}
.header-info{display:flex;gap:10px;font-size:12px}
.header-info span{
  background:rgba(0,240,255,0.08);
  border:1px solid rgba(0,240,255,0.15);
  padding:2px 10px;border-radius:4px;color:#00f0ff;
}
#matchCount{
  background:linear-gradient(135deg,#00f0ff,#7c3aed);
  color:#fff;border:none;padding:2px 10px;border-radius:4px;
}
.main{max-width:1100px;margin:0 auto;padding:12px 16px 80px}
.panel{
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,240,255,0.12);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:12px;
  box-shadow:0 4px 20px rgba(0,240,255,0.05);
}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row input[type=date],.api-inp,.row select{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(0,240,255,0.2);
  border-radius:6px;padding:7px 12px;
  font-size:13px;font-family:inherit;
  color:#00f0ff;outline:none;
  transition:border-color 0.3s,box-shadow 0.3s;
}
.row input[type=date]:focus,.api-inp:focus,.row select:focus{
  border-color:#00f0ff;
  box-shadow:0 0 12px rgba(0,240,255,0.15);
}
.row select{background:#1a1a3e;color:#e2e8f0;border-color:rgba(0,240,255,0.4)}.row select option{background:#0d1117;color:#e2e8f0}
.btn{
  padding:7px 16px;border:none;border-radius:6px;
  font-size:13px;font-family:inherit;cursor:pointer;
  background:rgba(255,255,255,0.08);
  color:#94a3b8;white-space:nowrap;font-weight:500;
  border:1px solid rgba(255,255,255,0.08);
  transition:all 0.3s;
}
.btn:hover{background:rgba(0,240,255,0.1);color:#00f0ff;border-color:rgba(0,240,255,0.3)}
.btn-primary{
  background:linear-gradient(135deg,#00c8ff,#7c3aed);
  color:#fff;border:none;
}
.btn-primary:hover{
  background:linear-gradient(135deg,#00e0ff,#8b5cf6);
  box-shadow:0 0 15px rgba(0,240,255,0.3);
}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.loader{text-align:center;padding:20px;color:#00f0ff;font-size:14px}
.empty{text-align:center;padding:60px 20px;color:rgba(255,255,255,0.3);font-size:14px}
.empty-sub{font-size:12px;color:rgba(255,255,255,0.2);margin-top:6px}

/* Skeleton loading */
.sk-container{padding:0}
.sk-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(0,240,255,0.08);
  border-radius:10px;margin-bottom:10px;padding:14px;
  overflow:hidden;
}
.sk-line{
  height:14px;border-radius:4px;
  background:linear-gradient(90deg,rgba(0,240,255,0.06) 25%,rgba(0,240,255,0.15) 50%,rgba(0,240,255,0.06) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  margin-bottom:8px;
}
.sk-line:last-child{margin-bottom:0}
.sk-line.w60{width:60%}.sk-line.w40{width:40%}.sk-line.w80{width:80%}.sk-line.h20{height:20px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Toast notification */
.toast-container{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:90vw}
.toast{
  pointer-events:auto;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:500;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
  animation:toastIn 0.3s ease;max-width:400px;
  display:flex;align-items:center;gap:8px;
}
.toast-error{background:rgba(239,68,68,0.9);border:1px solid rgba(239,68,68,0.3);color:#fff}
.toast-success{background:rgba(22,163,74,0.9);border:1px solid rgba(22,163,74,0.3);color:#fff}
.toast-info{background:rgba(0,240,255,0.15);border:1px solid rgba(0,240,255,0.25);color:#00f0ff}
.toast-out{animation:toastOut 0.3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}

/* Retry button */
.retry-btn{
  display:inline-flex;align-items:center;gap:4px;margin-top:10px;
  padding:7px 18px;border:none;border-radius:6px;
  font-size:13px;font-family:inherit;cursor:pointer;
  background:linear-gradient(135deg,#00c8ff,#7c3aed);color:#fff;font-weight:500;
  transition:all 0.3s;
}
.retry-btn:hover{box-shadow:0 0 15px rgba(0,240,255,0.3)}

.lg{
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(0,240,255,0.08);
  border-radius:10px;margin-bottom:10px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
}
.lg-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;
  background:rgba(0,240,255,0.04);
  border-bottom:1px solid rgba(0,240,255,0.08);
}
.lg-n{font-weight:600;font-size:14px;color:#e2e8f0}
.lg-c{font-size:12px;color:rgba(0,240,255,0.6)}
.mc{
  padding:10px 14px;
  border-bottom:1px solid rgba(0,240,255,0.05);
  cursor:pointer;transition:all 0.2s;
}
.mc:last-child{border-bottom:none}
.mc:hover{background:rgba(0,240,255,0.05)}
.mt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tm{display:flex;align-items:center;gap:8px;flex:1}
.tr{justify-content:flex-end}
.ml{width:24px;height:24px;object-fit:contain}
.tm span{font-size:14px;font-weight:500;color:#e2e8f0}
.mc2{flex-shrink:0;min-width:60px;text-align:center}
.ms{display:flex;align-items:center;justify-content:center;gap:4px;font-size:20px;font-weight:700;color:#f0f0ff}
.ms.live{color:#00f0ff;animation:pulse 1.5s infinite;text-shadow:0 0 8px rgba(0,240,255,0.5)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.msep{color:rgba(0,240,255,0.4)}
.mb{
  font-size:11px;padding:2px 8px;border-radius:4px;
  font-weight:600;background:rgba(255,255,255,0.06);color:#94a3b8;
}
.mb-f{background:rgba(255,255,255,0.06);color:#94a3b8}
.mb-l{
  background:rgba(0,240,255,0.1);color:#00f0ff;
  box-shadow:0 0 8px rgba(0,240,255,0.15);
}
.mb-u{background:rgba(124,58,237,0.15);color:#a78bfa}
.mm{text-align:center;font-size:11px;color:rgba(0,240,255,0.4);margin-top:3px}

/* Detail overlay */
.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:1000;overflow-y:auto}
.detail-box{
  max-width:780px;margin:16px auto;
  background:linear-gradient(180deg,#0d1117,#141b2d);
  border:1px solid rgba(0,240,255,0.12);
  border-radius:16px;
  box-shadow:0 8px 40px rgba(0,240,255,0.08);
  overflow:hidden;
}
.detail-head{
  background:rgba(0,0,0,0.3);
  padding:8px 16px;display:flex;justify-content:flex-end;
  border-bottom:1px solid rgba(0,240,255,0.06);
}
.close-btn{background:none;border:none;color:rgba(255,255,255,0.3);font-size:22px;cursor:pointer;padding:4px 8px}
.close-btn:hover{color:#00f0ff}
#detailInfo{padding:12px 20px;border-bottom:1px solid rgba(0,240,255,0.06)}
#detailTeams{display:flex;align-items:center;justify-content:center;gap:24px;padding:24px 20px}
.dtm{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.dtl{width:56px;height:56px;object-fit:contain}
.dtn{font-size:17px;font-weight:600;color:#e2e8f0}
.dvs{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.dsc{font-size:32px;font-weight:700;color:#00f0ff;text-shadow:0 0 12px rgba(0,240,255,0.4)}
.dc{
  background:rgba(255,255,255,0.02);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(0,240,255,0.08);
  border-radius:12px;margin-bottom:12px;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
  overflow:hidden;
}
.dch{
  font-size:15px;font-weight:600;
  padding:14px 18px;
  background:rgba(0,240,255,0.03);
  border-bottom:1px solid rgba(0,240,255,0.06);
  color:#e2e8f0;
}
.demo-tag{display:inline-block;padding:2px 10px;border-radius:4px;font-size:11px;font-weight:600;margin:0 2px}
.tag-cyber{background:rgba(0,240,255,0.12);color:#00f0ff;border:1px solid rgba(0,240,255,0.25);box-shadow:0 0 6px rgba(0,240,255,0.1)}
.tag-purple{background:rgba(124,58,237,0.12);color:#a78bfa;border:1px solid rgba(124,58,237,0.25);box-shadow:0 0 6px rgba(124,58,237,0.1)}
.cyber-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:5px;
  font-size:12px;font-weight:600;color:#e2e8f0;
  border:1px solid rgba(0,240,255,0.25);
  background:rgba(0,240,255,0.06);
}
.cyber-tag.primary{border-color:#00f0ff;color:#00f0ff;background:rgba(0,240,255,0.1);box-shadow:0 0 8px rgba(0,240,255,0.1);}
.cyber-tag.purple{border-color:#7c3aed;color:#a78bfa;background:rgba(124,58,237,0.08);}
.glow-cyan{color:#00f0ff;text-shadow:0 0 8px rgba(0,240,255,0.3);}
.glow-purple{color:#a78bfa;text-shadow:0 0 8px rgba(124,58,237,0.3);}
.glow-white{color:#f0f0ff;text-shadow:0 0 6px rgba(255,255,255,0.1);}
.fb-glow{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;font-weight:700;color:#fff;}
.fb-w{background:#00f0ff;box-shadow:0 0 8px rgba(0,240,255,0.3);}
.fb-d{background:#7c3aed;box-shadow:0 0 8px rgba(124,58,237,0.3);}
.fb-l{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,0.3);}

/* H2H stats */
.h2h-stats{display:flex;justify-content:center;gap:12px;padding:12px 14px}
.h2h-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.h2h-n{font-size:24px;font-weight:700;color:#e2e8f0}
.h2h-w{color:#00f0ff}.h2h-d{color:#a78bfa}.h2h-ls{color:#f87171}
.h2h-l{font-size:11px;color:#94a3b8}

/* Detail section loader */
.dc-loader{padding:30px;text-align:center;color:rgba(0,240,255,0.4);font-size:13px}
.dc-loader::after{content:'';display:block;width:24px;height:24px;margin:8px auto 0;border:2px solid rgba(0,240,255,0.15);border-top-color:#00f0ff;border-radius:50%;animation:spin 0.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:600px){
.h2h-card{min-width:32px!important;max-width:48px!important;padding:2px 1px!important;border-radius:4px!important}
.h2h-card div{font-size:10px!important;margin-top:1px!important}
.h2h-card div:first-child{font-size:11px!important}

body{overflow-x:hidden!important;width:100vw!important}
.main{overflow-x:hidden!important;padding:2px!important}
.panel{padding:3px 4px!important}
.row{gap:2px!important}
.row input,.row select,.row button{font-size:9px!important;padding:2px 3px!important;height:22px!important}
.mt{flex-direction:column!important;align-items:center!important;gap:2px!important}
.mt .tm{width:100%!important;justify-content:center!important}
.mt .tm span{font-size:14px!important}
.ms{font-size:18px!important}
.ml{width:20px!important;height:20px!important}
.mc{padding:6px 4px!important}
.mc2{min-width:auto!important}
.mm{font-size:11px!important}
.lg-h{padding:4px 8px!important}
.lg-n{font-size:13px!important}
.detail-box{min-height:100vh!important;margin:0!important;border-radius:0!important}
.dtl{width:24px!important;height:24px!important}
.dtn{font-size:11px!important}
.dsc{font-size:16px!important}
.dch{font-size:10px!important;padding:3px 4px!important}
.demo-tag{font-size:12px!important;padding:2px 6px!important}
.table-wrap{overflow-x:auto!important}
[style*="overflow-x:auto"]{flex-wrap:wrap!important;overflow-x:visible!important;justify-content:center!important}
[style*="overflow-x:auto"]{flex-wrap:wrap!important;overflow-x:visible!important;justify-content:center!important}
[style*="overflow-x:auto"]>[style*="min-width"]{min-width:38px!important;max-width:55px!important;padding:3px 1px!important}
[style*="overflow-x:auto"]>[style*="min-width"] div{font-size:12px!important}
[style*="overflow-x:auto"]>[style*="min-width"] div:nth-child(2){font-size:8px!important}
[style*="overflow-x:auto"]>[style*="min-width"] div:nth-child(3){font-size:7px!important}
table{font-size:8px!important;display:block!important;overflow-x:auto!important}
td,th{padding:1px!important}
.empty{padding:15px 4px!important;font-size:11px!important}
}
.loader-spinner{display:inline-block;width:24px;height:24px;border:2px solid rgba(0,240,255,0.2);border-top-color:#00f0ff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loader{text-align:center;padding:40px 20px}
#loader .loader-text{font-size:13px;color:#64748b;margin-top:8px}
#errorBox{text-align:center;padding:40px 20px}
#emptyBox{text-align:center;padding:40px 20px}