:root {
  color-scheme: light;
  --bg: #f4ece3;
  --panel: #fffaf3;
  --panel-2: #fbf4ea;
  --line: #e8ddd0;
  --text: #2d302a;
  --muted: #73756d;
  --accent: #d6a13c;
  --accent-2: #e3b85f;
  --dominant: #c58b25;
  --tertiary: #9aa17a;
  --good: #73825f;
  --danger: #b8614e;
  --surface-soft: #fbf4ea;
  --surface-muted: #f6ecdf;
  --surface-hover: #f4e6d2;
  --surface-strong: #fffaf3;
  --focus-ring: rgba(197,139,37,.13);
  --soft-border: #eadfd3;
  --card-bg: rgba(255,250,243,.94);
  --card-soft: rgba(255,250,243,.76);
  --shadow: 0 18px 46px rgba(91,61,45,.10), 0 3px 12px rgba(91,61,45,.05), inset 0 1px 0 rgba(255,255,255,.84);
  --shadow-soft: 0 10px 28px rgba(91,61,45,.07), 0 2px 7px rgba(91,61,45,.04), inset 0 1px 0 rgba(255,255,255,.78);
  --radius: 18px;
  --control-radius: 12px;
  --workshop-red: #c58b25;
  --workshop-paper: #fffaf3;
  --workshop-muted: #73756d;
  --workshop-line: #e8ddd0;
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.58), transparent 29%),
    radial-gradient(circle at 84% 26%, rgba(197,139,37,.07), transparent 34%),
    radial-gradient(circle at 48% 82%, rgba(255,255,255,.32), transparent 32%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fffaf3; }

