/* DB Optimizer. Dark slate, cards on a flat page, blue for what you act on, green for gains; game colours only where the game uses them. */

:root {
	color-scheme: dark;
	--bg: #12151b;
	--bar: #171b22;
	--card: #1c2129;
	--card-hi: #232a34;
	--card-hd: #202630;
	--field: #141821;
	--line: #2c3340;
	--line-soft: #242a35;
	--text: #e9edf3;
	--text-2: #aeb7c4;
	--text-3: #7f8997;
	--accent: #5b9cf6;
	--accent-hi: #7fb3ff;
	--accent-ink: #0a1526;
	--good: #4cc38a;
	--good-ink: #06180f;
	--bad: #f07173;
	--gold: #e8b45a;

	--magic: #86d47a;
	--rare: #6fb1f5;
	--legendary: #e8a85a;

	/* Spell colours by hotbar slot, in this order; checked for colour-blind separation and contrast against --card. */
	--s1: #3987e5;
	--s2: #d95926;
	--s3: #199e70;
	--s4: #c98500;
	--s5: #d55181;
	--s6: #2e8f2e;
	--s7: #9085e9;
	--basic: #6b7483;

	--atk: #e8a14f;          /* attack-scaled damage: orange */
	--exp: #6fa8e6;          /* expertise-scaled damage: blue */
	--unk: #6b7483;          /* unscaled / unknown damage */

	--display: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
	--body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
	--radius: 10px;
	--radius-sm: 6px;
	--page: 1280px;
	--shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 6px 18px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--body);
	font-size: 14px;
	line-height: 1.45;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); letter-spacing: -0.01em; }
