/*!
 * 星穹铁道伤害计算器 · hsr-damage-calc
 * 独立设计系统「星轨观测台」：淡星雾紫纸底 + 深紫 + 玫红 + 星金 + 观测青
 * 首屏：核心价值文案 + 星轨乘区盘 + 直接可点的示例面板与测算按钮
 * 深色主题跟随导航栏 #themeToggle（auto / light / dark 三态），页面不另设开关。
 * 变量作用域必须覆盖浮层，否则 modal / toast 取不到页面变量。
 */

.hsr-page,
.hsr-modal,
.hsr-sheet,
.hsr-toast {
    --hsr-bg: #f5f2fb;
    --hsr-bg2: #eee8f9;
    --hsr-card: #ffffff;
    --hsr-card2: #faf7ff;
    --hsr-line: #e4dcf5;
    --hsr-line2: #d2c6ec;
    --hsr-ink: #221b3a;
    --hsr-ink2: #5c527c;
    --hsr-ink3: #8d83a9;
    --hsr-violet: #4b2a8f;
    --hsr-violet2: #6a45b8;
    --hsr-violet-soft: rgba(75, 42, 143, .09);
    --hsr-magenta: #d13a85;
    --hsr-magenta-soft: rgba(209, 58, 133, .11);
    --hsr-gold: #b97d18;
    --hsr-gold-soft: rgba(185, 125, 24, .12);
    --hsr-cyan: #1b7f92;
    --hsr-cyan-soft: rgba(27, 127, 146, .11);
    --hsr-danger: #b8334b;
    --hsr-danger-soft: rgba(184, 51, 75, .1);
    --hsr-shadow: 0 20px 46px -30px rgba(40, 22, 82, .55);
    --hsr-shadow-s: 0 8px 22px -16px rgba(40, 22, 82, .5);
    --hsr-radius: 16px;
    --hsr-radius-s: 10px;
    --hsr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    --hsr-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", system-ui, -apple-system, sans-serif;

    /* 观测屏：刻意做成深色仪表盘，与纸底主体形成层次 */
    --hsr-orbit-bg: linear-gradient(158deg, #2d2059 0%, #1b1437 100%);
    --hsr-orbit-ink: #f3edff;
    --hsr-orbit-dim: #b5a5dd;
    --hsr-orbit-ring: rgba(186, 156, 255, .34);
    --hsr-orbit-ring2: rgba(255, 151, 205, .42);
    --hsr-orbit-core: rgba(76, 52, 137, .78);
}

:root[data-theme="dark"] .hsr-page,
:root[data-theme="dark"] .hsr-modal,
:root[data-theme="dark"] .hsr-sheet,
:root[data-theme="dark"] .hsr-toast {
    --hsr-bg: #100d1c;
    --hsr-bg2: #171228;
    --hsr-card: #1b1630;
    --hsr-card2: #211a3a;
    --hsr-line: #33294f;
    --hsr-line2: #453767;
    --hsr-ink: #f1ecff;
    --hsr-ink2: #bdb1dc;
    --hsr-ink3: #897da9;
    --hsr-violet: #ad91ff;
    --hsr-violet2: #c4aeff;
    --hsr-violet-soft: rgba(173, 145, 255, .13);
    --hsr-magenta: #ff7ab6;
    --hsr-magenta-soft: rgba(255, 122, 182, .15);
    --hsr-gold: #f0bd63;
    --hsr-gold-soft: rgba(240, 189, 99, .15);
    --hsr-cyan: #5cd6d6;
    --hsr-cyan-soft: rgba(92, 214, 214, .14);
    --hsr-danger: #ff8a9c;
    --hsr-danger-soft: rgba(255, 138, 156, .14);
    --hsr-shadow: 0 20px 48px -28px rgba(0, 0, 0, .85);
    --hsr-shadow-s: 0 8px 22px -14px rgba(0, 0, 0, .8);
    --hsr-orbit-bg: linear-gradient(158deg, #2a2050 0%, #150f2a 100%);
    --hsr-orbit-ink: #f6f1ff;
    --hsr-orbit-dim: #b9a9e2;
    --hsr-orbit-ring: rgba(178, 148, 255, .4);
    --hsr-orbit-ring2: rgba(255, 143, 199, .5);
    --hsr-orbit-core: rgba(70, 48, 130, .8);
}

.hsr-page {
    color: var(--hsr-ink);
    font-family: var(--hsr-font);
    font-size: 15px;
    line-height: 1.82;
    background:
        radial-gradient(900px 420px at 92% -8%, var(--hsr-violet-soft), transparent 70%),
        radial-gradient(720px 360px at 4% 22%, var(--hsr-magenta-soft), transparent 72%),
        linear-gradient(180deg, var(--hsr-bg) 0%, var(--hsr-bg2) 100%);
    min-height: 60vh;
    padding-bottom: 34px;
}
.hsr-page *, .hsr-page *::before, .hsr-page *::after { box-sizing: border-box; }
.hsr-page .hsr-wrap { max-width: 1240px; margin: 0 auto; padding: 20px 16px 10px; }
.hsr-page b, .hsr-page strong { font-weight: 700; color: var(--hsr-violet); }
:root[data-theme="dark"] .hsr-page b { color: var(--hsr-violet2); }
.hsr-page code { font-family: var(--hsr-mono); }

/* ================= 面包屑 ================= */
.hsr-page .detail-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 13px; color: var(--hsr-ink3); margin: 2px 0 18px;
}
.hsr-page .detail-breadcrumb a { color: var(--hsr-ink2); text-decoration: none; }
.hsr-page .detail-breadcrumb a:hover { color: var(--hsr-magenta); }
.hsr-page .detail-breadcrumb .sep { color: var(--hsr-line2); }
.hsr-page .detail-breadcrumb .current { color: var(--hsr-violet); font-weight: 700; }

/* ================= Hero ================= */
.hsr-hero {
    display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 26px; align-items: stretch;
    padding: 28px 30px 30px;
    border: 1.5px solid var(--hsr-line);
    border-radius: 24px;
    background:
        radial-gradient(110% 110% at 100% 0%, var(--hsr-magenta-soft) 0%, transparent 52%),
        linear-gradient(180deg, var(--hsr-card) 0%, var(--hsr-card2) 100%);
    box-shadow: var(--hsr-shadow);
}
.hsr-hero > * { min-width: 0; }
.hsr-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; letter-spacing: .06em; font-weight: 700;
    color: var(--hsr-violet); background: var(--hsr-violet-soft);
    border: 1px solid var(--hsr-line2); border-radius: 999px;
    padding: 5px 14px 5px 10px;
}
.hsr-kicker i { font-style: normal; color: var(--hsr-magenta); font-size: 15px; }
.hsr-kicker span { color: var(--hsr-line2); font-weight: 400; }
.hsr-kicker b { color: var(--hsr-magenta); font-family: var(--hsr-mono); font-size: 12px; }
.hsr-hero h1 {
    font-size: clamp(28px, 3.2vw, 38px); line-height: 1.24; letter-spacing: -.02em;
    margin: 16px 0 12px; color: var(--hsr-ink); font-weight: 800;
}
.hsr-hero h1::after {
    content: ""; display: block; width: 62px; height: 4px; margin-top: 12px;
    border-radius: 4px; background: linear-gradient(90deg, var(--hsr-violet), var(--hsr-magenta), var(--hsr-gold));
}
.hsr-sub { font-size: 14.5px; line-height: 1.95; color: var(--hsr-ink2); margin: 0 0 18px; max-width: 620px; }
.hsr-sub b { color: var(--hsr-violet); font-weight: 700; }
:root[data-theme="dark"] .hsr-sub b { color: var(--hsr-violet2); }

