:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0c111b; color: #f6f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 12%, #24354f 0, transparent 34%), #0c111b; }
.shell { width: min(1120px, calc(100% - 40px)); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 1fr 420px; gap: 90px; align-items: center; }
.eyebrow { color: #78d7bb; font-size: 11px; font-weight: 800; letter-spacing: .18em; margin: 0 0 18px; }
h1 { font-size: clamp(48px, 6vw, 78px); letter-spacing: -.065em; line-height: .94; margin: 0; }
h1 span { color: #78d7bb; } h2 { font-size: 29px; letter-spacing: -.04em; margin: 0 0 10px; }
.intro { color: #aab5c6; font-size: 18px; line-height: 1.55; max-width: 480px; margin: 28px 0; }.status { color: #d4dce8; font-size: 13px; display: flex; align-items: center; gap: 9px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #78d7bb; box-shadow: 0 0 16px #78d7bb; }
.brand-panel > .eyebrow { font-size: clamp(18px, 2vw, 28px); letter-spacing: .2em; }
.card { background: rgba(20, 29, 43, .86); border: 1px solid #2e3b50; border-radius: 24px; padding: 36px; box-shadow: 0 25px 90px rgba(0,0,0,.3); }.logo { display: block; width: 78px; height: 78px; object-fit: contain; margin: -8px 0 34px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.muted { color: #9daabd; font-size: 14px; line-height: 1.5; margin: 0 0 28px; } label { display: block; color: #c7d1df; font-size: 12px; font-weight: 700; margin: 18px 0 8px; }
input { width: 100%; border: 1px solid #3a485c; border-radius: 10px; background: #111a28; color: #fff; padding: 13px 14px; font: inherit; outline: none; } input:focus { border-color: #78d7bb; box-shadow: 0 0 0 3px rgba(120,215,187,.12); }
button { width: 100%; border: 0; border-radius: 10px; background: #78d7bb; color: #0c111b; cursor: pointer; font: inherit; font-weight: 800; padding: 14px; margin-top: 24px; } button span { float: right; font-size: 19px; line-height: 14px; } button:disabled { opacity: .55; cursor: wait; }
.message { min-height: 20px; color: #9daabd; font-size: 13px; margin: 16px 0 0; }.message.error { color: #ff9f9f; }.guild-list { display: grid; gap: 10px; }.guild { margin: 0; text-align: left; background: #172336; color: #fff; border: 1px solid #334258; }.guild span { color: #78d7bb; font-size: 11px; float: right; margin-top: 3px; }.guild span b { font-size: 16px; }.secondary { background: transparent; border: 1px solid #3a485c; color: #d4dce8; }
.dashboard-logo { width: 58px; height: 58px; margin: -8px 0 18px; }.back { width: auto; padding: 0; margin: 0 0 34px; background: transparent; color: #78d7bb; font-size: 12px; text-align: left; }.dashboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.dashboard-heading .muted { margin-bottom: 0; }.role-pill { border: 1px solid #3b5e5b; color: #78d7bb; border-radius: 99px; font-size: 11px; font-weight: 800; padding: 6px 10px; text-transform: uppercase; }.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 32px; }.metrics div { background: #172336; border: 1px solid #2d3b4f; border-radius: 12px; padding: 14px; }.metrics span { display: block; color: #8d9bad; font-size: 10px; font-weight: 800; letter-spacing: .13em; }.metrics strong { display: block; font-size: 24px; margin-top: 7px; }.section-heading { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid #2d3b4f; padding-bottom: 12px; }.section-heading .eyebrow { margin: 0; }.section-heading span { color: #8d9bad; font-size: 11px; }.raid-list { display: grid; }.raid-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #263449; padding: 16px 0; }.raid-row strong, .raid-row span { display: block; }.raid-row strong { font-size: 14px; }.raid-row span { color: #8d9bad; font-size: 11px; margin-top: 5px; }.raid-row > b { color: #78d7bb; font-size: 17px; }
.raid-row { cursor: pointer; }.raid-row:focus-visible { outline: 2px solid var(--wow-gold); outline-offset: 4px; }.detail-grid { display: grid; gap: 28px; margin-top: 28px; }.detail-list { display: grid; }.detail-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 13px 0; border-bottom: 1px solid #263449; }.detail-row strong { font-size: 13px; }.detail-row span { color: #8d9bad; font-size: 11px; }.detail-row em { grid-column: 1 / -1; color: var(--wow-gold-bright); font-size: 11px; font-style: normal; }
.pairing-panel { margin: 30px 0 32px; padding: 18px; border: 1px solid #765c35; border-radius: 14px; background: rgba(34, 28, 20, .35); }.pairing-panel .muted { margin: 12px 0 16px; }.pairing-result { margin-top: 18px; }.pairing-result code { display: block; overflow-wrap: anywhere; color: var(--wow-gold-bright); font-size: 13px; letter-spacing: .05em; line-height: 1.5; padding: 12px; border-radius: 9px; background: #0e1521; border: 1px solid #4c4b49; }.pairing-result .secondary { margin-top: 10px; }
[hidden] { display: none !important; }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; gap: 30px; padding: 50px 0; }.brand-panel { text-align: center; }.intro { margin: 20px auto; }.status { justify-content: center; } }

/* Warcraft-inspired palette: midnight steel, aged bronze and warm Azeroth gold. */
:root { --wow-midnight: #080c14; --wow-panel: #151d2b; --wow-panel-raised: #1b2638; --wow-gold: #dfad55; --wow-gold-bright: #f2c66d; --wow-bronze: #5c4930; --wow-ivory: #f4ead7; --wow-muted: #b8b3aa; }
body { background: radial-gradient(circle at 12% 12%, #273651 0, transparent 34%), var(--wow-midnight); }
h1 span, .eyebrow, .status, .guild span, .raid-row > b, .back { color: var(--wow-gold-bright); }
.dot { background: var(--wow-gold); box-shadow: 0 0 16px var(--wow-gold); }
.card { background: rgba(21, 29, 43, .92); border-color: var(--wow-bronze); }
.role-pill { border-color: #765c35; color: var(--wow-gold-bright); }
.metrics div, .guild { background: var(--wow-panel-raised); border-color: #3f3d3b; }
.section-heading { border-color: #3f3d3b; }
button { background: linear-gradient(135deg, var(--wow-gold-bright), var(--wow-gold)); color: #1b140b; }
button:hover { filter: brightness(1.08); }
input { background: #0e1521; border-color: #4c4b49; }
input:focus { border-color: var(--wow-gold); box-shadow: 0 0 0 3px rgba(223, 173, 85, .15); }
.muted, .raid-row span, .section-heading span { color: var(--wow-muted); }
.secondary { background: transparent; color: var(--wow-ivory); border-color: #4c4b49; }