/* _content/Nytharis.Portal.Web/Components/Pages/ClassGuide.razor.rz.scp.css */
.class-guide-page[b-4ltgg9n65z] {
    --class-accent: var(--gold);
    width: min(100%, 1240px);
    margin: 0 auto;
    padding: clamp(34px, 5vw, 68px) 28px clamp(72px, 8vw, 112px);
}

.class-guide-page.is-warrior[b-4ltgg9n65z] { --class-accent: var(--red); }
.class-guide-page.is-sorcerer[b-4ltgg9n65z] { --class-accent: var(--blue); }
.class-guide-page.is-ranger[b-4ltgg9n65z] { --class-accent: var(--green); }
.class-guide-page.is-rogue[b-4ltgg9n65z] { --class-accent: var(--purple); }

.class-guide-breadcrumb[b-4ltgg9n65z] { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; color: var(--dim); font-size: 12px; }
.class-guide-breadcrumb a[b-4ltgg9n65z] { color: var(--mut); }
.class-guide-breadcrumb a:hover[b-4ltgg9n65z] { color: var(--gold); }
.class-guide-breadcrumb i[b-4ltgg9n65z] { color: var(--dim); font-size: 11px; }

.class-guide-hero[b-4ltgg9n65z] { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 170px; align-items: center; gap: 24px; min-height: 248px; padding: 34px 38px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--class-accent) 28%, transparent); border-radius: 20px; background: radial-gradient(620px 300px at 0% 0%, color-mix(in srgb, var(--class-accent) 16%, transparent), transparent 70%), linear-gradient(120deg, #17130f 0%, #11151b 56%, #0d1218 100%); box-shadow: 0 22px 60px rgba(0, 0, 0, .22); }
.class-guide-hero[b-4ltgg9n65z]::after { content: ""; position: absolute; right: -90px; bottom: -150px; width: 340px; height: 340px; border: 1px solid color-mix(in srgb, var(--class-accent) 22%, transparent); border-radius: 50%; box-shadow: 0 0 0 28px color-mix(in srgb, var(--class-accent) 4%, transparent), 0 0 90px color-mix(in srgb, var(--class-accent) 10%, transparent); }
.class-guide-hero-glow[b-4ltgg9n65z] { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(430px 220px at 84% 42%, color-mix(in srgb, var(--class-accent) 12%, transparent), transparent 70%); }
.class-guide-hero-icon[b-4ltgg9n65z], .class-guide-hero-copy[b-4ltgg9n65z], .class-guide-hero-mark[b-4ltgg9n65z] { position: relative; z-index: 1; }
.class-guide-hero-icon[b-4ltgg9n65z] { width: 96px; height: 96px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--class-accent) 44%, transparent); border-radius: 24px; color: var(--class-accent); background: rgba(7, 8, 10, .48); box-shadow: inset 0 0 28px color-mix(in srgb, var(--class-accent) 7%, transparent), 0 0 34px color-mix(in srgb, var(--class-accent) 10%, transparent); font-size: 45px; }
.class-guide-hero h1[b-4ltgg9n65z] { margin: 12px 0 8px; color: var(--ink); font: 700 clamp(42px, 5vw, 66px)/.98 var(--font-head); letter-spacing: -.02em; }
.class-guide-hero p[b-4ltgg9n65z] { max-width: 590px; margin: 0; color: var(--mut); font-size: 17px; line-height: 1.55; }
.class-guide-hero-meta[b-4ltgg9n65z] { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; color: var(--dim); font: 500 11px/1.2 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.class-guide-badge[b-4ltgg9n65z] { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--class-accent) 36%, transparent); border-radius: 999px; color: var(--class-accent); background: color-mix(in srgb, var(--class-accent) 8%, transparent); font-weight: 700; }
.class-guide-hero-mark[b-4ltgg9n65z] { display: grid; justify-items: center; gap: 12px; color: color-mix(in srgb, var(--class-accent) 45%, transparent); }
.class-guide-hero-mark i[b-4ltgg9n65z] { font-size: 68px; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--class-accent) 24%, transparent)); }
.class-guide-hero-mark span[b-4ltgg9n65z] { font: 600 9px/1 var(--font-mono); letter-spacing: .3em; }

.class-guide-tabs[b-4ltgg9n65z] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 22px 0 34px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .022); }
.class-guide-tabs a[b-4ltgg9n65z], .class-guide-tabs span[b-4ltgg9n65z] { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 8px; color: var(--mut); font-size: 12.5px; font-weight: 700; }
.class-guide-tabs a:hover[b-4ltgg9n65z], .class-guide-tabs a.is-active[b-4ltgg9n65z] { color: var(--gold); background: rgba(226, 182, 89, .1); }
.class-guide-tabs span[b-4ltgg9n65z] { opacity: .58; }
.class-guide-tabs small[b-4ltgg9n65z], .class-guide-mobile-links small[b-4ltgg9n65z] { color: var(--gold); font: 700 8px/1 var(--font-mono); letter-spacing: .08em; }
.class-guide-mobile-nav[b-4ltgg9n65z] { display: none; }

