:root {
  color-scheme: dark;
  --bg: #0c0e13;
  --surface: #15181f;
  --surface-2: #1b1e27;
  --surface-3: #222631;
  --line: rgba(255, 255, 255, .09);
  --text: #f3f4f6;
  --muted: #9299a8;
  --faint: #626a7b;
  --teal: #2ee4ca;
  --teal-dim: rgba(46, 228, 202, .13);
  --coral: #ff756b;
  --yellow: #f2c667;
  --purple: #9d8cff;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 1080px; background: radial-gradient(circle at 76% 8%, #24212d 0, transparent 30%), var(--bg); color: var(--text); font: 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
.background-glow { position: fixed; width: 360px; height: 360px; border-radius: 50%; filter: blur(110px); opacity: .1; pointer-events: none; }.glow-one { top: 18%; right: 3%; background: var(--teal); }.glow-two { left: 26%; bottom: -160px; background: var(--purple); }
.topbar { height: 72px; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(12,14,19,.86); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(18px); }.brand { display: flex; align-items: center; gap: 11px; }.brand-symbol { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(46,228,202,.5); border-radius: 9px; color: var(--teal); font-size: 19px; }.brand strong { display: block; font-size: 13px; letter-spacing: .14em; }.brand small { display: block; color: var(--faint); font-size: 9px; letter-spacing: .2em; margin-top: 2px; }.topbar-right { display: flex; align-items: center; gap: 22px; }.privacy-note { color: var(--faint); font-size: 11px; }.status-pill { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; padding: 7px 11px; color: var(--muted); font-size: 11px; }.status-pill i, .live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--coral); }.status-pill.online { color: var(--teal); border-color: rgba(46,228,202,.32); }.status-pill.online i, .live-dot { background: var(--teal); box-shadow: 0 0 11px var(--teal); }
.app-shell { width: min(1580px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 290px 1fr; gap: 34px; position: relative; z-index: 1; }.sidebar { min-height: calc(100vh - 72px); padding: 28px 0 20px; border-right: 1px solid var(--line); padding-right: 25px; display: flex; flex-direction: column; }.side-heading, .control-title, .selection-row { display: flex; justify-content: space-between; align-items: center; }.kicker { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .18em; }.side-heading h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.04em; }.count-badge { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 9px; background: var(--teal-dim); color: var(--teal); font-weight: 700; }.side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 23px 0 14px; }.button { border: 0; border-radius: 8px; padding: 10px 12px; font-size: 12px; font-weight: 700; transition: .2s ease; }.button:hover { transform: translateY(-1px); filter: brightness(1.12); }.button.primary { background: var(--teal); color: #0c1b1a; }.button.ghost { background: var(--surface-3); color: var(--muted); }.search-box { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--faint); }.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }.selection-row { margin: 19px 0 8px; color: var(--faint); font-size: 11px; }.text-button { padding: 0; border: 0; background: transparent; color: var(--teal); font-size: 11px; }.friend-list { flex: 1; min-height: 160px; max-height: calc(100vh - 345px); overflow: auto; padding-right: 4px; }.friend-item { display: flex; align-items: center; gap: 9px; padding: 9px 8px; margin: 3px 0; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }.friend-item:hover { background: rgba(255,255,255,.035); }.friend-item.selected { background: var(--teal-dim); border-color: rgba(46,228,202,.27); }.friend-item input { accent-color: var(--teal); }.avatar { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #0d1720; background: linear-gradient(135deg, var(--teal), #85b9ff); font-weight: 800; }.friend-name { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }.friend-tag { color: var(--faint); font-size: 10px; }.side-empty { padding: 35px 12px; color: var(--faint); text-align: center; font-size: 12px; }.side-footer { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 10px; padding-top: 18px; }
.main-content { min-width: 0; padding: 42px 0 80px; }.intro-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 28px; }.intro-row h1 { max-width: 780px; margin: 9px 0 12px; font-size: clamp(35px, 4.2vw, 61px); line-height: 1.02; letter-spacing: -.065em; }.intro-row h1 em { color: var(--teal); font-style: normal; }.intro-row p { max-width: 650px; margin: 0; color: var(--muted); font-size: 13px; }.intro-mark { display: flex; flex-direction: column; align-items: flex-end; color: var(--faint); font-size: 10px; letter-spacing: .2em; }.intro-mark strong { color: rgba(255,255,255,.1); font-size: 90px; line-height: .8; letter-spacing: -.1em; }.control-panel { padding: 20px 22px 17px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(115deg, rgba(27,30,39,.95), rgba(21,24,31,.82)); box-shadow: 0 20px 55px rgba(0,0,0,.14); }.control-title { align-items: flex-end; }.control-title h3 { margin: 4px 0 0; font-size: 16px; }.hint { color: var(--faint); font-size: 11px; }.control-grid { display: grid; grid-template-columns: 130px 180px 220px 200px 1fr; gap: 11px; align-items: end; margin-top: 18px; }.control-field { display: flex; flex-direction: column; gap: 6px; color: var(--faint); font-size: 11px; }.control-field input, .control-field select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: var(--surface-3); color: var(--text); }.queue-select { height: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; align-content: center; padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; }.queue-select > span { grid-column: 1 / -1; color: var(--faint); }.queue-select label { display: flex; align-items: center; gap: 4px; }.queue-select input { accent-color: var(--teal); }.detail-toggle { display: flex; gap: 9px; align-items: center; height: 38px; padding: 0 10px; border-left: 1px solid var(--line); }.detail-toggle input { accent-color: var(--teal); }.detail-toggle b, .detail-toggle small { display: block; }.detail-toggle b { font-size: 11px; }.detail-toggle small { color: var(--faint); font-size: 10px; }.button.collect { justify-self: end; display: flex; gap: 24px; align-items: center; min-width: 190px; padding: 12px 15px; background: var(--coral); color: #271318; }.button.collect:disabled { cursor: not-allowed; opacity: .35; transform: none; }.button.collect b { font-size: 17px; }.progress-box { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }.progress-box > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-bottom: 8px; }.progress-box strong { color: var(--teal); }.progress-track { height: 5px; overflow: hidden; border-radius: 99px; background: #0d1017; }.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--teal)); transition: width .35s; }.hidden { display: none !important; }
.report-root { margin-top: 24px; }.welcome-card { min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px; border: 1px dashed rgba(255,255,255,.13); border-radius: 14px; background: rgba(21,24,31,.55); text-align: center; }.welcome-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border: 1px solid rgba(46,228,202,.4); border-radius: 50%; color: var(--teal); font-size: 31px; }.welcome-card h2 { max-width: 590px; margin: 12px 0 8px; font-size: 25px; letter-spacing: -.04em; }.welcome-card p { max-width: 560px; color: var(--muted); font-size: 12px; }.welcome-steps { display: flex; gap: 28px; margin-top: 26px; color: var(--faint); font-size: 11px; }.welcome-steps b { margin-right: 6px; color: var(--teal); }
.report { animation: appear .35s ease; }.report-head { display: flex; justify-content: space-between; gap: 25px; align-items: flex-end; padding: 18px 0 22px; border-bottom: 1px solid var(--line); }.report-head h2 { margin: 7px 0 5px; font-size: 28px; letter-spacing: -.055em; }.report-sub { color: var(--faint); font-size: 11px; }.confidence { color: var(--yellow); font-size: 11px; }.report-score { display: flex; gap: 13px; align-items: center; }.report-score strong { color: var(--teal); font-size: 57px; line-height: .8; letter-spacing: -.09em; }.report-score span { display: block; max-width: 75px; color: var(--faint); font-size: 10px; }.player-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 15px 0 2px; }.player-tab { padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 11px; white-space: nowrap; }.player-tab.active { border-color: rgba(46,228,202,.5); background: var(--teal-dim); color: var(--teal); }.overview-grid { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: 9px; margin: 18px 0; }.metric-card { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }.metric-card.primary-metric { background: linear-gradient(135deg, rgba(46,228,202,.13), rgba(21,24,31,.8)); }.metric-card strong { display: block; color: var(--text); font-size: 24px; letter-spacing: -.05em; }.metric-card.primary-metric strong { color: var(--teal); }.metric-card span { color: var(--faint); font-size: 10px; }.report-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }.card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }.card-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 10px; }.card-head h3 { margin: 0; font-size: 13px; }.card-head span { color: var(--faint); font-size: 10px; }.chart-box { padding: 0 13px 11px; }.chart-box svg { display: block; width: 100%; height: 170px; }.chart-label { fill: var(--faint); font-size: 9px; }.chart-grid { stroke: rgba(255,255,255,.07); stroke-dasharray: 3 4; }.chart-line { fill: none; stroke: var(--teal); stroke-width: 2.5; }.chart-area { fill: url(#areaGradient); opacity: .8; }.chart-point { fill: var(--bg); stroke: var(--teal); stroke-width: 2; }.dimensions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 15px 15px; }.dimension { text-align: center; }.dimension-score { position: relative; height: 76px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--score) * 1%), var(--surface-3) 0); }.dimension-score::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }.dimension-score b { position: relative; z-index: 1; font-size: 15px; }.dimension span { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }.insight-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }.insight { min-height: 145px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }.insight h3 { margin: 0 0 9px; font-size: 12px; }.insight ul { margin: 0; padding-left: 17px; color: var(--muted); font-size: 11px; line-height: 1.8; }.insight.good h3 { color: var(--teal); }.insight.warn h3 { color: var(--yellow); }.insight.action h3 { color: var(--coral); }.rank-card { margin-top: 14px; }.rank-list { display: flex; gap: 8px; overflow-x: auto; padding: 0 15px 15px; }.rank-chip { min-width: 160px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }.rank-chip b, .rank-chip span { display: block; }.rank-chip b { color: var(--text); font-size: 12px; }.rank-chip span { color: var(--muted); font-size: 10px; margin-top: 3px; }.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }.table-card { margin-top: 14px; }.table-scroll { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; white-space: nowrap; font-size: 11px; }.data-table th { color: var(--faint); font-weight: 500; background: rgba(255,255,255,.025); }.data-table td { color: #d7dae1; }.data-table tr:last-child td { border-bottom: 0; }.win { color: var(--teal) !important; }.loss { color: var(--coral) !important; }.match-button { border: 0; border-bottom: 1px dashed var(--muted); background: transparent; color: var(--text); padding: 0; font-size: 11px; }.detail-row > td { padding: 0 !important; background: #101218; }.match-detail { padding: 17px; }.detail-meta { display: flex; gap: 12px; color: var(--faint); font-size: 10px; margin-bottom: 12px; }.detail-meta b { color: var(--teal); }.participant-table { min-width: 1000px; }.event-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }.event-pill { padding: 4px 7px; border-radius: 5px; background: rgba(157,140,255,.14); color: #c9c1ff; font-size: 10px; }.export-links { display: flex; justify-content: flex-end; gap: 14px; margin-top: 14px; }.export-links a { color: var(--teal); text-decoration: none; font-size: 11px; }.export-links a:hover { text-decoration: underline; }
.toast { position: fixed; right: 28px; bottom: 24px; z-index: 20; padding: 11px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-3); color: var(--text); box-shadow: 0 12px 35px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translateY(8px); transition: .25s; font-size: 12px; }.toast.show { opacity: 1; transform: none; }
.detail-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 15px 15px; }.detail-stat { padding: 9px 10px; border-radius: 7px; background: var(--surface-2); }.detail-stat b, .detail-stat span { display: block; }.detail-stat b { color: var(--text); font-size: 14px; }.detail-stat span { color: var(--faint); font-size: 10px; }.advanced-card { margin-top: 14px; }.advanced-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 15px 15px; }.advanced-grid > div { min-width: 0; padding: 10px; border-radius: 7px; background: var(--surface-2); }.advanced-grid b, .advanced-grid span { display: block; }.advanced-grid b { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.advanced-grid span { color: var(--faint); font-size: 10px; margin-top: 4px; }.champion-card { margin-top: 14px; }.champion-table { min-width: 680px; }.grade { font-weight: 800; }.grade-s, .grade-a { color: var(--teal) !important; }.grade-b { color: var(--yellow) !important; }.grade-c, .grade-d { color: var(--coral) !important; }.match-advice { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--coral); background: rgba(255,117,107,.06); color: var(--muted); font-size: 11px; }.match-advice b { color: var(--coral); margin-right: 6px; }.empty-chart { padding: 45px; color: var(--faint); text-align: center; }
.deep-analysis { margin-top: 14px; padding: 16px; border: 1px solid rgba(46,228,202,.24); border-radius: 10px; background: linear-gradient(135deg, rgba(46,228,202,.07), rgba(21,24,31,.92)); }.deep-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; }.deep-header h3 { margin: 4px 0 0; font-size: 16px; }.ai-button { padding: 9px 12px; border: 1px solid rgba(157,140,255,.5); border-radius: 7px; background: rgba(157,140,255,.15); color: #cfc8ff; font-size: 11px; }.ai-button:disabled { opacity: .5; cursor: wait; }.executive-summary { margin: 15px 0; padding: 13px 15px; border-left: 3px solid var(--teal); background: rgba(0,0,0,.17); color: var(--text); font-size: 13px; line-height: 1.8; }.diagnosis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.diagnosis { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(21,24,31,.65); }.diagnosis > div { display: flex; justify-content: space-between; }.diagnosis p, .diagnosis strong { display: block; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.diagnosis strong { color: var(--text); font-weight: 500; }.diagnosis-status { color: var(--teal); font-size: 10px; }.training-plan, .match-reviews { margin-top: 16px; }.training-plan h4, .match-reviews h4 { margin: 0 0 9px; color: var(--text); font-size: 12px; }.training-item { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }.training-item > b { color: var(--coral); font-size: 11px; }.training-item h4 { margin: 0; font-size: 12px; }.training-item p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.training-item p span { color: var(--teal); }.review-item { padding: 10px 0; border-top: 1px solid var(--line); }.review-title { display: flex; gap: 10px; align-items: center; }.review-title b { color: var(--text); font-size: 11px; }.review-title span { color: var(--muted); font-size: 10px; }.review-item p, .review-item small, .review-item strong { display: block; margin: 4px 0 0; color: var(--muted); font-size: 11px; }.review-item strong { color: var(--yellow); font-weight: 500; }.analysis-caveat { margin: 15px 0 0; color: var(--faint); font-size: 10px; }.ai-result { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(157,140,255,.3); }.ai-result h3 { margin: 5px 0; font-size: 15px; }.ai-result p { color: var(--muted); font-size: 12px; }.ai-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.ai-columns > div { padding: 10px; border-radius: 7px; background: rgba(157,140,255,.08); }.ai-columns b { color: #cfc8ff; font-size: 11px; }.ai-columns ul { margin: 6px 0 0; color: var(--muted); font-size: 11px; }.ai-plan { display: grid; gap: 3px; margin-top: 8px; padding: 9px; border-left: 2px solid var(--purple); background: rgba(157,140,255,.06); color: var(--muted); font-size: 11px; }.ai-plan b { color: var(--text); }
@keyframes appear { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 1350px) { .control-grid { grid-template-columns: 110px 150px 190px 180px 1fr; } }
@media (max-width: 1200px) { body { min-width: 0; }.app-shell { width: calc(100% - 36px); grid-template-columns: 250px 1fr; gap: 22px; }.control-grid { grid-template-columns: 110px 150px 1fr; }.queue-select, .detail-toggle { border-left: 0; padding-left: 0; }.button.collect { grid-column: 3; }.overview-grid { grid-template-columns: repeat(3, 1fr); }.primary-metric { grid-column: span 3; }.intro-mark { display: none; } }

.role-panel { margin-top: 14px; overflow: hidden; border-color: rgba(157,140,255,.25); background: linear-gradient(145deg, rgba(36,32,55,.92), rgba(21,24,31,.96)); }
.role-method { color: #b4aaff !important; }
.role-tabs { display: flex; gap: 8px; padding: 0 15px 15px; overflow-x: auto; }
.role-tab { min-width: 92px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: 1fr 14px; align-items: center; gap: 0 7px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--muted); text-align: left; }
.role-tab:hover { border-color: rgba(157,140,255,.55); background: rgba(157,140,255,.09); }
.role-tab.active { border-color: var(--purple); background: rgba(157,140,255,.16); color: var(--text); box-shadow: 0 0 0 1px rgba(157,140,255,.15); }
.role-tab b { grid-row: 1 / span 2; color: var(--purple); font-size: 20px; text-align: center; }
.role-tab span { font-size: 11px; font-weight: 700; }
.role-tab em { color: var(--faint); font-size: 9px; font-style: normal; }
.role-all-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 0 15px 15px; }
.role-mini { padding: 11px; border-radius: 8px; background: rgba(0,0,0,.16); }
.role-mini > div { display: flex; justify-content: space-between; align-items: center; }
.role-mini b { font-size: 11px; }.role-mini strong { color: var(--purple); font-size: 19px; }.role-mini span { display: block; margin-top: 4px; color: var(--faint); font-size: 10px; }
.role-mini i { display: block; height: 4px; margin-top: 9px; border-radius: 99px; background: linear-gradient(90deg, var(--purple), var(--teal)); }
.role-analysis-body { display: grid; grid-template-columns: 1.3fr .7fr; gap: 15px; padding: 0 15px 17px; }
.role-evidence { padding: 13px; border-radius: 9px; background: rgba(0,0,0,.16); }.role-evidence > b { color: #cfc8ff; font-size: 12px; }.role-evidence p { margin: 7px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.role-bars { display: grid; gap: 8px; }.role-bar { display: grid; grid-template-columns: 105px 1fr 28px; gap: 8px; align-items: center; }.role-bar > span { color: var(--muted); font-size: 10px; }.role-bar small { display: block; color: var(--faint); font-size: 8px; }.role-bar > i { height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }.role-bar > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--teal)); }.role-bar > strong { color: var(--text); font-size: 10px; text-align: right; }
.role-score { display: flex; align-items: baseline; gap: 5px; }.role-score strong { color: var(--purple); font-size: 34px; }.role-score span { color: var(--faint); font-size: 10px; }.role-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }.role-facts div { padding: 12px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); }.role-facts b, .role-facts span { display: block; }.role-facts b { color: var(--text); font-size: 18px; }.role-facts span { color: var(--faint); font-size: 9px; margin-top: 2px; }
.match-section { margin-top: 22px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 11px; }.section-heading h3 { margin: 5px 0 3px; font-size: 18px; }.section-heading p { margin: 0; color: var(--muted); font-size: 11px; }.section-count { color: var(--faint); font-size: 10px; }.match-list { display: grid; gap: 8px; }.match-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(105deg, rgba(27,30,39,.98), rgba(21,24,31,.92)); box-shadow: 0 8px 24px rgba(0,0,0,.12); }.match-card:hover { border-color: rgba(255,255,255,.18); }.match-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }.match-win .match-accent { background: var(--teal); }.match-loss .match-accent { background: var(--coral); }.match-main { display: grid; grid-template-columns: minmax(285px, 1.35fr) minmax(300px, 1.4fr) 65px 92px; gap: 17px; align-items: center; padding: 14px 16px 14px 20px; }.match-identity { display: grid; grid-template-columns: 56px minmax(135px, 1fr) 80px; gap: 10px; align-items: center; }.match-result strong, .match-result span, .match-champion b, .match-champion span, .match-time b, .match-time span { display: block; }.match-result strong { font-size: 14px; }.match-win .match-result strong { color: var(--teal); }.match-loss .match-result strong { color: var(--coral); }.match-result span, .match-champion span, .match-time span { color: var(--faint); font-size: 10px; }.match-champion { display: flex; align-items: center; gap: 9px; min-width: 0; }.match-champion b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.champion-orb { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border: 2px solid rgba(157,140,255,.7); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8e83dc, #27243b); color: #fff; font-size: 17px; font-weight: 800; }.match-time { text-align: right; }.match-time b { font-size: 15px; }.match-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }.match-stats div { padding-left: 8px; border-left: 1px solid var(--line); }.match-stats b, .match-stats span { display: block; }.match-stats b { font-size: 12px; }.match-stats span { color: var(--faint); font-size: 9px; margin-top: 2px; }.match-grade { text-align: center; }.match-grade strong { display: block; font-size: 24px; line-height: 1; }.match-grade span { color: var(--faint); font-size: 9px; }.detail-toggle-button { padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 10px; white-space: nowrap; }.detail-toggle-button:hover { color: var(--text); border-color: var(--purple); }.detail-toggle-button span { margin-left: 3px; color: var(--purple); }.match-card > .detail-row { border-top: 1px solid var(--line); background: rgba(0,0,0,.14); }.match-card .detail-row.hidden { display: none; }.match-detail { padding: 16px 20px 18px; }.detail-meta { flex-wrap: wrap; align-items: center; }.detail-meta code { margin-left: auto; color: var(--faint); font-size: 9px; }.match-detail .participant-table { background: rgba(0,0,0,.13); }
.advanced-grid > div b { white-space: normal; line-height: 1.45; }.advanced-grid > div:first-child b, .advanced-grid > div:nth-child(2) b { min-height: 32px; }
@media (max-width: 1280px) { .match-main { grid-template-columns: 1fr 1.2fr 58px 82px; gap: 10px; }.match-identity { grid-template-columns: 48px minmax(105px,1fr); }.match-time { display: none; }.role-all-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .match-main { grid-template-columns: 1fr 1fr 58px; }.detail-toggle-button { grid-column: 1 / -1; }.match-stats { grid-template-columns: repeat(3, 1fr); }.role-analysis-body { grid-template-columns: 1fr; }.role-all-grid { grid-template-columns: repeat(2, 1fr); } }

.match-detail { padding: 16px 18px 20px; background: linear-gradient(180deg, rgba(11,14,20,.98), rgba(16,18,26,.96)); }
.match-detail .detail-meta { padding: 0 2px 13px; margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.match-detail .detail-meta > span:first-child b { color: var(--teal); font-size: 12px; }
.match-advice { margin: 12px 0 14px; border-left: 3px solid var(--coral); background: linear-gradient(90deg, rgba(255,117,107,.1), rgba(255,117,107,.025)); }
.detail-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 8px; background: #202330; }
.detail-tab { flex: 1; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; }
.detail-tab:hover { color: var(--text); background: rgba(255,255,255,.06); }.detail-tab.active { color: var(--text); background: #4c486d; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.detail-pane { display: none; }.detail-pane.active { display: block; }
.detail-summary-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.detail-summary-grid > div { min-width: 0; padding: 11px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; background: #1a1d26; }.detail-summary-grid b, .detail-summary-grid span { display: block; }.detail-summary-grid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 15px; }.detail-summary-grid span { margin-top: 3px; color: var(--faint); font-size: 9px; }
.overview-note { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: rgba(46,228,202,.06); color: var(--muted); font-size: 11px; }.overview-note b { color: var(--teal); }.overview-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akari-table-scroll { overflow: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: #11141b; }.akari-table { width: 100%; min-width: 1080px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }.akari-table th, .akari-table td { width: 104px; padding: 10px 8px; border-right: 1px solid rgba(255,255,255,.045); border-bottom: 1px solid rgba(255,255,255,.06); text-align: center; vertical-align: middle; font-size: 10px; }.akari-table th:last-child, .akari-table td:last-child { border-right: 0; }.akari-table thead th { height: 92px; padding: 8px 5px; background: #20232f; color: var(--muted); font-weight: 500; }.akari-table tbody td { color: #d8dbe3; background: #151821; }.akari-table tbody tr:nth-child(even) td { background: #191c25; }.akari-table .metric-name { position: sticky; left: 0; z-index: 2; width: 115px; min-width: 115px; color: var(--muted); background: #252836; text-align: left; font-weight: 700; }.akari-table thead .metric-name { z-index: 3; background: #303346; }.participant-head { position: relative; }.participant-head.team-blue { box-shadow: inset 0 3px 0 #3b91ff; }.participant-head.team-red { box-shadow: inset 0 3px 0 #ff6961; }.participant-head.target-player { background: #34304f; }.participant-champion { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 5px; border: 2px solid #6aafff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6c71b5, #25293f); color: #fff; font-size: 15px; font-weight: 800; }.participant-head.team-red .participant-champion { border-color: #ff756b; }.participant-head b, .participant-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.participant-head b { color: var(--text); font-size: 10px; }.participant-head small { margin-top: 2px; color: var(--faint); font-size: 8px; }.akari-table td.win { color: var(--teal) !important; font-weight: 700; }.akari-table td.loss { color: var(--coral) !important; font-weight: 700; }.akari-table .build-table { min-width: 1080px; }.build-table td { white-space: normal; word-break: break-word; line-height: 1.5; }.build-table td:not(.metric-name) { color: var(--muted); }
.akari-groups { display: grid; gap: 14px; }.akari-group { overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: #10131a; }.akari-group-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: linear-gradient(90deg, rgba(92,101,170,.22), rgba(20,23,33,.3)); color: var(--text); }.akari-group-title b { font-size: 13px; }.akari-group-title span { color: var(--faint); font-size: 10px; }
.dashboard-detail-row > td { padding: 0 !important; background: #0d1016 !important; }.dashboard-detail-groups { padding: 14px; }.dashboard-detail-button { padding: 6px 9px; border: 1px solid rgba(110,168,255,.4); border-radius: 5px; background: rgba(110,168,255,.1); color: #b8d5ff; font-size: 10px; cursor: pointer; }.dashboard-detail-button:disabled { opacity: .55; cursor: wait; }
.event-summary { display: flex; gap: 9px; margin-bottom: 12px; }.event-summary > div { min-width: 125px; padding: 10px 12px; border-radius: 7px; background: #1b1e28; }.event-summary b, .event-summary span { display: block; }.event-summary b { color: var(--purple); font-size: 17px; }.event-summary span { color: var(--faint); font-size: 9px; }.akari-events { max-height: 290px; overflow-y: auto; align-content: flex-start; padding: 2px; }.akari-events .event-pill { display: inline-flex; gap: 5px; align-items: center; padding: 6px 8px; }.akari-events .event-pill b { font-size: 9px; font-weight: 600; }.akari-events .event-pill small { color: #938bbd; font-size: 8px; }
@media (max-width: 800px) { .detail-summary-grid { grid-template-columns: repeat(3, 1fr); }.detail-tabs { overflow-x: auto; }.detail-tab { min-width: 92px; }.match-detail .detail-meta code { margin-left: 0; }.akari-table { min-width: 1080px; } }

.comparison-panel { margin: 14px 0 0; padding: 17px; border-color: rgba(46,228,202,.25); background: linear-gradient(145deg, rgba(24,35,42,.95), rgba(21,24,31,.96)); }
.comparison-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }.comparison-heading h3 { margin: 4px 0 3px; font-size: 17px; }.comparison-heading p { margin: 0; color: var(--muted); font-size: 11px; }.comparison-sample { color: var(--teal); font-size: 11px; }
.comparison-role-tabs { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; overflow-x: auto; border-radius: 8px; background: rgba(0,0,0,.18); }.comparison-role-tab { padding: 7px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; white-space: nowrap; }.comparison-role-tab:hover { color: var(--text); background: rgba(255,255,255,.06); }.comparison-role-tab.active { color: #0c1b1a; background: var(--teal); font-weight: 800; }
.comparison-top { display: grid; grid-template-columns: 360px 1fr; gap: 15px; align-items: stretch; }.comparison-radar { display: grid; place-items: center; min-height: 300px; border-radius: 9px; background: rgba(0,0,0,.16); }.comparison-radar svg { width: 100%; max-width: 370px; height: 300px; overflow: visible; }.comparison-grid { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1; }.comparison-axis { stroke: rgba(255,255,255,.11); stroke-width: 1; }.comparison-axis-label { fill: var(--muted); font-size: 11px; }.comparison-center { fill: var(--teal); }.comparison-shape { fill: var(--comparison-color); fill-opacity: .12; stroke: var(--comparison-color); stroke-width: 2; stroke-linejoin: round; }.comparison-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 13px; padding: 0 12px 12px; color: var(--muted); font-size: 10px; }.comparison-legend span { display: inline-flex; align-items: center; gap: 5px; }.comparison-legend i { width: 7px; height: 7px; border-radius: 50%; }
.comparison-ranking { min-width: 0; padding: 13px; border-radius: 9px; background: rgba(0,0,0,.16); }.comparison-ranking-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }.comparison-ranking-title b { font-size: 12px; }.comparison-ranking-title span { color: var(--faint); font-size: 10px; }.comparison-ranking table { width: 100%; border-collapse: collapse; table-layout: fixed; }.comparison-ranking th, .comparison-ranking td { padding: 8px 7px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; white-space: nowrap; font-size: 10px; }.comparison-ranking th { color: var(--faint); font-weight: 500; }.comparison-ranking td { color: var(--muted); }.comparison-ranking tr:last-child td { border-bottom: 0; }.comparison-ranking td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }.comparison-ranking td:nth-child(2) b, .comparison-ranking td:nth-child(2) small { display: block; overflow: hidden; text-overflow: ellipsis; }.comparison-ranking td:nth-child(2) small { color: var(--faint); font-size: 8px; margin-top: 2px; }.comparison-ranking .comparison-total { color: var(--teal); font-size: 14px; font-weight: 800; }.comparison-rank { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); color: var(--muted); }.comparison-ranking tr:first-child .comparison-rank { background: rgba(242,198,103,.2); color: var(--yellow); }.comparison-ranking tr:nth-child(2) .comparison-rank { background: rgba(157,140,255,.18); color: var(--purple); }.comparison-ranking tr:nth-child(3) .comparison-rank { background: rgba(110,168,255,.16); color: #8fc0ff; }
.comparison-categories { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }.comparison-category { min-width: 0; padding: 10px; border-radius: 7px; background: rgba(255,255,255,.035); }.comparison-category b, .comparison-category span { display: block; }.comparison-category b { color: var(--text); font-size: 10px; }.comparison-category span { display: -webkit-box; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (max-width: 1200px) { .comparison-top { grid-template-columns: 300px 1fr; }.comparison-radar svg { max-width: 310px; }.comparison-categories { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .comparison-top { grid-template-columns: 1fr; }.comparison-radar svg { max-width: 360px; }.comparison-categories { grid-template-columns: repeat(2, 1fr); }.comparison-ranking { overflow-x: auto; }.comparison-ranking table { min-width: 600px; } }

.comparison-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.comparison-category { min-height: 112px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: linear-gradient(145deg, rgba(36,42,52,.9), rgba(25,29,38,.94)); }
.comparison-category b { color: var(--text); font-size: 13px; }.comparison-category span { display: grid; gap: 7px; margin-top: 12px; overflow: visible; color: var(--muted); font-size: 11px; line-height: 1.4; -webkit-line-clamp: unset; }
.comparison-category em { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 7px; align-items: center; font-style: normal; }.comparison-category em i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--muted); font-size: 9px; font-style: normal; }.comparison-category em:first-child i { background: rgba(242,198,103,.2); color: var(--yellow); }.comparison-category em strong { color: var(--teal); font-size: 13px; }
.comparison-ranking td:nth-child(2) em { display: block; max-width: 190px; overflow: hidden; margin-top: 3px; color: #9bb8b8; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.portrait-panel { margin-top: 14px; padding: 15px; }
.portrait-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.portrait-grid article { min-height: 106px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.14); }
.portrait-grid b, .portrait-grid strong, .portrait-grid small { display: block; }
.portrait-grid b { color: var(--muted); font-size: 11px; }
.portrait-grid strong { margin: 10px 0 5px; color: var(--teal); font-size: 21px; }
.portrait-grid small, .portrait-note { color: var(--faint); font-size: 10px; line-height: 1.6; }
.portrait-note { margin: 11px 0 0; }
@media (max-width: 800px) { .portrait-grid { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .comparison-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .comparison-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }.comparison-category { min-height: 105px; padding: 12px; } }
.comparison-pending td { opacity: .42; background: rgba(255,255,255,.018); }.comparison-pending td:nth-child(2) b { color: var(--muted); }.comparison-empty { margin: 14px 0 0; color: var(--faint); font-size: 10px; }.comparison-ranking-title span { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-link { color: var(--teal); font-size: 11px; text-decoration: none; }.dashboard-link:hover { text-decoration: underline; }.topbar > .dashboard-link { margin-left: auto; margin-right: 22px; }
.bulk-collect { width: 100%; margin: 12px 0 4px; border: 1px solid rgba(242,198,103,.35); background: rgba(242,198,103,.12); color: var(--yellow); }.bulk-collect:disabled { cursor: not-allowed; opacity: .35; }.bulk-collect:not(:disabled):hover { border-color: var(--yellow); }