:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif;
  --bg: #080b11;
  --surface: #111620;
  --surface-2: #171d29;
  --line: #2b3445;
  --text: #f4f7fb;
  --muted: #9aa6b7;
  --blue: #42a5ff;
  --green: #3ee58d;
  --red: #ff6c72;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 75% -20%, #183258 0, transparent 32rem), var(--bg); font-size: 16px; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 15px clamp(18px, 4vw, 56px); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(8,11,17,.86); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg,#168cff,#584bff); font-size: 24px; font-weight: 800; box-shadow: 0 10px 32px rgba(10,132,255,.3); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.ghost-button, .filters button, .login-form button { cursor: pointer; color: white; border: 0; border-radius: 10px; font-weight: 700; }
.ghost-button { padding: 10px 16px; background: #222a38; }
.dashboard { width: min(1360px, calc(100% - 36px)); margin: 28px auto 60px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.summary-card, .panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(25,32,45,.98), rgba(14,18,27,.98)); box-shadow: 0 18px 60px rgba(0,0,0,.24); }
.summary-card { position: relative; overflow: hidden; min-height: 145px; padding: 23px 25px; border-radius: 18px; }
.summary-card::after { content: ""; position: absolute; right: -30px; top: -50px; width: 145px; height: 145px; border-radius: 50%; opacity: .13; background: currentColor; filter: blur(3px); }
.summary-card span, .summary-card small { display: block; color: var(--muted); }
.summary-card strong { display: inline-block; margin: 13px 0 7px; font-size: clamp(30px,4vw,44px); line-height: 1; letter-spacing: -.03em; }
.accent-blue { color: var(--blue); }.accent-purple { color: #ae8cff; }.accent-green { color: var(--green); }.accent-orange { color: #ffad5c; }
.notice { margin: 0 0 18px; padding: 13px 17px; border: 1px solid #28553e; border-radius: 12px; color: #8ce7b6; background: #11261b; }
.panel { margin-top: 18px; border-radius: 20px; overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; }
.panel-heading h2 { margin: 3px 0 0; font-size: 24px; }.eyebrow { margin: 0; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #28553e; border-radius: 999px; color: #8ce7b6; background: #11261b; font-size: 13px; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.heading-note { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.chart-heading { align-items: flex-end; }
.chart-legend { display: flex; gap: 16px; color: var(--muted); font-size: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.legend-positive { background: var(--green); box-shadow: 0 0 12px rgba(62,229,141,.35); }
.legend-negative { background: var(--red); box-shadow: 0 0 12px rgba(255,108,114,.35); }
.combat-chart-scroll { overflow-x: auto; padding: 0 18px 22px; scrollbar-color: #39465b transparent; }
.combat-chart { --plot-half: 174px; position: relative; display: grid; grid-template-columns: repeat(var(--player-count), minmax(86px, 1fr)); min-width: max(720px, calc(var(--player-count) * 94px)); padding: 18px 30px 0; border: 1px solid #273143; border-radius: 16px; background: linear-gradient(to bottom, rgba(62,229,141,.035) 0 43%, transparent 43% 57%, rgba(255,108,114,.035) 57% 100%), #0b1018; overflow: hidden; }
.chart-grid { position: absolute; left: 22px; right: 22px; height: 1px; border-top: 1px dashed rgba(154,166,183,.17); pointer-events: none; }
.chart-grid span { position: absolute; left: 3px; padding: 3px 7px; color: #6f7c8f; background: #0b1018; font-size: 11px; letter-spacing: .08em; }
.chart-grid-top { top: 104px; }.chart-grid-top span { top: -12px; }
.chart-grid-bottom { top: 300px; }.chart-grid-bottom span { top: -12px; }
.chart-zero-line { position: absolute; z-index: 2; left: 20px; right: 20px; top: calc(18px + var(--plot-half)); height: 2px; background: linear-gradient(90deg, transparent, #738198 7%, #738198 93%, transparent); box-shadow: 0 0 14px rgba(139,154,177,.18); pointer-events: none; }
.chart-zero-line span { position: absolute; left: 1px; top: -13px; display: grid; place-items: center; width: 28px; height: 26px; border: 1px solid #4a566a; border-radius: 8px; color: #d5dce7; background: #161d28; font-size: 12px; font-weight: 800; }
.chart-column { position: relative; z-index: 1; display: grid; grid-template-rows: var(--plot-half) var(--plot-half) 70px; min-width: 0; }
.chart-half { display: flex; align-items: center; padding: 8px 7px 1px; }
.chart-positive-half { flex-direction: column; justify-content: flex-end; }
.chart-negative-half { flex-direction: column; justify-content: flex-start; padding-top: 2px; }
.score-bar { display: block; flex: 0 0 var(--bar-height, 9px); width: min(44px, 62%); height: var(--bar-height, 9px); min-height: 9px; max-height: 130px; border: 1px solid rgba(255,255,255,.2); }
.score-bar-positive { border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg, #8bffc1, #24b976); box-shadow: 0 0 20px rgba(62,229,141,.14), inset 0 1px rgba(255,255,255,.35); }
.score-bar-negative { border-radius: 3px 3px 9px 9px; background: linear-gradient(180deg, #e84e59, #8d2635); box-shadow: 0 0 20px rgba(255,108,114,.13), inset 0 -1px rgba(255,255,255,.2); }
.chart-score { margin: 4px 0 7px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-negative-half .chart-score { margin: 7px 0 4px; }
.zero-dot { position: absolute; z-index: 4; bottom: -6px; width: 12px; height: 12px; border: 3px solid #0b1018; border-radius: 50%; background: #aab4c4; box-shadow: 0 0 0 1px #aab4c4; }
.chart-person { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 3px 8px; text-align: center; }
.chart-person b { max-width: 100%; overflow: hidden; color: #f5f8fd; text-overflow: ellipsis; white-space: nowrap; }
.chart-person span, .combat-badge { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #3b4658; border-radius: 999px; color: #bac4d3; background: #171e29; font-size: 12px; font-weight: 750; white-space: nowrap; }
.chart-person span { min-height: 24px; padding: 3px 8px; }
.combat-badge { min-width: 88px; padding: 6px 10px; }
.combat-abyss.chart-column .chart-person span, .combat-abyss.combat-badge { color: #ff86bd; border-color: #63324f; background: #291525; }
.combat-underwater.chart-column .chart-person span, .combat-underwater.combat-badge { color: #b899ff; border-color: #4b3c72; background: #211a38; }
.combat-sunken.chart-column .chart-person span, .combat-sunken.combat-badge { color: #72bfff; border-color: #2b5071; background: #12283b; }
.combat-struggling.chart-column .chart-person span, .combat-struggling.combat-badge { color: #88a7c7; border-color: #35485d; background: #172332; }
.combat-balanced.chart-column .chart-person span, .combat-balanced.combat-badge { color: #b7c0ce; }
.combat-rookie.chart-column .chart-person span, .combat-rookie.combat-badge { color: #8ce7b6; border-color: #28553e; background: #11261b; }
.combat-brave.chart-column .chart-person span, .combat-brave.combat-badge { color: #67e5d5; border-color: #27605b; background: #102b29; }
.combat-general.chart-column .chart-person span, .combat-general.combat-badge { color: #ffd679; border-color: #695525; background: #2a2311; }
.combat-overlord.chart-column .chart-person span, .combat-overlord.combat-badge { color: #ffad5c; border-color: #75451e; background: #311d0e; box-shadow: 0 0 15px rgba(255,173,92,.11); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 16px 26px; text-align: center; border-top: 1px solid var(--line); }
th { color: var(--muted); background: rgba(255,255,255,.025); font-size: 14px; }
td { font-size: 16px; } tbody tr:hover { background: rgba(66,165,255,.045); }
.player-name { font-weight: 750; }.rank { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--muted); background: #202735; }
.rank-1 { color: #2b1f00; background: #ffd85a; }.rank-2 { color: #263242; background: #cdd7e8; }.rank-3 { color: #38200f; background: #dca276; }
.positive { color: var(--green) !important; }.negative { color: var(--red) !important; }.neutral { color: var(--muted) !important; }
.history-heading { align-items: flex-end; flex-wrap: wrap; }.filters { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.filters label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }.filters input { min-height: 40px; padding: 8px 10px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #0e131c; }
.filters input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66,165,255,.12); }.filters button { min-height: 40px; padding: 8px 17px; background: #0a84ff; }.filters a { min-height: 40px; padding: 9px 8px; color: var(--muted); text-decoration: none; }
.report-list { border-top: 1px solid var(--line); }.report-card { border-bottom: 1px solid var(--line); }.report-card:last-child { border-bottom: 0; }
.report-card summary { display: grid; grid-template-columns: 65px 1fr auto 26px; align-items: center; gap: 14px; padding: 18px 26px; cursor: pointer; list-style: none; }.report-card summary::-webkit-details-marker { display:none; }
.report-index { color: var(--muted); font-variant-numeric: tabular-nums; }.report-card summary strong, .report-card summary small { display: block; }.report-card summary small { margin-top: 5px; color: var(--muted); font-size: 13px; }.report-total { font-size: 22px; font-weight: 800; }
.chevron { color: var(--muted); font-size: 20px; transition: transform .18s ease; }.report-card[open] .chevron { transform: rotate(180deg); }
.entry-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1px; padding: 1px 26px 20px; }.entry-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 15px; background: #0d121b; border: 1px solid #202938; }.entry-row strong { font-variant-numeric: tabular-nums; }
.consumption-section { margin: 0 26px 14px; padding: 15px; border: 1px solid #3b3429; border-radius: 12px; background: #17140f; }.consumption-heading { display:flex; justify-content:space-between; gap:12px; color:#ffbd74; }.consumption-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.consumption-list span { display:flex; gap:16px; min-width:150px; justify-content:space-between; padding:9px 12px; border-radius:8px; color:#d8deea; background:#211c15; }.consumption-list b { font-weight:500; }.consumption-list strong { color:#ffbd74; }.no-consumption { margin:10px 0 0; color:var(--muted); font-size:14px; }
.report-actions { display:flex; justify-content:flex-end; padding:0 26px 20px; }.delete-button { cursor:pointer; padding:9px 14px; border:1px solid #613338; border-radius:9px; color:#ff8d92; background:#251417; font:inherit; font-weight:700; }.delete-button:hover { background:#35191d; }
.empty-state { padding: 58px 25px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }
.login-shell { display: grid; place-items: center; min-height: 100vh; padding: 24px; }.login-card { width: min(430px,100%); padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: rgba(17,22,32,.96); box-shadow: 0 30px 90px rgba(0,0,0,.46); }
.brand-mark { display: flex; gap: 7px; margin-bottom: 32px; }.brand-mark span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }.brand-mark span:nth-child(2){background:#febc2e}.brand-mark span:nth-child(3){background:#28c840}
.login-card h1 { margin: 8px 0; font-size: 36px; }.login-copy { margin: 0 0 28px; color: var(--muted); }.login-form { display: grid; gap: 10px; }.login-form label { color: var(--muted); font-size: 14px; }.login-form input { width: 100%; min-height: 51px; padding: 11px 14px; color: var(--text); border: 1px solid var(--line); border-radius: 11px; outline: none; background: #0a0f17; }.login-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66,165,255,.13); }.login-form button { min-height: 51px; margin-top: 7px; background: linear-gradient(135deg,#0a84ff,#5c54ff); }.form-error { margin: 2px 0; color: var(--red); }
@media (max-width: 1050px) and (min-width: 761px) { .summary-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) { .dashboard { width: min(100% - 24px,1360px); margin-top: 18px; }.summary-grid { grid-template-columns: 1fr; gap: 10px; }.summary-card { min-height: 116px; padding: 18px 20px; }.panel-heading { padding: 20px 18px 15px; }.chart-heading { align-items: flex-start; flex-direction: column; gap: 12px; }.combat-chart-scroll { padding: 0 10px 14px; }.combat-chart { --plot-half: 154px; padding-left: 24px; padding-right: 24px; }.chart-grid-top { top: 90px; }.chart-grid-bottom { top: 272px; }.score-bar { max-height: 120px; }.history-heading { align-items: stretch; }.filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }.filters label:first-child { grid-column: 1 / -1; }.filters button { grid-column: 1 / 2; }.report-card summary { grid-template-columns: 48px 1fr auto 18px; padding: 16px 14px; gap: 8px; }.report-total { font-size: 18px; }.entry-grid { grid-template-columns: 1fr 1fr; padding: 1px 14px 16px; }.consumption-section { margin:0 14px 13px; }.report-actions { padding:0 14px 16px; }.topbar { padding: 12px 14px; }.brand small { display:none; } }
@media (max-width: 430px) { .entry-grid { grid-template-columns: 1fr; }.report-card summary { grid-template-columns: 42px 1fr 18px; }.report-total { grid-column: 2 / 3; }.chevron { grid-column: 3; grid-row: 1 / 3; }.login-card { padding: 27px 23px; } }