.class-guide-layout[b-4ltgg9n65z] { display: grid; grid-template-columns: minmax(0, 1fr) 294px; gap: 22px; align-items: start; }
.class-guide-main[b-4ltgg9n65z] { display: grid; gap: 18px; min-width: 0; }
.class-guide-panel[b-4ltgg9n65z], .class-guide-rail-card[b-4ltgg9n65z] { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--panel), #10141a); }
.class-guide-panel[b-4ltgg9n65z] { padding: clamp(24px, 3.2vw, 36px); }
.class-guide-panel-heading[b-4ltgg9n65z] { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.class-guide-panel-heading h2[b-4ltgg9n65z] { margin: 9px 0 0; color: var(--ink); font: 600 clamp(25px, 3vw, 34px)/1.08 var(--font-head); letter-spacing: -.01em; }
.class-guide-panel-number[b-4ltgg9n65z] { color: color-mix(in srgb, var(--class-accent) 55%, var(--dim)); font: 700 12px/1 var(--font-mono); letter-spacing: .15em; }
.class-guide-panel p[b-4ltgg9n65z] { color: var(--mut); font-size: 15px; line-height: 1.7; }
.class-guide-overview[b-4ltgg9n65z] { position: relative; overflow: hidden; }
.class-guide-overview[b-4ltgg9n65z]::after { content: ""; position: absolute; right: -70px; top: -80px; width: 210px; height: 210px; border: 1px solid color-mix(in srgb, var(--class-accent) 15%, transparent); border-radius: 50%; pointer-events: none; }
.class-guide-lead[b-4ltgg9n65z] { max-width: 680px; margin: 24px 0 5px; color: var(--ink) !important; font: 600 19px/1.55 var(--font-head) !important; }
.class-guide-note[b-4ltgg9n65z] { position: relative; z-index: 1; display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 14px 15px; border: 1px solid color-mix(in srgb, var(--class-accent) 18%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--class-accent) 5%, transparent); }
.class-guide-note > i[b-4ltgg9n65z] { flex: 0 0 auto; color: var(--class-accent); font-size: 20px; }
.class-guide-note strong[b-4ltgg9n65z], .class-guide-note span[b-4ltgg9n65z] { display: block; }
.class-guide-note strong[b-4ltgg9n65z] { margin-bottom: 4px; color: var(--ink); font-size: 13px; }
.class-guide-note span[b-4ltgg9n65z] { color: var(--mut); font-size: 12.5px; line-height: 1.5; }
.class-guide-balance-grid[b-4ltgg9n65z] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.class-guide-balance-grid article[b-4ltgg9n65z] { padding: 16px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.class-guide-balance-grid h3[b-4ltgg9n65z] { margin: 8px 0 6px; color: var(--ink); font: 600 18px/1.2 var(--font-head); }
.class-guide-balance-grid p[b-4ltgg9n65z] { margin: 0; font-size: 12.5px; line-height: 1.58; }

.class-guide-foundation[b-4ltgg9n65z] { border-color: color-mix(in srgb, var(--class-accent) 22%, var(--line)); }
.class-guide-facts[b-4ltgg9n65z] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.class-guide-fact[b-4ltgg9n65z] { min-width: 0; padding: 17px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255, 255, 255, .022); }
.class-guide-fact-icon[b-4ltgg9n65z] { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--class-accent) 24%, transparent); border-radius: 10px; color: var(--class-accent); background: color-mix(in srgb, var(--class-accent) 7%, transparent); font-size: 18px; }
.class-guide-fact strong[b-4ltgg9n65z] { display: block; color: var(--ink); font: 600 16px/1.25 var(--font-head); }
.class-guide-fact p[b-4ltgg9n65z] { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; }
.class-guide-caution[b-4ltgg9n65z] { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line2); color: var(--mut); font-size: 12px; line-height: 1.5; }
.class-guide-caution i[b-4ltgg9n65z] { color: var(--gold); font-size: 17px; }

.class-guide-resource-grid[b-4ltgg9n65z] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 25px; }
.class-guide-resource-card[b-4ltgg9n65z] { min-width: 0; padding: 18px; border: 1px solid color-mix(in srgb, var(--class-accent) 20%, var(--line2)); border-radius: 13px; background: radial-gradient(180px 110px at 0% 0%, color-mix(in srgb, var(--class-accent) 8%, transparent), transparent 75%), rgba(255, 255, 255, .018); }
.class-guide-resource-topline[b-4ltgg9n65z] { display: flex; align-items: center; gap: 10px; }
.class-guide-resource-icon[b-4ltgg9n65z] { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--class-accent) 30%, transparent); border-radius: 10px; color: var(--class-accent); background: color-mix(in srgb, var(--class-accent) 7%, transparent); font-size: 19px; }
.class-guide-resource-label[b-4ltgg9n65z] { color: var(--ink); font: 600 19px/1.1 var(--font-head); }
.class-guide-resource-card > p[b-4ltgg9n65z] { min-height: 88px; margin: 16px 0 0; font-size: 12.5px; line-height: 1.58; }
.class-guide-metrics[b-4ltgg9n65z] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 17px; }
.class-guide-metrics div[b-4ltgg9n65z] { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(0, 0, 0, .13); }
.class-guide-metrics span[b-4ltgg9n65z] { color: var(--dim); font: 700 8px/1.1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.class-guide-metrics strong[b-4ltgg9n65z] { color: var(--ink); font-size: 12px; }
.class-guide-resource-detail[b-4ltgg9n65z] { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line2); color: var(--mut); font-size: 11.5px; line-height: 1.55; }
.class-guide-callout[b-4ltgg9n65z] { display: flex; gap: 12px; align-items: flex-start; margin-top: 17px; padding: 15px 16px; border: 1px solid color-mix(in srgb, var(--gold) 23%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--gold) 5%, transparent); }
.class-guide-callout > i[b-4ltgg9n65z] { flex: 0 0 auto; color: var(--gold); font-size: 20px; }
.class-guide-callout strong[b-4ltgg9n65z], .class-guide-callout span[b-4ltgg9n65z] { display: block; }
.class-guide-callout strong[b-4ltgg9n65z] { margin-bottom: 4px; color: var(--ink); font-size: 13px; }
.class-guide-callout span[b-4ltgg9n65z] { color: var(--mut); font-size: 12.5px; line-height: 1.55; }

