/* HLTV 风格配色 & 基础样式 */
:root {
    --bg: #0E0E13;
    --bg2: #1A1A1D;
    --bg3: #2A2A2D;
    --bg4: #141419;
    --accent: #FFA500;
    --accent2: #FFD700;
    --text: #FFF;
    --text2: #8A8A8A;
    --text3: #555;
    --win: #44FF44;
    --lose: #FF4444;
    --ct: #4db6ff;
    --border: #2A2A2D;
    --radius: 2px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}
a{color:inherit;text-decoration:none}
input,select,button{font:inherit}
button{border:none;background:none;color:inherit;cursor:pointer}

/* Header */
.header{background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:56px;gap:16px}
.logo{font-size:22px;font-weight:800}
.logo span{color:var(--accent)}
.nav{display:flex;gap:2px}
.nav a{padding:8px 14px;border-radius:6px;font-size:14px;color:var(--text2);transition:.15s}
.nav a:hover{background:var(--bg3);color:var(--text)}
.nav a.active{background:var(--accent);color:var(--bg);font-weight:600}
.header-search input{padding:8px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:13px;width:220px}
.header-search input:disabled{opacity:.6}

/* Main */
.main{max-width:1200px;margin:0 auto;padding:24px 20px}
.stack-layout{display:grid;gap:24px}
.home-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}

/* Panel */
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:24px}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}
.panel-header h2{font-size:18px;font-weight:700}
.panel-more{font-size:13px;color:var(--accent)}

/* Typography */
.page-title{font-size:32px;font-weight:800}
.page-subtitle{margin-top:10px;color:var(--text2);max-width:720px;line-height:1.6}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.section-title{font-size:15px;font-weight:600;color:var(--accent);margin:20px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.section-title:first-child{margin-top:0}
.muted{color:var(--text2)}
.empty-state{padding:24px;text-align:center;color:var(--text2);background:var(--bg);border:1px dashed var(--border);border-radius:8px}

/* Hero */
.page-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hero-meta{color:var(--text2);font-size:14px}
.home-hero{margin-bottom:24px}

/* Match cards */
.match-list{display:flex;flex-direction:column;gap:12px}
.match-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;cursor:pointer;transition:.15s}
.match-card:hover{border-color:var(--accent)}
.product-card{display:grid;gap:14px}
.match-card-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.match-event{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.match-card-title{font-size:22px;font-weight:800}
.match-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.large-scoreboard{margin-top:8px}
.match-team-block{background:var(--bg4);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:grid;gap:6px;text-align:center}
.match-team-block strong{font-size:32px}
.match-team-block.is-winner{border-color:rgba(255,165,0,.45);box-shadow:0 0 0 1px rgba(255,165,0,.15) inset}
.match-team-roster{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.team-player-tag{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--text2)}
.team-name{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.08em}
.score-divider{font-size:28px;color:var(--text3);font-weight:800}
.match-meta-row{display:flex;flex-wrap:wrap;gap:12px;color:var(--text2);font-size:13px}
.match-player-tags{display:flex;flex-wrap:wrap;gap:8px}
.player-tag{padding:6px 10px;border-radius:999px;background:var(--bg4);border:1px solid var(--border);font-size:12px;color:var(--text2)}
.match-side-badge{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--bg4);border:1px solid var(--border)}
.match-side-badge.side-t{color:var(--accent);border-color:rgba(255,165,0,.35)}
.match-side-badge.side-ct{color:var(--ct);border-color:rgba(77,182,255,.35)}
.match-side-badge.side-unknown{color:var(--text2)}

/* Avatar */
.avatar-128{width:128px;height:128px;border:2px solid var(--border);border-radius:8px;background:var(--bg3);overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.avatar-128 canvas,.avatar-128 img{max-width:100%;max-height:100%}
.avatar-40{width:40px;height:40px;border-radius:4px;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--bg3);flex-shrink:0}
.avatar-40 img{width:100%;height:100%;object-fit:cover}

/* Tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;text-align:left;font-size:13px;border-bottom:1px solid var(--border)}
th{color:var(--text2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
td.numeric, th.numeric{font-variant-numeric:tabular-nums;text-align:right}
td.center, th.center{text-align:center}
.match-player-link{display:flex;align-items:center;gap:10px;color:var(--text)}

/* Filters */
.filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.filter-field{display:grid;gap:8px}
.filter-field span{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:.08em}
.filter-field select{background:var(--bg4);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px}