.topbar,
main { width: min(1120px, calc(100% - 40px)); }
.topbar {
  min-height: 58px;
  padding: 12px 0;
  align-items: center;
  border-bottom: 0;
}
.topbar-brand { display: flex; align-items: baseline; gap: 8px; }
.topbar-brand .eyebrow { order: 2; color: var(--muted); font-size: .68rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.topbar h1 { margin: 0; color: var(--dominant); font-size: 1.16rem; font-weight: 700; letter-spacing: -.02em; }
.topbar p { display: none; }
.topbar-meta { display: flex; gap: 8px; }
.eyebrow,.rank,.workshop-slot-label { color: var(--dominant); }

.pill,.status {
  border: 1px solid var(--soft-border);
  border-radius: var(--control-radius);
  background: rgba(255,250,243,.72);
  color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.panel {
  border: 1px solid rgba(232,221,208,.92);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.product-tabs {
  width: fit-content;
  margin: 12px auto 26px;
  padding: 4px;
  border: 1px solid var(--soft-border);
  border-radius: 14px;
  background: rgba(255,250,243,.72);
  box-shadow: var(--shadow-soft);
}
.product-tab {
  border-radius: 10px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .04em;
}
.product-tab.is-active {
  border-color: rgba(197,139,37,.18);
  background: rgba(214,161,60,.12);
  color: #9b6813;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

input,select {
  border-color: var(--soft-border);
  border-radius: var(--control-radius);
  background: rgba(255,252,247,.82);
  color: var(--text);
}
input:hover,select:hover { border-color: #dbc9b5; background: #fffdf9; }
input:focus,select:focus { border-color: rgba(197,139,37,.52); background: #fffdf9; box-shadow: 0 0 0 3px var(--focus-ring); }
input[type="checkbox"],input[type="radio"] { accent-color: var(--dominant); }

.primary {
  border-radius: var(--control-radius);
  background: var(--accent);
  color: #fffdf8;
  box-shadow: 0 12px 26px rgba(197,139,37,.18), inset 0 1px 0 rgba(255,255,255,.22);
}
.primary:hover:not(:disabled) { background: var(--accent-2); transform: translateY(-1px); }
.secondary { border-radius: var(--control-radius); }

.optimizer-v2-hero {
  padding: 20px 24px;
  border-left: 0;
  background: rgba(255,250,243,.82);
  box-shadow: var(--shadow-soft);
}
.optimizer-v2-hero h2 { margin-bottom: 6px; font-size: 1.02rem; }
.optimizer-v2-hero p { margin: 0; font-size: .78rem; }
.optimizer-v2-controls .panel { border-left-color: rgba(232,221,208,.92); }
.optimizer-v2-controls .panel:focus-within { border-left-color: rgba(197,139,37,.34); }
.optimizer-control-group { border-top-color: var(--soft-border); }
.optimizer-choice,.optimizer-segmented,.optimizer-constraint-chip { border-color: var(--soft-border); border-radius: 12px; background: rgba(255,252,247,.66); }
.optimizer-choice:hover { border-color: #dbc9b5; background: #fffaf2; transform: translateY(-1px); }
.optimizer-segmented input:checked + span { background: rgba(214,161,60,.16); color: #9b6813; box-shadow: inset 0 -2px 0 var(--dominant); }
.optimizer-constraint-chip { background: rgba(214,161,60,.10); color: #76551a; }
.optimizer-refinement-context { border-color: rgba(197,139,37,.22); border-left-color: var(--dominant); border-radius: 12px; background: rgba(214,161,60,.08); color: #76551a; }
#optimizer-diagnostics { border-left-color: #ddcdbd; border-radius: 12px; background: rgba(255,250,243,.64); color: var(--muted); }

#optimizer-results { grid-template-columns: 1fr !important; gap: 28px; }
.optimizer-result-card.optimizer-build-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-color: rgba(232,221,208,.94);
  border-radius: 18px;
  background: rgba(255,250,243,.95);
  box-shadow: var(--shadow);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.optimizer-result-card.optimizer-build-card:hover { transform: translateY(-1px); box-shadow: 0 24px 54px rgba(91,61,45,.12), 0 8px 20px rgba(91,61,45,.05); }
.optimizer-build-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:15px; border-bottom:1px solid var(--soft-border); }
.optimizer-build-header h3 { margin:2px 0 0; color:var(--text); font-size:1.28rem; font-weight:650; letter-spacing:-.02em; }
.optimizer-build-resources { display:flex; gap:8px; }
.optimizer-build-resources>span { min-width:64px; display:grid; justify-items:center; padding:8px 11px; border:1px solid rgba(197,139,37,.20); border-radius:12px; background:rgba(214,161,60,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.82); }
.optimizer-build-resources strong { color:#9b6813; font-size:1.12rem; line-height:1; }
.optimizer-build-resources small { margin-top:4px; color:var(--muted); font-size:.61rem; letter-spacing:.07em; }

.optimizer-build-layout { display:grid; grid-template-columns:minmax(200px,.72fr) minmax(470px,1.55fr) minmax(290px,1fr); gap:18px; align-items:stretch; }
.optimizer-build-summary,.optimizer-build-inspector { min-width:0; border:1px solid var(--soft-border); border-radius:16px; background:rgba(255,252,247,.68); box-shadow: var(--shadow-soft); }
.optimizer-build-summary { padding:17px; }
.optimizer-build-summary-card + .optimizer-build-summary-card { margin-top:17px; padding-top:17px; border-top:1px solid var(--soft-border); }
.optimizer-kicker { display:block; margin-bottom:8px; color:#b37716; font-size:.66rem; font-weight:760; letter-spacing:.09em; text-transform:uppercase; }
.optimizer-damage-main { display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.optimizer-damage-main strong { color:#2d302a; font-family:"Fraunces", Georgia, serif; font-size:clamp(2.4rem,3.4vw,3.7rem); font-weight:500; letter-spacing:-.045em; line-height:.92; font-variant-numeric:tabular-nums; }
.optimizer-damage-main span { max-width:120px; color:var(--muted); font-size:.66rem; line-height:1.3; }
.optimizer-compact-facts { display:grid; gap:3px; margin:0; }
.optimizer-compact-facts>div { display:flex; justify-content:space-between; gap:10px; padding:5px 0; }
.optimizer-compact-facts dt { color:var(--muted); font-size:.70rem; }
.optimizer-compact-facts dd { margin:0; color:var(--text); font-size:.72rem; font-weight:650; text-align:right; }
.optimizer-damage-axes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:12px; }
.optimizer-damage-axes>span { display:grid; gap:2px; padding:8px 9px; border:1px solid rgba(154,161,122,.22); border-radius:11px; background:rgba(154,161,122,.07); }
.optimizer-damage-axes small { color:var(--muted); font-size:.60rem; }
.optimizer-damage-axes strong { font-size:.82rem; color:#59614b; }
.optimizer-build-note { margin:11px 0 0; color:#98998f; font-size:.63rem; line-height:1.45; }
.optimizer-build-summary-line { margin:0 0 8px; color:#675c4d; font-size:.73rem; }
.optimizer-change-list { list-style:none; display:grid; gap:4px; margin:0; padding:0; }
.optimizer-change-list li { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:4px 0; color:var(--muted); font-size:.67rem; }
.optimizer-change-list strong { color:#4a4d45; font-weight:650; text-align:right; }

.optimizer-build-equipment { min-width:0; display:grid; }
.optimizer-loadout {
  min-height:548px;
  display:grid;
  grid-template-columns:minmax(118px,138px) minmax(220px,1fr) minmax(118px,138px);
  grid-template-rows:repeat(5,minmax(72px,auto)) auto;
  gap:9px 18px;
  align-items:center;
  padding:20px;
  border:1px solid var(--soft-border);
  border-radius:18px;
  background:radial-gradient(circle at 50% 38%,rgba(214,161,60,.12),transparent 13rem),rgba(255,252,247,.76);
  box-shadow:var(--shadow-soft);
}
.optimizer-loadout-side { display:contents; }
.optimizer-loadout .amulet { grid-column:1; grid-row:1; }
.optimizer-loadout .shield { grid-column:1; grid-row:2; }
.optimizer-loadout .ring-1 { grid-column:1; grid-row:3; }
.optimizer-loadout .belt { grid-column:1; grid-row:4; }
.optimizer-loadout .boots { grid-column:1; grid-row:5; }
.optimizer-loadout .hat { grid-column:3; grid-row:1; }
.optimizer-loadout .weapon { grid-column:3; grid-row:2; }
.optimizer-loadout .ring-2 { grid-column:3; grid-row:3; }
.optimizer-loadout .cape { grid-column:3; grid-row:4; }
.optimizer-loadout .companion { grid-column:3; grid-row:5; }
.optimizer-character-portrait { grid-column:2; grid-row:1/6; min-height:350px; display:grid; place-items:center; align-content:center; gap:12px; color:#c58b25; }
.optimizer-character-portrait svg { width:min(80%,240px); height:auto; overflow:visible; filter:drop-shadow(0 15px 24px rgba(91,61,45,.12)); }
.optimizer-character-portrait svg circle,.optimizer-character-portrait svg path { fill:#eee1ce; stroke:#c9ab78; stroke-width:2; }
.optimizer-character-portrait span { color:#93958c; font-size:.68rem; }
.optimizer-loadout-slot { min-width:0; display:grid; grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; align-items:center; padding:8px; border:1px solid var(--soft-border); border-radius:12px; background:rgba(255,250,243,.88); box-shadow:0 4px 12px rgba(91,61,45,.045),inset 0 1px 0 rgba(255,255,255,.88); transition:transform 140ms ease,box-shadow 140ms ease,border-color 140ms ease; }
.optimizer-loadout-slot:hover { transform:translateY(-1px); border-color:#d9c4a7; box-shadow:0 8px 18px rgba(91,61,45,.07),inset 0 1px 0 rgba(255,255,255,.9); }
.optimizer-loadout-slot-label { grid-column:2; color:#9b9b91; font-size:.53rem; font-weight:700; letter-spacing:.065em; text-transform:uppercase; }
.optimizer-loadout-slot strong { grid-column:2; min-width:0; overflow:hidden; color:#3f423b; font-size:.63rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.optimizer-item-icon,.optimizer-item-icon-placeholder { grid-row:1/span 2; width:56px; height:56px; display:grid; place-items:center; border:1px solid #ede2d6; border-radius:10px; background:#fffdf9; overflow:hidden; }
.optimizer-item-icon img { width:100%; height:100%; object-fit:contain; }
.optimizer-item-icon-placeholder::after { content:'·'; color:#cbbda8; font-size:1.5rem; }
.optimizer-loadout-slot.is-empty { opacity:.48; }
.optimizer-dofus-row { grid-column:1/-1; grid-row:6; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; padding-top:15px; border-top:1px solid var(--soft-border); }
.optimizer-dofus-row .optimizer-loadout-slot { grid-template-columns:46px minmax(0,1fr); padding:6px; }
.optimizer-dofus-row .optimizer-item-icon,.optimizer-dofus-row .optimizer-item-icon-placeholder { width:46px; height:46px; border-radius:9px; }
.optimizer-dofus-row .optimizer-loadout-slot-label { font-size:.49rem; }
.optimizer-dofus-row .optimizer-loadout-slot strong { font-size:.57rem; }

.optimizer-build-inspector { display:grid; align-content:start; }
.optimizer-build-inspector-section { padding:17px; }
.optimizer-build-inspector-section + .optimizer-build-inspector-section { border-top:1px solid var(--soft-border); }
.optimizer-build-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 11px; }
.optimizer-build-stat { min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:7px; padding:6px 0; border-bottom:1px solid rgba(232,221,208,.68); }
.optimizer-build-stat span { overflow:hidden; color:var(--muted); font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.optimizer-build-stat strong { color:#3e413a; font-size:.73rem; font-weight:650; font-variant-numeric:tabular-nums; }
.optimizer-build-stat[data-stat-key="ap"] strong,.optimizer-build-stat[data-stat-key="mp"] strong,.optimizer-build-stat[data-stat-key="crit"] strong,.optimizer-build-stat[data-stat-key="critDamage"] strong,.optimizer-build-stat[data-stat-key="spellDamagePct"] strong { color:#ad7418; }
.optimizer-set-bonus { padding:9px 0; }
.optimizer-set-bonus + .optimizer-set-bonus { border-top:1px solid rgba(232,221,208,.68); }
.optimizer-set-bonus header { display:flex; justify-content:space-between; gap:8px; margin-bottom:7px; }
.optimizer-set-bonus header strong { color:#3f423b; font-size:.70rem; font-weight:650; }
.optimizer-set-bonus header span { color:#b37716; font-size:.66rem; }
.optimizer-set-bonus-stats { display:flex; flex-wrap:wrap; gap:5px; }
.optimizer-set-bonus-stats>span { display:inline-flex; gap:5px; padding:5px 7px; border:1px solid rgba(154,161,122,.22); border-radius:999px; background:rgba(154,161,122,.08); }
.optimizer-set-bonus-stats small { color:#7f866a; font-size:.54rem; }
.optimizer-set-bonus-stats strong { color:#59614b; font-size:.57rem; }
.optimizer-build-empty { margin:0; color:var(--muted); font-size:.69rem; }
.optimizer-build-footer { display:flex; justify-content:flex-end; padding-top:2px; }
.optimizer-build-footer .secondary { border-color:#dfd0be; border-radius:11px; background:rgba(255,252,247,.76); color:#76551a; box-shadow: inset 0 1px 0 rgba(255,255,255,.82); }
.optimizer-build-footer .secondary:hover,.optimizer-build-footer .secondary:focus-visible { border-color:rgba(197,139,37,.36); background:rgba(214,161,60,.12); color:#9b6813; }

@media (max-width:1320px) {
  .optimizer-build-layout { grid-template-columns:minmax(190px,.72fr) minmax(400px,1.45fr); }
  .optimizer-build-inspector { grid-column:1/-1; grid-template-columns:1.4fr 1fr; }
  .optimizer-build-inspector-section + .optimizer-build-inspector-section { border-top:0; border-left:1px solid var(--soft-border); }
}
@media (max-width:980px) {
  .topbar,main { width:min(100% - 28px,760px); }
  .optimizer-build-layout { grid-template-columns:1fr; }
  .optimizer-build-inspector { grid-column:auto; grid-template-columns:1fr; }
  .optimizer-build-inspector-section + .optimizer-build-inspector-section { border-left:0; border-top:1px solid var(--soft-border); }
}
@media (max-width:680px) {
  .topbar-brand .eyebrow { display:none; }
  .optimizer-result-card.optimizer-build-card { padding:14px; }
  .optimizer-build-header { align-items:flex-start; }
  .optimizer-loadout { min-height:0; grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .optimizer-character-portrait { grid-column:1/-1; grid-row:1; min-height:220px; }
  .optimizer-loadout .amulet,.optimizer-loadout .shield,.optimizer-loadout .ring-1,.optimizer-loadout .belt,.optimizer-loadout .boots { grid-column:1; grid-row:auto; }
  .optimizer-loadout .hat,.optimizer-loadout .weapon,.optimizer-loadout .ring-2,.optimizer-loadout .cape,.optimizer-loadout .companion { grid-column:2; grid-row:auto; }
  .optimizer-dofus-row { grid-column:1/-1; grid-row:auto; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .optimizer-build-stat-grid { grid-template-columns:1fr; }
}