:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  font-synthesis: none;
  --background: #17191c;
  --surface: #202328;
  --surface-hover: #282d34;
  --border: #3b4048;
  --rule: #30353d;
  --text: #e1e4e8;
  --muted: #a2a9b3;
  --orange: #e4a44c;
  --blue: #82b8e5;
  --positive: #9ac698;
  --negative: #e4a19a;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--background); }
body { margin: 0; color: var(--text); background: var(--background); }
button, input, select, textarea { font: inherit; }
button, input, select { border-radius: 2px; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { opacity: .48; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
button { color: var(--text); }
a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: #bad9f3; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 20px; line-height: 1.25; }
h2 { font-size: 14px; line-height: 1.4; }
h3 { font-size: 13px; line-height: 1.4; }
hr { margin: 14px 0; border: 0; border-top: 1px solid var(--rule); }
strong { font-weight: 600; }
.site-width { width: min(1600px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: -50px; left: 15px; padding: 8px 12px; background: var(--text); color: var(--background); }
.skip-link:focus { top: 8px; }
.masthead { background: #202327; border-bottom: 1px solid var(--border); }
.masthead-inner { height: 48px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand strong { font-size: 17px; color: #f0f1f2; }
.brand span { color: var(--muted); font-size: 12px; }
.version-links { display: flex; align-items: center; gap: 16px; font-size: 12px; }
.version-links > span { color: var(--muted); }
.navigation-bar { border-bottom: 1px solid var(--border); background: #1c1f23; }
.navigation-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 41px; }
.primary-nav { display: flex; gap: 4px; align-self: stretch; }
.nav-item { padding: 10px 15px 8px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 600; white-space: nowrap; }
.nav-item:first-child { padding-left: 0; padding-right: 16px; }
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--orange); border-bottom-color: var(--orange); }
.header-actions { display: flex; gap: 7px; padding-block: 5px; }
.button, .preset-button, .segment { min-height: 28px; padding: 4px 10px; border: 1px solid #4b525d; background: #2a2f36; color: var(--text); font-size: 12px; text-decoration: none; }
.button:hover, .preset-button:hover, .segment:hover { background: #353c45; border-color: #636e7d; }
.button.primary { color: #dddfe2; border-color: #5a6470; background: #333b45; }
.button.primary:hover { background: #414d5b; }
.button svg { display: none; }
.page-header { padding: 20px 0 15px; }
.page-header > p:not([hidden]) { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
#view-eyebrow, .eyebrow { display: none; }
#workspace:focus { outline: none; }
.workspace-grid, .stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.setup, .control-panel { border: 1px solid var(--border); background: var(--surface); padding: 14px 16px; }
.setup-grid { display: grid; grid-template-columns: minmax(70px, .6fr) minmax(75px, .7fr) minmax(110px, 1fr) minmax(280px, 2.3fr) minmax(140px, 1.2fr); gap: 12px 20px; align-items: start; }
.setup-grid > .field { min-width: 0; }
.input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.input-grid.three, .input-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.input-grid.four, .input-grid.four-col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field { min-width: 0; }
.field label, .field-label { display: flex; justify-content: space-between; gap: 8px; color: #c8cdd4; font-size: 12px; margin-bottom: 5px; }
.field label > span { color: var(--text); font-variant-numeric: tabular-nums; }
.field input[type="number"], .field select, input[type="text"] { width: 100%; min-height: 30px; padding: 4px 7px; border: 1px solid #4a515c; background: #171a1f; color: var(--text); }
.field input[type="number"]:hover, .field select:hover { border-color: #68717e; }
.field input[type="range"] { width: 100%; min-width: 0; accent-color: var(--blue); }
.field input[type="checkbox"], .toggle-row input { accent-color: var(--blue); }
.field-hint { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.field-row { display: grid; grid-template-columns: 1fr 75px; gap: 10px; align-items: center; }
.preset-row { display: flex; gap: 0; }
.preset-button { flex: 1; border-radius: 0; min-height: 30px; padding-inline: 7px; }
.preset-button + .preset-button { margin-left: -1px; }
.preset-button:first-child { border-radius: 2px 0 0 2px; }
.preset-button:last-child { border-radius: 0 2px 2px 0; }
.preset-button.active, .segment.active { position: relative; background: #3c3529; border-color: #9c7944; color: #f2c98f; }
.advanced-controls { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
details > summary { cursor: pointer; color: var(--muted); font-size: 12px; width: fit-content; }
details > summary:hover { color: var(--text); }
details[open] > summary { margin-bottom: 12px; }
.advanced-controls .input-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.control-panel .panel-header, .setup .panel-heading { margin: -2px 0 12px; padding: 0 0 10px; background: none; }
.control-panel > .field { margin-top: 12px; }
.control-panel > .input-grid { margin-top: 12px; }
.control-panel > .toggle-row { margin-top: 14px; }
.mobile-settings { display: none; }
.comparison-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; align-items: start; }
.comparison-layout > *, .wrath-layout > *, .sources-layout > * { min-width: 0; }
.spell-inspector { position: sticky; top: 12px; }
.panel, .section { border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.panel-heading, .panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 10px 12px; }
.panel-heading h2, .panel-header h2 { color: #e7e9ed; }
.panel-heading p, .panel-header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.panel-body, .section-body { padding: 12px; }
.panel-body > h3, .section-body > h3 { margin: 15px 0 7px; }
.toolbar, .table-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); padding: 0 0 9px; font-size: 12px; }
.toolbar p, .table-caption p { margin: 0; }
.toolbar strong { color: var(--text); }
.table-scroll { width: 100%; overflow-x: auto; scrollbar-color: #565e69 #22262c; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.result-table, .comparison-table { font-size: 12px; }
th { color: var(--muted); background: #23272d; text-align: right; font-weight: 400; white-space: nowrap; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
th:first-child, td:first-child { text-align: left; }
th:not(:first-child), td:not(:first-child) { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
.result-table { min-width: 620px; }
.result-table th { padding: 9px 10px; font-size: 11px; }
.result-table td { height: 46px; padding: 5px 10px; }
.result-table th:first-child { width: 29%; }
.result-table tbody tr:hover, .comparison-table tbody tr[data-spell]:hover { background: #292e36; }
.result-table tbody tr[data-spell], .comparison-table tbody tr[data-spell] { cursor: pointer; }
.result-table .selected-row, .comparison-table .selected-row { background: #293746; }
.result-table .selected-row:hover, .comparison-table .selected-row:hover { background: #304052; }
.selected-row td:first-child { border-left: 2px solid #82b8e5; padding-left: 8px; }
.sort-button { padding: 0; background: transparent; border: 0; border-radius: 0; font-size: inherit; font-weight: inherit; color: inherit; white-space: nowrap; }
.sort-button:hover, .sort-button.active { color: #f0c185; }
.spell-name { display: inline-flex; align-items: center; gap: 9px; text-align: left; color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.3; }
.spell-button { border: 0; padding: 0; background: none; }
.spell-name:hover { color: #fff; }
.spell-meta { display: block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.spell-icon { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #696a6a; border-radius: 2px; overflow: hidden; }
.spell-icon img { width: 24px; height: 24px; object-fit: cover; display: block; }
img.spell-icon { width: 26px; height: 26px; object-fit: cover; }
.spell-inspector .panel-heading, .spell-inspector .panel-header { align-items: start; }
.spell-inspector .spell-name { font-size: 14px; }
.spell-inspector .spell-meta { font-size: 11px; }
.spell-inspector .button { padding: 3px 7px; min-height: 25px; }
.formula { padding: 10px; background: #191d22; border: 1px solid #343b45; color: #cbd2db; font-family: Consolas, "Liberation Mono", monospace; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.formula strong { color: #f1cd9c; }
.description-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; margin: 10px 0; font-size: 12px; }
.description-list dt, .description-list dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.description-list dt { color: var(--muted); }
.description-list dd { text-align: right; font-variant-numeric: tabular-nums; }
.description-list dt:last-of-type, .description-list dd:last-of-type { border-bottom: 0; }
.target-list { margin-top: 12px; font-size: 11px; }
.target-list th, .target-list td { padding: 5px 8px; }
.target-list th { font-size: 10px; }
.target-list th:first-child, .target-list td:first-child { width: 70px; }
.target-list td:last-child { color: var(--muted); }
.notes, .notice { color: var(--muted); font-size: 11px; line-height: 1.6; }
.notes { margin-top: 12px; }
.notes p + p { margin-top: 6px; }
.notice { border-top: 1px solid var(--border); padding: 11px 0 0; }
.notice-title { color: #c7ccd4; font-weight: 600; margin-right: 4px; }
.notice.warning { border: 1px solid #695a43; background: #2b2822; padding: 10px 12px; color: #d2bd9d; }
.text-button { padding: 0; border: 0; border-radius: 0; color: var(--blue); background: none; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.text-button:hover { color: #bad9f3; }
.badge { padding: 0; color: var(--muted); font-size: 10px; white-space: nowrap; letter-spacing: 0; }
.badge.verified { color: #9ab4c9; }
.badge.warning { color: #d6b679; }
.muted { color: var(--muted); }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.damage-cell { font-variant-numeric: tabular-nums; }
.damage-cell strong { font-weight: 600; }
.bar-track { height: 2px; margin-top: 4px; background: #343941; }
.bar-fill { height: 2px; opacity: .8; }
.segmented { display: inline-flex; gap: 0; }
.segment { border-radius: 0; }
.segment + .segment { margin-left: -1px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.spell-inspector .detail-grid { display: block; }
.wrath-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.wrath-layout > .wide, .wrath-layout > .full-width { grid-column: 1 / -1; }
.mana-summary, .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); background: var(--surface); }
.mana-summary > *, .stat-card { padding: 10px 14px; min-width: 0; }
.mana-summary > * + *, .stat-card + .stat-card { border-left: 1px solid var(--border); }
.stat-label { display: block; color: var(--muted); font-size: 11px; }
.stat-value { display: block; margin: 3px 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-foot { color: var(--muted); font-size: 11px; }
.mana-summary .value, .mana-summary strong { display: block; margin: 3px 0; font-size: 16px; }
.mana-summary .label { color: var(--muted); font-size: 11px; }
.mana-summary .detail { color: var(--muted); font-size: 11px; }
.toggle-row { display: flex; align-items: start; gap: 8px; color: var(--muted); font-size: 12px; }
.toggle-row input { margin: 3px 0 0; }
.toggle-row strong { display: block; color: var(--text); font-weight: 400; }
.chart { margin-top: 4px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart svg text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; fill: var(--muted); }
.chart .grid-line { stroke: #343a43; stroke-width: 1; }
.chart .axis-line { stroke: #626c79; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); font-size: 10px; margin-top: 6px; }
.legend > span { display: flex; align-items: center; gap: 5px; }
.legend-dot { display: inline-block; width: 12px; height: 2px; background: var(--orange); }
.legend-dot.jade { background: #7caf9e; }
.sources-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); align-items: start; gap: 16px; }
.prose { color: #c2c8d0; font-size: 12px; line-height: 1.65; }
.prose h3 { color: var(--text); margin: 20px 0 6px; }
.prose ul { padding-left: 19px; margin: 7px 0 12px; }
.prose li { margin: 7px 0; }
.sources-list { list-style: none; margin: 0; padding: 0; }
.sources-list li { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.sources-list li:first-child { padding-top: 0; }
.sources-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.sources-list a { font-size: 12px; }
.sources-list p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.empty-state { border: 1px solid var(--border); padding: 24px 16px; background: var(--surface); color: var(--muted); }
.empty-state h2 { color: var(--text); margin-bottom: 7px; }
.loading { padding: 24px 0; color: var(--muted); }
.page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 22px; border-top: 1px solid var(--border); padding: 12px 0 20px; color: #8c96a3; font-size: 10px; }
.page-footer p { margin: 0; }
.share-fallback { position: fixed; inset: auto 20px 20px auto; z-index: 20; width: min(520px, calc(100% - 40px)); background: #252b32; border: 1px solid #6b7889; padding: 15px; }
.share-fallback label { display: block; color: var(--text); margin-bottom: 8px; }
.share-fallback input { margin-bottom: 8px; }
.target-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 12px 0; background: var(--border); border: 1px solid var(--border); }
.target-chip { display: flex; flex-direction: column; gap: 3px; background: var(--surface); padding: 8px; }
.target-chip > span { color: var(--muted); font-size: 10px; }
.target-chip strong { font-size: 13px; }

@media (min-width: 1550px) {
  .comparison-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .result-table td { height: 48px; }
}
@media (max-width: 1100px) {
  .setup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .setup-grid > .field:has(.preset-row) { grid-column: span 2; }
  .comparison-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 12px; }
  .advanced-controls .input-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-table { min-width: 580px; }
  .result-table td, .result-table th { padding-inline: 8px; }
}
@media (max-width: 900px) {
  .comparison-layout { grid-template-columns: minmax(0, 1fr); }
  .spell-inspector { position: static; }
  .spell-inspector .panel-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .spell-inspector .panel-body > .formula { grid-column: 1 / -1; }
  .spell-inspector .panel-body > .notes, .spell-inspector .panel-body > .field-hint { grid-column: 1 / -1; }
  .spell-inspector .description-list { align-self: start; }
  .sources-layout { grid-template-columns: 1fr; }
  .wrath-layout { grid-template-columns: 1fr; }
  .wrath-layout > .wide, .wrath-layout > .full-width { grid-column: auto; }
}
@media (max-width: 600px) {
  .site-width { width: calc(100% - 24px); }
  .masthead-inner { height: 45px; }
  .brand { gap: 7px; }
  .brand strong { font-size: 15px; }
  .brand span { font-size: 11px; }
  .version-links { gap: 10px; font-size: 11px; }
  .navigation-inner { flex-wrap: wrap; gap: 0; }
  .primary-nav { flex: 1 1 auto; }
  .nav-item { padding: 10px 11px 8px; font-size: 12px; }
  .nav-item:first-child { padding-right: 11px; }
  .header-actions { gap: 5px; margin-left: auto; }
  .header-actions .button { padding: 3px 6px; min-height: 26px; font-size: 11px; }
  .page-header { padding-top: 16px; }
  h1 { font-size: 19px; }
  .setup, .control-panel { padding: 12px; }
  .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .setup-grid > .field:has(.preset-row) { grid-column: 1 / -1; }
  .setup-grid > .field:first-child { grid-column: auto; }
  .advanced-controls .input-grid, .input-grid.three, .input-grid.three-col, .input-grid.four, .input-grid.four-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .input-grid { gap: 12px; }
  .toolbar, .table-caption { flex-wrap: wrap; gap: 4px; }
  .result-table { min-width: 570px; }
  .panel-heading, .panel-header { padding: 10px; }
  .panel-body, .section-body { padding: 10px; }
  .spell-inspector .panel-body, .detail-grid { display: block; }
  .detail-grid > * + * { margin-top: 12px; }
  .description-list { gap: 0 10px; }
  .mana-summary, .summary-grid { grid-template-columns: 1fr; }
  .mana-summary > *, .stat-card { padding: 9px 12px; }
  .mana-summary > * + *, .stat-card + .stat-card { border-left: 0; border-top: 1px solid var(--border); }
  .stat-card { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; }
  .stat-label { align-self: center; }
  .stat-value { font-size: 17px; margin: 0; text-align: right; }
  .stat-foot { grid-column: 1 / -1; margin-top: 2px; }
  .page-footer { margin-top: 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  button, a { transition: color 80ms linear, background-color 80ms linear; }
}
.setup{margin-bottom:16px}.setup-foot{margin-top:10px;color:var(--muted);font-size:11px}.aoe-setup .setup-grid{grid-template-columns:80px 90px 140px minmax(275px,1fr) 150px}.wrath-setup .setup-grid{grid-template-columns:70px repeat(4,minmax(105px,1fr)) minmax(275px,2fr)}.talent-settings{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}.relic-field .toggle-row{min-height:30px;align-items:center;margin:0}.advanced-controls .input-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.inspector-body{padding:12px}.inspector-body>h3{margin:16px 0 6px}.inspector-total{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px}.inspector-total strong{font-size:22px;font-variant-numeric:tabular-nums}.inspector-total span{font-size:11px;color:var(--muted)}.target-scroll{max-height:280px;overflow:auto}.target-list{margin-top:0}.table-notes{padding:12px;border-top:1px solid var(--rule);font-size:11px;color:var(--muted);line-height:1.6}.table-notes ul{padding-left:18px}.panel-heading>.notes{margin:0}.sorted-column{color:#f2c98f}.mana-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.mana-summary>div>span{color:var(--muted);font-size:11px}.results-status{margin:10px 0 16px;font-size:12px;color:var(--muted)}.mechanics-notes p{font-size:12px;color:#c2c8d0;line-height:1.6}.mechanics-notes h3:first-child{margin-top:0}.legend i{display:inline-block;width:14px;height:2px}.warning{padding:10px 12px;border-left:3px solid #b88a4a;background:#2d2923;color:#e0c7a6;font-size:12px}.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);border:1px solid #62768b;background:#273443;padding:10px 16px;color:var(--text);font-size:12px;z-index:20}.inspector-body details{font-size:11px;color:var(--muted);line-height:1.6}.inspector-body details[open] summary{margin-bottom:8px}
@media(max-width:1100px){.aoe-setup .setup-grid{grid-template-columns:80px 90px 120px minmax(250px,1fr) 130px;gap:14px}.aoe-setup .setup-grid>.preset-field{grid-column:auto}.wrath-setup .setup-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.wrath-setup .setup-grid>.preset-field{grid-column:span 3}.talent-settings{grid-template-columns:repeat(3,minmax(0,1fr))}.advanced-controls .input-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.aoe-setup .setup-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.aoe-setup .setup-grid>.preset-field{grid-column:span 2}.wrath-setup .setup-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wrath-setup .setup-grid>.preset-field{grid-column:span 3}}
@media(max-width:500px){.setup{padding:12px}.setup-grid,.aoe-setup .setup-grid{gap:12px}.talent-settings,.advanced-controls .input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mana-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.mana-summary>div:nth-child(3){border-left:0;border-top:1px solid var(--border)}.mana-summary>div:nth-child(4){border-top:1px solid var(--border)}.mana-summary>div{padding:10px}.inspector-total{flex-wrap:wrap}.toast{width:calc(100% - 24px);text-align:center}.result-table{min-width:560px}.result-table td,.result-table th{padding-left:8px;padding-right:8px}}

.mobile-table-hint{display:none}@media(max-width:900px){.mobile-table-hint{display:block;padding:6px 10px;color:var(--muted);font-size:10px;border-bottom:1px solid var(--rule)}}