:root{--bg:#0e1117;--panel:#151b25;--panel2:#1b2431;--text:#e8edf4;--muted:#9ca8ba;--border:#2b3748;--accent:#79b8ff;--bad:#ff6b6b;--warn:#ffd166;--good:#66d9a3}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#111722,#0e1117);border-bottom:1px solid var(--border);padding:18px 22px;display:flex;gap:20px;justify-content:space-between;align-items:center}h1{margin:0;font-size:24px}h2{margin:8px 0 14px;font-size:21px}h3{margin:0 0 10px;font-size:16px}h4{margin:12px 0 8px}p{margin:6px 0;color:var(--muted)}.header-actions{display:flex;gap:10px;align-items:center}input,select,button{background:#0f1520;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:9px 11px}input{min-width:270px}button{cursor:pointer}button:hover,button.active{border-color:var(--accent);background:#172234}nav{position:sticky;top:78px;z-index:9;background:#0e1117;border-bottom:1px solid var(--border);padding:10px 22px;display:flex;gap:8px;flex-wrap:wrap}main{padding:18px 22px 70px}.tab{display:none}.tab.active{display:block}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;margin:0 0 14px;box-shadow:0 8px 24px rgba(0,0,0,.15)}.card.subtle{background:var(--panel2)}.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:#101723;border-radius:999px;padding:4px 9px;margin:2px 4px 2px 0;color:var(--text)}.pill.kill{border-color:var(--good);color:var(--good)}.pill.warn{border-color:var(--warn);color:var(--warn)}.pill.bad{border-color:var(--bad);color:var(--bad)}.pull-tabs,.player-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}.pull-tab,.player-tab{padding:8px 10px;border-radius:10px}.class-name{font-weight:700}.muted{color:var(--muted)}.bad{color:var(--bad)}.warn{color:var(--warn)}.good{color:var(--good)}table{width:100%;border-collapse:collapse;margin-top:8px;overflow:hidden;border-radius:12px}th,td{border-bottom:1px solid var(--border);padding:8px 8px;text-align:left;vertical-align:top}th{color:#cbd5e1;background:#111927;font-weight:600}tr:hover td{background:#111927}.nowrap{white-space:nowrap}.small{font-size:12px}.gear{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}.gear a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.death-window{max-height:240px;overflow:auto}details{border:1px solid var(--border);border-radius:12px;padding:10px;margin-top:10px;background:#101723}summary{cursor:pointer;color:#dce7f6;font-weight:600}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}@media(max-width:900px){header{display:block}.header-actions{margin-top:12px}.split{grid-template-columns:1fr}input{min-width:0;width:100%}nav{top:112px}}
.pull-tab.kill-tab {
  border-color: rgba(76, 175, 80, .85);
  box-shadow: 0 0 0 1px rgba(76, 175, 80, .25) inset;
}
.pull-tab.kill-tab.active {
  background: rgba(76, 175, 80, .18);
}
.bar-wrap{position:relative;height:28px;min-width:180px;background:#0f1520;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.bar{position:absolute;left:0;top:0;bottom:0;background:rgba(255,107,107,.45)}
.bar.badbar{background:linear-gradient(90deg,rgba(255,107,107,.55),rgba(255,209,102,.45))}
.bar-wrap span{position:relative;z-index:1;display:flex;height:100%;align-items:center;padding-left:9px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* v7 WCL-like hover bars */
.bar-wrap{overflow:visible;z-index:1}
.bar-wrap:hover{z-index:50}
.bar-tooltip{display:none;position:absolute;left:0;top:32px;min-width:290px;max-width:460px;background:#090d14;border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:0 18px 48px rgba(0,0,0,.55);color:var(--text);font-size:12px;line-height:1.35;white-space:normal}
.bar-wrap:hover .bar-tooltip{display:block}
.bar-tip-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.bar-tip-row:last-child{border-bottom:0}.bar-tip-row b{font-weight:700}.bar-tip-row em{color:var(--muted);font-style:normal}.wowhead-link{font-weight:600}
.stat-priority{font-size:15px;font-weight:700;color:var(--text);background:#0f1520;border:1px solid var(--border);border-radius:10px;padding:9px 10px;margin:6px 0 8px}.source-link{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:4px 9px;margin:2px 4px 2px 0;color:var(--accent);text-decoration:none}.source-link:hover{border-color:var(--accent);background:#172234}.card .bar-wrap{margin:4px 0}.gear{margin-top:8px}

/* v10 bars: keep fill clipped inside the frame while tooltip can overflow and stay hoverable */
.bar-wrap{position:relative;min-width:180px;height:28px;overflow:visible;z-index:1;background:transparent;border:0;border-radius:0}
.bar-wrap:hover{z-index:100}
.bar-wrap::after{content:"";display:none;position:absolute;left:0;right:0;top:28px;height:12px}
.bar-wrap:hover::after{display:block}
.bar-clip{position:relative;height:28px;background:#0f1520;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.bar{position:absolute;left:0;top:0;bottom:0;max-width:100%;border-radius:8px 0 0 8px;background:rgba(255,107,107,.45)}
.bar.badbar{background:linear-gradient(90deg,rgba(255,107,107,.55),rgba(255,209,102,.45))}
.bar-clip span{position:relative;z-index:1;display:flex;height:100%;align-items:center;padding-left:9px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.bar-wrap > span{display:none}
.bar-tooltip{display:none;position:absolute;left:0;top:36px;min-width:320px;max-width:520px;background:#090d14;border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:0 18px 48px rgba(0,0,0,.55);color:var(--text);font-size:12px;line-height:1.35;white-space:normal}
.bar-wrap:hover .bar-tooltip,.bar-tooltip:hover{display:block}

.gear{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gear-item{display:grid;grid-template-columns:78px minmax(0,1fr);gap:4px 8px;align-items:center;background:#0f1520;border:1px solid var(--border);border-radius:10px;padding:8px;min-width:0}
.gear-item a{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--accent);text-decoration:none}
.gear-item.missing-enchant{border-color:rgba(255,107,107,.75);background:rgba(255,107,107,.08)}
.gear-slot{grid-row:1 / span 3;color:#dce7f6;font-weight:700;font-size:12px}
.enchant-ok{color:var(--good);font-size:12px}.enchant-miss{color:var(--bad);font-size:12px;font-weight:700}

.stat-row td:first-child{font-weight:700}.stat-strength td:first-child{color:#f0a45d}.stat-agility td:first-child{color:#66d9a3}.stat-intellect td:first-child{color:#79b8ff}.stat-stamina td:first-child{color:#d6b3ff}.stat-crit td:first-child{color:#ff8a8a}.stat-haste td:first-child{color:#ffd166}.stat-mastery td:first-child{color:#a8e6cf}.stat-versatility td:first-child{color:#b9c6ff}.stat-leech td:first-child,.stat-avoidance td:first-child,.stat-speed td:first-child{color:var(--muted)}
.score{font-size:18px}.score.good{color:var(--good)}.score.bad{color:var(--bad)}

/* v10 modern WoW-like skin */
:root{
  --bg:#080604;
  --panel:#15100a;
  --panel2:#1e160d;
  --text:#f3ead7;
  --muted:#b7a98b;
  --border:#5a4524;
  --accent:#d7a84d;
  --bad:#ff6b5f;
  --warn:#f3c969;
  --good:#73d18b;
  --rune:#2b1b0c;
}
body{background:radial-gradient(circle at top,#211507 0,#080604 46%,#050403 100%);color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
header{background:linear-gradient(180deg,#211406,#0d0905);border-bottom:1px solid #80602a;box-shadow:0 8px 35px rgba(0,0,0,.55)}
h1{color:#ffd98a;text-shadow:0 0 16px rgba(215,168,77,.35),0 2px 1px #000;letter-spacing:.2px}
h2{color:#ffd98a;text-shadow:0 1px 1px #000} h3{color:#f6d28a} h4{color:#d7a84d}
input,select,button{background:linear-gradient(180deg,#1a1209,#0d0905);border:1px solid #60471e;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
button:hover,button.active{border-color:#d7a84d;background:linear-gradient(180deg,#2a1b0c,#120c06);box-shadow:0 0 0 1px rgba(215,168,77,.18),0 0 20px rgba(215,168,77,.12)}
nav{background:rgba(8,6,4,.92);backdrop-filter:blur(8px);border-bottom:1px solid #4b3618}.card,details{background:linear-gradient(180deg,rgba(39,27,14,.96),rgba(18,13,8,.96));border:1px solid #60471e;box-shadow:0 14px 35px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,225,160,.05)}.card.subtle{background:linear-gradient(180deg,rgba(42,29,15,.88),rgba(17,12,7,.92))}.pill{background:rgba(16,10,5,.82);border-color:#6b5024}.pill.kill,.pill.good{border-color:rgba(115,209,139,.75);color:#8df0aa}.pill.warn{border-color:#d7a84d;color:#ffd98a}.pill.bad{border-color:#b54737;color:#ff9b91}th{background:#20150a;color:#ffd98a;border-bottom-color:#60471e}td{border-bottom-color:rgba(96,71,30,.72)}tr:hover td{background:rgba(89,63,28,.22)}a,.wowhead-link{color:#ffd36e}.source-link{color:#ffd36e;border-color:#6b5024}.source-link:hover{background:#261909;border-color:#d7a84d}.pull-tab,.player-tab{border-radius:12px}.pull-tab{min-width:92px;display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center}.pull-tab small{display:block;color:var(--muted);font-size:11px;line-height:1.1}.pull-duration-under{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-top:2px}.bar-clip{background:#120c06;border-color:#60471e;box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}.bar.badbar{background:linear-gradient(90deg,rgba(153,36,28,.8),rgba(216,124,45,.62),rgba(215,168,77,.45))}.bar-tooltip{background:linear-gradient(180deg,#1b1209,#080604);border-color:#80602a;box-shadow:0 18px 50px rgba(0,0,0,.72),0 0 0 1px rgba(215,168,77,.08);padding:8px}.bar-tip-row-mini{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:5px 7px;margin:3px 0;border:1px solid rgba(128,96,42,.25);border-radius:8px;overflow:hidden;pointer-events:none}.bar-tip-row-mini .mini-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(153,36,28,.38),rgba(215,168,77,.22));z-index:0}.bar-tip-row-mini span,.bar-tip-row-mini b,.bar-tip-row-mini em{position:relative;z-index:1}.bar-tip-row-mini em{color:var(--muted);font-style:normal}.gear-item{background:linear-gradient(180deg,#1a1209,#0f0a05);border-color:#60471e}.gear-item.missing-enchant{border-color:#b54737;background:linear-gradient(180deg,rgba(89,22,18,.58),rgba(20,9,6,.95))}.gear-slot{color:#ffd98a}.stat-priority{background:#120c06;border-color:#60471e;color:#ffe2a0}.score.good{color:#8df0aa}.score.bad{color:#ff9b91}

/* v11 classic WoW frame skin: darker stone panels, gold text and red menu buttons */
:root{
  --bg:#050403;
  --panel:#0a0805;
  --panel2:#12100b;
  --text:#f3e6b7;
  --muted:#b6aa86;
  --border:#6f6b5e;
  --accent:#ffd100;
  --bad:#ff3b31;
  --warn:#ffb82e;
  --good:#41ff73;
  --stone1:#3a3934;
  --stone2:#171612;
  --stone3:#787064;
  --red1:#8c0d0d;
  --red2:#3b0606;
}
body{
  background:
    radial-gradient(circle at top left,rgba(93,78,45,.28),transparent 28%),
    radial-gradient(circle at bottom right,rgba(46,64,78,.18),transparent 32%),
    linear-gradient(180deg,#090806,#020201 70%);
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.1px;
}
header{
  margin:10px 12px 0;
  top:0;
  border:2px solid #747066;
  border-radius:10px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.05),transparent 18%,transparent 82%,rgba(255,255,255,.04)),
    linear-gradient(180deg,#34332f 0,#171511 14%,#060504 50%,#15130f 86%,#34332f 100%);
  box-shadow:0 0 0 1px #000 inset,0 0 0 3px rgba(0,0,0,.55),0 14px 42px rgba(0,0,0,.75);
}
header::before,nav::before,.card::before,details::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(255,209,0,.18);
  border-radius:inherit;
  pointer-events:none;
}
header{position:sticky}
.header-actions{font-family:Inter,Segoe UI,Arial,sans-serif}
h1,h2,h3,h4,summary,th{
  color:#ffd100;
  text-shadow:1px 1px 0 #000,0 0 8px rgba(255,209,0,.34);
  font-weight:500;
}
h1{font-size:25px;text-align:center}
h2{font-size:22px}
h3{font-size:17px;border-bottom:1px solid rgba(255,209,0,.2);padding-bottom:6px;margin-bottom:12px}
h4{font-size:14px}
nav{
  margin:8px 12px 0;
  top:92px;
  border:2px solid #5f5a4f;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(59,58,53,.97),rgba(14,13,10,.96) 16%,rgba(0,0,0,.92) 70%,rgba(30,28,23,.96));
  box-shadow:0 0 0 1px #000 inset,0 7px 24px rgba(0,0,0,.58);
  position:sticky;
}
main{padding:18px 18px 80px}
input,select{
  background:linear-gradient(180deg,#070706,#15130e);
  border:2px solid #5b574d;
  border-radius:4px;
  color:#f1dfaa;
  box-shadow:inset 0 0 0 1px #000,inset 0 2px 6px rgba(0,0,0,.75);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
button,.tab-btn,.pull-tab,.player-tab{
  background:linear-gradient(180deg,#bd2020 0,#7c0d0d 38%,#3d0505 100%);
  border:2px solid #575148;
  border-radius:5px;
  color:#ffd100;
  text-shadow:1px 1px 0 #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.65);
  font-family:Georgia,"Times New Roman",serif;
}
button:hover,.tab-btn:hover,.pull-tab:hover,.player-tab:hover,button.active,.tab-btn.active,.pull-tab.active,.player-tab.active{
  color:#fff1a8;
  border-color:#9b927e;
  background:linear-gradient(180deg,#e12e2e 0,#961010 42%,#4c0606 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 12px rgba(255,209,0,.25),0 1px 2px rgba(0,0,0,.75);
}
.pull-tab.kill-tab{background:linear-gradient(180deg,#1d7630,#0d4218 42%,#061f0b);border-color:#777261}
.card,details{
  position:relative;
  border:2px solid #686257;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 8%),
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 13%,transparent 87%,rgba(255,255,255,.025)),
    linear-gradient(180deg,#282720 0,#0a0805 18%,#000 74%,#14120d 100%);
  box-shadow:0 0 0 1px #000 inset,0 0 0 2px rgba(0,0,0,.64),0 12px 26px rgba(0,0,0,.55);
}
.card.subtle{background:linear-gradient(180deg,#211f19,#050403 62%,#11100c)}
.pill{
  border:1px solid #6c6659;
  background:linear-gradient(180deg,#191711,#050403);
  color:#f1dfaa;
  border-radius:4px;
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
.pill.good{color:#7dff96;border-color:#327d3f}.pill.warn{color:#ffd100;border-color:#9d7e24}.pill.bad{color:#ff938b;border-color:#a23b33}
table{
  border:2px solid #4e4a40;
  border-radius:4px;
  border-collapse:separate;
  border-spacing:0;
  background:#020201;
  box-shadow:inset 0 0 0 1px #000;
}
th{
  background:linear-gradient(180deg,#2e2b22,#090806);
  border-bottom:1px solid #6f6b5e;
  color:#ffd100;
}
td{border-bottom:1px solid rgba(111,107,94,.42);font-family:Inter,Segoe UI,Arial,sans-serif;color:#e8dcc0}
tr:hover td{background:rgba(255,209,0,.075)}
a,.wowhead-link,.gear-item a,.source-link{color:#ffd100;text-decoration:none;text-shadow:1px 1px 0 #000}
a:hover,.wowhead-link:hover,.gear-item a:hover{color:#fff3a4;text-decoration:underline}
.gear{gap:8px}
.gear-item{
  background:linear-gradient(180deg,#171510,#050403);
  border:2px solid #4c473f;
  border-radius:5px;
  box-shadow:inset 0 0 0 1px #000;
}
.gear-item.missing-enchant{border-color:#9c2f28;background:linear-gradient(180deg,#30100e,#060302)}
.gear-slot{color:#ffd100;text-shadow:1px 1px 0 #000}
.enchant-ok{color:#7dff96}.enchant-miss{color:#ff938b}
.bar-clip{
  height:24px;
  background:linear-gradient(180deg,#050403,#15120d);
  border:2px solid #4e4a40;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px #000,inset 0 2px 7px rgba(0,0,0,.9);
}
.bar{border-radius:2px 0 0 2px;background:linear-gradient(180deg,#d22f24,#7f120e 45%,#3a0705)}
.bar.badbar{background:linear-gradient(90deg,#7d0f0a,#b33a14 62%,#c89025)}
.bar-clip span{font-family:Inter,Segoe UI,Arial,sans-serif;color:#fff3ca;padding-left:8px}
.bar-tooltip{
  background:linear-gradient(180deg,#15130e,#030201);
  border:2px solid #6f6b5e;
  border-radius:5px;
  box-shadow:0 0 0 1px #000 inset,0 18px 44px rgba(0,0,0,.82);
}
.bar-tip-row-mini{border-color:#4e4a40;border-radius:4px;background:#050403;font-family:Inter,Segoe UI,Arial,sans-serif}
.bar-tip-row-mini .mini-fill{background:linear-gradient(90deg,rgba(136,16,11,.72),rgba(200,144,37,.32))}
.stat-priority,.source-link{background:linear-gradient(180deg,#171510,#050403);border:2px solid #4e4a40;border-radius:4px}
summary{font-size:15px}
@media(max-width:900px){nav{top:132px}header{margin:0;border-radius:0}nav{margin:8px 0 0}}

/* v12 BasicFrameTemplateWithInset-style skin: textured, flat, more readable class colors */
:root{
  --bg:#040403;
  --panel:#050504;
  --panel2:#0b0a08;
  --text:#f3e3ad;
  --muted:#b7ab8f;
  --border:#717066;
  --border-dark:#080807;
  --accent:#ffd100;
  --bad:#ff6d62;
  --warn:#ffd15c;
  --good:#7dff96;
}
body{
  background:#040403 url("assets/wow-stone-texture.svg") repeat;
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:rgba(0,0,0,.28);
  z-index:-1;
}
header,nav,.card,details,.modal,.stat-priority,.source-link,table,.gear-item,.bar-tooltip{
  background:#050504 url("assets/wow-panel-texture.svg") repeat !important;
  border:2px solid var(--border) !important;
  border-radius:7px !important;
  box-shadow:
    0 0 0 1px #000 inset,
    0 0 0 3px rgba(0,0,0,.74),
    inset 0 0 18px rgba(0,0,0,.92),
    0 12px 28px rgba(0,0,0,.62) !important;
}
header::before,nav::before,.card::before,details::before{
  inset:5px !important;
  border:1px solid rgba(210,204,184,.24) !important;
  border-radius:4px !important;
}
header::after,nav::after,.card::after,details::after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(0,0,0,.78);
  border-radius:3px;
  pointer-events:none;
}
header{padding:18px 22px 14px !important}
nav{padding:10px 12px !important}
main{max-width:1760px}
h1,h2,h3,h4,summary,th,.metric .label{
  color:#ffd100 !important;
  text-shadow:1px 1px 0 #000,0 0 3px #000 !important;
  font-family:Georgia,"Times New Roman",serif !important;
}
h1{font-size:24px !important;letter-spacing:.2px}
h2{font-size:22px !important}
h3{
  font-size:17px !important;
  border-bottom:1px solid rgba(113,112,102,.65) !important;
  padding-bottom:7px !important;
}
h4{font-size:14px !important}
p,li,td,.pill,.muted,input,select,.header-actions,.bar-clip span,.bar-tip-row-mini,.gear-item,.stat-value{
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
}
button,.tab-btn,.pull-tab,.player-tab{
  background:#760c0c url("assets/wow-red-button-texture.svg") repeat !important;
  border:2px solid #6f6b61 !important;
  border-radius:4px !important;
  color:#ffd100 !important;
  text-shadow:1px 1px 0 #000 !important;
  box-shadow:0 0 0 1px #000 inset,inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.5),0 1px 3px #000 !important;
  font-family:Georgia,"Times New Roman",serif !important;
}
button:hover,.tab-btn:hover,.pull-tab:hover,.player-tab:hover,button.active,.tab-btn.active,.pull-tab.active,.player-tab.active{
  background-color:#991111 !important;
  color:#fff2a8 !important;
  border-color:#a9a18d !important;
  box-shadow:0 0 0 1px #000 inset,0 0 10px rgba(255,209,0,.32),0 1px 3px #000 !important;
}
.pull-tab.kill-tab{background-color:#155c23 !important}
input,select{
  background:#0a0907 url("assets/wow-panel-texture.svg") repeat !important;
  border:2px solid #676257 !important;
  border-radius:4px !important;
  color:#ffe9ad !important;
  box-shadow:0 0 0 1px #000 inset,inset 0 0 10px rgba(0,0,0,.78) !important;
}
table{border-spacing:0 !important;overflow:hidden}
th{background:#14130f url("assets/wow-panel-texture.svg") repeat !important}
td{color:#eadfc4 !important;border-bottom:1px solid rgba(113,112,102,.45) !important}
tr:hover td{background:rgba(255,209,0,.08) !important}
.pill{
  background:#080705 url("assets/wow-panel-texture.svg") repeat !important;
  border:1px solid #676257 !important;
  border-radius:4px !important;
  color:#f2e1ae !important;
}
.pill.good,.good{color:#86ff9d !important}.pill.warn,.warn{color:#ffd86b !important}.pill.bad,.bad{color:#ff8f86 !important}
.class-name{
  font-weight:800 !important;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 6px rgba(255,255,255,.18) !important;
  letter-spacing:.15px;
}
a,.wowhead-link,.gear-item a,.source-link{color:#ffd100 !important;text-shadow:1px 1px 0 #000 !important}
a:hover,.wowhead-link:hover,.gear-item a:hover{color:#fff4a3 !important}
.gear-item{
  display:grid !important;
  grid-template-columns:118px minmax(160px,1fr) auto auto !important;
  gap:9px !important;
  align-items:center !important;
  min-height:38px !important;
}
.gear-slot{color:#ffd100 !important;text-shadow:1px 1px 0 #000 !important;font-family:Georgia,"Times New Roman",serif !important;font-size:13px !important}
.enchant-ok{color:#86ff9d !important;font-weight:700}.enchant-miss{color:#ff8f86 !important;font-weight:800}
.gear-item.missing-enchant{background-color:#190504 !important;border-color:#a53c35 !important}
.bar-clip{
  background:#080705 url("assets/wow-panel-texture.svg") repeat !important;
  border:2px solid #5d594e !important;
  border-radius:4px !important;
  box-shadow:0 0 0 1px #000 inset,inset 0 0 9px rgba(0,0,0,.9) !important;
}
.bar,.bar.badbar{background:#9f1710 !important;border-radius:2px !important}
.bar-tooltip{padding:8px !important;min-width:260px}
.bar-tip-row-mini{background:#070604 !important;border:1px solid #575246 !important;border-radius:4px !important}
.bar-tip-row-mini .mini-fill{background:rgba(151,23,16,.58) !important}
.stat-strength td:first-child{color:#ff6b5f !important}.stat-agility td:first-child{color:#37ffb1 !important}.stat-intellect td:first-child{color:#65dcff !important}.stat-stamina td:first-child{color:#e3c7ff !important}.stat-crit td:first-child{color:#ff9b91 !important}.stat-haste td:first-child{color:#ffd86b !important}.stat-mastery td:first-child{color:#a8e6cf !important}.stat-versatility td:first-child{color:#c9c6ff !important}
.score.good{color:#86ff9d !important}.score.bad{color:#ff8f86 !important}

/* v15 polish: smoother WoW textures, class-colored player tabs, safer gear layout */
body{
  background-color:#040403 !important;
  background-image:url("assets/wow-stone-texture.svg") !important;
  background-repeat:repeat !important;
  background-size:240px 240px !important;
}
header,nav,.card,details,.modal,.stat-priority,.source-link,table,.gear-item,.bar-tooltip,input,select,.pill,.bar-clip,th{
  background-image:url("assets/wow-panel-texture.svg") !important;
  background-size:192px 192px !important;
}
button,.tab-btn,.pull-tab,.player-tab{
  background-image:url("assets/wow-red-button-texture.svg") !important;
  background-size:160px 48px !important;
}
.card,details,table,.gear-item,.bar-tooltip{
  box-shadow:
    0 0 0 1px #000 inset,
    0 0 0 3px rgba(0,0,0,.70),
    inset 0 0 14px rgba(0,0,0,.86),
    0 10px 24px rgba(0,0,0,.58) !important;
}
.player-tab{
  color:var(--class-color,#ffd100) !important;
  border-color:color-mix(in srgb,var(--class-color,#ffd100) 70%,#6f6b61) !important;
  text-shadow:1px 1px 0 #000,0 0 6px color-mix(in srgb,var(--class-color,#ffd100) 45%,transparent) !important;
  min-width:92px;
}
.player-tab .player-tab-name{
  color:var(--class-color,#ffd100) !important;
  font-weight:800;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 7px color-mix(in srgb,var(--class-color,#ffd100) 48%,transparent) !important;
}
.player-tab.active .player-tab-name,.player-tab:hover .player-tab-name{
  color:color-mix(in srgb,var(--class-color,#ffd100) 75%,#fff6b0) !important;
}
.class-name{
  color:inherit;
  font-weight:850 !important;
}
table{
  table-layout:fixed;
  width:100%;
}
th,td{
  overflow-wrap:anywhere;
  word-break:normal;
}
td .bar-wrap{
  min-width:150px;
}
.gear{
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important;
  align-items:start;
}
.gear-item{
  grid-template-columns:92px minmax(0,1fr) !important;
  grid-template-areas:
    "slot item"
    "slot ilvl"
    "slot enchant" !important;
  gap:3px 10px !important;
  min-width:0 !important;
  overflow:hidden !important;
  align-items:start !important;
  padding:7px 9px !important;
}
.gear-item .gear-slot{grid-area:slot;line-height:1.15;min-width:0;overflow-wrap:anywhere}
.gear-item a{grid-area:item;min-width:0;max-width:100%;white-space:normal !important;overflow:hidden;text-overflow:clip;line-height:1.2;display:block}
.gear-item > .muted{grid-area:ilvl;min-width:0;white-space:normal;line-height:1.15}
.gear-item > .enchant-ok,.gear-item > .enchant-miss{grid-area:enchant;min-width:0;white-space:normal;line-height:1.15}
@media(max-width:720px){
  .gear{grid-template-columns:1fr !important}
  .gear-item{grid-template-columns:82px minmax(0,1fr) !important}
  table{table-layout:auto}
}




/* v17 WoW-like tiled texture polish */
:root {
  --wow-bg-tile-v17: url("./assets/wow-bg-tile-v17.png");
  --wow-panel-tile-v17: url("./assets/wow-panel-tile-v17.png");
  --wow-inset-tile-v17: url("./assets/wow-inset-tile-v17.png");
  --wow-button-tile-v17: url("./assets/wow-button-tile-v17.png");
  --wow-gold: #ffd200;
  --wow-soft-gold: #e8c878;
  --wow-red: #8a0d0d;
  --wow-border: #5a574e;
  --wow-border-dark: #171717;
}

html,
body {
  min-height: 100%;
  background-color: #171918 !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(95, 84, 54, 0.10), transparent 34rem),
    var(--wow-bg-tile-v17) !important;
  background-repeat: no-repeat, repeat !important;
  background-size: auto, 320px 320px !important;
  background-position: top center, top left !important;
  background-attachment: fixed, fixed !important;
}

body {
  color: #f2e6b6 !important;
  text-shadow: 1px 1px 0 #000;
}

/* Header should feel like a WoW frame but not eat the content. */
header,
.app-header,
.topbar,
.top-bar,
.report-header,
.toolbar,
.navbar {
  background-color: rgba(7, 7, 6, 0.94) !important;
  background-image:
    linear-gradient(rgba(10, 10, 9, 0.82), rgba(10, 10, 9, 0.82)),
    var(--wow-inset-tile-v17) !important;
  background-repeat: repeat !important;
  background-size: 192px 192px !important;
  border: 2px solid var(--wow-border-dark) !important;
  box-shadow:
    inset 0 0 0 1px #6b675d,
    inset 0 0 12px rgba(0,0,0,.95),
    0 2px 8px rgba(0,0,0,.85) !important;
}

/* Fix content hidden under sticky bars. */
main,
#app,
.app,
.report,
.report-shell,
.page,
.content,
.main-content {
  padding-top: 0 !important;
  overflow: visible !important;
}

.tabs,
.tabbar,
.nav-tabs,
.top-tabs {
  position: sticky;
  top: 92px;
  z-index: 20;
  background-color: rgba(8, 8, 7, 0.96) !important;
  background-image:
    linear-gradient(rgba(8,8,7,.84), rgba(8,8,7,.84)),
    var(--wow-inset-tile-v17) !important;
  background-repeat: repeat !important;
  background-size: 192px 192px !important;
  border-bottom: 2px solid #3c3a35 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.75) !important;
}

.grid,
.cards,
.pull-grid,
.overview-grid {
  margin-top: 18px !important;
  gap: 18px !important;
}

/* Shared WoW frame panels. */
.panel,
.card,
.section,
.player-card,
.pull-card,
.summary-card,
.wow-panel,
.points-panel,
.gear-panel,
.stats-panel,
.table-wrap,
.tab-content,
.debug-panel,
.consumables-panel,
.avoidable-panel,
.terrorist-panel {
  background-color: rgba(13, 14, 12, 0.88) !important;
  background-image:
    linear-gradient(rgba(12, 12, 10, 0.68), rgba(12, 12, 10, 0.68)),
    var(--wow-panel-tile-v17) !important;
  background-repeat: repeat !important;
  background-size: 256px 256px !important;
  border: 2px solid #0c0c0b !important;
  box-shadow:
    inset 0 0 0 1px #6b675c,
    inset 0 0 0 2px #252521,
    inset 0 0 20px rgba(0,0,0,.86),
    0 2px 8px rgba(0,0,0,.85) !important;
}

/* Remove the black square feel from nested blocks. */
.kpi,
.metric,
.badge,
.pill,
.tag,
.stat-pill,
.pull-meta,
.mini-card,
.info-box {
  background-color: rgba(11, 12, 10, 0.62) !important;
  background-image:
    linear-gradient(rgba(12, 12, 10, 0.55), rgba(12, 12, 10, 0.55)),
    var(--wow-inset-tile-v17) !important;
  background-repeat: repeat !important;
  background-size: 192px 192px !important;
  border: 1px solid #615c4d !important;
  box-shadow: inset 0 0 8px rgba(0,0,0,.8) !important;
}

/* Tables readable and contained. */
table,
.gear-table,
.player-table,
.points-table,
.damage-table,
.stats-table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  background-color: rgba(6, 7, 6, 0.72) !important;
  background-image:
    linear-gradient(rgba(6,7,6,.78), rgba(6,7,6,.78)),
    var(--wow-inset-tile-v17) !important;
  background-repeat: repeat !important;
  background-size: 192px 192px !important;
}

th,
td {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
  border-color: rgba(112, 104, 82, 0.45) !important;
}

thead,
.table-head,
.header-row,
th {
  color: var(--wow-gold) !important;
  background-color: rgba(12, 12, 10, 0.9) !important;
  background-image:
    linear-gradient(rgba(9,9,8,.74), rgba(9,9,8,.74)),
    var(--wow-inset-tile-v17) !important;
  background-repeat: repeat !important;
  background-size: 192px 192px !important;
}

/* Buttons/tabs closer to WoW red buttons. */
button,
.btn,
.tab,
.player-button,
.player-tab,
.pull-button,
select,
input[type="button"] {
  color: var(--wow-gold) !important;
  background-color: #650909 !important;
  background-image:
    linear-gradient(#9a1515, #5c0707),
    var(--wow-button-tile-v17) !important;
  background-blend-mode: multiply, normal !important;
  background-repeat: repeat !important;
  background-size: auto, 160px 160px !important;
  border: 1px solid #c5a34a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 119, 0.25),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 1px 3px rgba(0,0,0,.8) !important;
}

button:hover,
.btn:hover,
.tab:hover,
.player-button:hover,
.player-tab:hover,
.pull-button:hover {
  filter: brightness(1.15) !important;
}

button.active,
.btn.active,
.tab.active,
.player-button.active,
.player-tab.active,
.pull-button.active,
[aria-selected="true"] {
  background-image:
    linear-gradient(#b01a1a, #7a0d0d),
    var(--wow-button-tile-v17) !important;
  box-shadow:
    inset 0 0 0 1px #ffdc73,
    inset 0 0 10px rgba(255, 210, 0, 0.25),
    0 0 8px rgba(255, 210, 0, 0.14) !important;
}

/* Search/select controls should not look like gray browser inputs. */
input,
select,
textarea {
  background-color: rgba(5, 6, 5, 0.92) !important;
  background-image:
    linear-gradient(rgba(6,6,5,.76), rgba(6,6,5,.76)),
    var(--wow-inset-tile-v17) !important;
  background-repeat: repeat !important;
  background-size: 192px 192px !important;
  color: #f5e7b2 !important;
  border: 1px solid #746c59 !important;
}

/* Tooltips with mini bars stay dark but textured. */
.tooltip,
.custom-tooltip,
.bar-tooltip,
.wow-tooltip {
  background-color: rgba(5, 6, 5, 0.98) !important;
  background-image:
    linear-gradient(rgba(4,5,4,.84), rgba(4,5,4,.84)),
    var(--wow-inset-tile-v17) !important;
  background-repeat: repeat !important;
  background-size: 192px 192px !important;
  border: 1px solid #9a8756 !important;
  box-shadow: inset 0 0 12px #000, 0 4px 18px #000 !important;
}

/* Titles and class-colored names stay readable. */
h1, h2, h3, h4,
.title,
.panel-title,
.card-title,
.pull-title {
  color: var(--wow-gold) !important;
  text-shadow: 1px 1px 0 #000, 0 0 4px rgba(255, 210, 0, 0.18) !important;
}

.class-name,
.player-name,
.name[class*="class-"],
[class*="class-"] .player-name {
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #000, 0 0 4px rgba(0,0,0,.8) !important;
}

/* Avoid huge empty black rectangles by letting body texture show through. */
body > div,
#root,
#app {
  background-color: transparent !important;
}

/* Smaller screens still keep the WoW frame readable. */
@media (max-width: 900px) {
  .tabs,
  .tabbar,
  .nav-tabs,
  .top-tabs {
    top: 0;
    position: relative;
  }
  .grid,
  .cards,
  .pull-grid,
  .overview-grid {
    gap: 12px !important;
  }
}



/* v18 fixes: remove red content rectangle, restore class colors, center layout */
html, body {
  background-color: #090806 !important;
}

body > header,
body > nav,
body > main {
  max-width: 1680px;
  width: calc(100% - 18px);
  margin-left: auto !important;
  margin-right: auto !important;
}

body > header {
  margin-top: 10px !important;
}

body > nav {
  margin-top: 8px !important;
}

body > main {
  margin-top: 12px !important;
  padding-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The content sections use .tab, so never style them like buttons. */
main > .tab,
section.tab,
.tab.active,
.tab {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

/* Keep only actual tab buttons red. */
nav button,
button[data-tab],
.pull-tab,
.player-tab,
.tab-btn,
.player-button,
.pull-button {
  background-color: #650909 !important;
  background-image:
    linear-gradient(180deg, #b62020 0%, #7b0d0d 48%, #4a0606 100%),
    url("assets/wow-red-button-texture.svg") !important;
  background-repeat: repeat !important;
  background-size: auto, 160px 48px !important;
  border: 1px solid #c9a34e !important;
  color: #ffd100 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 237, 156, 0.24),
    inset 0 -2px 0 rgba(0,0,0,.5),
    0 1px 3px rgba(0,0,0,.8) !important;
}

nav button:hover,
button[data-tab]:hover,
.pull-tab:hover,
.player-tab:hover,
.tab-btn:hover,
.player-button:hover,
.pull-button:hover,
nav button.active,
button[data-tab].active,
.pull-tab.active,
.player-tab.active,
.tab-btn.active,
.player-button.active,
.pull-button.active {
  background-image:
    linear-gradient(180deg, #d02d2d 0%, #921111 48%, #560707 100%),
    url("assets/wow-red-button-texture.svg") !important;
  border-color: #f0d277 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 145, .4),
    0 0 8px rgba(255, 209, 0, .12),
    0 1px 3px rgba(0,0,0,.82) !important;
}

/* Preserve class colors on player buttons. */
.player-tab {
  color: var(--class-color, #ffd100) !important;
  border-color: color-mix(in srgb, var(--class-color, #ffd100) 52%, #c9a34e) !important;
}

.player-tab .player-tab-name,
.player-tab > span,
.player-tab span {
  color: var(--class-color, #ffd100) !important;
  font-weight: 800 !important;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 6px color-mix(in srgb, var(--class-color, #ffd100) 36%, transparent) !important;
}

.player-tab:hover .player-tab-name,
.player-tab.active .player-tab-name,
.player-tab:hover span,
.player-tab.active span {
  color: color-mix(in srgb, var(--class-color, #ffd100) 78%, #fff2ae) !important;
}

.player-tabs,
.pull-tabs {
  justify-content: flex-start;
  align-items: center;
}

.grid {
  gap: 16px !important;
}

/* Fix the huge red/black block by ensuring wrappers stay transparent. */
#overview,
#pulls,
#players,
#avoidable,
#terrorist,
#consumables,
#scores,
#debug {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Center the two-column player layout better and keep sections aligned. */
.split {
  align-items: start;
}

header h1 {
  text-align: left !important;
}

/* Inputs/selects should stay dark, not red. */
input,
select,
textarea {
  background-color: rgba(5, 6, 5, 0.92) !important;
  background-image:
    linear-gradient(rgba(6,6,5,.76), rgba(6,6,5,.76)),
    url("assets/wow-panel-texture.svg") !important;
  background-repeat: repeat !important;
  background-size: auto, 192px 192px !important;
  color: #f5e7b2 !important;
  border: 1px solid #746c59 !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.75) !important;
}

/* Make overview cards visually centered in the available page width. */
@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  }
}



/* v19 gear enchant text fix */
.gear {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 8px !important;
}

.gear-item {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas:
    "slot item"
    "slot ilvl"
    "slot enchant" !important;
  align-items: start !important;
  min-height: 76px !important;
  overflow: hidden !important;
}

.gear-slot {
  grid-area: slot !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
}

.gear-item a,
.gear-item .wowhead-link {
  grid-area: item !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.18 !important;
}

.gear-item > .muted {
  grid-area: ilvl !important;
  display: block !important;
  margin-top: 2px !important;
  min-width: 0 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.gear-item > .enchant-ok,
.gear-item > .enchant-miss {
  grid-area: enchant !important;
  display: block !important;
  margin-top: 3px !important;
  min-width: 0 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.gear-item > .enchant-ok:empty,
.gear-item > .enchant-miss:empty {
  display: none !important;
}



/* v20 compact top tabs panel + clearer border */
body > nav {
  position: sticky;
  top: 92px;
  z-index: 25;
  padding: 5px 10px !important;
  min-height: 0 !important;
  gap: 6px !important;
  border: 2px solid #6f6b5e !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(41, 39, 31, .96), rgba(10, 9, 7, .96) 26%, rgba(4, 4, 3, .98) 100%) !important;
  box-shadow:
    0 0 0 1px #000 inset,
    0 0 0 2px rgba(0,0,0,.55),
    0 6px 18px rgba(0,0,0,.65) !important;
}

body > nav::before,
body > nav::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 6px;
}

body > nav::before {
  inset: 3px;
  border: 1px solid rgba(255, 209, 0, .18);
}

body > nav::after {
  inset: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

body > nav button,
body > nav .tab-btn,
body > nav [data-tab] {
  padding: 5px 12px !important;
  min-height: 34px !important;
  line-height: 1.05 !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  margin: 0 !important;
}

body > nav button.active,
body > nav [data-tab].active {
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 163, .42),
    0 0 8px rgba(255, 209, 0, .12),
    0 1px 2px rgba(0,0,0,.82) !important;
}

.header-actions input,
.header-actions select {
  min-height: 38px !important;
}

@media (max-width: 900px) {
  body > nav {
    top: 0 !important;
    padding: 6px 8px !important;
  }
  body > nav button,
  body > nav .tab-btn,
  body > nav [data-tab] {
    padding: 5px 10px !important;
    min-height: 32px !important;
    font-size: 12px !important;
  }
}



/* v21 button-frame polish: framed pull/player tabs and shorter main nav */
body > nav {
  width: fit-content !important;
  max-width: calc(100% - 18px) !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  align-items: center !important;
  gap: 7px !important;
  justify-content: flex-start !important;
}

body > nav button,
body > nav .tab-btn,
body > nav [data-tab] {
  min-height: 36px !important;
  padding: 7px 13px !important;
  line-height: 1.05 !important;
}

/* Shared frame around pull buttons and player buttons */
.pull-tabs,
.player-tabs {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 10px 0 16px !important;
  padding: 8px 10px !important;
  gap: 7px !important;
  border: 2px solid #6f6b5e !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(41, 39, 31, .94), rgba(9, 8, 6, .96) 28%, rgba(4, 4, 3, .98) 100%),
    url("assets/wow-panel-texture.svg") !important;
  background-repeat: repeat !important;
  background-size: auto, 192px 192px !important;
  box-shadow:
    0 0 0 1px #000 inset,
    0 0 0 2px rgba(0,0,0,.58),
    inset 0 0 14px rgba(0,0,0,.78),
    0 5px 14px rgba(0,0,0,.55) !important;
}

.pull-tabs::before,
.player-tabs::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1px solid rgba(255, 209, 0, .17);
  border-radius: 5px;
}

/* Pull/player buttons keep their normal size inside framed panel */
.pull-tab,
.player-tab {
  min-height: 44px !important;
  margin: 0 !important;
}

.player-tab {
  min-height: 34px !important;
  padding: 7px 12px !important;
}

.pull-tab {
  padding: 7px 13px !important;
}

/* Do not let generated content panels inherit red/button backgrounds */
main > section,
section.tab,
.tab.active {
  width: 100% !important;
}

/* Mobile: full width only when needed */
@media (max-width: 900px) {
  body > nav,
  .pull-tabs,
  .player-tabs {
    width: 100% !important;
  }

  body > nav {
    min-height: 44px !important;
    padding: 7px 8px !important;
  }
}



/* v22 make main top nav as wide as the upper header panel */
body > nav {
  width: calc(100% - 18px) !important;
  max-width: 1680px !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  align-items: center !important;
  gap: 7px !important;
  justify-content: flex-start !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body > nav button,
body > nav .tab-btn,
body > nav [data-tab] {
  min-height: 36px !important;
  padding: 7px 13px !important;
  line-height: 1.05 !important;
}

@media (max-width: 900px) {
  body > nav {
    width: calc(100% - 18px) !important;
    max-width: none !important;
  }
}



/* v23 pull panel above players + full-width framed pull/player rows + wowhead tooltip overflow fixes */

/* Make pull and player framed panels stretch like the header/nav area */
.pull-tabs,
.player-tabs {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 8px 10px !important;
  gap: 7px !important;
}

/* Pulls first, then players, with consistent spacing */
.pull-tabs {
  margin: 10px 0 12px !important;
}
.player-tabs {
  margin: 0 0 16px !important;
}

/* Keep pull buttons readable in a full-width row */
.pull-tab {
  min-width: 92px !important;
}
.player-tab {
  min-height: 34px !important;
}

/* Let Wowhead tooltips escape all gear containers */
main,
section,
.tab,
.tab.active,
.card,
details,
.split,
.gear,
.gear-item,
.gear-item a,
.gear-item .wowhead-link {
  overflow: visible !important;
}

.gear {
  position: relative !important;
  z-index: 1 !important;
}

.gear-item {
  position: relative !important;
  z-index: 1 !important;
}

.gear-item:hover,
.gear-item:focus-within {
  z-index: 40 !important;
}

/* Avoid clipping by summary/details wrappers */
details[open] {
  overflow: visible !important;
}

/* Improve Wowhead tooltip stacking if their script injects overlay classes */
.whtt,
.wh-tooltip,
.wowhead-tooltip,
#WHTTtooltip,
#WHTooltip {
  z-index: 99999 !important;
}

/* If the tooltip anchor text wraps, keep it stable without clipping the tooltip */
.gear-item a,
.gear-item .wowhead-link {
  text-overflow: clip !important;
}

/* On narrow screens keep the framed rows full width */
@media (max-width: 900px) {
  .pull-tabs,
  .player-tabs {
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* v25 performance + tooltip fixes */
table,
thead,
tbody,
tr,
td,
th {
  background-image: none !important;
}

.card,
details,
.pull-tabs,
.player-tabs,
body > nav,
body > header {
  box-shadow:
    0 0 0 1px #000 inset,
    0 0 0 2px rgba(0,0,0,.55),
    inset 0 0 8px rgba(0,0,0,.78) !important;
}

main,
section,
.tab,
.tab.active,
.card,
details,
.split,
.gear,
.gear-item {
  overflow: visible !important;
}

.gear,
.gear-item {
  position: relative !important;
}

.gear-item:hover {
  z-index: 50 !important;
}

.whtt,
.wh-tooltip,
.wowhead-tooltip,
#WHTTtooltip,
#WHTooltip {
  z-index: 99999 !important;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    transition-duration: 0.06s !important;
  }
}