:root {
  color-scheme:light;
  --bg:#f5f1e8;
  --panel:#fff;
  --surface:#faf7f1;
  --border:#ded8cc;
  --text:#292723;
  --muted:#69635b;
  --accent:#732b3b;
  --accent-hover:#572030;
  --accent-soft:#f4e8e9;
  --positive:#365c42;
  --negative:#943b35;
  --disabled-bg:#ebe7df;
  --disabled-text:#756e65;
  --disabled-border:#d5cfc4;
  --rail:#eee8dc;
  --rail-hover:#e5dfd2;
  --control-border:#bdb6a9;
  --placeholder:#756f65;
  --control-hover:#958a7b;
  --error-border:#d1aca5;
  --error-bg:#fbefec;
  --error-text:#762e2a;
  --table-head:#eee9df;
  --warning-bg:#f5ebd7;
  --warning-text:#73521c;
  --success-bg:#e8f0e8;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --radius:5px;
  --space:20px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 var(--font)
}
button,input,textarea,select {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  background:var(--disabled-bg);
  color:var(--disabled-text);
  border-color:var(--disabled-border)
}
a {
  color:var(--accent);
  text-underline-offset:3px;
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font:400 32px/1.2 var(--serif);
  letter-spacing:-.6px
}
h2 {
  font-size:17px;
  font-weight:650;
  line-height:1.3
}
h3 {
  font-size:14px;
  font-weight:650
}
p+p {
  margin-top:10px
}
.muted,.small,.field-help {
  color:var(--muted)
}
.small,.field-help {
  font-size:12px;
  line-height:1.55
}
.field-help {
  margin:8px 0 16px
}
.eyebrow {
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--muted)
}
.page-heading>.eyebrow {
  display:none
}
.sr-only,.file-input {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
[hidden] {
  display:none!important
}
/* Workspace shell: quiet navigation and a working canvas, not a dashboard header. */
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:204px;
  padding:28px 18px;
  background:var(--rail);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column
}
.brand {
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--text);
  font:600 21px/1.15 var(--serif)
}
.brand:hover {
  text-decoration:none
}
.brand strong {
  font:500 12px/1.5 var(--font);
  letter-spacing:.08em;
  display:block;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:4px
}
.brand-mark {
  display:none
}
.nav-label {
  margin:36px 10px 12px;
  font-size:10px;
  letter-spacing:.12em;
  color:var(--muted);
  text-transform:uppercase
}
.nav-item {
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  border-radius:3px;
  width:100%;
  text-align:left;
  padding:10px;
  margin:2px 0;
  color:var(--muted);
  font-size:13px
}
.nav-item span {
  font-size:17px;
  line-height:1
}
.nav-item:hover {
  background:var(--rail-hover);
  color:var(--text)
}
.nav-item.active {
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:650
}
.sidebar-bottom {
  margin-top:auto;
  padding:20px 10px 0
}
.connection {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:10px
}
.connection i {
  display:none
}
.logout {
  border:0;
  padding:0;
  background:transparent;
  color:var(--muted);
  font-size:12px
}
.workspace {
  margin-left:204px;
  padding:0 36px;
  max-width:1640px
}
.topbar {
  height:53px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--muted)
}
.private-tag {
  font-size:10px
}
.page-heading {
  padding:26px 0 24px
}
.page-heading p {
  margin-top:8px;
  max-width:720px;
  color:var(--muted);
  font-size:13px
}
.workbench-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:28px;
  align-items:start
}
.card {
  padding:22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  min-width:0
}
.profile-card {
  min-height:0
}
.settings-card {
  background:transparent;
  border:0;
  border-left:1px solid var(--border);
  border-radius:0;
  padding:0 0 0 24px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px
}
.section-heading>div {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.step {
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.settings-card .section-heading {
  margin-bottom:20px
}
.settings-card form {
  display:block
}
.settings-card>.small {
  margin-top:14px
}
.fight-style-field {
  margin-bottom:18px
}
.fight-style-field .field-help {
  margin-bottom:0
}
.advanced-sim-settings {
  margin-bottom:18px
}
.advanced-sim-settings>summary {
  margin-bottom:12px
}
.comparison-workspace .settings-card {
  position:sticky;
  top:24px
}
.key-workspace .workbench-grid {
  grid-template-columns:minmax(0,1fr)
}
.key-workspace .settings-card {
  border-left:0;
  border-top:1px solid var(--border);
  padding:20px 0 0
}
.key-workspace .settings-card form {
  max-width:640px
}
/* Shared form and action components. */
label {
  display:block;
  font-size:12px;
  font-weight:550;
  color:var(--text);
  margin-bottom:7px
}
input,select,textarea {
  width:100%;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--control-border);
  border-radius:var(--radius);
  padding:10px 12px;
  color:var(--text)
}
input::placeholder,textarea::placeholder {
  color:var(--placeholder)
}
input:hover,textarea:hover,select:hover {
  border-color:var(--control-hover)
}
input:disabled,select:disabled,textarea:disabled {
  background:var(--disabled-bg);
  color:var(--muted)
}
textarea {
  resize:vertical;
  min-height:250px;
  font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
  padding:14px
}
input[type=checkbox] {
  width:16px;
  height:16px;
  flex:none;
  padding:0;
  accent-color:var(--accent)
}
.primary,.secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid var(--control-border);
  border-radius:var(--radius);
  font-size:12px;
  font-weight:600;
  line-height:1.4
}
.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff
}
.primary:hover:not(:disabled) {
  background:var(--accent-hover);
  border-color:var(--accent-hover)
}
.secondary {
  background:var(--panel);
  color:var(--text)
}
.secondary:hover:not(:disabled) {
  background:var(--surface);
  border-color:var(--control-hover)
}
.full-width {
  width:100%;
  margin-top:10px
}
.upload {
  cursor:pointer;
  margin:0;
  font-size:12px
}
.field-row {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:16px;
  margin-bottom:16px
}
.input-unit {
  position:relative
}
.input-unit input {
  padding-right:42px
}
.input-unit span {
  position:absolute;
  right:12px;
  top:11px;
  font-size:12px;
  color:var(--muted)
}
.control-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  flex:1;
  margin:0
}
.control-field>input,.control-field>select {
  flex:none
}
.library-row,.account-character-row {
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin:12px 0
}
.library-row input,.library-row select {
  min-width:0
}
.library-row button {
  flex:none;
  white-space:nowrap
}
.check-label,.buff-controls label {
  display:flex;
  align-items:center;
  gap:9px;
  margin:12px 0;
  font-weight:400
}
.buff-controls {
  border:0;
  border-top:1px solid var(--border);
  padding:12px 0 0;
  margin:16px 0
}
.buff-controls legend {
  padding:0 8px 0 0;
  font-size:12px;
  font-weight:600
}
.buff-controls .field-help {
  margin-bottom:0
}
.character-source-toggle {
  display:flex;
  gap:0;
  width:fit-content;
  max-width:100%;
  border-bottom:1px solid var(--border);
  margin-bottom:20px
}
.character-source-toggle button {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  padding:10px 14px;
  color:var(--muted);
  font-size:12px;
  font-weight:600
}
.character-source-toggle button.selected {
  color:var(--accent);
  border-bottom-color:var(--accent)
}
.character-source-toggle button:hover:not(:disabled) {
  color:var(--text)
}
.character-source-toggle button:disabled {
  background:transparent;
  color:var(--muted)
}
.simc-input-panel .section-heading {
  justify-content:flex-end;
  margin-bottom:12px
}
.simc-input-panel p {
  margin-bottom:12px
}
.editor-footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  color:var(--muted);
  font-size:11px
}
.account-character-picker .field-help {
  max-width:620px
}
summary {
  cursor:pointer;
  color:var(--muted);
  font-size:12px
}
details[open]>summary {
  margin-bottom:12px
}
details+details {
  margin-top:16px
}
.error {
  border:1px solid var(--error-border);
  border-left:3px solid var(--negative);
  border-radius:3px;
  background:var(--error-bg);
  color:var(--error-text);
  padding:12px 14px;
  overflow-wrap:anywhere;
  font-size:13px
}
.error p {
  margin-bottom:8px
}
.banner {
  margin-bottom:20px
}
.badge {
  display:inline-block;
  font-size:11px;
  font-weight:550;
  padding:3px 7px;
  border-radius:3px;
  background:var(--table-head);
  color:var(--muted);
  text-transform:capitalize
}
.badge.queued {
  background:var(--warning-bg);
  color:var(--warning-text)
}
.badge.running {
  background:var(--accent-soft);
  color:var(--accent)
}
.badge.succeeded {
  background:var(--success-bg);
  color:var(--positive)
}
.badge.failed {
  background:var(--error-bg);
  color:var(--negative)
}
/* Results: numbers first, evidence below. */
.preview,.job-card,.result-card,.history-card,.lookup-option,.key-card {
  margin-top:24px
}
.preview,.job-card,.result-card,.history-card,.key-card {
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  padding:24px 0;
  background:transparent
}
.result-card .section-heading>div,.job-card .section-heading>div {
  display:block
}
.result-card .eyebrow,.job-card .eyebrow {
  display:block;
  margin-bottom:5px
}
.dps-hero {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 12px;
  padding:8px 0 20px
}
.dps-hero strong {
  font-size:48px;
  font-weight:650;
  letter-spacing:-2px;
  line-height:1.1;
  color:var(--text);
  font-variant-numeric:tabular-nums
}
.dps-hero>span {
  font-size:13px;
  color:var(--muted)
}
.dps-hero p {
  flex-basis:100%;
  font-size:12px;
  color:var(--muted)
}
.result-build {
  color:var(--accent);
  font-size:13px;
  margin-bottom:8px
}
.baseline-result {
  font-size:13px;
  margin:0 0 16px
}
.table-scroll {
  overflow-x:auto;
  border-top:1px solid var(--border)
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:13px
}
th,td {
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:top
}
th {
  font-size:11px;
  font-weight:650;
  color:var(--muted);
  background:var(--table-head);
  white-space:nowrap
}
td {
  background:var(--panel)
}
th:first-child,td:first-child {
  padding-left:12px
}
th.numeric,td.numeric {
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.results-table tbody tr.winning-row td {
  background:var(--accent-soft)
}
.results-table tbody tr.baseline-row td:first-child {
  font-weight:650
}
.gain {
  color:var(--positive)
}
.loss {
  color:var(--negative)
}
.row-note {
  font-size:10px;
  font-weight:600;
  color:var(--accent);
  display:block;
  margin-top:3px
}
.set-changes {
  max-width:440px;
  margin-top:5px;
  font-size:12px;
  overflow-wrap:anywhere
}
.set-changes p {
  margin:6px 0
}
.run-details,.sample-rotation {
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border)
}
.run-details p {
  margin-top:10px;
  font-size:12px;
  overflow-wrap:anywhere
}
.rotation-scroll {
  max-height:440px;
  overflow:auto
}
.result-card>.small {
  margin:16px 0
}
.downloads {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
  margin-top:18px;
  font-size:12px
}
.technical-downloads {
  margin-top:16px
}
.technical-downloads .downloads {
  margin-top:10px
}
pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:3px;
  padding:16px;
  color:var(--text);
  font:11px/1.65 ui-monospace,monospace;
  max-height:360px;
  overflow:auto;
  margin-bottom:0
}
.hash,.job-id {
  font:11px/1.5 ui-monospace,monospace;
  color:var(--muted);
  overflow-wrap:anywhere;
  margin:10px 0
}
.job-card .error {
  margin:12px 0
}
.history-filters {
  display:flex;
  gap:16px;
  margin-bottom:18px
}
.history-filters>.control-field:first-child {
  flex:2
}
.history-pages {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  color:var(--muted);
  font-size:12px
}
.history-card td:last-child .secondary {
  margin-right:6px
}
.history-card td:last-child select {
  width:auto;
  margin-top:6px
}
.lookup-option {
  background:transparent;
  padding:16px 0;
  border:0;
  border-top:1px solid var(--border)
}
.lookup-option p {
  margin:12px 0
}
.lookup-option form {
  display:flex;
  gap:12px;
  max-width:580px
}
.lookup-option button {
  white-space:nowrap
}
.key-card>.primary {
  margin:6px 10px 0 0
}
.key-card h3 {
  margin:18px 0 12px
}
.key-card .small[role=status] {
  margin-top:12px
}
.key-card>.field-help {
  max-width:780px
}
.key-card details {
  margin-top:18px
}
.key-card details button {
  margin:6px 8px 0 0
}
/* Comparison options are rows in a working document, not nested dashboard cards. */
.comparison-left {
  min-width:0;
  display:grid;
  gap:22px
}
.comparison-options {
  display:grid;
  gap:0
}
.gear-card {
  min-width:0
}
.comparison-option {
  padding:20px 0;
  border-bottom:1px solid var(--border);
  background:transparent
}
.comparison-option:first-child {
  border-top:1px solid var(--border)
}
.comparison-option.editing {
  background:transparent
}
.option-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:12px
}
.option-heading h3 {
  font-size:16px
}
.comparison-dps {
  font-size:12px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.comparison-dps strong {
  font-size:20px;
  color:var(--text);
  font-weight:650
}
.comparison-dps span {
  margin-top:2px
}
.option-substitution {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:9px 0;
  border-top:1px solid var(--border);
  overflow-wrap:anywhere
}
.option-substitution span {
  min-width:0
}
.option-substitution button {
  flex:none;
  font-size:11px;
  min-height:32px;
  padding:5px 9px
}
.option-editor {
  margin-top:18px;
  padding:18px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:3px
}
.option-editor>#gear-search {
  margin-bottom:14px
}
.option-extras {
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border)
}
.option-extras>summary {
  margin-bottom:12px
}
.gear-set-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0
}
.gear-sources,.comparison-tools,.comparison-help,.saved-comparison-workspace {
  margin-top:16px
}
.comparison-help p {
  margin-top:10px;
  font-size:12px
}
.comparison-tools>.secondary {
  margin:10px 0
}
.item-search-results {
  margin:16px 0;
  border-top:1px solid var(--border);
  padding-top:14px
}
.item-search-results h3 {
  margin-bottom:8px
}
.item-search-results p {
  font-size:12px;
  color:var(--muted)
}
.gear-matches {
  max-height:280px;
  overflow:auto;
  margin:10px 0
}
.gear-match {
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  text-align:left;
  background:var(--surface);
  color:var(--text);
  border:0;
  border-bottom:1px solid var(--border);
  padding:12px
}
.gear-match span {
  font-size:12px;
  color:var(--muted)
}
.gear-match:hover {
  background:var(--accent-soft)
}
.gear-selection {
  padding:16px 0;
  border-top:1px solid var(--border);
  margin-top:16px
}
.gear-selection h3 {
  margin-bottom:6px
}
.gear-selection>.small {
  margin-bottom:14px
}
.gear-choice {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:10px 0
}
.guide-import,.bag-import,.upgrade-builder {
  margin:18px 0
}
.guide-import textarea {
  min-height:130px;
  margin:12px 0
}
.bag-import input,.upgrade-builder input {
  margin:12px 0
}
.saved-library {
  margin-top:14px
}
.saved-library h3 {
  margin-bottom:10px
}
.comparison-prerequisite {
  margin-bottom:4px
}
/* Character identity: class accents identify WoW classes, never generic actions. */
.character-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  gap:20px
}
.character-card {
  --class-color:#8a847b;
  --class-ink:#575149;
  --faction-color:#d2cabb;
  border:1px solid var(--border);
  border-left:3px solid var(--faction-color);
  border-radius:3px;
  background:var(--panel);
  padding:20px;
  min-height:0
}
.character-card.faction-horde {
  --faction-color:#a84245
}
.character-card.faction-alliance {
  --faction-color:#3f71a3
}
:is(.character-card,.gear-strip-heading).class-warrior {
  --class-color:#c79c6e;
  --class-ink:#775431
}
:is(.character-card,.gear-strip-heading).class-paladin {
  --class-color:#f58cba;
  --class-ink:#9a3868
}
:is(.character-card,.gear-strip-heading).class-hunter {
  --class-color:#abd473;
  --class-ink:#49672b
}
:is(.character-card,.gear-strip-heading).class-rogue {
  --class-color:#fff569;
  --class-ink:#77601b
}
:is(.character-card,.gear-strip-heading).class-priest {
  --class-color:#fff;
  --class-ink:#575149
}
:is(.character-card,.gear-strip-heading).class-death_knight {
  --class-color:#c41e3a;
  --class-ink:#a01f35
}
:is(.character-card,.gear-strip-heading).class-shaman {
  --class-color:#0070de;
  --class-ink:#1760a3
}
:is(.character-card,.gear-strip-heading).class-mage {
  --class-color:#69ccf0;
  --class-ink:#176a85
}
:is(.character-card,.gear-strip-heading).class-warlock {
  --class-color:#9482c9;
  --class-ink:#655394
}
:is(.character-card,.gear-strip-heading).class-monk {
  --class-color:#00ff96;
  --class-ink:#176741
}
:is(.character-card,.gear-strip-heading).class-druid {
  --class-color:#ff7d0a;
  --class-ink:#a04f13
}
:is(.character-card,.gear-strip-heading).class-demon_hunter {
  --class-color:#a330c9;
  --class-ink:#85309f
}
:is(.character-card,.gear-strip-heading).class-evoker {
  --class-color:#33937f;
  --class-ink:#206a5b
}
.character-card-heading {
  display:flex;
  align-items:flex-start;
  gap:14px
}
.character-identity {
  flex:1;
  min-width:0
}
.character-portrait,.portrait-placeholder {
  width:62px;
  height:62px;
  flex:none;
  border:2px solid var(--class-color);
  border-radius:3px;
  object-fit:cover;
  background:var(--surface)
}
.portrait-placeholder {
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:22px
}
.character-card h2 {
  font-size:23px;
  line-height:1.25;
  letter-spacing:-.4px;
  overflow-wrap:anywhere
}
.character-inline-title {
  font-size:.62em;
  font-weight:400;
  color:var(--muted);
  letter-spacing:0
}
.character-inline-title:first-child:not(:empty) {
  margin-right:.25em
}
.character-inline-title:last-child:not(:empty) {
  margin-left:.25em
}
.character-spec {
  color:var(--class-ink);
  font-size:13px;
  font-weight:600;
  margin-top:5px
}
.character-realm {
  font-size:11px;
  color:var(--muted);
  max-width:120px;
  overflow-wrap:anywhere
}
.character-trash {
  margin-left:auto;
  flex:none
}
.character-trash,.benchmark-refresh,.account-character-refresh {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  min-width:40px;
  padding:9px;
  border:1px solid transparent;
  border-radius:3px;
  background:transparent;
  color:var(--muted)
}
.character-trash svg,.benchmark-refresh svg,.account-character-refresh svg {
  width:18px;
  height:18px
}
.character-trash:hover:not(:disabled) {
  color:var(--negative);
  background:var(--error-bg)
}
.benchmark-refresh:hover:not(:disabled),.account-character-refresh:hover:not(:disabled) {
  background:var(--surface);
  color:var(--accent);
  border-color:var(--border)
}
.character-benchmarks {
  margin-top:18px;
  border-top:1px solid var(--border);
  padding-top:10px;
  display:grid;
  gap:2px
}
.benchmark-line {
  display:flex;
  align-items:center;
  gap:6px
}
.benchmark-label {
  font-size:13px;
  color:var(--muted);
  min-width:0
}
.benchmark-label strong {
  font-size:17px;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  font-weight:600
}
.benchmark-report {
  margin-left:auto;
  font-size:11px;
  white-space:nowrap
}
.character-status {
  margin-top:12px;
  font-size:12px;
  color:var(--muted)
}
.character-status:empty,p[role=status]:empty {
  display:none
}
.armory-import .library-row {
  flex-wrap:wrap
}
.armory-import h3 {
  margin-top:16px
}
.armory-import>summary {
  font-size:16px;
  color:var(--text);
  font-weight:600
}
.armory-import>.field-help {
  max-width:680px
}
.character-cards+p {
  margin-top:16px
}
.equipped-overview {
  margin-top:18px
}
.gear-strip-heading {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px
}
.gear-strip-heading>div {
  min-width:0;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 12px
}
.gear-strip-heading strong {
  color:var(--text);
  font-size:18px
}
.gear-strip-heading span {
  font-size:12px;
  color:var(--class-ink,var(--muted));
  font-weight:550
}
.gear-character-portrait {
  width:42px;
  height:42px;
  border:2px solid var(--class-color,var(--border));
  border-radius:3px;
  object-fit:cover
}
.gear-header-refresh {
  margin-left:auto
}
.gear-icon-strip {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:14px
}
.gear-icon-entry {
  position:relative
}
.gear-icon {
  display:block;
  position:relative;
  width:38px;
  height:38px;
  background:var(--table-head);
  border:2px solid #9d9d9d;
  border-radius:2px;
  overflow:hidden
}
.gear-icon img {
  width:100%;
  height:100%;
  object-fit:cover
}
.gear-icon>span:first-child {
  display:grid;
  place-items:center;
  height:100%;
  font-size:14px;
  color:var(--text)
}
.gear-icon-level {
  position:absolute;
  bottom:0;
  right:0;
  background:#1e1c19e8;
  color:#fff;
  font:9px/12px var(--font);
  font-variant-numeric:tabular-nums;
  padding:0 2px
}
.gear-icon.quality-0 {
  border-color:#9d9d9d
}
.gear-icon.quality-1 {
  border-color:#fff
}
.gear-icon.quality-2 {
  border-color:#1eff00
}
.gear-icon.quality-3 {
  border-color:#0070dd
}
.gear-icon.quality-4 {
  border-color:#a335ee
}
.gear-icon.quality-5 {
  border-color:#ff8000
}
.gear-icon.quality-6,.gear-icon.quality-7 {
  border-color:#e6cc80
}
.gear-average {
  margin-left:6px;
  font-size:16px;
  font-weight:650;
  color:var(--text);
  font-variant-numeric:tabular-nums
}
.gear-average small {
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  margin-left:4px
}
.gear-hover-details {
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:20;
  width:260px;
  max-width:70vw;
  padding:12px;
  background:var(--panel);
  border:1px solid var(--control-border);
  border-radius:3px;
  white-space:pre-line;
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:12px;
  line-height:1.5;
  pointer-events:none
}
.gear-icon-entry:hover .gear-hover-details,.gear-icon-entry:focus-within .gear-hover-details {
  display:block
}
.refresh-spinning {
  animation:refresh-spin 1s linear infinite
}
@keyframes refresh-spin {
  to {
    transform:rotate(360deg)
  }
}
/* Login and utilities use the same language as the workbench. */
.login-shell {
  max-width:480px;
  margin:8vh auto;
  padding:24px
}
.login-shell>.brand {
  margin-bottom:28px
}
.login-card {
  padding:28px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius)
}
.login-card h1 {
  font-size:30px;
  margin-bottom:12px
}
.login-card>.eyebrow {
  display:none
}
.login-card>p {
  color:var(--muted);
  font-size:13px
}
.login-card form {
  margin-top:24px
}
.login-card .primary {
  width:100%;
  margin-top:14px
}
.login-card>.small {
  font-size:12px;
  margin-top:18px
}
.login-card .error {
  margin-top:16px
}
.login-footer {
  font-size:12px;
  color:var(--muted);
  margin-top:18px
}
.loading-screen {
  display:grid;
  place-items:center;
  min-height:100vh;
  color:var(--muted)
}
footer {
  margin-top:28px;
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--muted)
}
@media(min-width:1500px) {
  .workspace {
    padding:0 48px
  }
  .workbench-grid {
    grid-template-columns:minmax(0,1fr) 320px
  }
}
@media(max-width:1100px) {
  .sidebar {
    width:180px;
    padding:24px 14px
  }
  .workspace {
    margin-left:180px;
    padding:0 24px
  }
  .workbench-grid {
    grid-template-columns:minmax(0,1fr) 270px;
    gap:22px
  }
  .settings-card {
    padding-left:20px
  }
  .character-card-heading {
    flex-wrap:wrap
  }
  .character-realm {
    max-width:none
  }
  .character-cards {
    grid-template-columns:1fr
  }
}
@media(max-width:820px) {
  .sidebar {
    position:static;
    width:100%;
    padding:16px 20px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    border-right:0;
    border-bottom:1px solid var(--border)
  }
  .sidebar .brand {
    margin-right:auto
  }
  .nav-label,.connection {
    display:none
  }
  .sidebar-bottom {
    margin:0;
    padding:0
  }
  .nav-item {
    width:auto;
    padding:8px;
    font-size:12px;
    margin:0
  }
  .workspace {
    margin-left:0;
    padding:0 20px
  }
  .topbar {
    height:44px
  }
  .workbench-grid {
    grid-template-columns:minmax(0,1fr);
    gap:24px
  }
  .settings-card,.comparison-workspace .settings-card {
    position:static;
    border-left:0;
    border-top:1px solid var(--border);
    padding:20px 0 0
  }
  .settings-card form {
    display:block
  }
  .page-heading {
    padding:22px 0
  }
  .character-card-heading {
    flex-wrap:nowrap
  }
  .character-cards {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))
  }
  .editor-footer {
    flex-wrap:wrap
  }
}
@media(max-width:600px) {
  .history-filters {
    flex-wrap:wrap;
    gap:12px
  }
  .history-filters>.control-field:first-child {
    flex-basis:100%
  }
  .character-card-heading {
    display:grid;
    grid-template-columns:52px minmax(0,1fr) 40px;
    gap:10px
  }
  .character-portrait,.portrait-placeholder {
    width:52px;
    height:52px;
    grid-column:1;
    grid-row:1/3
  }
  .character-identity {
    grid-column:2;
    grid-row:1
  }
  .character-realm {
    grid-column:2;
    grid-row:2
  }
  .character-trash {
    grid-column:3;
    grid-row:1
  }
  .character-card h2 {
    font-size:21px
  }
  .benchmark-line {
    flex-wrap:wrap
  }
  .benchmark-report {
    margin-left:46px
  }
  .option-heading {
    flex-wrap:wrap
  }
  .comparison-dps {
    align-items:flex-start
  }
  .card {
    padding:18px
  }
  .comparison-option {
    padding:18px 0
  }
  .option-editor {
    padding:14px
  }
  .downloads {
    gap:12px
  }
  .private-tag {
    display:none
  }
}
@media(max-width:480px) {
  .workspace {
    padding:0 16px
  }
  .sidebar {
    padding:14px 16px;
    gap:4px
  }
  .sidebar .brand {
    flex-basis:calc(100% - 65px);
    font-size:20px
  }
  .sidebar-bottom {
    order:0
  }
  .sidebar .nav-item {
    order:1;
    font-size:11px;
    gap:6px;
    padding:8px 6px
  }
  .topbar {
    font-size:9px
  }
  h1 {
    font-size:28px
  }
  .page-heading p {
    font-size:12px
  }
  .library-row {
    flex-wrap:wrap
  }
  .library-row>.control-field {
    flex-basis:100%
  }
  .field-row {
    gap:12px
  }
  .lookup-option form {
    flex-direction:column
  }
  .section-heading {
    gap:10px
  }
  .comparison-dps strong {
    font-size:18px
  }
  .dps-hero strong {
    font-size:40px
  }
  .login-shell {
    margin:24px auto;
    padding:16px
  }
  .login-card {
    padding:22px
  }
  .history-pages {
    flex-wrap:wrap
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .refresh-spinning {
    animation:none
  }
}
.job-evidence {
  margin-top:14px
}
.result-card .section-heading {
  margin-bottom:16px
}
.account-add {
  padding:0 0 22px;
  margin-bottom:22px;
  border-bottom:1px solid var(--border)
}
.account-add .armory-import>summary {
  font-size:17px
}
.account-add .library-row {
  max-width:900px
}
.account-add .armory-import .field-help {
  margin-top:10px
}
.account-add .armory-import h3 {
  display:none
}
.character-card .character-realm {
  line-height:1.5
}

.results-table {min-width:680px;}
.results-table th:first-child {min-width:190px;}
.history-table {min-width:680px;}
.mobile-build-delta,.mobile-table-help {display:none;}
@media(max-width:600px) {
  .mobile-build-delta {display:block;font-size:11px;margin-top:4px;white-space:nowrap;}
  .mobile-table-help {display:block;font-size:12px;color:var(--muted);margin-bottom:8px;}
}

.analysis-notes {margin-top:16px;}
.analysis-notes p {margin-top:10px;}
.login-card>.error {color:var(--error-text);}
/* Contain table painting so native controls cannot expand the mobile canvas. */
.table-scroll {
  contain:paint;
}
@media(max-width:600px) {
  .result-card,.job-card,.history-card,.key-card {
    padding:20px 0;
  }
  .results-table {
    table-layout:fixed;
  }
  .results-table th:first-child {
    width:220px;
  }
  .results-table th.numeric {
    width:115px;
  }
}


/* Dark is the default; the light palette remains an explicit user preference. */
:root:not([data-theme="light"]) {
  color-scheme:dark;
  --bg:#191718;
  --panel:#242122;
  --surface:#2c2829;
  --border:#494144;
  --text:#f0e9df;
  --muted:#b9aea6;
  --accent:#e5a5b1;
  --accent-hover:#8a394d;
  --accent-soft:#38252b;
  --positive:#a5ccb1;
  --negative:#f0aaa1;
  --disabled-bg:#302b2d;
  --disabled-text:#aaa09b;
  --disabled-border:#494144;
  --rail:#211d1f;
  --rail-hover:#30292c;
  --control-border:#77686e;
  --placeholder:#b2a69f;
  --control-hover:#b9a5ac;
  --error-border:#82544f;
  --error-bg:#382623;
  --error-text:#f0b9af;
  --table-head:#302a2c;
  --warning-bg:#382f21;
  --warning-text:#e0c58c;
  --success-bg:#24332a;
}
:root:not([data-theme="light"]) .primary:not(:disabled) {
  background:#732b3b;
  border-color:#b66a7d;
}
:root:not([data-theme="light"]) .primary:hover:not(:disabled) {
  background:var(--accent-hover);
}
:root:not([data-theme="light"]) .class-warrior { --class-ink:#c79c6e; }
:root:not([data-theme="light"]) .class-paladin { --class-ink:#f58cba; }
:root:not([data-theme="light"]) .class-hunter { --class-ink:#abd473; }
:root:not([data-theme="light"]) .class-rogue { --class-ink:#fff569; }
:root:not([data-theme="light"]) .class-priest { --class-ink:#fff; }
:root:not([data-theme="light"]) .class-death_knight { --class-ink:#ec8c9d; }
:root:not([data-theme="light"]) .class-shaman { --class-ink:#83b8f1; }
:root:not([data-theme="light"]) .class-mage { --class-ink:#69ccf0; }
:root:not([data-theme="light"]) .class-warlock { --class-ink:#b7a6e7; }
:root:not([data-theme="light"]) .class-monk { --class-ink:#00ff96; }
:root:not([data-theme="light"]) .class-druid { --class-ink:#ff9d4d; }
:root:not([data-theme="light"]) .class-demon_hunter { --class-ink:#d49aeb; }
:root:not([data-theme="light"]) .class-evoker { --class-ink:#7bc8b5; }

.theme-toggle { min-height:40px; padding:7px 12px; font-size:12px; letter-spacing:0; }
.login-shell>.theme-toggle { position:absolute; top:20px; right:20px; }

.vault-shortcut { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; border-bottom:1px solid var(--border); }
.vault-shortcut h2 { font-size:16px; }
.vault-entry { padding:16px 0; border-bottom:1px solid var(--border); }
@media (max-width:600px) { .vault-shortcut { align-items:flex-start; flex-direction:column; gap:10px; } }