.class-guide-ability-grid[b-4ltgg9n65z] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 25px; }
.class-guide-ability-card[b-4ltgg9n65z] { min-width: 0; padding: 17px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255, 255, 255, .018); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.class-guide-ability-card:hover[b-4ltgg9n65z] { transform: translateY(-2px); border-color: color-mix(in srgb, var(--class-accent) 28%, transparent); background: color-mix(in srgb, var(--class-accent) 4%, transparent); }
.class-guide-ability-head[b-4ltgg9n65z] { display: flex; align-items: center; gap: 11px; }
.class-guide-ability-icon[b-4ltgg9n65z] { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--class-accent) 27%, transparent); border-radius: 10px; color: var(--class-accent); background: color-mix(in srgb, var(--class-accent) 7%, transparent); font-size: 19px; }
.class-guide-ability-role[b-4ltgg9n65z] { color: var(--gold); font: 700 8px/1.1 var(--font-mono); letter-spacing: .09em; }
.class-guide-ability-card h3[b-4ltgg9n65z] { margin: 5px 0 0; color: var(--ink); font: 600 20px/1.1 var(--font-head); }
.class-guide-ability-card > p[b-4ltgg9n65z] { min-height: 41px; margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; }
.class-guide-ability-meta[b-4ltgg9n65z] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.class-guide-ability-meta span[b-4ltgg9n65z] { padding: 5px 7px; border: 1px solid var(--line2); border-radius: 999px; color: var(--mut); background: rgba(255, 255, 255, .025); font: 700 8px/1.1 var(--font-mono); letter-spacing: .04em; }
.class-guide-ability-detail[b-4ltgg9n65z] { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); color: var(--mut); font-size: 11.5px; line-height: 1.55; }
.class-guide-tips[b-4ltgg9n65z] { margin-top: 25px; padding: 18px; border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--line2)); border-radius: 12px; background: rgba(226, 182, 89, .025); }
.class-guide-tips-heading[b-4ltgg9n65z] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.class-guide-tips-heading h3[b-4ltgg9n65z] { margin: 7px 0 0; color: var(--ink); font: 600 22px/1.1 var(--font-head); }
.class-guide-tips-heading > i[b-4ltgg9n65z] { color: var(--gold); font-size: 22px; }
.class-guide-tip-grid[b-4ltgg9n65z] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 17px; }
.class-guide-tip[b-4ltgg9n65z] { display: flex; gap: 8px; align-items: flex-start; color: var(--mut); font-size: 11.5px; line-height: 1.5; }
.class-guide-tip i[b-4ltgg9n65z] { flex: 0 0 auto; margin-top: 2px; color: var(--gold); font-size: 13px; }

.class-guide-section-intro[b-4ltgg9n65z] { max-width: 650px; margin: 20px 0 0; }
.class-guide-roadmap-grid[b-4ltgg9n65z] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.class-guide-roadmap-card[b-4ltgg9n65z] { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px; border: 1px solid var(--line2); border-radius: 11px; color: var(--ink); background: rgba(255, 255, 255, .018); text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.class-guide-roadmap-card.is-available:hover[b-4ltgg9n65z] { transform: translateY(-2px); border-color: color-mix(in srgb, var(--class-accent) 35%, transparent); background: color-mix(in srgb, var(--class-accent) 5%, transparent); color: var(--ink); }
.class-guide-roadmap-icon[b-4ltgg9n65z] { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(226, 182, 89, .18); border-radius: 9px; color: var(--gold); background: rgba(226, 182, 89, .06); }
.class-guide-roadmap-copy[b-4ltgg9n65z] { display: grid; gap: 5px; min-width: 0; }
.class-guide-roadmap-copy strong[b-4ltgg9n65z] { color: var(--ink); font-size: 13px; }
.class-guide-roadmap-copy small[b-4ltgg9n65z] { color: var(--gold); font: 700 8px/1 var(--font-mono); letter-spacing: .1em; }
.class-guide-roadmap-lock[b-4ltgg9n65z] { margin-left: auto; color: var(--dim); font-size: 14px; }
.class-guide-actions[b-4ltgg9n65z] { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding: 8px 2px 0; }
.class-guide-actions .btn[b-4ltgg9n65z] { display: inline-flex; align-items: center; gap: 8px; }
.class-guide-back-link[b-4ltgg9n65z] { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); font-size: 13px; font-weight: 700; }
.class-guide-back-link:hover[b-4ltgg9n65z] { color: var(--gold); }