.hsr-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.hsr-fact {
    border: 1px solid var(--hsr-line); border-radius: var(--hsr-radius-s);
    background: var(--hsr-card); padding: 10px 12px; min-width: 0;
}
.hsr-fact b { display: block; font-family: var(--hsr-mono); font-size: 19px; line-height: 1.35; color: var(--hsr-ink); letter-spacing: -.02em; }
.hsr-fact span { display: block; font-size: 11.5px; color: var(--hsr-ink3); margin-top: 2px; }
.hsr-fact--main { background: var(--hsr-violet-soft); border-color: var(--hsr-line2); }
.hsr-fact--main b { color: var(--hsr-violet); }
:root[data-theme="dark"] .hsr-fact--main b { color: var(--hsr-violet2); }

.hsr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.hsr-quick-label { font-size: 12.5px; color: var(--hsr-ink3); margin-right: 2px; }
.hsr-quick-btn {
    font: inherit; font-size: 12.5px; cursor: pointer;
    border: 1px solid var(--hsr-line2); border-radius: 999px;
    background: var(--hsr-card); color: var(--hsr-ink2);
    padding: 5px 12px; transition: .18s ease;
}
.hsr-quick-btn:hover { border-color: var(--hsr-magenta); color: var(--hsr-magenta); transform: translateY(-1px); }
.hsr-quick-btn.is-on { background: var(--hsr-violet); border-color: var(--hsr-violet); color: #fff; }
:root[data-theme="dark"] .hsr-quick-btn.is-on { color: #17102c; }

.hsr-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hsr-btn {
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    border: 1px solid var(--hsr-line2); border-radius: 10px;
    background: var(--hsr-card); color: var(--hsr-ink);
    padding: 9px 18px; transition: .18s ease; white-space: nowrap;
}
.hsr-btn:hover { border-color: var(--hsr-violet); box-shadow: var(--hsr-shadow-s); }
.hsr-btn--primary {
    background: linear-gradient(120deg, var(--hsr-violet) 0%, var(--hsr-magenta) 120%);
    border-color: transparent; color: #fff; padding: 10px 26px;
    box-shadow: 0 10px 24px -14px var(--hsr-violet);
    font-size: 15px; letter-spacing: .02em;
}
.hsr-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px var(--hsr-magenta); }
:root[data-theme="dark"] .hsr-btn--primary { color: #160f28; }
.hsr-btn--wide { width: 100%; }
.hsr-btn--sm { font-size: 12.5px; padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.hsr-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.hsr-src { font-size: 12px; color: var(--hsr-ink3); font-family: var(--hsr-mono); }
.hsr-hero-note { font-size: 12px; color: var(--hsr-ink3); margin: 12px 0 0; letter-spacing: .01em; }
.hsr-hero-note b { color: var(--hsr-gold); }

/* ================= 星轨观测屏 ================= */
.hsr-orbit-box {
    background: var(--hsr-orbit-bg); color: var(--hsr-orbit-ink);
    border-radius: 18px; padding: 18px 18px 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), var(--hsr-shadow-s);
    display: flex; flex-direction: column; min-width: 0;
}
.hsr-orbit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.hsr-orbit-head b { font-size: 14px; color: var(--hsr-orbit-ink); letter-spacing: .04em; }
.hsr-orbit-head span { font-size: 11.5px; color: var(--hsr-orbit-dim); font-family: var(--hsr-mono); }
.hsr-orbit { position: relative; flex: 1; min-height: 190px; display: flex; align-items: center; justify-content: center; }
.hsr-orbit svg { width: 100%; max-width: 430px; height: auto; display: block; }
.hsr-ring { fill: none; stroke: var(--hsr-orbit-ring); stroke-width: 1.4; }
.hsr-ring--1 { stroke-dasharray: 5 7; }
.hsr-ring--2 { stroke: var(--hsr-orbit-ring2); stroke-width: 1.6; }
.hsr-ring--3 { stroke: var(--hsr-orbit-ring); stroke-width: 1.2; }
.hsr-ring-path { fill: none; stroke: rgba(240, 189, 99, .55); stroke-width: 1.3; stroke-dasharray: 2 8; }
.hsr-star { fill: #ffd27a; }
.hsr-star--a, .hsr-star--b { fill: #ff8fc4; }
.hsr-ring-dots circle { fill: var(--hsr-orbit-core); stroke: #c9aaff; stroke-width: 1.4; }
.hsr-orbit-core {
    position: absolute; text-align: center; padding: 12px 22px;
    border-radius: 14px; background: var(--hsr-orbit-core);
    box-shadow: 0 0 0 1px rgba(201, 170, 255, .35), 0 12px 30px -18px #000;
    backdrop-filter: blur(3px);
}
.hsr-orbit-core span { display: block; font-size: 11px; color: var(--hsr-orbit-dim); letter-spacing: .12em; }
.hsr-orbit-core b { display: block; font-family: var(--hsr-mono); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; color: #ffe6a8; letter-spacing: -.02em; }
.hsr-orbit-core small { display: block; font-size: 10.5px; color: var(--hsr-orbit-dim); }
.hsr-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.hsr-chain-item {
    border: 1px solid rgba(201, 170, 255, .22); border-radius: 8px;
    background: rgba(255, 255, 255, .05); padding: 5px 7px; min-width: 0;
}
.hsr-chain-item span { display: block; font-size: 10px; color: var(--hsr-orbit-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsr-chain-item b { display: block; font-family: var(--hsr-mono); font-size: 12px; color: #f4e9ff; }

/* ================= 校验提示 ================= */
.hsr-alert {
    margin: 14px 0 0; padding: 10px 14px; border-radius: var(--hsr-radius-s);
    border: 1px solid var(--hsr-danger); background: var(--hsr-danger-soft);
    color: var(--hsr-danger); font-size: 13.5px; font-weight: 600;
}
.hsr-alert[hidden] { display: none !important; }

/* ================= 主体布局 ================= */
.hsr-body { display: grid; grid-template-columns: minmax(300px, 366px) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: start; }
.hsr-body > * { min-width: 0; }
.hsr-panel, .hsr-card, .hsr-section {
    border: 1px solid var(--hsr-line); border-radius: var(--hsr-radius);
    background: var(--hsr-card); box-shadow: var(--hsr-shadow-s);
}
.hsr-panel--form { padding: 18px; }
.hsr-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hsr-panel-head h2, .hsr-card-head h2, .hsr-section-head h2 { font-size: 18px; line-height: 1.4; margin: 0; color: var(--hsr-ink); font-weight: 800; letter-spacing: -.01em; }
.hsr-panel-head span, .hsr-card-head p { font-size: 12px; color: var(--hsr-ink3); margin: 0; }
.hsr-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hsr-card-head p { margin-top: 2px; }
.hsr-ver, .hsr-chip {
    font-size: 11.5px; font-family: var(--hsr-mono); white-space: nowrap;
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--hsr-line2); background: var(--hsr-violet-soft); color: var(--hsr-violet);
}
:root[data-theme="dark"] .hsr-ver, :root[data-theme="dark"] .hsr-chip { color: var(--hsr-violet2); }

.hsr-skilltabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; background: var(--hsr-bg2); border-radius: 10px; margin-bottom: 16px; }
.hsr-skilltabs button {
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid transparent; border-radius: 8px; padding: 7px 4px;
    background: transparent; color: var(--hsr-ink2); transition: .16s ease;
}
.hsr-skilltabs button:hover { color: var(--hsr-magenta); }
.hsr-skilltabs button.is-on { background: var(--hsr-card); color: var(--hsr-violet); border-color: var(--hsr-line2); box-shadow: var(--hsr-shadow-s); }
:root[data-theme="dark"] .hsr-skilltabs button.is-on { color: var(--hsr-violet2); }

.hsr-group { border: 0; border-top: 1px dashed var(--hsr-line2); padding: 14px 0 4px; margin: 0 0 14px; min-width: 0; }
.hsr-group legend { padding: 0 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--hsr-ink2); letter-spacing: .04em; }
.hsr-group legend i { font-style: normal; font-family: var(--hsr-mono); color: var(--hsr-magenta); margin-right: 6px; }
.hsr-field { display: block; margin-bottom: 10px; min-width: 0; }
.hsr-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--hsr-ink2); margin-bottom: 4px; }
.hsr-field em { font-style: normal; font-size: 10.5px; color: var(--hsr-ink3); font-weight: 400; white-space: nowrap; }
.hsr-field input, .hsr-field select, .hsr-table input, .hsr-table select {
    width: 100%; font: inherit; font-family: var(--hsr-mono); font-size: 13.5px;
    color: var(--hsr-ink); background: var(--hsr-card2);
    border: 1px solid var(--hsr-line2); border-radius: 8px; padding: 7px 9px;
    outline: none; transition: .16s ease; min-width: 0;
}
.hsr-field input:focus, .hsr-field select:focus, .hsr-table input:focus, .hsr-table select:focus {
    border-color: var(--hsr-violet); box-shadow: 0 0 0 3px var(--hsr-violet-soft); background: var(--hsr-card);
}
.hsr-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hsr-check { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 10px; cursor: pointer; }
.hsr-check input { width: 16px; height: 16px; accent-color: var(--hsr-violet); margin: 3px 0 0; flex: none; }
.hsr-check span { font-size: 12.5px; font-weight: 600; color: var(--hsr-ink2); line-height: 1.55; }
.hsr-check small { display: block; font-size: 11px; font-weight: 400; color: var(--hsr-ink3); }
.hsr-elemnote { font-size: 11.5px; color: var(--hsr-cyan); background: var(--hsr-cyan-soft); border-radius: 8px; padding: 7px 10px; margin: 0 0 6px; }
.hsr-form-actions { margin-top: 4px; }
.hsr-form-actions p { font-size: 11px; color: var(--hsr-ink3); line-height: 1.7; margin: 8px 0 0; }
.hsr-form-actions code { font-size: 10.5px; }

.hsr-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* flex/grid 子项默认 min-width:auto，会被内部 min-width 的表格撑破窄屏 */
.hsr-main > *, .hsr-body > *, .hsr-hero > *, .hsr-section > *,
.hsr-section--split > *, .hsr-note-grid > *, .hsr-card, .hsr-panel, .hsr-section { min-width: 0; }
.hsr-card { padding: 18px; }

/* ================= 结果 KPI ================= */
.hsr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hsr-kpi {
    border: 1px solid var(--hsr-line); border-radius: var(--hsr-radius-s);
    background: var(--hsr-card2); padding: 12px 13px; min-width: 0;
}
.hsr-kpi > span { display: block; font-size: 11.5px; color: var(--hsr-ink3); }
.hsr-kpi > b { display: block; font-family: var(--hsr-mono); font-size: clamp(17px, 1.8vw, 23px); line-height: 1.4; color: var(--hsr-ink); letter-spacing: -.03em; }
.hsr-kpi > small { display: block; font-family: var(--hsr-mono); font-size: 10px; color: var(--hsr-ink3); }
.hsr-kpi--hot { background: var(--hsr-violet-soft); border-color: var(--hsr-line2); }
.hsr-kpi--hot > b { color: var(--hsr-violet); }
.hsr-kpi--gold { background: var(--hsr-gold-soft); border-color: var(--hsr-line2); }
.hsr-kpi--gold > b { color: var(--hsr-gold); }
:root[data-theme="dark"] .hsr-kpi--hot > b { color: var(--hsr-violet2); }

.hsr-total-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.hsr-total-strip > div { border-left: 3px solid var(--hsr-magenta); background: var(--hsr-magenta-soft); border-radius: 0 8px 8px 0; padding: 8px 12px; min-width: 0; }
.hsr-total-strip > div:nth-child(2) { border-left-color: var(--hsr-cyan); background: var(--hsr-cyan-soft); }
.hsr-total-strip > div:nth-child(3) { border-left-color: var(--hsr-gold); background: var(--hsr-gold-soft); }
.hsr-total-strip span { display: block; font-size: 11px; color: var(--hsr-ink2); }
.hsr-total-strip b { display: block; font-family: var(--hsr-mono); font-size: 16px; color: var(--hsr-ink); }
.hsr-total-strip small { display: block; font-size: 10px; color: var(--hsr-ink3); }
.hsr-result-note { font-size: 12px; color: var(--hsr-ink3); line-height: 1.85; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--hsr-line2); }
.hsr-result-note b { color: var(--hsr-gold); font-weight: 700; }

/* ================= 表格 ================= */
.hsr-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.hsr-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.hsr-table--mini { min-width: 360px; }
.hsr-table--batch { min-width: 760px; }
.hsr-table th, .hsr-table td { padding: 9px 10px; border-bottom: 1px solid var(--hsr-line); text-align: left; vertical-align: middle; }
.hsr-table th { font-size: 11.5px; font-weight: 700; color: var(--hsr-ink3); background: var(--hsr-card2); white-space: nowrap; }
.hsr-table td { color: var(--hsr-ink2); }
.hsr-table td.num, .hsr-table th.num { text-align: right; font-family: var(--hsr-mono); white-space: nowrap; }
.hsr-table td.num b { color: var(--hsr-ink); font-family: var(--hsr-mono); }
.hsr-table tbody tr:last-child td { border-bottom: 0; }
.hsr-table tbody tr:hover { background: var(--hsr-violet-soft); }
.hsr-table tbody tr.is-best { background: var(--hsr-gold-soft); }
.hsr-table .hsr-factor { font-family: var(--hsr-mono); color: var(--hsr-violet); font-weight: 700; }
.hsr-table .hsr-formula { font-size: 11.5px; color: var(--hsr-ink3); font-family: var(--hsr-mono); line-height: 1.6; }
.hsr-table .hsr-step { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 6px; background: var(--hsr-violet-soft); color: var(--hsr-violet); font-family: var(--hsr-mono); font-size: 11px; margin-right: 6px; }
.hsr-table input, .hsr-table select { padding: 4px 7px; font-size: 12.5px; border-radius: 6px; }
.hsr-table .hsr-row-btn { font: inherit; cursor: pointer; border: 1px solid var(--hsr-line2); background: var(--hsr-card); color: var(--hsr-danger); border-radius: 6px; width: 26px; height: 26px; line-height: 1; }
.hsr-table .hsr-row-btn:hover { background: var(--hsr-danger-soft); }
.hsr-best-tag { font-size: 10px; color: var(--hsr-gold); font-weight: 700; margin-left: 5px; }

/* ================= 双暴建议 ================= */
.hsr-crit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hsr-crit-box { border: 1px solid var(--hsr-line); border-radius: var(--hsr-radius-s); background: var(--hsr-card2); padding: 12px; min-width: 0; }
.hsr-crit-box.is-win { border-color: var(--hsr-gold); background: var(--hsr-gold-soft); }
.hsr-crit-box h3 { font-size: 13.5px; margin: 0 0 6px; color: var(--hsr-ink); }
.hsr-crit-box b { font-family: var(--hsr-mono); font-size: 18px; color: var(--hsr-violet); }
.hsr-crit-box p { font-size: 11.5px; color: var(--hsr-ink3); margin: 4px 0 0; line-height: 1.7; }
.hsr-crit-bar { height: 7px; border-radius: 7px; background: var(--hsr-line); overflow: hidden; margin-top: 8px; }
.hsr-crit-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hsr-violet), var(--hsr-magenta)); border-radius: 7px; }
.hsr-crit-tip { grid-column: 1 / -1; font-size: 12.5px; color: var(--hsr-ink2); background: var(--hsr-violet-soft); border-radius: 8px; padding: 9px 12px; line-height: 1.8; }