/* Player page */
.player-row{cursor:pointer;background:transparent;transition:.15s}
.player-row:hover td{background:var(--bg)}
.player-detail-row{display:none}
.player-group.is-open .player-detail-row{display:table-row}
.player-group.is-open .player-row td{background:rgba(255,165,0,.06)}
.player-cell{display:flex;align-items:center;gap:12px}
.player-cell-name{font-weight:700}
.player-cell-meta{font-size:12px;color:var(--text2);margin-top:2px}
.player-detail-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:20px}
.player-detail-summary{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.player-identity{display:flex;gap:16px;align-items:center}
.player-avatar-lg{width:96px;height:96px;border-radius:10px;overflow:hidden;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.player-avatar-lg img{width:100%;height:100%;object-fit:cover}
.player-name{font-size:28px;font-weight:800;color:var(--accent)}
.player-meta{margin-top:6px;color:var(--text2);font-size:14px}
.player-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:12px;flex:1;min-width:320px}
.player-stat-box,.summary-card{background:var(--bg4);border:1px solid var(--border);border-radius:8px;padding:14px}
.player-stat-box .label,.summary-card .label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);margin-bottom:8px}
.player-stat-box .value,.summary-card strong{display:block;font-size:20px;font-weight:800}
.summary-card p{margin-top:10px;color:var(--text2);line-height:1.5;font-size:13px}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.player-detail-body{display:grid;grid-template-columns:minmax(320px,420px) minmax(260px,1fr);gap:24px;margin-top:24px}
.player-radar-panel{background:var(--bg4);border:1px solid var(--border);border-radius:12px;padding:16px}
.player-radar-panel canvas{display:block;width:100%;max-width:320px;margin:0 auto}
.radar-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.radar-legend-item{display:flex;align-items:center;gap:8px;font-size:13px}
.radar-legend-item .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);display:inline-block}
.metric-name{color:var(--text2);min-width:48px}.metric-value{font-weight:700}
.player-side-panel{display:grid;gap:20px}
.stack-list{list-style:none;display:grid;gap:10px}
.stack-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:8px;background:var(--bg4);border:1px solid var(--border);font-size:13px}
.recent-match-list li{align-items:center;flex-wrap:wrap}
.recent-match-rating{color:var(--text2);font-size:12px}
.recent-match-result{font-size:12px;font-weight:700;padding:2px 8px;border-radius:2px}
.recent-match-result.won{color:#111;background:var(--win)}
.recent-match-result.lost{color:#fff;background:var(--lose)}
.recent-match-list a{color:var(--accent)}

/* Match detail */
.match-hero-card{display:grid;gap:18px}
.match-round-detail{display:grid;gap:16px}
.round-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.side-pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;color:#111;font-size:12px;font-weight:700;text-transform:uppercase}

/* Timeline */
.round-list{display:flex;gap:8px;flex-wrap:wrap}
.round-timeline{align-items:center}
.round-chip{border:1px solid rgba(255,255,255,.08);background:var(--bg4);border-radius:10px;padding:10px 12px;display:grid;gap:4px;min-width:70px;position:relative;overflow:hidden}
.round-chip::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--round-color)}
.round-chip.is-active{border-color:rgba(255,165,0,.45);box-shadow:0 0 0 1px rgba(255,165,0,.12) inset}
.round-chip-number{font-size:16px;font-weight:800}
.round-chip-side{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.08em}
.round-chip.pistol{outline:1px solid rgba(255,215,0,.35)}

/* Kill feed */
.kill-feed{display:flex;flex-direction:column;gap:10px}
.kill-card{background:var(--bg4);border:1px solid var(--border);border-radius:10px;padding:12px}
.kill-main{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:700}
.kill-player.attacker{color:var(--accent)}
.kill-player.victim{color:#ffb3b3}
.kill-arrow{color:var(--text3)}
.kill-subline{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12px;color:var(--text2)}
.kill-weapon{color:var(--accent2)}
.kill-trade-label{color:var(--ct);font-weight:700}
.matchup-side-separator{color:var(--text2)}

/* Back */
.back{display:inline-block;color:var(--accent);font-size:14px;margin-bottom:16px}
.back:hover{text-decoration:underline}

/* Responsive */
@media(max-width:1000px){
  .home-grid,.info-grid,.filter-grid,.round-summary-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .player-detail-body{grid-template-columns:1fr}
  .player-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .header-inner{flex-wrap:wrap;height:auto;padding:12px 16px;gap:10px}
  .nav{order:3;width:100%;justify-content:center;flex-wrap:wrap}
  .header-search{width:100%}
  .header-search input{width:100%}
  .page-title{font-size:26px}
  .player-stat-grid{grid-template-columns:1fr}
  .radar-legend{grid-template-columns:1fr}
  .match-scoreboard{grid-template-columns:1fr;justify-items:center}
  .score-divider{display:none}
}