@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#10131b;--panel:#191e29;--line:#ffffff12;--muted:#a6afc3;--text:#edf0f8;--accent:#e9c779;--green:#8ae0c0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 'DM Sans',sans-serif}h1,h2,h3,strong{font-family:Manrope,sans-serif}h2{font-size:24px;letter-spacing:-.7px;margin:8px 0 14px}h3{font-size:17px;margin:0 0 8px}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button,a,select,input,textarea{outline-offset:4px}button{cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:10px 15px;background:#252d3e;color:var(--text);font-weight:600}button:hover{filter:brightness(1.14)}button:disabled{opacity:.5;cursor:wait}.primary{background:#e6bd68;color:#201b10;border-color:transparent}.quiet{background:transparent}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#131722;border-right:1px solid var(--line);padding:32px 20px;display:flex;flex-direction:column}.brand{display:flex;flex-direction:column;gap:8px;align-items:center;text-decoration:none}.brand:hover{text-decoration:none}.brand-logo{display:block;width:100%;max-width:215px;height:auto;object-fit:contain;filter:drop-shadow(0 5px 12px #0005)}.brand-edition{font-size:8px;font-weight:700;letter-spacing:1.5px;color:#b9b0a0;text-align:center}.nav-label{font-size:9px;letter-spacing:1.8px;color:#758099;font-weight:700;margin:37px 12px 12px}nav a{display:flex;gap:14px;padding:11px 13px;margin:3px 0;border-radius:7px;color:#aeb7ca;font-size:14px}nav a.selected{background:#e6bd6816;color:#f4d899;border:1px solid #e6bd6820}nav a:hover{background:#ffffff07;text-decoration:none}.side-bottom{margin-top:auto;padding:30px 10px 0;font-size:12px;color:#cfbd91}.side-bottom p{color:#758099;font-size:12px}.side-bottom a{font-size:12px;color:#a4aec0}.beta-dot{display:inline-block;width:6px;height:6px;background:#a6dfbc;border-radius:50%;margin-right:7px}main{margin-left:245px}.topbar{padding:20px 42px;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:1.8px;color:#a9b2c4}.topbar>div{display:flex;align-items:center;gap:12px;letter-spacing:0;font-size:12px}.topbar button{padding:4px 8px;font-size:11px}.slash{margin:0 12px;color:#525d74}.hero{position:relative;overflow:hidden;padding:55px 48px 40px;min-height:335px;background:linear-gradient(90deg,#131722 15%,#131722bb 55%,#13172245),url('images/forever/hyjal.jpg') center 43%/cover}.hero:after{content:'';position:absolute;inset:auto 0 0;height:70px;background:linear-gradient(transparent,var(--bg));pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#c4b389}.hero h1{font-size:44px;line-height:1.17;letter-spacing:-1.8px;margin:17px 0}.hero em{color:#f3d592;font-style:normal}.hero p{color:#bac3d4;font-size:14px;line-height:1.7}.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hero-tags span,.tag{padding:4px 9px;font-size:10px;border:1px solid #e4c17b28;border-radius:5px;background:#e4c17b0b;color:#ecd39b}.content{max-width:1450px;margin:auto;padding:0 42px 30px}.panel{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:25px}.login{display:grid;grid-template-columns:1.2fr 1fr;gap:55px;margin:8px 0 34px}.login p{color:var(--muted);max-width:430px}.login form{display:grid;gap:13px}.login a{font-size:13px}.login .eyebrow{color:var(--green)}label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#b6bfd3}input,select,textarea{width:100%;min-width:0;border:1px solid #ffffff1b;border-radius:7px;background:#10151f;color:var(--text);padding:10px 12px}textarea{resize:vertical;min-height:100px}.micro{font-size:11px;margin:0;text-align:center}.notice{padding:13px 17px;border:1px solid #8ae0c044;border-radius:9px;background:#19382d;color:#c6f7df;margin:18px 0}.notice.error{background:#381d29;border-color:#ef8ca044;color:#ffbfce}.guild-heading,.section-title{display:flex;justify-content:space-between;gap:15px;align-items:center}.guild-heading{margin:27px 0 20px}.guild-heading h2{margin:4px 0;font-size:28px}.actions{display:flex;gap:9px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:37px}.stats article{padding:18px 21px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.stats span,.stats small{display:block;font-size:11px;color:#9ba7bc}.stats strong{display:block;font-size:30px;margin:4px 0}.stats .stat-highlight{background:linear-gradient(135deg,#2b2923,#1b222c);border-color:#ebc97d22}.stat-highlight strong{font-size:21px;padding-top:6px}.filters{display:flex;gap:8px}.filters select{font-size:12px;width:auto;max-width:230px}.subtle{color:var(--muted);font-size:12px;margin:0 0 20px}.raid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.raid-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.raid-top{padding:20px 22px 10px;display:flex;gap:17px}.date-tile{background:#e5c07810;border:1px solid #e5c07820;border-radius:8px;min-width:56px;text-align:center;padding:7px;color:#efd28e;align-self:flex-start}.date-tile strong{font-size:23px;display:block;line-height:1.2}.date-tile small{text-transform:uppercase;font-size:10px}.raid-info{min-width:0;flex:1}.raid-info h3{font-size:18px;overflow-wrap:anywhere}.raid-meta{font-size:11px;color:var(--muted);margin:5px 0}.card-tags{display:flex;gap:6px;flex-wrap:wrap}.card-tags .tag{font-size:9px}.raid-body{padding:8px 22px 20px}.description{font-size:12px;color:#b8c1d2;white-space:pre-wrap;overflow-wrap:anywhere;margin:3px 0 15px}.role-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.role-box{background:#10151e;border-radius:7px;padding:9px 10px;font-size:11px;color:#b1bacd}.role-box b{display:block;font-size:15px;color:#e1e6f1;margin-top:3px}.role-box.missing b{color:#e8be81}.fill-line{height:4px;border-radius:8px;background:#ffffff0b;overflow:hidden}.fill-line i{display:block;background:linear-gradient(90deg,#b99044,#f3d591);height:100%}.capacity{display:flex;justify-content:space-between;font-size:11px;color:#9da8bc;margin:7px 0 15px}.raid-actions{display:flex;flex-wrap:wrap;gap:7px}.raid-actions button{font-size:11px;padding:8px 10px}.my-status{font-size:12px;color:var(--green);margin:10px 0}.empty{padding:34px;text-align:center;border:1px dashed #e6bd6835;border-radius:12px;color:#a8b2c6;grid-column:1/-1}.empty h3{color:#efe0bd;font-size:19px}.empty p{font-size:13px;max-width:470px;margin:10px auto}.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:30px 0}.lower-grid h2{font-size:19px}.lower-grid button{font-size:11px;padding:7px 10px}.list-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}.list-row small{display:block;color:var(--muted);font-size:11px}.list-row strong{font-size:13px}.tools{margin-top:32px}.tools h2{font-size:20px}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.tool-grid>a{border:1px solid var(--line);border-radius:11px;padding:22px;background:#171c26;color:var(--text)}.tool-grid>a:hover{border-color:#e6bd6855;text-decoration:none}.tool-grid>a>span{font-size:24px;color:var(--accent)}.tool-grid h3{margin-top:15px;font-size:15px}.tool-grid p{font-size:12px;color:var(--muted)}.tool-grid b{font-size:11px;color:var(--accent)}.roadmap{display:flex;align-items:flex-start;gap:18px;background:#171b25;border:1px solid var(--line);border-radius:10px;padding:20px;margin-top:22px}.roadmap .tag{white-space:nowrap}.roadmap h3{font-size:13px}.roadmap p{font-size:12px;color:var(--muted);margin:0}.muted{color:#a5aec1;border-color:var(--line)}footer{display:flex;justify-content:space-between;gap:15px;margin-top:36px;color:#768298;font-size:11px}dialog{width:min(680px,calc(100% - 24px));max-height:90vh;background:#1a2030;border:1px solid #e5c07835;border-radius:15px;padding:25px;color:var(--text)}dialog::backdrop{background:#050812cc;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.dialog-head h2{margin:0;font-size:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid .wide{grid-column:1/-1}.form-error{color:#ffb6bf;font-size:13px;white-space:pre-wrap}#editorForm>.primary{width:100%}.roster-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.roster-row small{display:block;color:var(--muted);font-size:11px}.roster-row button{font-size:11px}.roster-row p{font-size:12px;margin:5px 0;color:#e5d6b5}.history{margin-top:22px}.history li{font-size:12px;margin:10px 0;overflow-wrap:anywhere}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip:focus{position:fixed;top:10px;left:10px;z-index:99;background:#211d36;padding:12px}[hidden]{display:none!important}@media(min-width:1700px){.hero{padding-left:max(48px,calc((100vw - 1450px - 245px)/2 + 42px))}}@media(max-width:1100px){.sidebar{width:210px;padding:26px 14px}.brand{font-size:19px}main{margin-left:210px}.content{padding:0 25px 25px}.topbar{padding:17px 25px}.hero{padding:40px 29px}.hero h1{font-size:38px}.stats{grid-template-columns:repeat(2,1fr)}.login{gap:25px}.raid-grid{grid-template-columns:1fr}.section-title{flex-wrap:wrap}}@media(max-width:720px){.sidebar{position:static;width:100%;padding:16px 20px;display:block}.sidebar .nav-label,.sidebar nav,.side-bottom{display:none}.brand{font-size:20px}main{margin-left:0}.topbar{padding:12px 20px;font-size:9px;flex-wrap:wrap}.hero{min-height:300px;padding:32px 22px;background-position:65% center}.hero h1{font-size:35px}.content{padding:0 16px 25px}.login{grid-template-columns:1fr;gap:20px;padding:22px;margin-top:10px}.login h2{font-size:23px}.stats{gap:9px;margin-bottom:27px}.stats article{padding:14px}.guild-heading{align-items:flex-start;flex-direction:column}.guild-heading h2{font-size:24px}.lower-grid,.tool-grid{grid-template-columns:1fr}.filters{flex-wrap:wrap}.filters select{max-width:100%}.section-title h2{font-size:22px}.raid-top{padding:18px 17px 8px}.raid-body{padding:8px 17px 18px}.roadmap{flex-direction:column;gap:12px}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.roster-row{align-items:flex-start}footer{flex-wrap:wrap}dialog{padding:20px}.hero-tags span{font-size:9px}}

