.wfls{--bg:#0e0e10;--card:#1b1b1f;--line:#2c2f33;--ink:#e0e0e0;--muted:#9a9a9d;box-sizing:border-box;max-width:1120px;margin:30px auto;padding:clamp(18px,3vw,30px);color:var(--ink);background:linear-gradient(145deg,#1b1b1f,#121214);border:1px solid #2c2f33;border-radius:6px;box-shadow:0 18px 42px rgba(0,0,0,.35);font-family:inherit}
.wfls *{box-sizing:border-box}
.wfls__header{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--line)}
.wfls__eyebrow{margin:0 0 8px;color:#c79a26;font-weight:700;font-size:11px;letter-spacing:.12em}
.wfls h2{margin:0;color:#fff;font-size:clamp(22px,3vw,32px);line-height:1.1}
.wfls__filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.wfls__filters span,.wfls__metric{border:1px solid #37393d;background:#171719;border-radius:4px}
.wfls__filters span{padding:5px 9px;color:#c7c7c8;font-size:12px}
.wfls__metric{min-width:138px;padding:10px 13px;text-align:right}
.wfls__metric span{display:block;color:var(--muted);font-size:11px}
.wfls__metric strong{font-size:14px;color:#fff}
.wfls__legend{display:grid;grid-template-columns:52px minmax(175px,1.05fr) minmax(320px,2fr);gap:12px;padding:16px 0 9px;color:#818184;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.wfls__legend span:nth-child(3){display:none}
.wfls__rows{list-style:none;margin:0;padding:0}
.wfls__row{display:grid;grid-template-columns:52px minmax(175px,1.05fr) minmax(320px,2fr);gap:12px;align-items:center;min-height:62px;padding:9px 0;border-top:1px solid #2c2f33}
.wfls__rank{font:700 15px/1 ui-monospace,SFMono-Regular,monospace;color:#9d9da1;text-align:center}
.wfls__identity{display:flex;align-items:center;gap:10px;min-width:0}
.wfls__identity strong,.wfls__identity small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfls__identity strong{font-size:14px;color:#f0f0f0}
.wfls__identity small{font-size:12px;color:var(--muted);margin-top:2px}
.wfls__sigil{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid rgba(255,255,255,.17);border-radius:4px;color:#fff;font-weight:800;font-size:15px;background:#444}
.wfls__sigil--druid,.wfls__bar-fill--druid{background:#ca6d19}
.wfls__sigil--hunter,.wfls__bar-fill--hunter{background:#71884f}
.wfls__sigil--mage,.wfls__bar-fill--mage{background:#7391a2}
.wfls__sigil--paladin,.wfls__bar-fill--paladin{background:#9b7080}
.wfls__sigil--priest,.wfls__bar-fill--priest{background:#aaa}
.wfls__sigil--rogue,.wfls__bar-fill--rogue{background:#b49736}
.wfls__sigil--shaman,.wfls__bar-fill--shaman{background:#597794}
.wfls__sigil--warlock,.wfls__bar-fill--warlock{background:#756b86}
.wfls__sigil--warrior,.wfls__bar-fill--warrior{background:#91765d}
.wfls__performance{display:grid;grid-template-columns:minmax(0,1fr) 155px;gap:13px;align-items:center}
.wfls__bar{height:10px;overflow:hidden;border-radius:3px;background:#303136;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.wfls__bar-fill{display:block;height:100%;width:0;border-radius:inherit;opacity:.94;box-shadow:none;transition:width 1050ms cubic-bezier(.16,1,.3,1)}
.wfls__numbers{text-align:right}
.wfls__numbers strong{display:block;color:#f4f4f4;font:700 14px/1.2 ui-monospace,SFMono-Regular,monospace}
.wfls__footer{display:flex;gap:16px;justify-content:space-between;align-items:end;margin-top:22px;padding-top:17px;border-top:1px solid var(--line);color:#a5a5a8;font-size:12px;line-height:1.55}
.wfls__footer p{max-width:720px;margin:0}
.wfls__footer div{text-align:right;white-space:nowrap}
.wfls__footer span{display:block;margin-bottom:5px}
.wfls__footer a{color:#d4af37;text-decoration:none;font-weight:700}
.wfls__footer a:hover{color:#e5c45a;text-decoration:underline}
.wfls-empty{padding:22px;border:1px solid #3a3a3d;border-radius:6px;background:#1b1b1d;color:#e0e0e0}
@media(max-width:700px){.wfls{padding:18px 14px;border-radius:6px}
.wfls__header{display:block}
.wfls__metric{display:inline-block;margin-top:14px;text-align:left}
.wfls__legend{display:none}
.wfls__row{grid-template-columns:30px minmax(0,1fr);gap:8px;padding:12px 0}
.wfls__performance{grid-column:2;grid-template-columns:minmax(0,1fr) 116px;gap:9px}
.wfls__rank{text-align:left;font-size:13px}
.wfls__sigil{width:32px;height:32px;flex-basis:32px}
.wfls__footer{display:block}
.wfls__footer div{margin-top:12px;text-align:left;white-space:normal}
}
@media(max-width:360px){.wfls h2{font-size:21px}
.wfls__performance{grid-template-columns:1fr 94px}
.wfls__numbers strong{font-size:12px}
.wfls__identity strong{font-size:13px}
}