:root {
    --ink: #eaf1ff;
    --muted: #93a3bc;
    --deep: #070d17;
    --panel: #0d1726;
    --panel-soft: #111e30;
    --line: rgba(171, 193, 225, 0.16);
    --gold: #f4bc55;
    --gold-bright: #ffd98b;
    --teal: #5dd8c7;
    --danger: #ff8d96;
    --font: Pretendard, "Noto Sans KR", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background:
        radial-gradient(circle at 83% 13%, rgba(38, 122, 130, 0.16), transparent 30rem),
        radial-gradient(circle at 12% 37%, rgba(244, 188, 85, 0.07), transparent 26rem),
        var(--deep);
    font-family: var(--font);
    line-height: 1.6;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.25;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 74%);
}

a { color: inherit; }

.site-header, main, footer {
    width: min(1500px, calc(100% - 64px));
    margin-inline: auto;
}

.site-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: .12em;
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #071019;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    border-radius: 9px 3px 9px 3px;
    font-size: 18px;
    letter-spacing: 0;
    box-shadow: 0 8px 28px rgba(244, 188, 85, .18);
    overflow: hidden;
}

.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-copy { display: grid; gap: 2px; min-width: 0; line-height: 1; }
.brand-copy strong { color: inherit; font-size: inherit; font-weight: 900; letter-spacing: inherit; }
.brand-copy small { color: #9f927b; font-size: 8px; font-weight: 800; letter-spacing: .085em; white-space: nowrap; }

.brand-badge, .secure-label, .waiting-chip {
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .08em;
}

.service-state { color: var(--muted); font-size: 12px; }
.service-state i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 14px rgba(93,216,199,.65); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.global-season-chip { display: inline-flex; align-items: center; justify-content: center; padding: 6px 13px; color: #e7c66f; border: 1px solid rgba(216,180,93,.34); background: linear-gradient(110deg, rgba(216,180,93,.13), rgba(216,180,93,.035)); font-size: 11px; font-weight: 850; letter-spacing: .04em; white-space: nowrap; }
.header-actions form { margin: 0; }
.account-link, .logout-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: #c9d5e7; background: rgba(14,27,44,.72); border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 12px; font-weight: 750; text-decoration: none; cursor: pointer; }
.account-link:hover, .logout-button:hover { color: var(--ink); border-color: rgba(93,216,199,.35); }
.account-link.is-connected { color: var(--teal); border-color: rgba(93,216,199,.24); }
.account-link b { min-width: 20px; padding: 1px 6px; color: #08111c; background: var(--teal); border-radius: 99px; text-align: center; }
.auth-notice { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 13px 16px; color: var(--muted); border: 1px solid rgba(255,141,150,.28); border-radius: 10px; background: rgba(255,141,150,.06); font-size: 13px; }
.auth-notice strong { color: var(--danger); }

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
    min-height: auto;
    padding: 64px 0 88px;
}

.intro-copy {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 520px;
    padding: 68px 51% 68px 48px;
    overflow: hidden;
    border: 1px solid rgba(218,185,116,.28);
    background: #090806;
    box-shadow: 0 28px 70px rgba(0,0,0,.42);
}

.intro-copy::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    content: "";
    background: url('/assets/img/logmate-hero-v2.webp') center / cover no-repeat;
}

.intro-copy::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(7,7,6,.99) 0%, rgba(7,7,6,.96) 33%, rgba(7,7,6,.65) 53%, rgba(7,7,6,.08) 78%, rgba(7,7,6,.16) 100%);
}

.intro-copy > * { position: relative; }
.intro-copy .lead { max-width: 670px; word-break: keep-all; overflow-wrap: break-word; }
.intro-copy .benefits { max-width: 700px; }

.eyebrow, .step-label { margin: 0 0 14px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; }

h1, h2, p { margin-top: 0; }

h1 {
    margin-bottom: 18px;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 1.08;
    letter-spacing: -.055em;
}

h1 em { color: var(--gold-bright); font-style: normal; }