.class-guide-sidebar[b-4ltgg9n65z] { position: sticky; top: 102px; display: grid; gap: 14px; }
.class-guide-rail-card[b-4ltgg9n65z] { padding: 19px; }
.class-guide-toc[b-4ltgg9n65z] { display: grid; gap: 2px; }
.class-guide-toc a[b-4ltgg9n65z] { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line2); color: var(--mut); font-size: 13px; }
.class-guide-toc a:first-of-type[b-4ltgg9n65z] { margin-top: 9px; }
.class-guide-toc a:hover[b-4ltgg9n65z], .class-guide-toc a.is-active[b-4ltgg9n65z] { color: var(--gold); }
.class-guide-toc a span[b-4ltgg9n65z] { width: 22px; color: var(--dim); font: 600 10px/1 var(--font-mono); }
.class-guide-status-card[b-4ltgg9n65z] { background: radial-gradient(280px 160px at 0% 0%, color-mix(in srgb, var(--class-accent) 10%, transparent), transparent 72%), var(--panel); }
.class-guide-rail-icon[b-4ltgg9n65z] { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 19px; border: 1px solid color-mix(in srgb, var(--class-accent) 25%, transparent); border-radius: 10px; color: var(--class-accent); background: color-mix(in srgb, var(--class-accent) 7%, transparent); font-size: 18px; }
.class-guide-status-card h2[b-4ltgg9n65z], .class-guide-related h2[b-4ltgg9n65z] { margin: 9px 0 7px; color: var(--ink); font: 600 20px/1.2 var(--font-head); }
.class-guide-status-card p[b-4ltgg9n65z] { margin: 0; color: var(--mut); font-size: 12.5px; line-height: 1.6; }
.class-guide-related-list[b-4ltgg9n65z] { display: grid; gap: 8px; margin-top: 17px; }
.class-guide-related-card[b-4ltgg9n65z] { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid var(--line2); border-radius: 11px; color: var(--ink); background: rgba(255, 255, 255, .018); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.class-guide-related-card.is-warrior[b-4ltgg9n65z] { --class-accent: var(--red); }
.class-guide-related-card.is-sorcerer[b-4ltgg9n65z] { --class-accent: var(--blue); }
.class-guide-related-card.is-ranger[b-4ltgg9n65z] { --class-accent: var(--green); }
.class-guide-related-card.is-rogue[b-4ltgg9n65z] { --class-accent: var(--purple); }
.class-guide-related-card:hover[b-4ltgg9n65z] { transform: translateY(-2px); border-color: color-mix(in srgb, var(--class-accent) 35%, transparent); background: color-mix(in srgb, var(--class-accent) 5%, transparent); color: var(--ink); }
.class-guide-related-icon[b-4ltgg9n65z] { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--class-accent) 27%, transparent); border-radius: 9px; color: var(--class-accent); background: color-mix(in srgb, var(--class-accent) 7%, transparent); }
.class-guide-related-copy[b-4ltgg9n65z] { display: grid; gap: 4px; min-width: 0; }
.class-guide-related-copy strong[b-4ltgg9n65z] { font-size: 13px; }
.class-guide-related-copy small[b-4ltgg9n65z] { overflow: hidden; color: var(--mut); font-size: 10.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.class-guide-related-arrow[b-4ltgg9n65z] { margin-left: auto; color: var(--gold); font-size: 14px; }

.class-guide-not-found[b-4ltgg9n65z] { min-height: 58vh; display: grid; place-items: center; }
.class-guide-empty[b-4ltgg9n65z] { display: flex; align-items: center; gap: 20px; width: min(100%, 620px); }
.class-guide-empty-icon[b-4ltgg9n65z] { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(226, 182, 89, .2); border-radius: 15px; color: var(--gold); background: rgba(226, 182, 89, .07); font-size: 26px; }
.class-guide-empty h1[b-4ltgg9n65z] { margin: 9px 0 7px; color: var(--ink); font: 600 24px/1.2 var(--font-head); }
.class-guide-empty p[b-4ltgg9n65z] { margin: 0 0 17px; color: var(--mut); line-height: 1.55; }

@media (max-width: 980px) {
    .class-guide-layout[b-4ltgg9n65z] { grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; }
    .class-guide-hero[b-4ltgg9n65z] { grid-template-columns: auto minmax(0, 1fr); }
    .class-guide-hero-mark[b-4ltgg9n65z] { display: none; }
    .class-guide-facts[b-4ltgg9n65z] { grid-template-columns: 1fr; }
    .class-guide-resource-grid[b-4ltgg9n65z] { grid-template-columns: 1fr; }
    .class-guide-resource-card > p[b-4ltgg9n65z] { min-height: 0; }
}

@media (max-width: 760px) {
    .class-guide-page[b-4ltgg9n65z] { padding-inline: 18px; }
    .class-guide-hero[b-4ltgg9n65z] { grid-template-columns: auto minmax(0, 1fr); min-height: 0; padding: 27px 24px; gap: 17px; }
    .class-guide-hero-icon[b-4ltgg9n65z] { width: 70px; height: 70px; border-radius: 18px; font-size: 32px; }
    .class-guide-hero h1[b-4ltgg9n65z] { font-size: 42px; }
    .class-guide-hero p[b-4ltgg9n65z] { font-size: 15px; }
    .class-guide-tabs[b-4ltgg9n65z] { display: none; }
    .class-guide-mobile-nav[b-4ltgg9n65z] { display: block; margin: 16px 0 20px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
    .class-guide-mobile-nav summary[b-4ltgg9n65z] { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 700; list-style: none; }
    .class-guide-mobile-nav summary[b-4ltgg9n65z]::-webkit-details-marker { display: none; }
    .class-guide-mobile-nav summary span[b-4ltgg9n65z] { display: inline-flex; align-items: center; gap: 9px; }
    .class-guide-mobile-nav summary span i[b-4ltgg9n65z] { color: var(--gold); }
    .class-guide-mobile-nav[open] summary > i[b-4ltgg9n65z] { transform: rotate(180deg); }
    .class-guide-mobile-links[b-4ltgg9n65z] { display: grid; padding: 0 15px 7px; }
    .class-guide-mobile-links a[b-4ltgg9n65z], .class-guide-mobile-links span[b-4ltgg9n65z] { padding: 10px 0; border-top: 1px solid var(--line2); color: var(--mut); font-size: 13px; }
    .class-guide-mobile-links a:hover[b-4ltgg9n65z] { color: var(--gold); }
    .class-guide-mobile-links span[b-4ltgg9n65z] { display: flex; justify-content: space-between; opacity: .65; }
    .class-guide-layout[b-4ltgg9n65z] { grid-template-columns: 1fr; }
    .class-guide-sidebar[b-4ltgg9n65z] { position: static; }
    .class-guide-toc[b-4ltgg9n65z] { display: none; }
    .class-guide-panel[b-4ltgg9n65z] { padding: 24px 21px; }
    .class-guide-roadmap-grid[b-4ltgg9n65z] { grid-template-columns: 1fr 1fr; }
    .class-guide-balance-grid[b-4ltgg9n65z], .class-guide-ability-grid[b-4ltgg9n65z], .class-guide-tip-grid[b-4ltgg9n65z] { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
    .class-guide-hero[b-4ltgg9n65z] { grid-template-columns: 1fr; }
    .class-guide-hero-icon[b-4ltgg9n65z] { width: 58px; height: 58px; border-radius: 15px; font-size: 27px; }
    .class-guide-hero h1[b-4ltgg9n65z] { margin-top: 9px; font-size: 38px; }
    .class-guide-hero-meta[b-4ltgg9n65z] { margin-top: 16px; }
    .class-guide-roadmap-grid[b-4ltgg9n65z] { grid-template-columns: 1fr; }
    .class-guide-balance-grid[b-4ltgg9n65z] { grid-template-columns: 1fr; }
    .class-guide-actions[b-4ltgg9n65z] { align-items: stretch; flex-direction: column; }
    .class-guide-actions .btn[b-4ltgg9n65z] { justify-content: center; }
    .class-guide-empty[b-4ltgg9n65z] { align-items: flex-start; flex-direction: column; }
}
/* _content/Nytharis.Portal.Web/Components/Pages/ClassGuides.razor.rz.scp.css */
.class-guides-directory[b-oufqkb07sl] { width: min(100%, 1240px); margin: 0 auto; padding: clamp(34px, 5vw, 68px) 28px clamp(72px, 8vw, 112px); }
.class-guides-directory-breadcrumb[b-oufqkb07sl] { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--dim); font-size: 12px; }
.class-guides-directory-breadcrumb a[b-oufqkb07sl] { color: var(--mut); }
.class-guides-directory-breadcrumb a:hover[b-oufqkb07sl] { color: var(--gold); }
.class-guides-directory-breadcrumb i[b-oufqkb07sl] { color: var(--dim); font-size: 11px; }
.class-guides-directory-hero[b-oufqkb07sl] { margin-bottom: 38px; border-color: rgba(226, 182, 89, .18); }
.class-guides-directory-hero h1[b-oufqkb07sl] { margin-bottom: 12px; }
.class-guides-directory-mark[b-oufqkb07sl] { width: 126px; height: 126px; flex: none; display: grid; place-items: center; border: 1px solid rgba(226, 182, 89, .18); border-radius: 24px; color: var(--gold); background: radial-gradient(circle, rgba(226, 182, 89, .12), rgba(226, 182, 89, .02) 58%, transparent 60%); box-shadow: 0 0 60px rgba(226, 182, 89, .1); font-size: 58px; }
.class-guides-directory-heading[b-oufqkb07sl] { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.class-guides-directory-heading h2[b-oufqkb07sl] { margin: 9px 0 0; color: var(--ink); font: 600 clamp(26px, 3vw, 36px)/1.1 var(--font-head); }
.class-guides-directory-back[b-oufqkb07sl] { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); font-size: 13px; font-weight: 700; }
.class-guides-directory-back:hover[b-oufqkb07sl] { color: var(--gold); }
.class-guides-directory .guides-class-grid[b-oufqkb07sl] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.class-guides-directory .guides-class-card[b-oufqkb07sl] { --class-accent: var(--gold); --class-glow: rgba(226, 182, 89, .10); position: relative; min-height: 302px; display: flex; flex-direction: column; padding: 24px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: radial-gradient(circle at 50% -10%, var(--class-glow), transparent 55%), linear-gradient(160deg, var(--panel), var(--panel2)); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.class-guides-directory .guides-class-card[b-oufqkb07sl]::after { content: ""; position: absolute; right: -48px; bottom: -70px; width: 142px; height: 142px; border: 1px solid color-mix(in srgb, var(--class-accent) 28%, transparent); border-radius: 24px; transform: rotate(35deg); }
.class-guides-directory .guides-class-card:hover[b-oufqkb07sl] { border-color: color-mix(in srgb, var(--class-accent) 42%, transparent); box-shadow: 0 18px 50px color-mix(in srgb, var(--class-accent) 9%, transparent); transform: translateY(-3px); }
.class-guides-directory .guides-class-card.is-warrior[b-oufqkb07sl] { --class-accent: var(--red); --class-glow: rgba(216, 112, 95, .12); }
.class-guides-directory .guides-class-card.is-sorcerer[b-oufqkb07sl] { --class-accent: var(--blue); --class-glow: rgba(90, 150, 221, .13); }
.class-guides-directory .guides-class-card.is-ranger[b-oufqkb07sl] { --class-accent: var(--green); --class-glow: rgba(95, 184, 122, .12); }
.class-guides-directory .guides-class-card.is-rogue[b-oufqkb07sl] { --class-accent: var(--purple); --class-glow: rgba(168, 120, 226, .13); }
.class-guides-directory .guides-card-icon[b-oufqkb07sl] { width: 66px; height: 66px; margin: 22px 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--class-accent) 32%, transparent); border-radius: 50% 50% 44% 44%; color: var(--class-accent); background: rgba(7, 8, 10, .42); font-size: 30px; }
.class-guides-directory .guides-card-meta[b-oufqkb07sl] { position: relative; z-index: 1; min-height: 18px; color: var(--mut); font: 600 12px/1.2 var(--font-body); letter-spacing: .08em; }
.class-guides-directory .guides-availability[b-oufqkb07sl] { color: var(--class-accent); }
.class-guides-directory .guides-class-card h3[b-oufqkb07sl] { position: relative; z-index: 1; margin: 20px 0 7px; font-size: 22px; }
.class-guides-directory .guides-class-card p[b-oufqkb07sl] { position: relative; z-index: 1; margin: 0; color: var(--mut); font-size: 15px; line-height: 1.6; }
.class-guides-directory .guides-card-link[b-oufqkb07sl] { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 22px; color: var(--gold); font-weight: 800; }
@media (max-width: 980px) { .class-guides-directory .guides-class-grid[b-oufqkb07sl] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .class-guides-directory[b-oufqkb07sl] { padding-inline: 18px; }.class-guides-directory-hero[b-oufqkb07sl] { padding: 27px 24px; }.class-guides-directory-mark[b-oufqkb07sl] { width: 86px; height: 86px; font-size: 40px; }.class-guides-directory-heading[b-oufqkb07sl] { display: block; }.class-guides-directory-back[b-oufqkb07sl] { margin-top: 15px; }.class-guides-directory .guides-class-grid[b-oufqkb07sl] { grid-template-columns: 1fr; }.class-guides-directory .guides-class-card[b-oufqkb07sl] { min-height: 278px; } }
/* _content/Nytharis.Portal.Web/Components/Pages/Guides.razor.rz.scp.css */
.guides-page[b-lpjwca2rp8] {
    width: min(100%, 1240px);
    margin: 0 auto;
    padding: clamp(40px, 5vw, 68px) 28px clamp(72px, 8vw, 112px);
}

.guides-hero[b-lpjwca2rp8] {
    min-height: 252px;
    margin: 0 0 64px;
    border-color: rgba(226, 182, 89, .18);
    background:
        linear-gradient(90deg, rgba(7, 8, 10, .98), rgba(7, 8, 10, .55)),
        radial-gradient(600px 260px at 78% 25%, rgba(226, 182, 89, .13), transparent 70%),
        var(--panel2);
}

.guides-hero .hub-hero-inner[b-lpjwca2rp8] { min-height: 252px; padding: 42px 48px; }
.guides-hero .hub-hero-main[b-lpjwca2rp8] { max-width: 690px; }
.guides-hero h1[b-lpjwca2rp8] { margin: 10px 0 12px; font-size: clamp(42px, 6vw, 66px); }
.guides-hero .hub-hero-text[b-lpjwca2rp8] { max-width: 620px; font-size: 17px; }
.guides-hero-mark[b-lpjwca2rp8] { position: absolute; right: 8%; top: 50%; color: rgba(226, 182, 89, .38); font-size: clamp(76px, 10vw, 132px); transform: translateY(-50%); }

.guides-section-heading[b-lpjwca2rp8] { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.guides-section-heading h2[b-lpjwca2rp8] { margin: 8px 0 8px; font-size: clamp(28px, 4vw, 40px); }
.guides-section-heading p[b-lpjwca2rp8] { max-width: 650px; margin: 0; color: var(--mut); line-height: 1.6; }
.guides-section-heading-compact[b-lpjwca2rp8] { margin-bottom: 20px; }
.guides-text-link[b-lpjwca2rp8] { white-space: nowrap; }
.guides-category-title[b-lpjwca2rp8] { display: flex; align-items: center; gap: 16px; }
.guides-category-title h2[b-lpjwca2rp8] { margin-bottom: 5px; font-size: 28px; }
.guides-category-icon[b-lpjwca2rp8] { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(226, 182, 89, .2); border-radius: 12px; color: var(--gold); background: rgba(226, 182, 89, .07); font-size: 20px; }

.guides-class-grid[b-lpjwca2rp8] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.guides-class-card[b-lpjwca2rp8] { --class-accent: var(--gold); --class-glow: rgba(226, 182, 89, .10); position: relative; min-height: 302px; display: flex; flex-direction: column; padding: 24px 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: radial-gradient(circle at 50% -10%, var(--class-glow), transparent 55%), linear-gradient(160deg, var(--panel), var(--panel2)); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.guides-class-card[b-lpjwca2rp8]::after { content: ""; position: absolute; right: -48px; bottom: -70px; width: 142px; height: 142px; border: 1px solid color-mix(in srgb, var(--class-accent) 28%, transparent); border-radius: 24px; transform: rotate(35deg); }
.guides-class-card:hover[b-lpjwca2rp8] { border-color: color-mix(in srgb, var(--class-accent) 42%, transparent); box-shadow: 0 18px 50px color-mix(in srgb, var(--class-accent) 9%, transparent); transform: translateY(-3px); }
.guides-class-card.is-warrior[b-lpjwca2rp8] { --class-accent: var(--red); --class-glow: rgba(216, 112, 95, .12); }.guides-class-card.is-sorcerer[b-lpjwca2rp8] { --class-accent: var(--blue); --class-glow: rgba(90, 150, 221, .13); }.guides-class-card.is-ranger[b-lpjwca2rp8] { --class-accent: var(--green); --class-glow: rgba(95, 184, 122, .12); }.guides-class-card.is-rogue[b-lpjwca2rp8] { --class-accent: var(--purple); --class-glow: rgba(168, 120, 226, .13); }
.guides-card-icon[b-lpjwca2rp8] { width: 66px; height: 66px; margin: 22px 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--class-accent) 32%, transparent); border-radius: 50% 50% 44% 44%; color: var(--class-accent); background: rgba(7, 8, 10, .42); font-size: 30px; }
.guides-card-meta[b-lpjwca2rp8] { position: relative; z-index: 1; min-height: 18px; color: var(--mut); font: 600 12px/1.2 var(--font-body); letter-spacing: .08em; }.guides-availability[b-lpjwca2rp8] { color: var(--class-accent); }
.guides-class-card h3[b-lpjwca2rp8] { position: relative; z-index: 1; margin: 20px 0 7px; font-size: 22px; }.guides-class-card p[b-lpjwca2rp8] { position: relative; z-index: 1; margin: 0; color: var(--mut); font-size: 15px; line-height: 1.6; }.guides-card-link[b-lpjwca2rp8] { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 22px; color: var(--gold); font-weight: 800; }

.guides-topic-section[b-lpjwca2rp8] { margin-top: 72px; }.guides-topic-grid[b-lpjwca2rp8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.guides-topic-card[b-lpjwca2rp8] { min-height: 148px; display: flex; align-items: flex-start; gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: linear-gradient(150deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); transition: border-color .18s ease, background .18s ease, transform .18s ease; }.guides-topic-card:not(.is-preparing):hover[b-lpjwca2rp8] { border-color: rgba(226, 182, 89, .35); background: rgba(226, 182, 89, .045); transform: translateY(-2px); }.guides-topic-card.is-preparing[b-lpjwca2rp8] { opacity: .78; }.guides-topic-icon[b-lpjwca2rp8] { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(226, 182, 89, .18); border-radius: 10px; color: var(--gold); background: rgba(226, 182, 89, .07); font-size: 18px; }.guides-topic-copy[b-lpjwca2rp8] { min-width: 0; }.guides-topic-meta[b-lpjwca2rp8] { margin-bottom: 6px; color: var(--gold); font: 700 10px/1.2 var(--font-body); letter-spacing: .11em; }.guides-topic-copy h3[b-lpjwca2rp8] { margin: 0 0 7px; font-size: 18px; }.guides-topic-copy p[b-lpjwca2rp8] { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }.guides-topic-arrow[b-lpjwca2rp8] { align-self: center; margin-left: auto; color: var(--gold); }

.guides-breadcrumb[b-lpjwca2rp8] { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; color: var(--mut); font-size: 14px; }.guides-breadcrumb a[b-lpjwca2rp8] { color: var(--gold); }.guides-breadcrumb i[b-lpjwca2rp8] { color: var(--dim); }
.class-guide-hero[b-lpjwca2rp8] { --class-accent: var(--gold); position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; min-height: 218px; margin-bottom: 36px; padding: 34px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--class-accent) 28%, transparent); border-radius: 16px; background: radial-gradient(600px 240px at 0% 0%, color-mix(in srgb, var(--class-accent) 14%, transparent), transparent 70%), linear-gradient(155deg, var(--panel), var(--panel2)); }.class-guide-hero[b-lpjwca2rp8]::after { content: ""; position: absolute; right: -50px; bottom: -105px; width: 230px; height: 230px; border: 1px solid color-mix(in srgb, var(--class-accent) 22%, transparent); border-radius: 50%; box-shadow: 0 0 0 24px color-mix(in srgb, var(--class-accent) 4%, transparent); }.class-guide-hero.is-warrior[b-lpjwca2rp8] { --class-accent: var(--red); }.class-guide-hero.is-sorcerer[b-lpjwca2rp8] { --class-accent: var(--blue); }.class-guide-hero.is-ranger[b-lpjwca2rp8] { --class-accent: var(--green); }.class-guide-hero.is-rogue[b-lpjwca2rp8] { --class-accent: var(--purple); }.class-guide-hero-icon[b-lpjwca2rp8] { position: relative; z-index: 1; width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--class-accent) 36%, transparent); border-radius: 50% 50% 44% 44%; color: var(--class-accent); background: rgba(7, 8, 10, .42); font-size: 36px; }.class-guide-hero-copy[b-lpjwca2rp8] { position: relative; z-index: 1; }.class-guide-hero h1[b-lpjwca2rp8] { margin: 8px 0 7px; font-size: clamp(40px, 5vw, 58px); }.class-guide-hero p[b-lpjwca2rp8] { margin: 0; color: var(--mut); font-size: 17px; }.class-guide-status[b-lpjwca2rp8] { position: relative; z-index: 1; align-self: start; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--class-accent) 32%, transparent); border-radius: 999px; color: var(--class-accent); background: rgba(7, 8, 10, .34); font: 700 11px/1.2 var(--font-body); letter-spacing: .09em; white-space: nowrap; }
.class-guide-layout[b-lpjwca2rp8] { display: grid; grid-template-columns: minmax(0, 1fr) 278px; gap: 54px; align-items: start; max-width: 1060px; margin: 0 auto; }.class-guide-article[b-lpjwca2rp8] { min-width: 0; }.guide-reading-section[b-lpjwca2rp8] { padding: 0 0 40px; border-bottom: 1px solid var(--line); }.guide-reading-section + .guide-reading-section[b-lpjwca2rp8] { padding-top: 40px; }.guide-reading-section h2[b-lpjwca2rp8] { margin: 8px 0 14px; font-size: 30px; }.guide-reading-section p[b-lpjwca2rp8] { max-width: 720px; color: var(--mut); font-size: 16px; line-height: 1.72; }.guide-confirmed-section[b-lpjwca2rp8] { padding: 26px; border: 1px solid rgba(95,184,122,.2); border-radius: 14px; background: radial-gradient(420px 180px at 0% 0%, rgba(95,184,122,.06), transparent 75%), rgba(255,255,255,.018); }.guide-fact-list[b-lpjwca2rp8] { display: grid; gap: 14px; margin: 24px 0; padding: 0; list-style: none; }.guide-fact-list li[b-lpjwca2rp8] { display: flex; gap: 11px; color: var(--ink); line-height: 1.55; }.guide-fact-list i[b-lpjwca2rp8] { flex: 0 0 auto; color: var(--green); }.guide-source-note[b-lpjwca2rp8] { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 0; color: var(--mut); font-size: 13px !important; }.guide-source-note i[b-lpjwca2rp8] { color: var(--gold); }.guide-planned-grid[b-lpjwca2rp8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 24px 0; }.guide-planned-grid div[b-lpjwca2rp8] { display: flex; gap: 9px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--mut); background: rgba(255,255,255,.018); font-size: 14px; }.guide-planned-grid i[b-lpjwca2rp8] { color: var(--gold); }.guides-back-link[b-lpjwca2rp8] { display: inline-flex; gap: 8px; margin-top: 28px; color: var(--gold); font-weight: 800; }
.class-guide-sidebar[b-lpjwca2rp8] { display: grid; gap: 16px; position: sticky; top: 24px; }.class-guide-toc[b-lpjwca2rp8], .class-guide-related[b-lpjwca2rp8] { display: grid; gap: 5px; }.class-guide-toc a[b-lpjwca2rp8] { padding: 9px 0; border-bottom: 1px solid var(--line2); color: var(--mut); font-size: 14px; }.class-guide-toc a:hover[b-lpjwca2rp8] { color: var(--gold); }.class-guide-related h2[b-lpjwca2rp8] { margin: 8px 0 10px; font-size: 22px; }.class-guide-related-link[b-lpjwca2rp8] { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line2); color: var(--ink); font-weight: 700; }.class-guide-related-link > i[b-lpjwca2rp8] { margin-left: auto; color: var(--gold); font-size: 14px; }.class-guide-related-icon[b-lpjwca2rp8] { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--class-accent, var(--gold)); background: rgba(226,182,89,.08); font-size: 14px; }.class-guide-related-icon.is-warrior[b-lpjwca2rp8] { --class-accent: var(--red); }.class-guide-related-icon.is-sorcerer[b-lpjwca2rp8] { --class-accent: var(--blue); }.class-guide-related-icon.is-ranger[b-lpjwca2rp8] { --class-accent: var(--green); }.class-guide-related-icon.is-rogue[b-lpjwca2rp8] { --class-accent: var(--purple); }.guides-not-found[b-lpjwca2rp8] { min-height: 48vh; }.guides-not-found p[b-lpjwca2rp8] { color: var(--mut); }

