:root {
  --ink: #211b18;
  --muted: #746b64;
  --paper: #f5f0e7;
  --card: rgba(255, 253, 248, 0.9);
  --line: #d9cdbd;
  --copper: #a14f2a;
  --copper-dark: #75371f;
  --gold: #c89b3c;
  --teal: #246c68;
  --violet: #76559b;
  --danger: #a23f42;
  --shadow: 0 16px 40px rgba(76, 54, 38, 0.09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #e9e0d3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 4%, rgba(200,155,60,.20), transparent 25%),
    radial-gradient(circle at 92% 28%, rgba(36,108,104,.13), transparent 22%),
    linear-gradient(135deg, #eee6da, #f8f4ec 45%, #e9dfd1);
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid rgba(117, 87, 63, .18);
  background: rgba(250, 247, 240, .74);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 10;
}

h1, h2, h3, p { margin: 0; }
h1 { font-family: Georgia, serif; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.03em; }
h2 { font-family: Georgia, serif; font-size: 27px; }
h3 { font-size: 17px; }

.eyebrow {
  color: var(--copper);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  margin-bottom: 6px;
}

.wallet {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffaf0;
  box-shadow: 0 8px 25px rgba(83,54,30,.07);
}
.wallet-icon { color: var(--gold); font-size: 27px; }
.wallet small, .wallet strong { display: block; }
.wallet small { color: var(--muted); font-size: 11px; }
.wallet strong { font-variant-numeric: tabular-nums; }

.layout {
  max-width: 1480px;
  margin: 0 auto;
  padding: 30px clamp(18px, 4vw, 54px) 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 26px;
  align-items: start;
}

.workspace, .forge-panel { min-width: 0; display: grid; gap: 20px; }
.forge-panel { position: sticky; top: 118px; max-height: calc(100vh - 130px); overflow-y: auto; padding-right: 4px; }

.card {
  background: var(--card);
  border: 1px solid rgba(131, 102, 79, .22);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.item-picker-card {
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: end;
}

.field { display: grid; gap: 7px; margin-top: 17px; }
.field-help { color: var(--muted); font-size: 10px; line-height: 1.4; }
.field.grow { flex: 1; margin: 0; min-width: 160px; }
label, legend { font-size: 12px; color: var(--muted); font-weight: 700; }
input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fffdf8;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}
input:focus, select:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(161,79,42,.12); }

.quick-actions { display: flex; gap: 7px; flex-wrap: wrap; }
button {
  border: 0;
  border-radius: 11px;
  padding: 10px 13px;
  font-weight: 750;
  color: var(--ink);
  background: #e9e0d5;
}
button:hover:not(:disabled) { filter: brightness(.97); transform: translateY(-1px); }
button:disabled { opacity: .42; cursor: not-allowed; }
.primary {
  width: 100%;
  padding: 14px;
  color: white;
  background: linear-gradient(135deg, var(--copper), var(--copper-dark));
  box-shadow: 0 9px 22px rgba(117,55,31,.23);
}
.secondary { background: #eee5d9; border: 1px solid #dfd1c1; }
.ghost { background: transparent; border: 1px solid var(--line); }
.small { font-size: 11px; padding: 6px 9px; }
.full { width: 100%; }
.icon-button { padding: 6px 9px; font-size: 17px; }

.item-heading { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(250px, .9fr) minmax(250px, 1fr); align-items: end; padding: 8px 4px; gap: 18px; }
.chips { display: flex; gap: 7px; margin-bottom: 7px; }
.chip { background: #e6c98d; color: #5e431e; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 800; }
.chip.muted { background: #ddd5ca; color: #655e57; }
.rank-controls { min-width: 0; display: grid; gap: 5px; }
.rank-controls.compact { align-self: end; }
.rank-buttons { display: flex; gap: 6px; flex-wrap: nowrap; }
.rank-buttons button { min-width: 0; padding: 8px 10px; white-space: nowrap; font-size: 10px; }
.rank-buttons #rankUpButton { flex: 1 1 auto; }
.rank-buttons #resetRankButton { flex: 0 1 auto; }
.rank-help { min-width: 0; min-height: 14px; display: flex; align-items: center; gap: 6px; }
.rank-notice { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.rank-warning { flex: 0 0 auto; color: var(--danger); background: #fae8e6; border-radius: 999px; padding: 2px 6px; font-size: 8px; line-height: 1.25; white-space: nowrap; }
.potential-box { width: min(310px, 45%); display: grid; gap: 5px; }
.potential-box > span { color: var(--muted); font-size: 12px; }
.potential-box strong { font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: #ded5ca; border-radius: 999px; overflow: hidden; }
.bar i { height: 100%; display: block; width: 0; background: linear-gradient(90deg, var(--teal), #54a49e); transition: width .3s; }
.bar i.over-cap { background: linear-gradient(90deg, var(--danger), #dc7775); }
.disassembly-indicator {
  margin-top: 4px; padding: 8px 10px; border: 1px solid #d9cdbf; border-radius: 10px;
  background: rgba(255,253,248,.72); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
}
.disassembly-indicator > span { color: var(--muted); font-size: 11px; }
.disassembly-indicator strong { color: var(--teal); font-size: 13px; font-variant-numeric: tabular-nums; }
.disassembly-indicator small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }

.reserve-card { padding: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.reserve-orb {
  width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  border: 1px solid rgba(118,85,155,.35);
  background: radial-gradient(circle at 35% 30%, #eee4ff, #b89dcc 62%, #76559b);
  box-shadow: inset 0 0 18px rgba(255,255,255,.55), 0 8px 25px rgba(118,85,155,.25);
  color: #322047;
}
.reserve-orb > span { font-size: 25px; font-weight: 900; }
.reserve-orb small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.reserve-orb small span { font-size: inherit; font-weight: 800; }
.reserve-info { display: grid; gap: 10px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.status { color: var(--muted); font-size: 11px; background: #eee7dc; border-radius: 999px; padding: 5px 9px; }
.bar.reserve i { background: linear-gradient(90deg, #624486, #a98bc7); }
.reserve-split { display: flex; gap: 18px; color: var(--muted); font-size: 11px; flex-wrap: wrap; }
.reserve-split b { color: var(--ink); }
.reserve-buttons { display: grid; gap: 6px; }

.stats-card, .comparison-card { padding: 20px; }
.legend { font-size: 11px; color: var(--muted); display: flex; gap: 7px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.natural { background: var(--teal); }.dot.over { background: var(--gold); }.dot.exo { background: var(--violet); }
.stats-instruction { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.stat-family { margin-top: 18px; }
.stat-family > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 9px; }
.stat-family h4 { margin: 0; font-size: 13px; }
.stat-family header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.count-chip { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--muted); background: #eee7dc; font-size: 9px; font-weight: 800; }
.stat-separator { display: flex; align-items: center; gap: 10px; margin: 22px 0 4px; color: var(--violet); font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.stat-separator::before, .stat-separator::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #cdbbd9); }
.stat-separator::after { background: linear-gradient(90deg, #cdbbd9, transparent); }
.stat-list { display: grid; grid-template-columns: 1fr; gap: 7px; }
.stat-list.effects { margin-top: 7px; }
.exotic-tabs { display: flex; gap: 6px; margin: 10px 0 8px; padding-bottom: 2px; overflow-x: auto; }
.exotic-tab { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); background: #f7f1e9; color: var(--muted); font-size: 9px; }
.exotic-tab b { min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-content: center; border-radius: 999px; background: #e4d9cd; color: var(--ink); font-size: 8px; }
.exotic-tab.active { color: var(--violet); border-color: #a98cc0; background: #f3eafa; box-shadow: inset 0 0 0 1px rgba(118,85,155,.12); }
.exotic-tab.active b { color: white; background: var(--violet); }
.exotic-tab-panel { max-height: 520px; overflow-y: auto; padding: 2px 4px 3px 0; scrollbar-color: #c2b1cc transparent; }
.exotic-tab-panel.empty { min-height: 70px; }
.stat-row {
  width: 100%; border: 1px solid #e0d6c9; border-radius: 13px; padding: 10px 12px; background: #fffdf8;
  display: grid; gap: 8px; text-align: left; box-shadow: none; transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.stat-row:hover:not(:disabled) { transform: translateY(-1px); border-color: #c2a98f; filter: none; }
.stat-row.selected { border-color: var(--copper); background: #fff7ee; box-shadow: inset 3px 0 0 var(--copper), 0 5px 14px rgba(117,55,31,.08); }
.stat-row.active-exotic { background: #fbf7ff; }
.stat-row.selected.active-exotic { background: #fff4f0; }
.stat-row-head, .stat-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-row .label { font-weight: 800; font-size: 12px; }
.stat-row .value { font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
.stat-row small { color: var(--muted); font-size: 9px; }
.stat-row .badges { text-align: right; min-height: 16px; flex: 0 0 auto; }
.badge { border-radius: 999px; padding: 3px 6px; font-size: 8px; font-weight: 850; margin-left: 3px; }
.badge.natural { background: #d8ece9; color: #185650; }.badge.available { background: #eee8f3; color: #6b5b77; }
.badge.over { background: #f2dfaa; color: #725410; }.badge.exo { background: #e2d3ef; color: #563476; }.badge.lock { background: #d4ebe8; color: #185650; }
.stat-gauge { display: grid; gap: 4px; }
.gauge-track { position: relative; height: 7px; margin: 3px 4px 0; border-radius: 999px; background: #e6ddd2; }
.gauge-track > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #62aaa5); }
.exotic-line .gauge-track > i, .effect-line .gauge-track > i { background: linear-gradient(90deg, var(--violet), #ad8cc9); }
.gauge-marker { position: absolute; top: -3px; width: 2px; height: 13px; background: #8f8175; transform: translateX(-1px); border-radius: 2px; }
.gauge-marker.natural-min { background: #5e8b87; }.gauge-marker.natural-max { background: var(--teal); }
.gauge-marker.line-cap { width: 3px; background: var(--violet); }
.gauge-marker.configuration-cap { width: 3px; height: 17px; top: -5px; background: var(--gold); box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.gauge-current { position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: var(--copper); box-shadow: 0 1px 4px rgba(64,35,19,.35); transform: translate(-50%, -50%); }
.gauge-labels { display: flex; justify-content: space-between; gap: 8px; color: #8b8178; font-size: 8px; font-variant-numeric: tabular-nums; }
.line-risks { display: grid; grid-template-columns: auto minmax(150px, 1fr) minmax(150px, 1fr); align-items: stretch; gap: 6px; padding-top: 7px; border-top: 1px solid #eee4d8; }
.line-risks-label { align-self: center; max-width: 72px; color: var(--muted); font-size: 8px; font-weight: 800; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
.risk-badge { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 7px; border-radius: 8px; border: 1px solid transparent; background: #faf3e1; color: #704e15; }
.risk-badge.failure { background: #faebea; color: #843337; }
.risk-badge.protected { background: #e8f3f1; color: #1c5e59; }
.risk-badge.none { opacity: .68; background: #f2eee8; color: var(--muted); }
.risk-badge i { font-size: 8px; font-style: normal; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.risk-badge b { font-size: 10px; font-variant-numeric: tabular-nums; }
.risk-badge small { grid-column: 1 / -1; color: currentColor; font-size: 7px; line-height: 1.3; opacity: .82; }
.line-risks.unavailable { grid-template-columns: auto 1fr; color: var(--muted); font-size: 8px; }
.line-risks.unavailable small { align-self: center; }
.effects-grid { display: none; }

.forge-card { padding: 22px; }
.forge-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mobile-sheet-close, .mobile-forge-dock, .mobile-forge-backdrop { display: none; }
.ruleset-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 17px 0 8px; }
.ruleset { display: flex; align-items: center; text-align: left; gap: 9px; border: 1px solid var(--line); background: #faf6ef; padding: 9px; }
.ruleset > b { width: 27px; height: 27px; display: grid; place-content: center; border-radius: 8px; background: #e7ded1; }
.ruleset span { font-size: 11px; font-weight: 800; }
.ruleset small { display: block; color: var(--muted); font-weight: 500; margin-top: 2px; }
.ruleset.active { border-color: var(--copper); background: #fff2e8; box-shadow: inset 0 0 0 1px rgba(161,79,42,.16); }
.ruleset.active > b { background: var(--copper); color: white; }

.selected-line-card { margin-top: 15px; padding: 12px 13px; border: 1px solid #decfbe; border-radius: 13px; background: linear-gradient(135deg, #fffdf8, #f7eee4); display: grid; gap: 3px; }
.selected-line-card > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.selected-line-card strong { font-family: Georgia, serif; font-size: 18px; }
.selected-line-card small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.action-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.action-mode-toggle.single { grid-template-columns: 1fr; }
.action-mode { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); background: #faf6ef; text-align: left; }
.action-mode > b { width: 25px; height: 25px; display: grid; place-content: center; border-radius: 8px; background: #e8dfd3; }
.action-mode span { font-size: 10px; font-weight: 850; }
.action-mode small { display: block; color: var(--muted); font-size: 8px; font-weight: 500; margin-top: 1px; }
.action-mode.active { border-color: var(--copper); background: #fff1e6; box-shadow: inset 0 0 0 1px rgba(161,79,42,.12); }
.action-mode.active > b { color: white; background: var(--copper); }
.layer-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.layer-button { padding: 8px; border: 1px solid var(--line); background: #faf6ef; text-align: left; }
.layer-button b, .layer-button small { display: block; }
.layer-button b { font-size: 10px; }.layer-button small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.layer-button.active { border-color: var(--violet); background: #f2eafa; }

.intensity-field { border: 0; padding: 0; margin: 17px 0 0; }
.intensity-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 7px; }
.intensity-button { border: 1px solid var(--line); background: #faf6ef; padding: 9px 5px; font-size: 11px; }
.intensity-button small { display: block; color: var(--muted); margin-top: 2px; }
.intensity-button.active { background: #e7d8cb; border-color: var(--copper); color: var(--copper-dark); }
.forge-action { margin-top: 11px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: stretch; }
.forge-action .primary { min-height: 48px; }
.forge-cost { min-width: 118px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 11px; background: #fffaf0; display: grid; align-content: center; gap: 2px; }
.forge-cost span { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.forge-cost strong { color: var(--copper-dark); font-size: 12px; font-variant-numeric: tabular-nums; }
.preview-card { margin: 12px 0 0; padding: 12px; background: #eee7dc; border-radius: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.preview-card div { display: grid; gap: 2px; }
.preview-card .wide { grid-column: 1 / -1; }
.preview-card span { color: var(--muted); font-size: 10px; }
.preview-card strong { font-size: 12px; }
.preview-card small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.intensity-button:disabled { opacity: .4; cursor: not-allowed; }
.risk-preview { margin: 4px 0 0; border: 1px solid #dfd3c4; border-radius: 13px; overflow: hidden; background: #fffdf8; }
.risk-title { padding: 10px 11px; background: #eee7dc; }
.risk-title span, .risk-title small { display: block; }
.risk-title b { font-size: 12px; }
.risk-title small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.outcome-grid { display: grid; }
.outcome-card { border-top: 1px solid #e8ded2; padding: 11px; display: grid; gap: 9px; }
.outcome-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.outcome-card > header > span { min-width: 0; display: grid; gap: 2px; }
.outcome-card > header b { font-size: 11px; }
.outcome-card > header small { color: var(--muted); font-size: 8px; line-height: 1.25; }
.outcome-probability { flex: 0 0 auto; min-width: 68px; padding: 6px 8px; border-radius: 9px; color: white; background: #73685e; font-size: 17px; font-variant-numeric: tabular-nums; text-align: center; }
.outcome-card.clean { background: #f4faf7; }
.outcome-card.clean .outcome-probability { background: var(--teal); }
.outcome-card.compensated { background: #fffaf0; }
.outcome-card.compensated .outcome-probability { color: #684810; background: #e9c977; }
.outcome-card.failure { background: #fff6f5; }
.outcome-card.failure .outcome-probability { background: var(--danger); }
.outcome-changes { display: grid; gap: 5px; }
.outcome-change { min-width: 0; display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; border: 1px solid transparent; }
.outcome-change .change-sign { width: 23px; height: 23px; display: grid; place-content: center; border-radius: 7px; font-size: 15px; font-weight: 900; }
.outcome-change > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.outcome-change b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.outcome-change small { color: currentColor; font-size: 8px; line-height: 1.25; opacity: .74; }
.outcome-change > strong { font-size: 10px; font-variant-numeric: tabular-nums; }
.outcome-change.gain { color: #165d47; border-color: #c9e5d9; background: #e8f6ef; }
.outcome-change.gain .change-sign { color: white; background: #2e8a6d; }
.outcome-change.loss { color: #833438; border-color: #efcdcf; background: #fae8e9; }
.outcome-change.loss .change-sign { color: white; background: #b84a50; }
.outcome-change.protected { color: #3c5f5b; border-color: #cfe1df; background: #edf6f5; }
.outcome-change.protected .change-sign { color: white; background: #6f9995; }
.outcome-section-label { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.outcome-note, .outcome-empty { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.risk-scenario { padding: 10px 11px; border-top: 1px solid #e8ded2; display: grid; gap: 7px; }
.risk-scenario > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.risk-scenario > header b { font-size: 10px; }
.risk-scenario > header span { color: var(--copper-dark); font-size: 10px; font-weight: 850; }
.risk-row { display: grid; gap: 3px; padding: 6px 7px; border-radius: 8px; background: #f7f2ea; }
.risk-row.designated { background: #fff0df; box-shadow: inset 0 0 0 1px rgba(161,79,42,.25); }
.risk-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; }
.risk-row-head span { min-width: 0; }
.risk-row-head b { font-size: 10px; }
.risk-row-head i, .risk-row-head em { display: inline-block; margin-left: 4px; border-radius: 999px; padding: 1px 4px; font-size: 8px; font-style: normal; }
.risk-row-head i { color: var(--muted); background: #e9e1d6; }
.risk-row-head em { color: var(--copper-dark); background: #efd1b5; font-weight: 850; }
.risk-row-head strong { font-variant-numeric: tabular-nums; }
.risk-meter { height: 4px; overflow: hidden; border-radius: 999px; background: #e2d9ce; }
.risk-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--copper), #d18a62); }
.risk-row small, .risk-absorption, .risk-empty { color: var(--muted); font-size: 9px; line-height: 1.35; }
.risk-empty { padding: 3px 0; }
.action-message { min-height: 18px; margin-top: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.action-message.success { color: var(--teal); }.action-message.failure { color: var(--danger); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 20px; display: grid; place-items: center; background: rgba(33,27,24,.52); backdrop-filter: blur(6px); }
.confirmation-dialog { width: min(460px, 100%); padding: 24px; border: 1px solid rgba(131,102,79,.28); border-radius: 20px; background: #fffaf2; box-shadow: 0 26px 80px rgba(33,27,24,.28); }
.confirmation-dialog h3 { font-family: Georgia, serif; font-size: 23px; }
.confirmation-dialog > p:not(.eyebrow) { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.confirmation-actions { margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; }
.confirmation-actions .primary { width: auto; }

.parameters-card { padding: 18px; }
.parameters-card summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.parameters-card summary::-webkit-details-marker { display: none; }
.parameters-card summary b { display: block; }
.helper { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 13px 0; }
.parameter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.parameter { display: grid; gap: 4px; }
.parameter label { font-size: 10px; }
.parameter input { padding: 7px 8px; font-size: 12px; }

.history-card { padding: 17px; }
.history-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; max-height: 290px; overflow: auto; }
.history-list > li { padding: 9px 10px; background: #f6f1e9; border-left: 3px solid #c6b5a2; border-radius: 7px; font-size: 11px; line-height: 1.35; }
.history-list > li.clean, .history-list > li.success { border-left-color: var(--teal); }
.history-list > li.rank-up { border-left-color: var(--gold); }
.history-list > li.fail, .history-list > li.failure, .history-list > li.structural_reject { border-left-color: var(--danger); }
.history-details { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; }
.history-details li { color: var(--muted); font-size: 10px; }
.history-operation li:first-child { color: var(--ink); font-weight: 700; }
.history-reserve { margin-top: 8px; padding: 8px 9px; border: 1px solid #d9c9e8; border-radius: 8px; background: #f7f1fb; }
.history-reserve strong { display: block; color: #67458a; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.history-reserve ul { list-style: none; padding: 0; margin: 5px 0 0; display: grid; gap: 3px; }
.history-reserve li { color: #5f5268; font-size: 10px; }
.history-reserve li:first-child, .history-reserve li:last-child { color: var(--ink); font-weight: 750; }
.history-accounting { padding-top: 5px; border-top: 1px solid #dfd5ca; }

.comparison-legend { display: flex; gap: 18px; color: var(--muted); font-size: 11px; margin: 14px 0 10px; }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }.swatch.a { background: var(--teal); }.swatch.b { background: var(--gold); }
.comparison-table { display: grid; gap: 8px; }
.comparison-row { display: grid; grid-template-columns: minmax(150px,1.4fr) repeat(3, minmax(70px, .55fr)); align-items: center; gap: 8px; padding: 9px; border-radius: 10px; background: #f7f2ea; font-size: 11px; }
.comparison-row.header { color: var(--muted); background: transparent; font-weight: 800; }
.comparison-cell strong, .comparison-cell span { display: block; }.comparison-cell span { color: var(--muted); font-size: 9px; margin-top: 2px; }

.hidden { display: none !important; }

@media (max-width: 1250px) {
  .layout { grid-template-columns: 1fr; }
  .forge-panel { position: static; max-height: none; overflow: visible; grid-template-columns: 1fr 1fr; }
  .forge-card { grid-row: span 2; }
  .item-heading { grid-template-columns: minmax(200px, 1fr) minmax(230px, .85fr) minmax(240px, 1fr); }
}

@media (max-width: 900px) {
  .item-picker-card { align-items: stretch; flex-wrap: wrap; }
  .item-picker-card .quick-actions { flex-basis: 100%; }
  .forge-panel { grid-template-columns: 1fr; }
  .forge-card { grid-row: auto; }
  .item-heading { grid-template-columns: 1fr 1fr; }
  .potential-box { width: 100%; grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body.mobile-forge-open { overflow: hidden; }
  .topbar { position: static; align-items: flex-start; gap: 10px; padding: 12px; }
  .topbar > div:first-child { min-width: 0; }
  .topbar .eyebrow { max-width: 180px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .topbar h1 { max-width: 180px; font-size: 20px; line-height: 1.05; }
  .wallet { flex: 0 0 auto; gap: 5px; padding: 5px 6px; border-radius: 12px; }
  .wallet small { display: none; }
  .wallet strong { font-size: 12px; }
  .wallet-icon { font-size: 18px; }
  .wallet .icon-button { width: 44px; height: 44px; padding: 0; }
  .layout, .workspace, .forge-panel, .item-picker-card, .item-heading, .card { min-width: 0; width: 100%; }
  .layout { padding: 14px 10px calc(92px + env(safe-area-inset-bottom)); gap: 14px; }
  .workspace, .forge-panel { gap: 14px; }
  .card { border-radius: 15px; }
  .item-picker-card { align-items: stretch; flex-direction: column; padding: 12px; }
  .item-picker-card .field { width: 100%; margin: 0; }
  .item-picker-card .quick-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .quick-actions button { min-width: 0; min-height: 44px; padding: 9px 7px; }
  #randomRollButton { grid-column: 1 / -1; }
  .item-heading { grid-template-columns: 1fr; align-items: stretch; }
  .item-heading h2 { font-size: 23px; line-height: 1.1; overflow-wrap: anywhere; }
  .chips { flex-wrap: wrap; }
  .rank-buttons { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .rank-buttons button { min-height: 44px; font-size: 9px; white-space: normal; }
  .rank-help { flex-wrap: wrap; }
  .rank-notice { white-space: normal; }
  .potential-box { width: 100%; }
  .disassembly-indicator { grid-template-columns: minmax(0, 1fr) auto; }
  .reserve-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .reserve-orb { width: 64px; height: 64px; }
  .reserve-orb > span { font-size: 20px; }
  .reserve-info .section-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  .reserve-info .status { padding: 3px 7px; }
  .reserve-buttons { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .reserve-buttons button { min-height: 44px; }
  .stats-card, .comparison-card { padding: 13px; }
  .stats-card > .section-title { align-items: flex-start; flex-direction: column; gap: 8px; }
  .legend { flex-wrap: wrap; }
  .stat-family > header { align-items: flex-start; gap: 8px; }
  .stat-row { padding: 10px; }
  .stat-row-head, .stat-row-foot { gap: 7px; }
  .gauge-labels { display: grid; grid-template-columns: 1fr 1fr; }
  .gauge-labels span:nth-child(even) { text-align: right; }
  .line-risks { grid-template-columns: 1fr; }
  .line-risks-label { grid-column: auto; max-width: none; }
  .risk-badge { min-height: 44px; }
  .exotic-tab { min-height: 44px; }
  .exotic-tab-panel { max-height: none; overflow: visible; }
  .forge-panel { grid-template-columns: 1fr; }
  .forge-card {
    position: fixed; z-index: 90; inset: auto 0 0; width: 100%; max-height: calc(100dvh - 10px);
    grid-row: auto; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; pointer-events: none;
    padding: 16px 14px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    opacity: 0; transform: translateY(105%); transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
  }
  body.mobile-forge-open .forge-card {
    visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0); transition-delay: 0s;
  }
  .mobile-sheet-close { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: grid; place-content: center; font-size: 24px; }
  .mobile-forge-backdrop {
    position: fixed; z-index: 80; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0;
    background: rgba(33,27,24,.54); backdrop-filter: blur(4px);
  }
  body.mobile-forge-open .mobile-forge-backdrop { display: block; }
  .mobile-forge-dock {
    position: fixed; z-index: 70; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px;
    min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1px solid rgba(255,255,255,.26); border-radius: 16px;
    color: white; background: linear-gradient(135deg, var(--copper), var(--copper-dark));
    box-shadow: 0 14px 32px rgba(62,31,19,.34); text-align: left;
  }
  .mobile-forge-dock span { min-width: 0; display: grid; gap: 2px; }
  .mobile-forge-dock small { color: #f0d3c3; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
  .mobile-forge-dock strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-forge-dock > b { flex: 0 0 auto; padding: 7px 9px; border-radius: 10px; color: #3f291d; background: #f4ddbc; font-size: 11px; }
  body.mobile-forge-open .mobile-forge-dock { visibility: hidden; pointer-events: none; }
  .ruleset, .action-mode, .intensity-button { min-height: 48px; }
  .ruleset { padding: 8px 7px; }
  .ruleset span { font-size: 10px; }
  .ruleset small { font-size: 8px; }
  .forge-action { grid-template-columns: minmax(0, 1fr) minmax(104px, auto); }
  .outcome-change { grid-template-columns: 23px minmax(0, 1fr); }
  .outcome-change > strong { grid-column: 2; }
  .parameter-grid { grid-template-columns: 1fr; }
  .comparison-row { grid-template-columns: minmax(100px, 1fr) repeat(3, minmax(44px, 54px)); gap: 5px; padding: 7px 5px; font-size: 9px; }
  .confirmation-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; }
}

@media (max-width: 360px) {
  .topbar .eyebrow { max-width: 150px; }
  .topbar h1 { max-width: 150px; font-size: 18px; }
  .wallet strong { font-size: 11px; }
  .ruleset-toggle, .action-mode-toggle { grid-template-columns: 1fr; }
  .intensity-buttons { gap: 5px; }
  .intensity-button { padding-inline: 3px; font-size: 10px; }
  .forge-action { grid-template-columns: 1fr; }
  .forge-cost { min-height: 44px; }
}

.offline-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 14px; color: var(--muted); }
#offlineStatus[data-ready="true"] { color: var(--teal); }
.offline-action { padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fffaf0; color: var(--copper-dark); font-size: 14px; }
.offline-action[hidden] { display: none; }
.offline-action:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }