:root {
    --bg: #0c0c0e;
    --bg-elevated: #161618;
    --surface: #222226;
    --border: #2c2c31;
    --text: #f5f5f6;
    --muted: #8d8d96;
    --accent: #ff5a1f;
    --accent-dark: #e04412;
    --ok: #3dd68c;
    --danger: #ff5c5c;
    --on-accent: #ffffff;
    --chrome: #08080a;
    --shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
    --radius: 18px;
    --sidebar-collapsed: 72px;
    --sidebar-expanded: 240px;
    --topbar: 60px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}
a, a:hover, a:focus { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(900px 400px at 10% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%),
        var(--bg);
}
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.auth-card {
    width: min(440px, 100%);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}
.auth-card-wide { width: min(640px, 100%); }
.auth-brand { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 1rem; }
.auth-brand h1, h1, h2, h3 { margin: 0 0 0.4rem; line-height: 1.2; }
.brand-mark, .brand-logo {
    width: 42px; height: 42px; display: grid; place-items: center;
    background: var(--accent); color: var(--on-accent); font-weight: 800; border-radius: 12px;
}
.brand-logo { object-fit: cover; background: transparent; }
.brand { display: flex; gap: 0.7rem; align-items: center; color: var(--text); text-decoration: none; padding: 0.2rem 0.4rem 1rem; }
.brand-name { font-weight: 700; }
.hint { color: var(--muted); font-size: 0.92rem; }
.center { text-align: center; }
.lead { color: var(--muted); }

.app { min-height: 100vh; background: var(--bg); }
.main-col {
    margin-left: var(--sidebar-collapsed);
    transition: margin-left 0.22s ease;
    min-height: 100vh;
    background: var(--bg);
}
body.sidebar-open .main-col,
.sidebar:hover ~ .main-col { margin-left: var(--sidebar-expanded); }
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-collapsed); z-index: 200;
    background: var(--chrome); border-right: 1px solid rgba(255, 255, 255, 0.04); overflow: hidden;
    transition: width 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.sidebar:hover, .sidebar.is-open {
    width: var(--sidebar-expanded);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
}
.sidebar-inner { display: flex; flex-direction: column; height: 100%; padding: 0.55rem 0.4rem; }
.sidebar-brand {
    display: flex; align-items: center; gap: 0.65rem; color: var(--text); text-decoration: none;
    padding: 0.35rem 0.3rem 0.8rem; white-space: nowrap;
}
.sidebar .brand-mark, .sidebar .brand-logo { margin: 0 auto; flex-shrink: 0; }
.sidebar:hover .brand-mark, .sidebar.is-open .brand-mark,
.sidebar:hover .brand-logo, .sidebar.is-open .brand-logo { margin: 0; }
.brand-text {
    font-weight: 700; opacity: 0; width: 0; overflow: hidden; white-space: nowrap;
    transition: opacity 0.2s ease;
}
.sidebar:hover .brand-text, .sidebar.is-open .brand-text { opacity: 1; width: auto; }
.sidebar-nav {
    display: flex; flex-direction: column; gap: 0.15rem; flex: 1; overflow: auto;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-link-btn[hidden] { display: none; }
.sidebar-link, .sidebar-link-btn {
    display: flex; align-items: center; gap: 0.55rem; width: 100%;
    padding: 0.15rem 0.25rem; border: 0; background: transparent; color: var(--muted);
    text-decoration: none; border-radius: 10px; cursor: pointer; text-align: left; white-space: nowrap;
}
.sidebar-link:hover, .sidebar-link-btn:hover { color: var(--text); }
.sidebar-link.is-active { color: var(--text); }
.sidebar-icon-wrap {
    width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px;
}
.sidebar-icon-wrap svg { width: 20px; height: 20px; }
.sidebar-link:hover .sidebar-icon-wrap { background: var(--surface); color: var(--text); }
.sidebar-link.is-active .sidebar-icon-wrap {
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.sidebar-label { opacity: 0; width: 0; overflow: hidden; font-size: 0.92rem; transition: opacity 0.2s ease; }
.sidebar:hover .sidebar-label, .sidebar.is-open .sidebar-label { opacity: 1; width: auto; }
.sidebar-footer { border-top: 1px solid var(--border); padding-top: 0.35rem; margin-top: 0.35rem; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 150; }
.sidebar-backdrop[hidden] { display: none; }
.icon-btn {
    width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
    border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; }
.topbar {
    height: var(--topbar); display: flex; align-items: center; gap: 0.8rem;
    padding: 0 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); position: sticky; top: 0;
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); z-index: 10;
}
.topbar-title { margin-right: auto; color: var(--text); font-weight: 700; font-size: 1.15rem; }
.topbar-user { color: var(--text); text-decoration: none; font-weight: 600; }
.content { padding: 1.4rem 1.4rem 2.5rem; max-width: 1100px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    border-radius: 12px; padding: 0.55rem 0.9rem; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.btn-secondary { background: transparent; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-small { padding: 0.3rem 0.55rem; font-size: 0.85rem; }
.stack { display: grid; gap: 0.75rem; }
.card, .stat {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 42%);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.card-grid, .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; margin: 1rem 0; }
.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.stat span { display: block; font-size: 1.7rem; font-weight: 750; }
.empty { padding: 1rem; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); }

label { display: grid; gap: 0.3rem; font-size: 0.92rem; }
input, select, textarea {
    width: 100%; background: color-mix(in srgb, var(--bg) 72%, black); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.6rem 0.7rem;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, .rte-area:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); }
.check { display: flex; gap: 0.5rem; align-items: center; }
.check input { width: auto; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: 10px; padding: 0.75rem 0.9rem; margin: 0 0 0.8rem; }
.alert-error { background: rgba(240, 113, 120, 0.12); color: #ffd5d8; }
.alert-success { background: rgba(61, 214, 140, 0.12); color: #d8ffe9; }
.passcode { font-size: 1.2rem; letter-spacing: 0.08em; }
.badge { display: inline-flex; border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--border); }
.badge-admin { color: #ffd7ba; }
.badge-r4 { color: #c9d4ff; }
.badge-member { color: var(--muted); }

.table-wrap { overflow-x: auto; margin: 1rem 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.82rem; }
tbody tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
.row-actions, .inline-form { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.inline-form input, .inline-form select { width: auto; }
.filters { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.detail { display: grid; grid-template-columns: 160px 1fr; gap: 0.35rem 0.8rem; }
.detail dt { color: var(--muted); }
.shot-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.shot-row img { width: 140px; height: 90px; object-fit: cover; border-radius: 8px; }

.update-banner {
    background: #2a1a10; border: 1px solid #7c3e12; border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
}
.check-list { list-style: none; padding: 0; }
.check-list li { padding: 0.25rem 0; }
.check-list .ok::before { content: "Ready · "; color: var(--ok); }
.check-list .bad::before { content: "Missing · "; color: var(--danger); }

.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; margin-top: 1rem; }
.cal-head { color: var(--muted); font-size: 0.8rem; padding: 0.2rem; }
.cal-day {
    min-height: 92px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 0.35rem;
}
.cal-day.is-empty { background: transparent; border-color: transparent; }
.cal-day.is-today { border-color: var(--accent); }
.cal-num { display: block; font-size: 0.8rem; color: var(--muted); }
.event-pill {
    display: block; margin-top: 0.25rem; color: #1a1008; border-radius: 6px; padding: 0.1rem 0.3rem;
    font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-list { list-style: none; padding: 0; }
.event-list li { padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 99px; margin-right: 0.35rem; }

@media (max-width: 860px) {
    .main-col, body.sidebar-open .main-col, .sidebar:hover ~ .main-col { margin-left: 0; }
    .sidebar { transform: translateX(-105%); width: min(84vw, var(--sidebar-expanded)); }
    .sidebar:hover { width: min(84vw, var(--sidebar-expanded)); }
    .sidebar.is-open { transform: none; box-shadow: var(--shadow); }
    .sidebar .brand-text, .sidebar .sidebar-label { opacity: 1; width: auto; }
    .sidebar .brand-mark, .sidebar .brand-logo { margin: 0; }
    .calendar { gap: 0.2rem; }
    .cal-day { min-height: 64px; }
    .detail { grid-template-columns: 1fr; }
    .public-grid, .profile-layout, .stats-chart-grid, .stats-battle { grid-template-columns: 1fr; }
    .public-bar { flex-wrap: wrap; }
}

.public-body { background: var(--bg); color: var(--text); }
.public-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--chrome) 92%, transparent); position: sticky; top: 0; z-index: 20;
}
.public-nav { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; }
.public-page { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
.public-hero {
    position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 18px;
    padding: 2.4rem 1.6rem; background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 42%),
        linear-gradient(160deg, var(--surface), var(--chrome));
    margin-bottom: 1rem;
}
.public-hero--image { min-height: 280px; display: flex; align-items: flex-end; padding: 0; }
.public-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.public-hero--image .public-hero__content {
    position: relative; width: 100%; padding: 1.6rem;
    background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 92%, transparent));
}
.public-hero__logo {
    width: 72px; height: 72px; object-fit: cover; border-radius: 16px; margin-bottom: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.public-hero__eyebrow { margin: 0 0 0.35rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.public-hero h1 { margin: 0 0 0.4rem; font-size: clamp(2rem, 5vw, 3.4rem); }
.public-hero__tagline { margin: 0 0 1rem; max-width: 38rem; color: var(--muted); font-size: 1.05rem; }
.public-hero__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.birthday-line { margin: 0 0 1rem; color: var(--accent); }
.public-grid { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 1rem; align-items: start; }
.migration-panel { margin-top: 1rem; }
.rich-text p, .rich-text li { color: var(--muted); }
.rich-text h2, .rich-text h3 { margin: 0.8rem 0 0.35rem; }
.rich-text ul, .rich-text ol { margin: 0 0 0.75rem; padding-left: 1.2rem; }
.rich-text a { color: var(--accent); }
.rte { display: grid; gap: 0.45rem; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.rte-color { display: flex; align-items: center; gap: 0.4rem; }
.rte-bar input[type="color"], .color-grid input[type="color"] { width: 48px; height: 36px; padding: 0.15rem; }
.rte-area {
    min-height: 240px; background: var(--bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 0.8rem 0.9rem;
}
.rte-area p { margin: 0 0 0.7rem; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; }
.public-bar .brand { padding: 0; }
.public-side { display: grid; gap: 0.75rem; align-content: start; }
.public-login { width: 100%; }
.public-login h2 { margin-top: 0; }
.discord-btn { width: 100%; }
.hero-preview { width: min(100%, 420px); border-radius: 12px; border: 1px solid var(--border); }
.logo-preview { width: 72px; height: 72px; object-fit: cover; border-radius: 16px; border: 1px solid var(--border); }
.profile-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; }
.profile-card { text-align: center; }
.avatar-img, .avatar-fallback {
    width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin: 0 auto 0.8rem;
}
.avatar-fallback {
    display: grid; place-items: center; background: #2a2118; color: var(--accent);
    font-size: 2.4rem; font-weight: 700;
}
.check { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.question-editor { display: grid; gap: 0.9rem; margin-bottom: 1rem; }

.content:has(.stats-app),
.public-page:has(.stats-app) { max-width: 1440px; }
.content:has(.dash),
.content:has(.calendar),
.content:has(.leadership-home),
.content:has(.roster-page),
.content:has(.deadweights-page),
.content:has(.mail-generator-page) { max-width: none; }
.stats-head h1 { margin-bottom: 0.15rem; }
.stats-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1rem; }
.stats-tab {
    color: var(--muted); text-decoration: none; border: 1px solid transparent;
    border-radius: 999px; padding: 0.3rem 0.75rem; background: transparent;
}
.stats-tab:hover { color: var(--text); background: var(--surface); }
.stats-tab.is-active { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 700; }
.stats-actions, .stats-toolbar, .stats-search, .stats-pager { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin: 0.6rem 0 1rem; }
.stats-toolbar label, .stats-search label, .stats-dkp-form label { min-width: 10rem; }
.stats-kpis, .stats-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin: 0.8rem 0 1.2rem; }
.stats-boards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stats-kpi {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 42%);
    border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 0.9rem;
    display: grid; gap: 0.15rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.stats-kpi span, .stats-kpi em { color: var(--muted); font-style: normal; font-size: 0.85rem; }
.stats-kpi strong { font-size: 1.35rem; }
.stats-kpi--power { border-color: rgba(255, 90, 31, 0.45); }
.stats-kpi--power strong { color: #ffb088; }
.stats-kpi--kp, .stats-kpi--defeat { border-color: rgba(248, 113, 113, 0.45); }
.stats-kpi--kp strong, .stats-kpi--defeat strong { color: #fca5a5; }
.stats-kpi--deads { border-color: rgba(192, 132, 252, 0.45); }
.stats-kpi--deads strong { color: #d8b4fe; }
.stats-kpi--t5 { border-color: rgba(251, 191, 36, 0.5); }
.stats-kpi--t5 strong { color: #fde68a; }
.stats-kpi--t4 { border-color: rgba(56, 189, 248, 0.45); }
.stats-kpi--t4 strong { color: #7dd3fc; }
.stats-kpi--ch25 { border-color: rgba(52, 211, 153, 0.45); }
.stats-kpi--ch25 strong { color: #6ee7b7; }
.stats-kpi--victory { border-color: rgba(59, 130, 246, 0.5); }
.stats-kpi--victory strong { color: #93c5fd; }
.stats-charts { display: grid; gap: 0.9rem; margin: 0.4rem 0 1.2rem; }
.stats-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.stats-panel__head { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.stats-panel__head h2 { margin: 0; }
.stats-chart { width: 100%; aspect-ratio: 3 / 1; }
.stats-svg { width: 100%; height: 100%; display: block; }
.stats-donut { width: 100%; height: 100%; display: block; }
.stats-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin: 0.45rem 0 0.1rem; color: var(--muted); font-size: 0.82rem; }
.stats-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.stats-legend i { width: 0.7rem; height: 0.7rem; border-radius: 99px; display: inline-block; }
.stats-battle { display: grid; grid-template-columns: 168px 1fr; gap: 1rem; align-items: center; }
.stats-battle__donut { text-align: center; }
.stats-battle__donut .stats-donut { height: 150px; }
.stats-kpis--battle { margin: 0; }
.stats-delta.is-up, .stats-num.is-up { color: var(--ok); }
.stats-delta.is-down, .stats-num.is-down { color: var(--danger); }
.stats-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.stats-rank li { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 0.45rem; align-items: baseline; }
.stats-rank small { grid-column: 2; color: var(--muted); font-size: 0.78rem; }
.stats-group { margin: 1.2rem 0 0.4rem; }
.stats-id { display: block; color: var(--muted); font-size: 0.78rem; }
.stats-grade {
    display: inline-flex; border-radius: 999px; padding: 0.05rem 0.4rem; font-size: 0.75rem;
    border: 1px solid var(--border); color: var(--accent);
}
.stats-table { min-width: 860px; }
.stats-table td, .stats-table th { white-space: nowrap; }
.stats-num { font-variant-numeric: tabular-nums; }
.stats-dkp-scans, .stats-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
.stats-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; margin-top: 1rem; }
.stats-detail div { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.85rem; }
.stats-detail dt { color: var(--muted); font-size: 0.82rem; }
.stats-detail dd { margin: 0.15rem 0 0; font-size: 1.05rem; }
.stats-period h2 { margin-top: 0; }

.trade-ratio-explainer {
    margin: 0 0 0.9rem; padding: 1rem 1.15rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.trade-ratio-explainer h2 { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; }
.trade-ratio-explainer > p { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.9rem; }
.trade-ratio-explainer > p strong { color: var(--text); font-weight: 650; }
.trade-ratio-explainer__formula {
    display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 0.75rem; padding: 0.65rem 0.8rem;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.88rem; color: var(--text);
}
.trade-ratio-explainer__formula-fallback { color: var(--muted); font-size: 0.8rem; }
.trade-ratio-explainer__grades { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.trade-ratio-explainer__grade {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.45rem;
    padding: 0.2rem 0.55rem; border: 1px solid var(--border); border-radius: 999px; font-size: 0.75rem; color: var(--muted);
}
.trade-ratio-explainer__grade-title { font-weight: 650; }
.trade-ratio-explainer__grade--1 .trade-ratio-explainer__grade-title { color: #fecaca; }
.trade-ratio-explainer__grade--2 .trade-ratio-explainer__grade-title { color: #fed7aa; }
.trade-ratio-explainer__grade--3 .trade-ratio-explainer__grade-title { color: #bae6fd; }
.trade-ratio-explainer__grade--4 .trade-ratio-explainer__grade-title { color: #e9d5ff; }
.trade-ratio-explainer__grade--5 .trade-ratio-explainer__grade-title { color: #fde68a; }
.players-page .stats-table-wrap { overflow-x: auto; margin-bottom: 0.8rem; }
.players-page .stats-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.players-page .stats-table th.stats-th {
    background: var(--bg-elevated);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.players-page .stats-th a { color: inherit; text-decoration: none; }
.players-page .stats-th a:hover { color: var(--text); }
.players-page .stats-th-rank { color: var(--accent); }
.players-page .stats-th-power { color: #f59e0b; }
.players-page .stats-th-kp { color: #fca5a5; }
.players-page .stats-th-acclaim { color: #fbbf24; }
.players-page .stats-th-ratio { color: #86efac; }
.players-page .stats-th-dead { color: #fca5a5; }
.players-page .stats-th-rss { color: #fdba74; }
.players-page .stats-table tbody tr:hover { background: rgba(255, 90, 31, 0.05); }
.players-page .stats-row-rank { font-weight: 700; color: var(--accent); text-align: center; width: 2.6rem; }
.players-page .stats-player a { color: var(--text); font-weight: 650; text-decoration: none; }
.players-page .stats-player a:hover { color: var(--accent); }
.stats-player-cell { display: flex; align-items: center; gap: 0.65rem; min-width: 11rem; }
.stats-player-text { display: flex; flex-direction: column; min-width: 0; }
.stats-player-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: 0 0 auto; overflow: hidden;
    background: #241812; color: #ffb088; border: 1px solid rgba(255, 90, 31, 0.45); font-weight: 750; font-size: 0.85rem;
}
.stats-alliance, .stats-ch { color: var(--muted); }
.stats-metric { min-width: 5.6rem; }
.stats-metric-value { display: block; font-weight: 650; font-variant-numeric: tabular-nums; font-size: 0.84rem; margin-bottom: 0.28rem; }
.stats-bar { height: 4px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; overflow: hidden; }
.stats-bar-fill { height: 100%; border-radius: 999px; }
.stats-metric-power .stats-metric-value, .stats-metric-power .stats-bar-fill { color: #f59e0b; background: #f59e0b; }
.stats-metric-power .stats-metric-value { background: none; }
.stats-metric-kp .stats-metric-value { color: #f87171; }
.stats-metric-kp .stats-bar-fill { background: #f87171; }
.stats-metric-acclaim .stats-metric-value { color: #fbbf24; }
.stats-metric-acclaim .stats-bar-fill { background: #f59e0b; }
.stats-metric-dead .stats-metric-value { color: #f87171; }
.stats-metric-dead .stats-bar-fill { background: #ef4444; }
.stats-metric-rss .stats-metric-value { color: #fb923c; }
.stats-metric-rss .stats-bar-fill { background: #f97316; }
.stats-metric-ratio { min-width: 6.5rem; }
.stats-ratio-wrap { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; }
.stats-ratio-value { font-weight: 750; color: #4ade80; }
.stats-metric-ratio--grade-1 .stats-ratio-value { color: #fecaca; }
.stats-metric-ratio--grade-2 .stats-ratio-value { color: #fed7aa; }
.stats-metric-ratio--grade-3 .stats-ratio-value { color: #bae6fd; }
.stats-metric-ratio--grade-4 .stats-ratio-value,
.stats-metric-ratio--grade-5 .stats-ratio-value { color: #fde68a; }
.power-up { color: var(--ok); }
.power-down { color: var(--danger); }
.pagination-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin: 0.2rem 0 1rem; padding: 0.75rem 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.pagination-card .per-page-select label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); min-width: 0; }
.pagination-card select { width: auto; min-width: 4.5rem; }
.pagination-btn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem;
    border-radius: 8px; border: 1px solid rgba(255, 90, 31, 0.4); color: var(--accent); text-decoration: none;
    background: rgba(255, 90, 31, 0.08);
}
.pagination-btn:hover { background: rgba(255, 90, 31, 0.18); }
.pagination-info { margin: 0 auto; color: var(--muted); }

.player-page { display: grid; gap: 0.85rem; }
.player-header {
    display: grid; grid-template-columns: 148px minmax(0, 1fr) auto; gap: 1rem; align-items: start;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem;
}
.player-avatar-circle {
    width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background: #241812; border: 3px solid rgba(255, 90, 31, 0.55);
    box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.08);
}
.player-avatar-photo, .stats-player-avatar img, .dash-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.player-header.has-header-bg {
    background-color: #140e0a;
    background-image:
        linear-gradient(90deg, rgba(10, 7, 5, 0.88) 0%, rgba(10, 7, 5, 0.62) 42%, rgba(10, 7, 5, 0.28) 100%),
        var(--player-header-image);
    background-size: cover;
    background-position: center, var(--player-header-focus, center 42%);
}
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.45rem; max-height: 280px; overflow: auto; padding: 0.15rem; }
.pick-grid--bg { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); max-height: 380px; }
.pick-option { position: relative; display: block; cursor: pointer; }
.pick-option input { position: absolute; opacity: 0; }
.pick-option img, .pick-fallback {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 2px solid var(--border); display: grid; place-items: center;
    background: var(--bg); color: var(--muted); font-size: 0.75rem;
}
.pick-grid--bg .pick-option img, .pick-grid--bg .pick-fallback { aspect-ratio: 16 / 9; }
.pick-option input:checked + img, .pick-option input:checked + .pick-fallback { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.35); }
.pick-option input:focus-visible + img, .pick-option input:focus-visible + .pick-fallback { outline: 2px solid var(--accent); }
.player-avatar-initials { font-size: 2rem; font-weight: 750; letter-spacing: 0.04em; }
.player-username { margin: 0 0 0.25rem; }
.player-ids, .player-alliance, .player-scan-meta { margin: 0.15rem 0; color: var(--muted); }
.governor-id { color: var(--text); font-variant-numeric: tabular-nums; }
.player-civ {
    display: flex; align-items: center; gap: 0.55rem; align-self: start;
    padding: 0.35rem 0.8rem 0.35rem 0.35rem; border-radius: 18px;
    border: 1px solid var(--border); color: var(--text); background: var(--bg-elevated);
}
.player-civ .civ-icon { width: 84px; height: 84px; object-fit: contain; display: block; }
.player-civ .civ-name { font-weight: 650; }
.player-achievements, .player-trade-row { display: grid; gap: 0.55rem; margin-top: 0.8rem; }
.player-achievements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.player-trade-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.achievement-card {
    display: flex; align-items: center; gap: 0.6rem; min-width: 0;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.75rem;
}
.achievement-info { display: grid; min-width: 0; }
.achievement-value { font-weight: 750; font-size: 1.05rem; }
.achievement-title, .achievement-sub, .achievement-advice { color: var(--muted); font-size: 0.78rem; }
.achievement-advice { color: var(--text); font-size: 0.86rem; }
.achievement-trade-grade {
    width: 2.1rem; height: 2.1rem; border-radius: 8px; display: grid; place-items: center; font-weight: 800;
    background: rgba(255, 90, 31, 0.12); color: var(--accent);
}
.tr-grade-5 .achievement-trade-grade, .tr-grade-5.achievement-card { border-color: rgba(251, 191, 36, 0.45); }
.tr-grade-1 .achievement-trade-grade { color: #fecaca; background: rgba(239, 68, 68, 0.16); }
.player-core-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.7rem; }
.core-stat, .player-stat-cards .stat-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-align: center; padding: 0.85rem 0.6rem;
}
.core-stat-value, .player-stat-cards .stat-value { display: block; font-weight: 750; font-variant-numeric: tabular-nums; }
.core-stat-value { font-size: 1.15rem; }
.core-stat-label, .player-stat-cards .stat-label { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 0.15rem; }
.player-stat-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.7rem; }
.player-stat-cards .stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; }
.player-stat-cards .stat-value { font-size: 0.95rem; }
.stat-icon { display: block; margin-bottom: 0.25rem; }
.stats-ico { width: 1.15rem; height: 1.15rem; display: block; }
.ico-power { color: #f59e0b; }
.ico-kp { color: #f87171; }
.ico-trophy { color: #eab308; }
.ico-dead { color: #94a3b8; }
.ico-heart { color: #f472b6; }
.ico-heal { color: #4ade80; }
.ico-building { color: #fb923c; }
.ico-shield { color: #60a5fa; }
.ico-tech { color: #22d3ee; }
.ico-t1 { color: #94a3b8; }
.ico-t2 { color: #4ade80; }
.ico-t3 { color: #60a5fa; }
.ico-t4 { color: #fb923c; }
.ico-t5 { color: #eab308; }
.ico-scout { color: #a5b4fc; }
.ico-rss { color: #fb923c; }
.stat-card.power-up .stat-value, .core-stat-value.power-up { color: var(--ok); }
.stat-card.power-down .stat-value, .core-stat-value.power-down { color: var(--danger); }
.stat-value-ratio { font-weight: 800; }
.stat-card-ratio--grade-1 .stat-value-ratio { color: #fca5a5; }
.stat-card-ratio--grade-2 .stat-value-ratio { color: #fdba74; }
.stat-card-ratio--grade-3 .stat-value-ratio { color: #7dd3fc; }
.stat-card-ratio--grade-4 .stat-value-ratio,
.stat-card-ratio--grade-5 .stat-value-ratio { color: #fde68a; }
.tr-grade-badge {
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem;
    margin-top: 0.25rem; padding: 0.28rem 0.5rem; border-radius: 8px; border: 1px solid transparent; line-height: 1.15;
}
.tr-grade-badge--table { flex-direction: row; margin-top: 0; padding: 0.12rem 0.38rem; }
.tr-grade-num { font-weight: 800; }
.tr-grade-title { font-size: 0.68rem; }
.tr-grade-1 { color: #fecaca; background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.4); }
.tr-grade-2 { color: #fed7aa; background: rgba(249, 115, 22, 0.18); border-color: rgba(249, 115, 22, 0.4); }
.tr-grade-3 { color: #bae6fd; background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.4); }
.tr-grade-4 { color: #fde68a; background: rgba(249, 115, 22, 0.16); border-color: rgba(249, 115, 22, 0.4); }
.tr-grade-5 { color: #fde68a; background: rgba(251, 191, 36, 0.18); border-color: rgba(251, 191, 36, 0.5); }
.player-history { margin-top: 0.2rem; }

.kd-overview-hero {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.25rem 1.35rem; margin-bottom: 0.35rem; border-radius: var(--radius); border: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(255, 90, 31, 0.12) 0%, transparent 42%), linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 100%);
}
.kd-overview-hero__eyebrow { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.kd-overview-hero__title { margin: 0 0 0.35rem; font-size: 1.7rem; line-height: 1.15; }
.kd-overview-hero__meta { margin: 0; color: var(--muted); font-size: 0.9rem; max-width: 70rem; }
.kd-overview-hero__actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.kd-overview-hero__actions .btn { border-radius: 999px; }
.kd-overview-kpis, .kd-period-band__kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.7rem; }
.kd-overview-kpis { margin: 0.2rem 0 1rem; }
.kd-kpi-card, .kd-period-band__stat {
    display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
    padding: 0.8rem 0.85rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
}
.kd-kpi-card--power { border-color: rgba(255, 90, 31, 0.45); }
.kd-kpi-card--kp { border-color: rgba(248, 113, 113, 0.45); }
.kd-kpi-card--deads { border-color: rgba(192, 132, 252, 0.45); }
.kd-kpi-card--t5 { border-color: rgba(251, 191, 36, 0.5); }
.kd-kpi-card__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.kd-kpi-card__value { font-size: 1.28rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kd-kpi-delta { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kd-kpi-delta--up { color: #4ade80; }
.kd-kpi-delta--down { color: #f87171; }
.kd-kpi-delta--flat { color: var(--muted); font-weight: 600; }
.kd-period-band {
    margin: 0 0 1rem; padding: 0.95rem 1rem; border-radius: var(--radius);
    border: 1px solid rgba(255, 90, 31, 0.35); background: rgba(255, 90, 31, 0.05);
}
.kd-period-band__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 0.75rem; }
.kd-period-band__head h2 { margin: 0; font-size: 0.98rem; }
.kd-period-band__stat { background: rgba(0, 0, 0, 0.22); padding: 0.5rem 0.55rem; }
.kd-period-band__stat .kd-kpi-card__value { font-size: 1.02rem; }
.kd-period-band__stat .kd-kpi-card__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
    .kd-overview-kpis, .kd-period-band__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .kd-overview-kpis, .kd-period-band__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .player-header, .player-core-stats, .player-achievements, .player-trade-row { grid-template-columns: 1fr; }
    .player-stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .player-avatar-circle { width: 96px; height: 96px; }
}
.stats-showcase { width: 4.5rem; text-align: center; }
.stats-showcase-link { color: inherit; text-decoration: none; }
.stats-showcase-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    color: var(--accent); font-weight: 700;
}
.stats-showcase-icon { display: block; }
.stats-th-showcase a { pointer-events: none; color: inherit; }

.dash { display: grid; gap: 1rem; }
.dash-hero {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1.2rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--border);
    background:
        radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 42%),
        linear-gradient(160deg, var(--surface), var(--chrome));
}
.dash-hero__who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.dash-avatar {
    width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden;
    background: #241812; border: 3px solid rgba(255, 90, 31, 0.55); font-weight: 750; font-size: 1.35rem;
}
.dash-hero h1 { margin: 0 0 0.25rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.dash-hero__eyebrow { margin: 0 0 0.2rem; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem; }
.dash-hero .lead { margin: 0; color: var(--muted); }
.dash-hero__scan { text-align: right; }
.dash-hero__scan-label { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.dash-hero__scan-date { font-weight: 750; margin: 0.15rem 0 0.55rem; }
.dash-hero__scan-date--empty { color: var(--muted); font-weight: 500; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.dash-kpi { margin: 0; padding: 0.9rem 1rem; }
.dash-kpi__value { font-size: 1.45rem; font-weight: 750; }
.dash-kpi__label { color: var(--muted); font-size: 0.82rem; }
.dash-kpi--power { border-color: rgba(255, 90, 31, 0.45); }
.dash-kpi--kp { border-color: rgba(248, 113, 113, 0.45); }
.dash-kpi--deads { border-color: rgba(192, 132, 252, 0.45); }
.dash-kpi--governors { border-color: rgba(96, 165, 250, 0.45); }
.dash-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.dash-board { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); align-items: start; }
.dash-panel { margin: 0; min-width: 0; }
.dash-panel .table-wrap { overflow: visible; margin: 0; }
.dash-panel .stats-table { min-width: 0; width: 100%; }
.dash-panel .stats-table td, .dash-panel .stats-table th { white-space: normal; }
.dash-panel .stats-table td:first-child,
.dash-panel .stats-table td:nth-child(n+3),
.dash-panel .stats-table th:first-child,
.dash-panel .stats-table th:nth-child(n+3) { white-space: nowrap; }
.dash-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.dash-panel__head h2 { margin: 0; font-size: 1.05rem; }
.dash-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.dash-event { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.55rem 0.65rem; border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.dash-event strong, .dash-event .hint { display: block; }
.dash-month .calendar { margin-top: 0; width: 100%; }
.dash-month .cal-day { min-height: 96px; min-width: 0; }
.dash-month .event-pill { font-size: 0.68rem; line-height: 1.2; }
@media (max-width: 1100px) {
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-board, .dash-split { grid-template-columns: 1fr; }
    .dash-hero__scan { text-align: left; }
}