/* ================= 整宽区块 ================= */
.hsr-section { padding: 20px 22px; margin-top: 20px; min-width: 0; }
.hsr-section > * { min-width: 0; }
.hsr-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.hsr-section-head h2 { font-size: 19px; }
.hsr-section-head p { font-size: 12.5px; color: var(--hsr-ink3); margin: 3px 0 0; }
.hsr-index { display: inline-block; font-family: var(--hsr-mono); font-size: 11px; color: var(--hsr-magenta); background: var(--hsr-magenta-soft); border-radius: 5px; padding: 2px 7px; margin-right: 9px; vertical-align: 3px; }
.hsr-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hsr-footnote { font-size: 11.5px; color: var(--hsr-ink3); line-height: 1.8; margin: 12px 0 0; }
.hsr-skill-editor { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--hsr-ink3); align-items: center; }
.hsr-skill-editor label { display: inline-flex; align-items: center; gap: 5px; }
.hsr-skill-editor input { width: 74px; font-family: var(--hsr-mono); font-size: 12px; padding: 4px 6px; border: 1px solid var(--hsr-line2); border-radius: 6px; background: var(--hsr-card2); color: var(--hsr-ink); }
.hsr-section--split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; }
.hsr-section--split > * { min-width: 0; }
.hsr-note-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hsr-note-grid > * { min-width: 0; }
.hsr-note-out { border: 1px dashed var(--hsr-line2); border-radius: var(--hsr-radius-s); background: var(--hsr-card2); padding: 10px 12px; min-width: 0; }
.hsr-note-out > span { display: block; font-size: 11.5px; color: var(--hsr-ink3); }
.hsr-note-out code { display: block; font-size: 12.5px; color: var(--hsr-ink); word-break: break-all; margin: 5px 0; line-height: 1.7; }
.hsr-note-out em { font-style: normal; font-size: 11px; color: var(--hsr-cyan); }
.hsr-boundary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.hsr-boundary > div { border: 1px solid var(--hsr-line); border-radius: var(--hsr-radius-s); padding: 10px 12px; background: var(--hsr-card2); min-width: 0; }
.hsr-boundary b { display: block; font-size: 12.5px; color: var(--hsr-ink); }
.hsr-boundary span { display: block; font-size: 11px; color: var(--hsr-ink3); line-height: 1.75; }

