:root {
    --bg: #07100f;
    --panel: #0d1816;
    --panel2: #111e1b;
    --line: rgba(195, 215, 198, .12);
    --text: #eff5ef;
    --muted: #8e9f96;
    --gold: #d6b76f;
    --green: #4fd09b;
    --teal: #3cbf9e;
    --serif: 'Marcellus', Georgia, serif;
    --sans: 'Inter', system-ui, sans-serif;
    color-scheme: dark
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: radial-gradient(circle at 60% -20%, #17342b 0, transparent 38%), var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh
}

.ambient {
    position: fixed;
    filter: blur(110px);
    border-radius: 50%;
    pointer-events: none;
    opacity: .14;
    z-index: -1
}

.ambient-one {
    width: 420px;
    height: 420px;
    background: #23d5a4;
    top: 20%;
    left: -250px
}

.ambient-two {
    width: 500px;
    height: 500px;
    background: #a78bfa;
    right: -350px;
    bottom: 0
}

.topbar {
    height: 78px;
    padding: 0 max(28px, calc((100vw - 1440px)/2));
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: rgba(5, 13, 12, .84);
    backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 20
}

.brand {
    color: var(--text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px
}

.brand-mark {
    width: 38px;
    height: 44px;
    display: block;
    flex: 0 0 auto;
    color: #0b1512;
}

.brand-mark text {
    fill: currentColor;
    font: 23px var(--serif)
}

.brand strong {
    font: 15px var(--serif);
    letter-spacing: .08em;
    display: block
}

.brand small {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em
}

.desktop-nav {
    display: flex;
    align-self: stretch;
    margin: auto
}

.desktop-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 0 24px;
    display: grid;
    place-items: center;
    position: relative
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--text)
}

.desktop-nav a.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 38px;
    height: 2px;
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold);
    top: 25px;
}

.header-actions {
    min-width: 300px;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    gap: 10px
}

.season {
    font-size: 11px;
    color: #b2beb8;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 20px
}

.season i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4fda9e;
    box-shadow: 0 0 8px #4fda9e;
    margin-right: 7px
}

.icon-btn,
.avatar {
    border: 1px solid var(--line);
    color: #c9d4cd;
    background: #101b19;
    border-radius: 9px;
    width: 36px;
    height: 36px;
    cursor: pointer
}

.icon-btn:hover,
.icon-btn.active {
    border-color: rgba(214, 183, 111, .55);
    color: var(--gold)
}

.avatar {
    border-radius: 50%;
    font-size: 11px;
    background: linear-gradient(145deg, #3c5a4e, #12211d);
    color: #e5cc8b
}

main {
    max-width: 1440px;
    margin: auto;
    padding: 0 28px 80px
}

.hero {
    min-height: 390px;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 70px;
    align-items: center;
    padding: 64px 3% 50px;
    position: relative;
    border-bottom: 1px solid var(--line)
}

.eyebrow,
.dialog-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .19em;
    margin-bottom: 12px
}

.hero h1 {
    font: clamp(42px, 5vw, 70px)/1.08 var(--serif);
    margin: 0 0 22px;
    letter-spacing: -.025em
}

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

.hero-copy>p {
    max-width: 590px;
    color: #9eaea5;
    font-size: 15px;
    line-height: 1.8;
    margin: 0
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px
}

.primary-btn,
.ghost-btn,
.wide-btn {
    border-radius: 7px;
    padding: 13px 18px;
    font: 600 12px var(--sans);
    cursor: pointer;
    text-decoration: none
}

.primary-btn {
    border: 1px solid #d9bb72;
    background: linear-gradient(180deg, #d6b96f, #a9853e);
    color: #101612;
    box-shadow: 0 8px 30px rgba(198, 158, 65, .15)
}

.primary-btn span {
    margin-left: 20px
}

.ghost-btn,
.wide-btn {
    background: rgba(255, 255, 255, .025);
    color: #9baba2;
    border: 1px solid var(--line)
}

.ghost-btn strong {
    color: #dce5df
}

.weekly-card,
.panel,
.resource-card {
    background: linear-gradient(145deg, rgba(17, 31, 27, .96), rgba(9, 18, 16, .96));
    border: 1px solid var(--line);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .18)
}

.weekly-card {
    border-radius: 14px;
    padding: 25px;
    position: relative;
    overflow: hidden
}

.weekly-card:before {
    content: '';
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(231, 197, 116, .25);
    pointer-events: none
}

.card-heading,
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.card-heading span {
    font-size: 9px;
    color: var(--gold);
    letter-spacing: .14em
}

.card-heading h2 {
    font: 18px var(--serif);
    margin: 6px 0
}

.card-heading .week-pill {
    color: #95a39b;
    background: #14231f;
    padding: 7px 9px;
    border-radius: 5px
}

.vault-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 25px 0 14px
}

.vault-orb {
    width: 54px;
    height: 54px;
    border: 1px solid #bba261;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #e6cc88;
    font: 16px var(--serif);
    box-shadow: inset 0 0 20px rgba(215, 184, 107, .12)
}

.vault-progress strong {
    display: block;
    font-size: 13px
}

.vault-progress small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 5px
}

.progress-track {
    height: 4px;
    border-radius: 5px;
    background: #24312d
}

.progress-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8f7338, #e0c77d);
    border-radius: 5px
}

.vault-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px
}

.vault-stats div {
    padding-left: 12px;
    border-left: 1px solid var(--line)
}

.vault-stats b {
    display: block;
    font: 18px var(--serif)
}

.vault-stats span {
    display: block;
    color: var(--muted);
    font-size: 9px;
    margin-top: 4px
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 28px 0 32px;
    background: rgba(13, 24, 22, .75)
}

.metrics article {
    display: flex;
    gap: 15px;
    padding: 22px 24px;
    border-right: 1px solid var(--line)
}

.metrics article:last-child {
    border: 0
}

.metric-icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 9px;
    display: grid;
    place-items: center
}

.violet {
    color: #bca5ff;
    background: #2a2440
}

.gold {
    color: #e8c56e;
    background: #342d1b
}

.blue {
    color: #71c5ea;
    background: #152e39
}

.green {
    color: #5bdda2;
    background: #173328
}

.metrics small {
    font-size: 8px;
    color: var(--muted);
    letter-spacing: .13em
}

.metrics strong {
    display: block;
    font: 23px var(--serif);
    margin: 4px 0
}

.metrics strong i {
    font: 9px var(--sans);
    color: var(--green);
    background: #183328;
    padding: 3px 5px;
    border-radius: 9px
}

.metrics p {
    font-size: 9px;
    color: var(--muted);
    margin: 0
}

.up {
    color: var(--green)
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px
}

