:root {
    --bg-0: #14100b;
    --bg-1: #1c1610;
    --bg-2: #261d14;
    --bg-elev: #2e2317;
    --line: #3b2d1d;

    --text: #f1e6d2;
    --text-dim: #b6a384;
    --muted: #8b7a5e;

    --gold: #d9a441;
    --gold-bright: #f0c869;
    --copper: #b46a2a;
    --blood: #8b1a1a;
    --parchment: #e8d8b3;

    --radius: 6px;
    --shadow: 0 8px 24px rgba(0,0,0,0.45);
    --maxw: 1200px;

    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background:
        radial-gradient(ellipse at top, #2a1f14 0%, var(--bg-0) 70%) fixed,
        var(--bg-0);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: var(--parchment); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--parchment);
    letter-spacing: 0.02em;
    margin: 0 0 0.6em;
    line-height: 1.15;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.6rem); font-weight: 900; }
h2 { font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem); font-weight: 700; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* ── global form control theme ──────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
    background-color: var(--bg-0);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.52rem 0.75rem;
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 120ms, box-shadow 120ms;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.18);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { resize: vertical; }
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b7a5e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 7px;
    padding-right: 2.2rem;
    cursor: pointer;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { opacity: 0.5; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }

/* ── header ──────────────────────────────────────────── */
.site-header {
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    position: sticky; top: 0; z-index: 50;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.75rem 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.85rem; color: var(--text); }
.brand-logo { height: 56px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--gold-bright); letter-spacing: 0.06em; }
.brand-tag { font-size: 0.72rem; color: var(--muted); margin-top: 0.25rem; letter-spacing: 0.08em; text-transform: uppercase; }

.site-nav { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.site-nav a {
    color: var(--text-dim); font-weight: 500; font-size: 0.95rem;
    padding: 0.4rem 0.2rem; border-bottom: 2px solid transparent;
    transition: color 120ms, border-color 120ms;
}
.site-nav a:hover { color: var(--gold-bright); border-bottom-color: var(--copper); }
.site-nav a.nav-officer {
    color: var(--gold-bright);
    border: 1px solid var(--line);
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.site-nav a.nav-officer:hover { border-color: var(--gold); background: var(--bg-2); }
.site-nav a.cta {
    background: linear-gradient(180deg, var(--copper), #8a4d1c);
    color: var(--parchment) !important;
    padding: 0.45rem 1rem; border-radius: var(--radius);
    border-bottom: none; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.site-nav a.cta:hover { background: linear-gradient(180deg, #c97a36, var(--copper)); }

/* ── hero ────────────────────────────────────────────── */
.hero {
    background:
        radial-gradient(ellipse at 70% 30%, rgba(217, 164, 65, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
    border-bottom: 1px solid var(--line);
}
.home-top {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
    padding: 3rem 0 3.5rem;
}
@media (max-width: 860px) { .home-top { grid-template-columns: 1fr; } }

.home-hero-col { display: flex; flex-direction: column; }
.home-hero-col h1 { margin-bottom: 0.9rem; }
.accent { color: var(--gold-bright); }
.hero-lead { font-size: 1.1rem; color: var(--text-dim); max-width: 52ch; }
.hero-actions { margin-top: 1.75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-logo-compact {
    max-height: 110px; width: auto;
    margin-top: 2rem;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55));
    align-self: flex-start;
}

.home-feat-col {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding-top: 0.25rem;
}
.home-feat-col .feature-card { padding: 1rem 1.1rem; }
.home-feat-col .feature-card h2 { font-size: 1rem; margin-bottom: 0.3rem; }
.home-feat-col .feature-card p { font-size: 0.88rem; }

/* ── feature card (shared) ───────────────────────────── */
.feature-card {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: border-color 150ms, transform 150ms;
}
.feature-card:hover { border-color: var(--copper); transform: translateY(-2px); }
.feature-card h2 { font-size: 1.2rem; color: var(--gold-bright); margin-bottom: 0.5rem; }
.feature-card p { color: var(--text-dim); margin: 0; }

/* ── home lower: news + blue posts ──────────────────── */
.home-lower {
    border-top: 1px solid var(--line);
    padding: 2.5rem 0;
}
.home-lower-inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    align-items: start;
}
@media (max-width: 860px) { .home-lower-inner { grid-template-columns: 1fr; } }
.home-news-col {
    padding-right: 2.5rem;
    border-right: 1px solid var(--line);
}
@media (max-width: 860px) { .home-news-col { padding-right: 0; border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 2rem; margin-bottom: 2rem; } }
.home-blue-col { padding-left: 2.5rem; }
@media (max-width: 860px) { .home-blue-col { padding-left: 0; } }

/* ── badges & buttons ────────────────────────────────── */
.badge {
    display: inline-block;
    font-size: 0.78rem; font-weight: 600;
    padding: 0.3rem 0.7rem; border-radius: 999px;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 1rem;
}
.badge--open {
    background: rgba(80, 160, 80, 0.18);
    color: #95d695;
    border: 1px solid rgba(80, 160, 80, 0.4);
}
.badge--closed {
    background: rgba(180, 60, 60, 0.18);
    color: #e89090;
    border: 1px solid rgba(180, 60, 60, 0.4);
}

.btn {
    display: inline-block;
    font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.85rem 1.6rem; border-radius: var(--radius);
    border: 1px solid transparent;
    transition: transform 80ms, box-shadow 120ms, background 120ms;
    cursor: pointer;
}
.btn--primary {
    background: linear-gradient(180deg, var(--gold) 0%, #a87a26 100%);
    color: #1a120a;
    box-shadow: 0 4px 12px rgba(217, 164, 65, 0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn--primary:hover { transform: translateY(-1px); color: #1a120a; box-shadow: 0 6px 18px rgba(217, 164, 65, 0.35); }
.btn--ghost {
    background: transparent; color: var(--text);
    border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn--accept {
    background: linear-gradient(180deg, #2ecc71, #1e8a4c);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(46,204,113,0.25);
}
.btn--accept:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(46,204,113,0.4); color: #fff; }
.btn--reject {
    background: linear-gradient(180deg, #e74c3c, #9b2d20);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(231,76,60,0.25);
}
.btn--reject:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(231,76,60,0.4); color: #fff; }

.app-quick-actions {
    display: flex;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.feature-card {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: border-color 150ms, transform 150ms;
}
.feature-card:hover { border-color: var(--copper); transform: translateY(-2px); }
.feature-card h2 { font-size: 1.2rem; color: var(--gold-bright); margin-bottom: 0.5rem; }
.feature-card p { color: var(--text-dim); margin: 0; }

/* ── cta band ─────────────────────────────────────────── */
.cta-band {
    background:
        linear-gradient(135deg, rgba(180, 106, 42, 0.2), rgba(139, 26, 26, 0.18)),
        var(--bg-1);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 3rem 0;
}
.cta-band-inner { text-align: center; }
.cta-band h2 { color: var(--parchment); }
.cta-band p { color: var(--text-dim); margin-bottom: 1.5rem; }

/* ── inner pages ─────────────────────────────────────── */
.page-header {
    padding: 3rem 0 2rem;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-0) 100%);
    border-bottom: 1px solid var(--line);
}
.page-header h1 { margin-bottom: 0.4rem; }
.page-lead { color: var(--text-dim); font-size: 1.1rem; margin: 0; }

.placeholder-card {
    margin: 2rem 0;
    background: var(--bg-elev);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 2rem;
}
.placeholder-card .muted { color: var(--muted); font-size: 0.9rem; }
.placeholder-card code {
    background: var(--bg-0); padding: 0.15rem 0.4rem;
    border-radius: 3px; font-size: 0.9em; color: var(--gold-bright);
}

.long-form { max-width: 70ch; padding: 2rem 1.5rem 4rem; }
.long-form p { color: var(--text-dim); }
.long-form ul { color: var(--text-dim); padding-left: 1.2rem; }
.long-form ul li { margin-bottom: 0.4rem; }
.long-form strong { color: var(--text); }

/* ── footer ──────────────────────────────────────────── */
.site-main { flex: 1; }
.site-footer {
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    padding: 2rem 0;
    margin-top: auto;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}
.footer-inner p { margin: 0.25rem 0; }
.footer-tagline { font-style: italic; }
.footer-discord { margin-top: 0.6rem !important; }
.footer-discord-link { color: #5865f2; text-decoration: none; font-weight: 500; }
.footer-discord-link:hover { text-decoration: underline; }

/* ── roster page ─────────────────────────────────────── */
.roster-meta { padding-top: 1.5rem; }
.roster-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    margin: 1rem 0 2rem;
    padding: 0.75rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.refresh-link {
    color: var(--gold-bright);
    font-weight: 600;
}
.refresh-link:hover { color: var(--parchment); }

.error-card {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: rgba(139, 26, 26, 0.18);
    border: 1px solid rgba(139, 26, 26, 0.5);
    border-left: 4px solid var(--blood);
    border-radius: var(--radius);
    color: #ffd7d7;
}
.error-card strong { color: #ffaaaa; }

.env-snippet {
    margin: 0.75rem 0;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    color: var(--gold-bright);
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.9rem;
    overflow-x: auto;
}

.roster-section { padding-bottom: 4rem; }

.class-group {
    margin: 2.5rem 0;
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
}
.class-heading {
    font-size: 1.4rem;
    color: var(--class-colour);
    text-shadow: 0 0 18px color-mix(in srgb, var(--class-colour) 40%, transparent);
    display: flex; align-items: baseline; gap: 0.75rem;
    margin-bottom: 1rem;
}
.class-count {
    font-family: var(--font-body);
    font-size: 0.8rem; font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.06em;
}

.member-grid {
    list-style: none; padding: 0; margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.member-card {
    width: 400px; height: 150px;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-left: 3px solid var(--class-colour);
    border-radius: 4px;
    position: relative;
    transition: transform 90ms, border-color 120ms, box-shadow 120ms;
    flex-shrink: 0;
}
.member-card:hover {
    transform: translateY(-1px);
    border-color: var(--class-colour);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--class-colour) 25%, transparent);
}
.member-link {
    display: flex; flex-direction: row;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
    color: inherit !important;
    text-decoration: none;
}
/* ── external links dropdown ─────────────────────────────── */
.ext-links {
    position: absolute;
    top: 0.4rem; right: 0.4rem;
    z-index: 10;
}
.ext-links-toggle {
    background: rgba(20,16,11,0.75);
    border: 1px solid var(--line);
    color: var(--text-dim);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    letter-spacing: 0.1em;
}
.ext-links-toggle:hover {
    background: var(--bg-elev);
    color: var(--text);
    border-color: var(--gold);
}
.ext-links-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--shadow);
    z-index: 100;
}
.ext-links-menu a {
    display: block;
    padding: 0.42rem 0.85rem;
    color: var(--text-dim);
    font-size: 0.82rem;
    border-bottom: 1px solid var(--line);
    transition: background 70ms, color 70ms;
}
.ext-links-menu a:last-child { border-bottom: 0; }
.ext-links-menu a:hover {
    background: var(--bg-elev);
    color: var(--parchment);
}
.member-portrait-panel {
    width: 100px;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}
.member-portrait-panel img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.member-info {
    flex: 1;
    min-width: 0;
    display: flex; flex-direction: column;
    padding: 0.6rem 0.7rem;
    gap: 0.2rem;
    overflow: hidden;
}
.member-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--class-colour);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.member-meta {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-dim);
}
.member-level {
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-weight: 600;
    color: var(--gold-bright);
    font-size: 0.68rem;
}
.member-realm {
    font-size: 0.66rem;
    color: var(--muted);
    font-style: italic;
}
.member-stats {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    margin-top: 0.1rem;
}
.member-ilvl,
.member-mplus {
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    line-height: 1.5;
}
.member-ilvl {
    background: rgba(255,200,80,0.12);
    border: 1px solid rgba(255,200,80,0.3);
    color: var(--gold-bright);
}
.member-mplus {
    background: rgba(100,180,255,0.1);
    border: 1px solid rgba(100,180,255,0.25);
    color: #7ec8ff;
}
.char-portrait-sm {
    width: 36px; height: 36px;
    border-radius: 4px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 0.45rem;
    border: 1px solid var(--line);
}

/* ── application form ────────────────────────────────── */
.form-wrap { padding: 2rem 1.5rem 4rem; max-width: 880px; }

.apply-form {
    display: flex; flex-direction: column; gap: 2rem;
}
.form-section {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    padding: 1.25rem 1.5rem 1.5rem;
}
.form-section legend {
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.95rem; color: var(--gold-bright);
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0 0.5rem;
}
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-row:last-child { margin-bottom: 0; }
.form-row .form-field--small { max-width: 160px; }

.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-field:last-child { margin-bottom: 0; }
.form-field label {
    font-size: 0.85rem; font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
.form-field .req { color: var(--copper); margin-left: 2px; }

.form-field input,
.form-field select,
.form-field textarea { width: 100%; }
.form-field input[type="checkbox"],
.form-field input[type="radio"] { width: auto; }
.form-field textarea { min-height: 80px; }

.radio-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.radio-pill {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-0);
    color: var(--text-dim);
    font-size: 0.9rem;
    transition: border-color 120ms, color 120ms, background 120ms;
}
.radio-pill input { accent-color: var(--gold-bright); margin: 0; }
.radio-pill:hover { border-color: var(--copper); color: var(--text); }
.radio-pill:has(input:checked) {
    border-color: var(--gold-bright);
    color: var(--parchment);
    background: linear-gradient(180deg, rgba(217,164,65,0.18), rgba(217,164,65,0.05));
}

.form-error {
    color: #ffaaaa;
    font-size: 0.82rem;
    margin: 0;
}

.form-actions { display: flex; justify-content: flex-end; gap: 1rem; }
.form-actions .btn { min-width: 220px; }

/* honeypot — invisible to humans */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.thanks-card {
    margin: 2rem 0 4rem;
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold-bright);
    border-radius: var(--radius);
    padding: 2rem;
    color: var(--text-dim);
}
.thanks-card p { margin: 0.5rem 0; }

/* ── raids page ──────────────────────────────────────── */
.raids-page { padding: 2rem 1.5rem 4rem; max-width: 980px; }

.tier-card {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
}
.tier-card--current { border-left: 3px solid var(--gold-bright); }

.tier-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.tier-eyebrow {
    display: block; font-size: 0.75rem; font-weight: 600;
    color: var(--gold-bright);
    text-transform: uppercase; letter-spacing: 0.12em;
    margin-bottom: 0.4rem;
}
.tier-head h2 { margin: 0; font-size: clamp(1.4rem, 2vw + 0.6rem, 2rem); }

.tier-summary {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw + 0.4rem, 2.6rem);
    font-weight: 900;
    color: var(--parchment);
    background: linear-gradient(135deg, var(--copper), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    letter-spacing: 0.04em;
}

.difficulty-rows { display: flex; flex-direction: column; gap: 0.65rem; }

.difficulty-row {
    display: grid;
    grid-template-columns: 80px 1fr 90px;
    gap: 1rem;
    align-items: center;
}
@media (max-width: 600px) {
    .difficulty-row { grid-template-columns: 70px 1fr 70px; gap: 0.6rem; }
}

.diff-label {
    font-family: var(--font-display);
    font-weight: 700; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.diff--normal .diff-label  { color: #67c0f5; }
.diff--heroic .diff-label  { color: #c9a4ff; }
.diff--mythic .diff-label  { color: #ff7cb1; }

.diff-bar {
    height: 12px;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.diff-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--copper), var(--gold-bright));
    border-radius: 999px;
    transition: width 600ms ease-out;
}
.diff--normal .diff-fill { background: linear-gradient(90deg, #1f6fb0, #67c0f5); }
.diff--heroic .diff-fill { background: linear-gradient(90deg, #6a3aa1, #c9a4ff); }
.diff--mythic .diff-fill { background: linear-gradient(90deg, #a02651, #ff7cb1); }

.diff-count {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rankings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.rank-block {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.85rem 1rem;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 4px;
}
.rank-diff {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}
.rank-line {
    color: var(--text-dim); font-size: 0.85rem;
    display: flex; justify-content: space-between; gap: 0.5rem;
}
.rank-num {
    font-family: var(--font-display); font-weight: 700;
    color: var(--gold-bright);
}

.tier-card--past { opacity: 0.85; }
.tier-card--past .tier-summary { font-size: 1.2rem; }

/* ── Historic progression ─────────────────────────────────────── */
.past-progression { margin-top: 0.5rem; }
.past-progression-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.6rem;
    margin-bottom: 1.75rem;
}
.expansion-group { margin-bottom: 2rem; }
.expansion-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin: 0 0 0.75rem;
}
.past-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}
.past-tier-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}
.past-tier-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--parchment);
    margin-bottom: 0.4rem;
    line-height: 1.3;
}
.past-tier-summary {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--copper), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.6rem;
    line-height: 1;
}
.past-diff-pills { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.diff-pill {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.diff--normal.diff-pill { color: #67c0f5; border: 1px solid #1f6fb066; background: #1f6fb018; }
.diff--heroic.diff-pill { color: #c9a4ff; border: 1px solid #6a3aa166; background: #6a3aa118; }
.diff--mythic.diff-pill { color: #ff7cb1; border: 1px solid #a0265166; background: #a0265118; }

/* ── recruitment status ─────────────────────────────────── */
.rec-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.28rem 0.7rem; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap;
}
.rec-pill--open        { background: rgba(80,160,80,0.14);  border-color: rgba(80,160,80,0.35);  color: #95d695; }
.rec-pill--considering { background: rgba(217,164,65,0.14); border-color: rgba(217,164,65,0.35); color: var(--gold-bright); }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.rec-pill-note { font-weight: 400; color: var(--text-dim); }

.rec-section {
    padding: 2.5rem 0; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}
.rec-section-title {
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.4rem);
    margin-bottom: 1.25rem;
}
.rec-roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}
.rec-role-group {}
.rec-role-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--muted);
    margin: 0 0 0.6rem;
}
.rec-specs { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rec-footnote {
    margin-top: 1.5rem; font-size: 0.88rem;
    color: var(--muted); font-style: italic;
}

/* ── Recruitment status table (public /recruit page) ── */
.rec-table-wrap { overflow-x: auto; }
.rec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.rec-table thead th {
    text-align: left;
    padding: 0.5rem 0.85rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
}
.rec-table tbody td { padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rec-row--closed td { opacity: 0.5; }
.rec-role-cell {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    white-space: nowrap;
    vertical-align: top;
    padding-top: 0.85rem !important;
    border-right: 1px solid var(--line);
}
.rec-spec-cell { font-weight: 600; color: var(--text); }
.rec-class-cell { display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.rec-class-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.rec-note-cell { font-size: 0.82rem; color: var(--muted); }
.rec-status-badge {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rec-status--open        { background: rgba(80,160,80,0.14);  border-color: rgba(80,160,80,0.35);  color: #95d695; }
.rec-status--considering { background: rgba(217,164,65,0.14); border-color: rgba(217,164,65,0.35); color: var(--gold-bright); }
.rec-status--closed      { background: rgba(100,100,100,0.1); border-color: rgba(100,100,100,0.25); color: var(--muted); }

.cta-open-spots {
    display: flex; flex-wrap: wrap; gap: 0.45rem;
    justify-content: center; margin-bottom: 1.5rem;
}

.raids-meta {
    margin-top: 1rem; padding: 0.85rem 1rem;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.9rem;
    display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
}

/* ── login + admin ──────────────────────────────────── */
.login-wrap { max-width: 440px; padding: 2rem 1.5rem 4rem; }
.login-form { display: flex; flex-direction: column; gap: 1.25rem; }

.admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    max-width: 1200px; margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    align-items: start;
}
@media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } }

.admin-side {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    position: sticky; top: 88px;
}
.admin-side-head { padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.admin-eyebrow {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--gold-bright);
}
.admin-user { margin: 0.5rem 0 0; color: var(--text); font-size: 0.95rem; }
.admin-role { margin: 0; color: var(--muted); font-size: 0.8rem; }

.admin-nav { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-nav a {
    color: var(--text-dim);
    padding: 0.55rem 0.75rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 100ms, color 100ms;
}
.admin-nav a:hover { background: var(--bg-0); color: var(--gold-bright); }
.admin-nav a.active {
    background: rgba(217,164,65,0.12);
    color: var(--gold-bright);
    border-left: 3px solid var(--gold-bright);
    padding-left: calc(0.75rem - 3px);
}
.admin-logout { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.admin-logout button { width: 100%; padding: 0.5rem; font-size: 0.85rem; }

.admin-main { min-width: 0; }

.admin-page-head { margin-bottom: 2rem; }
.admin-page-head h1 { margin: 0.4rem 0 0.3rem; }
.admin-page-head h1 .muted { font-weight: 400; font-size: 0.7em; }
.admin-page-head--actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.admin-section {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.admin-section h2, .admin-section h3 { margin-top: 0; }
.admin-actions { margin-top: 1rem; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
}
.stat-card {
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1rem;
    text-decoration: none;
    color: var(--text-dim);
    transition: transform 90ms, border-color 100ms;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.stat-card:hover { transform: translateY(-1px); border-color: var(--copper); color: var(--text); }
.stat-num {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 900;
    color: var(--parchment);
    line-height: 1;
}
.stat-label {
    font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted);
}
.stat--new       { border-left: 3px solid var(--gold-bright); }
.stat--reviewing { border-left: 3px solid #c9a4ff; }
.stat--accepted  { border-left: 3px solid #95d695; }
.stat--rejected  { border-left: 3px solid #ff8888; }
.stat--withdrawn { border-left: 3px solid var(--muted); }
.stat--info      { border-left: 3px solid var(--copper); }

.status-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.status-filter a {
    padding: 0.4rem 0.85rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text-dim);
    text-decoration: none;
}
.status-filter a:hover { border-color: var(--copper); color: var(--text); }
.status-filter a.active {
    background: var(--gold-bright);
    color: #1a120a;
    border-color: var(--gold-bright);
}
.filter-count { opacity: 0.7; margin-left: 0.3rem; }

.apps-table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.apps-table th, .apps-table td {
    text-align: left; padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
}
.apps-table th {
    background: var(--bg-1);
    font-family: var(--font-display); font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--muted);
}
.apps-table tbody tr:hover { background: rgba(217,164,65,0.04); }

.role-pill, .status-pill {
    display: inline-block; padding: 0.15rem 0.55rem;
    border-radius: 999px; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    border: 1px solid var(--line);
}
.role--tank   { background: rgba(31,111,176,0.15);  color: #67c0f5; border-color: rgba(31,111,176,0.4); }
.role--healer { background: rgba(46,204,113,0.15);  color: #95d695; border-color: rgba(46,204,113,0.4); }
.role--dps    { background: rgba(231,76,60,0.15);   color: #ff8888; border-color: rgba(231,76,60,0.4); }

.status--new       { background: rgba(217,164,65,0.15); color: var(--gold-bright); border-color: rgba(217,164,65,0.4); }
.status--reviewing { background: rgba(155,103,217,0.18); color: #c9a4ff; border-color: rgba(155,103,217,0.4); }
.status--accepted  { background: rgba(46,204,113,0.15);  color: #95d695; border-color: rgba(46,204,113,0.4); }
.status--rejected  { background: rgba(231,76,60,0.15);   color: #ff8888; border-color: rgba(231,76,60,0.4); }
.status--withdrawn { background: var(--bg-0);            color: var(--muted); }

.link-arrow { font-weight: 600; font-size: 0.88rem; }

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.detail-block {
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1rem 1.25rem;
}
.detail-block--wide { grid-column: 1 / -1; }
.detail-block h3 {
    font-size: 0.85rem; font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gold-bright);
    margin-top: 0; margin-bottom: 0.85rem;
}
.defs { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; }
.defs dt { color: var(--muted); font-size: 0.85rem; }
.defs dd { margin: 0; color: var(--text); font-size: 0.92rem; }
.link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.long-text { color: var(--text-dim); margin: 0; line-height: 1.6; white-space: pre-wrap; }

.review-form { display: flex; flex-direction: column; gap: 1rem; }

.flash-success {
    background: rgba(46,204,113,0.15);
    border: 1px solid rgba(46,204,113,0.4);
    color: #95d695;
    padding: 0.7rem 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}
.flash-error {
    background: rgba(231,76,60,0.15);
    border: 1px solid rgba(231,76,60,0.4);
    color: #ff8888;
    padding: 0.7rem 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

/* ── user management ─────────────────────────────────── */
.role--member       { background: rgba(180,180,180,0.12); color: var(--text-dim); border-color: var(--line); }
.role--officer      { background: rgba(217,164,65,0.15);  color: var(--gold-bright); border-color: rgba(217,164,65,0.4); }
.role--guild_master { background: rgba(231,76,60,0.18);   color: #ff9d8e; border-color: rgba(231,76,60,0.45); }
.role--admin        { background: rgba(155,103,217,0.18); color: #c9a4ff; border-color: rgba(155,103,217,0.4); }

.row--orphan  { background: rgba(231,76,60,0.06); }
.row--orphan td:first-child { box-shadow: inset 3px 0 0 rgba(231,76,60,0.6); }

/* ── raid team ───────────────────────────────────────── */
.roster-section-head {
    display: flex; align-items: baseline; gap: 0.6rem;
    margin: 2.2rem 0 0.8rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}
.roster-section-head h2 { margin: 0; font-size: 1.4rem; }
.roster-section-head .muted { font-size: 0.95rem; }

.raid-role-pill {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid;
    margin-left: 0.35rem;
    vertical-align: middle;
}
.raid-role--tank   { background: rgba(80,140,220,0.18);  color: #8cc0ff; border-color: rgba(80,140,220,0.5); }
.raid-role--healer { background: rgba(80,200,120,0.15);  color: #95dca7; border-color: rgba(80,200,120,0.45); }
.raid-role--melee  { background: rgba(220,120,80,0.18);  color: #ffae8a; border-color: rgba(220,120,80,0.5); }
.raid-role--ranged { background: rgba(160,100,220,0.18); color: #c39aff; border-color: rgba(160,100,220,0.5); }

/* ── raid-team admin form controls ──────────────────────── */
.raid-assign-form {
    display: flex; gap: 0.4rem; align-items: center;
}
.raid-select  { padding: 0.35rem 0.5rem; font-size: 0.88rem; flex-shrink: 0; }
.raid-note-input { padding: 0.35rem 0.6rem; font-size: 0.88rem; flex: 1; min-width: 8rem; }
.btn--sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; min-width: 0; }

/* ── raid team group header rows ────────────────────────── */
.raid-group-head td {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    border-top: 1px solid var(--line);
}
.raid-group-head--tank       td { color: #8cc0ff; background: rgba(80,140,220,0.08); }
.raid-group-head--healer     td { color: #95dca7; background: rgba(80,200,120,0.07); }
.raid-group-head--melee      td { color: #ffae8a; background: rgba(220,120,80,0.08); }
.raid-group-head--ranged     td { color: #c39aff; background: rgba(160,100,220,0.08); }
.raid-group-head--unassigned td { color: var(--muted); background: var(--bg-1); }

/* ── public roster role groups ──────────────────────────── */
.role-group { margin-bottom: 2rem; }
.role-heading {
    display: flex; align-items: baseline; gap: 0.6rem;
    font-size: 1rem; margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
}
.role-heading .role-name { font-family: var(--font-display); letter-spacing: 0.06em; }
.role-heading .class-count { font-size: 0.85rem; color: var(--muted); font-family: var(--font-body); font-weight: 400; }
.role-heading--tank   .role-name { color: #8cc0ff; }
.role-heading--healer .role-name { color: #95dca7; }
.role-heading--melee  .role-name { color: #ffae8a; }
.role-heading--ranged .role-name { color: #c39aff; }

/* ── log viewer ─────────────────────────────────────────── */
.log-toolbar {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 1rem; flex-wrap: wrap;
}
.log-filter-input {
    background: var(--bg-0);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    width: 18rem;
}
.log-filter-input::placeholder { color: var(--muted); }
.log-filter-input:focus { outline: none; border-color: var(--gold); }
.log-count { font-size: 0.8rem; margin-bottom: 0.5rem; }
.log-list {
    list-style: none; padding: 0; margin: 0;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.75rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}
.log-line {
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--line);
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.5;
}
.log-line:last-child { border-bottom: 0; }
.log-line--error   { background: rgba(231,76,60,0.08);   color: #ff9d8e; }
.log-line--warning { background: rgba(217,164,65,0.08);  color: var(--gold-bright); }
.log-line--debug   { color: var(--muted); }
.log-line--info    { color: var(--text-dim); }

.user-row-actions { display: flex; gap: 0.85rem; align-items: center; white-space: nowrap; }
.inline-delete { display: inline; margin: 0; }
.inline-delete button.link-danger {
    background: none; border: 0; padding: 0;
    color: #ff8888; font: inherit; cursor: pointer;
    font-size: 0.88rem; font-weight: 600;
}
.inline-delete button.link-danger:hover { color: #ffb0b0; text-decoration: underline; }

.field-error {
    color: #ff8888; font-size: 0.85rem; margin: 0.25rem 0 0;
}
.field-hint { font-size: 0.8rem; margin: 0.25rem 0 0; }


/* ── content management admin ───────────────────────────── */
.content-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.content-page-card {
    display: flex; flex-direction: column; gap: 0.4rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.content-page-card:hover { border-color: var(--gold); background: var(--bg-elev); color: var(--text); }
.content-page-card h2 { font-size: 1.1rem; margin: 0; color: var(--parchment); }
.content-page-card .link-arrow { color: var(--gold); font-size: 0.9rem; margin-top: auto; padding-top: 0.75rem; }

.content-group { margin-bottom: 2rem; }
.content-group-heading {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
    margin: 0 0 1.25rem;
}
.content-textarea { width: 100%; font-size: 0.9rem; line-height: 1.55; }

/* ── news listing page ───────────────────────────────── */
.news-section { padding: 2.5rem 0 4rem; }

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    margin-top: 2rem;
}

.news-card {
    background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: border-color 150ms, transform 150ms;
}
.news-card:hover { border-color: var(--copper); transform: translateY(-2px); }

.news-card__image-link { display: block; }
.news-card__image {
    height: 200px;
    overflow: hidden;
    background: var(--bg-0);
}
.news-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 200ms;
}
.news-card:hover .news-card__image img { transform: scale(1.03); }

.news-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.news-card__date {
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}
.news-card__title {
    font-size: 1.15rem;
    margin: 0 0 0.6rem;
    line-height: 1.3;
}
.news-card__title a { color: var(--parchment); }
.news-card__title a:hover { color: var(--gold-bright); }
.news-card__excerpt {
    color: var(--text-dim);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    flex: 1;
}
.news-card__read-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-bright);
    align-self: flex-start;
}
.news-card__read-more:hover { color: var(--parchment); }

/* ── single news post ────────────────────────────────── */
.news-post { padding-bottom: 5rem; }

.news-post__hero {
    width: 100%;
    max-height: 360px;
    overflow: hidden;
    background: var(--bg-0);
    border-radius: var(--radius);
    margin-top: 2rem;
}
.news-post__image {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.news-post__header {
    padding: 2.5rem 0 1.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
}
.news-post__back { margin: 0 0 1rem; font-size: 0.9rem; }
.news-post__date {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.news-post__title { margin-bottom: 0.75rem; color: var(--parchment); }
.news-post__excerpt {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin: 0;
}
.news-post__body { padding-bottom: 3rem; }

/* ── home page news widget ───────────────────────────── */
.home-news-heading {
    font-size: 1.1rem;
    color: var(--gold-bright);
    margin-bottom: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.home-news-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.home-news-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}
.home-news-title {
    color: var(--text);
    font-weight: 500;
    font-size: 0.97rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-news-title:hover { color: var(--gold-bright); }
.home-news-date {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.home-news-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-bright);
}
.home-news-more:hover { color: var(--parchment); }

/* ── home page blue posts widget ────────────────────── */
.home-blue-heading {
    font-size: 1.1rem;
    color: #6ab0f5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.home-blue-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.home-blue-item {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}
.home-blue-title {
    display: block;
    color: var(--text);
    font-weight: 500;
    font-size: 0.92rem;
    margin-bottom: 0.2rem;
}
.home-blue-title:hover { color: #6ab0f5; }
.home-blue-sub {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.78rem;
    color: var(--muted);
}
.home-blue-author { color: #6ab0f5; opacity: 0.8; }
.home-blue-more {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6ab0f5;
}
.home-blue-more:hover { color: var(--parchment); }

/* ── blue posts archive page ─────────────────────────── */
.bp-page { padding: 2rem 1.5rem 4rem; max-width: 780px; }
.bp-count { font-size: 0.85rem; margin-bottom: 1.5rem; }
.bp-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.bp-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
.bp-meta {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}
.bp-author { color: #6ab0f5; font-weight: 500; }
.bp-date { color: var(--muted); }
.bp-title {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
}
.bp-title:hover { color: #6ab0f5; }

.pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.pagination__btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--gold-bright);
    background: var(--bg-1);
}
.pagination__btn:hover { color: var(--parchment); border-color: var(--gold-bright); }
.pagination__btn--disabled {
    color: var(--muted);
    cursor: default;
    pointer-events: none;
}
.pagination__info { font-size: 0.85rem; color: var(--muted); }

/* ── admin news ──────────────────────────────────────── */
.news-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--line);
    display: block;
}
.btn--danger { color: #ffaaaa; border-color: rgba(139,26,26,0.4); }
.btn--danger:hover { border-color: var(--blood); color: #ffcccc; background: rgba(139,26,26,0.12); }

/* ── home streamer widget ────────────────────────────── */
.home-streamers {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}
.home-streamers-heading {
    font-size: 1.1rem;
    color: #b39ddb;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.streamer-carousel { position: relative; }
.streamer-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}
.streamer-card--live {
    border-color: #9146ff44;
    background: color-mix(in srgb, var(--bg-1) 90%, #9146ff 10%);
}
.streamer-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.streamer-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.streamer-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 3px;
    padding: 0.15em 0.45em;
    flex-shrink: 0;
}
.streamer-badge--live {
    background: #9146ff;
    color: #fff;
}
.streamer-badge--offline {
    background: var(--bg-2);
    color: var(--muted);
    border: 1px solid var(--line);
}
.streamer-card-meta {
    display: flex;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
}
.streamer-game { color: var(--text-dim); }
.streamer-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: #b39ddb;
}
.streamer-link:hover { color: var(--parchment); }
.streamer-dots {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
    justify-content: center;
}
.streamer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.streamer-dot--active { background: #b39ddb; }
.streamer-dot:hover { background: var(--muted); }

/* ── WoW token price bar ─────────────────────────────── */
.token-bar {
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    padding: 0.3rem 0;
    font-size: 0.78rem;
}
.token-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.token-bar-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.token-price {
    color: var(--text-dim);
}
.token-price strong {
    color: var(--gold-bright);
    font-weight: 600;
}

/* ── character profile page ──────────────────────────── */
.char-profile {
    padding: 2rem 1.5rem 4rem;
    max-width: 1200px;
}
.char-back {
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}
.char-back a { color: var(--muted); }
.char-back a:hover { color: var(--gold-bright); }
.char-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}
.char-portrait {
    flex-shrink: 0;
}
.char-portrait img {
    width: 120px;
    height: 120px;
    border-radius: var(--radius);
    border: 2px solid color-mix(in srgb, var(--class-colour, var(--line)) 40%, transparent);
    display: block;
}
.char-identity { flex: 1; }
.char-name {
    font-size: 2rem;
    color: color-mix(in srgb, var(--class-colour, var(--parchment)) 80%, var(--parchment));
    margin-bottom: 0.4rem;
}
.char-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--text-dim);
}
.char-sep { color: var(--line); }
.char-class { font-weight: 600; }
.char-role-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.char-team-label {
    font-size: 0.78rem;
    color: var(--muted);
}
.char-stats-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.char-stat {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem 1.25rem;
    text-align: center;
    min-width: 90px;
}
.char-stat--mplus .char-stat-value { color: #00ccff; }
.char-stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--gold-bright);
    line-height: 1.1;
}
.char-stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
}
.char-links { }
.char-links-heading {
    font-size: 1rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}
.char-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.char-ext-link {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    transition: border-color 0.15s, color 0.15s;
}
.char-ext-link:hover {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}
@media (max-width: 600px) {
    .char-header { flex-direction: column; }
    .char-portrait img { width: 90px; height: 90px; }
    .char-name { font-size: 1.5rem; }
}

/* char quick stats in header */
.char-quick-stats { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.char-quick-stat {
    font-size: 0.82rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0.15em 0.5em;
    color: var(--text-dim);
}
.char-quick-stat--mplus { color: #00ccff; }

/* char sections */
.char-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}
.char-section-heading {
    font-size: 1rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
.char-section-sub {
    font-size: 0.75rem;
    color: var(--muted);
    font-family: var(--font-body);
    letter-spacing: 0;
    font-weight: 400;
    text-transform: none;
}

/* ── WoW quality CSS custom properties ───────────────── */
:root {
    --q-poor:      #9d9d9d;
    --q-common:    #fff;
    --q-uncommon:  #1eff00;
    --q-rare:      #0070dd;
    --q-epic:      #a335ee;
    --q-legendary: #ff8000;
    --q-artifact:  #e6cc80;
}

/* ── armory layout ───────────────────────────────────── */
/*
 * Two-column grid (left gear | right gear).
 * Character render is position:absolute, fills the full layout height,
 * sits behind the columns (z-index: 0) so gear stays readable.
 */
.armory-layout {
    display: grid;
    grid-template-columns: 280px 280px;
    justify-content: space-between;
    position: relative;
    min-height: 400px;
}
@media (max-width: 820px) {
    .armory-layout { grid-template-columns: 220px 220px; }
}
@media (max-width: 640px) {
    .armory-layout { grid-template-columns: 1fr 1fr; }
    .armory-render  { display: none; }
}
@media (max-width: 440px) {
    .armory-layout { grid-template-columns: 1fr; }
    .armory-col--right { order: 2; }
}

.armory-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    z-index: 1;
}

/* Render: absolute overlay, fills full layout height, behind gear columns */
.armory-render {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 90%, var(--class-colour, transparent) 0%, transparent 60%);
    opacity: 0.9;
}
.armory-render-img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.8));
    pointer-events: auto;
}

.armory-weapons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.armory-weapons .gear-slot--weapon {
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}

/* ── gear slots ──────────────────────────────────────── */
.gear-slot {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    border: 1px solid transparent;
    border-left: 3px solid var(--q-color, var(--line));
    background: rgba(255,255,255,0.02);
    transition: background 0.15s;
}
.gear-slot:hover { background: rgba(255,255,255,0.05); }

.gear-slot--right {
    flex-direction: row-reverse;
    border-left: none;
    border-right: 3px solid var(--q-color, var(--line));
    text-align: right;
}
.gear-slot--right .gear-slot-info { align-items: flex-end; }
.gear-slot--right .gear-gems { justify-content: flex-end; }
.gear-slot--right .gear-slot-meta { justify-content: flex-end; }

.gear-slot--weapon {
    border-left: 3px solid var(--q-color, var(--line));
}

.gear-icon-wrap {
    flex-shrink: 0;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 2px solid var(--q-color, var(--line));
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.gear-icon-wrap:hover {
    box-shadow: 0 0 8px var(--q-color, var(--line));
}
.gear-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gear-slot-label {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gear-slot-info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    flex: 1;
}
.gear-slot-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.gear-item-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    color: var(--q-color, #fff);
}
.gear-item-name:hover { text-decoration: underline; }

/* WoW quality colour classes (for fallback / legacy use) */
.gear-q--poor      { color: var(--q-poor); }
.gear-q--common    { color: var(--q-common); }
.gear-q--uncommon  { color: var(--q-uncommon); }
.gear-q--rare      { color: var(--q-rare); }
.gear-q--epic      { color: var(--q-epic); }
.gear-q--legendary { color: var(--q-legendary); }
.gear-q--artifact  { color: var(--q-artifact); }

.gear-ilvl {
    font-size: 0.72rem;
    color: var(--muted);
}
.gear-enchant {
    font-size: 0.72rem;
    color: #a0c8f0;
}
.gear-gems {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.gear-gem {
    font-size: 0.68rem;
    color: #88d8b0;
}

/* ── stats ───────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-block {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--line);
}
.stat-block--health  { border-left-color: #21bf45; }
.stat-block--power   { border-left-color: #c41e3a; }
.stat-block--primary { border-left-color: var(--gold-bright); }
.stat-block--crit    { border-left-color: #f33; }
.stat-block--haste   { border-left-color: #5be; }
.stat-block--mastery { border-left-color: #a05fff; }
.stat-block--vers    { border-left-color: #e6a817; }
.stat-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat-name {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 0.2rem;
}

/* ── specs ───────────────────────────────────────────── */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 640px) { .specs-grid { grid-template-columns: 1fr; } }
.spec-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.spec-card--active {
    border-color: #1eff00;
}
.spec-status {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.spec-status--active   { color: #1eff00; }
.spec-status--inactive { color: var(--muted); }
.spec-name {
    font-size: 1.15rem;
    font-family: var(--font-display);
    color: var(--parchment);
}
.spec-hero {
    font-size: 0.85rem;
    color: var(--text-dim);
    padding: 0.25rem 0;
    border-top: 1px solid var(--line);
}
.spec-pvp-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.spec-pvp-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.spec-pvp-talent {
    font-size: 0.8rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spec-talent-link {
    font-size: 0.78rem;
    color: var(--gold-bright);
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}
.spec-talent-link:hover { color: var(--parchment); }

/* ── M+ recent runs ──────────────────────────────────── */
.mplus-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
@media (max-width: 860px) { .mplus-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px)  { .mplus-grid { grid-template-columns: repeat(2, 1fr); } }
.mplus-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--text);
    transition: border-color 0.15s;
}
.mplus-card:hover { border-color: var(--gold-bright); color: var(--text); }
.mplus-level {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--gold-bright);
    line-height: 1;
}
.mplus-dungeon {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}
.mplus-meta {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-top: 0.1rem;
}
.mplus-time {
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.mplus-rating {
    font-size: 0.78rem;
    color: var(--gold-bright);
    font-weight: 600;
}
.mplus-upgrades {
    display: flex;
    gap: 3px;
    margin-top: 0.2rem;
}
.mplus-upgrade-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-bright);
    display: inline-block;
}

/* ── Raid Schedule ───────────────────────────────────── */
.schedule-band {
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 2rem 0;
}
.schedule-band-inner {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    flex-wrap: wrap;
}
.schedule-band-heading {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gold);
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
}
.schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.schedule-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9rem;
}
.schedule-day {
    font-weight: 600;
    color: var(--parchment, var(--text));
    white-space: nowrap;
}
.schedule-time {
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.schedule-label {
    color: var(--muted);
}
.schedule-note {
    font-size: 0.78rem;
    color: var(--muted);
    font-style: italic;
}
.raids-schedule {
    padding-top: 1.5rem;
    padding-bottom: 0;
}
.raids-schedule-heading {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.75rem;
}
.schedule-row {
    display: flex;
    align-items: center;
    gap: 0.5rem 1.25rem;
    flex-wrap: wrap;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}
.schedule-row:last-child { border-bottom: none; }

/* ── Guides index ───────────────────────────────────── */
.guides-index { padding: 2rem 0; }
.guides-category { margin-bottom: 2.5rem; }
.guides-category-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}
.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.guide-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.guide-card:hover { border-color: var(--gold); background: var(--bg-2); }
.guide-card-cat  { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; }
.guide-card-title { font-size: 0.95rem; font-weight: 600; color: var(--parchment); }
.guide-card-sub  { font-size: 0.82rem; color: var(--muted); }

/* ── Guide single page ──────────────────────────────── */
.guide-body { padding: 2rem 0 3rem; }
.guide-content {
    max-width: 820px;
    line-height: 1.75;
    color: var(--text);
}
.guide-content h2 {
    font-family: var(--font-display);
    color: var(--parchment);
    font-size: 1.2rem;
    margin: 1.8em 0 0.5em;
}
.guide-content h3 {
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 1rem;
    margin: 1.4em 0 0.4em;
}
.guide-content ul, .guide-content ol { padding-left: 1.5em; margin: 0.5em 0 1em; }
.guide-content li { margin-bottom: 0.3em; }
.guide-content a { color: var(--gold-bright); }
.guide-content strong { color: var(--parchment); }
.page-breadcrumb { margin: 0 0 0.4rem; font-size: 0.88rem; }
.page-breadcrumb a { color: var(--gold); }

/* ── Warcraft Logs recent reports ───────────────────── */
.wcl-reports {
    padding: 2rem 0 0;
}
.wcl-reports-heading {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--gold);
    margin: 0 0 1rem;
    letter-spacing: 0.03em;
}
.wcl-report-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.wcl-report-card {
    display: grid;
    grid-template-columns: 180px 1fr auto auto;
    align-items: center;
    gap: 0.5rem 1.25rem;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.7rem 1rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color 120ms, background 120ms;
}
.wcl-report-card:hover {
    border-color: var(--gold);
    background: var(--bg-2);
    color: var(--text);
}
.wcl-report-zone {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcl-report-title {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wcl-report-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}
.wcl-report-arrow {
    color: var(--muted);
    font-size: 0.85rem;
}
@media (max-width: 700px) {
    .wcl-report-card {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .wcl-report-zone { grid-column: 1; }
    .wcl-report-title { grid-column: 1 / 3; }
    .wcl-report-meta  { grid-column: 1; }
    .wcl-report-arrow { grid-row: 1; grid-column: 2; }
}

/* ── M+ Leaderboard ──────────────────────────────────── */
.lb-wrap {
    overflow-x: auto;
    margin-top: 1.5rem;
}
.lb-table {
    width: 100%;
    border-collapse: collapse;
}
.lb-th {
    text-align: left;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
}
.lb-th--rank  { width: 3rem; text-align: center; }
.lb-th--score { width: 8rem; }
.lb-th--ilvl  { width: 6rem; }
.lb-th--links { width: 4rem; }
.lb-row {
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    transition: background 0.12s;
}
.lb-row:hover { background: rgba(255,255,255,0.03); }
.lb-row--top1 { border-left-color: #ffd700; }
.lb-row--top2 { border-left-color: #c0c0c0; }
.lb-row--top3 { border-left-color: #cd7f32; }
.lb-row td { padding: 0.6rem 0.75rem; vertical-align: middle; }
.lb-rank {
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.lb-row--top1 .lb-rank { color: #ffd700; font-weight: 700; }
.lb-row--top2 .lb-rank { color: #c0c0c0; font-weight: 700; }
.lb-row--top3 .lb-rank { color: #cd7f32; font-weight: 700; }
.lb-player {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.lb-portrait {
    width: 36px;
    height: 36px;
    border-radius: 3px;
    border: 2px solid var(--class-colour, var(--line));
    flex-shrink: 0;
}
.lb-name {
    font-weight: 600;
    color: var(--class-colour, var(--text));
    text-decoration: none;
    display: block;
}
.lb-name:hover { text-decoration: underline; }
.lb-class {
    font-size: 0.78rem;
    color: var(--muted);
}
.lb-score-num {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.lb-row--top1 .lb-score-num { color: #ffd700; }
.lb-row--top2 .lb-score-num { color: #c0c0c0; }
.lb-row--top3 .lb-score-num { color: #cd7f32; }
.lb-ilvl-cell {
    color: var(--muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.lb-ext-link {
    font-size: 0.75rem;
    color: var(--muted);
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: color 0.15s, border-color 0.15s;
}
.lb-ext-link:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* ── Raid sign-up cards ──────────────────────────────── */
.signup-raid {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.signup-raid-header {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
}
.signup-counts {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
}
.signup-count {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--line);
    color: var(--muted);
    background: var(--bg-0);
}
.signup-count--signed    { color: #95d695; border-color: rgba(80,160,80,0.4);  background: rgba(80,160,80,0.1); }
.signup-count--tentative { color: var(--gold-bright); border-color: rgba(217,164,65,0.4); background: rgba(217,164,65,0.1); }
.signup-count--absent    { color: #ff8888; border-color: rgba(231,76,60,0.4);  background: rgba(231,76,60,0.1); }

.signup-actions { padding: 0.85rem 1.25rem; }
.signup-btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn-signup {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-0);
    color: var(--text-dim);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms, background 120ms, color 120ms;
    font-family: inherit;
    white-space: nowrap;
}
.btn-signup:hover { border-color: var(--copper); color: var(--text); background: var(--bg-1); }

.btn-signup--signed.active  { border-color: rgba(80,160,80,0.7);  color: #95d695; background: rgba(80,160,80,0.14); }
.btn-signup--signed:hover   { border-color: rgba(80,160,80,0.6);  color: #95d695; background: rgba(80,160,80,0.1); }
.btn-signup--tentative.active { border-color: rgba(217,164,65,0.7); color: var(--gold-bright); background: rgba(217,164,65,0.14); }
.btn-signup--tentative:hover  { border-color: rgba(217,164,65,0.6); color: var(--gold-bright); background: rgba(217,164,65,0.1); }
.btn-signup--absent.active  { border-color: rgba(231,76,60,0.7);  color: #ff8888; background: rgba(231,76,60,0.14); }
.btn-signup--absent:hover   { border-color: rgba(231,76,60,0.6);  color: #ff8888; background: rgba(231,76,60,0.1); }
.btn-signup--remove:hover   { border-color: var(--muted); color: var(--muted); }

.signup-login-prompt { padding: 0.75rem 1.25rem; margin: 0; font-size: 0.9rem; }

/* Status pills in admin signups table */
.signup-status-pill {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}
.signup-status--signed    { color: #95d695; border-color: rgba(80,160,80,0.4);  background: rgba(80,160,80,0.1); }
.signup-status--tentative { color: var(--gold-bright); border-color: rgba(217,164,65,0.4); background: rgba(217,164,65,0.1); }
.signup-status--absent    { color: #ff8888; border-color: rgba(231,76,60,0.4);  background: rgba(231,76,60,0.1); }

/* Admin signup count pills */
.signup-admin-counts { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.signup-count-admin {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
}
.signup-count-admin--signed    { color: #95d695; border-color: rgba(80,160,80,0.4);  background: rgba(80,160,80,0.1); }
.signup-count-admin--tentative { color: var(--gold-bright); border-color: rgba(217,164,65,0.4); background: rgba(217,164,65,0.1); }
.signup-count-admin--absent    { color: #ff8888; border-color: rgba(231,76,60,0.4);  background: rgba(231,76,60,0.1); }

/* ── utility ─────────────────────────────────────────── */
.muted { color: var(--muted); }

/* ═══════════════════════════════════════════════════════
   MOBILE / RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* ── Hamburger nav toggle (hidden on desktop) ──────── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 6px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-dim);
    border-radius: 2px;
    transition: transform 200ms, opacity 150ms;
}
.nav-toggle:hover { border-color: var(--gold); }
.nav-toggle:hover .nav-toggle-bar { background: var(--gold-bright); }

/* Animate bars to X when open */
.nav-toggle--open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle--open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle--open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
    /* Show hamburger, hide nav by default */
    .nav-toggle { display: flex; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--bg-2);
        border-bottom: 2px solid var(--gold);
        box-shadow: 0 8px 24px rgba(0,0,0,0.55);
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
        z-index: 200;
    }
    .site-nav.nav-open { display: flex; }

    .site-nav a {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--line);
        border-left: none;
    }
    .site-nav a:last-child { border-bottom: none; }
    .site-nav a.cta {
        margin: 0.5rem 1.5rem 0.25rem;
        text-align: center;
        padding: 0.65rem 1rem;
        border-radius: var(--radius);
    }
    .site-nav a.nav-officer {
        margin: 0.25rem 1.5rem 0.5rem;
        text-align: center;
        border-radius: var(--radius);
    }

    /* header needs position:relative for the dropdown */
    .site-header { position: sticky; top: 0; z-index: 100; }
    .header-inner { position: relative; }
}

/* ── Roster member cards ───────────────────────────── */
@media (max-width: 860px) {
    .member-card { width: calc(50% - 0.3rem); flex-shrink: 1; }
}
@media (max-width: 540px) {
    .member-card { width: 100%; flex-shrink: 1; }
}

/* ── Admin section head (title + action row) ────────── */
.admin-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.admin-section-head h2 { margin: 0; }

/* ── Notice cards ─────────────────────────────────── */
.notice-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 0.75rem; }
.notice-card--pinned { border-left: 3px solid var(--gold-bright); }
.notice-card-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.notice-card-title { font-weight: 600; margin: 0; }
.notice-card-body { font-size: 0.92rem; color: var(--text-dim); }
.notice-card-body p { margin: 0.25rem 0; }
.notice-card-meta { font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0; }

/* ── Filter bar (roster / leaderboard) ─────────────── */
.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: 0 var(--container-pad, 1.5rem); }
.filter-btn { padding: 0.35rem 0.8rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; color: var(--text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.filter-btn:hover { border-color: var(--copper); color: var(--text); }
.filter-btn.active { background: var(--copper); border-color: var(--copper); color: #fff; }

/* ── Pagination ───────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem 0; }
.pagination-btn { padding: 0.45rem 1rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-dim); text-decoration: none; font-size: 0.9rem; transition: border-color 0.15s, color 0.15s; }
.pagination-btn:hover { border-color: var(--copper); color: var(--text); }
.pagination-info { font-size: 0.9rem; color: var(--muted); }

/* ── Admin tables — horizontal scroll on mobile ───── */
@media (max-width: 700px) {
    .apps-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-section-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .admin-page-head--actions { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ── AH & Crafting ─────────────────────────────────── */
.profession-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.profession-card { display: flex; align-items: center; gap: 0.75rem; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; text-decoration: none; color: var(--text); transition: border-color 0.15s; }
.profession-card:hover { border-color: var(--copper); }
.profession-icon { width: 40px; height: 40px; border-radius: 6px; }
.profession-icon-placeholder { font-size: 1.6rem; line-height: 1; }
.profession-name { display: block; font-weight: 600; }
.profession-count { display: block; font-size: 0.82rem; color: var(--muted); }
.item-icon-sm { width: 20px; height: 20px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.item-icon-lg { width: 56px; height: 56px; border-radius: 8px; }
.recipe-output { display: flex; align-items: center; gap: 1rem; }
.recipe-item-name { font-size: 1.1rem; font-weight: 600; margin: 0; }
.recipe-total-row td { background: var(--bg-2); border-top: 2px solid var(--line); }
.price-gold   { color: #f0c040; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-profit { color: #4caf50; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-loss   { color: #e55;    font-weight: 600; font-variant-numeric: tabular-nums; }

/* Guide shopping list */
.guide-shopping-list {
    background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 2rem; overflow: hidden;
}
.guide-shopping-list__title {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; cursor: pointer; user-select: none;
    font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--parchment);
    list-style: none;
}
.guide-shopping-list__title::-webkit-details-marker { display: none; }
.guide-shopping-list__title::before { content: '▸'; font-size: 0.7em; color: var(--gold); transition: transform 0.15s; }
details[open] .guide-shopping-list__title::before { transform: rotate(90deg); }
.guide-shopping-list__total-chip {
    margin-left: auto; background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 20px; padding: 0.15rem 0.65rem; font-size: 0.82rem;
    font-family: var(--font-body); color: var(--gold-bright); font-weight: 600;
}
.guide-shopping-list__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.guide-shopping-list__table th {
    background: var(--bg-2); padding: 0.4rem 0.75rem; text-align: left;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); border-top: 1px solid var(--line);
}
.guide-shopping-list__table td { padding: 0.4rem 0.75rem; border-top: 1px solid rgba(255,255,255,0.04); }
.guide-shopping-list__table tfoot td { border-top: 1px solid var(--line); background: var(--bg-2); }
.guide-shopping-list__icon-cell { width: 36px; padding-right: 0; }
.guide-shopping-list__qty  { color: var(--muted); font-variant-numeric: tabular-nums; }
.guide-shopping-list__price { font-variant-numeric: tabular-nums; text-align: right; }
.guide-shopping-list__grand-label { text-align: right; font-weight: 600; color: var(--text-dim); }
.guide-shopping-list__grand-total { font-weight: 700; color: var(--gold-bright); font-size: 1rem; }
.guide-shopping-list__note { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
.item-rank-badge {
    display: inline-block; background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 3px; padding: 0 0.3em; font-size: 0.75em; color: var(--gold);
    font-weight: 700; vertical-align: middle; margin-left: 0.3em;
}

/* Inline item price chips (shortcodes) */
.item-chip {
    display: inline-flex; align-items: center; gap: 0.3em;
    background: var(--bg-1); border: 1px solid var(--line); border-radius: 4px;
    padding: 0.05em 0.5em 0.05em 0.2em; font-size: 0.88em; vertical-align: middle; white-space: nowrap;
}
.item-chip__icon { width: 18px; height: 18px; border-radius: 2px; flex-shrink: 0; }
.item-chip__name { color: var(--text); }
.item-chip__price { color: var(--gold-bright); font-variant-numeric: tabular-nums; margin-left: 0.25em; font-weight: 600; }
.price-chart-wrap { margin-bottom: 1.5rem; }
.price-chart-label { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.4rem; }
.setup-steps { padding-left: 1.25rem; }
.setup-steps li { margin-bottom: 1rem; line-height: 1.6; }
.setup-steps li.done { color: var(--muted); }
.code-block { background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.9rem; }
.code-block code { font-family: monospace; font-size: 0.82rem; word-break: break-all; color: #95d695; }
.admin-eyebrow a { color: var(--copper); text-decoration: none; }
.admin-eyebrow a:hover { text-decoration: underline; }

/* ── Raids page ────────────────────────────────────── */
@media (max-width: 600px) {
    .raids-page { padding: 1.5rem 1rem 3rem; }
    .tier-head { flex-direction: column; gap: 0.5rem; }
    .tier-summary { font-size: 1.6rem; }
}

/* ── Schedule strip on home ────────────────────────── */
@media (max-width: 600px) {
    .schedule-item { flex-wrap: wrap; gap: 0.25rem 0.6rem; }
}

/* ── Page header padding ───────────────────────────── */
@media (max-width: 600px) {
    .page-header .container { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .home-top { padding: 2rem 0 2.5rem; }
    .container { padding: 0 1rem; }
}

/* ── Token bar ─────────────────────────────────────── */
@media (max-width: 480px) {
    .token-bar-inner { font-size: 0.8rem; gap: 0.5rem; }
}

/* ── Professions / Crafting pages ──────────────────── */
.crafting-index { padding: 2rem 0 3rem; }

.professions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.prof-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.prof-card:hover { border-color: var(--gold); background: var(--bg-2); }

.prof-card-icon {
    width: 36px; height: 36px;
    border-radius: 4px;
    object-fit: cover;
    margin-bottom: 0.2rem;
}
.prof-card-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--parchment);
    font-weight: 600;
}
.prof-card-count { font-size: 0.8rem; color: var(--muted); }

/* Profession detail page */
.crafting-prof-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.crafting-prof-icon {
    width: 48px; height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.crafting-section { padding: 1.5rem 0 3rem; }

.crafting-table-wrap { overflow-x: auto; }

.crafting-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.crafting-table thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
    white-space: nowrap;
}
.crafting-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(59,45,29,0.5);
    vertical-align: top;
}
.crafting-table tbody tr:hover { background: rgba(217,164,65,0.04); }
.crafting-row--unpriced td { opacity: 0.6; }

.crafting-cost-col { text-align: right; }
.crafting-cost-cell { text-align: right; white-space: nowrap; }

.crafting-name-cell { white-space: nowrap; }
.crafting-item-link { color: var(--parchment); display: inline-flex; align-items: center; gap: 0.35rem; }
.crafting-item-link:hover { color: var(--gold-bright); }
.crafting-item-icon { border-radius: 3px; vertical-align: middle; flex-shrink: 0; }
.crafting-qty { font-size: 0.8rem; color: var(--muted); margin-left: 0.2rem; }

.crafting-cat-cell { white-space: nowrap; }
.crafting-cat-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.crafting-reagents-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    align-items: baseline;
}
.crafting-reagent {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.84rem;
    color: var(--text-dim);
    white-space: nowrap;
}
.crafting-reagent a { color: var(--text-dim); }
.crafting-reagent a:hover { color: var(--gold-bright); }
.crafting-reagent-price { color: var(--muted); font-size: 0.8rem; }

/* WoW currency colours */
.wg { color: #f0c869; font-weight: 600; }
.ws { color: #c0c0c0; font-weight: 600; }
.wc { color: var(--copper); font-weight: 600; }

.crafting-cost { font-weight: 600; font-size: 0.92rem; }
.crafting-cost--partial { color: var(--muted); font-size: 0.82rem; font-style: italic; }
.crafting-cost--none { color: var(--muted); }

.crafting-tier { margin-bottom: 1.5rem; }
.crafting-tier-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gold);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0.25rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}
.crafting-tier-name::-webkit-details-marker { display: none; }
.crafting-tier-name::before {
    content: '▶';
    font-size: 0.65rem;
    color: var(--muted);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.crafting-tier[open] > .crafting-tier-name::before { transform: rotate(90deg); }
.crafting-tier-name:hover { color: var(--gold-bright); }

.crafting-profit { color: #5abf6a; font-weight: 600; font-size: 0.92rem; }
.crafting-loss   { color: #d9534f; font-weight: 600; font-size: 0.92rem; }

.crafting-tier-body { padding-top: 0.25rem; }
.crafting-cat-group { margin-bottom: 1.25rem; }
.crafting-cat-heading {
    font-family: var(--font-display);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 0 0 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(59,45,29,0.5);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    user-select: none;
}
.crafting-cat-heading::-webkit-details-marker { display: none; }
.crafting-cat-heading::before {
    content: '▶';
    font-size: 0.55rem;
    color: var(--muted);
    transition: transform 0.15s;
    flex-shrink: 0;
}
.crafting-cat-group[open] > .crafting-cat-heading::before { transform: rotate(90deg); }
.crafting-cat-heading:hover { color: var(--gold); }

@media (max-width: 768px) {
    .professions-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .crafting-cat-cell { display: none; }
}
@media (max-width: 500px) {
    .crafting-prof-header { flex-direction: column; gap: 0.5rem; }
}