/* 防晒衣UPF选择 · 日光光谱卡：暖阳白 + 琥珀橙 + 深靛 */
.upf-page, .upf-modal, .upf-toast {
    --upf-bg: #fff8ec;
    --upf-card: #fffdf8;
    --upf-ink: #2c2418;
    --upf-mute: #7d7361;
    --upf-line: #eadfc9;
    --upf-brand: #c96a1b;
    --upf-brand2: #e4943c;
    --upf-deep: #263a6b;
    --upf-soft: #fbf0dc;
    --upf-shadow: 0 12px 32px rgba(120, 82, 30, .1);
    --upf-radius: 4px;
    --upf-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
    --upf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --upf-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
:root[data-theme="dark"] .upf-page,
:root[data-theme="dark"] .upf-modal,
:root[data-theme="dark"] .upf-toast {
    --upf-bg: #1a160f;
    --upf-card: #241f16;
    --upf-ink: #f5eddf;
    --upf-mute: #b7ab96;
    --upf-line: #3b3325;
    --upf-brand: #ffc27a;
    --upf-brand2: #ffd6a0;
    --upf-deep: #9db6f5;
    --upf-soft: #2c251a;
    --upf-shadow: 0 14px 38px rgba(0, 0, 0, .44);
}
.upf-page { background: var(--upf-bg); color: var(--upf-ink); font-family: var(--upf-sans); font-size: 15px; line-height: 1.85; padding-bottom: 56px; }
.upf-page * { box-sizing: border-box; }
.upf-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.upf-page .detail-breadcrumb { font-size: 13px; color: var(--upf-mute); padding: 18px 0 14px; }
.upf-page .detail-breadcrumb a { color: var(--upf-mute); text-decoration: none; }
.upf-page .detail-breadcrumb a:hover { color: var(--upf-brand); }
.upf-page .detail-breadcrumb .sep { margin: 0 9px; opacity: .55; }
.upf-page .detail-breadcrumb .current { color: var(--upf-ink); }
.upf-page b, .upf-page strong { color: var(--upf-brand); font-weight: 800; }
.upf-page input, .upf-page select { width: 100%; height: 41px; border: 1px solid var(--upf-line); border-radius: 3px; background: var(--upf-card); color: var(--upf-ink); font: 15px var(--upf-mono); padding: 0 11px; outline: none; }
.upf-page select { font-family: var(--upf-sans); font-size: 14px; }
.upf-page input:focus, .upf-page select:focus { border-color: var(--upf-brand2); box-shadow: 0 0 0 3px rgba(228, 148, 60, .16); }

.upf-hero { display: grid; grid-template-columns: 1.14fr .86fr; gap: 22px; margin: 8px 0 20px; }
.upf-editorial { background: var(--upf-card); border: 1px solid var(--upf-line); border-top: 7px solid var(--upf-brand); border-radius: var(--upf-radius); box-shadow: var(--upf-shadow); padding: 28px 30px; }
.upf-kicker { font: 700 11px var(--upf-mono); letter-spacing: .24em; color: var(--upf-deep); }
.upf-hero h1 { font-family: var(--upf-serif); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.32; font-weight: 800; letter-spacing: -.01em; margin: 12px 0 10px; }
.upf-sub { font-size: 16px; line-height: 1.95; color: var(--upf-mute); margin: 0 0 20px; max-width: 62ch; }
.upf-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: var(--upf-soft); border-radius: 3px; padding: 16px; }
.upf-form label, .upf-batch-form label { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--upf-mute); }
.upf-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.upf-toggle { display: flex; align-items: center; gap: 7px; border: 1px solid var(--upf-line); border-radius: 3px; padding: 7px 11px; font-size: 12.5px; cursor: pointer; background: var(--upf-card); }
.upf-toggle input { width: 15px; height: 15px; flex: none; accent-color: var(--upf-brand); }
.upf-toggle.is-on { border-color: var(--upf-brand); background: rgba(201, 106, 27, .1); font-weight: 800; }
.upf-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--upf-mute); }
.upf-quick button { border: 1px solid var(--upf-line); border-radius: 3px; background: var(--upf-card); color: var(--upf-ink); padding: 5px 11px; font-size: 12px; cursor: pointer; }
.upf-quick button:hover { border-color: var(--upf-brand); }
.upf-note { font-size: 11.5px; color: var(--upf-mute); margin: 14px 0 0; }