/* ================= 浮层 ================= */
.hsr-modal {
    position: fixed; inset: 0; z-index: 9999; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(24, 14, 48, .62); backdrop-filter: blur(4px);
    font-family: var(--hsr-font); color: var(--hsr-ink);
}
.hsr-modal[hidden] { display: none !important; }
.hsr-sheet {
    width: min(520px, 100%); background: var(--hsr-card);
    border: 1px solid var(--hsr-line2); border-radius: 18px;
    box-shadow: var(--hsr-shadow); padding: 22px;
}
.hsr-sheet h3 { font-size: 18px; margin: 0 0 8px; color: var(--hsr-ink); }
.hsr-sheet p { font-size: 13px; color: var(--hsr-ink2); line-height: 1.8; margin: 0 0 12px; }
.hsr-sheet-code { display: block; font-size: 11.5px; word-break: break-all; background: var(--hsr-card2); border: 1px solid var(--hsr-line); border-radius: 8px; padding: 10px; color: var(--hsr-violet); line-height: 1.7; }
.hsr-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hsr-toast {
    position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 14px);
    z-index: 10000; padding: 9px 18px; border-radius: 999px;
    background: var(--hsr-ink); color: var(--hsr-bg);
    font-family: var(--hsr-font); font-size: 13px; font-weight: 600;
    box-shadow: var(--hsr-shadow); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; max-width: 90vw;
}
.hsr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ================= 响应式 ================= */
@media (max-width: 1080px) {
    .hsr-hero { grid-template-columns: minmax(0, 1fr); }
    .hsr-body { grid-template-columns: minmax(0, 1fr); }
    .hsr-panel--form { order: 2; }
    .hsr-main { order: 1; }
    .hsr-section--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .hsr-page .hsr-wrap { padding: 14px 12px 8px; }
    .hsr-hero { padding: 20px 16px 22px; border-radius: 18px; }
    .hsr-hero h1 { font-size: 27px; }
    .hsr-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .hsr-fact { padding: 8px; }
    .hsr-fact b { font-size: 14px; }
    .hsr-fact span { font-size: 10px; }
    .hsr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hsr-total-strip { grid-template-columns: minmax(0, 1fr); }
    .hsr-crit, .hsr-note-grid, .hsr-boundary { grid-template-columns: minmax(0, 1fr); }
    .hsr-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hsr-chain-item b { font-size: 10.5px; }
    .hsr-section { padding: 16px 14px; }
    .hsr-card { padding: 14px; }
    .hsr-panel--form { padding: 14px; }
    .hsr-table { min-width: 480px; }
    .hsr-table--batch { min-width: 700px; }
    /* 公共头尾的推荐卡（layout 内，不在 .hsr-page 里）窄屏会被长标题撑开；只在本页样式内修正 */
    .tool-rec-grid { grid-template-columns: minmax(0, 1fr); }
    .tool-rec-item { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
    .tool-rec-body, .tool-rec-body b, .tool-rec-body small { min-width: 0; max-width: 100%; }
}
@media (max-width: 420px) {
    .hsr-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hsr-fact b { font-size: 12.5px; }
    .hsr-kpi > b { font-size: 16px; }
    .hsr-field-row { gap: 7px; }
    .hsr-quick-btn { font-size: 11.5px; padding: 4px 9px; }
}

/* ================= 打印测算单 ================= */
@media print {
    .hsr-page { background: #fff !important; color: #000 !important; padding: 0 !important; }
    .hsr-page .detail-breadcrumb, .hsr-quick, .hsr-hero-actions, .hsr-form-actions,
    .hsr-head-actions, .hsr-toast, .hsr-modal, .hsr-skilltabs, .hsr-panel--form,
    .hsr-section--note, .tskb, .hsr-sheet-actions { display: none !important; }
    .hsr-hero, .hsr-panel, .hsr-card, .hsr-section { box-shadow: none !important; break-inside: avoid; border-color: #ccc !important; }
    .hsr-body { grid-template-columns: minmax(0, 1fr) !important; }
    .hsr-page .hsr-wrap { max-width: 100%; padding: 0; }
    .hsr-orbit-box { background: #fff !important; color: #000 !important; }
}