@media (max-width: 980px) { .guides-class-grid[b-lpjwca2rp8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }.guides-topic-grid[b-lpjwca2rp8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }.class-guide-layout[b-lpjwca2rp8] { grid-template-columns: 1fr; gap: 28px; }.class-guide-sidebar[b-lpjwca2rp8] { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }.class-guide-toc[b-lpjwca2rp8], .class-guide-related[b-lpjwca2rp8] { align-content: start; } }
@media (max-width: 640px) { .guides-page[b-lpjwca2rp8] { padding-inline: 18px; }.guides-hero .hub-hero-inner[b-lpjwca2rp8] { min-height: 250px; padding: 34px 24px; }.guides-hero-mark[b-lpjwca2rp8] { right: 20px; top: auto; bottom: 22px; font-size: 72px; transform: none; opacity: .28; }.guides-section-heading[b-lpjwca2rp8] { display: block; }.guides-text-link[b-lpjwca2rp8] { display: inline-flex; margin-top: 16px; }.guides-class-grid[b-lpjwca2rp8], .guides-topic-grid[b-lpjwca2rp8], .class-guide-sidebar[b-lpjwca2rp8] { grid-template-columns: 1fr; }.guides-class-card[b-lpjwca2rp8] { min-height: 278px; }.guides-category-title[b-lpjwca2rp8] { align-items: flex-start; }.class-guide-hero[b-lpjwca2rp8] { grid-template-columns: auto 1fr; min-height: 0; padding: 25px 22px; gap: 16px; }.class-guide-status[b-lpjwca2rp8] { grid-column: 1 / -1; justify-self: start; }.class-guide-hero-icon[b-lpjwca2rp8] { width: 58px; height: 58px; font-size: 27px; }.class-guide-hero h1[b-lpjwca2rp8] { font-size: 38px; }.guide-planned-grid[b-lpjwca2rp8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }.guide-confirmed-section[b-lpjwca2rp8] { padding: 21px; } }
@media (max-width: 420px) { .guide-planned-grid[b-lpjwca2rp8] { grid-template-columns: 1fr; } }