.roster-needs { margin:0 0 22px; padding:24px }
.roster-needs-grid { display:grid; grid-template-columns:1.05fr 1fr .9fr; gap:12px; margin-top:18px }
.needs-card { min-width:0; padding:16px; border:1px solid rgba(133,154,255,.15); border-radius:10px; background:rgba(8,11,43,.34) }
.needs-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px }
.needs-card-head>span { color:#7684b6; font-size:7px; font-weight:700; letter-spacing:.12em }
.needs-card-head>b { color:#aebaff; font-size:8px; font-weight:600 }
.role-balance { display:grid; gap:9px }
.role-balance-row { display:grid; grid-template-columns:70px minmax(60px,1fr) 20px 30px; align-items:center; gap:8px }
.role-balance-row>div { overflow:hidden; height:5px; border-radius:999px; background:rgba(120,140,210,.12) }
.role-balance-row>div i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#667cff,#9a78ff); box-shadow:0 0 10px rgba(119,139,255,.35) }
.role-balance-row>b { color:#edf1ff; font-size:10px; text-align:right }
.role-balance-row>small { color:#7e8bb9; font-size:8px; text-align:right }
.coverage-list { display:flex; flex-wrap:wrap; gap:7px }
.coverage-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid rgba(133,154,255,.15); border-radius:6px; color:#99a5cf; font-size:8px }
.coverage-chip i { display:grid; place-items:center; width:14px; height:14px; border-radius:50%; font-size:8px; font-style:normal }
.coverage-chip.covered i { background:rgba(70,203,157,.15); color:#76ddb5 }
.coverage-chip.missing { border-color:rgba(235,119,146,.2); color:#d79aaa }
.coverage-chip.missing i { background:rgba(235,85,121,.13); color:#ef8da5 }
.recruitment-card>strong { display:block; color:#eef1ff; font:18px var(--serif) }
.recruitment-card>p { min-height:30px; margin:7px 0 13px; color:#8995c1; font-size:9px; line-height:1.55 }
.class-summary { display:flex; gap:8px }
.class-summary span { flex:1; padding:7px; border-radius:6px; background:rgba(22,28,82,.5); color:#8491c0; font-size:7px; text-align:center }
.class-summary b { display:block; margin-bottom:2px; color:#dce4ff; font-size:12px }
.tooltip-anchor { position:relative; cursor:help }
.tooltip-anchor::after { content:attr(data-tooltip); position:absolute; z-index:60; left:50%; bottom:calc(100% + 9px); width:max-content; max-width:230px; padding:8px 10px; border:1px solid rgba(137,157,255,.3); border-radius:7px; background:#121747; box-shadow:0 10px 28px rgba(1,3,24,.48); color:#dce4ff; font:8px/1.5 var(--sans); text-align:left; white-space:normal; pointer-events:none; opacity:0; transform:translate(-50%,5px); transition:opacity .16s ease,transform .16s ease }
.tooltip-anchor::before { content:""; position:absolute; z-index:61; left:50%; bottom:calc(100% + 4px); width:7px; height:7px; border-right:1px solid rgba(137,157,255,.3); border-bottom:1px solid rgba(137,157,255,.3); background:#121747; pointer-events:none; opacity:0; transform:translateX(-50%) rotate(45deg); transition:opacity .16s ease }
.tooltip-anchor:hover::after,.tooltip-anchor:focus-visible::after,.tooltip-anchor:hover::before,.tooltip-anchor:focus-visible::before { opacity:1 }
.tooltip-anchor:hover::after,.tooltip-anchor:focus-visible::after { transform:translate(-50%,0) }
.raid-guests { margin-top:14px; padding-top:15px; border-top:1px solid rgba(133,154,255,.14) }
.raid-guests-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px }
.raid-guests-head>div>span { display:block; color:#7684b6; font-size:7px; font-weight:700; letter-spacing:.12em }
.raid-guests-head small { display:block; margin-top:3px; color:#6875a4; font-size:8px }
.raid-guests-head>b { color:#aebaff; font-size:8px }
.raid-guests-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px }
.raid-guest { display:grid; grid-template-columns:34px minmax(0,1fr) auto 45px 38px; align-items:center; gap:9px; min-width:0; padding:10px 12px; border:1px solid rgba(133,154,255,.15); border-radius:8px; background:rgba(8,11,43,.3); color:inherit; text-decoration:none; transition:border-color .2s ease,background-color .2s ease }
.raid-guest:hover { border-color:rgba(130,156,255,.4); background:rgba(20,26,76,.48) }
.raid-guest.inactive { opacity:.62 }
.raid-guest .portrait { width:31px; height:31px }
.raid-guest-identity { min-width:0 }
.raid-guest-identity>span { display:flex; align-items:center; gap:6px }
.raid-guest-identity strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap }
.raid-guest-identity i { padding:2px 4px; border:1px solid rgba(142,162,255,.24); border-radius:4px; color:#9aa8d8; font-size:6px; font-style:normal }
.raid-guest-identity small { display:block; overflow:hidden; margin-top:3px; color:#7784b3; font-size:7px; text-overflow:ellipsis; white-space:nowrap }
.raid-guest-stat { text-align:center }
.raid-guest-stat b,.raid-guest-stat small { display:block }
.raid-guest-stat b { color:#dce4ff; font-size:9px }
.raid-guest-stat small { margin-top:2px; color:#7180b1; font-size:6px }

.panel {
    border-radius: 13px;
    padding: 24px
}

.section-head h2 {
    font: 24px var(--serif);
    margin: 0
}

.view-actions {
    display: flex;
    gap: 5px
}

.toolbar {
    display: grid;
    grid-template-columns: 1fr 170px 190px;
    gap: 9px;
    margin: 24px 0 12px
}

.search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #091310;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 0 12px;
    color: var(--muted)
}

.search input,
select {
    width: 100%;
    background: transparent;
    border: 0;
    color: #dce4df;
    font: 11px var(--sans);
    outline: none
}

.search input {
    padding: 11px 0
}

select {
    background: #0a1412;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 0 10px
}

option {
    background: #101c19
}

.table-wrap {
    overflow-x: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 780px
}

th {
    text-align: left;
    color: #72827a;
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 10px 9px;
    border-bottom: 1px solid var(--line)
}

td {
    padding: 12px 9px;
    border-bottom: 1px solid rgba(195, 215, 198, .07);
    font-size: 11px;
    color: #c9d3cd
}

tbody tr {
    cursor: pointer;
    transition: .2s
}

tbody tr:hover {
    background: rgba(255, 255, 255, .025)
}

.player {
    display: flex;
    align-items: center;
    gap: 10px
}

.portrait {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--class);
    background: color-mix(in srgb, var(--class) 15%, #101816);
    border: 1px solid color-mix(in srgb, var(--class) 45%, transparent);
    font-size: 9px;
    font-weight: 700
}

.portrait.large {
    width: 58px;
    height: 58px;
    font-size: 14px
}

.portrait { overflow:hidden }
.portrait img { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover }

.player strong,
.player small {
    display: block
}

.player small {
    font-size: 9px;
    color: #77877f;
    margin-top: 4px
}

.role {
    font-size: 9px;
    padding: 5px 7px;
    border-radius: 5px
}

.role.tank {
    background: #18313b;
    color: #78c8e4
}

.role.heal {
    background: #173429;
    color: #69d9a1
}

.role.dps {
    background: #352825;
    color: #e49b7e
}

.key-level {
    font-size: 10px
}

.no-key {
    color: #d39572;
    font-size: 9px;
    background: #2c211c;
    padding: 5px 7px;
    border-radius: 5px
}

.no-key i {
    font-style: normal;
    border: 1px solid #ba785b;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: inline-grid;
    place-items: center;
    margin-right: 4px
}

.activity-cell>span {
    display: block;
    width: 60px;
    height: 3px;
    background: #26332f;
    border-radius: 4px;
    margin-bottom: 5px
}

.activity-cell i {
    display: block;
    height: 100%;
    background: #4ecb98;
    border-radius: 4px
}

.activity-cell small {
    font-size: 8px;
    color: #74827a
}

.row-more {
    border: 0;
    background: none;
    color: #77877f;
    font-size: 21px;
    cursor: pointer
}

.empty {
    text-align: center;
    color: var(--muted);
    padding: 34px
}

.table-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 17px;
    color: var(--muted);
    font-size: 9px
}

.table-footer button {
    border: 0;
    background: none;
    color: var(--gold);
    font: 600 10px var(--sans);
    cursor: pointer
}

.table-footer button span {
    margin-left: 7px
}

.info {
    width: 20px;
    height: 20px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 10px
}

.aside-intro {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
    margin: 10px 0 20px
}

.recommendation {
    display: grid;
    grid-template-columns: 42px 1fr auto 36px;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line)
}

.dungeon-icon {
    width: 38px;
    height: 38px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--dungeon);
    background: color-mix(in srgb, var(--dungeon) 14%, #111);
    border: 1px solid color-mix(in srgb, var(--dungeon) 35%, transparent);
    font: 10px var(--serif)
}

.recommendation strong,
.recommendation small {
    display: block
}

.recommendation strong {
    font-size: 10px
}

.recommendation small {
    font-size: 8px;
    color: var(--muted);
    margin-top: 4px
}

.gain {
    text-align: right;
    line-height: 10px;
}

.gain b {
    display: block;
    color: #62d6a1;
    font-size: 11px
}

.gain span {
    font-size: 7px;
    color: var(--muted)
}

.target {
    font: 12px var(--serif);
    color: #ddc27a;
    text-align: right
}

.wide-btn {
    width: 100%;
    margin-top: 20px;
    padding: 11px
}

.resource-section {
    margin-top: 54px
}

.resource-section>.section-head {
    align-items: flex-end;
    margin-bottom: 18px
}

.resource-tabs {
    display: flex;
    background: #0b1513;
    border: 1px solid var(--line);
    padding: 3px;
    border-radius: 7px
}

.resource-tabs button {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 8px 18px;
    border-radius: 5px;
    font: 600 10px var(--sans);
    cursor: pointer
}

.resource-tabs button.active {
    background: #22312d;
    color: #e8eee9
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.resource-card {
    border-radius: 11px;
    padding: 20px;
    display: flex;
    gap: 15px
}

.resource-icon {
    width: 41px;
    height: 41px;
    flex: none;
    border-radius: 8px;
    background: #25352f;
    color: #d9be78;
    display: grid;
    place-items: center;
    font: 10px var(--serif)
}

.resource-card span {
    font-size: 7px;
    color: var(--gold);
    letter-spacing: .13em
}

.resource-card h3 {
    font: 15px var(--serif);
    margin: 5px 0
}

.resource-card p {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
    min-height: 28px
}

.resource-action {
    border: 0;
    background: none;
    color: #c7d0ca;
    font: 600 9px var(--sans);
    padding: 0;
    cursor: pointer
}

.resource-action b {
    color: var(--gold);
    margin-left: 5px
}

.resource-link {
    display:inline-flex;
    align-items:center;
    text-decoration:none
}

footer {
    border-top: 1px solid var(--line);
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0 max(28px, calc((100vw - 1384px)/2));
    color: #6f7d76;
    font-size: 9px
}

footer span {
    font: 12px var(--serif);
    color: #a0aaa4
}

footer a {
    margin-left: auto;
    color: #9eac9f;
    text-decoration: none
}

dialog {
    width: min(520px, calc(100% - 32px));
    border: 1px solid rgba(214, 183, 111, .3);
    border-radius: 14px;
    background: #101c19;
    color: var(--text);
    padding: 30px;
    box-shadow: 0 30px 100px #000
}

dialog::backdrop {
    background: rgba(1, 7, 6, .78);
    backdrop-filter: blur(5px)
}

.dialog-close {
    position: absolute;
    right: 15px;
    top: 12px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 24px;
    cursor: pointer
}

.dialog-player {
    display: flex;
    align-items: center;
    gap: 14px
}

.dialog-player h2 {
    margin: 0;
    font: 25px var(--serif)
}

.dialog-player p,
.dialog-note {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7
}

.dialog-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 20px 0
}

.dialog-stats div {
    background: #0a1412;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    height: 60px;
}

.dialog-stats b,
.dialog-stats span {
    display: block
}

.dialog-stats b {
    font: 20px var(--serif)
}

.dialog-stats span {
    font-size: 8px;
    color: var(--muted);
    margin-top: 0px
}

.source-list {
    display: grid;
    gap: 8px
}

.source-list span {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    font-size: 10px
}

.source-list b {
    float: right;
    color: #e4b56e
}

pre {
    white-space: pre-wrap;
    background: #07110f;
    border: 1px solid var(--line);
    padding: 15px;
    border-radius: 7px;
    color: #bfe8d7;
    font-size: 11px;
    line-height: 1.6
}

.copy-btn {
    display: inline-block;
    margin-top: 8px
}

.toast {
    position: fixed;
    right: 25px;
    bottom: 25px;
    background: #19372d;
    border: 1px solid #397a61;
    color: #c7f5e1;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 11px;
    transform: translateY(30px);
    opacity: 0;
    transition: .25s;
    z-index: 30
}

.toast.show {
    transform: none;
    opacity: 1
}

.spinning {
    animation: spin .7s linear
}

#refreshButton.cooldown {
    opacity:.58;
    cursor:not-allowed
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:1050px) {
    .desktop-nav {
        display: none
    }

    .header-actions {
        min-width: auto;
        margin-left: auto
    }

    .brand {
        min-width: auto
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .content-grid {
        grid-template-columns: 1fr
    }

    .recommendations {
        order: -1
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr)
    }

    .metrics article:nth-child(2) {
        border-right: 0
    }

    .metrics article:nth-child(-n+2) {
        border-bottom: 1px solid var(--line)
    }
}

@media(max-width:720px) {
    .topbar {
        height: 68px;
        padding: 0 16px
    }

    .brand small,
    .season {
        display: none
    }

    .header-actions {
        gap: 6px
    }

    main {
        padding: 0 14px 60px
    }

    .hero {
        padding: 44px 4px 35px;
        min-height: auto
    }

    .hero h1 {
        font-size: 40px
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column
    }

    .metrics {
        grid-template-columns: 1fr 1fr
    }

    .metrics article {
        padding: 16px 12px;
        gap: 10px
    }

    .metric-icon {
        width: 32px;
        height: 32px
    }

    .metrics strong {
        font-size: 19px
    }

    .panel {
        padding: 17px
    }

    .toolbar {
        grid-template-columns: 1fr 1fr
    }

    .search {
        grid-column: 1/-1
    }

    .resource-grid {
        grid-template-columns: 1fr
    }

    .resource-section>.section-head {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column
    }

    footer {
        padding: 24px 18px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px
    }

    footer a {
        margin: 0
    }

    .weekly-card {
        padding: 20px
    }

    .vault-stats {
        gap: 4px
    }
}

@media(max-width:430px) {
    .brand strong {
        font-size: 12px
    }

    .avatar {
        display: none
    }

    .hero h1 {
        font-size: 35px
    }

    .metrics {
        grid-template-columns: 1fr
    }

    .metrics article {
        border-right: 0;
        border-bottom: 1px solid var(--line) !important
    }

    .toolbar {
        grid-template-columns: 1fr
    }

    .search {
        grid-column: auto
    }

    .vault-stats span {
        font-size: 8px
    }

    .card-heading {
        gap: 10px
    }
}

/* Final compact-card overrides (kept last to supersede table breakpoints). */
.compact-view .table-wrap { overflow:visible }
.compact-view .table-wrap table { display:block; width:100%; min-width:0 }
.compact-view thead { display:none }
.compact-view tbody { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:10px }
.compact-view tbody tr { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"player role" "ilvl score"; gap:13px 10px; min-width:0; padding:14px; border:1px solid rgba(133,154,255,.16); border-radius:10px; background:linear-gradient(145deg,rgba(20,25,73,.72),rgba(8,11,43,.72)); cursor:pointer; transition:border-color .2s ease,transform .2s ease }
.compact-view tbody tr:hover { border-color:rgba(130,156,255,.42); transform:translateY(-1px) }
.compact-view tbody td { display:block; width:auto!important; min-width:0; padding:0; border:0; text-align:left!important }
.compact-view tbody td:first-child { grid-area:player }
.compact-view tbody td:nth-child(2) { display:flex; grid-area:role; align-items:flex-start; justify-content:flex-end }
.compact-view tbody td:nth-child(3) { grid-area:ilvl }
.compact-view tbody td:nth-child(4) { grid-area:score }
.compact-view tbody td:nth-child(5),.compact-view tbody td:nth-child(6),.compact-view tbody td:last-child { display:none }
.compact-view tbody td:nth-child(3)::before,.compact-view tbody td:nth-child(4)::before { display:block; margin-bottom:3px; color:#7583b5; font-size:7px; font-weight:700; letter-spacing:.1em }
.compact-view tbody td:nth-child(3)::before { content:"ILVL" }
.compact-view tbody td:nth-child(4)::before { content:"SCORE MM+" }
.compact-view tbody td:nth-child(3)>b,.compact-view tbody td:nth-child(4)>b { color:#edf1ff; font-size:15px }
.compact-view .player small { display:none }
.compact-view .player>span:last-child { min-width:0 }
.compact-view .player strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

@media(max-width:720px) {
    .compact-view tbody { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media(max-width:480px) {
    .compact-view tbody { grid-template-columns:minmax(0,1fr) }
}

@media(max-width:720px) {
    .raid-guests-list { grid-template-columns:minmax(0,1fr) }
    .raid-guest { grid-template-columns:34px minmax(0,1fr) auto 42px }
    .raid-guest-stat:last-child { display:none }
}

/* Compact roster: card grid instead of a shortened table. */
.compact-view .table-wrap {
    overflow: visible
}

.compact-view table {
    display: block;
    width: 100%;
    min-width: 0
}

.compact-view thead {
    display: none
}

.compact-view tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 10px
}

.compact-view tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "player role" "ilvl score";
    gap: 13px 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(133,154,255,.16);
    border-radius: 10px;
    background: linear-gradient(145deg,rgba(20,25,73,.72),rgba(8,11,43,.72));
    cursor: pointer;
    transition: border-color .2s ease,transform .2s ease,background-color .2s ease
}

.compact-view tbody tr:hover {
    border-color: rgba(130,156,255,.42);
    transform: translateY(-1px)
}

.compact-view tbody td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left !important
}

.compact-view tbody td:first-child { grid-area:player }
.compact-view tbody td:nth-child(2) { display:flex; grid-area:role; align-items:flex-start; justify-content:flex-end }
.compact-view tbody td:nth-child(3) { grid-area:ilvl }
.compact-view tbody td:nth-child(4) { grid-area:score }
.compact-view tbody td:nth-child(5),
.compact-view tbody td:nth-child(6),
.compact-view tbody td:last-child { display:none }
.compact-view tbody td:nth-child(3)::before,
.compact-view tbody td:nth-child(4)::before { display:block; margin-bottom:3px; color:#7583b5; font-size:7px; font-weight:700; letter-spacing:.1em }
.compact-view tbody td:nth-child(3)::before { content:"ILVL" }
.compact-view tbody td:nth-child(4)::before { content:"SCORE MM+" }
.compact-view tbody td:nth-child(3)>b,
.compact-view tbody td:nth-child(4)>b { color:#edf1ff; font-size:15px }
.compact-view .player small { display:none }
.compact-view .player>span:last-child { min-width:0 }
.compact-view .player strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.recommendation-player { min-width:0 }
.recommendation-name { display:flex; align-items:center; gap:6px; min-width:0 }
.recommendation-name strong { overflow:hidden; min-width:0; text-overflow:ellipsis; white-space:nowrap }
.recommendation-name .role { flex:0 0 auto; padding:3px 5px; font-size:7px }

@media(max-width:720px) {
    .compact-view tbody {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:480px) {
    .compact-view tbody {
        grid-template-columns: minmax(0,1fr)
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        animation: none !important;
        transition: none !important
    }
}

/* Midnight art direction: cosmic navy, arcane blue, void violet and silver. */
:root {
    --bg: #05071d;
    --panel: #0b0d2d;
    --panel2: #111440;
    --line: rgba(143, 160, 255, .18);
    --text: #f4f5ff;
    --muted: #9299c8;
    --gold: #a7b9ff;
    --green: #6e8cff;
    --teal: #536cff
}

body {
    background: radial-gradient(circle at 50% -8%, rgba(54, 94, 255, .34), transparent 30%), radial-gradient(circle at 88% 28%, rgba(140, 62, 255, .16), transparent 28%), linear-gradient(180deg, #05071d, #090a26 52%, #050619)
}

.ambient-one {
    background: #296dff;
    opacity: .22
}

.ambient-two {
    background: #9e45ff;
    opacity: .2
}

.topbar {
    background: rgba(4, 6, 27, .86);
    border-color: rgba(123, 147, 255, .2)
}

.brand-mark {
    color: #07102d;
    filter: drop-shadow(0 0 12px rgba(80, 123, 255, .55))
}

.desktop-nav a.active:after {
    background: #7ca8ff;
    box-shadow: 0 0 18px #5684ff
}

.season i {
    background: #758eff;
    box-shadow: 0 0 12px #6185ff
}

.icon-btn {
    background: #10133d;
    border-color: rgba(132, 151, 255, .22);
    color: #cbd3ff
}

.icon-btn:hover,
.icon-btn.active {
    border-color: #708cff;
    color: #dfe5ff;
    /*box-shadow: 0 0 18px rgba(77, 111, 255, .2)*/
}

.hero:before {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(103, 130, 255, .12);
    border-radius: 50%;
    right: 24%;
    top: -150px;
    box-shadow: 0 0 0 28px rgba(109, 70, 255, .025), 0 0 0 62px rgba(71, 121, 255, .02);
    pointer-events: none
}


.hero h1 em {
    color: #b9c7ff;
    text-shadow: 0 0 24px rgba(91, 124, 255, .42)
}

.weekly-card,
.panel,
.resource-card {
    background: linear-gradient(145deg, rgba(17, 20, 62, .96), rgba(7, 9, 34, .98));
    border-color: rgba(128, 148, 255, .18);
    box-shadow: 0 22px 70px rgba(0, 0, 20, .3)
}

.weekly-card:before {
    border-color: rgba(126, 157, 255, .4)
}

.vault-orb {
    border-color: #789cff;
    color: #dbe3ff;
    box-shadow: inset 0 0 25px rgba(85, 111, 255, .18), 0 0 18px rgba(74, 105, 255, .12)
}

.progress-track {
    background: rgba(120,140,210,.12);
}

.progress-track span {
    background: linear-gradient(90deg, #6047d7, #65a1ff);
}

.primary-btn {
    border-color: #88a9ff;
    background: linear-gradient(180deg, #8eb2ff, #5a6fe8);
    color: #07102b;
    box-shadow: 0 8px 34px rgba(72, 108, 255, .28);
    display: inline-flex;
    margin-right: 20px;
}

.ghost-btn,
.wide-btn {
    background: rgba(91, 110, 255, .06)
}

.metrics {
    background: rgba(11, 13, 45, .78)
}

.violet {
    color: #c4aeff;
    background: #2b2154
}

.gold {
    color: #b9ceff;
    background: #1d2a58
}

.blue {
    color: #7ec7ff;
    background: #142957
}

.green {
    color: #9aa8ff;
    background: #242653
}

.up {
    color: #8fa9ff
}

.search,
select {
    background: #080a2a
}

.role.tank {
    background: #17285b;
    color: #8fc8ff
}

.role.heal {
    background: #205429;
    color: #a4ffef
}

.role.dps {
    background: #311d53;
    color: #d69cff
}

.no-key {
    color: #c4b7ff;
    background: #251c4a
}

.activity-cell i {
    background: linear-gradient(90deg, #644ee6, #70a9ff)
}

.resource-icon {
    background: #202557;
    color: #c7d4ff
}

.resource-tabs {
    background: #080a29
}

.resource-tabs button.active {
    background: #293064;
    color: #f0f2ff
}

dialog {
    background: #0c0e32;
    border-color: rgba(116, 143, 255, .4);
    overflow: hidden;
}

pre {
    background: #060820;
    color: #cbd8ff
}

.source-list b {
    color: #9db4ff
}

.toast {
    background: #171c56;
    border-color: #6078e8;
    color: #e4e8ff
}

/* Softer contrast and one coherent blue-violet family. */
body {
    background: radial-gradient(circle at 50% -8%, rgba(75, 113, 255, .38), transparent 32%), radial-gradient(circle at 90% 30%, rgba(128, 72, 236, .18), transparent 31%), linear-gradient(180deg, #0b0d2c, #10133c 52%, #090b28)
}

.topbar {
    background: rgba(10, 12, 43, .88)
}

.weekly-card,
.panel,
.resource-card {
    background: linear-gradient(145deg, rgba(24, 28, 79, .96), rgba(13, 16, 53, .98))
}

.metrics {
    background: rgba(20, 23, 67, .86)
}

.search,
select {
    background: #10143c
}

.player small,
.activity-cell small,
th {
    color: #9ca5d3
}

td {
    color: #d9ddf5
}

.ghost-btn,
.wide-btn {
    color: #b9c1e7;
    background: rgba(108, 126, 255, .08)
}

dialog {
    background: linear-gradient(150deg, #1b2161, #111542);
    border-color: rgba(143, 164, 255, .55);
    box-shadow: 0 30px 100px rgba(1, 2, 20, .72), inset 0 1px rgba(255, 255, 255, .08)
}

dialog .dialog-player h2 {
    color: #f7f8ff;
    text-shadow: 0 0 18px rgba(112, 139, 255, .36)
}

dialog .dialog-player p {
    color: #b8c2ee;
    line-height: 1;
    padding: 0;
    margin: 5px 0;
}

.dialog-eyebrow {
    color: #b8c9ff
}

.dialog-stats div {
    background: rgba(8, 11, 43, .58);
    border-color: rgba(143, 162, 255, .24)
}

.dialog-stats b {
    color: #f5f6ff
}

.dialog-stats span {
    color: #aeb7e0
}

dialog h3 {
    color: #dfe5ff
}

.dialog-note {
    color: #b4bcdf
}

.compact-view .table-wrap table {
    min-width: 620px
}

.compact-view th:nth-child(5),
.compact-view td:nth-child(5),
.compact-view th:nth-child(6),
.compact-view td:nth-child(6) {
    display: none
}

.compact-view td {
    padding-top: 7px;
    padding-bottom: 7px
}

.compact-view .portrait {
    width: 28px;
    height: 28px
}

.compact-view .player small {
    display: none
}

.compact-view table {
    font-size: 10px
}

.api-loader {
    position: fixed;
    left: 50%;
    top: 88px;
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(133, 158, 255, .45);
    border-radius: 999px;
    background: rgba(17, 21, 67, .96);
    box-shadow: 0 12px 40px rgba(0, 0, 30, .38);
    color: #dce3ff;
    font-size: 10px
}

.api-loader[hidden] {
    display: none
}

.api-loader span {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(180, 197, 255, .25);
    border-top-color: #99b4ff;
    border-radius: 50%;
    animation: spin .7s linear infinite
}

.api-loader strong {
    font-weight: 600
}

select {
    color: #e4e8ff;
    background-color: #171b50;
    border-color: rgba(137, 157, 255, .28);
    cursor: pointer
}

select:hover,
select:focus {
    background-color: #202661;
    border-color: #718eff
}

select option {
    color: #edf0ff;
    background: #171b50;
    padding: 8px
}

.data-pending[title] {
    cursor: help;
    text-decoration: underline dotted rgba(180, 192, 235, .35);
    text-underline-offset: 3px
}

.card-heading .week-pill {
    background: transparent;
    border: 1px solid rgba(138, 158, 255, .25);
    color: #aeb9df
}

.guild-rank {
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid rgba(141, 158, 255, .22);
    border-radius: 4px;
    color: #98a5d2;
    font-size: 7px;
    vertical-align: 1px;
    margin-top: 3px;
}

.progression-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.recommendation-section .aside-intro {
    margin-bottom: 10px
}

.recommendation-section .recommendation {
    padding: 10px 0
}

.recommendation-link { border-radius:8px; cursor:pointer; transition:background .2s ease,transform .2s ease }
.recommendation-link:hover,.recommendation-link:focus-visible { background:rgba(122,147,255,.08); outline:none; transform:translateX(3px) }

.character-profile { max-width:100% }
.character-profile .character-async { min-height:150px }
.profile-loading { display:grid; place-items:center; min-height:180px; color:var(--muted); text-align:center }
.profile-loading i { width:28px; height:28px; margin-bottom:12px; border:2px solid rgba(125,150,255,.2); border-top-color:#7da5ff; border-radius:50%; animation:spin .8s linear infinite }
.profile-loading strong,.profile-loading small { display:block }
.profile-loading small { margin-top:5px; font-size:9px }
.profile-section { margin:22px 0 }
.profile-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px }
.profile-section-head h3 { margin:0; font:16px var(--serif) }
.profile-section-head>span { color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.profile-runs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px }
.profile-run { display:grid; grid-template-columns:40px minmax(0,1fr) 38px 58px; min-height:60px; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:rgba(8,11,43,.32); text-decoration:none }
.profile-dungeon-icon { display:block; width:40px; height:40px; border:1px solid rgba(145,164,255,.25); border-radius:8px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.24) }
.profile-dungeon-placeholder { background:rgba(126,157,255,.08) }
.profile-run:hover { border-color:rgba(126,157,255,.42) }
.profile-run span,.profile-run strong,.profile-run small { display:block; min-width:0 }
.profile-run strong,.profile-run small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.profile-run strong { font-size:10px }
.profile-run small { margin-top:2px; color:var(--muted); font-size:7px }
.profile-run .profile-run-level { color:#a8c5ff; font:17px var(--serif); text-align:center }
.profile-run-main { align-self:stretch; display:flex!important; min-width:0; flex-direction:column; justify-content:center }
.profile-run-times { display:flex!important; align-items:center; gap:8px; margin-top:6px!important; font-size:8px!important; white-space:nowrap }
.profile-run-times span { display:inline-flex!important; align-items:baseline; gap:3px; color:#8492c4 }
.profile-run-times b { color:#dce4ff; font:700 9px var(--sans); letter-spacing:.01em }
.profile-run em { color:var(--muted); font-size:8px; font-style:normal }
.profile-run .run-result { display:flex; width:58px; align-items:center; flex-direction:column; gap:5px }
.profile-run .run-result em { font-weight:700; white-space:nowrap }
.profile-run .run-result i { font-style:normal }
.profile-run .run-timing { box-sizing:border-box; min-width:50px; padding:3px 6px; border-radius:999px; font-weight:700; text-align:center; white-space:nowrap; font-size: 10px; }
.profile-run .run-timing.timed { color:#82deb8; background:rgba(57,180,131,.12) }
.profile-run .run-timing.depleted { color:#ffadad; background:rgba(219,84,105,.12) }
.profile-run-empty { opacity:.55 }
.profile-raids { display:grid; gap:7px }
.profile-raid { display:grid; grid-template-columns:minmax(100px,1fr) repeat(3,52px); align-items:center; gap:7px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:rgba(8,11,43,.32) }
.profile-raid>strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap }
.profile-raid>span { text-align:center }
.profile-raid small,.profile-raid b { display:block }
.profile-raid small { color:var(--muted); font-size:7px }
.profile-raid b { margin-top:2px; font-size:10px }
.profile-recent { display:grid; gap:1px }
.profile-recent-run { border-bottom:1px solid var(--line) }
.profile-recent-run summary { display:grid; grid-template-columns:32px minmax(110px,1fr) auto 18px; align-items:center; gap:9px; padding:7px 3px; color:var(--text); font-size:9px; cursor:pointer; list-style:none }
.profile-recent-run summary::-webkit-details-marker { display:none }
.recent-dungeon-icon { display:block; width:32px; height:32px; border:1px solid rgba(145,164,255,.25); border-radius:7px; object-fit:cover; box-shadow:0 3px 9px rgba(0,0,0,.22) }
.recent-dungeon-placeholder { background:rgba(126,157,255,.08) }
.profile-recent-run summary>strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.profile-recent-run summary>strong b { color:#a8c5ff }
.profile-recent-run summary span { color:var(--muted) }
.profile-recent-run[open] summary .row-more { transform:rotate(90deg) }
.profile-recent .recent-run-meta { display:flex; align-items:center; gap:8px }
.recent-run-meta i { padding:3px 6px; border-radius:999px; font-size:7px; font-style:normal; font-weight:700 }
.recent-run-meta i.timed { color:#82deb8; background:rgba(57,180,131,.12) }
.recent-run-meta i.depleted { color:#ffadad; background:rgba(219,84,105,.12) }
.recent-run-meta b { color:#a8c5ff; font-size:8px }
.recent-run-meta small { color:var(--muted); font-size:8px }
.profile-run-performance { margin:0 3px 10px 41px; padding:12px; border:1px solid rgba(126,157,255,.14); border-radius:9px; background:rgba(7,10,36,.46) }
.performance-character { display:flex; align-items:center; gap:9px; margin-bottom:10px }
.performance-character img { width:34px; height:34px; border:1px solid color-mix(in srgb,var(--class) 55%,transparent); border-radius:50%; object-fit:cover }
.performance-character strong,.performance-character small { display:block }.performance-character strong { color:var(--class); font-size:11px }.performance-character small { margin-top:2px; color:var(--muted); font-size:8px }
.performance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px }
.performance-grid>div { min-width:0; padding:8px; border-radius:7px; background:rgba(111,126,220,.07) }
.performance-grid small,.performance-grid b,.performance-grid em { display:block }.performance-grid small { color:var(--muted); font-size:7px; text-transform:uppercase }.performance-grid b { margin-top:4px; font-size:12px }.performance-grid em { margin-top:4px; color:var(--muted); font-size:7px; font-style:normal; line-height:1.4 }
.performance-grid .performance-wide { grid-column:span 4 }
.performance-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px }.performance-actions .secondary-btn { padding:7px 10px; font-size:8px; text-decoration:none }.performance-actions .disabled { cursor:not-allowed; opacity:.45 }
@media(max-width:600px){.profile-recent-run summary{grid-template-columns:30px minmax(90px,1fr) 18px}.recent-dungeon-icon{width:30px;height:30px}.profile-recent .recent-run-meta{grid-column:2;justify-content:flex-start;flex-wrap:wrap}.profile-recent-run summary>.row-more{grid-column:3;grid-row:1}.profile-run-performance{margin-left:0}.performance-grid{grid-template-columns:repeat(2,1fr)}.performance-grid .performance-wide{grid-column:span 2}}

@media(min-width:601px){dialog:has(.character-profile){width:min(720px,calc(100% - 32px))}}
@media(max-width:600px){.profile-runs{grid-template-columns:1fr}.profile-raid{grid-template-columns:minmax(80px,1fr) repeat(3,42px)}dialog{padding:22px}}

/* Keep long character sheets inside the viewport and scroll their content. */
#detailDialog {
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow: hidden
}

#dialogContent {
    box-sizing: border-box;
    max-height: calc(100dvh - 32px);
    padding: 30px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(126, 157, 255, .65) rgba(8, 11, 43, .35);
    scrollbar-width: thin
}

#dialogContent::-webkit-scrollbar { width: 8px }
#dialogContent::-webkit-scrollbar-track { background: rgba(8, 11, 43, .35) }
#dialogContent::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(126, 157, 255, .65); background-clip: padding-box }

#detailDialog .dialog-close {
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(11, 14, 50, .9);
    box-shadow: 0 4px 18px rgba(2, 3, 22, .4)
}

@media(max-width:600px) {
    #detailDialog { max-height: calc(100dvh - 16px) }
    #dialogContent { max-height: calc(100dvh - 16px); padding: 24px 20px }
}

.compact-loader { min-height:100px }
.comparison-launch { display:grid; justify-items:start; gap:12px; padding:16px; border:1px solid var(--line); border-radius:9px; background:rgba(8,11,43,.28) }
.comparison-launch p { margin:0; color:var(--muted); font-size:9px; line-height:1.6 }
.top-build-summary { display:grid; grid-template-columns:130px minmax(0,1fr); gap:8px; margin-bottom:10px }
.top-build-summary>div { padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(8,11,43,.32) }
.top-build-summary b,.top-build-summary span,.top-build-summary small { display:block }
.top-build-summary b { color:#a8c5ff; font:19px var(--serif) }
.top-build-summary span { margin-top:4px; color:#dce4ff; font-size:9px; line-height:1.4 }
.top-build-summary small { margin-top:4px; color:var(--muted); font-size:7px }
.top-build-summary .match { border-color:rgba(83,211,163,.35) }
.top-build-summary .difference { border-color:rgba(255,174,89,.32) }
.top-gear-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px }
.top-gear-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; padding:8px; border:1px solid var(--line); border-radius:8px; background:rgba(8,11,43,.25) }
.top-gear-item.equipped { border-color:rgba(83,211,163,.3); background:rgba(43,135,107,.08) }
.top-gear-icon { display:grid; place-items:center; width:34px; height:34px; overflow:hidden; border-radius:6px; background:#080b2b; color:var(--muted) }
.top-gear-icon img { width:100%; height:100%; object-fit:cover }
.top-gear-item>span:nth-child(2) { min-width:0 }
.top-gear-item small,.top-gear-item strong { display:block }
.top-gear-item>span small { color:var(--muted); font-size:7px; text-transform:uppercase }
.top-gear-item strong { overflow:hidden; margin-top:3px; color:#e4e9ff; font-size:9px; text-overflow:ellipsis; white-space:nowrap }
.top-gear-item>b { color:#a8c5ff; font-size:11px; text-align:right }
.top-gear-item>b small { margin-top:2px; color:var(--muted); font-size:6px; font-weight:400; text-transform:uppercase }
.top-build-note { margin:10px 0 0; color:var(--muted); font-size:8px; line-height:1.55 }
.class-codex-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; margin:22px 0 15px; padding:14px; border:1px solid rgba(126,157,255,.28); border-radius:10px; background:linear-gradient(145deg,rgba(40,54,128,.34),rgba(16,20,65,.42)) }
.class-codex-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:10px; color:#eaf0ff; background:linear-gradient(145deg,#678fff,#6846c7); font:15px var(--serif); box-shadow:0 0 18px rgba(91,124,255,.3) }
.class-codex-card strong { color:#e6ebff; font-size:11px }
.class-codex-card p { margin:5px 0 0; color:var(--muted); font-size:8px; line-height:1.5 }
.class-codex-card a { padding:8px 10px; border:1px solid rgba(139,165,255,.35); border-radius:7px; color:#cbd8ff; font-size:8px; font-weight:700; text-decoration:none; white-space:nowrap }
.class-codex-card a:hover { border-color:#82a5ff; color:#fff }
@media(max-width:600px){.top-build-summary,.top-gear-list{grid-template-columns:1fr}.class-codex-card{grid-template-columns:40px minmax(0,1fr)}.class-codex-card a{grid-column:1/-1;text-align:center}}

.recommendation-section .dungeon-icon {
    width: 34px;
    height: 34px
}

.recommendation-section .empty-state {
    padding: 14px 0;
    color: var(--muted);
    font-size: 9px
}

.recommendation-section .empty-state p {
    margin: 5px 0 0;
    line-height: 1.5
}

/* Wandering Void orb — isolated so it can be removed without touching the theme. */
.void-orb {
    --orb-size: 72px;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--orb-size);
    height: var(--orb-size);
    z-index: 12;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
    filter: drop-shadow(0 0 10px rgba(66, 89, 255, .9)) drop-shadow(0 0 24px rgba(102, 45, 255, .58));
    opacity: .9
}

.void-orb-lens {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 38%, rgba(63, 93, 255, .1) 62%, transparent 74%);
    backdrop-filter: blur(1.6px) saturate(1.65) contrast(1.08) hue-rotate(8deg);
    box-shadow: inset 0 0 9px rgba(194, 215, 255, .8), inset 0 0 19px #315eff, 0 0 0 2px rgba(54, 83, 255, .72), 0 0 14px 5px rgba(68, 50, 255, .56);
    animation: void-pulse 3.8s ease-in-out infinite
}

.void-orb-core {
    position: absolute;
    inset: 15px;
    border-radius: 48% 52% 46% 54%;
    background: radial-gradient(circle at 46% 44%, #dff8ff 0 7%, #5be0ff 8% 17%, #3756ff 31%, #17065d 61%, #050219 100%);
    box-shadow: inset 7px -5px 11px rgba(3, 0, 40, .9), inset -6px 4px 10px rgba(70, 223, 255, .65), 0 0 12px #3d7cff;
    animation: void-core 5.5s linear infinite
}

.void-orb-core:before,
.void-orb-core:after {
    content: '';
    position: absolute;
    inset: 21%;
    background: linear-gradient(135deg, #e9fbff, #58caff 48%, #6b53ff);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: blur(.4px);
    opacity: .9
}

.void-orb-core:after {
    inset: 31%;
    transform: rotate(45deg);
    opacity: .7;
    filter: blur(1px)
}

.void-orb-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    left: -8px;
    top: 18px;
    border-radius: 50%;
    background: #dffcff;
    box-shadow: 18px -19px 0 #8beaff, 83px 4px 0 #b4a5ff, 74px 68px 0 #6397ff, -6px 56px 0 #a489ff, 90px 36px 0 rgba(191, 230, 255, .8);
    animation: void-sparks 2.6s ease-in-out infinite alternate
}

@keyframes void-pulse {
    50% {
        transform: scale(1.08);
        opacity: .78
    }
}

@keyframes void-core {
    to {
        transform: rotate(360deg)
    }
}

@keyframes void-sparks {
    to {
        transform: rotate(24deg) scale(1.12);
        opacity: .35
    }
}

@media(max-width:720px) {
    .void-orb {
        --orb-size: 56px;
        opacity: .7
    }

    .void-orb-core {
        inset: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .void-orb {
        display: none
    }
}

/* Rounder core and layered arcane lighting. */
.void-orb:before,
.void-orb:after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 50%
}

.void-orb:before {
    inset: -24px;
    background: conic-gradient(from 20deg, transparent 0 12%, rgba(86, 162, 255, .42) 14%, transparent 18% 41%, rgba(154, 102, 255, .35) 44%, transparent 48% 73%, rgba(112, 226, 255, .3) 76%, transparent 80%);
    filter: blur(8px);
    animation: void-light-spin 9s linear infinite
}

.void-orb:after {
    inset: -34px;
    background: radial-gradient(circle, rgba(83, 129, 255, .2) 0 20%, rgba(81, 71, 255, .12) 42%, transparent 68%);
    filter: blur(9px);
    animation: void-aura 4.2s ease-in-out infinite
}

.void-orb-core {
    border-radius: 50%;
    background: radial-gradient(circle at 38% 31%, #f3ffff 0 4%, #8af3ff 5% 10%, #398aff 20%, #3446ed 36%, #16075d 64%, #030116 100%);
    box-shadow: inset 8px 8px 14px rgba(151, 244, 255, .62), inset -9px -8px 15px rgba(3, 0, 37, .96), inset 0 0 7px 3px rgba(85, 79, 255, .8), 0 0 8px 2px #72dcff, 0 0 18px 7px rgba(50, 87, 255, .85), 0 0 32px 12px rgba(107, 46, 255, .38)
}

.void-orb-core:before {
    filter: blur(.2px) drop-shadow(0 0 4px #bff9ff);
    opacity: 1
}

.void-orb-core:after {
    filter: blur(.7px) drop-shadow(0 0 6px #796dff);
    opacity: .82
}

@keyframes void-light-spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes void-aura {
    50% {
        transform: scale(1.16);
        opacity: .55
    }
}

.void-orb-canvas-wrap {
    opacity: .94;
    filter: none
}

.void-orb-canvas-wrap:before,
.void-orb-canvas-wrap:after {
    display: none
}

.void-orb-canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 156px;
    height: 156px;
    max-width: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 0 9px rgba(72, 104, 255, .55))
}

@media(max-width:720px) {
    .void-orb-canvas {
        width: 124px;
        height: 124px
    }
}


.guild-rank.rank-9 {
    border-color: rgba(84, 203, 164, .28);
    color: #83d7bb
}

.guild-rank.rank-0,
.guild-rank.rank-1 {
    border-color: rgba(207, 180, 255, .35);
    color: #cdb7ff
}

.guild-rank.rank-2,
.guild-rank.rank-5 {
    border-color: rgba(255, 178, 105, .3);
    color: #efba87
}

.raid-progress {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(137, 157, 255, .18)
}

.raid-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px
}

.raid-progress-head>span {
    color: #aeb9df;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em
}

.raid-progress-head small {
    max-width: 58%;
    overflow: hidden;
    color: #7f8dbf;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.raid-difficulties {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.raid-difficulties>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid rgba(133, 154, 255, .16);
    border-radius: 7px;
    background: rgba(8, 11, 43, .34)
}

.raid-difficulties span {
    color: #8794c5;
    font-size: 8px;
    font-weight: 700
}

.raid-difficulties b {
    color: #f2f5ff;
    font-size: 14px
}

.raid-difficulties>div:nth-child(1) b { color: #9ed6ff }
.raid-difficulties>div:nth-child(2) b { color: #c5a8ff }
.raid-difficulties>div:nth-child(3) b { color: #ff8eb8 }

.addon-instruction {
    display: grid;
    gap: 5px;
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid rgba(84, 203, 164, .3);
    border-radius: 8px;
    background: rgba(31, 112, 92, .16);
    color: #c8e9df;
    font-size: 10px;
    line-height: 1.55
}

.addon-instruction strong {
    color: #83d7bb;
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase
}

.profile-import {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 150px;
    max-height: 240px;
    margin: 14px 0;
    padding: 13px 18px 13px 13px;
    overflow-x: hidden;
    overflow-y: auto;
    resize: vertical;
    border: 1px solid rgba(133, 154, 255, .22);
    border-radius: 8px;
    outline: none;
    background: rgba(5, 8, 31, .72);
    color: #aeb9df;
    font: 9px/1.55 monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.raid-progression-list { display: grid; gap: 6px }
.raid-progression-row { display: grid; grid-template-columns:minmax(62px,1fr) repeat(3,46px); align-items:center; gap:6px; padding:7px 9px; border:1px solid rgba(133,154,255,.14); border-radius:7px; background:rgba(8,11,43,.3) }
.raid-progression-row>strong { overflow:hidden; color:#dfe5ff; font-size:9px; text-overflow:ellipsis; white-space:nowrap }
.raid-progression-row>span { display:grid; grid-template-columns:1fr; text-align:center }
.raid-progression-row small { color:#7f8dbf; font-size:7px; font-weight:700 }
.raid-progression-row b { color:#eef2ff; font-size:10px }
.raid-progression-row span:nth-child(2) b { color:#9ed6ff }
.raid-progression-row span:nth-child(3) b { color:#c5a8ff }
.raid-progression-row span:nth-child(4) b { color:#ff8eb8 }
.raid-progression-empty { padding:10px 0; color:#7f8dbf; font-size:9px }

.season-selector { width:auto; max-width:165px; padding:7px 28px 7px 10px; border-radius:999px; font-size:8px; font-weight:600 }
.header-season-selector { min-width:145px; border-color:rgba(120,146,255,.3); background-color:rgba(19,25,74,.92) }
.guild-runs-section { margin:28px 0; padding:24px }
.guild-raids-section { margin:28px 0; padding:24px }
.guild-raids-list { display:grid; gap:8px; margin-top:18px }
.guild-raid { overflow:hidden; border:1px solid rgba(133,154,255,.16); border-radius:9px; background:rgba(8,11,43,.34) }
.guild-raid>summary { display:grid; grid-template-columns:minmax(170px,1fr) auto 24px; align-items:center; gap:14px; min-height:58px; padding:10px 15px; cursor:pointer; list-style:none }
.guild-raid>summary::-webkit-details-marker { display:none }
.guild-raid>summary div { min-width:0 }.guild-raid>summary strong,.guild-raid>summary small { display:block }.guild-raid>summary strong { overflow:hidden; color:#edf1ff; font-size:12px; text-overflow:ellipsis; white-space:nowrap }.guild-raid>summary small { margin-top:4px; color:#8d9ac7; font-size:10px }.guild-raid>summary>span { color:#a8b5df; font-size:9px }.guild-raid>summary .row-more { display:grid; place-items:center; justify-self:end; width:24px; height:24px; border:1px solid rgba(133,154,255,.2); border-radius:6px; transition:transform .2s ease }.guild-raid[open]>summary .row-more { transform:rotate(90deg) }
.raid-boss-list { display:grid; gap:1px; padding:0 15px 14px }
.raid-boss { border-top:1px solid rgba(133,154,255,.09) }.raid-boss>summary::-webkit-details-marker { display:none }
.raid-boss-row { display:grid; grid-template-columns:38px minmax(130px,1fr) auto; align-items:center; gap:11px; min-height:56px; padding:8px 9px; color:var(--text); cursor:pointer; list-style:none }
.raid-boss-icon { display:block; width:38px; height:38px; border:1px solid rgba(145,164,255,.25); border-radius:8px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.24) }
.raid-boss-row:hover { background:rgba(113,131,232,.07) }.raid-boss-row strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap }.raid-boss-row small { color:var(--muted); font-size:8px; text-align:right }
.raid-boss-state { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; font-size:8px }.raid-boss-state.kill { color:#82deb8; background:rgba(57,180,131,.13) }.raid-boss-state.try { color:#d3b1ff; background:rgba(153,94,224,.14) }
.raid-boss-row strong { font-size:11px }.raid-boss-meta { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:210px }.raid-boss-meta .row-more { display:grid; place-items:center; width:22px; height:22px; border:1px solid rgba(133,154,255,.18); border-radius:6px; color:#9eade0; font-size:15px; transition:transform .2s ease }.raid-boss[open] .raid-boss-meta .row-more { transform:rotate(90deg) }
.raid-difficulty { min-width:24px; color:#aebcf0; font-size:9px; font-weight:700; text-align:right }.raid-boss-result { padding:4px 8px; border-radius:999px; font-size:8px; font-weight:700 }.raid-boss-result.kill { color:#82deb8; background:rgba(57,180,131,.12) }.raid-boss-result.try { color:#d3b1ff; background:rgba(153,94,224,.12) }.raid-boss-row small { min-width:38px; font-size:9px }
.raid-fight-detail { padding:2px 10px 12px 41px }.raid-fight-player { display:grid; grid-template-columns:minmax(150px,1fr) 82px repeat(3,70px); align-items:center; gap:10px; padding:8px 6px; border-bottom:1px solid rgba(133,154,255,.09) }.raid-fight-player>strong { display:flex; align-items:center; gap:8px; color:#e6ebff; font-size:10px }.raid-fight-player>strong small { display:block; margin-top:2px; color:#7f8dbf; font-size:8px; font-weight:400 }.raid-fight-player>b { color:#c4cff2; font-size:10px; text-align:center }.raid-fight-player>.role { justify-self:center }.raid-fight-player .has-death { color:#ff9fae }.raid-fight-player-head { color:#7180b1; font-size:8px; font-weight:700; text-transform:uppercase }.raid-fight-player-head>span:not(:first-child) { text-align:center }.raid-class-dot { display:inline-block; flex:0 0 auto; width:10px; height:10px; border:2px solid color-mix(in srgb,var(--class) 70%,#fff); border-radius:50%; background:var(--class); box-shadow:0 0 8px color-mix(in srgb,var(--class) 45%,transparent) }
.raid-player-class-icon { display:block; flex:0 0 auto; width:30px; height:30px; border:1px solid color-mix(in srgb,var(--class) 55%,transparent); border-radius:7px; object-fit:cover; box-shadow:0 3px 9px rgba(0,0,0,.22) }
.profile-name-button { display:block; min-width:0; padding:0; border:0; background:none; font:inherit; font-weight:700; text-align:left; cursor:pointer }.profile-name-button:hover { filter:brightness(1.2); text-decoration:underline;text-underline-offset:2px }.profile-name-button small { pointer-events:none }
.profile-latest-raid { margin-top:18px; padding-top:14px; border-top:1px solid var(--line) }.profile-subhead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px }.profile-subhead strong { font:13px var(--serif) }.profile-subhead span { color:var(--muted); font-size:8px }.latest-raid-title { display:inline-block; margin-bottom:8px; color:#b7c8ff; font-size:9px; font-weight:700; text-decoration:none }.profile-latest-raid .raid-boss-list { padding:0 }.profile-raid-empty { margin-top:14px }
.run-combat-value.loading { color:#7584b5; animation:combat-pulse 1s ease-in-out infinite alternate }@keyframes combat-pulse{to{opacity:.35}}
.run-combat-value.loading::after { content:''; display:inline-block; width:9px; height:9px; margin-left:5px; vertical-align:-1px; border:1px solid rgba(145,170,255,.3); border-top-color:#91aaff; border-radius:50%; animation:spin .75s linear infinite }
.guild-runs-list { display:grid; gap:8px; margin-top:18px }
.guild-run { overflow:hidden; border:1px solid rgba(133,154,255,.16); border-radius:9px; background:rgba(8,11,43,.34) }
.guild-run summary { display:grid; grid-template-columns:40px 36px minmax(150px,1fr) 70px 64px 54px 18px; align-items:center; gap:11px; padding:10px 14px; cursor:pointer; list-style:none }
.guild-run-dungeon-icon { display:block; width:36px; height:36px; border:1px solid rgba(145,164,255,.25); border-radius:8px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.24) }
.guild-run-dungeon-placeholder { background:rgba(126,157,255,.08) }
.guild-run summary::-webkit-details-marker { display:none }
.guild-run summary>div { min-width:0 }
.guild-run summary strong { display:block; overflow:hidden; color:#edf1ff; font-size:11px; text-overflow:ellipsis; white-space:nowrap }
.guild-run summary small { display:block; margin-top:3px; color:#7f8dbf; font-size:8px }
.guild-run summary>span:not(.run-level):not(.run-status) { text-align:center }
.guild-run summary>span>b { display:block; color:#dce4ff; font-size:10px }
.guild-run .run-more, .guild-raid .row-more { display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid rgba(133,154,255,.2); border-radius:6px; background:rgba(21,28,81,.62); color:#9eade0; font-size:17px; line-height:1; transition:transform .2s ease }
.guild-run[open] .run-more { transform:rotate(90deg) }
.run-level { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:linear-gradient(145deg,#3447a3,#171d62); color:#dce5ff; font-size:11px; font-weight:700 }
.run-status { padding:5px 7px; border-radius:999px; text-align:center; font-size:8px; font-weight:700 }
.run-status.timed { background:rgba(52,190,139,.14); color:#78deb8 }
.run-status.depleted { background:rgba(229,91,123,.13); color:#f09ab0 }
.guild-run-detail { padding:0 14px 13px; border-top:1px solid rgba(133,154,255,.12) }
.run-player { display:grid; grid-template-columns:minmax(150px,1fr) 82px repeat(3,62px); align-items:center; gap:10px; padding:8px 5px; border-bottom:1px solid rgba(133,154,255,.09) }
.run-player strong { color:#dfe5ff; font-size:9px }
.run-player strong small { display:block; margin-top:2px; color:#7887ba; font-size:7px; font-weight:400 }
.run-player>b,.run-player>span:not(:first-child) { color:#bdc8ee; font-size:9px; text-align:center }
.run-player-head { padding-top:12px; color:#7180b1; font-size:7px; font-weight:700; text-transform:uppercase }
.run-player-name { display:flex; align-items:center; gap:8px }
.run-class-dot { display:grid; flex:0 0 27px; place-items:center; width:27px; height:27px; border:1px solid color-mix(in srgb,var(--class) 72%,white); border-radius:7px; background:color-mix(in srgb,var(--class) 18%,#0b1035); color:var(--class); font-size:7px; box-shadow:0 0 12px color-mix(in srgb,var(--class) 22%,transparent) }
.run-class-dot { overflow:hidden }
.run-class-dot img { display:block; width:100%; height:100%; object-fit:cover }
.run-player .role { justify-self:center; white-space:nowrap }
.run-data-note,.runs-empty { margin:10px 0 0; color:#7f8dbf; font-size:8px }
.run-detail-loading { display:flex; align-items:center; justify-content:center; gap:10px; min-height:76px; color:#d9e1ff; text-align:left }
.run-detail-loading>span { flex:0 0 auto; width:17px; height:17px; border:2px solid rgba(153,174,255,.22); border-top-color:#91aaff; border-radius:50%; animation:spin .75s linear infinite }
.run-detail-loading strong,.run-detail-loading small { display:block }
.run-detail-loading strong { font-size:9px; font-weight:600 }
.run-detail-loading small { margin-top:3px; color:#8291c5; font-size:8px }

/* Consistent selects: remove native hover/arrow rendering. */
select,
select:hover,
select:focus,
select:active {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    border: 1px solid rgba(137, 157, 255, .28);
    outline: none;
    background-color: #171b50;
    background-image: linear-gradient(45deg, transparent 50%, #91a6e8 50%), linear-gradient(135deg, #91a6e8 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    color: #e4e8ff;
    box-shadow: none
}

select:hover {
    border-color: rgba(129, 154, 255, .62);
    background-color: #1a1f57;
    box-shadow: 0 0 0 1px rgba(112, 139, 255, .08), 0 5px 18px rgba(3, 5, 28, .2)
}

select:focus-visible {
    border-color: #829cff;
    background-color: #1a1f57;
    box-shadow: 0 0 0 3px rgba(100, 128, 255, .16)
}

select option {
    color: #edf0ff;
    background-color: #171b50
}
@media(max-width:720px){.header-season-selector{min-width:112px;max-width:125px}.guild-run summary{grid-template-columns:36px 32px minmax(100px,1fr) 64px 24px;gap:8px}.guild-run-dungeon-icon{width:32px;height:32px}.guild-run summary>span:nth-of-type(3),.guild-run summary>span:nth-of-type(4){display:none}.run-player{grid-template-columns:minmax(120px,1fr) 65px 42px}.run-player:not(.run-player-head)>*:nth-child(4),.run-player:not(.run-player-head)>*:nth-child(5){display:block;grid-row:2;margin-top:3px}.run-player:not(.run-player-head)>*:nth-child(4){grid-column:2}.run-player:not(.run-player-head)>*:nth-child(5){grid-column:3}.run-player-head>*:nth-child(4),.run-player-head>*:nth-child(5){display:none}.guild-runs-section,.guild-raids-section{padding:17px}.guild-raid>summary{grid-template-columns:minmax(130px,1fr) 24px}.guild-raid>summary>span:not(.row-more){display:none}.raid-boss-row{grid-template-columns:34px minmax(82px,1fr) auto;padding-inline:4px}.raid-boss-icon{width:34px;height:34px}.raid-boss-meta{min-width:0;gap:5px}.raid-boss-result{padding-inline:6px}.raid-boss-row small{display:none}.raid-boss-meta .row-more{width:20px;height:20px}.raid-fight-detail{padding-left:0}.raid-fight-player{grid-template-columns:minmax(100px,1fr) 55px repeat(3,44px);gap:4px}.raid-fight-player>strong,.raid-fight-player>b{font-size:9px}.raid-fight-player>.role{font-size:7px}.raid-player-class-icon{width:26px;height:26px}.profile-subhead{align-items:flex-start;flex-direction:column;gap:3px}}
@media(max-width:720px){.run-player:not(.run-player-head)>*:nth-child(4)::before{content:'DPS ';color:#7180b1;font-size:6px}.run-player:not(.run-player-head)>*:nth-child(5)::before{content:'HPS ';color:#7180b1;font-size:6px}}

/* Smartphone layout: compact roster without horizontal scrolling. */
@media(max-width:720px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden
    }

    #rosterTable {
        scroll-margin-top: 82px
    }

    .toolbar,
    .toolbar > * {
        min-width: 0
    }

    .toolbar select,
    .search input {
        min-height: 42px;
        font-size: 16px
    }

    .toolbar select {
        padding: 8px 32px 8px 11px;
        border-color: rgba(137, 157, 255, .34);
        border-radius: 8px;
        background-color: #171b50
    }

    .compact-view .table-wrap {
        overflow-x: hidden
    }

    .compact-view .table-wrap table {
        width: 100%;
        min-width: 0;
        table-layout: fixed
    }

    .compact-view th:nth-child(2),
    .compact-view td:nth-child(2),
    .compact-view th:nth-child(5),
    .compact-view td:nth-child(5),
    .compact-view th:nth-child(6),
    .compact-view td:nth-child(6) {
        display: none
    }

    .compact-view th,
    .compact-view td {
        padding-right: 4px;
        padding-left: 4px
    }

    .compact-view th:first-child,
    .compact-view td:first-child {
        width: 54%
    }

    .compact-view th:nth-child(3),
    .compact-view td:nth-child(3) {
        width: 15%;
        text-align: center
    }

    .compact-view th:nth-child(4),
    .compact-view td:nth-child(4) {
        width: 21%;
        text-align: center
    }

    .compact-view th:last-child,
    .compact-view td:last-child {
        width: 10%;
        text-align: right
    }

    .compact-view .player {
        min-width: 0
    }

    .compact-view .player > span:last-child,
    .compact-view .player strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .view-actions [data-roster-view="list"] {
        display: none
    }

    .recommendation,
    .resource-card,
    .weekly-card,
    dialog {
        max-width: 100%
    }

    .roster-needs {
        padding: 17px
    }

    .roster-needs-grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media(min-width:721px) and (max-width:1050px) {
    .roster-needs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .recruitment-card {
        grid-column: 1/-1
    }
}

@media(max-width:430px) {
    .toolbar {
        grid-template-columns: minmax(0, 1fr)
    }

    .search {
        grid-column: auto
    }

    .header-season-selector {
        width: 108px;
        min-width: 0
    }
}

/* Compact cards must remain after every responsive table rule. */
.compact-view .table-wrap { overflow:visible }
.compact-view .table-wrap table { display:block; width:100%; min-width:0 }
.compact-view thead { display:none }
.compact-view tbody { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:10px }
.compact-view tbody tr { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"player role" "ilvl score"; gap:13px 10px; min-width:0; padding:14px; border:1px solid rgba(133,154,255,.16); border-radius:10px; background:linear-gradient(145deg,rgba(20,25,73,.72),rgba(8,11,43,.72)); cursor:pointer; transition:border-color .2s ease,transform .2s ease }
.compact-view tbody tr:hover { border-color:rgba(130,156,255,.42); transform:translateY(-1px) }
.compact-view tbody td { display:block; width:auto!important; min-width:0; padding:0; border:0; text-align:left!important }
.compact-view tbody td:first-child { grid-area:player }
.compact-view tbody td:nth-child(2) { display:flex; grid-area:role; align-items:flex-start; justify-content:flex-end }
.compact-view tbody td:nth-child(3) { grid-area:ilvl }
.compact-view tbody td:nth-child(4) { grid-area:score }
.compact-view tbody td:nth-child(5),.compact-view tbody td:nth-child(6),.compact-view tbody td:last-child { display:none }
.compact-view tbody td:nth-child(3)::before,.compact-view tbody td:nth-child(4)::before { display:block; margin-bottom:3px; color:#7583b5; font-size:7px; font-weight:700; letter-spacing:.1em }
.compact-view tbody td:nth-child(3)::before { content:"ILVL" }
.compact-view tbody td:nth-child(4)::before { content:"SCORE MM+" }
.compact-view tbody td:nth-child(3)>b,.compact-view tbody td:nth-child(4)>b { color:#edf1ff; font-size:15px }
.compact-view .player small { display:none }
.compact-view .player>span:last-child { min-width:0 }
.compact-view .player strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

@media(max-width:720px) {
    .compact-view tbody { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media(max-width:480px) {
    .compact-view tbody { grid-template-columns:minmax(0,1fr) }
}

/* Readability pass: enlarge only supporting text without resizing cards. */
.eyebrow,
.metrics small,
.needs-card-head>span,
.raid-guests-head>div>span,
th {
    font-size:9px
}

.metrics p,
.aside-intro,
.recruitment-card>p,
.raid-guests-head small,
.raid-progression-row>strong,
.raid-progression-empty,
.guild-run summary small,
.run-player strong,
.run-player>b,
.run-player>span:not(:first-child),
.run-data-note,
.runs-empty,
.run-detail-loading strong {
    font-size:10px
}

.needs-card-head>b,
.role-balance-row>small,
.coverage-chip,
.coverage-chip i,
.raid-guests-head>b,
.raid-guest-identity small,
.raid-guest-stat small,
.recommendation small,
.gain span,
.raid-progression-row small,
.run-status,
.run-player strong small,
.run-player-head,
.run-detail-loading small,
.compact-view tbody td:nth-child(3)::before,
.compact-view tbody td:nth-child(4)::before,
.recommendation-name .role {
    font-size:9px
}

.class-summary span,
.raid-guest-identity i,
.guild-rank {
    font-size:8px
}

.tooltip-anchor::after {
    font-size:10px;
    line-height:1.55
}

.season-selector {
    font-size:9px
}

.role,
.raid-guest-stat b {
    font-size:10px;
    white-space:nowrap
}

.recommendation-name,
.raid-guest-identity>span,
.class-summary span,
.needs-card-head,
.raid-guests-head {
    min-width:0
}

/* The raid detail now includes the historical item-level column. */
.raid-fight-player {
    grid-template-columns:minmax(150px,1fr) 82px repeat(4,70px)
}

@media(max-width:720px) {
    .raid-fight-player {
        grid-template-columns:minmax(88px,1fr) 44px repeat(4,38px);
        gap:3px
    }
}

#overview,
#rosterTable,
#guildRaids,
#resources {
    scroll-margin-top:84px
}

.profile-best-run {
    min-width:0
}

.profile-best-run[open] {
    grid-column:1/-1
}

.profile-best-run>summary::-webkit-details-marker {
    display:none
}

.profile-best-run>summary.profile-run {
    grid-template-columns:40px minmax(0,1fr) 38px 58px 18px;
    cursor:pointer;
    list-style:none
}

.profile-best-run .row-more,
.profile-latest-raid .raid-boss-meta .row-more {
    width:auto;
    height:auto;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    color:#77877f;
    font-size:21px;
    line-height:1;
    transition:transform .2s ease
}

.profile-best-run[open]>summary .row-more {
    transform:rotate(90deg)
}

.profile-best-run .profile-run-performance {
    margin:8px 3px 10px
}

/* S2 — Venomous Abyss: emerald poison, serpent eye and acidic light. */
body.theme-venom {
    --bg:#030b08;
    --panel:#07140e;
    --panel2:#0a1b12;
    --line:rgba(137,216,105,.16);
    --text:#eef9e9;
    --muted:#89a891;
    --gold:#b8df57;
    --green:#62e783;
    --teal:#42c88c;
    background:radial-gradient(circle at 72% -15%,rgba(73,172,74,.25),transparent 34%),radial-gradient(circle at 8% 45%,rgba(119,221,65,.08),transparent 30%),#030b08
}

body.theme-venom .topbar {
    background:rgba(3,12,8,.9);
    border-bottom-color:rgba(139,223,85,.2)
}

body.theme-venom .panel,
body.theme-venom .weekly-card,
body.theme-venom .resource-card,
body.theme-venom dialog {
    border-color:rgba(139,223,85,.17);
    background-color:rgba(7,20,14,.9);
    box-shadow:0 18px 50px rgba(0,8,3,.25),inset 0 1px rgba(194,255,151,.025)
}

body.theme-venom .primary-btn,
body.theme-venom .resource-tabs button.active {
    background:linear-gradient(135deg,#365f22,#183e28);
    color:#efffdc
}

body.theme-venom .ambient-one { background:#7eef46 }
body.theme-venom .ambient-two { background:#178c50 }
body.theme-venom .brand-mark { filter:hue-rotate(68deg) saturate(1.35) }
body.theme-venom .progress-track span { background:linear-gradient(90deg,#4abf4b,#c4ed5e) }
body.theme-venom .metric-icon.violet { color:#c3ed62; background:rgba(135,210,64,.12) }

body.theme-venom .void-orb {
    filter:drop-shadow(0 0 10px rgba(112,255,75,.8)) drop-shadow(0 0 30px rgba(28,157,72,.55))
}

body.theme-venom .void-orb-canvas {
    opacity:.22;
    filter:hue-rotate(72deg) saturate(1.9) drop-shadow(0 0 9px rgba(103,255,66,.65))
}

body.theme-venom .void-orb-canvas-wrap:before {
    display:block;
    inset:-13px;
    border:2px solid rgba(173,255,92,.7);
    border-radius:52% 48% 51% 49%;
    background:radial-gradient(ellipse at 42% 38%,#eaff9d 0 5%,#9bea50 16%,#27a751 42%,#072715 69%,rgba(1,9,5,.2) 78%,transparent 80%);
    box-shadow:inset 0 0 12px #caff63,inset 0 -12px 20px rgba(2,35,13,.9),0 0 12px #82e54c,0 0 34px rgba(43,187,73,.55);
    animation:venom-eye 4.8s ease-in-out infinite
}

body.theme-venom .void-orb-canvas-wrap:after {
    display:block;
    left:50%;
    top:5px;
    width:8px;
    height:62px;
    border-radius:50%;
    background:#010603;
    box-shadow:0 0 8px 2px rgba(4,22,8,.92),0 0 14px rgba(205,255,104,.45);
    transform:translateX(-50%);
    animation:venom-pupil 4.8s ease-in-out infinite
}

@keyframes venom-eye { 50% { transform:scale(1.08) rotate(-4deg);filter:brightness(1.18) } }
@keyframes venom-pupil { 50% { width:5px;transform:translateX(-50%) scaleY(.88) } }

/* Lightweight dashboard administration. */
@media(min-width:760px) {
    dialog:has(.admin-editor) { width:min(1180px,calc(100% - 40px)) }
    dialog:has(.admin-shell:not(.admin-editor)) { width:min(430px,calc(100% - 32px)) }
}

.admin-shell h2 { margin-bottom:8px }
.admin-warning { padding:10px 12px; border:1px solid rgba(255,174,91,.28); border-radius:8px; color:#ffc58d; background:rgba(113,57,20,.2); font-size:9px; line-height:1.55 }
.admin-warning code { color:#ffe0bc }
.admin-pin { width:100%; height:54px; margin:16px 0 10px; border:1px solid var(--line); border-radius:10px; outline:0; background:rgba(7,10,35,.62); color:var(--text); font:24px var(--serif); letter-spacing:.38em; text-align:center }
.admin-pin:focus { border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 12%,transparent) }
.admin-keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px }
.admin-keypad button { height:48px; border:1px solid var(--line); border-radius:9px; background:rgba(24,30,74,.52); color:var(--text); font:16px var(--serif); cursor:pointer }
.admin-keypad button:hover { border-color:color-mix(in srgb,var(--gold) 50%,transparent); background:color-mix(in srgb,var(--gold) 9%,transparent) }
.admin-login { width:100% }
.admin-feedback { min-height:16px; margin:8px 0 0; color:var(--gold); font-size:9px }
.admin-editor-head,.admin-section-head,.admin-savebar { display:flex; align-items:center; justify-content:space-between; gap:16px }
.admin-editor-head { margin-bottom:18px }
.admin-section { margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:11px; background:rgba(8,11,43,.24) }
.admin-section h3 { margin:0; font-size:13px }
.admin-section p { margin:5px 0 0; color:var(--muted); font-size:9px; line-height:1.5 }
.admin-section select,.admin-section input { min-width:0; height:34px; padding:0 9px; border:1px solid var(--line); border-radius:7px; outline:0; background:#0d1237; color:var(--text); font:9px var(--sans) }
body.theme-venom .admin-section select,body.theme-venom .admin-section input { background:#08170f }
#adminTheme { width:min(330px,100%); margin-top:12px }
.admin-search { width:190px }
.admin-roster-head,.admin-roster-row { display:grid; grid-template-columns:48px minmax(130px,1fr) 135px 145px 92px 125px; align-items:center; gap:8px }
.admin-roster-head { padding:12px 8px 6px; color:var(--muted); font-size:7px; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.admin-roster-list { max-height:430px; overflow:auto; scrollbar-width:thin }
.admin-roster-row { padding:7px 8px; border-top:1px solid var(--line) }
.admin-roster-row strong { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap }
.admin-roster-row strong small { display:block; margin-top:3px; color:var(--muted); font-size:7px; font-weight:400 }
.admin-visible { display:grid; place-items:center }
.admin-visible input { width:17px; height:17px; accent-color:var(--green) }
.admin-custom-list { display:grid; gap:7px; margin-top:12px }
.admin-custom-row { display:grid; grid-template-columns:1fr 1fr 135px 145px 92px 125px 32px; gap:7px }
.admin-remove-row { border:1px solid rgba(255,111,126,.2); border-radius:7px; background:rgba(102,24,40,.18); color:#ff9fab; cursor:pointer }
.admin-savebar { position:sticky; bottom:-30px; margin:18px -30px -30px; padding:14px 30px; border-top:1px solid var(--line); background:rgba(7,9,31,.94); backdrop-filter:blur(12px) }
body.theme-venom .admin-savebar { background:rgba(4,15,9,.95) }

@media(max-width:850px) {
    .admin-roster-head { display:none }
    .admin-roster-row { grid-template-columns:34px minmax(120px,1fr) 1fr; align-items:center }
    .admin-roster-row>select,.admin-roster-row>input { grid-column:2/-1 }
    .admin-custom-row { grid-template-columns:1fr 1fr 32px }
    .admin-custom-row>[data-field="class"],.admin-custom-row>[data-field="spec"],.admin-custom-row>[data-field="role"],.admin-custom-row>[data-field="rank"] { grid-column:span 1 }
    .admin-remove-row { grid-column:3; grid-row:1 }
}

@media(max-width:600px) {
    .header-actions { gap:6px }
    .brand>span { display:none }
    .admin-editor-head,.admin-section-head,.admin-savebar { align-items:stretch; flex-direction:column }
    .admin-search { width:100% }
    .admin-roster-row { grid-template-columns:28px minmax(100px,1fr) }
    .admin-roster-row>select,.admin-roster-row>input { grid-column:2 }
    .admin-custom-row { grid-template-columns:1fr 32px }
    .admin-custom-row>* { grid-column:1 }
    .admin-custom-row .admin-remove-row { grid-column:2; grid-row:1 }
    .admin-savebar { bottom:-24px; margin:16px -20px -24px; padding:12px 20px }
}

.theme-moon-icon {
    display:block;
    width:15px;
    height:15px;
    border:2px solid #91a8ff;
    border-right-color:transparent;
    border-radius:50%;
    transform:rotate(-24deg);
    filter:drop-shadow(0 0 4px rgba(103,132,255,.55))
}

.theme-eye-icon {
    position:relative;
    display:block;
    width:18px;
    height:11px;
    border:1px solid #9bea50;
    border-radius:80% 12%;
    background:radial-gradient(circle,#bfff64 0 24%,#348e39 26% 60%,#0a2513 62%);
    box-shadow:0 0 7px rgba(124,235,67,.55)
}

.theme-eye-icon:after {
    content:'';
    position:absolute;
    left:8px;
    top:1px;
    width:2px;
    height:8px;
    border-radius:50%;
    background:#020703
}

.admin-action {
    display:inline-flex;
    min-height:36px;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));
    border-radius:9px;
    background:linear-gradient(145deg,rgba(33,40,89,.72),rgba(16,20,61,.78));
    box-shadow:inset 0 1px rgba(255,255,255,.04),0 6px 18px rgba(1,3,24,.16);
    color:#dce4ff;
    font:600 9px var(--sans);
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,transform .18s ease
}

.admin-action span {
    color:var(--gold);
    font-size:15px;
    line-height:1
}

.admin-action:hover {
    border-color:color-mix(in srgb,var(--gold) 58%,transparent);
    background:color-mix(in srgb,var(--gold) 10%,var(--panel2));
    transform:translateY(-1px)
}

.admin-action-logout {
    border-color:rgba(149,163,216,.2);
    background:rgba(19,24,66,.56);
    color:var(--muted)
}

.admin-icon-action {
    display:grid;
    place-items:center;
    width:32px;
    height:34px;
    padding:0;
    border:1px solid var(--line);
    border-radius:8px;
    background:rgba(21,27,70,.5);
    color:var(--muted);
    font-size:16px;
    cursor:pointer
}

/* Remove the remaining Midnight blue from the venom variant. */
body.theme-venom .panel,
body.theme-venom .weekly-card,
body.theme-venom .resource-card,
body.theme-venom dialog {
    background:linear-gradient(145deg,rgba(9,27,16,.97),rgba(4,15,9,.98))
}

body.theme-venom .metrics,
body.theme-venom .resource-tabs,
body.theme-venom .needs-card,
body.theme-venom .raid-guest,
body.theme-venom .class-summary span,
body.theme-venom .profile-run,
body.theme-venom .profile-run-performance,
body.theme-venom .performance-grid>div,
body.theme-venom .dialog-stats>div,
body.theme-venom .compact-view tbody tr,
body.theme-venom .admin-section {
    border-color:rgba(135,220,90,.15);
    background:linear-gradient(145deg,rgba(13,39,21,.72),rgba(5,20,11,.78))
}

body.theme-venom .search,
body.theme-venom select,
body.theme-venom input,
body.theme-venom .resource-tabs,
body.theme-venom .admin-keypad button,
body.theme-venom .admin-action,
body.theme-venom .admin-icon-action {
    border-color:rgba(137,216,105,.18);
    background:#08190f;
    color:#eaf8df
}

body.theme-venom .resource-tabs button.active,
body.theme-venom .admin-action:hover {
    background:linear-gradient(135deg,#294b1c,#123522)
}

body.theme-venom .metric-icon.violet,
body.theme-venom .metric-icon.gold,
body.theme-venom .metric-icon.blue,
body.theme-venom .metric-icon.green {
    color:#c9f36c;
    background:rgba(92,161,54,.16);
    box-shadow:inset 0 0 12px rgba(168,241,89,.05)
}

body.theme-venom .no-key { color:#bedf8e; background:#1b3217 }
body.theme-venom .tooltip-anchor:after { border-color:rgba(138,224,90,.28); background:#0b2614; color:#ecf9e4 }
body.theme-venom .tooltip-anchor:before { border-color:rgba(138,224,90,.28); background:#0b2614 }
body.theme-venom .toast { border-color:#477b35; background:#122e17; color:#dff8cb }

/* Wandering serpent eye — no blue black-hole layer in S2. */
body.theme-venom .void-orb-canvas { opacity:1; filter:drop-shadow(0 0 10px rgba(102,255,61,.55)) }

body.theme-venom .void-orb-canvas-wrap:before {
    display:none
}

body.theme-venom .void-orb-canvas-wrap:after {
    display:none
}

@media(max-width:600px) {
    .admin-action { width:100% }
}

/* Admin: immutable Blizzard fields, seasonal custom composition. */
.admin-roster-head,.admin-roster-row { grid-template-columns:minmax(150px,1.25fr) minmax(120px,.8fr) minmax(160px,1fr) }
.admin-roster-row[hidden] { display:none!important }
.admin-class-label { color:var(--muted); font-size:9px; font-weight:600 }
.admin-custom-row { grid-template-columns:minmax(120px,1fr) minmax(130px,1fr) minmax(130px,.8fr) minmax(150px,1fr) 34px }
.custom-roster-panel { margin-top:14px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.018); overflow:hidden }
.custom-roster-panel>summary { display:grid; grid-template-columns:1fr auto 24px; align-items:center; gap:14px; min-height:54px; padding:10px 14px; cursor:pointer; list-style:none }
.custom-roster-panel>summary::-webkit-details-marker { display:none }
.custom-roster-panel>summary span:first-child { display:flex; flex-direction:column; gap:4px }
.custom-roster-panel>summary b { font-size:9px; letter-spacing:.08em }
.custom-roster-panel>summary small,.custom-roster-panel>summary strong { color:var(--muted); font-size:8px }
.custom-roster-panel[open]>summary .row-more { transform:rotate(90deg); justify-self: center; }
.custom-roster-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 12px 12px }
.custom-roster-member { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.025) }
.custom-roster-member>span:nth-child(2) { min-width:0 }
.custom-roster-member strong,.custom-roster-member small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.custom-roster-member strong { font-size:10px }
.custom-roster-member small { margin-top:3px; color:var(--muted); font-size:8px }

/* S2: a lighter, coherent poison palette. Role tags deliberately keep Midnight colors. */
body.theme-venom { --bg:#122d1b; --panel:#1a4026; --panel2:#1e482a; --panel-soft:#214c2c; --line:rgba(178,225,126,.23); --muted:#b4c9ae; --text:#f4f9ee; --gold:#bce267; --green:#72c75e; --teal:#5bbf71; --accent:#b5dc56; --accent-2:#55b85b; /* background:radial-gradient(circle at 15% 8%,rgba(113,174,62,.25),transparent 34%),radial-gradient(circle at 85% 28%,rgba(44,137,62,.22),transparent 36%),linear-gradient(160deg,#173923 0,#102b1a 54%,#173522 100%);*/ color:var(--text) }
body.theme-venom .topbar { border-color:rgba(174,221,120,.2); background:rgba(12,32,18,.92) }
body.theme-venom .panel,body.theme-venom .weekly-card,body.theme-venom .resource-card,body.theme-venom dialog { border-color:rgba(181,227,130,.21); background:linear-gradient(145deg,rgba(31,73,42,.97),rgba(18,49,28,.98)); box-shadow:0 18px 46px rgba(1,12,5,.2) }
body.theme-venom .metrics,body.theme-venom .resource-tabs,body.theme-venom .needs-card,body.theme-venom .raid-guest,body.theme-venom .class-summary span,body.theme-venom .profile-run,body.theme-venom .profile-run-performance,body.theme-venom .performance-grid>div,body.theme-venom .dialog-stats>div,body.theme-venom .compact-view tbody tr,body.theme-venom .admin-section,body.theme-venom .custom-roster-panel,body.theme-venom .custom-roster-member { border-color:rgba(181,227,130,.2); background:linear-gradient(145deg,rgba(40,86,49,.78),rgba(22,57,31,.86)) }
body.theme-venom .search,body.theme-venom select,body.theme-venom input,body.theme-venom textarea,body.theme-venom .resource-tabs,body.theme-venom .admin-keypad button { border-color:rgba(171,221,121,.25); background:#173421; color:#f1f8e9 }
body.theme-venom select:hover,body.theme-venom select:focus,body.theme-venom input:hover,body.theme-venom input:focus { border-color:#8ab957; background:#1d4329; outline:none }
body.theme-venom option { background:#1b3b25; color:#f2f8ec }
body.theme-venom .primary-btn,body.theme-venom .resource-tabs button.active { background:linear-gradient(135deg,#8dbb42,#3d7c3a); color:#071308; box-shadow:0 8px 25px rgba(67,143,56,.22) }
body.theme-venom .ghost-btn,body.theme-venom .secondary-btn,body.theme-venom .icon-btn,body.theme-venom .resource-action,body.theme-venom .admin-action { border-color:rgba(177,223,126,.25); background: #1a3b24; color:#dff2ca }
body.theme-venom .ghost-btn:hover,body.theme-venom .secondary-btn:hover,body.theme-venom .icon-btn:hover,body.theme-venom .icon-btn.active,body.theme-venom .resource-action:hover,body.theme-venom .admin-action:hover { border-color:#9dc75f; background:#285132; color:#f6ffe9 }
body.theme-venom .progress-track span,body.theme-venom .role-balance-row div i { background:linear-gradient(90deg,#4c9b43,#b6dc55) }
body.theme-venom .row-more,body.theme-venom .eyebrow,body.theme-venom .key-level,body.theme-venom a { color:#b9df70 }
body.theme-venom .hero:before { border-color:rgba(151,211,85,.16); box-shadow:0 0 0 28px rgba(104,173,67,.035),0 0 0 62px rgba(57,128,65,.025) }
body.theme-venom .hero h1 em { color:#d8f08b; text-shadow:0 0 24px rgba(126,197,69,.28) }
body.theme-venom .weekly-card:before { border-color:rgba(177,225,105,.42) }
body.theme-venom .vault-orb { border-color:#8fc35c; color:#e9f8c8; box-shadow:inset 0 0 18px rgba(99,169,71,.2),0 0 18px rgba(84,153,62,.15) }
body.theme-venom .desktop-nav a.active:after { background:#a8d55e; box-shadow:0 0 18px #6fa447 }
body.theme-venom .raid-progression-row { border-color:rgba(179,224,128,.18); background:rgba(18,51,28,.55) }
body.theme-venom .raid-progression-row>strong,body.theme-venom .raid-progression-row b { color:#eef8df }
body.theme-venom .raid-progression-row small { color:#9fb896 }
body.theme-venom .raid-progression-row span:nth-child(2) b { color:#a8df95 }
body.theme-venom .raid-progression-row span:nth-child(3) b { color:#d1e97d }
body.theme-venom .raid-progression-row span:nth-child(4) b { color:#efcf6f }
body.theme-venom .raid-difficulty { color:#bed599 }
body.theme-venom .raid-boss-result.try { color:#e7ca75; background:rgba(186,143,52,.14) }
body.theme-venom .run-status.depleted { color:#e9bd74; background:rgba(186,129,52,.14) }
body.theme-venom .brand-mark stop:nth-child(1) { stop-color:#f4ffe8 }
body.theme-venom .brand-mark stop:nth-child(2) { stop-color:#a8dc55 }
body.theme-venom .brand-mark stop:nth-child(3) { stop-color:#34834a }
body.theme-venom .brand-mark { filter:none }
body.theme-venom * { scrollbar-color:#679544 #173421 }
body.theme-venom *::-webkit-scrollbar-track { background:#173421 }
body.theme-venom *::-webkit-scrollbar-thumb { border:2px solid #173421; border-radius:10px; background:#679544 }

@media(max-width:720px) {
    .custom-roster-list { grid-template-columns:1fr }
    .admin-roster-row { grid-template-columns:minmax(120px,1fr) 1fr }
    .admin-roster-row .admin-class-label,.admin-roster-row select { grid-column:2 }
    .admin-custom-row { grid-template-columns:1fr 34px }
    .admin-custom-row>*:not(button) { grid-column:1 }
    .admin-custom-row button { grid-column:2; grid-row:1 }
}

/* Final Venom component pass: controls, dialogs and resources use one palette. */
body.theme-venom .primary-btn {
    border-color:#9ecb59
}

body.theme-venom #dialogContent {
    scrollbar-color:#78a84d #173421
}

body.theme-venom #dialogContent::-webkit-scrollbar-track,
body.theme-venom .admin-roster-list::-webkit-scrollbar-track,
body.theme-venom .admin-custom-list::-webkit-scrollbar-track {
    background:#173421
}

body.theme-venom #dialogContent::-webkit-scrollbar-thumb,
body.theme-venom .admin-roster-list::-webkit-scrollbar-thumb,
body.theme-venom .admin-custom-list::-webkit-scrollbar-thumb {
    border:2px solid #173421;
    border-radius:999px;
    background:#78a84d;
    background-clip:padding-box
}

body.theme-venom #detailDialog .dialog-close {
    border:1px solid rgba(174,224,116,.28);
    background:#1b4228;
    color:#e7f5d6;
    box-shadow:0 4px 18px rgba(4,24,10,.32)
}

body.theme-venom #detailDialog .dialog-close:hover {
    border-color:#a7d061;
    background:#2a5835;
    color:#fff
}

body.theme-venom .resource-tabs {
    background:#173722
}

body.theme-venom .resource-tabs button {
    color:#bfd0b5
}

body.theme-venom .resource-tabs button:hover {
    background:rgba(142,190,79,.1);
    color:#eff8df
}

body.theme-venom .resource-icon {
    border:1px solid rgba(179,225,121,.2);
    background:linear-gradient(145deg,#315a2b,#1d4930);
    color:#d8ed8a;
    box-shadow:inset 0 0 14px rgba(180,226,85,.06)
}

body.theme-venom .resource-card span,
body.theme-venom .resource-action b {
    color:#c9e66f
}

body.theme-venom .resource-card h3 {
    color:#f4f9ed
}

body.theme-venom .resource-card p {
    color:#bacbb4
}

body.theme-venom pre,
body.theme-venom .profile-import {
    border-color:rgba(178,224,121,.2);
    background:#122f1c;
    color:#e4f1d7
}

/* More legible supporting copy without changing card geometry. */
.resource-card span { font-size:8px }
.resource-card p { font-size:10px; line-height:1.55 }
.resource-action { font-size:10px }
.needs-card-head>span,.raid-guests-head>div>span { font-size:8px }
.needs-card-head>b,.raid-guests-head>b,.coverage-chip,.class-summary span { font-size:9px }
.raid-guests-head small,.raid-guest-identity small,.raid-guest-stat small { font-size:8px }
#dialogContent .dialog-note,.admin-section p { font-size:10px }
.admin-roster-head { font-size:8px }
.admin-roster-row strong { font-size:10px }
.admin-roster-row strong small { font-size:8px }

.admin-character {
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0
}

.admin-spec-icon {
    display:grid;
    flex:0 0 31px;
    place-items:center;
    width:31px;
    height:31px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--class) 65%,white);
    border-radius:7px;
    background:color-mix(in srgb,var(--class) 18%,#0b1035);
    color:var(--class);
    font-size:8px;
    box-shadow:0 0 10px color-mix(in srgb,var(--class) 18%,transparent)
}

.admin-spec-icon img {
    width:100%;
    height:100%;
    object-fit:cover
}

.admin-class-label {
    font-size:10px
}

button.custom-roster-member {
    width:100%;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,transform .18s ease
}

button.custom-roster-member:hover,
button.custom-roster-member:focus-visible {
    border-color:color-mix(in srgb,var(--gold) 50%,var(--line));
    background:color-mix(in srgb,var(--gold) 7%,var(--panel2));
    outline:none;
    transform:translateY(-1px)
}

.admin-roster-row[draggable="true"] {
    cursor:grab;
    transition:opacity .16s ease,background .16s ease
}

.admin-roster-row.dragging {
    opacity:.42;
    cursor:grabbing
}

.admin-roster-row select {
    cursor:pointer
}

.admin-drag-grip {
    display:grid;
    flex:0 0 25px;
    place-items:center;
    width:25px;
    height:25px;
    padding:0;
    border:1px solid var(--line);
    border-radius:6px;
    background:color-mix(in srgb,var(--gold) 6%,var(--panel2));
    color:var(--gold);
    font-size:14px;
    cursor:copy
}

.admin-drag-grip:hover,
.admin-drag-grip:focus-visible {
    border-color:color-mix(in srgb,var(--gold) 55%,transparent);
    background:color-mix(in srgb,var(--gold) 13%,var(--panel2));
    outline:none
}

.admin-custom-list {
    min-height:70px;
    padding:8px;
    border:1px dashed transparent;
    border-radius:9px;
    transition:border-color .18s ease,background .18s ease,box-shadow .18s ease
}

.admin-drop-hint {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:38px;
    border:1px dashed color-mix(in srgb,var(--gold) 24%,var(--line));
    border-radius:7px;
    color:var(--muted);
    font-size:9px;
    font-weight:600
}

.admin-drop-hint span {
    color:var(--gold);
    font-size:15px
}

.admin-custom-list.drop-active {
    border-color:color-mix(in srgb,var(--gold) 72%,transparent);
    background:color-mix(in srgb,var(--gold) 9%,transparent);
    box-shadow:0 0 22px color-mix(in srgb,var(--gold) 14%,transparent)
}

.admin-custom-list.drop-success {
    border-color:#70cc83;
    background:rgba(75,183,101,.08)
}

.admin-custom-list.drop-duplicate {
    border-color:#e0a25f;
    background:rgba(209,139,65,.08)
}

.admin-custom-class {
    display:flex;
    align-items:center;
    min-height:34px;
    padding:0 9px;
    border:1px solid color-mix(in srgb,var(--class) 30%,var(--line));
    border-radius:7px;
    background:color-mix(in srgb,var(--class) 7%,var(--panel2));
    color:var(--class);
    font-size:9px;
    font-weight:700
}

.admin-custom-class.loading {
    color:var(--muted);
    animation:admin-class-pulse 1s ease-in-out infinite alternate
}

@keyframes admin-class-pulse {
    to { opacity:.55 }
}

body.theme-venom .needs-card-head>span,
body.theme-venom .raid-guests-head>div>span,
body.theme-venom .recruitment-card>p {
    color:#b9df70
}

/* Remove the last arcane-blue text tones from Venom. */
body.theme-venom .needs-card-head>b,
body.theme-venom #classCoverageStatus,
body.theme-venom #roleBalanceStatus,
body.theme-venom .recruitment-card .needs-card-head>b,
body.theme-venom #activeGuestCount {
    color:#b9df70
}

body.theme-venom .coverage-chip.covered {
    border-color:rgba(185,223,112,.26);
    color:#c9e7a0;
    background:rgba(117,170,70,.08)
}

body.theme-venom .coverage-chip.covered i {
    color:#c9ef91;
    background:rgba(122,193,78,.18)
}

body.theme-venom .class-summary span {
    color:#bed5a9
}

body.theme-venom .class-summary b {
    color:#e1f1c4
}

body.theme-venom .raid-guests-head small,
body.theme-venom .raid-guest-identity small,
body.theme-venom .raid-guest-stat small {
    color:#b6cba9
}

body.theme-venom th,
body.theme-venom .run-player-head,
body.theme-venom .raid-fight-player-head {
    color:#b9d1a7
}

body.theme-venom .runs-empty,
body.theme-venom .run-data-note,
body.theme-venom .dialog-note,
body.theme-venom .profile-raid-empty {
    color:#b8cdaa
}

body.theme-venom .profile-run-times span,
body.theme-venom .profile-run small,
body.theme-venom .profile-section-head>span,
body.theme-venom .profile-subhead span {
    color:#b9d0a8
}

body.theme-venom .profile-run-times b {
    color:#e1efce
}

body.theme-venom .profile-run-empty {
    opacity:.72
}

body.theme-venom .dialog-stats span {
    color:#c1d6af
}

body.theme-venom .dialog-eyebrow {
    color:#b9df70
}

body.theme-venom .profile-run .profile-run-level {
    color:#d5ec8b;
    text-shadow:0 0 12px rgba(147,202,74,.18)
}

body.theme-venom dialog h3 {
    color:#e6f2d5
}

body.theme-venom dialog .dialog-player p {
    color:#c0d5ae
}

body.theme-venom .role-balance-row>small {
    color:#b8cea5
}

body.theme-venom .card-heading .week-pill {
    border-color:rgba(185,223,112,.27);
    background:rgba(119,168,72,.08);
    color:#c4de9a
}

body.theme-venom .raid-progress {
    border-top-color:rgba(185,223,112,.2)
}

body.theme-venom .raid-progress-head>span {
    color:#c8e398
}

body.theme-venom .raid-progress-head small,
body.theme-venom .raid-progression-empty {
    color:#b4c9a5
}

/* Class Codex recommendation in the S2 palette. */
body.theme-venom .class-codex-card {
    border-color:rgba(181,225,111,.26);
    background:linear-gradient(145deg,rgba(65,104,42,.32),rgba(23,64,34,.52))
}

body.theme-venom .class-codex-icon {
    color:#15210b;
    background:linear-gradient(145deg,#c9e66d,#5c9d48);
    box-shadow:0 0 18px rgba(137,199,72,.25)
}

body.theme-venom .class-codex-card strong {
    color:#edf7df
}

body.theme-venom .class-codex-card p {
    color:#b7cba9
}

body.theme-venom .class-codex-card a {
    border-color:rgba(185,223,112,.32);
    background:rgba(117,167,69,.08);
    color:#d4e9aa
}

body.theme-venom .class-codex-card a:hover {
    border-color:#a7d361;
    background:rgba(132,185,74,.16);
    color:#f5ffe6
}

/* Guild dungeon and raid feeds. */
body.theme-venom .guild-run,
body.theme-venom .guild-raid {
    border-color:rgba(180,224,122,.2);
    background:linear-gradient(145deg,rgba(35,78,43,.72),rgba(18,54,29,.78))
}

body.theme-venom .guild-run summary strong,
body.theme-venom .guild-raid>summary strong,
body.theme-venom .raid-boss-row strong,
body.theme-venom .run-player strong,
body.theme-venom .raid-fight-player>strong {
    color:#edf6e3
}

body.theme-venom .guild-run summary small,
body.theme-venom .guild-raid>summary small,
body.theme-venom .guild-raid>summary>span,
body.theme-venom .run-player strong small,
body.theme-venom .raid-fight-player>strong small,
body.theme-venom .raid-boss-row small {
    color:#b3c8a5
}

body.theme-venom .guild-run-dungeon-icon,
body.theme-venom .raid-boss-icon {
    border-color:rgba(183,225,126,.26)
}

body.theme-venom .guild-run-dungeon-placeholder {
    background:rgba(129,181,76,.1)
}

body.theme-venom .guild-run .run-more,
body.theme-venom .guild-raid .row-more {
    border-color:rgba(183,225,126,.25);
    background: rgba(83, 132, 57, .22);
    color:#cbe89a
}

body.theme-venom .raid-boss-meta .row-more {
    border-color:rgba(183,225,126,.25);
    color:#cbe89a
}

body.theme-venom .run-level {
    background:linear-gradient(145deg,#6d9f43,#315e38);
    color:#eff9d8;
    box-shadow:inset 0 0 12px rgba(207,239,130,.08)
}

body.theme-venom .guild-run-detail,
body.theme-venom .raid-boss,
body.theme-venom .profile-latest-raid {
    border-color:rgba(181,224,122,.15)
}

body.theme-venom .raid-boss-row:hover {
    background:rgba(135,183,76,.08)
}

body.theme-venom .raid-boss-meta .raid-difficulty,
body.theme-venom .latest-raid-title {
    color:#c7df9d
}

body.theme-venom .run-player,
body.theme-venom .raid-fight-player {
    border-bottom-color:rgba(181,224,122,.13)
}

body.theme-venom .run-player>b,
body.theme-venom .run-player>span:not(:first-child),
body.theme-venom .raid-fight-player>b {
    color:#d1e2c4
}

body.theme-venom .run-detail-loading {
    color:#e0edd2
}

body.theme-venom .run-detail-loading small {
    color:#aec5a0
}

body.theme-venom .run-detail-loading>span,
body.theme-venom .run-combat-value.loading::after,
body.theme-venom .profile-loading i {
    border-color:rgba(179,224,117,.22);
    border-top-color:#a9d45e
}

body.theme-venom .raid-guests {
    border-top-color:rgba(185,223,112,.2)
}

body.theme-venom .source-list span {
    border-color:rgba(181,224,122,.2);
    background:rgba(91,137,58,.07)
}

body.theme-venom .source-list b {
    color:#b9df70
}

body.theme-venom .raid-guest-identity i,
body.theme-venom .guild-rank {
    border-color:rgba(185,223,112,.3);
    background:rgba(94,132,54,.13);
    color:#c8e58f
}

body.theme-venom .player small,
body.theme-venom .activity-cell small,
body.theme-venom th {
    color:#b9d79d
}

/* Neutral, season-independent themes. */
body.theme-classic-dark,
body.theme-classic-light {
    --classic-accent:#9099a8;
    background:var(--bg);
    color:var(--text)
}

body.theme-classic-dark {
    --bg:#111318;
    --panel:#181b21;
    --panel2:#1e2229;
    --line:rgba(211,217,226,.12);
    --text:#f1f3f5;
    --muted:#a5adb8;
    --gold:#aeb6c2;
    --green:#9ca6b4;
    --teal:#8f99a8;
    color-scheme:dark
}

body.theme-classic-light {
    --bg:#f4f5f7;
    --panel:#fff;
    --panel2:#f8f9fb;
    --line:rgba(31,41,55,.13);
    --text:#1c222b;
    --muted:#667085;
    --gold:#475467;
    --green:#526173;
    --teal:#5e6b7a;
    --classic-accent:#536171;
    color-scheme:light
}

body.theme-classic-dark .ambient,
body.theme-classic-light .ambient,
body.theme-classic-dark .void-orb,
body.theme-classic-light .void-orb {
    display:none!important
}

body.theme-classic-dark .hero:before,
body.theme-classic-light .hero:before { display:none }

body.theme-classic-dark *,
body.theme-classic-light * {
    scrollbar-color:var(--classic-accent) var(--panel2)
}

body.theme-classic-dark ::-webkit-scrollbar-track,
body.theme-classic-light ::-webkit-scrollbar-track { background:var(--panel2) }
body.theme-classic-dark ::-webkit-scrollbar-thumb,
body.theme-classic-light ::-webkit-scrollbar-thumb { background:var(--classic-accent); border-color:var(--panel2) }

body.theme-classic-dark .topbar,
body.theme-classic-light .topbar {
    background:color-mix(in srgb,var(--panel) 94%,transparent);
    border-color:var(--line);
    box-shadow:none
}

body.theme-classic-dark .brand-mark,
body.theme-classic-light .brand-mark { color:var(--classic-accent) }
body.theme-classic-light .brand-mark text { fill:#fff }

body.theme-classic-dark .desktop-nav a.active:after,
body.theme-classic-light .desktop-nav a.active:after {
    background:var(--classic-accent);
    box-shadow:none
}

body.theme-classic-dark .icon-btn,
body.theme-classic-light .icon-btn,
body.theme-classic-dark .season-selector,
body.theme-classic-light .season-selector,
body.theme-classic-dark select,
body.theme-classic-light select,
body.theme-classic-dark input,
body.theme-classic-light input,
body.theme-classic-dark textarea,
body.theme-classic-light textarea {
    border-color:var(--line);
    background:var(--panel2);
    color:var(--text);
    box-shadow:none
}

body.theme-classic-dark select:hover,
body.theme-classic-light select:hover,
body.theme-classic-dark select:focus,
body.theme-classic-light select:focus,
body.theme-classic-dark .icon-btn:hover,
body.theme-classic-light .icon-btn:hover {
    border-color:var(--classic-accent);
    background:var(--panel2);
    color:var(--text)
}

body.theme-classic-dark option,
body.theme-classic-light option { background:var(--panel); color:var(--text) }

body.theme-classic-dark .hero,
body.theme-classic-light .hero { border-color:var(--line) }

body.theme-classic-dark .hero h1 em,
body.theme-classic-light .hero h1 em,
body.theme-classic-dark .eyebrow,
body.theme-classic-light .eyebrow,
body.theme-classic-dark .dialog-eyebrow,
body.theme-classic-light .dialog-eyebrow,
body.theme-classic-dark .card-heading>div>span,
body.theme-classic-light .card-heading>div>span {
    color:var(--classic-accent);
    text-shadow:none
}

body.theme-classic-dark .primary-btn,
body.theme-classic-light .primary-btn {
    border:1px solid var(--classic-accent);
    background:var(--text);
    color:var(--bg);
    box-shadow:none
}

body.theme-classic-dark .primary-btn:hover,
body.theme-classic-light .primary-btn:hover { filter:brightness(.94); box-shadow:none }

body.theme-classic-dark .ghost-btn,
body.theme-classic-light .ghost-btn,
body.theme-classic-dark .resource-tabs,
body.theme-classic-light .resource-tabs {
    border-color:var(--line);
    background:var(--panel2);
    color:var(--muted)
}

body.theme-classic-dark :is(.weekly-card,.panel,.metrics article,.resource-card),
body.theme-classic-light :is(.weekly-card,.panel,.metrics article,.resource-card) {
    border-color:var(--line);
    background:var(--panel);
    box-shadow:0 8px 28px rgba(0,0,0,.06)
}

body.theme-classic-dark .weekly-card:before,
body.theme-classic-light .weekly-card:before { display:none }

body.theme-classic-dark .vault-orb,
body.theme-classic-light .vault-orb {
    border-color:var(--classic-accent);
    background:var(--panel2);
    color:var(--text);
    box-shadow:none
}

body.theme-classic-dark .progress-track,
body.theme-classic-light .progress-track,
body.theme-classic-dark .role-balance-row>div,
body.theme-classic-light .role-balance-row>div { background:color-mix(in srgb,var(--text) 9%,transparent) }

body.theme-classic-dark .progress-track>span,
body.theme-classic-light .progress-track>span,
body.theme-classic-dark .role-balance-row>div i,
body.theme-classic-light .role-balance-row>div i {
    background:var(--classic-accent);
    box-shadow:none
}

body.theme-classic-dark :is(.needs-card,.custom-roster-panel,.raid-guests,.guild-run,.guild-raid,.profile-run,.profile-raid,.profile-run-performance,.guild-run-detail,.raid-boss,.profile-latest-raid),
body.theme-classic-light :is(.needs-card,.custom-roster-panel,.raid-guests,.guild-run,.guild-raid,.profile-run,.profile-raid,.profile-run-performance,.guild-run-detail,.raid-boss,.profile-latest-raid) {
    border-color:var(--line);
    background:var(--panel2);
    box-shadow:none
}

body.theme-classic-dark :is(.week-pill,.guild-rank,.coverage-chip,.class-summary span,.source-list span),
body.theme-classic-light :is(.week-pill,.guild-rank,.coverage-chip,.class-summary span,.source-list span) {
    border-color:var(--line);
    background:var(--panel2);
    color:var(--muted)
}

body.theme-classic-dark :is(.needs-card-head>span,.needs-card-head>b,.role-balance-row>small,.raid-guests-head span,.raid-guests-head small,.raid-guests-head>b,.player small,.activity-cell small,th,.guild-run summary small,.guild-raid>summary small,.guild-raid>summary>span,.raid-boss-row small,.run-player-head,.raid-fight-player-head,.profile-section-head>span,.profile-subhead span,.dialog-note,.dialog-player p),
body.theme-classic-light :is(.needs-card-head>span,.needs-card-head>b,.role-balance-row>small,.raid-guests-head span,.raid-guests-head small,.raid-guests-head>b,.player small,.activity-cell small,th,.guild-run summary small,.guild-raid>summary small,.guild-raid>summary>span,.raid-boss-row small,.run-player-head,.raid-fight-player-head,.profile-section-head>span,.profile-subhead span,.dialog-note,.dialog-player p) {
    color:var(--muted)
}

body.theme-classic-dark :is(.guild-run summary strong,.guild-raid>summary strong,.raid-boss-row strong,.run-player strong,.raid-fight-player>strong),
body.theme-classic-light :is(.guild-run summary strong,.guild-raid>summary strong,.raid-boss-row strong,.run-player strong,.raid-fight-player>strong) { color:var(--text) }

body.theme-classic-dark :is(.guild-run .run-more,.guild-raid .row-more,.raid-boss-meta .row-more),
body.theme-classic-light :is(.guild-run .run-more,.guild-raid .row-more,.raid-boss-meta .row-more) {
    border-color:var(--line);
    background:var(--panel);
    color:var(--muted)
}

body.theme-classic-dark .run-level,
body.theme-classic-light .run-level,
body.theme-classic-dark .profile-run .profile-run-level,
body.theme-classic-light .profile-run .profile-run-level,
body.theme-classic-dark .profile-recent-run summary>strong b,
body.theme-classic-light .profile-recent-run summary>strong b {
    background:none;
    color:var(--text);
    box-shadow:none
}

body.theme-classic-dark .resource-tabs button.active,
body.theme-classic-light .resource-tabs button.active {
    background:var(--text);
    color:var(--bg);
    box-shadow:none
}

body.theme-classic-dark .resource-card:hover,
body.theme-classic-light .resource-card:hover,
body.theme-classic-dark .recommendation-link:hover,
body.theme-classic-light .recommendation-link:hover {
    border-color:var(--classic-accent);
    background:var(--panel2);
    box-shadow:none
}

body.theme-classic-dark dialog,
body.theme-classic-light dialog {
    border-color:var(--line);
    background:var(--panel);
    color:var(--text);
    box-shadow:0 24px 70px rgba(0,0,0,.24)
}

body.theme-classic-dark .dialog-close,
body.theme-classic-light .dialog-close {
    border-color:var(--line);
    background:var(--panel2);
    color:var(--text);
    box-shadow:none
}

body.theme-classic-dark :is(.admin-section,.admin-roster-row,.admin-custom-row,.admin-savebar),
body.theme-classic-light :is(.admin-section,.admin-roster-row,.admin-custom-row,.admin-savebar) {
    border-color:var(--line);
    background:var(--panel2)
}

body.theme-classic-dark .toast,
body.theme-classic-light .toast {
    border-color:var(--line);
    background:var(--text);
    color:var(--bg);
    box-shadow:0 12px 30px rgba(0,0,0,.2)
}

body.theme-classic-light .player strong[style],
body.theme-classic-light .profile-name-button[style],
body.theme-classic-light .recommendation-name strong[style] {
    filter:brightness(.72) saturate(1.15)
}

.theme-classic-icon {
    display:block;
    width:15px;
    height:15px;
    border:2px solid #aeb6c2;
    border-radius:4px;
    box-shadow:inset 0 0 0 3px #252a31
}

.theme-sun-icon {
    display:block;
    width:15px;
    height:15px;
    border:4px solid #536171;
    border-radius:50%;
    box-shadow:0 0 0 2px rgba(83,97,113,.18)
}

/* Classic theme component contrast fixes. */
body.theme-classic-dark .search,
body.theme-classic-light .search {
    border-color:var(--line);
    background:var(--panel2);
    color:var(--muted)
}

body.theme-classic-dark .search:focus-within,
body.theme-classic-light .search:focus-within {
    border-color:var(--classic-accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--classic-accent) 13%,transparent)
}

body.theme-classic-dark .search input,
body.theme-classic-light .search input {
    border:0;
    background:transparent;
    color:var(--text);
    box-shadow:none
}

body.theme-classic-dark .search input::placeholder,
body.theme-classic-light .search input::placeholder { color:var(--muted); opacity:1 }

body.theme-classic-dark .metrics,
body.theme-classic-light .metrics {
    overflow:hidden;
    border-color:var(--line);
    background:var(--panel);
    box-shadow:0 8px 28px rgba(0,0,0,.06)
}

body.theme-classic-dark .metrics article,
body.theme-classic-light .metrics article {
    border-color:var(--line);
    background:transparent;
    box-shadow:none
}

body.theme-classic-dark .metrics article:last-child,
body.theme-classic-light .metrics article:last-child { border-right:0 }

body.theme-classic-dark .metric-icon,
body.theme-classic-light .metric-icon {
    background:var(--panel2);
    color:var(--classic-accent)
}

body.theme-classic-dark .metrics strong i,
body.theme-classic-light .metrics strong i {
    background:var(--panel2);
    color:var(--text)
}

body.theme-classic-dark .raid-progress,
body.theme-classic-light .raid-progress { border-top-color:var(--line) }

body.theme-classic-dark .raid-progress-head>span,
body.theme-classic-light .raid-progress-head>span,
body.theme-classic-dark .raid-progress-head small,
body.theme-classic-light .raid-progress-head small,
body.theme-classic-dark .raid-progression-empty,
body.theme-classic-light .raid-progression-empty { color:var(--muted) }

body.theme-classic-dark .raid-progression-row,
body.theme-classic-light .raid-progression-row,
body.theme-classic-dark .raid-difficulties>div,
body.theme-classic-light .raid-difficulties>div {
    border-color:var(--line);
    background:var(--panel2)
}

body.theme-classic-dark .raid-progression-row>strong,
body.theme-classic-light .raid-progression-row>strong { color:var(--text) }

body.theme-classic-dark .raid-progression-row small,
body.theme-classic-light .raid-progression-row small,
body.theme-classic-dark .raid-difficulties span,
body.theme-classic-light .raid-difficulties span { color:var(--muted) }

body.theme-classic-dark .raid-progression-row b,
body.theme-classic-light .raid-progression-row b,
body.theme-classic-dark .raid-progression-row span:nth-child(2) b,
body.theme-classic-light .raid-progression-row span:nth-child(2) b,
body.theme-classic-dark .raid-progression-row span:nth-child(3) b,
body.theme-classic-light .raid-progression-row span:nth-child(3) b,
body.theme-classic-dark .raid-progression-row span:nth-child(4) b,
body.theme-classic-light .raid-progression-row span:nth-child(4) b,
body.theme-classic-dark .raid-difficulties>div b,
body.theme-classic-light .raid-difficulties>div b {
    color:var(--text)
}

body.theme-classic-dark .hero-copy>p,
body.theme-classic-light .hero-copy>p,
body.theme-classic-dark footer,
body.theme-classic-light footer,
body.theme-classic-dark footer p,
body.theme-classic-light footer p,
body.theme-classic-dark footer span,
body.theme-classic-light footer span,
body.theme-classic-dark footer a,
body.theme-classic-light footer a {
    color:var(--muted)
}

body.theme-classic-dark .ghost-btn strong,
body.theme-classic-light .ghost-btn strong { color:var(--text) }

body.theme-classic-light :is(.role-balance-row>b,.recruitment-card>strong,.needs-card b,.class-summary b,.source-list b,.dialog-stats b) {
    color:var(--text)
}

body.theme-classic-light :is(.recruitment-card>p,.aside-intro,.runs-empty,.run-data-note,.profile-run-empty,.profile-raid-empty) {
    color:var(--muted)
}

body.theme-classic-light .coverage-chip.covered i {
    background:rgba(35,110,76,.1);
    color:#256b4e
}

body.theme-classic-light .coverage-chip.missing,
body.theme-classic-light .coverage-chip.missing i { color:#a33c50 }

/* Dialogs and administration in the neutral themes. */
body.theme-classic-dark dialog,
body.theme-classic-light dialog {
    background:var(--panel);
    border-color:var(--line)
}

body.theme-classic-dark dialog::backdrop,
body.theme-classic-light dialog::backdrop {
    background:rgba(12,15,20,.68);
    backdrop-filter:blur(6px)
}

body.theme-classic-dark #dialogContent,
body.theme-classic-light #dialogContent {
    scrollbar-color:var(--classic-accent) var(--panel2)
}

body.theme-classic-dark #dialogContent::-webkit-scrollbar-track,
body.theme-classic-light #dialogContent::-webkit-scrollbar-track { background:var(--panel2) }

body.theme-classic-dark #dialogContent::-webkit-scrollbar-thumb,
body.theme-classic-light #dialogContent::-webkit-scrollbar-thumb {
    border-color:transparent;
    background:var(--classic-accent);
    background-clip:padding-box
}

body.theme-classic-dark #detailDialog .dialog-close,
body.theme-classic-light #detailDialog .dialog-close {
    border:1px solid var(--line);
    background:var(--panel2);
    color:var(--text);
    box-shadow:0 4px 14px rgba(0,0,0,.12)
}

body.theme-classic-dark dialog :is(h2,h3,.dialog-player h2),
body.theme-classic-light dialog :is(h2,h3,.dialog-player h2) {
    color:var(--text);
    text-shadow:none
}

body.theme-classic-dark .admin-pin,
body.theme-classic-light .admin-pin,
body.theme-classic-dark .admin-section select,
body.theme-classic-light .admin-section select,
body.theme-classic-dark .admin-section input,
body.theme-classic-light .admin-section input {
    border-color:var(--line);
    background:var(--panel2);
    color:var(--text)
}

body.theme-classic-dark .admin-keypad button,
body.theme-classic-light .admin-keypad button {
    border-color:var(--line);
    background:var(--panel2);
    color:var(--text)
}

body.theme-classic-dark .admin-keypad button:hover,
body.theme-classic-light .admin-keypad button:hover {
    border-color:var(--classic-accent);
    background:color-mix(in srgb,var(--classic-accent) 12%,var(--panel2))
}

body.theme-classic-dark :is(.admin-action,.secondary-btn,.resource-action),
body.theme-classic-light :is(.admin-action,.secondary-btn,.resource-action),
body.theme-classic-dark .admin-icon-action,
body.theme-classic-light .admin-icon-action {
    border-color:var(--line);
    background:var(--panel2);
    color:var(--text);
    box-shadow:none
}

body.theme-classic-dark :is(.admin-action,.secondary-btn,.resource-action):hover,
body.theme-classic-light :is(.admin-action,.secondary-btn,.resource-action):hover,
body.theme-classic-dark .admin-icon-action:hover,
body.theme-classic-light .admin-icon-action:hover {
    border-color:var(--classic-accent);
    background:color-mix(in srgb,var(--classic-accent) 10%,var(--panel2))
}

body.theme-classic-dark .admin-section,
body.theme-classic-light .admin-section,
body.theme-classic-dark .admin-roster-row,
body.theme-classic-light .admin-roster-row,
body.theme-classic-dark .admin-custom-row,
body.theme-classic-light .admin-custom-row {
    border-color:var(--line);
    background:var(--panel2)
}

body.theme-classic-dark .admin-savebar,
body.theme-classic-light .admin-savebar {
    border-color:var(--line);
    background:color-mix(in srgb,var(--panel) 96%,transparent)
}

body.theme-classic-dark :is(.dialog-stats div,.performance-grid>div,.comparison-launch,.top-build-summary>div),
body.theme-classic-light :is(.dialog-stats div,.performance-grid>div,.comparison-launch,.top-build-summary>div) {
    border-color:var(--line);
    background:var(--panel2)
}

body.theme-classic-dark :is(.profile-run-times span,.profile-run-times b,.recent-run-meta b,.profile-raid b,.performance-grid b,.top-build-summary b,.latest-raid-title),
body.theme-classic-light :is(.profile-run-times span,.profile-run-times b,.recent-run-meta b,.profile-raid b,.performance-grid b,.top-build-summary b,.latest-raid-title) {
    color:var(--text)
}

body.theme-classic-dark :is(.profile-run small,.profile-run em,.performance-grid small,.performance-grid em,.comparison-launch p,.top-build-summary span,.top-build-summary small),
body.theme-classic-light :is(.profile-run small,.profile-run em,.performance-grid small,.performance-grid em,.comparison-launch p,.top-build-summary span,.top-build-summary small) {
    color:var(--muted)
}

body.theme-classic-dark :is(.profile-dungeon-icon,.recent-dungeon-icon,.raid-player-class-icon,.profile-import),
body.theme-classic-light :is(.profile-dungeon-icon,.recent-dungeon-icon,.raid-player-class-icon,.profile-import) {
    border-color:var(--line);
    box-shadow:none
}

body.theme-classic-dark .profile-run:hover,
body.theme-classic-light .profile-run:hover { border-color:var(--classic-accent) }

body.theme-classic-light .run-timing.timed,
body.theme-classic-light .recent-run-meta i.timed { color:#256b4e }

body.theme-classic-light .run-timing.depleted,
body.theme-classic-light .recent-run-meta i.depleted { color:#a33c50 }

body.theme-venom .api-loader {
    border-color:rgba(185,223,112,.38);
    background:rgba(20,52,29,.97);
    box-shadow:0 12px 36px rgba(2,18,7,.3);
    color:#edf8dd
}

body.theme-venom .api-loader span {
    border-color:rgba(185,223,112,.24);
    border-top-color:#b9df70
}

body.theme-classic-dark .api-loader,
body.theme-classic-light .api-loader {
    border-color:var(--line);
    background:var(--panel);
    color:var(--text)
}

body.theme-classic-dark .api-loader {
    box-shadow:0 12px 36px rgba(0,0,0,.32)
}

body.theme-classic-light .api-loader {
    box-shadow:0 12px 30px rgba(31,41,55,.14)
}

body.theme-classic-dark .api-loader span,
body.theme-classic-light .api-loader span {
    border-color:var(--line);
    border-top-color:var(--classic-accent)
}

body.theme-classic-dark :is(.top-gear-item,.class-codex-card),
body.theme-classic-light :is(.top-gear-item,.class-codex-card) {
    border-color:var(--line);
    background:var(--panel2);
    box-shadow:none
}

body.theme-classic-dark .top-gear-icon,
body.theme-classic-light .top-gear-icon { background:var(--panel) }

body.theme-classic-dark :is(.top-gear-item strong,.top-gear-item>b,.class-codex-card strong),
body.theme-classic-light :is(.top-gear-item strong,.top-gear-item>b,.class-codex-card strong) { color:var(--text) }

body.theme-classic-dark .class-codex-icon,
body.theme-classic-light .class-codex-icon {
    background:var(--text);
    color:var(--bg);
    box-shadow:none
}

body.theme-classic-dark .class-codex-card a,
body.theme-classic-light .class-codex-card a {
    border-color:var(--line);
    background:var(--panel);
    color:var(--text)
}

body.theme-classic-dark .admin-spec-icon,
body.theme-classic-light .admin-spec-icon {
    background:color-mix(in srgb,var(--class) 10%,var(--panel2));
    box-shadow:none
}

body.theme-classic-light .admin-custom-class[style] {
    filter:brightness(.72) saturate(1.15)
}

body.theme-classic-dark .profile-loading i,
body.theme-classic-light .profile-loading i,
body.theme-classic-dark .run-combat-value.loading::after,
body.theme-classic-light .run-combat-value.loading::after {
    border-color:var(--line);
    border-top-color:var(--classic-accent)
}