.lead { max-width: 860px; color: #aab8cc; font-size: 19px; }

.benefits { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 26px 0 0; padding: 0; list-style: none; color: #c5cfdd; font-size: 15px; }
.benefits li { display: flex; align-items: center; gap: 12px; }
.benefits span { color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.account-hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.account-hero-cta > a { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 19px; color: #171109; border: 1px solid #efd58d; background: #d2aa52; box-shadow: 0 7px 20px rgba(0,0,0,.32); font-size: 14px; font-weight: 900; text-decoration: none; }
.account-hero-cta > a:hover { background: #e1bb62; }
.account-hero-cta > span { color: #8f8678; font-size: 11px; font-weight: 700; }

.analyzer-card {
    position: relative;
    width: 100%;
    padding: clamp(30px, 4vw, 52px);
    overflow: hidden;
    background: linear-gradient(145deg, rgba(17, 30, 48, .96), rgba(10, 19, 32, .97));
    border: 1px solid rgba(193, 211, 235, .18);
    border-radius: 20px;
    box-shadow: 0 28px 90px rgba(0,0,0,.36);
}

.analyzer-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--teal), transparent); opacity: .8; }

.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.card-heading h2 { margin: 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3; letter-spacing: -.035em; }
.step-label { margin-bottom: 7px; }
.secure-label { color: var(--teal); border-color: rgba(93,216,199,.25); white-space: nowrap; }

label { display: block; margin-bottom: 9px; color: #c7d3e3; font-size: 15px; font-weight: 700; }

.url-field { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 6px; background: #07101c; border: 1px solid rgba(175, 198, 230, .2); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.url-field:focus-within { border-color: rgba(244,188,85,.72); box-shadow: 0 0 0 4px rgba(244,188,85,.08); }
.url-field.has-error { border-color: rgba(255,141,150,.6); }
.link-icon { padding-left: 10px; color: #6c7b91; }
.url-field input { min-width: 0; height: 56px; padding: 0 14px; color: var(--ink); background: transparent; border: 0; outline: 0; font: inherit; font-size: 16px; }
.url-field input::placeholder { color: #59677b; }
.url-field button { height: 52px; padding: 0 24px; color: #111820; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 850; box-shadow: 0 8px 24px rgba(244,188,85,.16); }
.url-field button:hover { filter: brightness(1.06); }
.url-field button:focus-visible { outline: 3px solid rgba(93,216,199,.55); outline-offset: 2px; }
.field-help, .privacy-note { margin: 8px 0 0; color: #8292aa; font-size: 13px; }

.empty-preview, .notice { margin-top: 26px; padding: 20px; background: rgba(5, 12, 22, .45); border: 1px solid var(--line); border-radius: 12px; }
.empty-preview p { margin: 16px 0 0; color: #74849a; font-size: 11px; }
.preview-line { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.preview-line span { width: 58%; height: 9px; border-radius: 20px; background: #1b2a3d; }
.preview-line i { width: 18%; height: 9px; border-radius: 20px; background: rgba(93,216,199,.13); }
.preview-line.short span { width: 38%; }
.notice { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.notice strong { font-size: 16px; }
.notice p { margin: 4px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.notice-error { border-color: rgba(255,141,150,.35); background: rgba(255,141,150,.06); }
.notice-error strong { color: var(--danger); }
.notice-success { border-color: rgba(93,216,199,.32); background: rgba(93,216,199,.06); }
.notice-success strong { color: var(--teal); }
.waiting-chip { color: var(--gold); border-color: rgba(244,188,85,.28); white-space: nowrap; }
.waiting-chip.is-ready { color: var(--teal); border-color: rgba(93,216,199,.34); }
.privacy-note { text-align: center; margin-top: 18px; }

.api-error, .no-ranking { margin-top: 16px; padding: 16px; border: 1px solid rgba(255,141,150,.3); border-radius: 10px; background: rgba(255,141,150,.06); }
.api-error strong { color: var(--danger); font-size: 12px; }
.api-error p, .no-ranking p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }

.live-result { margin-top: 22px; padding: clamp(24px, 3vw, 40px); border: 1px solid rgba(93,216,199,.22); border-radius: 16px; background: rgba(5,12,22,.48); }
.result-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.result-heading h3 { margin: 0; font-size: 26px; letter-spacing: -.025em; }
.result-heading p:not(.step-label) { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.encounter-name { max-width: 180px; text-align: right; }
.encounter-name span, .encounter-name strong { display: block; }
.encounter-name span { color: var(--muted); font-size: 13px; }
.encounter-name strong { margin-top: 2px; color: var(--gold-bright); font-size: 16px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.metric-grid > div { min-width: 0; padding: 20px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(15,28,45,.72); }
.metric-grid span { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; }
.metric-grid strong { display: block; margin-top: 6px; color: var(--ink); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; overflow-wrap: anywhere; }
.metric-grid small { margin-left: 2px; color: var(--muted); font-size: 14px; }
.coach-summary { margin-top: 14px; padding: 15px; border-left: 2px solid var(--gold); background: rgba(244,188,85,.045); }
.coach-summary > strong { font-size: 16px; }
.coach-summary ul { display: grid; gap: 8px; margin: 10px 0 14px; padding-left: 20px; color: #b9c6d9; font-size: 14px; }
.coach-summary a { display: inline-flex; gap: 6px; align-items: center; color: var(--teal); font-size: 14px; font-weight: 750; text-decoration: none; }
.coach-summary a:hover { text-decoration: underline; }
.no-ranking { border-color: var(--line); }
.no-ranking strong { font-size: 12px; }

.combat-error { margin-top: 14px; padding: 14px; border: 1px solid rgba(255,141,150,.3); border-radius: 10px; background: rgba(255,141,150,.05); }
.combat-error strong { color: var(--danger); font-size: 11px; }
.combat-error p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.combat-detail { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(93,216,199,.2); }
.combat-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.combat-title-row h4 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.combat-title-row > span { margin-top: 3px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.combat-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.combat-metrics > div { padding: 18px 16px; border: 1px solid var(--line); border-radius: 11px; background: rgba(14,26,42,.72); }
.combat-metrics span { display: block; color: var(--muted); font-size: 13px; }
.combat-metrics strong { display: block; margin-top: 5px; font-size: 23px; line-height: 1.25; }
.combat-metrics small { color: var(--muted); font-size: 13px; }
.combat-metrics strong small { margin-left: 1px; }
.combat-block { margin-top: 28px; }
.block-heading { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 9px; }
.block-heading strong { font-size: 17px; }
.block-heading span { color: var(--muted); font-size: 13px; }
.spell-list, .cooldown-list { display: grid; gap: 9px; }
.spell-row { display: grid; grid-template-columns: minmax(230px, 1.2fr) minmax(180px, 1fr) auto; align-items: center; gap: 18px; padding: 14px 16px; border: 1px solid rgba(171,193,225,.1); border-radius: 10px; background: rgba(7,16,28,.54); }
.spell-row > div:first-child { min-width: 0; }
.spell-row strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.spell-row > div:first-child span, .spell-row > span { color: var(--muted); font-size: 13px; }
.spell-row > span { white-space: nowrap; }
.spell-bar { height: 8px; overflow: hidden; background: rgba(171,193,225,.1); border-radius: 9px; }
.spell-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius: inherit; }
.cooldown-row { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; padding: 13px 15px; border-bottom: 1px solid rgba(171,193,225,.09); }
.cooldown-row > strong { font-size: 15px; }
.cooldown-row > strong small { color: var(--muted); font-size: 13px; font-weight: 500; }
.cooldown-row > div { display: flex; flex-wrap: wrap; gap: 4px; }
.cooldown-row > div span { padding: 4px 9px; color: var(--gold-bright); background: rgba(244,188,85,.08); border: 1px solid rgba(244,188,85,.16); border-radius: 99px; font-size: 13px; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.review-grid > div { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: rgba(13,24,39,.7); }
.review-grid span { display: block; margin-bottom: 7px; color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.review-grid strong { display: block; font-size: 15px; line-height: 1.45; }
.review-grid p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.review-check span { color: var(--gold); }
.review-next span { color: var(--gold-bright); }

.benchmark-panel { margin-top: 34px; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(244,188,85,.28); border-radius: 14px; background: linear-gradient(145deg, rgba(244,188,85,.07), rgba(9,19,32,.82)); }
.benchmark-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.benchmark-heading h5 { margin: 0; font-size: 25px; line-height: 1.3; letter-spacing: -.03em; }
.benchmark-heading p:not(.step-label) { max-width: 820px; margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.benchmark-heading a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 9px 13px; color: var(--teal); border: 1px solid rgba(93,216,199,.25); border-radius: 9px; font-size: 13px; font-weight: 750; text-decoration: none; }
.benchmark-heading a:hover { border-color: rgba(93,216,199,.55); background: rgba(93,216,199,.06); }
.benchmark-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.benchmark-metrics > div { min-width: 0; padding: 17px 16px; border: 1px solid var(--line); border-radius: 11px; background: rgba(7,16,28,.62); }
.benchmark-metrics span { display: block; color: var(--muted); font-size: 12px; }
.benchmark-metrics strong { display: block; margin-top: 5px; font-size: 23px; line-height: 1.25; }
.benchmark-metrics small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.benchmark-metrics strong small { display: inline; margin: 0 0 0 2px; font-size: 13px; }
.priority-list { margin-top: 28px; }
.priority-list ol { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.priority-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 17px; border: 1px solid rgba(171,193,225,.13); border-radius: 11px; background: rgba(7,16,28,.68); }
.priority-list li > span { width: 36px; height: 36px; display: grid; place-items: center; color: #101822; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-radius: 10px 3px 10px 3px; font-size: 12px; font-weight: 850; }
.priority-list li strong { display: block; font-size: 16px; }
.priority-list li p { margin: 5px 0 0; color: #b8c5d8; font-size: 14px; }
.priority-list li em { display: block; margin-top: 7px; color: var(--teal); font-size: 13px; font-style: normal; font-weight: 700; }
.benchmark-empty { margin: 0; padding: 18px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.benchmark-note { margin: 16px 0 0; color: #75869e; font-size: 12px; }
.benchmark-error { margin-top: 24px; padding: 16px; border: 1px solid rgba(244,188,85,.24); border-radius: 10px; background: rgba(244,188,85,.05); }
.benchmark-error strong { color: var(--gold); font-size: 14px; }
.benchmark-error p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.account-main { padding: 64px 0 100px; }
.account-intro { max-width: 880px; }
.account-intro h1, .profile-hero h1 { margin-bottom: 14px; font-size: clamp(42px, 5vw, 68px); }
.account-intro > p:not(.eyebrow), .profile-hero > div > p:not(.eyebrow) { color: var(--muted); font-size: 17px; }
.account-empty { margin-top: 34px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13,24,39,.72); }
.account-empty strong { font-size: 18px; }
.account-empty p { margin: 5px 0 0; color: var(--muted); }
.character-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 38px; }
.character-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(17,30,48,.9), rgba(9,18,31,.9)); text-decoration: none; transition: transform .18s, border-color .18s; }
.character-card:hover { transform: translateY(-2px); border-color: var(--class-color); }
.character-list-avatar { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; color: var(--class-color); border: 2px solid var(--class-color); border-radius: 10px; background: #060d17; }
.character-list-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.character-list-avatar b { font-size: 21px; }
.character-card-copy { min-width: 0; }
.character-card-copy > strong { display: block; overflow: hidden; color: var(--class-color); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.character-card p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.character-card-copy small { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; color: #8796aa; font-size: 10px; }
.character-level-badges > span { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; min-height: 25px; padding: 4px 7px; border: 1px solid transparent; border-radius: 6px; font-size: 10px; font-weight: 750; line-height: 1; }
.character-level-badges b { font-size: 13px; line-height: 1; }
.character-level-badge { color: #8ce7da; border-color: rgba(93,216,199,.3) !important; background: rgba(93,216,199,.08); }
.character-level-badge b { color: #74e3d1; }
.character-item-level-badge { color: #e3c281; border-color: rgba(244,188,85,.32) !important; background: rgba(244,188,85,.09); }
.character-item-level-badge b { color: #ffd477; }
.character-arrow { color: var(--teal); font-size: 20px; }
.character-sheet { max-width: 1380px; }
.profile-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.profile-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profile-avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 72px; height: 72px; overflow: hidden; color: var(--gold-bright); border: 2px solid var(--class-color); border-radius: 10px; background: #050b14; box-shadow: 0 10px 25px rgba(0,0,0,.32); }
.profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar .class-icon-badge { position: absolute; right: 3px; bottom: 3px; width: 25px; height: 25px; border: 2px solid #07101c; border-radius: 5px; box-shadow: 0 2px 7px rgba(0,0,0,.55); }
.profile-avatar span { font-size: 28px; font-weight: 850; }
.profile-copy { min-width: 0; }
.profile-copy .eyebrow { margin-bottom: 5px; }
.profile-copy h1 { margin: 0 0 5px; color: var(--class-color); font-size: clamp(30px, 4vw, 46px); line-height: 1; }
.profile-copy > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 16px; }
.class-colored { color: var(--class-color); font-weight: 800; }
.character-level-text { color: var(--gold-bright); font-size: 18px; font-weight: 850; }
.profile-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.specialization-switcher { display: flex; align-items: stretch; gap: 5px; padding: 5px; border: 1px solid rgba(218,185,116,.2); background: #0b0906; }
.specialization-option { display: grid; grid-template-columns: 30px auto; align-items: center; gap: 7px; min-height: 42px; padding: 5px 9px 5px 5px; color: #aaa092; border: 1px solid transparent; background: #12100d; text-decoration: none; transition: border-color .15s, color .15s, background-color .15s; }
.specialization-option:hover { color: #f0dfb9; border-color: rgba(218,185,116,.38); }
.specialization-option.is-active { color: #fff1cb; border-color: var(--class-color); background: color-mix(in srgb, var(--class-color) 11%, #12100d); box-shadow: inset 0 -2px 0 var(--class-color); }
.specialization-icon { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; color: #f2dcaa; border: 1px solid rgba(218,185,116,.28); background: #050504; }
.specialization-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.specialization-icon b { font-size: 12px; }
.specialization-option > strong { font-size: 11px; white-space: nowrap; }
.profile-refresh-form { flex: 0 0 auto; margin: 0; }
.analyze-account-character { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 14px 19px; color: #0a1420; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-radius: 10px; font: inherit; font-size: 14px; font-weight: 850; text-decoration: none; cursor: pointer; }
.character-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 326px; align-items: start; gap: 18px; margin-top: 24px; }
.equipment-section { min-width: 0; padding: 18px; border: 1px solid rgba(244,188,85,.28); border-radius: 12px; background: radial-gradient(circle at 50% 38%, rgba(45,67,91,.34), transparent 40%), linear-gradient(160deg, rgba(16,30,48,.96), rgba(5,12,22,.98)); box-shadow: 0 22px 55px rgba(0,0,0,.34), inset 0 0 35px rgba(93,216,199,.04); }
.equipment-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 14px; padding: 0 2px 13px; border-bottom: 1px solid var(--line); }
.equipment-heading h2 { margin: 0; font-size: 21px; }
.armory-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.armory-summary > span { padding: 9px 12px; color: #aab7ca; border: 1px solid var(--line); border-radius: 8px; background: rgba(7,15,26,.76); font-size: 12px; font-weight: 700; }
.armory-summary strong { margin-left: 5px; font-size: 17px; font-weight: 900; }
.armory-summary .summary-equipped { border-color: rgba(244,188,85,.32); background: rgba(244,188,85,.08); }
.armory-summary .summary-equipped strong { color: #ffd477; }
.armory-summary .summary-average { border-color: rgba(93,216,199,.28); background: rgba(93,216,199,.07); }
.armory-summary .summary-average strong { color: #74e3d1; }
.armory-summary .summary-spec { border-color: rgba(190,124,244,.28); background: rgba(190,124,244,.07); }
.armory-summary .summary-spec strong { color: var(--class-color); }
.paperdoll-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .9fr) minmax(0, 1fr); align-items: stretch; gap: 10px; }
.equipment-stack { display: grid; grid-template-rows: repeat(8, minmax(64px, auto)); gap: 6px; min-width: 0; }
.equipment-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; min-height: 64px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(100deg, rgba(14,27,44,.94), rgba(9,18,31,.9)); }
.equipment-card::before { content: ""; position: absolute; inset: 7px auto 7px 0; width: 3px; background: #8994a3; border-radius: 0 3px 3px 0; }
.equipment-icon { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; color: var(--muted); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: #050a11; }
.equipment-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.equipment-icon span { font-size: 18px; font-weight: 800; opacity: .65; }
.equipment-copy { min-width: 0; }
.equipment-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1px 8px; color: #8c9bb0; font-size: 10px; }
.equipment-meta > span:first-child { grid-column: 1; grid-row: 1; text-align: left; }
.equipment-meta > b { grid-column: 2; grid-row: 1; color: var(--gold); font-weight: 750; white-space: nowrap; }
.equipment-card strong { display: block; margin-top: 1px; overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.equipment-current-set-badge { display: inline-flex; align-items: center; margin-top: 2px; padding: 1px 4px; color: #93df9b; border: 1px solid rgba(80,173,92,.4); border-radius: 3px; background: rgba(39,98,46,.32); font-size: 9px; font-weight: 800; line-height: 1.15; }
.equipment-modifiers { display: flex; align-items: center; gap: 3px 6px; min-width: 0; margin-top: 3px; overflow: hidden; white-space: nowrap; }
.equipment-replacement-note { grid-column: 2; grid-row: 2; display: inline-flex; justify-self: end; align-items: center; gap: 3px; max-width: 88px; margin-top: 1px; padding: 1px 4px; color: #f1d3cf; border: 1px solid rgba(168,79,73,.72); border-radius: 3px; background: rgba(97,40,37,.82); box-shadow: none; line-height: 1.15; text-align: left; }
.equipment-replacement-note i { color: #e3a19a; font-size: 9px; font-style: normal; font-weight: 900; }
.equipment-replacement-note em { overflow: hidden; color: #f4ddd9; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.equipment-tier-note { grid-column: 1; grid-row: 2; display: inline-flex; justify-self: start; align-items: center; margin-top: 1px; padding: 1px 4px; color: #f4dda0; border: 1px solid rgba(196,151,57,.62); border-radius: 3px; background: rgba(93,67,20,.68); font-size: 9px; font-weight: 850; line-height: 1.15; white-space: nowrap; }
.equipment-tier-note.needs-catalyst { color: #f4c6ae; border-color: rgba(205,108,73,.66); background: rgba(102,43,29,.7); }
.equipment-tier-note.is-free { color: #a9b1bc; border-color: rgba(132,142,156,.38); background: rgba(50,57,66,.5); }
.modifier { display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: #8edbca; font-size: 10px; line-height: 1.15; }
.modifier i { flex: 0 0 auto; color: #67d7c9; font-size: 8px; font-style: normal; }
.modifier img { flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 2px; }
.modifier.gem { color: #d8c580; }
.modifier.empty-socket { color: #78869a; }
.equipment-stack.is-right .equipment-card { grid-template-columns: minmax(0, 1fr) 48px; padding: 7px 12px 7px 8px; }
.equipment-stack.is-right .equipment-card::before { inset: 7px 0 7px auto; border-radius: 3px 0 0 3px; }
.equipment-stack.is-right .equipment-icon { grid-column: 2; grid-row: 1; }
.equipment-stack.is-right .equipment-copy { grid-column: 1; grid-row: 1; text-align: right; }
.equipment-stack.is-right .equipment-modifiers { justify-content: flex-end; }
.equipment-stack.is-right .equipment-replacement-note { grid-column: 1; justify-self: start; }
.equipment-stack.is-right .equipment-tier-note { grid-column: 2; justify-self: end; }
.equipment-card.is-empty { opacity: .42; }
.equipment-card.is-empty.has-recommendation { opacity: 1; cursor: help; border-color: rgba(99,180,242,.42); }
.equipment-card:not(.is-empty) { cursor: help; }
.equipment-card:not(.is-empty):focus { z-index: 30; outline: 1px solid rgba(244,188,85,.72); outline-offset: 2px; }
.item-tooltip { position: fixed; z-index: 1000; top: 0; left: 0; width: 380px; padding: 18px 20px; visibility: hidden; color: #f4f7fb; border: 1px solid #59687d; border-radius: 4px; background: linear-gradient(160deg, rgba(12,16,24,.99), rgba(3,6,11,.99)); box-shadow: 0 18px 46px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.025); opacity: 0; pointer-events: none; transition: opacity .1s ease, visibility .1s; text-align: left; }
.equipment-compare-tooltip { width: min(790px, calc(100vw - 24px)); }
.tooltip-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.tooltip-current-column { min-width: 0; height: 100%; padding-right: 18px; }
.tooltip-current-item-heading { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 11px; }
.tooltip-current-item-icon { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; color: #e2bd68; border: 1px solid rgba(163,53,238,.72); background: #080b10; }
.tooltip-current-item-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tooltip-current-item-icon i { font-style: normal; }
.tooltip-replacement-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; height: 100%; padding-left: 18px; border-left: 1px solid rgba(108,183,244,.38); }
.equipment-stack.is-right .item-tooltip, .weapon-row .item-tooltip { top: 0; right: auto; bottom: auto; left: 0; }
.equipment-card:hover .item-tooltip, .equipment-card:focus .item-tooltip, .equipment-card:focus-within .item-tooltip,
.gear-ranked-item:hover .item-tooltip { visibility: visible; opacity: 1; }
.tooltip-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tooltip-title-row > strong { margin: 0; overflow: visible; color: #f1f1f1; font-size: 18px; line-height: 1.4; white-space: normal; }
.item-tooltip.quality-uncommon .tooltip-title-row > strong { color: #1eff00; }
.item-tooltip.quality-rare .tooltip-title-row > strong { color: #0070dd; }
.item-tooltip.quality-epic .tooltip-title-row > strong { color: #a335ee; }
.item-tooltip.quality-legendary .tooltip-title-row > strong { color: #ff8000; }
.item-tooltip.quality-artifact .tooltip-title-row > strong { color: #e6cc80; }
.crafted-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 4px 7px; color: #66dfcd; border: 1px solid rgba(102,223,205,.34); border-radius: 4px; background: rgba(102,223,205,.08); font-size: 11px; font-weight: 850; }
.tooltip-item-level { display: block; margin-top: 6px; color: #ffd477; font-size: 15px; }
.tooltip-slot-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; color: #dfe5ed; font-size: 13px; }
.tooltip-slot-row.is-binding-only { justify-content: flex-end; }
.tooltip-item-type, .tooltip-base-stat, .tooltip-description { margin: 5px 0 0; color: #c9d2df; font-size: 13px; line-height: 1.55; }
.tooltip-stats, .tooltip-effects, .tooltip-gems, .tooltip-set { display: grid; gap: 3px; margin-top: 9px; }
.tooltip-replacement { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.tooltip-replacement.is-alternative { padding-top: 13px; border-top: 1px solid rgba(108,183,244,.25); }
.tooltip-replacement-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #fff0a8; font-size: 12px; font-weight: 900; }
.tooltip-replacement-label > span { display: inline-flex; padding: 5px 8px; color: #fff3b8; border: 1px solid rgba(255,211,105,.58); border-radius: 4px; background: linear-gradient(90deg, rgba(153,94,13,.45), rgba(75,45,8,.32)); box-shadow: 0 0 16px rgba(255,191,65,.12); text-shadow: 0 1px 7px rgba(255,198,76,.32); }
.tooltip-replacement-label .tooltip-replacement-badges { gap: 5px; padding: 0; border: 0; background: none; box-shadow: none; text-shadow: none; }
.catalyst-required-badge { display: inline-flex; align-items: center; padding: 4px 7px; color: #ffd7c4; border: 1px solid rgba(221,113,78,.7); border-radius: 4px; background: rgba(117,43,28,.78); font-size: 10px; font-weight: 900; white-space: nowrap; }
.tooltip-replacement-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; }
.tooltip-replacement-icon { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; color: #e2bd68; border: 1px solid rgba(108,183,244,.48); background: #080b10; }
.tooltip-replacement-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tooltip-replacement-icon i { font-style: normal; }
.tooltip-replacement-item strong { display: block; overflow: visible; color: #d8a4ff; font-size: 16px; line-height: 1.35; white-space: normal; }
.tooltip-replacement-item small { display: block; margin-top: 3px; color: #aeb8c5; font-size: 11px; }
.tooltip-replacement-stats, .tooltip-replacement-effects { display: grid; gap: 3px; }
.tooltip-replacement-stats span { color: #f0f3f7; font-size: 12px; }
.tooltip-scaled-stats > b { margin-bottom: 3px; color: #ffd477; font-size: 11px; }
.tooltip-scaled-stats.is-loading > span { color: #8fa0b5; }
.tooltip-scaled-stats.is-error > span { color: #e6a38c; }
.tooltip-replacement-effects span { color: #58d68d; font-size: 12px; line-height: 1.45; }
.tooltip-replacement-set { display: grid; gap: 5px; padding-top: 8px; border-top: 1px solid rgba(88,214,141,.18); }
.tooltip-replacement-set .tooltip-set-name { color: #e2bd68; font-size: 13px; }
.tooltip-replacement-set .tooltip-set-bonuses span { color: #58d68d; font-size: 11px; line-height: 1.5; }
.tooltip-catalyst-note { color: #8fc9ff; font-size: 11px; font-weight: 750; line-height: 1.5; }
.tooltip-replacement-reason, .tooltip-replacement-source { margin: 0; font-size: 11px; line-height: 1.45; }
.tooltip-replacement-reason { color: #e4c66f; }
.tooltip-replacement-source { color: #86d0bd; }
.tooltip-replacement-acquisition { margin: 0; padding: 7px 8px; color: #b8c5d6; border-left: 2px solid #8293a8; background: rgba(90,105,126,.08); font-size: 10px; line-height: 1.5; }
.tooltip-replacement-acquisition b { color: #e5d6af; }
.tooltip-replacement-acquisition.tone-farmable { border-left-color: #55c990; }
.tooltip-replacement-acquisition.tone-farmable b { color: #72e1aa; }
.tooltip-replacement-acquisition.tone-craftable { border-left-color: #69cdef; }
.tooltip-replacement-acquisition.tone-craftable b { color: #8ee5ff; }
.tooltip-replacement-acquisition.tone-weekly { border-left-color: #e1b453; }
.tooltip-replacement-acquisition.tone-limited { border-left-color: #e06b62; }
.tooltip-replacement-acquisition.tone-limited b { color: #ff978e; }
.tooltip-enhancement-recommendation { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(226,189,104,.27); background: rgba(226,189,104,.06); }
.tooltip-enhancement-recommendation > strong { color: #ffe08a; font-size: 12px; }
.tooltip-enhancement-recommendation > span { color: #cbd5df; font-size: 11px; line-height: 1.45; }
.tooltip-enhancement-recommendation > span b { display: inline-block; margin-right: 6px; padding: 2px 5px; color: #171109; background: #e4bd64; font-size: 9px; }
.tooltip-empty-slot { margin: 8px 0 0; color: #8d9aad; font-size: 12px; }
.tooltip-stats span { color: #f4f7fb; font-size: 14px; line-height: 1.45; }
.tooltip-effects span { color: #1eff00; font-size: 13px; line-height: 1.5; }
.tooltip-gems span { display: flex; align-items: center; gap: 6px; color: #ffd76e; font-size: 13px; line-height: 1.5; }
.tooltip-gems img { width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 2px; }
.tooltip-set { gap: 8px; padding-top: 11px; border-top: 1px solid rgba(139,158,185,.2); }
.tooltip-set-name { color: #ffd200; font-size: 14px; line-height: 1.45; }
.tooltip-set-items, .tooltip-set-bonuses { display: grid; gap: 2px; }
.tooltip-set-items span, .tooltip-set-bonuses span { font-size: 13px; line-height: 1.5; }
.tooltip-set-items .is-equipped { color: #ffd200; }
.tooltip-set-items .is-equipped::before { content: "✓ "; color: #1eff00; }
.tooltip-set-items .is-missing { color: #777; }
.tooltip-set-items .is-missing::before { content: "○ "; color: #555; }
.tooltip-set-items .is-reference { color: #9ee6a5; }
.tooltip-set-items .is-reference::before { content: "◇ "; color: #58d68d; }
.tooltip-set-bonuses { margin-top: 3px; padding-top: 8px; border-top: 1px solid rgba(139,158,185,.14); }
.tooltip-set-bonuses .is-active { color: #1eff00; }
.tooltip-set-bonuses .is-inactive { color: #777; }
.tooltip-set-bonuses .is-reference { color: #9ee6a5; }
.tooltip-description { color: #d8b6ff; }
.tooltip-help { display: none; margin-top: 10px; color: #68778b; font-size: 8px; }
.character-stage { position: relative; display: grid; place-items: end center; min-height: 550px; overflow: hidden; border: 1px solid rgba(244,188,85,.18); border-radius: 8px; background: radial-gradient(ellipse at 50% 45%, rgba(70,105,134,.3), transparent 58%), linear-gradient(180deg, rgba(9,20,34,.38), rgba(2,8,15,.78)); }
.character-stage::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 26px; height: 28px; background: radial-gradient(ellipse, rgba(0,0,0,.68), transparent 68%); filter: blur(5px); }
.character-stage > img { position: absolute; z-index: 1; top: 0; left: 50%; display: block; width: auto; max-width: none; height: var(--render-height, 185%); transform: translate(-50%, var(--render-offset, -28%)); filter: drop-shadow(0 15px 24px rgba(0,0,0,.58)); }
.character-stage > span { position: absolute; z-index: 2; right: 8px; bottom: 7px; left: 8px; overflow: hidden; color: #aebbd0; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.character-silhouette { align-self: center; color: #34435a; font-size: 72px; font-weight: 900; }
.weapon-row { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: 8px; margin-top: 8px; }
.weapon-row .equipment-card { min-height: 66px; }
.statistics-panel { min-width: 0; padding: 18px; border: 1px solid rgba(93,216,199,.2); border-radius: 12px; background: linear-gradient(160deg, rgba(15,28,45,.96), rgba(6,13,23,.98)); box-shadow: 0 22px 55px rgba(0,0,0,.28); }
.character-side-panels { display: grid; gap: 18px; min-width: 0; }
.statistics-heading { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.statistics-heading h2 { margin: 0; font-size: 21px; }
.season-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.season-title-row > span { flex: 0 0 auto; padding: 4px 7px; color: var(--gold-bright); border: 1px solid rgba(244,188,85,.26); border-radius: 6px; background: rgba(244,188,85,.07); font-size: 9px; font-weight: 800; }
.statistics-list { display: grid; gap: 2px; margin-top: 10px; }
.stat-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 51px; padding: 7px 5px; border-bottom: 1px solid rgba(139,158,185,.1); }
.stat-glyph { display: grid; place-items: center; width: 31px; height: 31px; color: #c5d0df; border: 1px solid currentColor; border-radius: 8px; font-size: 11px; font-weight: 850; }
.stat-row div { min-width: 0; }
.stat-row strong { display: block; color: #e8eef8; font-size: 14px; line-height: 1.1; }
.stat-value-line { display: flex; align-items: baseline; gap: 4px; max-width: 100%; white-space: nowrap; }
.stat-value-line strong, .stat-value-line b { display: inline-block; font-size: 11px; line-height: 1.1; }
.stat-value-line b { color: #d4b66f; font-weight: 850; }
.stat-row div > span { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.stat-row div > em { display: block; margin-top: 3px; color: #d4b66f; font-size: 9px; font-style: normal; font-weight: 750; }
.stat-row.tone-health .stat-glyph { color: #38d36f; }
.stat-row.tone-power .stat-glyph { color: #4ca5ff; }
.stat-row.tone-strength .stat-glyph { color: #ef665d; }
.stat-row.tone-agility .stat-glyph { color: #e7c744; }
.stat-row.tone-intellect .stat-glyph { color: #d88bf2; }
.stat-row.tone-stamina .stat-glyph { color: #ef9f35; }
.stat-row.tone-armor .stat-glyph { color: #a9b3c2; }
.stat-row.tone-critical .stat-glyph { color: #f04f4f; }
.stat-row.tone-haste .stat-glyph { color: #45d5c3; }
.stat-row.tone-mastery .stat-glyph { color: #b56af4; }
.stat-row.tone-versatility .stat-glyph { color: #d4d7dc; }
.stat-row.tone-lifesteal .stat-glyph { color: #e774a8; }
.statistics-note { margin: 12px 0 0; color: #6f7d91; font-size: 9px; line-height: 1.5; }
.stat-mode-difference { display: inline-flex !important; align-items: baseline; gap: 2px; min-width: 0; margin: 0 !important; color: #d4b66f; font-size: 10px !important; font-style: normal; font-weight: 850 !important; white-space: nowrap; }
.stat-mode-difference strong { display: inline !important; color: inherit !important; font-size: 10px !important; }
.stat-mode-difference i { color: #988a73; font-size: 10px; font-style: normal; }
.stat-mode-difference span { display: inline !important; margin: 0 !important; overflow: visible !important; color: inherit !important; font-size: 10px !important; white-space: nowrap !important; }
.stat-mode-difference.is-positive { color: #62aef7 !important; }
.stat-mode-difference.is-negative { color: #ef7b6d !important; }
[data-stat-mode][hidden] { display: none !important; }
.mode-recommendation-panel { grid-column: 1 / -1; min-width: 0; padding: 20px; border: 1px solid rgba(201,164,87,.36); border-top: 2px solid #6ba5dc; background: #12100c; box-shadow: 0 18px 42px rgba(0,0,0,.34); }
.mode-recommendation-panel[data-stat-mode="raid"] { border-top-color: #d7645b; }
.mode-recommendation-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(218,185,116,.18); }
.mode-recommendation-heading h2 { margin: 2px 0 0; color: #f2eadb; font-size: 20px; }
.recommendation-disclaimer { display: block; max-width: 720px; margin-top: 6px; color: #9e927f; font-size: 11px; line-height: 1.55; }
.recommendation-strategy-note { display: block; max-width: 820px; margin-top: 5px; color: #d4b98a; font-size: 11px; font-weight: 720; line-height: 1.55; }
.catalyst-season-note { display: block; max-width: 900px; margin-top: 5px; color: #b7c2cf; font-size: 10px; line-height: 1.55; }
.catalyst-season-note b { margin-right: 4px; color: #dca69f; font-size: 10px; }
.mythic-farm-list { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(87, 172, 232, .28); }
.mythic-farm-list-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; margin-bottom: 10px; }
.mythic-farm-list-heading .step-label { flex-basis: 100%; margin: 0; color: #78b9e7; }
.mythic-farm-list-heading h3 { margin: 0; color: #f2ead9; font-size: 14px; }
.mythic-farm-list-heading > span { color: #a89d89; font-size: 11px; }
.mythic-farm-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.mythic-farm-row { display: grid; grid-template-columns: 164px minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(100, 147, 180, .22); background: rgba(11, 24, 33, .48); line-height: 1.45; }
.mythic-farm-dungeon { display: flex; align-items: center; min-width: 0; gap: 6px; white-space: nowrap; }
.mythic-farm-dungeon > strong { color: #e8bd69; font-size: 12px; font-weight: 780; letter-spacing: -.01em; }
.mythic-farm-separator { flex: 0 0 auto; color: #b79a68; font-weight: 700; }
.mythic-farm-items { min-width: 0; color: #e2d9c8; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 880px) { .mythic-farm-rows { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .mythic-farm-row { grid-template-columns: 1fr; row-gap: 4px; } .mythic-farm-items { padding-left: 0; } }
.mode-recommendation-heading > p { margin: 0; color: #c9baa0; font-size: 12px; line-height: 1.5; text-align: right; }
.mode-recommendation-heading > p strong { color: #ef7b6d; }
.mode-recommendation-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 10px; margin-top: 14px; }
.recommendation-category { min-width: 0; padding: 9px; border: 1px solid rgba(218,185,116,.14); background: #0d0b08; }
.recommendation-category h3 { margin: 0 0 8px; padding: 0 2px 7px; color: #ead9b2; border-bottom: 1px solid rgba(218,185,116,.14); font-size: 12px; }
.recommendation-category.tone-weapon { border-top: 2px solid #69b1ef; }
.recommendation-category.tone-armor { border-top: 2px solid #a56bd5; }
.recommendation-category.tone-ring { border-top: 2px solid #55c9a0; }
.recommendation-category.tone-trinket { border-top: 2px solid #e2bd68; }
.recommendation-category-list { display: grid; gap: 7px; }
.recommendation-category-empty { margin: 0; padding: 12px 8px; color: #736b60; font-size: 9px; text-align: center; }
.enhancement-recommendation-card, .gear-recommendation-card { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 76px; padding: 10px; border: 1px solid rgba(218,185,116,.14); background: #17140f; }
.enhancement-recommendation-card { border-left: 2px solid #6aaef0; }
.gear-recommendation-card { position: relative; cursor: help; }
.gear-recommendation-card:hover, .gear-recommendation-card:focus { border-color: rgba(218,185,116,.42); outline: none; background: linear-gradient(100deg, rgba(216,180,93,.08), transparent 58%), #17140f; }
.gear-recommendation-card:hover .item-tooltip, .gear-recommendation-card:focus .item-tooltip, .gear-recommendation-card:focus-within .item-tooltip { visibility: visible; opacity: 1; }
.recommendation-type-icon, .gear-recommendation-icon { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; color: #e2bd68; border: 1px solid rgba(218,185,116,.35); background: #090806; font-size: 18px; }
.gear-recommendation-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.enhancement-recommendation-card div, .gear-recommendation-card div { min-width: 0; }
.enhancement-recommendation-card small, .gear-recommendation-card small { display: block; color: #a99a7f; font-size: 9px; }
.enhancement-recommendation-card strong, .gear-recommendation-card strong { display: block; margin-top: 3px; overflow: hidden; color: #e8dfcf; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.enhancement-recommendation-card p, .gear-recommendation-card p { margin: 4px 0 0; overflow: hidden; color: #70c9b5; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.gear-recommendation-card.is-bis { border-color: rgba(214,180,85,.38); background: linear-gradient(110deg, rgba(214,180,85,.09), #17140f 52%); }
.gear-recommendation-card.is-bis small b { margin-left: 4px; padding: 1px 4px; color: #171109; background: #e2bd68; }
.acquisition-badge { display: inline-flex !important; margin-left: 3px; padding: 1px 4px; color: #d8e0e9 !important; border: 1px solid rgba(139,158,185,.28); background: rgba(139,158,185,.1) !important; font-size: 7px !important; font-weight: 850; vertical-align: middle; }
.acquisition-badge.tone-farmable { color: #80e2b3 !important; border-color: rgba(85,201,144,.38); background: rgba(85,201,144,.1) !important; }
.acquisition-badge.tone-craftable { color: #8ee5ff !important; border-color: rgba(105,205,239,.42); background: rgba(105,205,239,.1) !important; }
.acquisition-badge.tone-weekly { color: #f0cb76 !important; border-color: rgba(225,180,83,.38); background: rgba(225,180,83,.1) !important; }
.acquisition-badge.tone-limited { color: #ff948b !important; border-color: rgba(224,107,98,.4); background: rgba(224,107,98,.1) !important; }
.gear-tooltip-acquisition { display: grid; gap: 3px; margin-top: 8px; padding: 8px; border-left: 2px solid #8293a8; background: rgba(90,105,126,.08); }
.gear-tooltip-acquisition small { color: #e5d6af; font-size: 10px; font-weight: 900; }
.gear-tooltip-acquisition strong { color: #bdc8d5; font-size: 10px; line-height: 1.5; white-space: normal; }
.gear-tooltip-acquisition.tone-farmable { border-left-color: #55c990; }
.gear-tooltip-acquisition.tone-craftable { border-left-color: #69cdef; }
.gear-tooltip-acquisition.tone-limited { border-left-color: #e06b62; }
.season-panel { grid-column: 1 / -1; min-width: 0; padding: 24px 26px; border: 1px solid rgba(244,188,85,.22); border-radius: 12px; background: linear-gradient(160deg, rgba(23,27,43,.97), rgba(8,13,23,.98)); box-shadow: 0 22px 55px rgba(0,0,0,.28); }
.season-summary-panel { order: -2; }
.equipment-section, .character-side-panels { order: 0; }
.season-detail-panel { order: 1; }
.season-panel .statistics-heading h2 { font-size: 24px; }
.season-panel .season-title-row span { padding: 7px 11px; font-size: 11px; }
.season-performance-grid { display: grid; grid-template-columns: minmax(260px, .52fr) minmax(0, 1.48fr); align-items: stretch; gap: 18px; margin-top: 16px; }
.season-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; padding: 6px; border: 1px solid rgba(218,185,116,.2); background: #0b0906; }
.season-mode-tab { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; color: #9f9586; border: 1px solid transparent; background: transparent; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; transition: color .16s ease, border-color .16s ease, background-color .16s ease; }
.season-mode-tab span { display: grid; place-items: center; width: 26px; height: 26px; color: #8f8678; border: 1px solid rgba(218,185,116,.18); font-size: 10px; }
.season-mode-tab:hover, .season-mode-tab:focus-visible { color: #f3eadb; border-color: rgba(218,185,116,.28); outline: none; }
.season-mode-tab[data-season-tab="mythic"] { color: #91c7ff; border-color: rgba(65,145,224,.34); background: rgba(31,87,143,.11); }
.season-mode-tab[data-season-tab="raid"] { color: #f0a09a; border-color: rgba(188,74,64,.34); background: rgba(130,45,39,.11); }
.season-mode-tab[data-season-tab="mythic"] span { color: #8fc7ff; border-color: rgba(72,153,235,.46); }
.season-mode-tab[data-season-tab="raid"] span { color: #f4a39d; border-color: rgba(208,84,72,.46); }
.season-mode-tab[data-season-tab="mythic"].is-active { color: #f4f9ff; border-color: #4f9ce8; background: linear-gradient(180deg, rgba(51,132,211,.42), rgba(29,78,128,.26)); box-shadow: inset 0 -3px 0 #65b2ff, 0 0 18px rgba(48,132,214,.13); }
.season-mode-tab[data-season-tab="raid"].is-active { color: #fff5f3; border-color: #c95c51; background: linear-gradient(180deg, rgba(177,67,57,.42), rgba(105,37,31,.28)); box-shadow: inset 0 -3px 0 #ee756a, 0 0 18px rgba(184,64,54,.13); }
.season-mode-tab[data-season-tab="mythic"].is-active span { color: #081421; border-color: #8cc9ff; background: #73baff; }
.season-mode-tab[data-season-tab="raid"].is-active span { color: #210b09; border-color: #ffaaa2; background: #ee7c72; }
.season-tab-panel[hidden] { display: none !important; }
.mythic-score-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 112px; padding: 18px; border: 1px solid rgba(64,151,255,.34); border-radius: 11px; background: linear-gradient(135deg, rgba(36,94,170,.2), rgba(20,42,75,.08)); }
.season-mode-mark { display: grid; place-items: center; width: 56px; height: 56px; color: #81baff; border: 1px solid #438ddb; border-radius: 10px; font-size: 16px; font-weight: 900; }
.mythic-score-card div { min-width: 0; }
.mythic-score-card strong { display: block; color: #81baff; font-size: 36px; line-height: 1; }
.mythic-score-card div span { display: block; margin-top: 7px; color: #b8c5d6; font-size: 13px; font-weight: 750; }
.mythic-score-card small { color: #c5d0de; font-size: 12px; font-weight: 700; }
.score-link-card { color: inherit; text-decoration: none; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.score-link-card:hover, .score-link-card:focus-visible { border-color: rgba(231,196,108,.62); background-color: rgba(231,196,108,.055); outline: none; transform: translateY(-1px); }
.raid-score-block { min-width: 0; padding: 14px 16px 16px; border: 1px solid rgba(139,158,185,.18); border-radius: 11px; background: rgba(7,14,24,.42); }
.raid-score-heading { display: flex; justify-content: space-between; gap: 12px; padding: 0 2px 11px; border-bottom: 1px solid var(--line); }
.raid-score-heading strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.raid-score-heading span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.raid-score-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }
.raid-score-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 70px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7,14,24,.7); }
.raid-score-row > span { font-size: 13px; font-weight: 850; }
.raid-score-row > strong { grid-row: 1 / span 2; grid-column: 2; font-size: 29px; line-height: 1; text-align: right; }
.raid-score-row > small { color: var(--muted); font-size: 10px; }
.raid-score-row.parse-gold > strong, .history-score-grid .parse-gold > strong { color: #e5cc80; }
.raid-score-row.parse-pink > strong, .history-score-grid .parse-pink > strong { color: #e268a8; }
.raid-score-row.parse-orange > strong, .history-score-grid .parse-orange > strong { color: #ff8000; }
.raid-score-row.parse-purple > strong, .history-score-grid .parse-purple > strong { color: #a335ee; }
.raid-score-row.parse-blue > strong, .history-score-grid .parse-blue > strong { color: #0070dd; }
.raid-score-row.parse-green > strong, .history-score-grid .parse-green > strong { color: #1eff00; }
.raid-score-row.parse-gray > strong, .history-score-grid .parse-gray > strong { color: #777; }
.raid-score-row.parse-none > strong, .history-score-grid .parse-none > strong { color: #637087; }
.season-error { margin: 10px 0 0; color: #d89967; font-size: 9px; }
.season-history { margin-top: 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(6,13,22,.58); }
.season-history summary { display: flex; justify-content: space-between; gap: 8px; padding: 9px; cursor: pointer; list-style: none; }
.season-history summary::-webkit-details-marker { display: none; }
.season-history summary span { color: #c5cfdd; font-size: 10px; font-weight: 800; }
.season-history summary b { color: var(--teal); font-size: 9px; }
.history-score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 8px 8px; }
.history-score-grid > div { padding: 6px 3px; border: 1px solid rgba(139,158,185,.12); border-radius: 5px; text-align: center; }
.history-score-grid span { display: block; color: var(--muted); font-size: 8px; }
.history-score-grid strong { display: block; margin-top: 3px; color: #e1e7ef; font-size: 11px; }
.season-dungeons, .mythic-benchmark { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(218,185,116,.2); }
.season-subheading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.season-subheading h3 { margin: 3px 0 0; color: #f2eadc; font-size: 21px; letter-spacing: -.025em; }
.season-subheading > span { color: #a99c88; font-size: 11px; font-weight: 750; }
.season-subheading.benchmark-heading { align-items: flex-end; padding: 0; border: 0; }
.dungeon-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dungeon-result-card { position: relative; min-height: 148px; overflow: hidden; border: 1px solid rgba(201,164,87,.24); background: #0b0906; isolation: isolate; }
.dungeon-result-card::before { position: absolute; z-index: 1; inset: 0; content: ''; background: linear-gradient(90deg, rgba(5,4,3,.93) 0%, rgba(5,4,3,.62) 56%, rgba(5,4,3,.32) 100%); }
.dungeon-result-card::after { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 3px; content: ''; background: #6f685d; }
.dungeon-result-card.is-timed::after { background: #49c08b; box-shadow: 0 0 12px rgba(73,192,139,.6); }
.dungeon-result-card.is-overtime::after { background: #d59845; }
.dungeon-result-card > img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.78) contrast(1.1); }
.dungeon-result-card.is-empty > img { opacity: .22; filter: grayscale(1); }
.dungeon-result-overlay { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 148px; padding: 17px 17px 15px 19px; }
.dungeon-result-overlay strong, .dungeon-result-overlay span { display: block; }
.dungeon-result-overlay strong { max-width: 165px; font-size: 16px; line-height: 1.35; }
.dungeon-result-overlay > div:first-child span { margin-top: 6px; color: #9e9484; font-size: 11px; font-weight: 750; }
.dungeon-result-card.is-timed .dungeon-result-overlay > div:first-child span { color: #67cda2; }
.dungeon-result-card.is-overtime .dungeon-result-overlay > div:first-child span { color: #e0ad65; }
.dungeon-result-numbers { flex: 0 0 auto; text-align: right; }
.dungeon-result-numbers b { display: block; color: #f0cc72; font-size: 35px; line-height: .95; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.dungeon-result-numbers span { margin-top: 7px; color: #c9bead; font-size: 12px; font-weight: 800; line-height: 1; }
.dungeon-result-numbers .dungeon-score { color: #f0d68f; font-size: 16px; }
.dungeon-result-numbers .dungeon-time { color: #fff4dc; font-size: 14px; }
.latest-build-strip { display: grid; grid-template-columns: 1.1fr .7fr .8fr auto; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid rgba(201,164,87,.2); background: #0b0906; }
.latest-build-strip > div span, .latest-build-strip > div strong { display: block; }
.latest-build-strip > div span { color: #8f8678; font-size: 9px; font-weight: 750; }
.latest-build-strip > div strong { margin-top: 3px; color: #ead08c; font-size: 17px; }
.latest-build-strip > p { grid-column: 2 / -1; margin: 0; color: #998f80; font-size: 11px; }
.latest-build-strip > a { justify-self: end; padding: 8px 11px; color: #e1c472; border: 1px solid rgba(217,189,115,.3); font-size: 10px; font-weight: 800; text-decoration: none; }
.talent-review-grid, .benchmark-lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.talent-tree-review { min-width: 0; margin-top: 14px; padding: 16px; border: 1px solid rgba(218,185,116,.2); background: #090806; }
.talent-tree-heading { align-items: flex-end; }
.talent-tree-heading > div p { margin: 5px 0 0; color: #8f8678; font-size: 10px; }
.talent-tree-layout { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(150px, .42fr) minmax(300px, 1fr); gap: 12px; margin-top: 15px; overflow-x: auto; padding-bottom: 4px; }
.talent-tree-column { min-width: 0; border: 1px solid rgba(218,185,116,.15); background: radial-gradient(circle at 50% 20%, rgba(108,77,39,.16), transparent 45%), #050504; }
.talent-tree-column h4 { margin: 0; padding: 11px 10px; color: #ded3bd; border-bottom: 1px solid rgba(218,185,116,.15); font-size: 13px; text-align: center; }
.talent-tree-column.tree-hero h4 { color: #e8d7f6; }
.talent-tree-board { position: relative; display: grid; grid-template-columns: repeat(7, 42px); grid-template-rows: repeat(12, 54px); justify-content: center; min-height: 648px; padding: 17px 8px 20px; overflow: hidden; background-image: linear-gradient(90deg, transparent 49.7%, rgba(194,170,119,.13) 49.7%, rgba(194,170,119,.13) 50.3%, transparent 50.3%), repeating-linear-gradient(180deg, transparent 0, transparent 53px, rgba(194,170,119,.08) 53px, rgba(194,170,119,.08) 54px); }
.talent-tree-board::after { position: absolute; z-index: 0; inset: 12px; content: ''; pointer-events: none; background: radial-gradient(circle, rgba(214,181,112,.1) 0 1px, transparent 2px) 0 0 / 42px 54px; opacity: .55; }
.talent-tree-node { position: relative; z-index: 1; grid-row: var(--talent-row); grid-column: var(--talent-column); align-self: center; justify-self: center; width: 42px; height: 42px; border: 2px solid #453d32; background: #111; box-shadow: 0 4px 12px rgba(0,0,0,.65); }
.talent-tree-node::before { position: absolute; z-index: -1; top: 50%; right: 100%; width: 22px; height: 1px; content: ''; background: rgba(170,151,112,.25); }
.talent-tree-node img, .talent-tree-node > span { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; color: #d8b45d; background: #17130d; }
.talent-tree-node.is-unselected img { filter: grayscale(.5) brightness(.68); }
.talent-tree-node.is-selected { border-color: #f2ce6c; box-shadow: 0 0 0 2px rgba(226,184,78,.2), 0 0 18px rgba(226,184,78,.24); }
.talent-tree-node > b { position: absolute; z-index: 3; right: 50%; bottom: -13px; min-width: 41px; padding: 2px 5px; transform: translateX(50%); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: #24201b; font-size: 9px; line-height: 1; text-align: center; white-space: nowrap; }
.talent-tree-node.usage-pink > b, .talent-extra-choices .usage-pink > b { background: #c64d88; }
.talent-tree-node.usage-purple > b, .talent-extra-choices .usage-purple > b { background: #7d45b5; }
.talent-tree-node.usage-blue > b, .talent-extra-choices .usage-blue > b { background: #3168a9; }
.talent-tree-node.usage-green > b, .talent-extra-choices .usage-green > b { background: #398451; }
.talent-tree-node.usage-gray > b, .talent-extra-choices .usage-gray > b { background: #343434; }
.talent-tree-column.tree-hero { background: radial-gradient(circle at 50% 42%, rgba(110,69,145,.28), transparent 38%), #050504; }
.talent-tree-column.tree-hero .talent-tree-board { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 28px; min-height: 648px; background-image: linear-gradient(90deg, transparent 49.4%, rgba(198,154,229,.2) 49.4%, rgba(198,154,229,.2) 50.6%, transparent 50.6%); }
.talent-tree-column.tree-hero .talent-tree-board::after { background: radial-gradient(circle, rgba(205,170,231,.18) 0 2px, transparent 3px) 50% 0 / 100% 68px; }
.talent-tree-column.tree-hero .talent-tree-node { flex: 0 0 auto; width: 66px; height: 66px; }
.talent-tree-column.tree-hero .talent-tree-node::before { top: auto; right: 50%; bottom: 100%; width: 1px; height: 29px; }
.talent-tree-column.tree-hero .talent-tree-node > b { bottom: -15px; font-size: 10px; }
.talent-tree-empty { grid-column: 1 / -1; align-self: center; margin: 0; color: #6f685e; font-size: 10px; text-align: center; }
.talent-extra-choices { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 10px; padding: 11px; border: 1px solid rgba(218,185,116,.13); background: #0c0a07; }
.talent-extra-choices > strong { color: #b8ab97; font-size: 11px; }
.talent-extra-choices > div { display: flex; flex-wrap: wrap; gap: 8px; }
.talent-extra-choices > div > span { position: relative; width: 38px; height: 38px; border: 1px solid #554a39; background: #111; }
.talent-extra-choices > div > span.is-selected { border-color: #e7c45e; box-shadow: 0 0 10px rgba(231,196,94,.25); }
.talent-extra-choices img { width: 100%; height: 100%; object-fit: cover; }
.talent-extra-choices b { position: absolute; right: -5px; bottom: -5px; min-width: 31px; padding: 2px 4px; color: #fff; border-radius: 8px; font-size: 8px; text-align: center; }
.raid-tab-detail { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(218,185,116,.2); }
.raid-tab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.raid-tab-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-height: 124px; padding: 19px 20px; border: 1px solid rgba(218,185,116,.2); background: linear-gradient(135deg, rgba(37,31,23,.82), rgba(9,8,6,.96)); }
.raid-tab-card > span { font-size: 16px; font-weight: 900; }
.raid-tab-card > strong { grid-row: 1 / span 2; grid-column: 2; font-size: 38px; line-height: 1; }
.raid-tab-card > small { color: #968c7d; font-size: 11px; }
.raid-tab-card.parse-gold > strong { color: #e5cc80; }
.raid-tab-card.parse-pink > strong { color: #e268a8; }
.raid-tab-card.parse-orange > strong { color: #ff8000; }
.raid-tab-card.parse-purple > strong { color: #a335ee; }
.raid-tab-card.parse-blue > strong { color: #338bdc; }
.raid-tab-card.parse-green > strong { color: #35ca30; }
.raid-tab-card.parse-gray > strong { color: #8b8b8b; }
.raid-tab-card.parse-none > strong { color: #625f5a; }
.raid-log-profile-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 13px; color: #e0c474; border: 1px solid rgba(218,185,116,.3); font-size: 11px; font-weight: 850; text-decoration: none; }
.raid-log-profile-link:hover { color: #fff1c7; border-color: #d5b15e; }
.talent-review-panel, .top-player-panel, .stat-compare-panel { min-width: 0; padding: 15px; border: 1px solid rgba(218,185,116,.16); background: #0c0b08; }
.review-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(218,185,116,.13); }
.review-panel-title strong { font-size: 14px; }
.review-panel-title span { color: #8f8678; font-size: 9px; }
.talent-icon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; max-height: 322px; overflow: auto; padding-right: 3px; }
.talent-icon-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; padding: 5px; border: 1px solid rgba(218,185,116,.11); background: #14110d; }
.talent-icon-card > img, .talent-icon-card > span, .talent-average-row > img, .talent-placeholder { width: 34px; height: 34px; object-fit: cover; border: 1px solid #74613e; background: #17130d; }
.talent-icon-card > span, .talent-placeholder { display: grid; place-items: center; color: #d8b45d; }
.talent-icon-card strong, .talent-icon-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talent-icon-card strong { font-size: 10px; }
.talent-icon-card small { margin-top: 2px; color: #8f8678; font-size: 8px; }
.talent-average-list { display: grid; gap: 5px; margin-top: 10px; max-height: 322px; overflow: auto; padding-right: 3px; }
.talent-average-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 44px; padding: 5px 8px 5px 5px; border: 1px solid rgba(218,185,116,.11); background: #14110d; }
.talent-average-row.is-missing { border-left: 2px solid #b1594b; }
.talent-average-row.is-selected { border-left: 2px solid #4daf7f; }
.talent-average-row strong, .talent-average-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talent-average-row strong { font-size: 10px; }
.talent-average-row small { margin-top: 2px; color: #8f8678; font-size: 8px; }
.talent-average-row > b { color: #e7c46c; font-size: 13px; }
.benchmark-empty { margin: 14px 0 0; color: #958b7b; font-size: 10px; line-height: 1.55; }
.top-player-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) 64px 82px 30px; gap: 10px; margin-top: 10px; padding: 0 10px 6px; color: #81786b; font-size: 9px; font-weight: 800; text-align: right; }
.top-player-head span:nth-child(2) { text-align: left; }
.top-player-list { display: grid; grid-template-columns: 1fr; gap: 3px; margin: 0; padding: 0; list-style: none; }
.top-player-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 64px 82px 30px; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border: 1px solid rgba(218,185,116,.1); background: linear-gradient(90deg, #17130f, #110f0c); }
.top-player-list li:nth-child(-n+3) { border-left-color: #d6ad54; background: linear-gradient(90deg, rgba(121,86,32,.22), #110f0c 48%); }
.top-player-list li > span { color: #d1ae55; font-size: 13px; font-weight: 900; text-align: center; }
.top-player-list li div { min-width: 0; }
.top-player-list li div strong, .top-player-list li div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-player-list li div strong { font-size: 12px; }
.top-player-list li div small { margin-top: 2px; color: #857c6f; font-size: 9px; }
.top-player-list li > b { color: #e6c56e; font-size: 13px; text-align: right; }
.top-player-list li > em { color: #f08b55; font-size: 12px; font-style: normal; font-weight: 900; text-align: right; }
.top-player-list li > a { display: grid; place-items: center; width: 22px; height: 22px; color: #d8bd73; border: 1px solid rgba(216,189,115,.24); text-decoration: none; }
.stat-compare-list { display: grid; gap: 5px; margin-top: 10px; }
.stat-compare-list > div { display: grid; grid-template-columns: minmax(80px, 1fr) auto minmax(110px, auto) 54px; align-items: center; gap: 10px; min-height: 38px; padding: 7px 9px; border: 1px solid rgba(218,185,116,.1); background: #14110d; }
.stat-compare-list span { color: #d8d0c3; font-size: 10px; font-weight: 800; }
.stat-compare-list strong { font-size: 12px; }
.stat-compare-list small { color: #8f8678; font-size: 9px; text-align: right; }
.stat-compare-list b { font-size: 10px; text-align: right; }
.stat-compare-list b.is-positive { color: #5bc793; }
.stat-compare-list b.is-negative { color: #df776b; }
.raid-stat-benchmark { margin-top: 16px; }
.equipment-card.quality-uncommon::before { background: #1eff00; }
.equipment-card.quality-rare::before { background: #0070dd; }
.equipment-card.quality-epic::before { background: #a335ee; }
.equipment-card.quality-legendary::before { background: #ff8000; }
.equipment-card.quality-artifact::before { background: #e6cc80; }
.equipment-card.quality-uncommon .equipment-icon { border-color: rgba(30,255,0,.48); }
.equipment-card.quality-rare .equipment-icon { border-color: rgba(0,112,221,.62); }
.equipment-card.quality-epic .equipment-icon { border-color: rgba(163,53,238,.62); }
.equipment-card.quality-legendary .equipment-icon { border-color: rgba(255,128,0,.62); }
.equipment-card.quality-artifact .equipment-icon { border-color: rgba(230,204,128,.62); }

.process { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; padding: 82px 0 100px; border-top: 1px solid var(--line); }
.process h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.3; letter-spacing: -.04em; }
.process ol { display: grid; margin: 0; padding: 0; list-style: none; }
.process li { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.process li > span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(244,188,85,.28); border-radius: 50%; font-size: 11px; font-weight: 800; }
.process strong { font-size: 14px; }
.process li p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

footer { display: flex; justify-content: space-between; align-items: center; min-height: 90px; border-top: 1px solid var(--line); color: #647287; font-size: 10px; }
footer span { color: #aab6c8; font-weight: 850; letter-spacing: .14em; }
footer p { margin: 0; }

/* Warcraft armory visual system */
:root {
    --ink: #f2eadc;
    --muted: #aa9f8e;
    --deep: #090806;
    --panel: #15120e;
    --panel-soft: #1c1812;
    --line: rgba(218, 185, 116, .2);
    --gold: #c9a457;
    --gold-bright: #f0d58a;
    --teal: #72b8ad;
    --danger: #d9766d;
}

body {
    background:
        radial-gradient(circle at 78% 12%, rgba(128, 78, 31, .13), transparent 30rem),
        radial-gradient(circle at 10% 44%, rgba(105, 77, 38, .09), transparent 28rem),
        linear-gradient(180deg, #0b0a08, #070706 72%);
}

body::before {
    opacity: .32;
    background-image: repeating-linear-gradient(135deg, rgba(232,205,150,.018) 0, rgba(232,205,150,.018) 1px, transparent 1px, transparent 7px);
    background-size: auto;
    mask-image: none;
}

.site-header { min-height: 72px; border-color: rgba(218,185,116,.26); }
.brand { gap: 5px; color: #f0dfb1; font-size: 19px; letter-spacing: .1em; }
.brand-mark { width: 44px; height: 44px; color: #f1d589; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.brand-mark img { object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.brand-badge { margin-left: 5px; }
.brand-badge, .secure-label, .waiting-chip { border-radius: 2px; }
.service-state i { background: #76b47b; box-shadow: 0 0 9px rgba(118,180,123,.45); }
.account-link, .logout-button { color: #d8cdbb; background: #15120e; border-color: rgba(218,185,116,.2); border-radius: 3px; }
.account-link:hover, .logout-button:hover { color: #fff4d5; border-color: #987a3d; background: #211b12; }
.account-link.is-connected { color: #e1c57d; border-color: rgba(218,185,116,.34); }
.account-link b { color: #171109; background: #d5b35e; border-radius: 2px; }
.auth-notice, .api-error, .no-ranking, .combat-error, .benchmark-error { border-radius: 3px; }

.eyebrow, .step-label { color: #d7ae57; text-transform: uppercase; }
h1 { color: #f5eee2; text-shadow: 0 2px 18px rgba(0,0,0,.42); }
h1 em { color: #f0c96f; }
.lead { color: #bcb1a1; }
.benefits { color: #d1c6b5; }
.benefits span { color: #d5ad57; }

.analyzer-card { overflow: visible; background: #14110d; border-color: rgba(203,166,88,.55); border-radius: 4px; box-shadow: 0 22px 50px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,232,179,.025); }
.analyzer-card::after { inset: 0 auto 0 0; width: 3px; height: auto; background: #c9a457; opacity: 1; }
.card-heading { border-bottom: 1px solid rgba(218,185,116,.16); padding-bottom: 20px; }
.secure-label { color: #d9bf7c; border-color: rgba(218,185,116,.28); }
label { color: #ded3c1; }
.url-field { background: #080705; border-color: rgba(218,185,116,.27); border-radius: 3px; }
.url-field:focus-within { border-color: #d3aa50; box-shadow: 0 0 0 2px rgba(211,170,80,.13); }
.url-field button, .analyze-account-character { color: #171109; background: #d2aa52; border: 1px solid #efd58d; border-radius: 2px; box-shadow: 0 5px 16px rgba(0,0,0,.35); }
.url-field button:hover, .analyze-account-character:hover { background: #e1bb62; filter: none; }
.empty-preview, .notice { background: #0d0c09; border-color: rgba(218,185,116,.17); border-radius: 3px; }
.preview-line span { background: #29241c; border-radius: 1px; }
.preview-line i { background: rgba(201,164,87,.24); border-radius: 1px; }
.notice-success { border-color: rgba(102,165,111,.42); background: rgba(59,100,65,.1); }
.notice-success strong, .waiting-chip.is-ready { color: #86c78c; }

.live-result { background: #0e0c09; border-color: rgba(218,185,116,.29); border-radius: 4px; }
.metric-grid > div, .combat-metrics > div, .review-grid > div, .benchmark-metrics > div { background: #17140f; border-color: rgba(218,185,116,.15); border-radius: 3px; box-shadow: inset 3px 0 0 rgba(201,164,87,.18); }
.coach-summary { background: rgba(201,164,87,.055); }
.coach-summary a, .benchmark-heading a, .priority-list li em { color: #d9bd73; }
.combat-detail { border-color: rgba(218,185,116,.22); }
.spell-row, .priority-list li { background: #100e0b; border-color: rgba(218,185,116,.14); border-radius: 3px; }
.spell-bar { background: #28231b; border-radius: 1px; }
.spell-bar i { background: linear-gradient(90deg, #8a6e35, #e0bc62); border-radius: 1px; }
.cooldown-row > div span { color: #e2c579; background: rgba(201,164,87,.09); border-color: rgba(201,164,87,.2); border-radius: 2px; }
.benchmark-panel { background: #15110d; border-color: rgba(201,164,87,.42); border-radius: 4px; }
.priority-list li > span { color: #171109; background: #d2aa52; border-radius: 2px; }

.account-empty { background: #14110d; border-color: rgba(218,185,116,.2); border-radius: 4px; }
.character-card { position: relative; overflow: hidden; background: #14110d; border-color: rgba(218,185,116,.17); border-radius: 4px; box-shadow: inset 3px 0 0 var(--class-color); }
.character-card::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, var(--class-color), transparent 70%); opacity: .55; }
.character-card:hover { transform: translateY(-1px); background: #1b1711; border-color: var(--class-color); }
.character-list-avatar, .profile-avatar { border-radius: 3px; background: #080705; }
.character-level-badges > span { border-radius: 2px; }
.character-level-badge { color: #9fc8c1; border-color: rgba(114,184,173,.28) !important; background: rgba(114,184,173,.07); }
.character-level-badge b { color: #8bd0c5; }
.character-item-level-badge { color: #dac289; border-color: rgba(201,164,87,.36) !important; background: rgba(201,164,87,.09); }
.character-item-level-badge b, .character-arrow { color: #f0c96f; }
.profile-hero { border-color: rgba(218,185,116,.24); }

.equipment-section { background: #12100c; border-color: rgba(201,164,87,.46); border-radius: 4px; box-shadow: 0 18px 42px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,229,170,.02); }
.equipment-heading { border-color: rgba(218,185,116,.2); }
.armory-summary > span { background: #0b0a08; border-radius: 2px; }
.equipment-card { background: #15120e; border-color: rgba(218,185,116,.14); border-radius: 2px; }
.equipment-card:hover, .equipment-card:focus { background: #1d1812; border-color: rgba(218,185,116,.35); }
.equipment-icon { border-radius: 2px; }
.equipment-card.quality-uncommon > .equipment-copy > strong { color: #55d841; }
.equipment-card.quality-rare > .equipment-copy > strong { color: #4b9fea; }
.equipment-card.quality-epic > .equipment-copy > strong { color: #bc6cff; }
.equipment-card.quality-legendary > .equipment-copy > strong { color: #ff9a35; }
.equipment-card.quality-artifact > .equipment-copy > strong { color: #e6cc80; }
.modifier { color: #76c8b8; }
.character-stage { border-color: rgba(201,164,87,.3); border-radius: 2px; background: radial-gradient(ellipse at 50% 48%, rgba(112,83,40,.2), transparent 58%), #090806; }
.item-tooltip { border-color: #74613e; background: #080705; box-shadow: 0 18px 46px rgba(0,0,0,.82), inset 0 0 0 1px rgba(229,196,123,.05); }

.statistics-panel { background: #12100c; border-color: rgba(201,164,87,.32); border-top: 2px solid var(--class-color); border-radius: 4px; box-shadow: 0 18px 42px rgba(0,0,0,.38); }
.statistics-heading { border-color: rgba(218,185,116,.2); }
.stat-row { border-color: rgba(218,185,116,.1); }
.stat-glyph { border-radius: 2px; background: #0b0a08; }
.season-panel { background: #12100c; border-color: rgba(201,164,87,.42); border-top: 2px solid #c9a457; border-radius: 4px; box-shadow: 0 18px 42px rgba(0,0,0,.38); }
.season-title-row > span { border-radius: 2px; }
.mythic-score-card { background: #101319; border-color: rgba(78,137,198,.44); border-radius: 3px; }
.season-mode-mark { border-radius: 2px; }
.raid-score-block { background: #0c0b08; border-color: rgba(218,185,116,.16); border-radius: 3px; }
.raid-score-row { background: #15120e; border-color: rgba(218,185,116,.13); border-radius: 2px; }
.season-history { background: #0c0b08; border-color: rgba(218,185,116,.15); border-radius: 2px; }
.history-score-grid > div { border-radius: 2px; }
.process li > span { border-radius: 2px; background: #15120e; }

footer { border-color: rgba(218,185,116,.18); }

@media (max-width: 900px) {
    .site-header, main, footer { width: min(100% - 36px, 1500px); }
    .workspace { padding-top: 52px; }
    .intro-copy { min-height: 480px; padding: 48px 42% 48px 32px; }
    .intro-copy::before { background-position: 60% center; }
    .intro-copy::after { background: linear-gradient(90deg, rgba(7,7,6,.98) 0%, rgba(7,7,6,.9) 48%, rgba(7,7,6,.42) 78%, rgba(7,7,6,.36)); }
    .process { grid-template-columns: 1fr; gap: 24px; }
    .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .character-content-grid { grid-template-columns: 1fr; }
    .character-side-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .statistics-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .season-performance-grid { grid-template-columns: 1fr; }
    .dungeon-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .talent-review-grid, .benchmark-lower-grid { grid-template-columns: 1fr; }
    .talent-tree-layout { grid-template-columns: repeat(3, minmax(290px, 1fr)); }
    .raid-tab-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .global-season-chip { padding: 5px 8px; font-size: 9px; }
    .site-header, main, footer { width: min(100% - 24px, 1500px); }
    .site-header { min-height: 66px; }
    .service-state { display: none; }
    .header-actions { gap: 7px; }
    .account-link, .logout-button { padding: 7px 9px; font-size: 11px; }
    .workspace { gap: 34px; padding: 42px 0 64px; }
    .intro-copy { min-height: 620px; padding: 34px 22px 230px; }
    .intro-copy::before { background-position: 68% center; }
    .intro-copy::after { background: linear-gradient(180deg, rgba(7,7,6,.97) 0%, rgba(7,7,6,.9) 58%, rgba(7,7,6,.25) 86%, rgba(7,7,6,.48)); }
    h1 { font-size: 41px; }
    .lead { font-size: 15px; }
    .analyzer-card { padding: 23px 18px; border-radius: 3px; }
    .card-heading { display: block; }
    .secure-label { display: inline-block; margin-top: 12px; }
    .url-field { grid-template-columns: auto minmax(0, 1fr); }
    .url-field button { grid-column: 1 / -1; width: 100%; margin-top: 5px; }
    .notice { align-items: flex-start; flex-direction: column; }
    .account-hero-cta { align-items: flex-start; flex-direction: column; gap: 9px; }
    .account-hero-cta > a { width: 100%; justify-content: center; }
    .result-heading { flex-direction: column; gap: 10px; }
    .encounter-name { text-align: left; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .combat-title-row { flex-direction: column; gap: 7px; }
    .combat-metrics { grid-template-columns: repeat(2, 1fr); }
    .spell-row { grid-template-columns: minmax(95px, 1fr) auto; }
    .spell-bar { grid-column: 1 / -1; grid-row: 2; }
    .cooldown-row { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .benchmark-heading { flex-direction: column; gap: 14px; }
    .benchmark-metrics { grid-template-columns: repeat(2, 1fr); }
    .priority-list li { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
    .account-main { padding: 42px 0 72px; }
    .character-grid { grid-template-columns: 1fr; }
    .profile-hero { align-items: flex-start; flex-direction: column; gap: 16px; }
    .profile-identity { width: 100%; }
    .profile-avatar { width: 60px; height: 60px; }
    .profile-copy h1 { font-size: 30px; }
    .profile-actions { align-items: stretch; flex-direction: column; width: 100%; }
    .specialization-switcher { width: 100%; overflow-x: auto; }
    .specialization-option { flex: 1 0 auto; }
    .profile-refresh-form, .analyze-account-character { width: 100%; }
    .analyze-account-character { justify-content: center; }
    .equipment-section { padding: 12px; }
    .equipment-heading { align-items: flex-start; flex-direction: column; }
    .armory-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
    .armory-summary > span { min-width: 0; padding: 7px 3px; font-size: 9px; text-align: center; }
    .armory-summary strong { display: block; margin: 3px 0 0; font-size: 15px; }
    .paperdoll-grid { grid-template-columns: 1fr; }
    .character-stage { grid-row: 1; min-height: 350px; }
    .equipment-stack { grid-template-rows: none; }
    .item-tooltip, .equipment-stack.is-right .item-tooltip, .weapon-row .item-tooltip { top: calc(100% + 7px); right: auto; bottom: auto; left: 0; width: min(340px, calc(100vw - 48px)); transform: translateY(-5px) scale(.98); }
    .equipment-card:hover .item-tooltip, .equipment-card:focus .item-tooltip, .equipment-card:focus-within .item-tooltip, .weapon-row .equipment-card:hover .item-tooltip, .weapon-row .equipment-card:focus .item-tooltip, .weapon-row .equipment-card:focus-within .item-tooltip { transform: translateY(0) scale(1); }
    .tooltip-help { display: block; }
    .weapon-row { grid-template-columns: 1fr; }
    .character-side-panels { grid-template-columns: 1fr; }
    .statistics-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .season-panel { padding: 17px 14px; }
    .season-panel .statistics-heading h2 { font-size: 21px; }
    .mythic-score-card { grid-template-columns: 52px minmax(0, 1fr) auto; min-height: 96px; padding: 14px; }
    .season-mode-mark { width: 50px; height: 50px; }
    .mythic-score-card strong { font-size: 30px; }
    .raid-score-list { grid-template-columns: 1fr; }
    .raid-score-row { min-height: 66px; }
    .season-mode-tabs { margin-top: 18px; }
    .season-mode-tab { min-height: 44px; font-size: 13px; }
    .season-subheading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .season-subheading.benchmark-heading { align-items: flex-start; }
    .dungeon-card-grid { grid-template-columns: 1fr; }
    .dungeon-result-card, .dungeon-result-overlay { min-height: 140px; }
    .dungeon-result-numbers b { font-size: 32px; }
    .dungeon-result-numbers .dungeon-score { font-size: 15px; }
    .dungeon-result-numbers .dungeon-time { font-size: 13px; }
    .latest-build-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .latest-build-strip > a, .latest-build-strip > p { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
    .talent-tree-review { padding: 11px; }
    .talent-tree-heading { align-items: flex-start; flex-direction: column; }
    .talent-tree-layout { grid-template-columns: 1fr; overflow: visible; }
    .talent-tree-board { grid-template-columns: repeat(7, minmax(36px, 40px)); min-height: 648px; padding-inline: 3px; }
    .talent-tree-node { width: 39px; height: 39px; }
    .talent-extra-choices { grid-template-columns: 1fr; }
    .talent-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
    .talent-average-list { max-height: none; }
    .top-player-head { display: none; }
    .top-player-list { grid-template-columns: 1fr; }
    .top-player-list li { grid-template-columns: 34px minmax(0, 1fr) 48px 64px 26px; gap: 6px; }
    .stat-compare-list > div { grid-template-columns: minmax(70px, 1fr) auto; gap: 4px 10px; }
    .stat-compare-list small { grid-column: 1 / -1; grid-row: 2; text-align: left; }
    .stat-compare-list b { grid-column: 2; grid-row: 2; }
    .process { padding: 62px 0 72px; }
    footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
    .item-tooltip { display: none !important; }
    .equipment-card:not(.is-empty) { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Refined LOGMATE identity, talent canvas, loading states, and footer */
.talent-tree-layout { grid-template-columns: minmax(390px, 1fr) minmax(210px, .48fr) minmax(390px, 1fr); }
.talent-tree-layout.is-two-column { grid-template-columns: repeat(2, minmax(390px, 1fr)); }
.talent-tree-layout[hidden] { display: none !important; }
.selected-talent-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.selected-talent-group { min-width: 0; padding: 9px; border: 1px solid rgba(218,185,116,.15); background: #090806; }
.selected-talent-group.group-class { border-top: 2px solid #4e87bd; }
.selected-talent-group.group-spec { border-top: 2px solid #b66bba; }
.selected-talent-group-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 7px; border-bottom: 1px solid rgba(218,185,116,.12); }
.selected-talent-group-title strong { color: #eadbb7; font-size: 14px; }
.selected-talent-group-title span { color: #8f8678; font-size: 9px; }
.selected-talent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.selected-talent-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 6px; row-gap: 1px; min-height: 54px; padding: 6px; border: 1px solid rgba(218,185,116,.16); border-left: 3px solid #d8b45d; background: linear-gradient(110deg, rgba(216,180,93,.1), transparent 46%), #12100c; box-shadow: 0 5px 12px rgba(0,0,0,.14); }
.selected-talent-card.usage-pink { border-left-color: #d25490; }
.selected-talent-card.usage-purple { border-left-color: #8f56c8; }
.selected-talent-card.usage-blue { border-left-color: #4385c9; }
.selected-talent-card.usage-green { border-left-color: #4d9c68; }
.selected-talent-card.usage-gray { border-left-color: #5f5a52; }
.selected-talent-card.is-low { border-color: rgba(225,76,66,.72); border-left-color: #e14c42; background: linear-gradient(110deg, rgba(156,42,34,.19), transparent 52%), #12100c; box-shadow: inset 0 0 0 1px rgba(225,76,66,.1), 0 8px 18px rgba(0,0,0,.2); }
.selected-talent-card.is-unrated { border-color: rgba(218,185,116,.2); }
.selected-talent-icon { display: grid; grid-row: 1 / 3; place-items: center; width: 34px; height: 34px; overflow: hidden; color: #d8b45d; border: 1px solid rgba(218,185,116,.42); background: #080705; }
.selected-talent-icon img { width: 100%; height: 100%; object-fit: cover; }
.selected-talent-copy { min-width: 0; }
.selected-talent-copy small,
.selected-talent-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-talent-copy small { color: #8f8678; font-size: 9px; font-weight: 750; }
.selected-talent-copy strong { color: #e7dfd2; font-size: 10px; }
.selected-talent-bar { height: 2px; margin-top: 4px; overflow: hidden; background: rgba(255,255,255,.07); }
.selected-talent-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a78035, #edc965); }
.selected-talent-rate { grid-column: 2; display: flex; align-items: center; justify-content: space-between; min-width: 0; }
.selected-talent-rate strong { color: #e6c56e; font-size: 11px; }
.selected-talent-rate span { overflow: hidden; color: #756e63; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.talent-tree-column h4 { padding: 13px 10px; font-size: 14px; }
.talent-tree-board,
.talent-tree-column.tree-hero .talent-tree-board {
    position: relative;
    display: grid;
    align-content: start;
    justify-content: stretch;
    grid-template-columns: repeat(var(--talent-columns), minmax(44px, 1fr));
    grid-template-rows: repeat(var(--talent-rows), 60px);
    gap: 0;
    min-width: 0;
    min-height: var(--talent-board-height);
    padding: 24px 18px 30px;
    overflow: hidden;
    background-image: linear-gradient(90deg, transparent 49.7%, rgba(194,170,119,.14) 49.7%, rgba(194,170,119,.14) 50.3%, transparent 50.3%), repeating-linear-gradient(180deg, transparent 0, transparent 59px, rgba(194,170,119,.06) 59px, rgba(194,170,119,.06) 60px);
}
.talent-tree-column.tree-hero .talent-tree-board { background-image: linear-gradient(90deg, transparent 49.3%, rgba(198,154,229,.22) 49.3%, rgba(198,154,229,.22) 50.7%, transparent 50.7%), repeating-linear-gradient(180deg, transparent 0, transparent 63px, rgba(190,146,220,.07) 63px, rgba(190,146,220,.07) 64px); }
.talent-tree-board::after { inset: 20px; background: radial-gradient(circle, rgba(214,181,112,.12) 0 1px, transparent 2px) 50% 8px / calc(100% / var(--talent-columns)) 60px; opacity: .6; }
.talent-tree-links { position: absolute; z-index: 1; inset: 24px 18px 30px; width: calc(100% - 36px); height: calc(100% - 54px); overflow: visible; pointer-events: none; }
.talent-tree-links line { vector-effect: non-scaling-stroke; stroke: rgba(132,125,112,.65); stroke-width: 2; }
.talent-tree-links line.is-selected { stroke: rgba(231,196,94,.92); stroke-width: 3; filter: drop-shadow(0 0 3px rgba(231,196,94,.5)); }
.talent-tree-node,
.talent-tree-column.tree-hero .talent-tree-node { position: relative; z-index: 2; align-self: center; justify-self: center; grid-row: var(--talent-row); grid-column: var(--talent-column); flex: none; width: 48px; height: 48px; border: 2px solid #51483b; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,.68); }
.talent-tree-column.tree-hero .talent-tree-node { width: 56px; height: 56px; border-color: #76528f; }
.talent-tree-node::before,
.talent-tree-column.tree-hero .talent-tree-node::before { display: none; }

.statistics-note { line-height: 1.55; }

.benchmark-lower-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.benchmark-stat-first { margin-top: 14px; padding: 18px; background: radial-gradient(circle at 100% 0, rgba(73,178,145,.1), transparent 34%), #0c0b08; }
.benchmark-rank-first { margin-top: 12px; padding: 14px 18px; background: radial-gradient(circle at 0 0, rgba(216,180,93,.09), transparent 30%), #0c0b08; }
.benchmark-rank-first .top-player-head { display: none; }
.benchmark-rank-first .top-player-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.benchmark-rank-first .top-player-list li { min-height: 51px; padding: 6px 10px; border-color: rgba(218,185,116,.16); background: linear-gradient(100deg, rgba(216,180,93,.07), transparent 40%), #14110d; }
.benchmark-rank-first .top-player-list li:nth-child(-n+3) { border-left: 3px solid #d6ad54; }
.raid-top-player-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.raid-top-player-list li { grid-template-columns: 36px minmax(0, 1fr) 82px 30px; min-height: 51px; padding: 6px 10px; border-color: rgba(218,185,116,.16); background: linear-gradient(100deg, rgba(216,180,93,.07), transparent 40%), #14110d; }
.raid-top-player-list li:nth-child(-n+3) { border-left: 3px solid #d6ad54; }
.talent-icon-review { padding: 14px; }
.talent-icon-compare { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr); gap: 12px; margin-top: 12px; }
.talent-icon-panel { min-width: 0; padding: 12px; border: 1px solid rgba(218,185,116,.18); background: #080705; }
.talent-icon-panel.is-mine { border-top: 2px solid #4e87bd; }
.talent-icon-panel.is-top { border-top: 2px solid #b66bba; }
.talent-icon-panel-title,
.talent-icon-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.talent-icon-panel-title { padding-bottom: 9px; border-bottom: 1px solid rgba(218,185,116,.14); }
.talent-icon-panel-title strong { color: #eadbb7; font-size: 14px; }
.talent-icon-panel-title span,
.talent-icon-section-title span { color: #8f8678; font-size: 9px; }
.talent-icon-section { margin-top: 11px; }
.talent-icon-section-title { margin-bottom: 7px; }
.talent-icon-section-title strong { color: #c7bda9; font-size: 11px; }
.hero-talent-group-title { margin: 8px 0 5px 28px; padding: 3px 7px; color: #d7b8e8; border-left: 2px solid #a85fc4; background: rgba(168,95,196,.08); font-size: 9px; font-weight: 850; }
.talent-icon-tree-rows { display: grid; gap: 2px; padding: 5px 0 7px; overflow-x: auto; border: 1px solid rgba(218,185,116,.08); background: radial-gradient(circle at 50% 0, rgba(216,180,93,.055), transparent 48%), #050504; }
.talent-icon-tree-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; min-height: 52px; }
.talent-icon-tree-row > span { padding: 17px 0 0 5px; color: #746c60; font-size: 8px; font-weight: 800; text-align: left; white-space: nowrap; }
.talent-icon-cloud { position: relative; display: grid; grid-template-columns: repeat(10, 38px); grid-auto-columns: 38px; align-items: start; gap: 7px; min-width: max-content; padding: 7px 10px 11px; }
.talent-icon-cloud::before { position: absolute; z-index: 0; top: 26px; right: 10px; left: 10px; height: 1px; content: ''; background: linear-gradient(90deg, transparent, rgba(174,139,63,.2) 7%, rgba(174,139,63,.2) 93%, transparent); }
.talent-compact-icon { position: relative; z-index: 1; grid-column: var(--talent-column, auto); display: grid; place-items: center; width: 38px; height: 38px; overflow: visible; color: #d8b45d; border: 2px solid #b89445; border-radius: 50%; background: #100e0a; box-shadow: 0 4px 10px rgba(0,0,0,.42); }
.talent-icon-tree-row:not(:first-child) .talent-compact-icon::before { position: absolute; z-index: -1; top: -10px; left: 50%; height: 9px; content: ''; border-left: 1px solid rgba(174,139,63,.38); }
.talent-compact-icon img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.talent-compact-icon.is-recommended { border-color: #4d9bea; box-shadow: 0 0 0 1px rgba(77,155,234,.5), 0 0 13px rgba(77,155,234,.3), 0 4px 10px rgba(0,0,0,.42); }
.talent-rank-badge { position: absolute; z-index: 3; top: -5px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; color: #fff4cf; border: 1px solid #e5bb57; border-radius: 9px; background: #6e4d12; box-shadow: 0 2px 5px rgba(0,0,0,.65); font-size: 9px; font-style: normal; font-weight: 900; line-height: 1; }
.talent-compact-icon.has-rate { margin-bottom: 12px; }
.talent-compact-icon.has-rate b { position: absolute; z-index: 2; right: -3px; bottom: -13px; min-width: 34px; padding: 2px 3px; color: #fff; border: 1px solid rgba(0,0,0,.55); border-radius: 7px; background: #c64783; font-size: 8px; line-height: 1; text-align: center; }
.talent-compact-icon.has-rate.is-low { border-color: #e14c42; box-shadow: 0 0 0 1px rgba(225,76,66,.32), 0 4px 10px rgba(0,0,0,.42); }
.talent-compact-icon.has-rate.is-low b { background: #b63b35; }
.talent-icon-empty { margin: 7px 0 0; padding: 12px; color: #8f8678; border: 1px dashed rgba(218,185,116,.15); background: rgba(216,180,93,.025); font-size: 10px; line-height: 1.55; }
.benchmark-lower-grid .top-player-panel,
.benchmark-lower-grid .stat-compare-panel { padding: 18px; }
.benchmark-lower-grid > .stat-compare-panel { order: -1; }
.benchmark-lower-grid .top-player-panel { background: radial-gradient(circle at 0 0, rgba(216,180,93,.09), transparent 30%), #0c0b08; }
.benchmark-lower-grid .top-player-head { display: none; }
.benchmark-lower-grid .top-player-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.benchmark-lower-grid .top-player-list li { min-height: 58px; padding: 8px 12px; border-color: rgba(218,185,116,.16); background: linear-gradient(100deg, rgba(216,180,93,.07), transparent 40%), #14110d; }
.benchmark-lower-grid .top-player-list li:hover { border-color: rgba(216,180,93,.42); background-color: #1a160f; }
.benchmark-lower-grid .top-player-list li:nth-child(-n+3) { border-left: 3px solid #d6ad54; background: linear-gradient(100deg, rgba(166,113,32,.2), transparent 46%), #14110d; }
.benchmark-lower-grid .stat-compare-panel { background: radial-gradient(circle at 100% 0, rgba(73,178,145,.1), transparent 34%), #0c0b08; }
.stat-compare-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat-compare-list > .stat-compare-card { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px; min-height: 118px; padding: 16px; overflow: hidden; border: 1px solid rgba(218,185,116,.18); border-top: 3px solid #d8b45d; background: linear-gradient(145deg, rgba(216,180,93,.13), transparent 56%), #14110d; box-shadow: 0 10px 25px rgba(0,0,0,.18); }
.stat-compare-list > .stat-compare-card::after { position: absolute; right: -22px; bottom: -30px; width: 90px; height: 90px; content: ''; border: 1px solid rgba(216,180,93,.09); border-radius: 50%; box-shadow: 0 0 0 15px rgba(216,180,93,.025); }
.stat-compare-list > .stat-compare-card:nth-child(1) { border-top-color: #df644f; }
.stat-compare-list > .stat-compare-card:nth-child(2) { border-top-color: #46bdae; }
.stat-compare-list > .stat-compare-card:nth-child(3) { border-top-color: #9f65d9; }
.stat-compare-list > .stat-compare-card:nth-child(4) { border-top-color: #d8b45d; }
.stat-compare-card > span { grid-column: 1 / -1; color: #f0dfb5; font-size: 16px; }
.stat-compare-card > strong,
.stat-compare-card > b,
.stat-compare-card > em { display: flex; flex-direction: column; gap: 4px; color: #eee5d8; font-size: 20px; font-style: normal; font-weight: 900; text-align: left; }
.stat-compare-card > strong { color: #62cfa0; font-size: 22px; }
.stat-compare-card > em { color: #d8b45d; }
.stat-compare-card small { color: #8f8678; font-size: 10px; font-weight: 700; text-align: left; }
.stat-compare-difference { display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.stat-compare-difference strong { font-size: 20px; font-weight: 950; }
.stat-compare-difference small { font-size: 10px; }
.stat-compare-difference.is-positive strong,
.stat-compare-difference.is-positive small { color: #62aef7; }
.stat-compare-difference.is-negative strong,
.stat-compare-difference.is-negative small { color: #ef7b6d; }
.stat-compare-difference.is-neutral strong,
.stat-compare-difference.is-neutral small { color: #d8b45d; }

.gear-ranking-review { margin-top: 12px; padding: 16px; border: 1px solid rgba(218,185,116,.24); background: radial-gradient(circle at 100% 0, rgba(72,143,190,.08), transparent 31%), #0b0a07; }
.gear-ranking-heading { align-items: flex-start; }
.gear-ranking-heading > div { min-width: 0; }
.gear-ranking-heading p { max-width: 760px; margin: 5px 0 0; color: #8f8678; font-size: 10px; line-height: 1.55; }
.gear-ranking-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.gear-slot-ranking { min-width: 0; border: 1px solid rgba(218,185,116,.17); background: linear-gradient(120deg, rgba(216,180,93,.055), transparent 46%), #100e0b; }
.gear-slot-ranking > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 39px; padding: 8px 11px; border-bottom: 1px solid rgba(218,185,116,.15); }
.gear-slot-ranking > header strong { color: #ead9af; font-size: 13px; }
.gear-slot-ranking > header span { color: #81796d; font-size: 9px; }
.gear-slot-ranking ol { display: grid; gap: 5px; max-height: 284px; margin: 0; padding: 7px; overflow-y: auto; list-style: none; scrollbar-color: rgba(216,180,93,.55) rgba(255,255,255,.035); scrollbar-width: thin; }
.gear-slot-ranking ol::-webkit-scrollbar { width: 7px; }
.gear-slot-ranking ol::-webkit-scrollbar-track { background: rgba(255,255,255,.035); }
.gear-slot-ranking ol::-webkit-scrollbar-thumb { border: 2px solid #100e0b; border-radius: 5px; background: rgba(216,180,93,.55); }
.gear-ranked-item { position: relative; display: grid; grid-template-columns: 25px 50px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 86px; padding: 8px; border: 1px solid rgba(218,185,116,.11); background: rgba(255,255,255,.012); cursor: help; }
.gear-ranked-item:hover { border-color: rgba(218,185,116,.38); outline: none; background: linear-gradient(90deg, rgba(216,180,93,.085), transparent 62%), rgba(255,255,255,.018); }
.gear-ranked-item.is-first { border-color: rgba(218,185,116,.32); background: linear-gradient(90deg, rgba(216,180,93,.11), transparent 58%), rgba(255,255,255,.014); }
.gear-rank-number { color: #d8b45d; font-size: 15px; font-weight: 950; text-align: center; }
.gear-ranked-icon { display: grid; place-items: center; width: 50px; height: 50px; overflow: hidden; color: #d8b45d; border: 2px solid #7359a1; border-radius: 3px; background: #080705; }
.gear-ranked-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gear-ranked-item.quality-3 .gear-ranked-icon { border-color: #3979cb; }
.gear-ranked-item.quality-4 .gear-ranked-icon { border-color: #9a50cf; }
.gear-ranked-item.quality-5 .gear-ranked-icon { border-color: #e78631; }
.gear-ranked-copy { min-width: 0; }
.gear-ranked-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gear-ranked-name > strong { color: #c697ed; font-size: 15px; line-height: 1.25; }
.quality-3 .gear-ranked-name > strong { color: #6da9f2; }
.quality-5 .gear-ranked-name > strong { color: #f0a356; }
.bis-badge { flex: 0 0 auto; padding: 2px 5px; color: #171005; border: 1px solid #f2d47d; border-radius: 2px; background: linear-gradient(#f2d47d, #c99d3d); box-shadow: 0 0 11px rgba(230,190,85,.23); font-size: 8px; font-weight: 950; letter-spacing: .06em; }
.gear-ranked-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; color: #b9af9e; font-size: 12px; line-height: 1.3; }
.gear-ranked-meta span:first-child { color: #f0cb70; font-weight: 900; }
.gear-source-row { display: flex; align-items: flex-start; gap: 7px; min-width: 0; margin-top: 5px; line-height: 1.35; }
.gear-source-row small { flex: 0 0 auto; padding-top: 1px; color: #9b9285; font-size: 10px; font-weight: 750; }
.gear-source-row strong { min-width: 0; overflow: hidden; color: #86d0bd; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.gear-source-row a { flex: 0 0 auto; margin-left: auto; color: #e2bf67; font-size: 10px; font-weight: 900; text-decoration: none; }
.gear-source-row a:hover { color: #f1d889; }
.gear-item-tooltip { width: 410px; cursor: default; }
.gear-tooltip-rank { display: block; margin-top: 5px; color: #e6c56f; font-size: 13px; }
.gear-tooltip-usage, .gear-tooltip-source, .gear-tooltip-bis { display: grid; gap: 3px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(139,158,185,.18); }
.gear-tooltip-usage strong { color: #f0cb70; font-size: 15px; }
.gear-tooltip-usage span { color: #aaa08f; font-size: 12px; }
.gear-tooltip-source small, .gear-tooltip-bis small { color: #9b9285; font-size: 11px; font-weight: 750; }
.gear-tooltip-source strong { color: #86d0bd; font-size: 14px; line-height: 1.45; }
.gear-tooltip-bis strong { color: #78bdf8; font-size: 13px; line-height: 1.45; }
.gear-item-tooltip .tooltip-set > span { color: #d8c99f; font-size: 12px; }
.gear-item-tooltip .tooltip-effects { display: grid; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(139,158,185,.18); }
.gear-item-tooltip .tooltip-effects span { color: #58d68d; font-size: 13px; line-height: 1.5; }

.character-loading { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; background: rgba(3,3,2,.88); backdrop-filter: blur(8px); transition: opacity .16s, visibility .16s; }
.character-loading.is-visible { visibility: visible; opacity: 1; }
.character-loading-panel { display: grid; justify-items: center; width: min(440px, 100%); padding: 38px 28px; border: 1px solid rgba(218,185,116,.35); background: radial-gradient(circle at 50% 0, rgba(218,185,116,.14), transparent 48%), #0b0906; box-shadow: 0 28px 80px rgba(0,0,0,.6); text-align: center; }
.character-loading-mark { width: 74px; height: 74px; }
.character-loading-mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 14px rgba(218,185,116,.25)); }
.character-loading-spinner { width: 34px; height: 34px; margin: 19px 0; border: 3px solid rgba(218,185,116,.18); border-top-color: #e1bd67; border-radius: 50%; animation: character-loading-spin .8s linear infinite; }
.character-loading-panel strong { color: #f1dfb1; font-size: 21px; }
.character-loading-panel strong > span { color: var(--loading-class-color, #f1dfb1); text-shadow: 0 0 14px color-mix(in srgb, var(--loading-class-color, #f1dfb1) 36%, transparent); }
.character-loading-title { display: grid; gap: 2px; line-height: 1.35; }
.character-loading-title-line { display: block; white-space: nowrap; }
.character-loading-title-line .character-loading-name, .character-loading-title-line #character-loading-name { color: var(--loading-class-color, #f1dfb1); }
.character-loading-panel p { margin: 9px 0 0; color: #b7ab97; font-size: 13px; }
.loading-sentence-list { display: grid; gap: 3px; }
.loading-sentence-list span { display: block; }
.character-loading-panel small { margin-top: 9px; color: #766f64; font-size: 10px; }
@keyframes character-loading-spin { to { transform: rotate(360deg); } }

.site-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 132px; margin-top: 30px; padding: 25px 0; border-top: 1px solid rgba(218,185,116,.3); color: #9f9585; font-size: 13px; }
.site-footer::before { position: absolute; top: -1px; left: 0; width: 150px; height: 2px; content: ''; background: linear-gradient(90deg, #d8b45d, transparent); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-mark { flex: 0 0 auto; width: 48px; height: 48px; }
.footer-mark img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.footer-brand > div { display: grid; gap: 2px; }
.footer-brand strong { color: #ead8aa; font-size: 18px; font-weight: 900; letter-spacing: .13em; }
.footer-brand > div > span { color: #9f9585; font-size: 12px; font-weight: 650; letter-spacing: 0; }
.site-footer > p { max-width: 620px; margin: 0; color: #887f72; font-size: 12px; line-height: 1.65; text-align: right; }

@media (max-width: 900px) {
    .gear-ranking-grid { grid-template-columns: 1fr; }
    .mode-recommendation-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .talent-icon-compare { grid-template-columns: 1fr; }
    .talent-tree-layout { grid-template-columns: repeat(3, minmax(320px, 1fr)); }
    .selected-talent-columns { grid-template-columns: 1fr; }
    .selected-talent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benchmark-lower-grid { grid-template-columns: 1fr; }
    .benchmark-lower-grid .top-player-list { grid-template-columns: 1fr; }
    .raid-top-player-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .gear-ranking-review { padding: 11px; }
    .mode-recommendation-groups { grid-template-columns: 1fr; }
    .gear-ranking-heading { flex-direction: column; gap: 6px; }
    .gear-ranked-item { grid-template-columns: 22px 44px minmax(0, 1fr); gap: 7px; min-height: 80px; padding: 6px; }
    .gear-ranked-icon { width: 44px; height: 44px; }
    .gear-ranked-name > strong { font-size: 13px; }
    .loading-sentence-list span { display: inline; }
    .loading-sentence-list span + span::before { content: ' '; }
    .talent-icon-tree-rows { overflow-x: auto; }
    .talent-compact-icon { width: 36px; height: 36px; }
    .talent-icon-cloud { grid-template-columns: repeat(10, 36px); grid-auto-columns: 36px; }
    .talent-icon-tree-row { grid-template-columns: 25px minmax(0, 1fr); min-height: 50px; }
    .talent-tree-layout { grid-template-columns: 1fr; overflow: visible; }
    .talent-tree-board,
    .talent-tree-column.tree-hero .talent-tree-board { grid-template-columns: repeat(var(--talent-columns), minmax(36px, 1fr)); grid-template-rows: repeat(var(--talent-rows), 58px); min-height: var(--talent-board-height); padding-inline: 5px; }
    .talent-tree-node,
    .talent-tree-column.tree-hero .talent-tree-node { width: 40px; height: 40px; }
    .selected-talent-grid { grid-template-columns: 1fr; }
    .stat-compare-list { grid-template-columns: 1fr; }
    .stat-compare-list > .stat-compare-card { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 112px; }
    .site-footer { align-items: flex-start; flex-direction: column; gap: 17px; min-height: 150px; padding: 25px 0 30px; }
    .site-footer > p { text-align: left; }
}

/* Home trust and navigation refinement */
.header-brand-context { display: flex; align-items: center; gap: 20px; min-width: 0; }
.header-brand-context .global-season-chip { display: grid; gap: 1px; padding: 2px 0 2px 18px; color: #e5c97f; border: 0; border-left: 1px solid rgba(218,185,116,.28); background: transparent; line-height: 1.25; text-align: left; }
.header-brand-context .global-season-chip small { color: #746d62; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.header-brand-context .global-season-chip strong { color: #d9bd75; font-size: 11px; font-weight: 900; letter-spacing: .02em; }

.home-page .workspace { padding: 52px 0 34px; }
.home-page .intro-copy { min-height: 548px; padding-top: 58px; padding-bottom: 54px; box-shadow: 0 30px 80px rgba(0,0,0,.48), inset 0 0 0 1px rgba(244,213,143,.025); }
.home-page .intro-copy::after { background: linear-gradient(90deg, rgba(7,7,6,.995) 0%, rgba(7,7,6,.965) 34%, rgba(7,7,6,.7) 54%, rgba(7,7,6,.1) 79%, rgba(7,7,6,.22) 100%); }
.hero-kicker { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }
.hero-kicker .eyebrow { margin: 0; }
.hero-kicker > span { display: inline-flex; align-items: center; gap: 7px; color: #9e9587; font-size: 10px; font-weight: 750; }
.hero-kicker > span i { width: 6px; height: 6px; border-radius: 50%; background: #73b67b; box-shadow: 0 0 10px rgba(115,182,123,.5); }
.hero-game-title { display: inline-flex; align-items: center; margin-bottom: 13px; padding: 6px 10px; color: #ead594; border: 1px solid rgba(218,185,116,.33); background: rgba(113,82,31,.14); font-size: 11px; font-weight: 850; letter-spacing: .025em; }
.hero-trust-strip { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(218,185,116,.15); color: #aaa091; font-size: 11px; font-weight: 700; }
.hero-trust-strip span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust-strip b { color: #85bf88; font-size: 10px; }

.privacy-assurance { position: relative; display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.48fr); gap: 38px; padding: 38px 42px; overflow: hidden; border: 1px solid rgba(114,184,173,.27); background: linear-gradient(115deg, rgba(21,24,20,.98), rgba(11,17,16,.96)); box-shadow: 0 20px 54px rgba(0,0,0,.28); }
.privacy-assurance::before { position: absolute; top: 0; left: 0; width: 190px; height: 2px; content: ''; background: linear-gradient(90deg, #72b8ad, transparent); }
.privacy-assurance-intro { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; }
.privacy-shield { display: grid; place-items: center; width: 46px; height: 52px; color: #b8ded6; border: 1px solid rgba(114,184,173,.42); background: rgba(114,184,173,.08); font-size: 25px; line-height: 1; }
.privacy-assurance .eyebrow { margin-bottom: 7px; color: #81c5ba; }
.privacy-assurance h2 { margin-bottom: 10px; color: #eee5d7; font-size: clamp(23px, 2.1vw, 31px); line-height: 1.3; letter-spacing: -.035em; word-break: keep-all; }
.privacy-assurance-intro p:last-child { margin: 0; color: #9c9488; font-size: 12px; line-height: 1.65; word-break: keep-all; }
.privacy-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.privacy-points article { min-width: 0; padding: 18px 17px; border: 1px solid rgba(218,185,116,.13); background: rgba(8,8,6,.48); }
.privacy-points article > span { display: block; margin-bottom: 14px; color: #7fc0b6; font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.privacy-points strong { display: block; margin-bottom: 7px; color: #e7dccb; font-size: 13px; }
.privacy-points p { margin: 0; color: #938b7f; font-size: 11px; line-height: 1.65; word-break: keep-all; }

.home-page .process { grid-template-columns: .7fr 1.3fr; gap: 48px; margin-top: 18px; padding: 46px 42px; border: 1px solid rgba(218,185,116,.19); background: linear-gradient(130deg, rgba(20,17,13,.92), rgba(10,9,7,.88)); }
.home-page .process::before { align-self: stretch; width: 1px; content: ''; background: linear-gradient(180deg, rgba(218,185,116,.42), transparent); grid-column: 2; grid-row: 1; margin-left: -25px; }
.home-page .process > div { grid-column: 1; grid-row: 1; }
.home-page .process > ol { grid-column: 2; grid-row: 1; }
.home-page .process h2 { margin-bottom: 0; color: #eee5d7; }
.home-page .process li { padding: 15px 0; }
.home-page .process li:first-child { padding-top: 2px; }
.home-page .process li > span { color: #e0be6c; border-color: rgba(218,185,116,.32); }
.home-page .process strong { color: #e8ddca; }
.home-page .process li p { color: #8f877b; line-height: 1.6; }
.home-page .site-footer > p { max-width: 700px; color: #938a7d; }

@media (max-width: 1000px) {
    .privacy-assurance { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 900px) {
    .home-page .workspace { padding-top: 42px; }
    .home-page .process { grid-template-columns: 1fr; gap: 24px; }
    .home-page .process::before { display: none; }
    .home-page .process > div, .home-page .process > ol { grid-column: 1; grid-row: auto; }
}

@media (max-width: 700px) {
    .header-brand-context { gap: 10px; }
    .header-brand-context .global-season-chip { padding-left: 10px; }
    .header-brand-context .global-season-chip small { display: none; }
    .privacy-points { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .header-brand-context .brand { font-size: 15px; }
    .header-brand-context .brand-mark { width: 34px; height: 34px; }
    .header-brand-context .brand-copy small { font-size: 7px; letter-spacing: .05em; }
    .header-brand-context .global-season-chip strong { font-size: 9px; }
    .home-page .workspace { padding: 32px 0 24px; }
    .home-page .intro-copy { min-height: 650px; padding: 30px 20px 245px; }
    .hero-kicker { align-items: flex-start; flex-direction: column; gap: 6px; }
    .hero-trust-strip { gap: 7px 13px; }
    .privacy-assurance { padding: 28px 20px; }
    .privacy-assurance-intro { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
    .privacy-shield { width: 38px; height: 44px; font-size: 20px; }
    .privacy-assurance h2 br { display: none; }
    .home-page .process { padding: 31px 20px; }
}

@media (max-width: 480px) {
    .header-brand-context .global-season-chip { display: none; }
}

/* Public guides and policy pages */
.public-nav { display: flex; align-items: center; justify-content: center; gap: 4px; margin-left: auto; }
.public-nav a { padding: 8px 9px; color: #aaa091; font-size: 10px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: color .16s, background .16s; }
.public-nav a:hover, .public-nav a[aria-current="page"] { color: #ead18b; background: rgba(218,185,116,.08); }
.public-page { min-height: 100vh; background: radial-gradient(circle at 50% 0, rgba(72,53,23,.18), transparent 36%), #070706; }
.guide-shell { width: min(1500px, calc(100% - 64px)); margin: 0 auto; }
.breadcrumbs { display: flex; align-items: center; gap: 9px; padding: 29px 0 17px; color: #756e63; font-size: 11px; }
.breadcrumbs a { color: #bca767; text-decoration: none; }
.guide-article { overflow: hidden; border: 1px solid rgba(218,185,116,.2); background: linear-gradient(145deg, rgba(19,17,13,.98), rgba(9,9,7,.99)); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.guide-hero { position: relative; padding: 58px 64px 54px; overflow: hidden; border-bottom: 1px solid rgba(218,185,116,.18); background: radial-gradient(circle at 100% 0, rgba(113,82,31,.22), transparent 45%); }
.guide-hero::before { position: absolute; top: 0; left: 0; width: 210px; height: 2px; content: ''; background: linear-gradient(90deg, #d8b45d, transparent); }
.guide-hero .eyebrow { margin: 0 0 14px; }
.guide-hero h1 { max-width: 1180px; margin: 0; color: #f2eadc; font-size: clamp(35px, 5vw, 58px); line-height: 1.13; letter-spacing: -.055em; }
.guide-hero > p:not(.eyebrow) { max-width: 1240px; margin: 22px 0 0; color: #b1a898; font-size: 16px; line-height: 1.8; word-break: keep-all; }
.guide-hero small { display: block; margin-top: 19px; color: #766f65; font-size: 11px; }
.guide-content { padding: 14px 64px 24px; }
.guide-content > section { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 39px 0; border-bottom: 1px solid rgba(218,185,116,.13); }
.guide-content > section:last-child { border-bottom: 0; }
.guide-number { padding-top: 3px; color: #cba954; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.guide-content h2 { margin: 0 0 17px; color: #e9dfce; font-size: clamp(21px, 2.5vw, 29px); line-height: 1.35; letter-spacing: -.035em; }
.guide-content p { max-width: 1260px; margin: 0; color: #a39a8d; font-size: 14px; line-height: 1.9; word-break: keep-all; }
.guide-content p + p { margin-top: 13px; }
.guide-summary { margin: 0 64px 60px; padding: 25px 28px; border: 1px solid rgba(114,184,173,.26); border-left: 3px solid #72b8ad; background: rgba(22,42,38,.25); }
.guide-summary strong { display: block; margin-bottom: 8px; color: #9bd3c9; font-size: 12px; letter-spacing: .04em; }
.guide-summary p { margin: 0; color: #c1d5cf; font-size: 14px; line-height: 1.75; }
.guide-related { display: grid; grid-template-columns: .55fr 1.45fr; gap: 45px; margin-top: 18px; padding: 34px 38px; border: 1px solid rgba(218,185,116,.16); background: rgba(14,13,10,.78); }
.guide-related .eyebrow { margin: 0 0 5px; }
.guide-related h2 { margin: 0; color: #e7dcc8; font-size: 22px; }
.guide-related > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.guide-related a { display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 9px 12px; color: #b8ae9e; border: 1px solid rgba(218,185,116,.13); background: rgba(7,7,5,.54); font-size: 11px; font-weight: 750; text-decoration: none; }
.guide-related a span { color: #d7b65f; }
.home-footer-copy nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 15px; }
.home-footer-copy nav a { color: #a99d89; font-size: 11px; font-weight: 700; text-decoration: none; }
.home-footer-copy nav a:hover { color: #dfc679; }
.home-footer-copy { display: grid; justify-items: end; gap: 8px; max-width: 700px; }
.home-footer-copy p { margin: 0; color: #938a7d; font-size: 12px; line-height: 1.65; text-align: right; }

@media (max-width: 1120px) {
    .home-public-nav { display: none; }
}

@media (max-width: 700px) {
    .guide-shell { width: min(100% - 24px, 1500px); }
    .guide-hero { padding: 40px 23px 37px; }
    .guide-hero > p:not(.eyebrow) { font-size: 14px; }
    .guide-content { padding: 5px 23px 15px; }
    .guide-content > section { grid-template-columns: 1fr; gap: 8px; padding: 31px 0; }
    .guide-summary { margin: 0 23px 36px; padding: 21px; }
    .guide-related { grid-template-columns: 1fr; gap: 20px; padding: 27px 22px; }
    .guide-related > div:last-child { grid-template-columns: 1fr; }
    .home-footer-copy nav { justify-content: flex-start; }
    .home-footer-copy { justify-items: start; }
    .home-footer-copy p { text-align: left; }
}