/* Browse controls and class-page navigation use the same quiet control language as the public hubs. */
.guides-toolbar[b-lpjwca2rp8] { display: grid; grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(145px, 1fr)) auto auto; gap: 10px; align-items: end; margin: -30px 0 62px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(155deg, var(--panel), var(--panel2)); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.guides-filter[b-lpjwca2rp8] { position: relative; display: grid; gap: 6px; min-width: 0; color: var(--mut); font: 700 10px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }.guides-filter input[b-lpjwca2rp8], .guides-filter select[b-lpjwca2rp8] { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--ink); background: var(--raised); font: 500 14px/1.2 var(--font-body); }.guides-filter input[b-lpjwca2rp8]::placeholder { color: var(--dim); }.guides-filter input:focus[b-lpjwca2rp8], .guides-filter select:focus[b-lpjwca2rp8] { border-color: rgba(226,182,89,.58); box-shadow: 0 0 0 3px rgba(226,182,89,.09); }.guides-filter select[b-lpjwca2rp8] { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }.guides-filter-search i[b-lpjwca2rp8] { position: absolute; left: 12px; bottom: 13px; color: var(--gold); font-size: 16px; }.guides-filter-search input[b-lpjwca2rp8] { padding-left: 34px; }.guides-filter-submit[b-lpjwca2rp8] { min-height: 42px; padding-inline: 17px; }.guides-clear-link[b-lpjwca2rp8] { align-self: center; padding: 0 4px; color: var(--mut); font-size: 13px; }.guides-clear-link:hover[b-lpjwca2rp8] { color: var(--gold); }
.class-guide-nav[b-lpjwca2rp8] { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: -14px auto 36px; max-width: 1060px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }.class-guide-nav a[b-lpjwca2rp8], .class-guide-nav span[b-lpjwca2rp8] { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 7px; color: var(--mut); font-size: 13px; font-weight: 800; }.class-guide-nav a:hover[b-lpjwca2rp8], .class-guide-nav a.is-active[b-lpjwca2rp8] { color: var(--ink); background: rgba(226,182,89,.1); }.class-guide-nav a.is-active[b-lpjwca2rp8] { color: var(--gold); }.class-guide-nav span[b-lpjwca2rp8] { opacity: .58; }.class-guide-nav small[b-lpjwca2rp8] { color: var(--gold); font: 700 9px/1 var(--font-body); letter-spacing: .08em; }.class-guide-mobile-nav[b-lpjwca2rp8] { display: none; }.class-guide-mobile-nav summary[b-lpjwca2rp8] { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }.class-guide-mobile-nav summary[b-lpjwca2rp8]::-webkit-details-marker { display: none; }.class-guide-mobile-nav[open] summary i[b-lpjwca2rp8] { transform: rotate(180deg); }.class-guide-mobile-nav a[b-lpjwca2rp8] { display: block; padding: 10px 0; border-top: 1px solid var(--line2); color: var(--mut); font-size: 14px; }
.guide-planned-grid div[b-lpjwca2rp8] { min-height: 64px; align-items: center; }.guide-planned-icon[b-lpjwca2rp8] { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(226,182,89,.17); border-radius: 9px; color: var(--gold); background: rgba(226,182,89,.06); }.guide-planned-copy[b-lpjwca2rp8] { display: grid; gap: 4px; }.guide-planned-copy strong[b-lpjwca2rp8] { color: var(--ink); font-size: 14px; font-weight: 700; }.guide-planned-copy small[b-lpjwca2rp8] { color: var(--gold); font: 700 9px/1 var(--font-body); letter-spacing: .1em; }