.upf-spectrum { background: linear-gradient(170deg, #fff3d8, #f6dcae); border: 1px solid var(--upf-line); border-radius: var(--upf-radius); padding: 20px 22px; box-shadow: var(--upf-shadow); }
:root[data-theme="dark"] .upf-spectrum { background: linear-gradient(170deg, #2a2316, #1e1a12); }
.upf-spec-tag { font: 700 10.5px var(--upf-mono); letter-spacing: .2em; color: var(--upf-deep); }
.upf-spec-bar { position: relative; height: 18px; border-radius: 3px; margin: 12px 0 5px; background: linear-gradient(90deg, #4caf6d 0%, #d8d34a 25%, #f2a23c 50%, #e35d3a 72%, #8b3fa8 100%); }
.upf-spec-bar i { position: absolute; top: -6px; width: 3px; height: 30px; background: var(--upf-ink); left: 50%; transition: left .4s; }
.upf-spec-bar i::after { content: ''; position: absolute; top: -5px; left: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--upf-ink); }
.upf-spec-labels { display: flex; justify-content: space-between; font: 10.5px var(--upf-mono); color: var(--upf-mute); }
.upf-spec-mid { display: grid; grid-template-columns: 1fr 118px; gap: 12px; align-items: center; margin: 16px 0 10px; }
.upf-weave svg { width: 100%; max-width: 160px; display: block; margin: 0 auto; }
.upf-weave-line { stroke: var(--upf-deep); stroke-width: 2; opacity: .3; }
.upf-weave-line.cross { stroke: var(--upf-brand); opacity: .42; }
.upf-lens { fill: rgba(255, 255, 255, .82); stroke: var(--upf-brand); stroke-width: 2; }
:root[data-theme="dark"] .upf-lens { fill: rgba(30, 26, 18, .9); }
.upf-lens-t { fill: var(--upf-brand); font: 800 15px var(--upf-mono); text-anchor: middle; }
.upf-lens-s { fill: var(--upf-mute); font: 10px var(--upf-sans); text-anchor: middle; }
.upf-weave-cap { display: block; text-align: center; font-size: 10.5px; color: var(--upf-mute); margin-top: 6px; }
.upf-dial { width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--upf-brand) 0deg, rgba(38, 58, 107, .12) 0deg); display: flex; align-items: center; justify-content: center; transition: background .4s; }
.upf-dial-inner { width: 88px; height: 88px; border-radius: 50%; background: var(--upf-card); border: 1px solid var(--upf-line); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--upf-serif); }
.upf-dial-inner b { font-size: 30px; color: var(--upf-brand); line-height: 1.1; }
.upf-dial-inner small { font-size: 10.5px; color: var(--upf-mute); }
.upf-spec-foot { border-top: 1px solid var(--upf-line); padding-top: 10px; font: 11px var(--upf-mono); color: var(--upf-mute); }

.upf-alert { border-radius: 3px; padding: 11px 15px; font-size: 13.5px; margin-bottom: 18px; background: var(--upf-soft); color: var(--upf-mute); }
.upf-alert.is-red { background: rgba(201, 106, 27, .14); color: var(--upf-brand); font-weight: 700; }
.upf-card { background: var(--upf-card); border: 1px solid var(--upf-line); border-radius: var(--upf-radius); box-shadow: var(--upf-shadow); padding: 20px 24px; margin-bottom: 18px; }
.upf-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 3px double var(--upf-line); padding-bottom: 10px; margin-bottom: 16px; }
.upf-card h2 { font-family: var(--upf-serif); font-size: 19px; margin: 0; font-weight: 800; }
.upf-card header small { font-size: 11.5px; color: var(--upf-mute); }
.upf-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 18px; }
.upf-kpi { background: var(--upf-card); border: 1px solid var(--upf-line); border-top: 4px solid var(--upf-deep); border-radius: 3px; padding: 13px 15px; }
.upf-kpi span { display: block; font-size: 11px; color: var(--upf-mute); }
.upf-kpi b { font: 800 21px var(--upf-mono); }
.upf-kpi small { display: block; font-size: 10.5px; color: var(--upf-mute); }
.upf-table-scroll { overflow-x: auto; }
.upf-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.upf-table th, .upf-table td { border-bottom: 1px solid var(--upf-line); padding: 8px 9px; text-align: left; vertical-align: top; }
.upf-table th { background: var(--upf-soft); font-size: 11.5px; color: var(--upf-mute); letter-spacing: .04em; }
.upf-table tr.is-rec { background: rgba(201, 106, 27, .1); font-weight: 800; }
.upf-scene-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.upf-scene { border: 1px solid var(--upf-line); border-radius: 3px; padding: 9px 10px; font-size: 11.5px; }
.upf-scene.is-on { border-color: var(--upf-brand); background: var(--upf-soft); }
.upf-scene b { display: block; font-size: 13px; }
.upf-scene em { font-style: normal; color: var(--upf-mute); font-family: var(--upf-mono); }
.upf-coverage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.upf-coverage div { border-left: 3px solid var(--upf-brand2); background: var(--upf-soft); border-radius: 3px; padding: 9px 11px; font-size: 12.5px; }
.upf-batch-form { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.upf-btn { border: 1px solid var(--upf-brand); background: var(--upf-brand); color: #fff; border-radius: 3px; padding: 9px 15px; font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: nowrap; font-family: var(--upf-sans); }
.upf-btn--ghost { background: transparent; color: var(--upf-brand); }
.upf-btn--primary { background: var(--upf-deep); border-color: var(--upf-deep); }
:root[data-theme="dark"] .upf-btn { color: #1a160f; }
:root[data-theme="dark"] .upf-btn--ghost { color: var(--upf-brand2); }
.upf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.upf-del { border: 0; background: transparent; color: var(--upf-brand); cursor: pointer; font-size: 12.5px; }
.upf-empty { color: var(--upf-mute); }
.upf-ai { border-top: 1px dashed var(--upf-line); margin-top: 18px; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.upf-ai-btn { border: 1px dashed var(--upf-deep); background: rgba(38, 58, 107, .07); color: var(--upf-deep); border-radius: 3px; padding: 10px 16px; font-size: 13.5px; font-weight: 800; cursor: pointer; font-family: var(--upf-sans); }
.upf-ai-btn:disabled { opacity: .6; cursor: wait; }
.upf-ai-status { font-size: 11.5px; color: var(--upf-mute); }
.upf-ai-box { margin-top: 12px; font-size: 13.5px; line-height: 1.95; white-space: pre-wrap; }
.upf-ai-box:empty { display: none; }
.upf-ai-box.is-ok { background: var(--upf-soft); border-left: 3px solid var(--upf-deep); border-radius: 3px; padding: 12px 14px; }
.upf-ai-box.is-err { color: var(--upf-brand); }
.upf-reading { max-width: 84ch; padding: 6px 4px 26px; }
.upf-reading h2 { font-family: var(--upf-serif); font-size: 21px; margin: 12px 0; }
.upf-reading p { color: var(--upf-mute); font-size: 14.5px; line-height: 2; margin: 0 0 12px; }
.upf-err { border-color: var(--upf-brand) !important; }

.upf-modal { position: fixed; inset: 0; z-index: 980; background: rgba(40, 30, 14, .62); display: flex; align-items: center; justify-content: center; padding: 20px; }
.upf-modal[hidden] { display: none !important; }
.upf-modal-card { position: relative; background: var(--upf-card); color: var(--upf-ink); border-radius: 5px; border: 1px solid var(--upf-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); max-width: 470px; width: 100%; padding: 28px 30px; }
.upf-modal-x { position: absolute; right: 14px; top: 8px; border: 0; background: transparent; font-size: 26px; color: var(--upf-mute); cursor: pointer; }
.upf-modal-kicker { font: 700 11px var(--upf-mono); letter-spacing: .12em; color: var(--upf-deep); }
.upf-modal-card h3 { font-family: var(--upf-serif); font-size: 23px; margin: 8px 0 16px; }
#upfModalBody { font-size: 13.5px; line-height: 1.9; }
.upf-mrow { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--upf-line); padding: 5px 0; }
.upf-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.upf-modal-note { font-size: 11.5px; color: var(--upf-mute); margin: 12px 0 0; }
.upf-toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 990; background: var(--upf-ink); color: var(--upf-bg); border-radius: 3px; padding: 10px 20px; font-size: 13px; }
.upf-toast[hidden] { display: none !important; }

@media (max-width: 1000px) {
    .upf-hero { grid-template-columns: 1fr; }
    .upf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .upf-scene-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .upf-batch-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .upf-wrap { padding: 0 14px; }
    .upf-editorial, .upf-spectrum, .upf-card, .upf-kpi { padding: 18px 15px; }
    .upf-form, .upf-kpis, .upf-scene-grid, .upf-coverage, .upf-batch-form { grid-template-columns: 1fr; }
    .upf-spec-mid { grid-template-columns: 1fr; }
    .upf-dial { margin: 0 auto; }
    .upf-table { min-width: 0; }
    .upf-table th:nth-child(8), .upf-table td:nth-child(8) { display: none; }
}
@media print {
    .upf-quick, .upf-actions, .upf-modal, .upf-toast, .upf-reading, .tskb, .upf-spectrum, .upf-ai { display: none !important; }
    .upf-page { background: #fff; }
    .upf-editorial, .upf-card, .upf-kpi { box-shadow: none; break-inside: avoid; }
    .upf-table { min-width: 0; }
}