@media(max-width:720px){.sidebar{padding:13px 20px 15px}.brand{width:178px;gap:4px;align-items:flex-start}.brand-logo{width:178px}.brand-edition{font-size:7px;letter-spacing:1.15px;padding-left:2px}}

/* Compact raid cards: prioritize joining, loot and the roster. */
.raid-card{display:flex;flex-direction:column;transition:border-color .18s;box-shadow:0 8px 24px #00000012}
.raid-card:hover{border-color:#e9c77940}
.raid-heading{padding:12px 22px;color:#eed395;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #ffffff0b;background:linear-gradient(100deg,#e9c77912,transparent)}
.raid-card[data-kind=hyjal] .raid-heading{color:#a8dec8;background:linear-gradient(100deg,#6aa88820,transparent)}
.raid-card[data-kind=barrow] .raid-heading{color:#cbb7f3;background:linear-gradient(100deg,#9675c620,transparent)}
.raid-card[data-kind=onyxia] .raid-heading{color:#eab195;background:linear-gradient(100deg,#c6785020,transparent)}
.raid-top{padding-top:18px;padding-bottom:16px;align-items:center}.raid-info h3{font-size:20px;margin:0}.raid-meta{line-height:1.7}.date-tile{min-width:50px;text-align:center}
.raid-body{display:flex;flex-direction:column;flex:1}.role-box{position:relative;padding-left:32px}.role-icon{position:absolute;left:10px;top:12px;font-size:15px}.role-box b{font-size:15px}.raid-actions{margin-top:auto;padding-top:8px;gap:8px}.raid-actions button{font-size:12px;padding:10px 13px}.raid-more{margin-top:14px;border-top:1px solid var(--line);padding-top:11px}.raid-more summary{cursor:pointer;color:var(--muted);font-size:11px;width:fit-content;padding:3px 0}.raid-extra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px}.raid-extra button,.raid-extra a{font-size:11px}.raid-extra button{padding:8px 10px}.raid-more[open] summary{color:var(--accent)}
@media(max-width:720px){.raid-heading{padding:10px 17px}.raid-actions button{flex:1;padding:10px 8px;font-size:11px}.raid-extra{align-items:stretch;flex-direction:column}.raid-extra a{padding:8px 0}}

/* Keep character identity above management controls; controls must not shrink names. */
#rosterContent .roster-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center}
#rosterContent .roster-row>.forever-class-identity{grid-column:1/-1;width:100%;min-width:0;align-items:flex-start}
#rosterContent .forever-class-copy{flex:1;min-width:0}
#rosterContent .roster-row>button{min-height:44px;white-space:normal}
#rosterContent .roster-row>select{width:100%;min-width:0;min-height:44px;font-size:13px}
#rosterContent .forever-class-copy strong{overflow-wrap:break-word;word-break:normal}
@media(max-width:560px){
 #rosterContent .roster-row{grid-template-columns:minmax(0,1fr);gap:10px}
 #rosterContent .roster-row>button,#rosterContent .roster-row>select{width:100%}
 #roster .dialog-head{align-items:flex-start}
 #roster .dialog-head h2{min-width:0;overflow-wrap:break-word}
 #roster .dialog-head button{flex:none}
}

#meinGuildLoot .account-characters{display:grid;gap:10px;margin:18px 0}#meinGuildLoot .account-shortcuts{display:flex;flex-wrap:wrap;gap:10px}#meinGuildLoot .account-shortcuts a{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:8px}#meinGuildLoot .forever-class-copy{flex:1}#meinGuildLoot .account-guild{color:var(--muted)}