h2 { font-size: 0.9375rem; }
h3 { font-size: 0.75rem; font-weight: 700; color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase; }
p { margin: 0; }
a { color: var(--accent-hi); text-underline-offset: 3px; }
a:hover { color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.soft { color: var(--text-2); }
.up { color: var(--good); }
.down { color: var(--bad); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell: the app bar and its tabs ---------- */

.top {
	background: var(--bar);
	border-bottom: 1px solid var(--line-soft);
	position: sticky;
	top: 0;
	z-index: 20;
}
.top-inner {
	max-width: var(--page);
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: stretch;
	gap: 20px;
	min-height: 46px;
}
.wordmark {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}
.wordmark::before { content: ""; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #8e6cf0); }
.wordmark span { color: var(--accent-hi); }
.wordmark small { font-size: 0.75rem; font-weight: 400; color: var(--text-3); margin-left: 2px; }
.rail { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 6px;
	width: 104px;
	justify-content: center;
	text-decoration: none;
	color: var(--text-2);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	font-weight: 600;
}
.rail a:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.rail a.on { color: var(--text); border-bottom-color: var(--accent); }
.rail .n { display: none; }
.rail .t { display: flex; flex-direction: column; line-height: 1.15; align-items: center; max-width: 100%; }
.rail .t small { font-size: 0.6875rem; font-weight: 400; color: var(--text-3); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail a.done .t small { color: var(--good); }

main { flex: 1; width: 100%; max-width: var(--page); margin: 0 auto; padding: 16px 16px 48px; }
.foot {
	max-width: var(--page); width: 100%; margin: 0 auto; padding: 16px 20px;
	border-top: 1px solid var(--line-soft);
	color: var(--text-3); font-size: 0.8125rem;
	display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between;
}
.foot a { color: var(--text-2); }

/* ---------- controls ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 6px 12px;
	border-radius: 7px;
	border: 1px solid var(--line);
	background: var(--card-hi);
	color: var(--text);
	cursor: pointer;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.btn:hover { background: #2a3240; color: var(--text); border-color: #3a4352; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-ink); }
.btn.go { background: var(--good); border-color: var(--good); color: var(--good-ink); padding: 8px 18px; font-size: 0.9375rem; }
.btn.go:hover { filter: brightness(1.08); color: var(--good-ink); }
.btn.small { padding: 4px 9px; font-size: 0.78rem; }
.btn:disabled { opacity: 0.45; cursor: default; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent-hi); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }
.linkbtn:hover { color: var(--text); }

input[type="text"], input[type="search"], input[type="number"], select, textarea {
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 5px 8px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
select { padding-right: 26px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; vertical-align: -2px; }
label.field { display: flex; flex-direction: column; gap: 3px; font-size: 0.75rem; color: var(--text-2); min-width: 0; }
label.check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; color: var(--text); cursor: pointer; line-height: 1.35; }
label.check input { margin-top: 3px; flex: none; }

.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; background: var(--field); max-width: 100%; }
.seg button {
	flex: 1 1 auto; border: 0; background: none; padding: 4px 10px; font-size: 0.8125rem; border-radius: 6px; cursor: pointer; color: var(--text-2); font-weight: 600;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--line); background: var(--field); color: var(--text-2);
	padding: 2px 9px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.75rem; line-height: 1.4;
	font-variant-numeric: tabular-nums; font-family: var(--body);
}
.chip:hover { color: var(--text); background: var(--card-hi); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.all { border-style: dashed; }
.chip.all.on { border-style: solid; }
.chip.off { color: var(--text-3); }
.chip.small { padding: 2px 8px; font-size: 0.75rem; }
.chip input { display: none; }
.chip:disabled { opacity: 0.4; cursor: default; }

/* ---------- cards ---------- */

.panel { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); min-width: 0; }
.panel > h2 { margin-bottom: 8px; }
.panel > h3 { margin: 10px 0 4px; }
.panel > h3:first-child, .panel > h2 + h3 { margin-top: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }
.panel-note { color: var(--text-3); font-size: 0.75rem; }
.help { color: var(--text-3); font-size: 0.75rem; margin-top: 5px; line-height: 1.4; }
.notice { background: var(--card-hi); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 9px 12px; color: var(--text-2); font-size: 0.875rem; margin-bottom: 12px; }
.notice b { color: var(--text); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields label.field input, .fields label.field select { width: 100%; }
.field-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.field-row label.field { flex: 1 1 120px; }
.chips.wrap { margin-top: 2px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-2); cursor: pointer; font-weight: 600; }
.switch input { display: none; }
.switch i { width: 32px; height: 18px; border-radius: 999px; background: var(--line); position: relative; transition: background 0.15s; flex: none; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: transform 0.15s; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(14px); background: #fff; }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel.off > :not(.panel-head) { display: none; }
.panel.off { opacity: 0.7; }

/* ---------- page heads ---------- */

.head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 24px; margin-bottom: 12px; }
.head .lede { max-width: 80ch; color: var(--text-2); margin-top: 2px; font-size: 0.875rem; }
.head-text { flex: 1 1 420px; }
.nextrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* ---------- landing ---------- */

.hero { padding: 18px 0 4px; }
.hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); max-width: 24ch; letter-spacing: -0.015em; }
.hero .lede { font-size: 0.9375rem; color: var(--text-2); max-width: 66ch; margin-top: 10px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 22px; }
.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.path.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.path li { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.path .step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.875rem; }
.path h3 { margin: 12px 0 6px; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.path p { color: var(--text-2); font-size: 0.9375rem; }

/* ---------- layout for the steps ---------- */

.work { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.aside { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 86px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }

.carry h2 { margin-bottom: 4px; }
.carry .panel-note { margin-bottom: 10px; }
.carry-group { border-top: 1px solid var(--line-soft); padding: 10px 0; }
.carry-group:last-child { padding-bottom: 0; }
.carry-group h3 { margin-bottom: 6px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; font-size: 0.9375rem; margin: 0; }
.kv dt { color: var(--text-2); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kv dd small { color: var(--text-3); font-size: 0.8125rem; }
.lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 0.9375rem; }
.lines li { display: flex; gap: 8px; align-items: baseline; }
.lines li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--line); transform: translateY(-2px); }
.lines li.fx-debuff::before { background: var(--bad); }
.lines li.fx-buff::before { background: var(--good); }
.lines li.fx-mult::before { background: var(--gold); }
.lines li.fx-off { color: var(--text-3); }
.empty-note { color: var(--text-3); font-size: 0.9375rem; }

/* ---------- gear ---------- */

.classpick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.classpick .label { color: var(--text-2); font-size: 0.875rem; }
.classpick .seg { display: inline-flex; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.slot {
	background: var(--card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	padding: 10px 12px 12px;
	display: flex; flex-direction: column; gap: 6px;
	min-height: 96px;
	position: relative;
	box-shadow: var(--shadow);
}
.slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.slot-name { font-weight: 700; color: var(--text-2); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.slot.filled { border-left: 3px solid var(--rarity, var(--line)); }
.item-name { font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--rarity, var(--text)); padding-right: 28px; }
.item-sub { color: var(--text-3); font-size: 0.8125rem; }
.r-M { --rarity: var(--magic); }
.r-R { --rarity: var(--rare); }
.r-L { --rarity: var(--legendary); }
.statrow { display: flex; gap: 14px; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.statrow span { display: flex; flex-direction: column; line-height: 1.2; }
.statrow small { color: var(--text-3); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fx { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.8125rem; line-height: 1.4; }
.fx li { padding-left: 12px; position: relative; }
.fx li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.fx li.sk::before { background: var(--good); }
.fx .nm { color: var(--text-2); }
.slot .x, .opt-rot-row .x {
	width: 28px; height: 28px; border-radius: 50%;
	border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.slot .x { position: absolute; top: 8px; right: 8px; }
.slot .x:hover, .opt-rot-row .x:hover { background: var(--card-hi); color: var(--text); }
.searchbox { position: relative; }
.searchbox .typed { display: block; margin-top: 6px; font-size: 0.8125rem; }
.custom-form { display: flex; flex-direction: column; gap: 6px; }
.custom-form .fields { gap: 6px 8px; }
.custom-form label.field { font-size: 0.75rem; }
.custom-form input, .custom-form select { padding: 4px 6px; font-size: 0.8125rem; }
.results {
	position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
	background: var(--card-hi); border: 1px solid var(--line); border-radius: var(--radius-sm);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
	max-height: 340px; overflow-y: auto; padding: 4px; margin: 0; list-style: none;
}
.results li { padding: 6px 9px; border-radius: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.results li[aria-selected="true"], .results li:hover { background: #2d3542; }
.results .rn { font-weight: 700; color: var(--rarity, var(--text)); }
.results .rs { color: var(--text-3); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.results .none { color: var(--text-3); cursor: default; }
.charms { margin-top: 12px; }
.charm-name { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.charm-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.datanote { margin-top: 12px; color: var(--text-3); font-size: 0.8125rem; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.vals-wrap { overflow-x: auto; margin-top: 6px; }
.vals { width: 100%; border-collapse: collapse; font-size: 0.8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vals th, .vals td { padding: 3px 7px; text-align: right; border-bottom: 1px solid var(--line-soft); }
.vals th { font-weight: 600; color: var(--text-3); }
.vals th:first-child, .vals td:first-child { text-align: left; }
.vals tr.cur td { font-weight: 700; color: var(--accent-hi); }

/* ---------- talents ---------- */

body.wide main, body.wide .foot { max-width: 1440px; }
.talent-layout { display: grid; grid-template-columns: minmax(0, 1006px) 330px; gap: 18px; align-items: start; }
.talent-frame-wrap { max-width: 1006px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); }
.talent-frame { display: block; width: 100%; height: 700px; border: 0; background: #000; }
.build-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; max-width: 1006px; }
.inline-form { display: flex; gap: 8px; margin-top: 8px; }
.inline-form input { flex: 1; }
.saved { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.saved li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; }
.saved li:hover { background: var(--card-hi); }
.saved .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved .meta { color: var(--text-3); font-size: 0.8125rem; white-space: nowrap; }

/* ---------- rotation ---------- */

.drop {
	border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-2); background: var(--card);
}
.drop.over { border-color: var(--accent); background: var(--card-hi); }
.drop strong { color: var(--text); font-size: 1.0625rem; }
.drop .hero-actions { margin-top: 4px; }
.runbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 14px; }
.runbar select { width: auto; max-width: 100%; }
.figure .label { color: var(--text-2); font-size: 0.875rem; }
.figure .value { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.figure .unit { font-size: 1rem; color: var(--text-2); font-weight: 600; margin-left: 6px; }
.tip {
	position: fixed; z-index: 50; pointer-events: none;
	background: var(--card-hi); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
	font-size: 0.875rem; max-width: 300px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.tip b { display: block; margin-bottom: 4px; }
.toast {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
	background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 999px; font-weight: 600;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: calc(100% - 32px); font-size: 0.9375rem;
}
.toast.bad { background: var(--bad); color: #fff; }

/* Flat sample summaries shared by all build pages. */
.sample-table-wrap { overflow-x: auto; }
.sample-metrics { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 8px; }
.sample-metrics th, .sample-metrics td { padding: 8px 8px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.sample-metrics th:first-child { text-align: left; }
.sample-metrics thead { font-size: 0.75rem; color: var(--text-3); }
.sample-reference { margin-top: 14px; }
.sample-reference p { margin-block: 10px; }
.sample-mini-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.sample-mini-row:last-child { border-bottom: 0; }
.sample-mini-values { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.sample-mini-values strong { font-size: 1.05em; }
.sample-mini-values span { font-size: 0.8em; }
.mini-label { color: var(--text-3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.mini-link { font-size: 0.8125rem; margin-top: 12px; display: inline-block; }

/* ---------- Sample DPS flash card and optimization targets ---------- */
.flash-card { padding: 0; overflow: hidden; min-width: 0; }
.flash-toggle {
	width: 100%; display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap;
	background: var(--card-hd); border: 0; cursor: pointer; text-align: left;
	padding: 11px 14px; color: var(--text); font-family: var(--display);
}
.flash-toggle:hover { background: var(--card-hi); }
.flash-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.flash-card.open .flash-toggle { border-bottom: 1px solid var(--line-soft); }
.flash-title { font-size: 1rem; font-weight: 700; }
.flash-hint { font-family: var(--body); color: var(--text-3); font-size: 0.8125rem; }
.flash-caret { margin-left: auto; color: var(--accent-hi); font-size: 0.875rem; flex: none; }
.flash-body { padding: 12px 14px 14px; display: flex; flex-direction: column; }
.flash-body > .notice { margin: 10px 0 0; }
.flash-body > .panel-note { margin-top: 10px; }
.flash-body .sample-table-wrap .sample-metrics { margin-top: 0; }
.flash-card.side { position: sticky; top: 70px; max-height: calc(100vh - 86px); overflow-y: auto; overscroll-behavior: contain; }
.aside > .flash-card.side { position: static; max-height: none; overflow: visible; }
.flash-card.side .sample-mini-row:first-child { padding-top: 0; }

.target-select h3, .dps-from-sample > h3 { margin: 0 0 8px; }
.target-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dps-from-sample { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.dps-entries { display: flex; flex-direction: column; gap: 6px; }
.dps-entry { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card-hi); }
.dps-entry.open { border-color: var(--accent); }
.dps-entry-head {
	width: 100%; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
	background: none; border: 0; cursor: pointer; text-align: left; color: var(--text);
	padding: 9px 12px; font-family: var(--body); border-radius: var(--radius-sm);
}
.dps-entry-head:hover { background: #2a3240; }
.dps-entry-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dps-entry-caret { color: var(--accent-hi); width: 1em; flex: none; }
.dps-entry-label { font-weight: 600; }
.dps-entry-values { margin-left: auto; display: flex; align-items: baseline; gap: 2px 8px; flex-wrap: wrap; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.dps-entry-dps { font-size: 1rem; white-space: nowrap; }
.dps-entry-delta { font-size: 0.8125rem; white-space: nowrap; }
.dps-entry-rec { font-size: 0.75rem; color: var(--text-3); white-space: nowrap; }

.brk { padding: 6px 12px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; border-top: 1px solid var(--line-soft); }
.flash-card.side .brk { grid-template-columns: 1fr; gap: 14px; padding: 8px 10px 12px; }
.brk-sec { min-width: 0; }
.brk-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin: 6px 0 8px; border-bottom: 1px solid var(--line-soft); padding-bottom: 5px; }
.brk-sec-head h4 { margin: 0; white-space: nowrap; font-size: 0.875rem; font-weight: 700; color: var(--text); }
.brk-sec-sub { font-size: 0.75rem; color: var(--text-3); text-align: right; margin-left: auto; font-variant-numeric: tabular-nums; }
.brk-dist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.brk-dist-row { font-variant-numeric: tabular-nums; min-width: 0; }
.brk-dist-head { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8125rem; margin-bottom: 3px; }
.brk-dist-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.brk-dist-val { color: var(--text); flex: none; white-space: nowrap; }
.brk-dist-alt { font-weight: 600; }
.brk-bar { height: 6px; background: var(--field); border-radius: 999px; overflow: hidden; display: flex; }
.brk-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.brk-bar .seg { height: 100%; min-width: 1px; border: 0; padding: 0; border-radius: 0; background: none; display: block; }
.brk-bar .seg + .seg { box-shadow: inset 1px 0 0 var(--field); }
.brk-bar .seg.atk { background: var(--atk); }
.brk-bar .seg.exp { background: var(--exp); }
.brk-bar .seg.unk { background: var(--unk); }
.stat-line { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.75rem; margin: 0 0 3px; font-variant-numeric: tabular-nums; }
.stat-line .atk, .stat-key.atk { color: var(--atk); }
.stat-line .exp, .stat-key.exp { color: var(--exp); }
.stat-line .unk, .stat-key.unk { color: var(--text-3); }
.stat-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.75rem; margin-bottom: 8px; }
.stat-key::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: currentColor; }
.scaled-total { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--line-soft); }
.scaled-total .brk-bar { height: 10px; margin-bottom: 5px; }
.brk-sec .panel-note { margin: 0 0 8px; font-size: 0.8125rem; }

/* ---------- Optimize ---------- */

.opt-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-bottom: 10px; }
.opt-builds { margin-bottom: 10px; }
.hit-mode { margin-bottom: 6px; }
.hit-mode .seg button { padding: 3px 9px; font-size: 0.75rem; }
.panel.data { margin-top: 22px; }
.party-row { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.party-row .field { max-width: 320px; }
.opt-rot-row.mix-row { grid-template-columns: minmax(0, 1fr) 130px 64px 28px; }
.opt-rot-row.clash select:first-child { border-color: var(--bad); }
.worth { margin-top: 8px; }
.worth h3 { margin-bottom: 4px; }
.worth-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.worth-chips .chip.dim { opacity: 0.5; }
.gcard .gw { color: var(--text-2); font-size: 0.75rem; }
.rate-table td.gs { color: var(--text-3); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.rate-table td.name b { color: var(--rarity, var(--text)); }
.rate-table td.name small { color: var(--text-3); margin-left: 4px; }
.rate-table td.runes { color: var(--text-2); font-size: 0.75rem; }
.rate-table tr.excluded td { opacity: 0.45; }
.rate-table tr.excluded td.acts { opacity: 1; }
details.rate { margin-top: 8px; }
.lo-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lo-form input { width: 180px; padding: 4px 8px; font-size: 0.8125rem; }
.lo-wrap { overflow-x: auto; }
.lo-table td.name { white-space: nowrap; }
.lo-table td.name small { display: block; color: var(--text-3); font-size: 0.72rem; }
.lo-table tr.now td { background: var(--card-hd); }
.lo-table td.acts { white-space: nowrap; }
.lo-table td.acts .linkbtn { margin-left: 10px; font-size: 0.78rem; }
.lo-table td.soft { color: var(--text-3); }
.opt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-bottom: 10px; }
.opt-cards .panel.span2 { grid-column: span 2; }
.opt-run { margin-bottom: 10px; }
.opt-results { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.opt-rot { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.opt-rot-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 28px; gap: 6px; align-items: center; }
.opt-rot-row select, .opt-rot-row input { padding: 6px 8px; }
.enemy-pick { position: relative; }
.enemy-pick .results { max-height: 280px; }
.enemy-pick .rn small { color: var(--text-3); font-weight: 400; margin-left: 6px; }
.lockgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lockgrid .chip { justify-content: center; }
.excl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.inv-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; }
.inv-list li { display: flex; gap: 10px; align-items: center; }
.inv-list .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.runbar-opt { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.progress { flex: 1 1 200px; height: 8px; background: var(--field); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--good); border-radius: 999px; transition: width 0.15s linear; }
.progress.busy i { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0% { opacity: 0.55; } 50% { opacity: 1; } 100% { opacity: 0.55; } }
.runnote { color: var(--text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; flex: 1 1 100%; }

.cur { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; }
.cur .figure { flex: 0 1 auto; min-width: 0; }
.cur > div:last-child { flex: 1 1 240px; min-width: 0; }
.statchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.statchips .chip { cursor: default; }
.statchips .chip b { color: var(--text); margin-left: 4px; font-variant-numeric: tabular-nums; }

.res { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 0; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); overflow: hidden; }
.res.best { border-color: var(--good); }
.res > * { padding: 0 12px; }
.res-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; background: var(--card-hd); padding: 7px 12px; border-bottom: 1px solid var(--line-soft); }
.res-rank { font-weight: 700; color: var(--accent-hi); min-width: 2ch; }
.res-value { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-value span { font-size: 0.875rem; color: var(--text-2); font-weight: 600; margin-left: 4px; }
.res-delta { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.res-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.res-gear { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gcard { background: var(--card-hi); border-radius: var(--radius-sm); padding: 6px 8px; border-left: 3px solid var(--rarity, var(--line)); min-width: 0; font-size: 0.8125rem; line-height: 1.35; }
.gcard .gs { color: var(--text-3); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.gcard .gn { font-weight: 700; color: var(--rarity, var(--text)); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard .gn.same { color: var(--text-2); font-weight: 600; }
.gcard .gi { color: var(--text-2); font-variant-numeric: tabular-nums; }
.gcard .gr { color: var(--text-3); font-size: 0.75rem; }
.gcard.changed { outline: 1px solid var(--good); }
.res-line { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.875rem; color: var(--text-2); }
.res-line b { color: var(--text); font-weight: 600; }
.res > details.more { padding-bottom: 10px; }
.alts { color: var(--text-3); font-size: 0.8125rem; }
.brk-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.brk-table th { text-align: left; color: var(--text-3); font-weight: 600; font-size: 0.75rem; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.brk-table td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); }
.brk-table td.r, .brk-table th.r { text-align: right; white-space: nowrap; }
.brk-table tr.sum td { font-weight: 700; border-bottom: 0; }
.brk-wrap { background: var(--card-hi); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; }
.brk-wrap h4 { margin: 0 0 6px; font-size: 0.9375rem; }
.brk-wrap h4 + .help { margin: 0 0 8px; }
.brk-wrap + .brk-wrap { margin-top: 8px; }
details.more > summary { cursor: pointer; color: var(--accent-hi); font-size: 0.875rem; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "\25B8 "; }
details.more[open] > summary::before { content: "\25BE "; }
details.more > div { margin-top: 8px; }
.talents-found .fields { margin-top: 10px; }
.talents-found .field-row { margin-top: 10px; }
.talents-found .talent-frame-wrap { margin-top: 4px; }
.stones { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.stones th { text-align: left; color: var(--text-3); font-weight: 600; font-size: 0.7rem; padding: 3px 6px; border-bottom: 1px solid var(--line); }
.stones td { padding: 2px 6px; border-bottom: 1px solid var(--line-soft); }
.stones tr.filler td { color: var(--text-3); }

/* ---------- narrow screens ---------- */

@media (max-width: 1100px) {
	.talent-layout { grid-template-columns: 1fr; }
	.talent-layout .flash-card.side { position: static; max-height: none; overflow: visible; max-width: 1006px; }
}
@media (max-width: 1020px) {
	.work { grid-template-columns: 1fr; }
	.aside { position: static; max-height: none; overflow: visible; }
	.slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.charm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.res-gear { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.path.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.opt-top { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	main { padding: 16px 14px 48px; }
	.top-inner { padding: 0 12px; gap: 0 12px; flex-wrap: wrap; min-height: 0; }
	.wordmark { padding: 10px 0 6px; }
	.rail { width: 100%; margin-left: 0; justify-content: space-between; }
	.rail a { padding: 6px 2px 8px; font-size: 0.9375rem; width: auto; flex: 1 1 0; }
	.rail .t small { display: none; }
	.path, .path.four { grid-template-columns: 1fr; }
	.slots { grid-template-columns: 1fr; }
	.slot { min-height: 0; }
	.charm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.build-tools { grid-template-columns: 1fr; }
	.opt-cards { grid-template-columns: 1fr; }
	.opt-cards .panel.span2 { grid-column: auto; }
	.res-gear { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fields, .fields.three { grid-template-columns: 1fr 1fr; }
	.brk { grid-template-columns: 1fr; }
	.lockgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.talent-frame { height: 560px; }
}
@media (max-width: 600px) {
	.sample-metrics thead { display: none; }
	.sample-metrics tbody { display: block; }
	.sample-metrics tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
	.sample-metrics th { grid-column: 1 / -1; }
	.sample-metrics th, .sample-metrics td { padding: 4px 6px; border: 0; text-align: left; white-space: normal; }
	.sample-metrics td::before { content: attr(data-label); display: block; font-size: 0.72em; opacity: 0.65; margin-bottom: 3px; }
}

/* ---------- Rules ---------- */

.ref-grid { display: flex; flex-direction: column; gap: 10px; }
.ref-sec .panel-head { margin-bottom: 6px; }
.ref-cols { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px 18px; align-items: start; }
.ref-formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--text); background: var(--field); border-radius: 5px; padding: 4px 8px; margin: 0 0 4px; white-space: normal; }
.ref-kv { font-size: 0.8125rem; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin-top: 6px; }
.ref-kv dd { text-align: left; color: var(--text-2); }
.ref-kv dt { color: var(--text); font-weight: 600; }
.ref-wrap { overflow-x: auto; }
.ref { width: 100%; border-collapse: collapse; font-size: 0.78rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.ref th { text-align: left; color: var(--text-3); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ref td { padding: 2px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ref td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.ref tr:hover td { background: rgba(255, 255, 255, 0.025); }
details.ref-disc { margin-top: 4px; }
details.ref-disc > summary { cursor: pointer; font-weight: 700; font-size: 0.8125rem; padding: 4px 0; color: var(--accent-hi); list-style: none; }
details.ref-disc > summary::-webkit-details-marker { display: none; }
details.ref-disc > summary::before { content: "\25B8 "; }
details.ref-disc[open] > summary::before { content: "\25BE "; }
details.ref-disc > .ref-wrap { margin-bottom: 6px; }
.ref td:nth-child(2) { color: var(--text-2); }
@media (max-width: 720px) { .ref-cols { grid-template-columns: 1fr; } }