/* Shared tool components, state visibility and chart interaction. v0.7 composition: redesign.css. */
:root {
  color-scheme: dark;
  --bg-0:#070e17; --bg-1:#0a1420;
  --surface-1:#0d1927; --surface-2:#111f30; --surface-3:#18283d;
  --border:#233951; --border-strong:#3c5676;
  --text-primary:#e9efff; --text-secondary:#b4c9e8; --text-muted:#8ba4c2;
  --accent:#a78bfa; --accent-bright:#c1a5ff; --accent-soft:#9563f51a;
  --positive:#32e4a2; --negative:#ff677f; --warning:#f3c756; --info:#39bffc;
  --radius-sm:7px; --radius-md:11px; --radius-lg:15px;
  --shadow-card:0 6px 20px #00000024,inset 0 1px 0 #b8d1ff05;
  --shadow-glow:0 0 18px #9760ff26,inset 0 0 12px #8e52ff12;
  --bg:var(--bg-0); --surface:var(--surface-1); --text:var(--text-primary);
  --radius:var(--radius-lg); --shadow:var(--shadow-card);
  --space:16px; --control-height:40px;
}
* {box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--bg-0)}
body {margin:0;background:radial-gradient(ellipse at 60% 0,#0b2840,transparent 48%),radial-gradient(ellipse at 100% 80%,#23153b40,transparent 40%),var(--bg-0);color:var(--text);font:14px/1.5 'Segoe UI',Arial,sans-serif}
button,input,select,textarea {font:inherit}
a {color:var(--accent-bright);text-decoration:none}
a:hover {color:var(--text-primary)}
button,a,input,select,textarea,summary {outline-offset:3px}
:focus-visible {outline:2px solid var(--accent-bright)}
button {display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--control-height);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:linear-gradient(180deg,var(--surface-3),var(--surface-1));color:var(--text-primary);padding:8px 15px;cursor:pointer;transition:background 160ms,border-color 160ms,box-shadow 160ms,transform 120ms}
button:hover {border-color:var(--accent);background:var(--surface-3)}
button:active {transform:translateY(1px)}
button.primary,a.primary {background:linear-gradient(100deg,#6536b9,#412174);border-color:var(--accent);box-shadow:var(--shadow-glow);color:#fff;font-weight:600}
button.primary:hover,a.primary:hover {background:linear-gradient(100deg,#7848d0,#573191);box-shadow:0 0 20px #a169ff40}
button.quiet,button.ghost {background:transparent;border-color:transparent;color:var(--text-secondary)}
button.quiet:hover {background:var(--surface-2);border-color:var(--border)}
button.danger,button[data-delete-key],button[data-tech-delete],button[data-rate-delete] {color:var(--negative)}
button.danger.primary {background:#48202d;border-color:var(--negative);box-shadow:none}
button:disabled {opacity:.45;cursor:default}
.icon {width:23px;height:23px;flex:0 0 auto;vertical-align:middle}
.brand {display:flex;align-items:center;gap:11px;padding:0 12px 26px;color:#b9c8ff;font-size:24px;font-weight:750;letter-spacing:.25px;line-height:1.2}
#breadcrumb {color:var(--text-primary);font-size:12px;letter-spacing:.1px}
.topbar-status {display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:18px;font-size:11px}
#last-updated {color:var(--text-muted);padding-left:15px;border-left:1px solid var(--border-strong)}
#save-status {color:var(--text-secondary)}
#view {padding:24px 0 12px;min-height:calc(100vh - 103px);outline:none}
.page-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:23px}
h1,h2,h3,p {margin-top:0}
h1 {font-size:30px;letter-spacing:-.6px;line-height:1.2;margin-bottom:8px;font-weight:650}
h2 {font-size:17px;line-height:1.3;margin-bottom:12px;font-weight:650;color:#d8e4ff}
h3 {font-size:13px;margin-bottom:10px;color:var(--text-secondary)}
p {color:var(--text-muted);margin-bottom:13px}
small {color:var(--text-muted);font-size:11px}
.eyebrow {display:block;color:var(--accent);font-size:10px;letter-spacing:1.8px;font-weight:650;margin-bottom:9px}
.page-head p {margin:0;font-size:13px}
.card {background:linear-gradient(120deg,#1425386b,transparent 70%),linear-gradient(180deg,var(--surface-1),#0a131e);border:1px solid var(--border);border-radius:var(--radius-lg);padding:21px;box-shadow:var(--shadow-card);margin-bottom:var(--space);min-width:0}
.card.hero {background:radial-gradient(ellipse at 95% 0,#54306a24,transparent 65%),linear-gradient(140deg,#112137,var(--surface-1));border-color:var(--border-strong)}
.card-head {display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
.card-head h2 {margin:0}
.grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space)}
.grid.three {grid-template-columns:repeat(3,minmax(0,1fr))}
.grid>.card {margin-bottom:0}
.stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.metric {background:linear-gradient(150deg,#14263a,#0b1521);border:1px solid var(--border);border-radius:var(--radius-md);padding:15px 17px;min-width:0;position:relative;overflow:hidden}
.metric:after {content:'';position:absolute;bottom:0;left:16px;right:16px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.5}
.metric>span {display:block;font-size:11px;color:var(--text-secondary);margin-bottom:8px}
.metric strong {display:block;font-size:26px;letter-spacing:-.5px;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.15}
.metric small {display:block;margin-top:7px;font-size:10px}
.positive {color:var(--positive)}
.negative,.error {color:var(--negative)}
.warning {color:var(--warning)}
.metric.positive:after {background:linear-gradient(90deg,var(--positive),transparent)}
.metric.negative:after {background:linear-gradient(90deg,var(--negative),transparent)}
.badge {display:inline-flex;align-items:center;border:1px solid #9974de4d;background:#7153a317;color:var(--accent-bright);padding:4px 8px;border-radius:5px;font-size:10px;line-height:1.3;font-weight:650;letter-spacing:.35px;max-width:100%}
.badge.positive {color:var(--positive);background:#16b9810c;border-color:#16b98145}
.badge.negative {color:var(--negative);background:#ff677f0c;border-color:#ff677f45}
.badge.warning {color:var(--warning);background:#f3c7560b;border-color:#f3c75640}
.fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}
.fields.three {grid-template-columns:repeat(3,minmax(0,1fr))}
label {display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px;color:var(--text-secondary)}
input,select,textarea {width:100%;min-width:0;min-height:var(--control-height);background:linear-gradient(180deg,#091421,#0b1725);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;transition:border-color 160ms,box-shadow 160ms}
input:hover,select:hover,textarea:hover {border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus {outline:1px solid var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder {color:#70849d}
input:user-invalid {border-color:var(--negative)}
input[type=checkbox] {width:16px;height:16px;min-height:0;accent-color:var(--accent);flex:0 0 auto}
label.check {flex-direction:row;align-items:center;gap:10px;margin:14px 0}
select option {background:var(--surface-1)}
.actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.actions>a {font-size:12px;padding:8px 4px}
.note {margin-top:16px;padding:12px 15px;border:1px solid #2b40585c;border-left:2px solid #8b72ba;border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#111e2b70;color:var(--text-muted);font-size:12px;line-height:1.7}
.error:empty {display:none}
.error:not(:empty) {margin-top:14px;background:#ff677f0a;border:1px solid #ff677f50;border-radius:var(--radius-sm);padding:10px 13px}
.result {margin-top:20px}
[id$="-result"]>.card>h2 {font-size:30px;color:var(--text-primary);margin-bottom:12px;letter-spacing:-.6px}
[id$="-result"] .stats {margin:18px 0}
.table-wrap {overflow:auto;max-width:100%;border:1px solid var(--border);border-radius:var(--radius-md);margin-top:13px}
table {border-collapse:collapse;width:100%;font-size:12px}
th {text-align:left;color:var(--text-muted);background:#14253a8a;font-size:10px;font-weight:600;letter-spacing:.6px;padding:11px 13px;border-bottom:1px solid var(--border)}
td {padding:12px 13px;border-bottom:1px solid #25395070;vertical-align:middle;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
tr:last-child td {border-bottom:0}
tbody tr:hover {background:#2843651c}
td button {min-height:28px;padding:4px 8px;font-size:11px;margin:2px}
.empty {display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:135px;gap:7px;padding:18px 13px;color:var(--text-muted);background:radial-gradient(ellipse at 50% 70%,#553c7b10,transparent 70%);border:1px dashed #38506a90;border-radius:var(--radius-md);text-align:center;font-size:12px}
.empty>.icon {width:32px;height:32px;opacity:.55;color:var(--accent);margin-bottom:3px}
.empty p {margin:0;max-width:320px}
.empty a {font-size:11px}
.compact-empty {min-height:65px}
.subrow {background:#09142070;border:1px solid var(--border);border-radius:var(--radius-md);padding:13px;margin-top:12px}
.subrow .fields {grid-template-columns:1.4fr 1fr}
.subgrade {margin-top:10px;color:var(--text-muted);font-size:11px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-height:22px}
.intel {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}
.intel strong {display:block;font-size:12px}
.intel p {margin:0;font-size:12px}
.intel:last-child {border-bottom:0}
.intel .quiet {flex:0 0 auto;min-height:25px;padding:2px 7px}
progress {appearance:none;display:block;width:100%;height:7px;margin:10px 0 13px;border:0;border-radius:20px;background:var(--surface-3);overflow:hidden}
progress::-webkit-progress-bar {background:var(--surface-3)}
progress::-webkit-progress-value {background:linear-gradient(90deg,#7859d2,var(--accent-bright));border-radius:20px}
progress::-moz-progress-bar {background:var(--accent)}
.thresholds {display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--text-muted)}
.tool-links {display:flex;flex-wrap:wrap;gap:9px}
.tool-links a {border:1px solid var(--border);border-radius:6px;padding:8px 12px}
.row-title {display:flex;justify-content:space-between;gap:12px;align-items:center}
.spaced {margin-top:20px}
.full {grid-column:1/-1}
.muted {color:var(--text-muted)}
.history-list {max-height:360px;overflow:auto}
details {margin-top:16px}
summary {color:var(--text-secondary);cursor:pointer;font-size:12px}
summary::marker {color:var(--accent)}
details[open]>summary {margin-bottom:17px;color:var(--accent-bright)}
.summary-hint {color:var(--text-muted);font-size:11px;font-weight:400;margin-left:12px}
.app-foot {min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--border);color:var(--text-muted);font-size:11px}
.app-foot b {font-weight:400;margin:0 7px;color:var(--accent)}
dialog {background:linear-gradient(140deg,#17283c,var(--surface-1));color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-lg);width:min(92vw,540px);padding:29px;box-shadow:0 25px 100px #000a,0 0 40px #9a6af513}
dialog::backdrop {background:#020710cf;backdrop-filter:blur(5px)}
dialog h2 {font-size:22px}
dialog p {white-space:pre-line;line-height:1.7}
dialog .actions {justify-content:flex-end;border-top:1px solid var(--border);padding-top:20px}
#toast {position:fixed;bottom:25px;right:25px;padding:13px 20px;background:#182239;border:1px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-card);display:none;z-index:10}
#toast.show {display:block}
#storage-warning:not(:empty) {margin-top:15px;border:1px solid var(--warning);border-radius:var(--radius-md);background:#f3c7560c;padding:14px;color:var(--warning)}
/* Dashboard: visual accents are decoration, never fabricated progress. */
.page-dashboard>.page-head {display:none}
.hero-profile {position:relative;z-index:1;display:flex;align-items:center;gap:15px}
.hero-emblem {display:grid;place-items:center;width:65px;height:75px;background:#111a30c9;border:1px solid #836aaea8;border-radius:12px;box-shadow:0 0 20px #8152d926;color:#c4a5ff}
.hero-emblem .icon {width:44px;height:55px;fill:#895fd044}
.panel-title {display:flex;gap:12px;align-items:center;margin-bottom:12px;min-width:0}
.panel-title>.icon {width:26px;height:26px;color:#acbaff;filter:drop-shadow(0 0 6px #748aff35)}
.panel-title h2 {font-size:17px;margin:0;letter-spacing:.1px}
.panel-title p {margin:1px 0 0;font-size:11px;color:var(--text-muted)}
.panel-title>.badge {margin-left:auto;font-size:8px}
.panel-link {margin-left:auto;font-size:11px;white-space:nowrap}
.build-stat {--stat-color:var(--accent);border:1px solid var(--border);border-radius:var(--radius-md);background:linear-gradient(145deg,#18233880,#081420);display:flex;align-items:center;gap:12px;min-width:0;padding:13px 12px 18px;position:relative}
.build-stat>div {min-width:0}
.stat-icon {color:var(--stat-color);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--stat-color) 22%,transparent))}
.stat-icon .icon {width:28px;height:28px}
.stat-label {color:var(--text-secondary);font-size:11px;display:block;line-height:1.3}
.build-stat strong {display:block;font-size:23px;line-height:1.15;font-weight:650;font-variant-numeric:tabular-nums;margin-top:5px;overflow-wrap:anywhere}
.stat-accent {position:absolute;height:3px;left:12px;right:12px;bottom:7px;border-radius:3px;background:linear-gradient(90deg,var(--stat-color),color-mix(in srgb,var(--stat-color) 15%,transparent))}
.stat-damage,.stat-critDamage {--stat-color:var(--negative)}
.stat-health,.stat-lifesteal {--stat-color:var(--positive)}
.stat-critChance,.stat-coins {--stat-color:var(--warning)}
.stat-rangedDamage {--stat-color:var(--info)}
.stat-hammers {--stat-color:#ffaf50}
.dashboard-mid {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.resource-stats {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.resource-stats .build-stat {padding:10px 10px 13px;gap:10px}
.resource-stats .build-stat strong {font-size:21px}
.resource-stats .stat-icon .icon {width:27px;height:27px}
.resource-stats .stat-accent {opacity:.5;height:2px}
.research-feature {display:flex;align-items:center;gap:12px;min-width:0}
.research-emblem {display:grid;place-items:center;width:44px;height:48px;border:1px solid #ca9c6580;border-radius:12px;background:#95643820;color:#f3bf72;flex:0 0 auto}
.research-emblem .icon {width:26px;height:32px}
.research-feature strong {display:block;font-size:12px;overflow-wrap:anywhere}
.research-feature small {display:block;font-size:10px}
.research-feature .positive {font-size:12px}
.research-duration {margin-left:auto;text-align:right}
.research-panel progress::-webkit-progress-value {background:linear-gradient(90deg,#398ae3,#a0e5ff)}
.research-panel .empty {min-height:84px;flex-direction:row;flex-wrap:wrap}
.research-panel .empty>.icon {width:23px;height:23px}
.gear-matchup {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:11px;align-items:center}
.gear-identity {display:flex;gap:10px;align-items:center;min-width:0}
.gear-identity strong {display:block;font-size:12px;overflow-wrap:anywhere}
.gear-identity small {display:block;font-size:10px;margin-top:4px}
.item-frame {width:46px;height:48px;display:grid;place-items:center;border:1px solid #9b6bce;background:radial-gradient(ellipse,#8051b53b,#2512353b);border-radius:7px;color:#d1b6ff;box-shadow:inset 0 0 12px #7d38cc26;flex:0 0 auto}
.item-frame .icon {width:30px;height:30px}
.versus {font-size:12px;color:var(--accent);font-weight:600}
.verdict-strip {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:7px;margin-top:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.verdict-strip small {font-size:9px}
.gear-summary-grid {display:grid;grid-template-columns:1.2fr 1fr;gap:15px;margin-top:11px}
.change-list {margin:0;font-size:11px}
.change-list>div {display:flex;justify-content:space-between;gap:8px;margin-bottom:5px}
.change-list dt {color:var(--text-secondary)}
.change-list dd {margin:0;text-align:right;font-variant-numeric:tabular-nums}
.roll-summary {padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:#0a152280}
.roll-summary strong {display:block;font-size:11px;margin-top:7px}
.roll-summary p {font-size:11px;margin:5px 0}
.roll-summary .badge {font-size:8px;padding:3px 5px}
.roll-summary small {font-size:9px}
.roll-summary progress {margin:8px 0;height:5px}
.mini-note {font-size:10px;line-height:1.6;margin:11px 0 0}
.build-indices,.saved-history {margin-top:0}
/* Tool hierarchy: selectors and controls retain their original identities. */
#gear-form>.grid {position:relative;gap:30px}
#gear-form>.grid:after {content:'VS';position:absolute;left:50%;top:20px;transform:translateX(-50%);background:var(--bg-1);border:1px solid var(--border-strong);color:var(--accent);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:10px;font-weight:700;pointer-events:none}
#gear-form>.grid>.card {border-top:2px solid #798cc5}
#gear-form>.grid>.card:last-child {border-top-color:var(--accent)}
.item-card-title {display:flex;gap:12px;align-items:center;margin-bottom:18px}
.item-card-title .icon {width:30px;height:30px;color:var(--accent)}
.item-card-title .eyebrow {margin:0}
#gear-form>section.card {border-color:var(--border-strong)}
#gear-form .primary {min-width:180px}
#gear-result .hero>h2 {font-size:34px}
#gem-result .hero>h2,#advisor-result .hero>h2 {color:var(--accent-bright)}
#gem-result .hero>h3 {margin-top:25px;padding-top:20px;border-top:1px solid var(--border-strong);color:var(--text-primary);font-size:18px}
#odds-result .hero>h2 {font-size:39px;color:var(--text-primary)}
#odds-result .table-wrap tbody tr:nth-child(3) {background:#8860d210}
#odds-result progress {height:9px}
#grade-form select,#grade-form input {min-height:52px;font-size:17px}
#grade-result {display:flex;flex-direction:column;justify-content:center}
#grade-result>h2 {font-size:clamp(28px,3vw,44px);color:var(--accent-bright);letter-spacing:-.8px;margin:22px 0}
#grade-result>progress {height:13px;margin-top:25px}
#grade-result .thresholds {font-size:10px;margin-top:4px}
.quality-thresholds {position:relative;height:32px;display:block;margin-bottom:8px}
.quality-thresholds span {position:absolute;top:0;transform:translateX(-50%);font-size:9px;white-space:nowrap}
.quality-thresholds span:before {content:'';position:absolute;top:-20px;left:50%;width:1px;height:8px;background:var(--text-secondary);opacity:.55}
.quality-thresholds span:nth-child(1) {left:50%}
.quality-thresholds span:nth-child(2) {left:65%}
.quality-thresholds span:nth-child(3) {left:80%}
.quality-thresholds span:nth-child(4) {left:90%;top:13px}
.quality-thresholds span:nth-child(4):before {top:-33px}
.quality-thresholds span:nth-child(5) {left:100%;transform:translateX(-100%)}
.break-item-pair {display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.break-item-pair span {display:flex;align-items:center;gap:9px;color:var(--text-secondary)}
.break-item-pair b {font-size:11px;color:var(--accent)}
.prerequisite-note {display:block;margin:7px 0;font-size:10px;max-width:380px}
#break-result .hero>h2 {font-size:clamp(32px,4vw,56px);color:var(--accent-bright);letter-spacing:-1px}
.page-techPlanner>.hero {border-color:#726094}
.page-techPlanner>.hero tbody tr:first-child {background:#8c68d419}
.page-techPlanner>.hero tbody tr:first-child td:first-child {border-left:3px solid var(--accent);color:var(--accent-bright);font-weight:700}
.page-techPlanner .table-wrap progress {min-width:100px}
#tech-form,#research-model-form {border-top:2px solid #6d619a}
.settings-layout {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.settings-section {border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;background:#09162270;min-width:0}
.settings-section h2 {display:flex;align-items:center;gap:10px;font-size:16px}
.settings-section h2 .icon {color:var(--accent);width:21px;height:21px}
.settings-section.wide {grid-column:1/-1}
#power-history-danger {border-color:var(--negative)}
#power-danger-title {color:var(--negative)}
.cap-rule {border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;background:var(--bg-1)}
.cap-rule .check {margin:0 0 11px;font-size:12px}
.weight-profile {border-top:1px solid var(--border);padding-top:14px;margin-top:14px}
.settings-save {position:sticky;bottom:12px;padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:#0d1927f5;box-shadow:var(--shadow-card);z-index:2}
.forge-path {display:grid;gap:6px;margin:18px 0;padding:14px;border:1px solid var(--border);border-radius:var(--radius-md);background:#0a152280}
.forge-step {display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:12px}
.forge-step>span {min-width:52px;font-weight:650;color:var(--text-primary)}
.tier-track {display:flex;gap:7px;flex-wrap:wrap}
.tier-dot {width:12px;height:12px;border-radius:50%;border:1px solid var(--border-strong);background:transparent}
.tier-dot.paid {background:var(--accent);border-color:var(--accent-bright);box-shadow:0 0 8px #a78bfa66}
.tier-dot.open {background:#18283d}
.forge-arrow {color:var(--accent);padding-left:18px;font-size:14px;line-height:1}
#forge-cost-status h2 {font-size:28px}
#forge-cost-form .check {margin-top:8px}
.is-hidden {display:none}
.summon-tabs {display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.summon-tabs button {display:inline-flex;align-items:center;gap:8px}
.summon-hero h2 {font-size:clamp(36px,5vw,64px);color:var(--accent-bright);letter-spacing:-1px;margin:4px 0 6px}
.summon-hero .eyebrow {letter-spacing:1.6px;color:var(--text-secondary);font-size:11px}
.summon-copy-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.summon-copy-grid div {padding:12px;border:1px solid var(--border);border-radius:var(--radius-md);background:#0a152280}
.summon-copy-grid span {display:block;color:var(--text-secondary);font-size:11px}
.summon-copy-grid strong {font-size:22px;color:var(--text-primary)}
.copy-buttons {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.copy-buttons span {color:var(--text-secondary);font-size:12px}
.summon-path {display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:12px 0}
.summon-step {min-width:92px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:#0a152280}
.summon-step.odds-change {border-color:var(--accent);box-shadow:0 0 12px #a78bfa33}
.summon-step strong,.summon-step span,.summon-step small {display:block}
.summon-step small {color:var(--text-secondary)}
.summon-arrow {align-self:center;color:var(--accent)}
.summon-curve {width:100%;max-width:640px;height:auto;color:var(--accent-bright);margin-bottom:8px}
.summon-curve .curve-grid {stroke:#2a3b5a;stroke-width:1}
.summon-tip {display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;border-radius:50%;border:1px solid var(--border-strong);color:var(--text-secondary);font-size:10px;cursor:help;vertical-align:middle}
.summon-form .check {margin-top:6px}
.pvp-builds {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.pvp-versus {position:relative}
.pvp-vs {position:absolute;left:50%;top:32px;transform:translateX(-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#121729;border:1px solid var(--accent);color:var(--accent-bright);font-size:10px;font-weight:750}
#pvp-fields {border:0;padding:0;margin:0;min-width:0}
#pvp-fields:disabled {opacity:.65}
.pvp-build,.pvp-controls,.pvp-intro,.pvp-progress,.pvp-result-hero,.pvp-history {margin-bottom:18px}
.pvp-build h2 {display:flex;align-items:center;gap:8px;font-size:18px}
.pvp-build .card-head {flex-wrap:wrap}
.pvp-build .actions {gap:6px;flex-wrap:wrap}
.pvp-build .actions button {padding:7px 10px;font-size:11px}
.pvp-build .check {margin-top:18px;line-height:1.6}
.pvp-field-group {border-top:1px solid var(--border);padding-top:15px;margin-top:18px}
.pvp-field-group h3 {font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-secondary);margin:0 0 12px}
.pvp-slot {padding:12px;margin-top:10px;border:1px solid var(--border);border-radius:8px;background:#070f1c66}
.pvp-slot h4 {margin:0 0 10px;color:var(--accent-bright);font-size:12px}
.pvp-probabilities {display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:20px;padding:24px 0}
.pvp-probabilities span {display:block;letter-spacing:2px;font-size:11px;color:var(--text-secondary)}
.pvp-probabilities strong {display:block;font-size:clamp(28px,4.4vw,64px);line-height:1.2;letter-spacing:-2px;font-weight:750}
.pvp-probabilities>div:first-child strong {color:var(--accent-bright)}
.pvp-probabilities>div:last-child strong {color:var(--text-secondary)}
.pvp-result-hero {border-color:#8062cf88;background:linear-gradient(125deg,#20173399,#111e3088 55%)}
.pvp-interval {display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:13px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.pvp-interval strong {font-size:13px;color:var(--accent-bright)}
.pvp-interval span {font-size:12px;color:var(--text-secondary)}
#pvp-results>.card,#pvp-results>.grid {margin-bottom:18px}
#pvp-results table small {display:block;max-width:400px;line-height:1.5;margin-top:6px;color:var(--text-secondary)}
.pvp-registry {display:grid;gap:8px;margin-top:14px}
.pvp-registry>details {border:1px solid var(--border);padding:12px;border-radius:8px}
.pvp-registry summary {display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.pvp-preset {margin-bottom:10px}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pvp-empty {padding:32px}
.page-pvpSimulator .card {min-width:0}
@media(max-width:1100px) {.pvp-builds{grid-template-columns:1fr}.pvp-vs{display:none}.pvp-probabilities{gap:12px}.pvp-build .fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px) {.pvp-build .fields{grid-template-columns:1fr}.pvp-probabilities strong{letter-spacing:-1px;font-size:28px}.pvp-probabilities span{font-size:9px;letter-spacing:1px}}
@media(max-width:1199px) {
  .summon-copy-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v0.5: restrained portfolio typography, scoped to Power Performance. */
.power-performance {--power-color:var(--accent-bright);padding:28px 30px 18px;background:linear-gradient(135deg,#0c1723,#080f18 65%);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;overflow:hidden}
.power-performance.power-positive {--power-color:#55d76b}
.power-performance.power-negative {--power-color:#ff7159}
.power-card-heading,.power-headline {display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.power-card-heading h2 {font-size:20px;font-weight:450;letter-spacing:-.4px;margin:5px 0 0}
.power-card-heading .eyebrow {font-size:9px;letter-spacing:2px;color:var(--text-muted)}
.power-history-action {display:flex;align-items:center;gap:9px;border:0;background:transparent;box-shadow:none;font-size:12px;color:var(--text-secondary)}
.power-history-action .icon {width:15px;height:15px}
.power-headline {margin-top:27px;align-items:center}
.power-label {display:block;color:var(--text-secondary);font-size:12px;font-weight:400;margin-bottom:3px}
#power-current {display:block;font-size:clamp(42px,4.5vw,64px);font-weight:400;line-height:1.14;letter-spacing:-2.5px;color:#f5f8ff;overflow-wrap:anywhere}
.power-change {display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-top:11px;color:var(--power-color);font-size:19px;font-weight:550;letter-spacing:-.4px}
.power-change small {font-size:12px;color:var(--text-secondary);font-weight:400;letter-spacing:0}
.power-status {display:grid;gap:10px;text-align:right;justify-items:end}
.power-status small {max-width:230px;font-size:10px;color:var(--text-muted)}
.power-context {margin:18px 0 0;color:var(--text-secondary);font-size:11px}
.power-chart {display:block;width:100%;height:260px;margin-top:18px;overflow:visible;outline-offset:4px;touch-action:pan-y}
.power-line {stroke:var(--power-color);stroke-width:2.3;fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.power-area {fill:url(#power-fill);stroke:none}
.power-fill-top {stop-color:var(--power-color);stop-opacity:.09}
.power-fill-bottom {stop-color:var(--power-color);stop-opacity:0}
.power-milestones {fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.power-dot {fill:var(--power-color);stroke:var(--bg-0);stroke-width:2;vector-effect:non-scaling-stroke}
.power-cursor {stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 5;opacity:.55;vector-effect:non-scaling-stroke}
.power-interaction {fill:transparent;pointer-events:all;cursor:crosshair}
.power-detail {min-height:42px;padding:9px 0;color:var(--text-secondary);font-size:11px;line-height:1.6;overflow-wrap:anywhere}
.power-date-axis {display:flex;justify-content:space-between;gap:14px;color:var(--text-muted);font-size:10px;padding:0 7px}
.power-date-axis span:last-child {text-align:right}
.power-ranges {display:flex;align-items:center;gap:12px;margin:22px 0;padding-bottom:21px;border-bottom:1px solid var(--border)}
.power-ranges button {min-width:49px;min-height:35px;padding:6px 12px;border:1px solid transparent;border-radius:8px;background:transparent;box-shadow:none;color:var(--power-color);font:600 12px system-ui,sans-serif}
.power-ranges button:hover {border-color:var(--power-color)}
.power-ranges button[aria-pressed="true"] {background:var(--power-color);color:#07120e}
.power-summary {display:grid;grid-template-columns:1fr 1.4fr .65fr;gap:22px;margin-bottom:20px}
.power-summary>div {display:grid;gap:7px;align-content:start}
.power-summary span {font-size:11px;color:var(--text-secondary)}
.power-summary strong {font-size:23px;font-weight:450;letter-spacing:-.6px;overflow-wrap:anywhere}
.power-summary small,.power-helper {font-size:10px;color:var(--text-muted);line-height:1.6}
.power-empty {min-height:150px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:22px;color:var(--text-secondary);text-align:center}
.power-empty p {margin:0;font-size:16px;font-weight:450}
.power-empty small {color:var(--text-muted);font-size:12px}
.power-empty-symbol .icon {width:27px;height:27px;color:var(--accent)}
.power-empty button {margin-top:5px}
.power-first-observation {min-height:0;align-items:flex-start;padding:20px 0 0;gap:5px;text-align:left}
.power-first-observation .power-empty-symbol {display:none}
.power-history {border-top:1px solid var(--border);margin-top:18px;padding-top:14px}
.power-history summary {font-size:12px;font-weight:450;cursor:pointer;color:var(--text-secondary)}
.power-history td {font-size:11px}
.power-history .table-wrap {margin:15px 0}
.power-history .note {font-size:11px}
.power-history .actions {align-items:center}
@media(max-width:700px) {
  .power-performance {padding:20px 16px 16px}
  .power-headline {align-items:flex-start}.power-status{max-width:140px}
  .power-change{font-size:16px;gap:6px}.power-summary{grid-template-columns:1fr 1fr;gap:18px}
  .power-summary strong{font-size:19px}.power-ranges{gap:4px;justify-content:space-between}.power-ranges button{min-width:0;padding:6px 10px}
  .power-chart{height:220px}.power-history-action{font-size:11px}.power-status small{font-size:9px}
}
:where(.page-petAscension) > .card, .page-petAscension #ascension-results > .card { margin-bottom: 18px; }
.page-petAscension .ascension-summary { border-color: var(--accent); }
.ascension-buffers { margin: 12px 0; align-items: center; }
.ascension-buffers span { color: var(--text-muted); font-size: .85rem; }
.ascension-plan { border-top: 1px solid var(--border, #30364d); padding: 12px 0; }
.ascension-record { max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
#dashboard-pet-ascension small { display: block; margin-top: 5px; }
.hero-emblem.forge-tier-muted { --emblem-fill:#84919d16; color:#929ca7; border-color:#67717d80; background:#14202a; box-shadow:none; }
.hero-emblem.forge-tier-bronze { --emblem-fill:#bd814731; color:#d6a475; border-color:#b57c48; background:linear-gradient(145deg,#433325,#19232c 70%); box-shadow:inset 0 1px #e9c39a44,0 0 12px #a2662426; }
.hero-emblem.forge-tier-silver { --emblem-fill:#d6e3ef35; color:#e0e9f1; border-color:#a8bacb; background:linear-gradient(140deg,#546777,#192b3a 60%,#435565); box-shadow:inset 0 1px #fff8,0 0 15px #b2d6f024; }
.hero-emblem.forge-tier-gold { --emblem-fill:#f5ce5c38; color:#f6d77a; border-color:#d2ab4a; background:linear-gradient(140deg,#625126,#28271f 65%,#534526); box-shadow:inset 0 1px #fff0b575,0 0 19px #e7b84638; }
.hero-emblem.forge-tier-unassigned { --emblem-fill:#a2b0ba18; color:#b7c2cb; border:1px dashed #91a0ae; background:#172530; box-shadow:none; }
.hero-emblem[data-forge-tier] .icon { fill:var(--emblem-fill); }
.current-build .build-stat strong { white-space:nowrap; overflow-wrap:normal; }
/* v0.6.3 account editing follows the existing card and field system. */
.profile-section{padding:18px 0;border-top:1px solid var(--border)}.profile-section summary{font-weight:600}.profile-save-actions{padding-top:20px;border-top:1px solid var(--border)}

#pvp-account-status:empty{display:none}