@media (max-width: 1100px) { .guides-toolbar[b-lpjwca2rp8] { grid-template-columns: repeat(3, minmax(0, 1fr)); }.guides-filter-search[b-lpjwca2rp8] { grid-column: span 2; }.guides-filter-submit[b-lpjwca2rp8] { grid-column: span 1; }.guides-clear-link[b-lpjwca2rp8] { justify-self: start; } }
@media (max-width: 640px) { .guides-toolbar[b-lpjwca2rp8] { grid-template-columns: 1fr 1fr; margin-top: -28px; margin-bottom: 48px; padding: 12px; }.guides-filter-search[b-lpjwca2rp8] { grid-column: 1 / -1; }.guides-filter-submit[b-lpjwca2rp8] { grid-column: 1; }.guides-clear-link[b-lpjwca2rp8] { align-self: center; }.class-guide-nav[b-lpjwca2rp8] { margin-top: -16px; overflow-x: auto; flex-wrap: nowrap; }.class-guide-nav a[b-lpjwca2rp8], .class-guide-nav span[b-lpjwca2rp8] { flex: 0 0 auto; }.class-guide-sidebar[b-lpjwca2rp8] { display: block; }.class-guide-toc[b-lpjwca2rp8] { display: none; }.class-guide-mobile-nav[b-lpjwca2rp8] { display: block; margin-bottom: 16px; }.class-guide-related[b-lpjwca2rp8] { display: grid; }.guide-planned-grid[b-lpjwca2rp8] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .guides-toolbar[b-lpjwca2rp8] { grid-template-columns: 1fr; }.guides-filter-search[b-lpjwca2rp8], .guides-filter-submit[b-lpjwca2rp8] { grid-column: auto; }.guides-clear-link[b-lpjwca2rp8] { justify-self: start; }.guide-planned-grid[b-lpjwca2rp8] { grid-template-columns: 1fr; } }