/* Screen: a stand-in for the game world, HUD pinned like UIParent. */
*{box-sizing:border-box}
:root{--accent:#3fc7eb;--steel:#aab7c6} /* class color (Mage); steel for the swing bars */
/* UI theme (/skimt > General > Theme): panels and their backgrounds, borders, the accent
   (active borders, titles, lines) and text. Not bar colors (health, power, cast, XP, swing). */
:root{--ui-accent:#ebc02e;--ui-accent-rgb:235 192 46;--ui-bg-rgb:16 16 15;--ui-panel:#141412;--ui-border:#000;--ui-text:#e8dfc9;--ui-text-dim:#c9be96;
	--ui-surface-rgb:25 26 24;--ui-edge:#090907; /* surface/edge: behind and around unit bar fills (theme.unitSurface/unitEdge) */
	--q-low:#c9be96;--q-within:#ebc02e;--q-high:#c4643a} /* quest/level difficulty: below, within, above your range */
html,body{margin:0;height:100%;overflow:hidden}
body{background:radial-gradient(ellipse at 50% 40%,#393b30,#141612);color:var(--ui-text);font:14px system-ui,sans-serif;user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
.screen{position:fixed;inset:0}
.hud{position:absolute}
.blank{background:rgb(var(--ui-bg-rgb) / .55);border:1px solid var(--ui-border)}

/* Unit frames (UnitParts.lua): bars 208x20 (theme.unitSurface behind, theme.unitEdge
   border), 1px apart; square portrait as tall as both, the same 1px away; name/level 12px, 4px above. */
.unit{font-size:12px;color:var(--ui-text);cursor:pointer}
/* Targeted: 1px house gold, 2px out from portrait and bars (theme.gold, selectionInset). */
.unit.selected .unit-body{outline:1px solid var(--ui-accent);outline-offset:2px}
.unit-label{display:flex;justify-content:space-between;gap:6px;height:14px;margin-bottom:4px;line-height:14px;white-space:nowrap}
.unit-name{overflow:hidden;text-overflow:ellipsis}
.unit-level{flex:none}
.unit-body{display:flex;gap:1px} /* portrait as far from the bars as they are from each other */
.unit.mirrored .unit-label,.unit.mirrored .unit-body{flex-direction:row-reverse}
.unit-portrait{position:relative;flex:none;background:rgba(0,0,0,.5);border:1px solid var(--ui-edge);overflow:hidden} /* square, as tall as the bars (inline) */
.unit-silhouette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,#8a826a 0 20%,transparent 22%),radial-gradient(ellipse at 50% 108%,#5e5848 0 44%,transparent 46%)}
.unit-bars{display:flex;flex-direction:column;gap:1px} /* width inline */
.unit-bar{position:relative;background:rgb(var(--ui-surface-rgb) / .95);border:1px solid var(--ui-edge);overflow:hidden} /* height inline */
/* Every health, mana, rage and energy fill: a vertical gradient (51% at the bottom to
   75% at the top) in the bar's color, with a bevel: two 1px rows along the top
   (brighter) and bottom (darker), stepped in 2/1px at the start, 1px short at the end.
   Thin bars (.thin) get one row each. Mirrored bars (.reverse) step in on the right. */
.bevel{--band-top:rgba(255,255,255,.15);--band-bottom:rgba(0,0,0,.2);
	--bands:linear-gradient(var(--band-top),var(--band-top)) 2px 0/calc(100% - 3px) 1px no-repeat,linear-gradient(var(--band-top),var(--band-top)) 1px 1px/calc(100% - 2px) 1px no-repeat,
		linear-gradient(var(--band-bottom),var(--band-bottom)) 2px 100%/calc(100% - 3px) 1px no-repeat,linear-gradient(var(--band-bottom),var(--band-bottom)) 1px calc(100% - 1px)/calc(100% - 2px) 1px no-repeat;
	--blend:normal,normal,normal,normal,multiply,normal;
	background:var(--bands),linear-gradient(to top,#828282,#bebebe),var(--tint);background-blend-mode:var(--blend)}
.bevel.reverse{--bands:linear-gradient(var(--band-top),var(--band-top)) 1px 0/calc(100% - 3px) 1px no-repeat,linear-gradient(var(--band-top),var(--band-top)) 1px 1px/calc(100% - 2px) 1px no-repeat,
		linear-gradient(var(--band-bottom),var(--band-bottom)) 1px 100%/calc(100% - 3px) 1px no-repeat,linear-gradient(var(--band-bottom),var(--band-bottom)) 1px calc(100% - 1px)/calc(100% - 2px) 1px no-repeat}
.bevel.thin{--bands:linear-gradient(var(--band-top),var(--band-top)) 0 0/100% 1px no-repeat,linear-gradient(var(--band-bottom),var(--band-bottom)) 0 100%/100% 1px no-repeat;--blend:normal,normal,multiply,normal}
/* Bar colors matched in OKLCH (perceived lightness/colorfulness): colorfulness 0.19 for all
   (energy 0.17, the most a screen shows for that yellow), each keeps its hue; rage leans
   crimson, apart from enemy red. Theme/Blizzard originals in brackets. */
.tint-health{--tint:#41ad2e}  /* L .66, H 141  [theme.health #47cc30] */
.tint-enemy{--tint:#d33c33}   /* L .58, H 28   [theme.enemyHealth #ba211c] */
.tint-mana{--tint:#3c79f0}    /* L .60, H 262  [theme.power.MANA #1a61fa] */
.tint-rage{--tint:#d3384e}    /* L .58, H 18   [PowerBarColor.RAGE #ff0000] */
.tint-energy{--tint:#e8cf23}  /* L .85, H 100  [PowerBarColor.ENERGY #ffff00] */
.unit-fill{position:absolute;left:0;top:0;bottom:0}
.unit.mirrored .unit-fill{left:auto;right:0}
.unit-value{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;white-space:nowrap;color:var(--ui-text);text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.unit-value.at-left{justify-content:flex-start;padding-left:5px}
.unit-value.at-right{justify-content:flex-end;padding-right:5px}
/* Power cost of the current cast over the end of the fill (theme.powerCost), and the
   cast's progress sweeping across it (theme.castProgress); both the theme bar texture. */
.power-cost{position:absolute;top:0;bottom:0}
.cost-block,.cast-progress{position:absolute;left:0;top:0;bottom:0;background:url(media/bar.png) 0 0/100% 100%}
.cost-block{right:0;opacity:.35}
.cast-progress{opacity:.45}
.unit.mirrored .cast-progress{left:auto;right:0} /* sweeps with the mirrored fill */
/* Target/focus casts: the power fill, as long as the cast's progress (power amount hidden),
   under the player's cast sweep (theme.castProgress); darkened if it can't be interrupted. */
.cast-sweep{position:absolute;inset:0;background:url(media/bar.png) 0 0/100% 100%;opacity:.45}
.cast-sweep.locked{background:url(media/bar.png) 0 0/100% 100%,#000;background-blend-mode:multiply;opacity:.55}
/* A cast in place of the power bar (target, focus): spell from the fill's start, time left at the far end. */
.unit-cast{position:absolute;inset:0 5px;z-index:1;display:flex;justify-content:space-between;gap:6px;align-items:center;font-size:11px;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000;white-space:nowrap}
.unit.mirrored .unit-cast{flex-direction:row-reverse}
.unit-cast-spell{overflow:hidden;text-overflow:ellipsis}

/* HUD positions. */
.player-frame{position:absolute;right:calc(50% + 60px);bottom:calc(300px - var(--bar-shift, 0px))}
.target-frame{position:absolute;left:calc(50% + 60px);bottom:calc(300px - var(--bar-shift, 0px))}
.xp-bar{left:0;right:0;bottom:0;height:8px;background:rgb(var(--ui-bg-rgb) / .7);border:1px solid var(--ui-border)}
.xp-fill,.xp-rested{position:absolute;left:0;top:0;bottom:0;background:url(media/bar.png) 0 0/100% 100%,var(--bar-color,var(--ui-accent));background-blend-mode:multiply} /* /skimt color, theme accent by default */
.xp-rested{opacity:.35}
.tooltip{position:absolute;z-index:500;padding:6px 8px;background:rgb(var(--ui-bg-rgb) / .92);border:1px solid var(--ui-border);font-size:12px;line-height:1.45;color:#fff;text-shadow:none;white-space:nowrap}
/* A HUD element showing a tooltip rises above the rest of the HUD (windows stay on top), so
   neighbours like the stance bar don't cover it. */
.hud:has(.tooltip){z-index:90}
.tooltip-title{color:var(--ui-accent);font-size:13px}
.xp-tooltip{left:50%;bottom:calc(100% + 6px);transform:translateX(-50%)}
.party-frame{left:calc(var(--hud-side, 0px) + 20px);top:160px;display:flex;flex-direction:column;gap:4px}
.raid-frame{top:160px;display:flex;gap:3px}
.raid-group{display:flex;flex-direction:column;gap:3px}
.minimap{right:calc(var(--hud-side, 0px) + 20px);top:calc(var(--top-inset, 0px) + 20px);width:250px}

/* Tracker-style header: dark strip, dark top line, gold bottom line, all with faded ends. */
.strip{position:relative;background:linear-gradient(90deg,transparent,rgb(var(--ui-bg-rgb) / .85) 60px,rgb(var(--ui-bg-rgb) / .85) calc(100% - 60px),transparent)}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:1px}
.strip::before{top:0;background:linear-gradient(90deg,transparent,#050505 60px,#050505 calc(100% - 60px),transparent)}
.strip::after{bottom:0;background:linear-gradient(90deg,transparent,var(--ui-accent) 60px,var(--ui-accent) calc(100% - 60px),transparent)}

/* Section headers (minimap zone bar, tracker sections): one design, like ns.FadedStrip in-game.
   26px faded strip (.strip), title in the house gold on the left, buttons at the right end. */
.header-strip{display:flex;align-items:center;gap:4px;height:26px;padding:0 4px 0 8px}
.header-title{flex:1;min-width:0;color:var(--ui-accent);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-strip button{display:grid;place-items:center;width:18px;height:18px;padding:0;background:none;border:0}
.header-strip button:hover{filter:brightness(1.3)}
/* Our own icons (art/minimap-icons/): white PNGs used as masks (media/icons.css), so the
   color is set here (in-game: SetVertexColor): parchment, house gold on hover. */
.icon{display:block;width:16px;height:16px;background:var(--ui-text-dim);-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.icon-mail{width:18px;height:18px}
.header-strip .mail{position:relative;display:grid;place-items:center;width:18px;height:18px;margin-right:2px} /* 2px more room from the calendar */
/* New mail: a soft accent glow behind the envelope fades in and out (in-game: Media/Glow.tga with a
   looping alpha animation) while the envelope eases to the accent; hovering stops it. */
.header-strip .mail::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:radial-gradient(circle,rgb(var(--ui-accent-rgb) / .6),rgb(var(--ui-accent-rgb) / 0) 62%);opacity:0;pointer-events:none;animation:mail-glow 2s ease-in-out infinite alternate}
.header-strip .mail .icon{animation:mail-icon 2s ease-in-out infinite alternate}
@keyframes mail-glow{to{opacity:.85}}
@keyframes mail-icon{from{background:var(--ui-text-dim)}to{background:var(--ui-accent)}}
.header-strip .mail:hover::before{animation:none;opacity:0}
.header-strip .mail:hover .icon{animation:none;background:var(--ui-accent)}
.mail-tip{right:-4px;top:calc(100% + 8px);white-space:nowrap;font-size:12px}
button:hover>.icon,.mail:hover>.icon{background:var(--ui-accent)}
.calendar{position:relative}
.calendar-day{position:absolute;left:0;right:0;top:7px;font-size:7px;font-weight:700;line-height:8px;text-align:center;color:var(--ui-text-dim)}
.calendar:hover .calendar-day{color:var(--ui-accent)}

/* The map: 198px like Blizzard's, the ring's inner edge just over its edge (434/386 of it). */
.minimap-map{position:relative;width:250px;height:250px;margin-top:6px;border:1px solid var(--ui-border)} /* square, as wide as the header */
.terrain{position:absolute;inset:0;transition:transform .15s;
	background:radial-gradient(circle at 30% 25%,#4f6b33 0 18%,transparent 40%),radial-gradient(circle at 75% 70%,#3f5a2a 0 20%,transparent 45%),radial-gradient(circle at 60% 20%,#5d7a3c 0 10%,transparent 30%),#44602e}
.map-clip{position:absolute;inset:0;overflow:hidden}
.road{position:absolute;left:-10%;top:48%;width:120%;height:6px;background:#8a7650;transform:rotate(-18deg);box-shadow:0 0 0 1px #5e5037}
.lake{position:absolute;left:12%;top:12%;width:42px;height:30px;border-radius:50%;background:#2f5a6e;box-shadow:inset 0 0 6px #1a3440}
.map-poi{position:absolute;width:14px;height:14px;margin:-7px;border-radius:50%;background:#111;border:1px solid var(--ui-accent);color:var(--ui-accent);font:700 9px/12px system-ui;text-align:center}
.player-arrow{position:absolute;left:50%;top:50%;width:0;height:0;margin:-8px 0 0 -6px;border:solid transparent;border-width:0 6px 16px;border-bottom-color:#f4f0e0;filter:drop-shadow(0 0 2px #000)}
/* Zoom +/- on hover: small flat squares in the map's lower right corner, symbols drawn as 1.5px bars. */
.minimap-zoom{position:absolute;right:6px;bottom:6px;z-index:2;display:flex;flex-direction:column;gap:3px;opacity:0;transition:opacity .15s}
.minimap-map:hover .minimap-zoom{opacity:1}
.minimap-zoom button{position:relative;width:18px;height:18px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.minimap-zoom button::before,.zoom-in::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;background:var(--ui-text-dim);transform:translate(-50%,-50%)}
.zoom-in::after{transform:translate(-50%,-50%) rotate(90deg)}
.minimap-zoom button:hover:not(:disabled){border-color:var(--ui-accent)}
.minimap-zoom button:hover:not(:disabled)::before,.zoom-in:hover:not(:disabled)::after{background:var(--ui-accent)}
.minimap-zoom button:disabled{opacity:.35;cursor:default}
.minimap-status{display:flex;justify-content:space-between;margin-top:5px;padding:0 4px;font-size:11px;line-height:13px;color:var(--ui-text-dim);text-shadow:0 1px 1px #000;font-variant-numeric:tabular-nums}

/* Objective tracker. */
.objective-tracker{right:calc(var(--hud-side, 0px) + 20px);top:335px;width:250px;font-size:12px}
.section-header{margin-bottom:6px}
.minimize{color:var(--ui-accent);font-size:14px}
.quest{position:relative;padding:3px 22px 5px 22px}
.poi{position:absolute;left:-1px;top:1px;width:22px;height:22px;padding:0;background:none;border:0}
.quest>.poi{left:0;top:4px;width:14px;height:14px} /* the tracker's flat marker, on the title's line */
/* Tracker marker: flat square button; focused/hover = the theme's gold border. */
.tpoi{display:block;width:14px;height:14px}
.tpoi-box{fill:rgb(var(--ui-bg-rgb) / .85);stroke:#000;stroke-width:1}
.tpoi-glyph{fill:var(--ui-text-dim);font:700 10px system-ui;text-anchor:middle}
.tpoi.is-turnin .tpoi-glyph,.tpoi.is-available .tpoi-glyph{fill:var(--ui-accent)}
.tpoi-x{fill:none;stroke:#d33c33;stroke-width:1.5;stroke-linecap:round}
.tpoi.focused .tpoi-box,.tpoi.hover .tpoi-box,.tpoi:hover .tpoi-box{stroke:var(--ui-accent)}
.tpoi.focused .tpoi-glyph{fill:var(--ui-accent)}
/* Untrack checkbox, shown while hovering a quest. */
.quest>.tracker-untrack{position:absolute;right:2px;top:4px;width:14px;height:14px;opacity:0;transition:opacity .1s}
.quest:hover .tracker-untrack{opacity:1}
.tracker-untrack.qlog-track.on::after{left:3.5px;top:.5px;width:3.5px;height:7px}
.quest-title{cursor:pointer;font-weight:600}
/* Quest level before the title, "24 – Title": same size and colour as the title; fixed-width digits. */
.quest-level{font-variant-numeric:tabular-nums}
.quest-title:hover{filter:brightness(1.25)}
.objective{color:#bbb;padding-left:8px}
/* Quest and level difficulty in three bands (below, within, above your range), from the UI theme. */
.diff-low{color:var(--q-low)}.diff-within{color:var(--q-within)}.diff-high{color:var(--q-high)}

/* Windows. */
.window{position:absolute;background:var(--ui-panel);border:1px solid var(--ui-border);box-shadow:0 4px 24px #0008}
.window-close{font-size:18px;line-height:1;color:#aaa}
.window-close:hover{color:var(--ui-accent)}
.window-body{padding:8px}
.window-blank{width:370px;height:460px}
.window-achievements .window-blank{width:780px;height:520px}

/* Game menu: a column of flat dark buttons, gold on hover; ours marked with a gold edge. */
.game-menu{display:flex;flex-direction:column;gap:10px;width:200px}
.game-menu-group{display:flex;flex-direction:column;gap:3px}
.game-menu-button{height:26px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text);font-size:13px}
.game-menu-button:hover{color:var(--ui-accent);border-color:var(--ui-accent)}
.game-menu-button:active{background:rgba(0,0,0,.9)}
.game-menu-button.ours{color:var(--ui-accent);box-shadow:inset 2px 0 var(--ui-accent)}


/* Buffs and debuffs: rows growing left from the minimap. */
.auras{right:calc(var(--hud-side, 0px) + 290px);display:flex;flex-direction:row-reverse;flex-wrap:wrap;gap:12px 5px;width:420px}
.buffs{top:calc(var(--top-inset, 0px) + 20px)}
.debuffs{top:calc(var(--top-inset, 0px) + 20px + var(--buffs-height, 52px) + 24px)} /* under the buff row, however tall (96px at the default size) */
.aura{position:relative;display:flex;flex-direction:column;align-items:center;width:var(--aura-size, 32px)}
.aura-icon{position:relative;width:var(--aura-size, 32px);height:var(--aura-size, 32px);border:1px solid var(--ui-border);background:#222 center/116% no-repeat}
/* Larger (/skimt): your own buffs, and debuffs you can cure. */
.aura.big{width:calc(var(--aura-size, 32px) * 1.25)}
.aura.big .aura-icon{width:calc(var(--aura-size, 32px) * 1.25);height:calc(var(--aura-size, 32px) * 1.25)}
.debuffs .aura-icon{box-shadow:inset 0 0 0 1px #000}
.aura-stacks{position:absolute;right:1px;bottom:0;font-size:11px;font-weight:700;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.aura-time{margin-top:2px;font-size:10px;line-height:1;color:var(--ui-text);text-shadow:0 1px 1px #000}
.aura-time.short{color:var(--ui-accent)}
.aura:hover .aura-icon{filter:brightness(1.15)}
.aura-tooltip{right:0;top:calc(100% + 6px);width:240px;white-space:normal}
.tooltip-title{display:flex;justify-content:space-between;gap:12px}
.aura-type{font-size:12px}
.tooltip-text{color:#fff}
.tooltip-note{color:var(--ui-text-dim)}

/* Party members. Fills: the shared .bevel look (see the unit frames). */
.member{position:relative;background:rgb(var(--ui-bg-rgb) / .7);border:1px solid var(--ui-border);cursor:pointer}
.member:hover{background:rgba(40,40,38,.8)}
.member.selected{box-shadow:0 0 0 1px var(--ui-accent)}
.member.far{opacity:.5}
.member-health{position:relative;overflow:hidden} /* height inline (settings) */
/* Party portrait (setting): a square as tall as the cell at its left, the bars beside it. */
.member.with-portrait{display:flex}
.member-bars{flex:1;min-width:0}
.member-portrait{position:relative;flex:none;background:rgba(0,0,0,.5);border-right:1px solid var(--ui-border);overflow:hidden}
.member.down .member-portrait{filter:grayscale(1) brightness(.6)}
/* Portrait squares: class icon (edges trimmed), role symbol (large), the 3D model placeholder,
   or the flat 2D portrait placeholder (lighter, no depth). */
.member-class-portrait{position:absolute;inset:0;background:center/116.3% no-repeat}
.member-portrait .unit-silhouette.flat{background:radial-gradient(circle at 50% 36%,#b3a88a 0 19%,transparent 20%),radial-gradient(ellipse at 50% 104%,#8d8468 0 44%,transparent 45%),linear-gradient(#4b4a3f,#3a3931)}
.member-portrait .member-role-portrait{position:absolute;left:12%;top:12%;width:76%;height:76%;filter:drop-shadow(0 1px 1px #000)} /* bigger than in the bar: fills most of the square */
.member-power{border-top:1px solid var(--ui-border)} /* height inline */
.member-fill{position:absolute;left:0;top:0;bottom:0}
.member-power .member-fill{position:relative;height:100%}
.member-heal{position:absolute;top:0;bottom:0;background:rgba(51,217,89,.5)}
/* Big defensive: a pale frosted barrier over the whole health bar, draining right to left
   as it runs out (the health readable underneath), seconds left at its edge. */
.member-barrier{position:absolute;left:0;top:0;bottom:0;z-index:1;pointer-events:auto;
	background:linear-gradient(rgba(225,238,255,.3),rgba(225,238,255,.12)); /* frosted, no stripes: never mistaken for an absorb */
	box-shadow:inset 0 1px rgba(255,255,255,.7),inset -1px 0 rgba(255,255,255,.85);transition:width .1s linear}
.member-barrier-time{position:absolute;right:3px;bottom:1px;font-size:10px;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.compact .member-barrier-time{font-size:9px}
.member-absorb{position:absolute;right:0;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(153,217,255,.35) 0 3px,rgba(255,255,255,.2) 3px 5px);border-left:1px solid rgba(255,255,255,.9)}
.member-label{position:absolute;inset:0 4px;display:flex;align-items:center;justify-content:space-between;gap:4px;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.member-name{display:flex;align-items:center;gap:3px;min-width:0;font-size:11px;line-height:13px;white-space:nowrap;overflow:hidden}
.member-value{flex:none;color:#fff;font-size:10px;line-height:13px}
.member.down .member-value{color:#8f8c84}
.role{flex:none;width:10px;height:10px;filter:drop-shadow(0 0 1px #000)}
.role.tank{fill:#6fa8dc}.role.healer{fill:#6ecb5a}.role.dps{fill:#d9695b}
.member-debuffs{position:absolute;right:2px;bottom:2px;display:flex;align-items:flex-end;gap:2px}
/* The aura layer: over the health bar (inside), or beside the cell on its right (outside, party):
   buffs along the top, debuffs along the bottom, both from the cell's edge outward. */
.member-auras{position:absolute;top:0;right:0;pointer-events:none}
.member-auras>*{pointer-events:auto}
.member-auras.outside{left:calc(100% + 4px);right:auto;top:-1px;bottom:-1px;width:80px}
.member-auras.outside .member-buffs{top:0;bottom:auto;left:0;align-items:flex-start}
.member-auras.outside .member-debuffs{left:0;right:auto;bottom:0}
/* Your class's buffs: bottom-left of the health bar, yours larger (setting). With buffs
   showing, the name moves to the top of the bar. */
.member-buffs{position:absolute;left:3px;bottom:2px;display:flex;align-items:flex-end;gap:2px}
.member-buff{width:11px;height:11px;border:1px solid var(--ui-border);background:#222 center/116% no-repeat}
.member-buff.big{width:18px;height:18px} /* same size as your curable debuffs */
.compact .member-buff{width:9px;height:9px}
.compact .member-buff.big{width:15px;height:15px}
.member.with-buffs .member-label{align-items:flex-start;padding-top:2px}
.member-debuff{width:14px;height:14px;border:1px solid;background:#222 center/116% no-repeat}
/* Debuffs you can cure: larger (setting), and clickable to cure (gold edge on hover). */
.member-debuff.big{width:18px;height:18px}
.compact .member-debuff.big{width:15px;height:15px}
.member-debuff.clickable{cursor:pointer}
.member-debuff.clickable:hover{box-shadow:0 0 0 1px var(--ui-accent);filter:brightness(1.2)}

/* Raid cells: narrower and shorter, smaller debuffs, no health percent. */
.compact .member-name{font-size:10px}
.compact .member-debuff{width:12px;height:12px}

/* Chat: flat dark panel that darkens on hover, tabs fade in with it. */
.chat-frame{left:calc(var(--hud-side, 0px) + 20px);bottom:30px;width:440px;height:210px;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.chat-tabs{display:flex;gap:2px;height:22px;opacity:.35;transition:opacity .2s}
.chat-frame:hover .chat-tabs,.chat-frame.typing .chat-tabs{opacity:1}
.chat-tab{padding:0 10px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);border-bottom:0;font-size:11px;color:var(--ui-text-dim)}
.chat-tab.active{color:var(--ui-accent);box-shadow:inset 0 -1px var(--ui-accent)}
.chat-tab:hover{color:#fff}
.chat-log{flex:1;overflow-y:auto;padding:4px 6px;background:rgb(var(--ui-bg-rgb) / .3);border:1px solid transparent;text-shadow:0 1px 1px #000;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent;transition:background .2s,border-color .2s}
.chat-frame:hover .chat-log,.chat-frame.typing .chat-log{background:rgb(var(--ui-bg-rgb) / .6);border-color:#000}
.chat-line{word-wrap:break-word}
.chat-name,.chat-item{cursor:pointer}
.chat-name:hover,.chat-item:hover{text-decoration:underline}
.chat-edit{display:flex;align-items:center;gap:6px;height:26px;margin-top:3px;padding:0 6px;background:rgb(var(--ui-bg-rgb) / .92);border:1px solid var(--ui-border);box-shadow:inset 0 -1px var(--ui-accent)}
.chat-label{flex:none;font-size:13px;text-shadow:0 1px 1px #000}
.chat-edit input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;user-select:text}

/* Stance bar: above the action bars' left end, smaller buttons (same look); active one gold. */
.stance-bar{left:calc(50% - 256px);bottom:calc(163px - var(--bar-shift, 0px));z-index:10;display:flex;gap:3px}
.stance-bar .action-button{width:30px;height:30px}
.stance-bar .action-cooldown{font-size:12px}
/* Pet bar: the same small buttons, right-aligned with the action bars. */
.pet-bar{left:calc(50% + 257px - 327px);bottom:calc(163px - var(--bar-shift, 0px));z-index:10;display:flex;gap:3px}
.pet-bar .action-button{width:30px;height:30px}
.pet-bar .action-cooldown{font-size:12px}
:is(.stance-bar,.pet-bar) .action-hotkey{top:2px;right:2px;font-size:8px}
/* Pet autocast on: a dashed gold ring inside the border. */
.action-button.autocast::before{content:"";position:absolute;inset:2px;z-index:1;border:1px dashed var(--ui-accent);pointer-events:none}

/* Action bars: bottom bar first, the others stacked above it. */
.action-bars{left:50%;bottom:26px;z-index:10;transform:translateX(-50%);display:flex;flex-direction:column-reverse;gap:3px}
.action-bar{display:flex;gap:3px}
.action-button{position:relative;width:40px;height:40px;background:rgb(var(--ui-bg-rgb) / .7);border:1px solid var(--ui-border);cursor:pointer}
.action-button.empty{background:rgb(var(--ui-bg-rgb) / .35);cursor:default}
.action-icon{position:absolute;inset:0;background:#222 center/116.3% no-repeat}
.action-button.oom .action-icon{filter:sepia(1) hue-rotate(190deg) saturate(3) brightness(.6)}
.action-button:not(.empty):hover::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.15)}
.action-button.pressed::after,.action-button:not(.empty):active::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.action-button.active{border-color:var(--ui-accent);box-shadow:inset 0 0 0 1px var(--ui-accent)}
.action-cooldown{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:700;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.action-hotkey,.action-count{position:absolute;font-size:10px;line-height:1;color:var(--ui-text);text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000;z-index:1}
.action-hotkey{top:3px;right:3px}
.action-hotkey.far{color:#ff3333}
.action-count{bottom:3px;right:3px;font-size:11px;color:#fff}
.action-tooltip{left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:280px;white-space:normal;cursor:default}
.tooltip-row{display:flex;justify-content:space-between;gap:12px;color:#fff}
.tooltip-desc{color:var(--ui-accent)}
.action-name{color:#fff}

/* Shift held: everything movable shows it; while dragging nothing else reacts. */
body.shift :is(.hud,.unit),body.shift :is(.hud,.unit) *{cursor:move!important}
.window-title{cursor:move} /* windows drag by their title bar */
.window-title button{cursor:pointer}
body.dragging *{cursor:move!important}
body.dragging .screen{pointer-events:none}

/* Bag bar: right to left, backpack largest; open bags gold. */
.bag-bar{right:calc(var(--hud-side, 0px) + 20px);bottom:24px;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:3px}
.bag-button{position:relative;width:var(--bag-size, 32px);height:var(--bag-size, 32px);padding:0;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.bag-button.backpack{width:var(--backpack-size, 40px);height:var(--backpack-size, 40px)}
.bag-button.keyring{width:24px;height:24px}
.bag-button:hover::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.15)}
.bag-button.open{border-color:var(--ui-accent);box-shadow:inset 0 0 0 1px var(--ui-accent)}
.bag-free{position:absolute;right:2px;bottom:1px;font-size:11px;font-weight:700;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}

/* Bag windows sit above the bag bar; the area itself lets clicks through. */
.bag-windows{right:calc(var(--hud-side, 0px) + 20px);bottom:74px;pointer-events:none}
.bag-window,.combined-bags{pointer-events:auto}
.item-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--slot-size, 36px));gap:4px}

/* Items: plain squares, quality-colored border from uncommon up. */
.item-button{position:relative;width:var(--slot-size, 36px);height:var(--slot-size, 36px);border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .75);cursor:pointer}
.item-button.empty{background:rgb(var(--ui-bg-rgb) / .55);cursor:default}
.item-icon{position:absolute;inset:0;background:#222 center/116.3% no-repeat}
.item-button:not(.empty):hover::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.15)}
.item-button.held{outline:1px solid var(--ui-accent);outline-offset:1px}
.item-button.held .item-icon{opacity:.4}
.item-button.dim .item-icon{opacity:.2}
.item-count{position:absolute;right:2px;bottom:1px;font-size:11px;font-weight:700;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.item-tooltip{right:0;bottom:calc(100% + 6px);width:230px;white-space:normal;cursor:default}
.item-name{font-size:13px}
.q-poor{color:#9d9d9d}.q-common{color:#fff}.q-uncommon{color:#1eff00}.q-rare{color:#0070dd}.q-epic{color:#a335ee}
.item-text{white-space:pre-line;color:#fff}
.item-sell{color:#fff}

/* Money: amounts with coin dots. */
.money{display:inline-flex;gap:6px;font-size:12px;color:#fff;text-shadow:0 1px 1px #000}
.coin{display:inline-block;width:9px;height:9px;margin-left:2px;border-radius:50%;vertical-align:-1px;box-shadow:inset 0 -1px rgba(0,0,0,.35)}
.coin.gold{background:#ebc02e}.coin.silver{background:#c7c7cf}.coin.copper{background:#b8733d}

/* Combined bags: stripped grid, one row under it. */
.combined-bags{display:flex;flex-direction:column;gap:8px}
.combined-row{display:flex;align-items:center;gap:8px}
.row-spacer{flex:1}
.bag-controls{display:flex;align-items:center;gap:4px}
.bag-search{width:110px;height:20px;padding:0 6px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:#fff;font:12px system-ui;outline:0;user-select:text}
.bag-search:focus{border-color:var(--ui-accent)}
.bag-small{display:grid;place-items:center;width:20px;height:20px;padding:0;background:rgb(var(--ui-bg-rgb) / .85) center/116.3% no-repeat;border:1px solid var(--ui-border)}
.bag-small:hover{border-color:var(--ui-accent)}
.bag-small svg{width:12px;height:12px;fill:none;stroke:var(--ui-text-dim);stroke-width:1.6;stroke-linecap:round}
.bag-small.drag{cursor:move}
.bag-portrait .icon{width:14px;height:14px} /* our bag icon (art/minimap-icons/bag.svg) */
.bag-portrait.active{border-color:var(--ui-accent)}
.bag-portrait.active .icon{background:var(--ui-accent)}
.bag-menu-anchor{position:relative}
.bag-menu{position:absolute;right:0;bottom:calc(100% + 4px);z-index:600;display:flex;flex-direction:column;gap:2px;width:160px;padding:6px;background:rgb(var(--ui-bg-rgb) / .95);border:1px solid var(--ui-border);font-size:12px}
.bag-menu label,.bag-menu button{display:flex;align-items:center;gap:6px;padding:3px 4px;background:none;border:0;color:var(--ui-text);text-align:left;cursor:pointer}
.bag-menu label:hover,.bag-menu button:hover{color:var(--ui-accent);background:rgba(255,255,255,.05)}
.bag-menu input{accent-color:var(--ui-accent)}

/* Individual bags: themed windows stacked up from the bag bar, then a new column to the left. */
.bag-stack{max-height:calc(var(--screen-h, 100vh) - 140px);display:flex;flex-direction:column-reverse;flex-wrap:wrap-reverse;align-items:flex-end;align-content:flex-start;gap:8px}
.bag-window{background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);padding:0 6px 6px}
.bag-title{display:flex;align-items:center;gap:6px;height:26px;margin:0 -6px 6px;padding:0 4px 0 6px}
.bag-title .window-close{display:grid;place-items:center;width:18px;height:18px;padding:0;background:none;border:0} /* like the window title bars' × */
.bag-title-icon{width:18px;height:18px;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.bag-title-name{flex:1;min-width:0;color:var(--ui-accent);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-window-controls{display:flex;justify-content:flex-end;margin-bottom:6px}
.bag-window-controls .bag-search{flex:1;width:auto}
.bag-window-controls .bag-controls{flex:1}
.bag-window-money{display:flex;justify-content:flex-end;margin-top:6px}

/* Cast bar: the timer bar skin (backdrop, 1px border, gradient in the class color). */
.cast-bar{left:50%;bottom:calc(263px - var(--bar-shift, 0px));width:240px;height:14px;transform:translateX(-50%);font-size:10px;line-height:14px; /* swing bars' size, 3px above their fixed top (260px) */ color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
/* Band, lines and fill fade out over 30px at each end, like the swing bars; text on top, unfaded. */
.cast-track{position:absolute;inset:0;background:rgb(var(--ui-bg-rgb) / .7);border-top:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border);
	-webkit-mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
.cast-idle{opacity:0;pointer-events:none;transition:none}
.cast-fill{position:absolute;left:0;top:0;bottom:0;background:url(media/bar.png) 0 0/100% 100%,var(--accent);background-blend-mode:multiply}
/* The shared bevel (see .bevel) over the cast and swing fills, as its own layer so their
   colors, flashes and faded ends stay as they are. */
.cast-fill::after,.swing-fill::after{content:"";position:absolute;inset:0;--band-top:rgba(255,255,255,.15);--band-bottom:rgba(0,0,0,.2);
	background:linear-gradient(var(--band-top),var(--band-top)) 2px 0/calc(100% - 3px) 1px no-repeat,linear-gradient(var(--band-top),var(--band-top)) 1px 1px/calc(100% - 2px) 1px no-repeat,linear-gradient(var(--band-bottom),var(--band-bottom)) 2px 100%/calc(100% - 3px) 1px no-repeat,linear-gradient(var(--band-bottom),var(--band-bottom)) 1px calc(100% - 1px)/calc(100% - 2px) 1px no-repeat}
.cast-done .cast-fill{background:url(media/bar.png) 0 0/100% 100%,#fff;background-blend-mode:multiply}
.cast-failed .cast-fill{width:100%!important;background:url(media/bar.png) 0 0/100% 100%,#ba211c;background-blend-mode:multiply}
.cast-done,.cast-failed{opacity:0;transition:opacity .55s ease-in .15s}
.cast-name{position:absolute;left:16px;right:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cast-time{position:absolute;right:16px}

/* Swing timers: faded band like the section headers, off hand darker; only active bars, in the order they started. */
.swing-timers{left:50%;top:calc(100% - 260px + var(--bar-shift, 0px));width:240px;transform:translateX(-50%);display:flex;flex-direction:column;gap:3px} /* fixed top: the stack grows down */
.swing-timer{position:relative;height:14px;font-size:10px;line-height:14px;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
/* Band, lines and fill fade out over 30px at each end (the text sits on top, unfaded). */
.swing-track{position:absolute;inset:0;background:rgb(var(--ui-bg-rgb) / .7);border-top:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border);
	-webkit-mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
.swing-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(rgba(0,0,0,var(--shade,0)),rgba(0,0,0,var(--shade,0))),url(media/bar.png) 0 0/100% 100%,var(--steel);background-blend-mode:normal,multiply}
.swing-timer.hit .swing-fill{width:100%!important;background:url(media/bar.png) 0 0/100% 100%,#fff;background-blend-mode:multiply}
.swing-label{position:absolute;left:16px}
.swing-time{position:absolute;right:16px}

/* Target of target: beside the target's portrait, level with its bars' bottom. */
.tot{position:absolute;left:calc(50% + 360px);bottom:calc(300px - var(--bar-shift, 0px))}
/* Short frames (under 35px: the focus, target of target) use smaller text, the name closer to the bars. */
.unit.tight .unit-label{font-size:11px;height:13px;line-height:13px;margin-bottom:3px}
.unit.tight :is(.unit-value,.unit-cast){font-size:10px}

.focus-frame{left:calc(50% - 60px - var(--player-width, 290px));bottom:calc(390px - var(--bar-shift, 0px))} /* left edge in line with the player frame's */
.pet-frame{position:absolute;right:calc(50% + 60px + var(--player-width, 290px) + 10px);bottom:calc(300px - var(--bar-shift, 0px))} /* left of the player frame, level with its bottom, 10px apart */

/* Character window: main pane (440 x 480) and a detail pane (280), page tabs outside the right edge. */
.charwin{display:flex;gap:8px;font-size:12px}
.char-main{position:relative;width:440px;height:480px;border:1px solid var(--ui-border);background:radial-gradient(ellipse at 50% 40%,#23241f,#0f100e 75%)}
.char-detail{display:flex;flex-direction:column;width:280px;height:480px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .6);padding:10px 10px 12px}
.char-collapse{position:absolute;right:6px;top:6px;z-index:5;width:18px;height:18px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-accent);font-size:11px;line-height:14px}
.char-collapse:hover{border-color:var(--ui-accent)}
.char-pages{position:absolute;left:calc(100% + 3px);top:34px;display:flex;flex-direction:column;gap:6px}
.char-page-tab{width:40px;height:40px;padding:0;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat;filter:saturate(.6) brightness(.8)}
.char-page-tab:hover{filter:none}
.char-page-tab.active{filter:none;border-color:var(--ui-accent);box-shadow:inset 0 0 0 1px var(--ui-accent)}

/* Character page: model controls, paper doll (38px slots, 8px apart), weapons under the model. */
.model-controls{display:flex;justify-content:center;gap:4px;padding-top:6px}
.model-controls button{width:20px;height:20px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text-dim);font-size:12px;line-height:16px}
.model-controls button:hover{color:var(--ui-accent);border-color:var(--ui-accent)}
.paperdoll{display:flex;gap:10px;padding:10px 12px 0}
.gear-col{display:flex;flex-direction:column;gap:8px}
.char-model{position:relative;flex:1;perspective:400px}
.char-model .unit-silhouette{inset:14% 14% 64px;transition:transform .2s}
.gear-weapons{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:8px}
.gear-slot-wrap{position:relative;display:flex;align-items:center;gap:2px}
.gear-slot-wrap.toward-left{flex-direction:row-reverse}
.gear-slot-wrap.toward-up{flex-direction:column-reverse}
.gear-slot{position:relative;display:block;width:38px;height:38px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .75) center/116.3% no-repeat;cursor:pointer}
.gear-slot.empty{background-color:rgb(var(--ui-bg-rgb) / .45);cursor:default}
.gear-slot:hover::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.15)}
.gear-tooltip{width:220px;white-space:normal;z-index:600}
.toward-right .gear-tooltip{left:calc(100% + 6px);top:0}
.toward-left .gear-tooltip{right:calc(100% + 6px);top:0}
.toward-up .gear-tooltip{left:50%;bottom:calc(100% + 6px);transform:translateX(-50%)}
/* Equipment manager: a gold arrow beside each slot opens a row of other items. */
.gear-flyout-arrow{position:relative;width:10px;height:38px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.toward-up>.gear-flyout-arrow{width:38px;height:10px}
.gear-flyout-arrow::before{content:"";position:absolute;left:50%;top:50%;border:4px solid transparent;transform:translate(-25%,-50%);border-left-color:var(--ui-accent)}
.toward-left>.gear-flyout-arrow::before{transform:translate(-75%,-50%) rotate(180deg)}
.toward-up>.gear-flyout-arrow::before{transform:translate(-50%,-75%) rotate(-90deg)}
.gear-flyout-arrow:hover,.gear-flyout-arrow.active{border-color:var(--ui-accent)}
.gear-flyout{position:absolute;z-index:620;display:flex;gap:4px;padding:4px;background:rgb(var(--ui-bg-rgb) / .95);border:1px solid var(--ui-border)}
.toward-right>.gear-flyout{left:calc(100% + 2px);top:-5px}
.toward-left>.gear-flyout{right:calc(100% + 2px);top:-5px}
.toward-up>.gear-flyout{bottom:calc(100% + 2px);left:50%;transform:translateX(-50%)}
.gear-flyout-empty{padding:0 6px;line-height:38px;color:#8f8c84;white-space:nowrap}

/* Detail pane, Character page: sub-tabs, level line, stats in collapsible sections. */
.char-detail-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px}
.char-subtabs{display:flex;gap:6px}
.char-subtabs button{width:30px;height:30px;padding:0;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat;filter:saturate(.6) brightness(.8)}
.char-subtabs button.active,.char-subtabs button:hover{filter:none}
.char-subtabs button.active{border-color:var(--ui-accent);box-shadow:inset 0 0 0 1px var(--ui-accent)}
.char-level{color:var(--ui-accent);font-size:15px}
.class-mage{color:#3fc7eb}
.char-sets{display:flex;flex-direction:column;flex:1;min-height:0}
.char-set-list{flex:1;overflow-y:auto;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);padding:4px}
.char-set{display:flex;align-items:center;gap:8px;padding:4px;color:var(--ui-text);cursor:pointer}
.char-set:hover{background:rgba(255,255,255,.05)}
.char-set.selected{background:rgb(var(--ui-accent-rgb) / .13);outline:1px solid rgb(var(--ui-accent-rgb) / .35)}
.char-set-icon{width:24px;height:24px;border:1px solid var(--ui-border);background:center/116.3% no-repeat}
.char-button{height:26px;padding:0 10px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text);font-size:12px}
.char-button:hover:not(:disabled){color:var(--ui-accent);border-color:var(--ui-accent)}
.char-button:disabled{color:#5f5c55;cursor:default}
.new-set{margin-top:8px}
.new-set .plus{color:#6ecb5a;font-weight:700}
.char-set-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}

/* Lists (Reputation, Skills, Statistics, stats): sections under header strips; rows selectable. */
.char-list{height:100%;overflow-y:auto;padding:30px 10px 10px;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.char-list.detail-list{padding:0;flex:1;min-height:0}
.char-section{margin-bottom:6px}
.char-section-header{cursor:pointer}
.char-row{display:flex;align-items:center;gap:10px;padding:5px 6px 5px 8px;cursor:pointer}
.char-row:hover{background:rgba(255,255,255,.04)}
.char-row.selected{background:rgba(255,255,255,.08)}
.char-row-name{flex:1;min-width:0;color:var(--ui-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.char-bar{position:relative;width:176px;height:18px;background:rgb(var(--ui-surface-rgb) / .95);border:1px solid var(--ui-edge);overflow:hidden}
.char-bar-value{position:absolute;inset:0;z-index:1;text-align:center;font-size:11px;line-height:16px;color:var(--ui-text);text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.stat-row{display:flex;justify-content:space-between;padding:3px 6px 3px 8px;color:var(--ui-text)}
.stat-row:nth-child(even){background:rgba(255,255,255,.025)}
.stat-row span:last-child{color:#fff;font-variant-numeric:tabular-nums}
.stat-label{color:var(--ui-accent)}
.stat-cat{display:flex;align-items:center;gap:6px;padding:5px 6px;color:var(--ui-text);cursor:pointer}
.stat-cat-toggle{display:grid;place-items:center;width:12px;height:12px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .85);color:var(--ui-accent);font-size:10px;line-height:1}
.char-list .stat-cat~.stat-row{padding-left:26px}

/* Detail pane, list pages: title, bar, text, options. */
.detail-title{display:flex;flex-direction:column;align-items:center;color:var(--ui-text);font-size:14px}
.detail-sub{font-size:12px;color:var(--ui-text-dim)}
.detail-bar{width:auto;margin:10px 20px 8px}
.detail-text{margin:0 0 10px;color:var(--ui-text);line-height:1.45}
.detail-checks{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.detail-checks label{display:flex;align-items:center;gap:8px;color:var(--ui-accent);cursor:pointer}
.detail-checks label.disabled{color:#5f5c55;cursor:default}
.detail-checks input{accent-color:var(--ui-accent)}
.detail-strip{margin:4px 0 8px}
.detail-empty{margin:auto;color:#8f8c84;text-align:center}

/* PvP page: rank emblem with its number, points under it. */
.char-pvp{display:flex;flex-direction:column;align-items:center;padding:70px 30px 0}
.pvp-rank{align-self:stretch;justify-content:center;margin-bottom:24px}
.pvp-rank .header-title{flex:none}
.pvp-emblem{position:relative;width:110px;height:110px;border:1px solid var(--ui-border);box-shadow:0 0 0 1px rgb(var(--ui-accent-rgb) / .3),0 0 24px rgba(0,0,0,.6);background:#222 center/116.3% no-repeat}
.pvp-rank-number{position:absolute;left:50%;bottom:-14px;display:grid;place-items:center;width:28px;height:28px;margin-left:-14px;border:1px solid var(--ui-accent);background:var(--ui-panel);color:var(--ui-accent);font-size:13px}
.pvp-points{margin-top:26px;color:var(--ui-text)}
.pvp-reward{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pvp-reward .gear-slot{cursor:default}

/* Social window (Contacts / Raid): 370 wide, tabs hanging under the window. */
.social{position:relative;display:flex;flex-direction:column;width:370px;height:470px;font-size:12px}
.social-top{display:flex;gap:6px;margin-bottom:8px}
.social-status-anchor{position:relative}
.social-status{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.social-status:hover{border-color:var(--ui-accent)}
.social-caret{border:4px solid transparent;border-top-color:var(--ui-accent);margin-top:4px}
.social-menu{position:absolute;left:0;top:calc(100% + 2px);z-index:20;display:flex;flex-direction:column;width:120px;padding:4px;background:rgb(var(--ui-bg-rgb) / .97);border:1px solid var(--ui-border)}
.social-menu button{display:flex;align-items:center;gap:8px;padding:4px 6px;background:none;border:0;color:var(--ui-text);text-align:left}
.social-menu button:hover{color:var(--ui-accent);background:rgba(255,255,255,.05)}
.status-dot{flex:none;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px #000}
.social-tag{flex:1;display:flex;align-items:center;justify-content:center;height:26px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:#82c5ff;font-size:13px}
.social-tag-number{color:#5f7d97}
.social-subtabs{display:flex;gap:2px}
.social-subtabs button,.social-pages button{height:24px;padding:0 14px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text-dim);font-size:12px}
.social-subtabs button{border-bottom:0}
.social-subtabs button:hover,.social-pages button:hover{color:#fff}
.social-subtabs button.active{color:var(--ui-accent);box-shadow:inset 0 -1px var(--ui-accent)}
.social-pages button.active{color:var(--ui-accent);box-shadow:inset 0 1px var(--ui-accent)} /* gold line along the window's edge */
.social-list{flex:1;overflow-y:auto;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);padding:3px;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.social-row{position:relative;display:flex;align-items:center;gap:8px;padding:4px 6px;cursor:pointer}
.social-row:hover{background:rgba(255,255,255,.04)}
.social-row.selected{background:rgb(var(--ui-accent-rgb) / .12);box-shadow:inset 0 0 0 1px rgb(var(--ui-accent-rgb) / .35)}
.social-row-text{flex:1;min-width:0;display:flex;flex-direction:column}
.social-name{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.social-name.bnet{color:#82c5ff}
.social-info{font-size:11px;color:#8f8c84}
.social-row.offline .social-name{color:#8f8c84}
.social-game{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--ui-text-dim);color:var(--ui-text-dim);font-size:10px;font-weight:700}
.social-invite{width:18px;height:18px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-accent);font-size:13px;line-height:14px;opacity:0}
.social-row:hover .social-invite{opacity:1}
.social-invite:hover{border-color:var(--ui-accent)}
.social-add{display:flex;gap:6px;margin-top:6px}
.social-add input{flex:1;height:26px;padding:0 8px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:#fff;font:12px system-ui;outline:0;user-select:text}
.social-add input:focus{border-color:var(--ui-accent)}
.social-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.social-actions.single{grid-template-columns:1fr;justify-items:end}
.social-pages{position:absolute;left:0;top:calc(100% + 12px);display:flex;gap:2px} /* 3px under the window (8px padding + 1px border + 3px) */
.social-pages button{border-top:0}
/* Raid tab: options row, 8 group boxes in two columns. */
.raid-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.raid-all{display:flex;align-items:center;gap:6px;color:var(--ui-text);cursor:pointer}
.raid-all input{accent-color:var(--ui-accent)}
.crown{width:14px;height:11px;fill:none;stroke:var(--ui-accent);stroke-width:1.4;stroke-linejoin:round}
.raid-groups{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.raid-box{border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);padding:3px}
.raid-box-title{padding:0 4px 2px;color:var(--ui-accent);font-size:11px;line-height:14px}
.raid-slot{display:flex;justify-content:space-between;height:14px;padding:0 4px;line-height:14px;font-size:11px}
.raid-slot:nth-child(odd){background:rgba(255,255,255,.025)}
.raid-slot-class{color:#8f8c84}

/* Spellbook: one page (3 columns x 6 rows), or two side by side maximized. */
.spellbook{display:flex;flex-direction:column;font-size:12px}
.spellbook-max{position:absolute;right:26px;top:4px;width:18px;height:18px;padding:0;background:none;border:0;color:#aaa;font-size:14px;line-height:18px}
.spellbook-max:hover{color:var(--ui-accent)}
.spellbook-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.spellbook-tabs{display:flex;gap:6px}
.spellbook-tabs button{width:32px;height:32px;padding:0;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat;filter:saturate(.6) brightness(.8)}
.spellbook-tabs button:hover{filter:none}
.spellbook-tabs button.active{filter:none;border-color:var(--ui-accent);box-shadow:inset 0 0 0 1px var(--ui-accent)}
.spellbook-search{position:relative;display:flex;gap:4px}
.spellbook-search>input{width:230px;height:24px;padding:0 8px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:#fff;font:12px system-ui;outline:0;user-select:text}
.spellbook-search>input:focus{border-color:var(--ui-accent)}
.spellbook-filter{position:relative;width:24px;height:24px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.spellbook-filter::before{content:"";position:absolute;left:50%;top:50%;border:5px solid transparent;border-top-color:var(--ui-accent);transform:translate(-50%,-25%)}
.spellbook-filter:hover,.spellbook-filter.active{border-color:var(--ui-accent)}
.spellbook-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;gap:6px;padding:8px 10px;background:rgb(var(--ui-bg-rgb) / .97);border:1px solid var(--ui-border);white-space:nowrap}
.spellbook-menu label{display:flex;align-items:center;gap:8px;color:var(--ui-text);cursor:pointer}
.spellbook-menu label:hover{color:var(--ui-accent)}
.spellbook-menu input{accent-color:var(--ui-accent)}
.spellbook-pages{display:flex;gap:24px}
.spellbook-page{width:600px;height:440px;padding:10px 12px;border:1px solid var(--ui-border);background:radial-gradient(ellipse at 50% 30%,#23241f,#0f100e 80%)}
.spellbook-heading{height:32px;margin-bottom:12px}
.spellbook-heading .header-title{font-size:18px}
.spell-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:58px;column-gap:10px}
.spell{position:relative;display:flex;align-items:center;gap:10px;padding:0 4px;cursor:pointer}
.spell:hover{background:rgba(255,255,255,.04)}
.spell-icon{flex:none;width:38px;height:38px;border:1px solid var(--ui-accent);background:#222 center/116.3% no-repeat} /* active spells: accent border (draggable to the bars) */
.spell-icon.passive{border-color:var(--ui-border);border-radius:50%;box-shadow:0 0 0 1px #5f5c55} /* passives: grey ring, not draggable */
.spell-text{display:flex;flex-direction:column;min-width:0}
.spell-name{color:var(--ui-text);font-size:14px;line-height:17px}
.spell-sub{color:#8f8c84;font-size:11px}
.spell-tooltip{left:4px;top:calc(100% - 4px);width:260px;white-space:normal;z-index:40}
.spell-empty{grid-column:1/-1;padding-top:40px;text-align:center;color:#8f8c84}
.spellbook-footer{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:8px;color:var(--ui-text-dim)}
.page-arrow{position:relative;width:24px;height:24px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.page-arrow::before{content:"";position:absolute;left:50%;top:50%;border:5px solid transparent}
.page-arrow.prev::before{border-right-color:var(--ui-accent);transform:translate(-75%,-50%)}
.page-arrow.next::before{border-left-color:var(--ui-accent);transform:translate(-25%,-50%)}
.page-arrow:hover:not(:disabled){border-color:var(--ui-accent)}
.page-arrow:disabled{opacity:.35;cursor:default}

/* Map & Quest Log: map (720 x 480, or 1000 x 667 maximized) with a nav bar, quest log (320) beside it. */
.mapwin{display:flex;gap:8px;font-size:12px}
.map-max{position:absolute;right:26px;top:4px;width:18px;height:18px;padding:0;background:none;border:0;color:#aaa;font-size:14px;line-height:18px}
.map-max:hover{color:var(--ui-accent)}
.map-side{display:flex;flex-direction:column;gap:6px}
.map-nav{display:flex;align-items:center;gap:2px;height:28px}
.crumb-anchor{position:relative;display:flex}
.crumb{height:26px;padding:0 12px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text-dim);font-size:12px}
.crumb:hover{color:#fff}
.crumb.current{color:var(--ui-accent);box-shadow:inset 0 -1px var(--ui-accent)}
.crumb-drop{position:relative;width:18px;height:26px;margin-left:-1px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.crumb-drop::before,.map-filter::before{content:"";position:absolute;left:50%;top:50%;border:4px solid transparent;border-top-color:var(--ui-accent);transform:translate(-50%,-25%)}
.crumb-drop:hover,.map-filter:hover,.map-filter.active{border-color:var(--ui-accent)}
.nav-spacer{flex:1}
.map-filter{position:relative;width:26px;height:26px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.map-menu{position:absolute;left:0;top:calc(100% + 3px);z-index:50;display:flex;flex-direction:column;min-width:160px;padding:4px;background:rgb(var(--ui-bg-rgb) / .97);border:1px solid var(--ui-border)}
.map-menu.filters{left:auto;right:0;gap:5px;padding:8px 10px;white-space:nowrap}
.map-menu button{padding:4px 8px;background:none;border:0;color:var(--ui-text);text-align:left}
.map-menu button:hover,.map-menu button.current{color:var(--ui-accent);background:rgba(255,255,255,.05)}
.map-menu-title{color:var(--ui-accent)}
.map-menu label{display:flex;align-items:center;gap:8px;color:var(--ui-text);cursor:pointer}
.map-menu label:hover{color:var(--ui-accent)}
.map-menu input{accent-color:var(--ui-accent)}
.map-view{position:relative;width:720px;height:480px;border:1px solid var(--ui-border);overflow:hidden;cursor:crosshair}
.mapwin.maximized .map-view{width:1000px;height:667px}
.map-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-art .map-zone{cursor:pointer}
.map-art .map-zone:hover{filter:brightness(1.3)}
/* Selected quest's area: a soft gold wash. */
.map-area{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgb(var(--ui-accent-rgb) / .28),rgb(var(--ui-accent-rgb) / .1) 60%,transparent 72%);box-shadow:0 0 0 1px rgb(var(--ui-accent-rgb) / .35);pointer-events:none}
.map-poi-btn{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;padding:0;background:none;border:0;z-index:2}
.map-poi-btn:hover{z-index:4}
.map-poi-btn.super .qpoi{animation:qpoi-pulse 2.2s ease-in-out infinite} /* focused: slow glow on the map */
@keyframes qpoi-pulse{0%,100%{filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 0 3px rgb(var(--ui-accent-rgb) / .5))}50%{filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 0 9px rgb(var(--ui-accent-rgb) / .95))}}
.map-tip{left:calc(100% + 6px);top:-4px;width:220px;white-space:normal;text-align:left;font-size:12px;line-height:1.4}
.map-instance{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;padding:0;transform:rotate(45deg);background:var(--ui-panel);border:1px solid var(--ui-text-dim);z-index:1}
.map-instance::after{content:"";position:absolute;inset:4px;background:var(--ui-text-dim)}
.map-player{position:absolute;width:0;height:0;border:solid transparent;border-width:0 7px 18px;border-bottom-color:#f4f0e0;filter:drop-shadow(0 0 2px #000);z-index:3;pointer-events:none}
.map-coords{position:absolute;left:8px;bottom:6px;display:flex;gap:14px;color:var(--ui-text);font-size:11px;text-shadow:0 1px 2px #000;pointer-events:none}
.map-log-toggle{position:absolute;right:6px;bottom:6px;height:24px;padding:0 6px;background:rgb(var(--ui-bg-rgb) / .9);border:1px solid var(--ui-border);color:var(--ui-accent);font-size:12px;cursor:pointer}
.map-log-toggle:hover{border-color:var(--ui-accent)}
/* Quest log panel: list or a quest's details. */
.qlog{display:flex;flex-direction:column;width:320px;height:514px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .6);padding:8px}
.mapwin.maximized .qlog{height:701px}
.qlog-top{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.qlog-top input{flex:1;min-width:0;height:24px;padding:0 8px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:#fff;font:12px system-ui;outline:0;user-select:text}
.qlog-top input:focus{border-color:var(--ui-accent)}
.qlog-count{color:var(--ui-accent);white-space:nowrap}
.qlog-count span{color:#fff}
.qlog-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.qlog-quest{display:flex;gap:8px;padding:4px 2px 5px 4px}
.qlog-quest:hover{background:rgba(255,255,255,.03)}
.qlog-quest .poi{position:static;flex:none}
.qlog-quest-text{flex:1;min-width:0}
.quest-title.plain{color:var(--ui-text)}
.qlog-track{position:relative;flex:none;width:16px;height:16px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.qlog-track.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--ui-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.qlog-track:hover{border-color:var(--ui-accent)}
.qlog-detail-top{margin-bottom:8px}
.qlog-detail{flex:1;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.qlog-detail-title{margin-bottom:6px;font-size:16px}
.qlog-detail .objective{padding-left:0;margin-bottom:2px}
.qlog-rewards{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.qlog-reward{display:flex;align-items:center;gap:6px;padding:3px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.qlog-reward .gear-slot{flex:none;width:30px;height:30px;cursor:default}
.qlog-also{display:flex;align-items:center;gap:14px;color:var(--ui-text)}
.qlog-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}

/* Quest markers (QuestPoi): 20px, turn-ins 22px; dark outline and shadow on everything.
   Colours: dark disc #111, parchment ring, gold arc/glyphs; focused = gold disc, dark marks;
   repeatable = blue; failed = red x. Group quests use a diamond. */
.qpoi{display:block;width:20px;height:20px;margin:1px;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));transition:filter .15s}
.qpoi.is-turnin{width:22px;height:22px;margin:0}
.qpoi-disc{fill:#111;stroke:#000;stroke-width:1.2}
.qpoi-track{fill:none;stroke:rgba(201,190,150,.35);stroke-width:1.6}
.qpoi-arc{fill:none;stroke:var(--ui-accent);stroke-width:1.6;stroke-linecap:round}
.qpoi-glyph{fill:var(--ui-text-dim);font:700 12px system-ui;text-anchor:middle}
.qpoi.is-turnin .qpoi-disc{fill:var(--ui-accent)}
.qpoi.is-turnin .qpoi-glyph{fill:#111}
.qpoi.is-available .qpoi-glyph{fill:var(--ui-accent)}
.qpoi.repeatable.is-available .qpoi-glyph{fill:#4fa8ea}
.qpoi.repeatable.is-turnin .qpoi-disc{fill:#4fa8ea}
.qpoi-x{fill:none;stroke:#d33c33;stroke-width:2;stroke-linecap:round}
.qpoi.focused .qpoi-disc{fill:var(--ui-accent)}
.qpoi.focused .qpoi-glyph{fill:#111}
.qpoi.focused .qpoi-track{stroke:rgba(0,0,0,.25)}
.qpoi.focused .qpoi-arc{stroke:#111}
.qpoi.focused .qpoi-x{stroke:#111}
.qpoi.hover,.qpoi:hover{filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 0 5px rgb(var(--ui-accent-rgb) / .85))}
.qpoi.hover .qpoi-disc,.qpoi:hover .qpoi-disc{stroke:var(--ui-accent)}

/* Skimt UI settings (/skimt): 320 wide like the addon's; sections under header strips. */
.skimt-config{display:flex;gap:10px;width:540px;height:520px;font-size:12px}
/* Menu: one row per section; the chosen one gold with a gold edge. */
.cfg-menu{display:flex;flex-direction:column;gap:2px;width:150px;padding:4px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.cfg-menu button{min-height:26px;padding:5px 10px;line-height:1.3;background:none;border:0;color:var(--ui-text);text-align:left;font-size:12px}
.cfg-menu button:hover{color:#fff;background:rgba(255,255,255,.04)}
.cfg-menu button.active{color:var(--ui-accent);background:rgb(var(--ui-accent-rgb) / .08);box-shadow:inset 2px 0 var(--ui-accent)}
.cfg-page{flex:1;min-width:0;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
/* Choice rows: joined flat buttons, the chosen one gold. */
.cfg-choice{margin:6px 0 8px}
.cfg-choice-row{display:flex}
.cfg-choice-row button{flex:1;height:24px;padding:0 6px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);margin-left:-1px;color:var(--ui-text-dim);font-size:11px}
.cfg-choice-row button:first-child{margin-left:0}
.cfg-choice-row button:hover:not(:disabled){color:#fff}
.cfg-choice-row button.active{position:relative;color:var(--ui-accent);border-color:var(--ui-accent)}
.cfg-choice.disabled,.cfg-check.disabled,.cfg-textpart.disabled,.cfg-section.disabled{opacity:.4}
.cfg-section:not(:first-child){margin-top:14px}
/* A text part: its on/off box and, beside it, where it goes. */
.cfg-textpart{display:flex;align-items:center;gap:10px;margin:4px 0}
.cfg-textpart .cfg-check{width:80px;margin:0}
.cfg-textpart .cfg-choice-row{flex:1}
.cfg-page-buttons{margin-top:14px}
.cfg-choice-row button:disabled{cursor:default}
.cfg-textpart .cfg-choice-row button:disabled{opacity:.4} /* a part that's off: its places dim */
.cfg-section{margin:0 0 8px}
.cfg-buttons{display:flex;gap:6px;margin:4px 0}
.cfg-buttons .char-button.active{color:var(--ui-accent);border-color:var(--ui-accent)}
.cfg-note{margin:2px 0 4px;color:#8f8c84}
.cfg-check{display:flex;align-items:center;gap:8px;margin:4px 0;color:var(--ui-text);cursor:pointer}
.cfg-check input{accent-color:var(--ui-accent)}
.cfg-slider{margin:6px 0 8px}
.cfg-slider-label{display:flex;justify-content:space-between;margin-bottom:4px;color:var(--ui-text)}
.cfg-value{color:var(--ui-accent);font-variant-numeric:tabular-nums}
.cfg-slider input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;margin:0;border:1px solid var(--ui-border);background:linear-gradient(90deg,var(--ui-accent) var(--fill),rgb(var(--ui-surface-rgb) / .95) var(--fill));cursor:pointer}
.cfg-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:14px;background:var(--ui-panel);border:1px solid var(--ui-accent)}
.cfg-slider input::-moz-range-thumb{width:8px;height:12px;background:var(--ui-panel);border:1px solid var(--ui-accent);border-radius:0}
/* Unlocked: everything movable is outlined, and drags without Shift. */
body.unlocked :is(.hud,.unit){outline:1px dashed rgb(var(--ui-accent-rgb) / .55);outline-offset:2px;cursor:move}

/* /skimt dropdown and theme swatches. */
.cfg-dropdown{position:relative;margin:6px 0 8px}
.cfg-dropdown-button{display:flex;align-items:center;justify-content:space-between;width:100%;height:26px;padding:0 10px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text);font-size:12px;text-align:left}
.cfg-dropdown-button:hover,.cfg-dropdown-button.open{border-color:var(--ui-accent)}
.cfg-caret{border:4px solid transparent;border-top-color:var(--ui-accent);margin-top:4px}
.cfg-dropdown-menu{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:40;display:flex;flex-direction:column;padding:3px;background:var(--ui-panel);box-shadow:0 4px 12px #000a;border:1px solid var(--ui-border)}
.cfg-dropdown-menu button{height:24px;padding:0 8px;background:none;border:0;color:var(--ui-text);text-align:left;font-size:12px}
.cfg-dropdown-menu button:hover{background:rgba(255,255,255,.05)}
.cfg-dropdown-menu button.active{color:var(--ui-accent)}
.cfg-swatches{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:4px 0 6px}
.cfg-swatch{display:flex;align-items:center;gap:8px;color:var(--ui-text)}
.cfg-swatch-color{flex:none;width:16px;height:16px;border:1px solid #3a3a36}
.cfg-swatch-hex{margin-left:auto;color:var(--ui-text-dim);font-variant-numeric:tabular-nums;font-size:11px}
.cfg-ramp-label{margin-top:8px}
.cfg-ramp{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:6px}
.cfg-ramp-step{display:flex;align-items:center;gap:6px;font-size:11px}

/* Your class's buffs on the target, under its bars from the portrait side; yours larger. Out of
   the frame's layout: the target stays as tall as the player frame. */
/* Target buffs and debuffs, on the side each is set to (/skimt > Target); they hang outside the
   frame without adding size, so player and target line up. Clear of the gold self-target border
   (2px out). Bottom and top rows start at the portrait's side on a mirrored frame; left and right
   rows grow outward. Yours larger; debuff borders in their dispel color; seconds left on your own debuffs. */
.unit-auras{position:absolute;display:flex;gap:3px;pointer-events:none}
.unit-auras>*{pointer-events:auto}
.unit-auras.at-bottom{left:0;right:0;top:calc(100% + 6px);flex-direction:column}
.unit-auras.at-top{left:0;right:0;bottom:calc(100% + 2px);flex-direction:column-reverse}
.unit-auras.at-left{right:calc(100% + 6px);top:18px;flex-direction:column;align-items:flex-end}
.unit-auras.at-right{left:calc(100% + 6px);top:18px;flex-direction:column;align-items:flex-start}
.unit-aura-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:3px}
.unit.mirrored :is(.at-bottom,.at-top) .unit-aura-row,.at-left .unit-aura-row{flex-direction:row-reverse}
.unit-aura{position:relative;width:18px;height:18px;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.unit-aura.mine{width:24px;height:24px}
.unit-aura-stacks{position:absolute;right:1px;bottom:0;font-size:9px;font-weight:700;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.unit-aura-time{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;line-height:1;text-align:center;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}


/* Threat meter: a thin strip on the cell's left or right edge, filling from the bottom.
   Green, yellow (60%+), orange (80%+), red with aggro, blinking like the mail icon but faster -
   except tanks, whose aggro is steady red. */
.member-threat{position:absolute;top:0;bottom:0;z-index:2;width:4px;background:rgb(var(--ui-bg-rgb) / .8);pointer-events:auto}
.compact .member-threat{width:3px}
.member-threat.at-right{right:0;border-left:1px solid var(--ui-border)}
.member-threat.at-left{left:0;border-right:1px solid var(--ui-border)}
.member-threat-fill{position:absolute;left:0;right:0;bottom:0;background:#41ad2e;transition:height .3s,background .3s}
.threat-rising .member-threat-fill{background:#e8cf23}
.threat-high .member-threat-fill{background:#e8862e}
.threat-aggro .member-threat-fill{background:#d33c33;animation:threat-blink 1.2s ease-in-out infinite alternate}
.member-threat.steady .member-threat-fill{animation:none} /* a tank holding aggro is doing its job */
@keyframes threat-blink{from{opacity:1}to{opacity:.4}}

/* Group Finder (I): roles, category buttons, activity checklist; browse and player lists. */
.gf{position:relative;display:flex;flex-direction:column;width:400px;height:500px;font-size:12px}
.gf-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}
.gf-role{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 6px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text-dim);font-size:11px}
.gf-role svg{width:24px;height:24px;fill:#5f5c55;filter:drop-shadow(0 0 1px #000)}
.gf-role.leader svg{fill:none;stroke:#5f5c55;stroke-width:1.2;stroke-linejoin:round}
.gf-role:hover:not(:disabled){color:#fff;border-color:var(--ui-accent)}
.gf-role.on{color:var(--ui-accent);border-color:var(--ui-accent);box-shadow:inset 0 0 0 1px rgb(var(--ui-accent-rgb) / .5)}
.gf-role.on.tank svg{fill:#6fa8dc}.gf-role.on.healer svg{fill:#6ecb5a}.gf-role.on.dps svg{fill:#d9695b}
.gf-role.on.leader svg{stroke:var(--ui-accent);fill:rgb(var(--ui-accent-rgb) / .35)}
.gf-role:disabled{opacity:.35;cursor:default}
.gf-listed{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:5px 8px;border:1px solid var(--ui-border);background:rgb(var(--ui-accent-rgb) / .08);color:var(--ui-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-listed-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#4fd04f;box-shadow:0 0 4px #4fd04f}
.gf-categories{flex:1;display:flex;flex-direction:column;gap:6px}
.gf-category{display:flex;align-items:center;gap:12px;height:64px;padding:0 12px;background:linear-gradient(90deg,rgb(var(--ui-surface-rgb) / .9),rgb(var(--ui-bg-rgb) / .85));border:1px solid var(--ui-border);text-align:left}
.gf-category:hover{border-color:var(--ui-accent)}
.gf-category:hover .gf-category-name{color:#fff}
.gf-category-icon{flex:none;width:40px;height:40px;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.gf-category-name{flex:1;color:var(--ui-accent);font-size:15px}
.gf-category-count{color:var(--ui-text-dim);font-size:11px}
.gf-heading{margin-bottom:4px}
.gf-activities{flex:1;overflow-y:auto;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);padding:3px;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.gf-activity{display:flex;align-items:center;gap:8px;padding:4px 6px;color:var(--ui-text);cursor:pointer}
.gf-activity:hover{background:rgba(255,255,255,.04)}
.gf-activity.on{background:rgb(var(--ui-accent-rgb) / .1)}
.gf-activity.low .gf-activity-name{color:#8f8c84}
.gf-activity input{accent-color:var(--ui-accent);margin:0}
.gf-activity-name{flex:1}
.gf-activity-range{font-variant-numeric:tabular-nums}
.gf-custom{flex:1}
.gf-input{width:100%;height:26px;padding:0 8px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:#fff;font:12px system-ui;outline:0;user-select:text}
.gf-input:focus{border-color:var(--ui-accent)}
.gf-comment{height:54px;margin-top:6px;padding:6px 8px;resize:none}
.gf-actions{display:flex;justify-content:space-between;gap:6px;margin-top:6px}
.gf-actions .char-button{min-width:110px}
.gf-actions .char-button:nth-child(2):not(:last-child){margin-left:auto}
.gf-toolbar{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.gf-dropdown{flex:1;margin:0}
.gf-dropdown.wide{flex:1.4}
.gf-dropdown .cfg-slider-label{display:none}
.gf-icon-button{flex:none;width:26px;height:26px;padding:0;display:grid;place-items:center;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.gf-icon-button:hover{border-color:var(--ui-accent)}
.gf-icon-button svg{width:14px;height:14px;fill:none;stroke:var(--ui-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gf-refresh.spinning svg{animation:gf-spin .6s linear}
@keyframes gf-spin{to{transform:rotate(360deg)}}
.gf-list{flex:1;overflow-y:auto;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);padding:3px;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent;transition:opacity .2s}
.gf-list.dim{opacity:.4}
.gf-row{padding:5px 6px;cursor:pointer}
.gf-row+.gf-row{border-top:1px solid rgba(255,255,255,.04)}
.gf-row:hover{background:rgba(255,255,255,.04)}
.gf-row.selected{background:rgb(var(--ui-accent-rgb) / .12);box-shadow:inset 0 0 0 1px rgb(var(--ui-accent-rgb) / .35)}
.gf-row.own{box-shadow:inset 2px 0 var(--ui-accent)}
.gf-row-top{display:flex;align-items:center;gap:6px}
.gf-level{flex:none;width:18px;text-align:right;font-variant-numeric:tabular-nums}
.gf-name{font-size:13px}
.gf-members{margin-left:auto;display:flex;align-items:center;gap:2px}
.gf-member-count{margin-left:4px;color:var(--ui-text-dim);font-size:11px;font-variant-numeric:tabular-nums}
.gf-row-activities{margin:2px 0 0 24px;color:var(--ui-accent)}
.gf-row-bottom{display:flex;gap:8px;margin-left:24px}
.gf-row-comment{flex:1;color:#8f8c84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-row-age{color:#6b6860;font-size:11px}
.gf-empty{padding:40px 30px;color:var(--ui-text-dim);text-align:center;line-height:1.5}
.gf-search{flex:1}
.gf-filter-anchor{position:relative}
.gf-filter{display:flex;align-items:center;gap:8px}
.gf-filter.active{color:var(--ui-accent);border-color:var(--ui-accent)}
.gf-filter-menu{position:absolute;right:0;top:calc(100% + 2px);z-index:30;width:190px;padding:4px 8px;background:var(--ui-panel);border:1px solid var(--ui-border);box-shadow:0 4px 12px #000a}
.gf-filter-menu .cfg-check input{accent-color:var(--ui-accent)}
.gf-player{display:flex;align-items:center;gap:6px}
.gf-player-text{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px}
.gf-player-guild{color:#8f8c84;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gf-player-zone{color:var(--ui-text-dim);font-size:11px}
.gf-pages{left:calc(100% + 12px);top:0} /* 3px outside the window: 8px padding + 1px border + 3px */

/* Guild & Communities (J): community list left; chat with members, roster, guild info right. */
.guild{position:relative;display:flex;gap:8px;width:780px;height:500px;font-size:12px}
.guild-sidebar{flex:none;display:flex;flex-direction:column;gap:3px;width:200px;padding:3px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.guild-community{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 6px;background:none;border:1px solid transparent;color:var(--ui-text);text-align:left}
.guild-community:hover{background:rgba(255,255,255,.04)}
.guild-community.active{background:rgb(var(--ui-accent-rgb) / .12);border-color:rgb(var(--ui-accent-rgb) / .35);box-shadow:inset 2px 0 var(--ui-accent)}
.guild-community-icon{flex:none;width:30px;height:30px;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.guild-community-name{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;color:#fff}
.guild-community.active .guild-community-name{color:var(--ui-accent)}
.guild-community-kind{font-size:11px;color:var(--ui-text-dim)}
.guild-unread{flex:none;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ui-accent);color:#111;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.guild-join{margin-top:auto}
.guild-join-plus{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ui-border);color:var(--ui-accent);font-size:20px;line-height:1}
.guild-join .guild-community-name{font-size:12px;color:var(--ui-text)}
.guild-main{flex:1;min-width:0;display:flex;flex-direction:column}
.guild-heading{margin-bottom:6px}
.guild-heading .header-title{flex:1}
.guild-online{color:var(--ui-text-dim);font-size:11px}
.guild-chat{flex:1;min-height:0;display:flex;gap:6px}
.guild-chat-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.guild-motd{padding:5px 8px;border:1px solid var(--ui-border);background:rgb(64 255 64 / .05);color:#40ff40;line-height:1.4}
.guild-motd-label{color:#8fd88f}
.guild-log{flex:1;overflow-y:auto;padding:4px 6px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.guild-message{display:flex;gap:6px;padding:2px 0;line-height:1.4}
.guild-time{flex:none;width:52px;color:#6b6860;font-size:11px;font-variant-numeric:tabular-nums;padding-top:1px}
.guild-author{flex:none;cursor:pointer}
.guild-author:hover{text-decoration:underline}
.guild-text{color:#40ff40}
.guild-members{flex:none;width:130px;overflow-y:auto;padding:3px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.guild-member{display:flex;align-items:center;gap:6px;padding:3px 5px;cursor:default}
.guild-member:hover{background:rgba(255,255,255,.04)}
.guild-member-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guild-member .status-dot{width:6px;height:6px}
.guild-rank-mark{color:var(--ui-accent);font-size:10px}
.guild-roster{flex:1;min-height:0;display:flex;flex-direction:column}
.guild-roster-table{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.guild-rows{flex:1;overflow-y:auto;padding:3px;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.guild-row{display:grid;grid-template-columns:44px 110px 150px 100px 1fr;align-items:center;gap:6px;padding:3px 6px}
.guild-rows .guild-row:hover{background:rgba(255,255,255,.04)}
.guild-row.offline>*{color:#6b6860 !important}
.guild-row-head{padding:0 9px;border-bottom:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .6)}
.guild-row-head button{height:24px;padding:0;background:none;border:0;color:var(--ui-text-dim);font-size:11px;text-align:left}
.guild-row-head button:hover,.guild-row-head button.sorted{color:var(--ui-accent)}
.guild-sort{margin-left:4px}
.col-lvl{text-align:right;padding-right:10px;font-variant-numeric:tabular-nums}
.guild-row-head .col-lvl{text-align:right}
.col-name{display:flex;align-items:center;gap:6px}
.col-name .status-dot{width:6px;height:6px}
.col-zone,.col-rank{color:var(--ui-text)}
.col-note{color:#8f8c84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guild-roster-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.guild-roster-foot .cfg-check{margin:0}
.guild-info{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.guild-info-text{margin:6px 8px 12px;color:var(--ui-text);line-height:1.5;white-space:pre-line}
.guild-info-text.motd{color:#40ff40}
.guild-news{margin:4px 8px}
.guild-news-row{display:flex;gap:10px;padding:3px 0;color:var(--ui-text)}
.guild-news-time{flex:none;width:80px;color:#6b6860}
.guild-joinpage{padding:20px 30px;color:var(--ui-text);line-height:1.5;text-align:center}
.guild-join-title{margin-bottom:8px;color:var(--ui-accent);font-size:24px}
.guild-joinpage p{margin:0 0 10px}
.guild-join-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;text-align:left}
.guild-join-card{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.guild-join-card .char-button{align-self:flex-end;min-width:90px}
.guild-join-error{min-height:16px;color:#d9463c;font-size:11px}

/* Professions (K): overview of primary/secondary professions; recipe list and detail per profession. */
.prof{position:relative;display:flex;flex-direction:column;width:740px;height:520px;font-size:12px}
.prof-primary{margin-bottom:8px}
.prof-primary-body{display:flex;align-items:center;gap:16px;padding:8px 8px 4px}
.prof-entries{flex:none;display:flex;flex-direction:column;gap:6px;width:200px}
.prof-entry{position:relative;display:flex;align-items:center;gap:8px;padding:0;background:none;border:0;text-align:left}
.prof-icon{flex:none;width:36px;height:36px;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.prof-entry:hover .prof-icon,.prof-spell.on .prof-icon{border-color:var(--ui-accent);box-shadow:inset 0 0 0 1px var(--ui-accent)}
.prof-entry-text{display:flex;flex-direction:column}
.prof-name{color:var(--ui-accent);font-size:13px}
.prof-entry:hover .prof-name{color:#fff}
.prof-rank{color:var(--ui-text-dim);font-size:11px}
.prof-tooltip{left:calc(100% + 8px);top:0;width:260px;white-space:normal;background:rgb(var(--ui-bg-rgb))}
.prof-skill{flex:1;display:flex;align-items:center;gap:6px}
.prof-bar{position:relative;flex:1;height:18px;background:rgb(var(--ui-surface-rgb) / .95);border:1px solid var(--ui-edge);overflow:hidden}
.prof-bar-fill{--tint:var(--ui-accent);position:absolute;inset:0 auto 0 0}
.prof-bar span{position:relative;display:block;text-align:center;line-height:16px;color:#fff;font-size:11px;text-shadow:0 0 2px #000,0 0 2px #000}
.prof-unlearn{flex:none;width:18px;height:18px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:#d9463c;font-size:14px;line-height:14px}
.prof-unlearn:hover{border-color:#d9463c}
.prof-hint{margin:8px;color:var(--ui-text-dim);line-height:1.5}
.prof-secondaries{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.prof-card{display:flex;flex-direction:column;gap:10px;padding-bottom:8px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.prof-card .prof-bar{flex:none;margin:0 10px}
.prof-card-entry{margin:auto 10px 0}
.prof-card .prof-hint{margin:0 10px}
.prof-confirm-shade{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(0,0,0,.5)}
.prof-confirm{width:320px;padding:14px;background:var(--ui-panel);border:1px solid var(--ui-border);box-shadow:0 4px 24px #000a;text-align:center;color:var(--ui-text);line-height:1.5}
.prof-confirm p{margin:0 0 12px}
.prof-confirm-note{color:var(--ui-text-dim);font-size:11px}
.prof-confirm-buttons{display:flex;justify-content:center;gap:8px}
.prof-confirm-buttons .char-button{min-width:90px}
.prof-top{display:flex;justify-content:center;margin-bottom:8px}
.prof-bar.wide{flex:none;width:480px}
.prof-craft{flex:1;min-height:0;display:flex;gap:8px}
.prof-list-side{flex:none;display:flex;flex-direction:column;gap:6px;width:290px}
.prof-search{display:flex;gap:4px}
.prof-search .gf-input{flex:1}
.prof-list{flex:1;overflow-y:auto;padding:3px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45);scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.prof-group{cursor:pointer}
.prof-group .header-title{flex:1}
.prof-recipe{display:flex;align-items:center;gap:6px;width:100%;height:22px;padding:0 6px 0 10px;background:none;border:0;color:var(--ui-text);text-align:left}
.prof-recipe:hover{background:rgba(255,255,255,.04)}
.prof-recipe.selected{background:rgb(var(--ui-accent-rgb) / .12);box-shadow:inset 0 0 0 1px rgb(var(--ui-accent-rgb) / .35);color:#fff}
.prof-chevrons{flex:none;width:10px;height:12px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Skill-up chance, the client's four colours. */
.optimal{--diff:#ff8040}.medium{--diff:#ffff00}.easy{--diff:#40bf40}.trivial{--diff:#808080}
.prof-chevrons{stroke:var(--diff)}
.prof-recipe-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-recipe-count{color:var(--ui-text-dim)}
.prof-detail{flex:1;min-width:0;display:flex;flex-direction:column;padding:12px 14px 8px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.prof-detail-head{display:flex;align-items:center;gap:12px}
.prof-detail-icon{flex:none;width:48px;height:48px;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.prof-detail-name{display:flex;align-items:center;gap:6px;color:#fff;font-size:15px}
.prof-detail-diff{color:var(--diff);font-size:11px}
.prof-star{width:18px;height:18px;padding:0;background:none;border:0}
.prof-star svg{width:16px;height:16px;fill:none;stroke:var(--ui-text-dim);stroke-width:1.2;stroke-linejoin:round}
.prof-star:hover svg{stroke:var(--ui-accent)}
.prof-star.on svg{fill:var(--ui-accent);stroke:var(--ui-accent)}
.prof-desc{margin:12px 0 4px;color:var(--ui-text);line-height:1.5}
.prof-tool{margin:4px 0;color:var(--ui-text)}
.prof-tool .missing{color:#d9463c}
.prof-reagents-title{margin:12px 0 6px;color:var(--ui-accent)}
.prof-reagents{display:flex;flex-direction:column;gap:6px}
.prof-reagent{display:flex;align-items:center;gap:8px;color:#fff}
.prof-reagent.missing{color:#6b6860}
.prof-reagent-icon{flex:none;width:32px;height:32px;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.prof-reagent.missing .prof-reagent-icon{filter:saturate(.3) brightness(.6)}
.prof-reagent-count{font-variant-numeric:tabular-nums}
.prof-track{margin-top:auto !important}
.prof-track input{accent-color:var(--ui-accent)}
.prof-actions{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.prof-actions .char-button{min-width:110px}
.prof-quantity{display:flex;align-items:center;gap:3px}
.prof-quantity .gf-input{width:40px;height:24px;text-align:center}
.prof-spell:hover{z-index:5}

/* Page background: /skimt at the top, every window's key in small faint text behind the HUD. */
.screen-help{position:absolute;inset:0;pointer-events:none}
.screen-help button{pointer-events:auto;padding:0;background:none;border:0;color:rgb(232 223 201 / .35);font-size:11px;white-space:nowrap}
.screen-help button:hover{color:var(--ui-text)}
.screen-help-key{color:rgb(var(--ui-accent-rgb) / .55)}
.screen-help button:hover .screen-help-key{color:var(--ui-accent)}
.screen-help-command{position:absolute;left:50%;top:calc(var(--top-inset, 0px) + 10px);transform:translateX(-50%);font-size:13px !important}
.screen-help-keys{position:absolute;left:50%;top:430px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,auto);gap:4px 28px;justify-items:start}

/* Main chat window's icon buttons (chat menu, voice, social) at the right end of the tab row. */
.chat-buttons{display:flex;gap:2px;margin-left:auto}
.chat-icon{position:relative;display:grid;place-items:center;width:22px;height:22px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border)}
.chat-buttons .chat-icon{border-bottom:0}
.chat-icon svg{width:14px;height:14px;fill:var(--ui-text-dim)}
.chat-icon .chat-icon-line,.chat-icon .stroke,.channel-voice .stroke,.channels-speaker .stroke{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.chat-icon{color:var(--ui-text-dim)}
.chat-icon:hover,.chat-icon.active{color:var(--ui-accent);border-color:var(--ui-accent)}
.chat-icon:hover svg,.chat-icon.active svg,.chat-icon.live svg{fill:var(--ui-accent)}
.chat-icon.live{color:var(--ui-accent);box-shadow:inset 0 -1px var(--ui-accent)}
.chat-icon.off{color:#d9463c}
.chat-icon.off svg{fill:#d9463c}
.chat-icon.off::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:#d9463c;transform:rotate(-45deg)}
.chat-social{width:auto;display:flex;gap:3px;padding:0 5px}
.chat-social-count{color:#82c5ff;font-size:11px;line-height:1}
.chat-menu-anchor{position:relative}
.chat-menu{position:absolute;right:0;bottom:calc(100% + 2px);z-index:60;display:flex;flex-direction:column;width:150px;padding:3px;background:var(--ui-panel);border:1px solid var(--ui-border);box-shadow:0 4px 12px #000a}
.chat-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;height:22px;padding:0 8px;background:none;border:0;color:var(--ui-text);font-size:12px;text-align:left}
.chat-menu button:hover,.chat-menu button.active{background:rgba(255,255,255,.06)}
.chat-menu-cmd{color:#6b6860;font-size:11px}
.chat-menu-sub{position:relative;margin-top:3px;padding-top:3px;border-top:1px solid rgba(255,255,255,.06)}
.chat-menu-arrow{border:4px solid transparent;border-left-color:var(--ui-accent);margin-right:-4px}
.chat-submenu{right:auto;left:calc(100% + 4px);bottom:-4px;width:130px}

/* Chat Channels: channel list left (voice buttons), members right. */
.channels{display:flex;gap:8px;width:400px;height:360px;font-size:12px}
.channels-list{flex:none;display:flex;flex-direction:column;gap:2px;width:190px;padding:3px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.channel{display:flex;align-items:center;gap:6px;min-height:24px;padding:0 4px 0 8px;color:var(--ui-text);cursor:pointer}
.channel:hover{background:rgba(255,255,255,.04)}
.channel.selected{background:rgb(var(--ui-accent-rgb) / .12);box-shadow:inset 2px 0 var(--ui-accent);color:var(--ui-accent)}
.channel.unavailable{color:#5f5c55;cursor:default}
.channel-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-voice{display:grid;place-items:center;width:20px;height:20px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text-dim)}
.channel-voice svg{width:12px;height:12px;fill:currentColor}
.channel-voice:hover,.channel-voice.on{color:var(--ui-accent);border-color:var(--ui-accent)}
.channel-leave{width:18px;height:18px;padding:0;background:none;border:0;color:#6b6860;font-size:14px;opacity:0}
.channel:hover .channel-leave{opacity:1}
.channel-leave:hover{color:#d9463c}
.channels-sep{height:1px;margin:4px 6px;background:var(--ui-border)}
.channels-join{margin-top:4px}
.channels-join-button{margin-top:auto}
.channels-roster{flex:1;min-width:0;display:flex;flex-direction:column}
.channels-roster .header-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channels-count{color:var(--ui-text-dim);font-size:11px}
.channels-members{flex:1;overflow-y:auto;padding:4px 2px;scrollbar-width:thin;scrollbar-color:#3a3a36 transparent}
.channels-member{display:flex;align-items:center;justify-content:space-between;padding:3px 6px}
.channels-member:hover{background:rgba(255,255,255,.04)}
.channels-speaker{width:12px;height:12px;fill:#5f5c55;color:#5f5c55}
.channels-speaker.talking{fill:var(--ui-accent);color:var(--ui-accent);animation:voice-pulse .7s ease-in-out infinite alternate}
.channels-speaker.muted{fill:#d9463c;color:#d9463c}
@keyframes voice-pulse{from{opacity:.55}to{opacity:1}}
.channels-voice-bar{display:flex;align-items:center;gap:4px;padding-top:6px;border-top:1px solid var(--ui-border)}
.channels-voice-bar .chat-icon{width:26px;height:26px}
.channels-voice-bar .char-button{margin-left:auto}

/* Talents (N): spec tabs and search, unspent points, three trees, apply. */
.talents{display:flex;flex-direction:column;width:800px;font-size:12px}
.talents-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:6px}
.talents-specs{display:flex;gap:2px}
.talents-specs button{display:flex;align-items:center;gap:6px;height:26px;padding:0 16px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);border-bottom:0;color:var(--ui-text-dim);font-size:12px}
.talents-specs button:hover:not(:disabled){color:#fff}
.talents-specs button.active{color:var(--ui-accent);box-shadow:inset 0 -1px var(--ui-accent)}
.talents-specs button:disabled{color:#5f5c55;cursor:default}
.talents-check{font-size:11px}
.talents-lock{width:9px;height:11px;fill:#5f5c55;stroke:#5f5c55;stroke-width:1.2}
.talents-lock path{fill:none}
.talents-search{width:220px}
.talents-bar .header-title{flex:1}
.talents-unspent-label{color:var(--ui-text);font-size:12px}
.talents-unspent{min-width:34px;height:22px;margin-left:8px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .85);color:var(--ui-text-dim);font-size:15px;line-height:20px;text-align:center}
.talents-unspent.some{color:var(--ui-accent);border-color:var(--ui-accent)}
.talent-trees{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.talent-tree{display:flex;flex-direction:column;align-items:center;padding:12px 0 18px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.talent-tree-head{display:flex;align-items:center;gap:10px;align-self:stretch;margin:0 12px 16px;padding-bottom:10px;border-bottom:1px solid rgb(var(--ui-accent-rgb) / .35)}
.talent-tree-icon{position:relative;flex:none;width:34px;height:34px;border:1px solid var(--ui-border);background:#222 center/116.3% no-repeat}
.talent-tree-icon span{position:absolute;right:-6px;bottom:-6px;min-width:16px;padding:0 3px;background:#111;border:1px solid var(--ui-border);color:var(--ui-accent);font-size:10px;line-height:13px;text-align:center}
.talent-tree-name{color:#fff;font-size:16px}
.talent-grid{position:relative;width:228px;height:390px}
.talent-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.talent-arrows path{fill:none;stroke:#4a4842;stroke-width:2}
.talent-arrows path.head{fill:#4a4842;stroke:none}
.talent-arrows .on path{stroke:var(--ui-accent)}
.talent-arrows .on path.head{fill:var(--ui-accent)}
.talent{position:absolute;width:42px;height:42px;padding:0;background:#111;border:1px solid #000}
.talent-icon{position:absolute;inset:1px;background:#222 center/116.3% no-repeat}
.talent.is-locked .talent-icon{filter:grayscale(1) brightness(.45)}
.talent.is-available{border-color:#8a8474}
.talent.is-partial{border-color:#40bf40;box-shadow:0 0 0 1px #40bf40}
.talent.is-maxed{border-color:var(--ui-accent);box-shadow:0 0 0 1px var(--ui-accent)}
.talent:hover{z-index:5}
.talent:hover .talent-icon{filter:brightness(1.2)}
.talent.is-locked:hover .talent-icon{filter:grayscale(1) brightness(.6)}
.talent-rank{position:absolute;right:-5px;bottom:-5px;min-width:15px;padding:0 3px;background:#111;border:1px solid #000;color:#40bf40;font-size:10px;line-height:13px;text-align:center}
.talent.is-available .talent-rank{color:var(--ui-text-dim)}
.talent.is-maxed .talent-rank{color:var(--ui-accent)}
.talent.pending .talent-rank{color:#111;background:var(--ui-accent)}
.talent.dim{opacity:.25}
.talent.match{outline:1px solid #fff;outline-offset:2px}
.talent-tooltip{pointer-events:none;left:calc(100% + 8px);top:0;width:260px;white-space:normal;background:rgb(var(--ui-bg-rgb));text-align:left}
.talent-tooltip.left{left:auto;right:calc(100% + 8px)}
.talent-tip-rank{color:var(--ui-text-dim);font-size:11px}
.talent-tip-req{color:#d9463c}
.talent-tip-next{margin-top:6px;color:#fff}
.talent-tip-hint{margin-top:6px;color:#40bf40;font-size:11px}
.talents-foot{display:flex;justify-content:center;gap:8px;margin-top:8px}
.talents-foot .char-button{min-width:120px}
.talents-apply.ready{color:var(--ui-accent);border-color:var(--ui-accent)}

/* Collections (Shift-P): Appearances. Class dropdown, slot buttons in three groups, collected bar, card grid. */
.coll{display:flex;flex-direction:column;width:760px;height:560px;font-size:12px}
.coll-top{display:flex;align-items:flex-end;justify-content:space-between}
.coll-search{display:flex;gap:4px;margin-bottom:4px}
.coll-search .gf-input{width:200px}
.coll-filter-sep{margin:6px 0 2px;padding-top:6px;border-top:1px solid var(--ui-border);color:var(--ui-text-dim);font-size:11px}
.coll-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.coll-bar{display:flex;align-items:center;gap:14px}
.coll-class{flex:none;width:150px}
.coll-class .cfg-dropdown-button{color:var(--class)}
.coll-slots{display:flex;gap:14px}
.coll-slot-group{display:flex;gap:4px}
.coll-slot{width:30px;height:30px;padding:0;border:1px solid var(--ui-border);border-radius:50%;background:#222 center/130% no-repeat;filter:grayscale(1) brightness(.6)}
.coll-slot:hover{filter:grayscale(.3) brightness(.9)}
.coll-slot.active{filter:none;border-color:var(--ui-accent);box-shadow:0 0 0 1px var(--ui-accent)}
.coll-progress{margin:10px 0}
.coll-progress .prof-bar{flex:none}
.coll-grid{flex:1;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:8px}
.coll-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px;border:1px solid var(--ui-border);background:radial-gradient(ellipse at 50% 40%,rgb(var(--ui-surface-rgb) / .9),rgb(var(--ui-bg-rgb) / .9))}
.coll-card:hover{border-color:var(--ui-accent);z-index:5}
.coll-card-icon{width:52px;height:52px;border:1px solid #000;background:#222 center/116.3% no-repeat;box-shadow:0 2px 8px #000a}
.coll-card-name{color:var(--ui-text);font-size:11px;text-align:center;line-height:1.3}
.coll-card.missing .coll-card-icon{filter:grayscale(1) brightness(.4)}
.coll-card.missing .coll-card-name{color:#5f5c55}
.coll-card.wearing::after{content:"";position:absolute;right:0;top:0;border:7px solid var(--ui-accent);border-left-color:transparent;border-bottom-color:transparent}
.coll-card.wearing{border-color:rgb(var(--ui-accent-rgb) / .6)}
.coll-tooltip{pointer-events:none;left:calc(100% + 6px);top:0;width:220px;white-space:normal;background:rgb(var(--ui-bg-rgb))}
.coll-card:nth-child(6n) .coll-tooltip,.coll-card:nth-child(6n-1) .coll-tooltip{left:auto;right:calc(100% + 6px)}
.coll-tip-have{margin-top:4px;color:#40bf40}
.coll-tip-missing{margin-top:4px;color:#d9463c}
.coll-tip-source{margin-top:4px;color:#fff}
.coll-empty{grid-column:1/-1;grid-row:1/-1}
.coll-footer{justify-content:center}

/* Info bar: a header strip across the top edge, three groups (left, center, right). */
.info-bar{left:0;right:0;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;gap:16px;height:24px;padding:0 calc(var(--hud-side, 0px) + 20px);font-size:12px;font-variant-numeric:tabular-nums}
.info-zone{display:flex;align-items:center;gap:16px;min-width:0}
.info-center{justify-content:center}
.info-right{justify-content:flex-end}
.info-item{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.info-label{color:var(--ui-text-dim);font-size:11px}
.info-value{color:#fff}
.info-bar .money{font-size:12px}
.info-bar .info-button{flex:none}

/* /skimt > Info bar: the three groups as they'll appear, then every item with its place. */
.cfg-infobar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 12px}
.cfg-infobar.disabled{opacity:.4}
.cfg-infobar-zone{min-height:80px;padding:4px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.cfg-infobar-zone-title{margin:0 2px 4px;color:var(--ui-accent);font-size:11px}
.cfg-infobar-chip{display:flex;align-items:center;gap:2px;height:22px;margin-bottom:2px;padding:0 2px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);font-size:11px}
.cfg-infobar-chip span{flex:1;min-width:0;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ui-text)}
.cfg-infobar-chip button{width:14px;height:18px;padding:0;background:none;border:0;color:var(--ui-text-dim);font-size:13px;line-height:1}
.cfg-infobar-chip button:hover:not(:disabled){color:var(--ui-accent)}
.cfg-infobar-chip button:disabled{opacity:.25;cursor:default}
.cfg-infobar-chip .cfg-infobar-remove:hover{color:#d9463c}
.cfg-infobar-empty{padding:4px;color:#5f5c55;font-size:11px}
.cfg-infobar-row{display:flex;align-items:center;gap:10px;margin:3px 0}
.cfg-infobar-row>span{flex:1;min-width:0;color:var(--ui-text);font-size:12px}
.cfg-infobar-row .cfg-choice-row{flex:none;width:250px}
.info-none{color:#6b6860}
.cfg-infobar-chip .cfg-infobar-arrow{width:14px;display:grid;place-items:center}
.cfg-infobar-arrow svg{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.info-bar:not(.gold-line)::after{background:linear-gradient(90deg,transparent,#050505 60px,#050505 calc(100% - 60px),transparent)}

/* /skimt > Tips: short notes by topic. */
.cfg-tips-topic{margin:12px 0 4px;color:var(--ui-accent);font-size:12px}
.cfg-tips-topic:first-of-type{margin-top:4px}
.cfg-tips{margin:0;padding:0 0 0 14px;color:var(--ui-text);line-height:1.5}
.cfg-tips li{margin-bottom:4px}
.cfg-tips li::marker{color:rgb(var(--ui-accent-rgb) / .6)}

/* Quick setup layouts (QuickSetup.js). --bar-shift: 43px per action bar below three, so what sits
   above the bars (frames, cast bar, swing timers, stance and pet bars) follows them down.
   Pet: left of the player frame and mirrored above the action bars; right under it (8px) at the top. Focus lines up with the player frame's left
   edge: above it when the frames sit above the action bars, below the pet when they're at the top. Target of target
   sits beside the target, level with its bottom.
   Top center: player and target below the debuff row. */
body.frames-top .player-frame,body.frames-top .target-frame{bottom:auto;top:calc(var(--top-inset, 0px) + 165px)}
body.frames-top .tot{bottom:auto;top:calc(var(--top-inset, 0px) + 200px)}
body.frames-top .pet-frame{right:auto;left:calc(50% - 60px - var(--player-width, 290px));bottom:auto;top:calc(var(--top-inset, 0px) + 240px)} /* under the player: bottom (232) + 8 */
body.frames-top .focus-frame{bottom:auto;top:calc(var(--top-inset, 0px) + 295px)} /* under the pet */
body.frames-top:not(.groups-chat) :is(.party-frame,.raid-frame){top:calc(var(--top-inset, 0px) + 370px)} /* below the focus frame */
/* Top left, like Blizzard's: player in the corner, target beside it, pet and focus under the player;
   party and raid move down to make room. */
body.frames-classic .player-frame{right:auto;left:calc(var(--hud-side, 0px) + 20px);bottom:auto;top:calc(var(--top-inset, 0px) + 20px)}
body.frames-classic .target-frame{left:calc(var(--hud-side, 0px) + 360px);bottom:auto;top:calc(var(--top-inset, 0px) + 20px)}
body.frames-classic .tot{left:calc(var(--hud-side, 0px) + 660px);bottom:auto;top:calc(var(--top-inset, 0px) + 55px)}
body.frames-classic .pet-frame{right:auto;left:calc(var(--hud-side, 0px) + 20px);bottom:auto;top:calc(var(--top-inset, 0px) + 95px)} /* player bottom (87) + 8 */
body.frames-classic .focus-frame{left:calc(var(--hud-side, 0px) + 20px);bottom:auto;top:calc(var(--top-inset, 0px) + 150px)} /* under the pet */
body.frames-classic:not(.groups-chat) :is(.party-frame,.raid-frame){top:calc(var(--top-inset, 0px) + 230px)}
/* Party and raid above the chat, growing upward. */
body.groups-chat :is(.party-frame,.raid-frame){top:auto;bottom:275px}

/* /skimt > Quick setup */
.quick-apply{align-items:center}
.quick-done{color:#40bf40;font-size:11px}
.quick-warning{margin:8px 0;padding:8px 10px;border:1px solid #d9463c;background:rgb(217 70 60 / .08);color:var(--ui-text)}
.quick-warning p{margin:4px 0}
.quick-warning-title{color:#ff6a5c;font-size:13px}
.quick-danger:hover:not(:disabled){color:#ff6a5c !important;border-color:#d9463c !important}
.quick-save{display:flex;gap:6px;align-items:center;margin:6px 0}
.quick-save .gf-input{flex:1;min-width:0}
.quick-scope{flex:none;width:170px}
.quick-layouts{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.quick-layout{display:flex;align-items:center;gap:8px;padding:3px 3px 3px 8px;border:1px solid var(--ui-border);background:rgb(var(--ui-bg-rgb) / .45)}
.quick-layout-name{flex:1;min-width:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-layout-scope{color:var(--ui-text-dim);font-size:11px}
.quick-layout .char-button{height:22px}
.quick-delete{width:18px;height:18px;padding:0;background:none;border:0;color:#6b6860;font-size:14px}
.quick-delete:hover{color:#d9463c}
/* Reversed (/skimt > Backpack): backpack at the bar's left end, bags to its right; the bag
   windows line up on their left edges and wrap into new columns to the right. */
.bag-bar.reversed{flex-direction:row}
.bag-windows.reversed .bag-stack{align-items:flex-start;flex-wrap:wrap}

/* Nameplates (Nameplates.js): name, flat bevel health bar, thin cast bar, your debuffs above. */
.nameplates{position:absolute;inset:0;pointer-events:none}
.plate{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;transform-origin:50% 100%;pointer-events:auto;cursor:pointer;transition:opacity .2s}
.plate.faded{opacity:.55}
.plate:hover{opacity:1}
.plate-name{display:flex;align-items:center;gap:3px;max-width:100%;font-size:11px;line-height:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.plate.targeted .plate-name{color:var(--ui-accent)}
.plate-name.tapped{color:#9d9d9d}
.plate-bar{position:relative;width:100%;height:var(--plate-height, 10px);background:rgb(var(--ui-surface-rgb) / .95);border:1px solid #000}
.plate.targeted .plate-bar{box-shadow:0 0 0 1px var(--ui-accent)}
/* Threat: a soft glow in the threat meter's colors (orange close, red on you / lost), so it never reads
   as the target's crisp gold line; on the target the gold line stays inside it. */
.plate-bar.threat-high{box-shadow:0 0 0 1px rgb(232 134 42 / .9),0 0 6px 1px rgb(232 134 42 / .55)}
.plate-bar.threat-aggro{box-shadow:0 0 0 1px rgb(211 60 51 / .95),0 0 7px 2px rgb(211 60 51 / .65)}
.plate.targeted .plate-bar.threat-high{box-shadow:0 0 0 1px var(--ui-accent),0 0 0 2px rgb(232 134 42 / .9),0 0 7px 2px rgb(232 134 42 / .55)}
.plate.targeted .plate-bar.threat-aggro{box-shadow:0 0 0 1px var(--ui-accent),0 0 0 2px rgb(211 60 51 / .95),0 0 8px 3px rgb(211 60 51 / .65)}
.plate-fill{position:absolute;left:0;top:0;bottom:0}
.plate-fill.tapped{--tint:#7a7a7a}
.plate-percent{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.plate-level{position:absolute;white-space:nowrap;left:calc(100% + 4px);top:50%;transform:translateY(-50%);font-size:10px;line-height:1;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.plate-marker{position:absolute;right:calc(100% + 4px);top:50%;width:16px;height:16px;transform:translateY(-50%);filter:drop-shadow(0 0 1px #000)}
.plate-marker.skull{fill:#f0ede4}.plate-marker.skull .eye{fill:#111}
.plate-marker.cross path{fill:none;stroke:#e03030;stroke-width:3;stroke-linecap:round}
.plate-cast{position:relative;width:100%;height:9px;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid #000}
.plate-cast-fill{position:absolute;left:0;top:0;bottom:0;background:url(media/bar.png) 0 0/100% 100%,var(--ui-accent);background-blend-mode:multiply}
.plate-cast.locked .plate-cast-fill{background:url(media/bar.png) 0 0/100% 100%,#6b6860}
.plate-cast-spell{position:absolute;left:0;right:0;top:calc(100% + 1px);font-size:9px;line-height:10px;text-align:center;color:#fff;white-space:nowrap;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.plate-debuffs{display:flex;gap:2px;align-items:flex-end;min-height:0}
.plate-debuff{position:relative;width:16px;height:16px;border:1px solid #000;background:#222 center/116.3% no-repeat}
.plate-debuff.mine{width:20px;height:20px}
.plate-debuff-time{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.plate-debuff-stacks{position:absolute;right:1px;bottom:0;font-size:9px;font-weight:700;line-height:1;color:#fff;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
/* Elite crest (UnitFrames.js): a dragon wing over the outer top corner (portrait side), gold for
   elites and world bosses, silver for rares; like the addon's nameplates-icon-elite-* atlases. */
.unit-body{position:relative}
.unit-crest{position:absolute;left:-14px;top:-15px;z-index:2;width:30px;height:30px;stroke:#000;stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #000);pointer-events:none;transform:scaleX(-1)}
.unit.mirrored .unit-crest{left:auto;right:-14px;transform:none}
.unit-crest.gold,.plate-crest.gold{fill:url(#crest-gold)}
.unit-crest.silver,.plate-crest.silver{fill:url(#crest-silver)}
.plate-crest{width:12px;height:12px;margin-left:2px;vertical-align:-2px;stroke:#000;stroke-width:1.5;stroke-linejoin:round}
.crest-rib{fill:none;stroke:rgb(0 0 0 / .45);stroke-width:.9}
.plate-crest{width:14px;height:14px}
/* The classification in words before the level (target frame): gold Elite / Boss, silver Rare. */
.unit-class-tag{margin-right:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.unit-class-tag.gold{color:var(--ui-accent)}
.unit-class-tag.silver{color:#c9ccd1}

.plate-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.plate-name .plate-crest{flex:none;margin:0}

/* Quick setup's screen preview (demo only): the HUD at the user's screen size in UI units
   (5120x1400 = 4389x1200), scaled down to fit the browser, outlined. --hud-side: the margin
   that keeps edge-anchored parts in a centered 16:9 area (HUD area choice). */
body.screen-preview .screen{background:radial-gradient(ellipse at 50% 40%,#393b30,#141612);inset:auto;left:50%;top:50%;width:var(--preview-w);height:var(--preview-h);transform:translate(-50%,-50%) scale(var(--preview-scale));box-shadow:0 0 0 2px rgb(var(--ui-accent-rgb) / .4)}
body.screen-preview{background:#0b0c0a}

/* Calendar (the minimap's calendar button): Blizzard's CalendarFrame layout. Month bar, weekday
   names, 7 x 6 flat day cells 91px square, 1px apart; events as lines with a 2px bar in their
   kind's color; the details panel beside the window. */
.cal{position:relative;width:643px;font-size:12px}
.cal-bar{position:relative;display:flex;align-items:center;justify-content:center;height:30px;margin:3px 0 4px} /* a window margin (11px) under the title strip */
.cal-month{display:flex;align-items:baseline;gap:8px}
.cal-month-name{color:var(--ui-accent);font-size:16px}
.cal-year{color:var(--ui-text-dim);font-size:13px}
.cal-nav{align-self:center;width:26px;height:26px;padding:0;background:rgb(var(--ui-bg-rgb) / .85);border:1px solid var(--ui-border);color:var(--ui-text-dim);font-size:16px;line-height:22px} /* as tall as Filters */
.cal-nav:hover{color:var(--ui-accent);border-color:var(--ui-accent)}
.cal-filter{position:absolute;right:0;top:2px}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,91px);gap:1px;margin-bottom:1px}
.cal-weekdays span{height:22px;line-height:22px;text-align:center;color:var(--ui-text-dim);font-size:11px;background:rgb(var(--ui-bg-rgb) / .85)}
.cal-grid{display:grid;grid-template-columns:repeat(7,91px);grid-auto-rows:91px;gap:1px;background:var(--ui-border);border:1px solid var(--ui-border)}
.cal-day{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:20px 3px 3px;background:rgb(var(--ui-surface-rgb) / .95);cursor:pointer;overflow:hidden}
.cal-day:hover{background:#20211e}
.cal-day.selected{background:#262723}
.cal-day.other{background:rgb(var(--ui-bg-rgb) / .9)}
.cal-day.other .cal-date{color:#5f5c55}
.cal-day.today{box-shadow:inset 0 0 0 1px var(--ui-accent)}
.cal-date{position:absolute;left:6px;top:4px;color:var(--ui-text-dim);font-size:12px;font-variant-numeric:tabular-nums}
.cal-day.today .cal-date{color:var(--ui-accent)}
.cal-more{position:absolute;right:6px;top:5px;color:var(--ui-text-dim);font-size:10px}
.cal-event{--kind:var(--ui-accent);flex:none;height:16px;padding:0 4px 0 6px;border:0;border-left:2px solid var(--kind);background:rgba(0,0,0,.35);color:var(--ui-text);font-size:10px;line-height:16px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-event:hover,.cal-event.open{background:rgb(var(--ui-accent-rgb) / .15);color:#fff}
.kind-holiday{--kind:var(--ui-accent)}
.kind-pvp{--kind:var(--steel)}
.kind-raid{--kind:#d33c33}
.kind-guild{--kind:#41ad2e}
.cal-detail{position:absolute;left:calc(100% + 12px);top:-39px;width:300px}
.cal-detail-body{padding:10px 12px 12px}
.cal-detail-kind{display:inline-block;margin-bottom:6px;padding-left:6px;border-left:2px solid var(--kind);color:var(--ui-text-dim);font-size:11px}
.cal-detail-when{color:var(--ui-text);line-height:1.5}
.cal-detail-text{margin:10px 0;color:var(--ui-text);line-height:1.5;white-space:normal}
.cal-detail-invites{margin-bottom:8px;font-size:11px}
.cal-detail-reply{display:flex;gap:4px}
.cal-detail-reply .char-button{flex:1}
.cal-detail-reply .char-button.chosen{color:var(--ui-accent);border-color:var(--ui-accent)}