/* 融合页专属样式：沿用官网色板，手机单列，桌面并排。 */
.fusion-page { -webkit-tap-highlight-color: transparent; }
.fusion-page .sky, .fusion-page .cloud { animation: none; }
.fusion-page .topbar { width: min(1180px, calc(100% - 32px)); }
.fusion-page-main { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: 20px auto 48px; }
.fusion-page-main section, .fusion-page-main details { scroll-margin-top: 20px; }
.fusion-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 6px 22px; }
.eyebrow { margin: 0 0 9px; color: #376549; font-size: 13px; font-weight: 700; letter-spacing: 2px; }
.fusion-intro h1 { margin: 0; font-family: var(--font-title); font-size: clamp(28px, 4vw, 42px); line-height: 1.35; color: var(--leaf); }
.fusion-intro h1 span { color: #b95b15; }
.fusion-intro h1 .title-note { font-family: var(--font-body); font-size: .46em; font-weight: 600; vertical-align: middle; margin-left: 8px; }
.intro-copy { margin: 12px 0 0; max-width: 570px; color: #5c604e; font-size: 14px; line-height: 1.8; }
.intro-pets { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 3px solid #bed6a8; border-radius: 50%; background: radial-gradient(ellipse at bottom, #e6f4ce, transparent 75%); }
.intro-pets img { width: 70px; height: 80px; object-fit: contain; image-rendering: pixelated; }
.intro-pets span { color: #648a51; font-size: 20px; font-weight: 800; }
.quick-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 2px 20px; font-size: 13px; }
.quick-nav a { color: #366348; text-decoration: none; padding: 8px 0; }
.quick-nav a:last-child { margin-left: auto; color: #706451; }
.race-search, .usage { background: #fffdf7; border: 1px solid var(--line); border-radius: 16px; }
.race-search summary, .usage summary { padding: 16px 20px; color: #536049; font-size: 14px; font-weight: 700; cursor: pointer; }
.race-search summary span { float: right; font-size: 21px; line-height: 1; }
.search-fields { padding: 0 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.search-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.section-heading h2 { margin: 0; font-size: 19px; color: var(--leaf); }
.section-heading > span { color: #7b705f; font-size: 12px; }
.material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pet-card { min-width: 0; padding: 18px; background: var(--paper); border: 2px solid #fff; border-radius: 22px; box-shadow: 0 4px 0 #e1dfcc, 0 10px 25px -18px #635333; }
.card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.step-number { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 13px; background: #e5efd8; color: var(--leaf); font-size: 16px; font-weight: 800; }
.card-heading h3 { margin: 0; color: var(--leaf); font-size: 19px; }
.card-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.fusion-page-main button, .fusion-page-main input, .fusion-page-main select, .fusion-page-main summary { touch-action: manipulation; }
.fusion-page-main input, .fusion-page-main select { min-width: 0; width: 100%; min-height: 44px; margin: 0; padding: 9px 10px; border: 1px solid #d8ddce; border-radius: 10px; color: #344934; background: #fff; font: inherit; font-size: 16px; line-height: 1.4; box-shadow: inset 0 1px 2px #39573608; }
.fusion-page-main input:disabled { color: #536149; background: #eef2e6; opacity: 1; -webkit-text-fill-color: #536149; }
.fusion-page-main input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.fusion-page-main input::-webkit-inner-spin-button, .fusion-page-main input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fusion-page-main input:focus-visible, .fusion-page-main select:focus-visible, .fusion-page-main button:focus-visible, .fusion-page-main summary:focus-visible, .fusion-page-main a:focus-visible { outline: 3px solid #e6a242; outline-offset: 3px; }
.clear-pet { flex-shrink: 0; margin-left: auto; padding: 10px 4px; min-height: 44px; border: 0; background: none; color: #73816b; font: inherit; font-size: 12px; cursor: pointer; }
.pet-picker { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; align-items: stretch; }
.pet-fields { display: grid; gap: 9px; }
.pet-fields label { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; color: #65715b; font-size: 12px; }
.pet-portrait { min-width: 0; display: grid; place-items: center; position: relative; background: radial-gradient(ellipse at 50% 85%, #d9e7b9 0, #f0f5de 36%, #faf9e9 75%); border-radius: 16px; overflow: hidden; }
.pet-portrait img { max-width: 100%; width: auto; height: auto; max-height: 96px; image-rendering: pixelated; position: relative; z-index: 1; }
.pet-portrait span { display: none; color: #91967a; font-size: 12px; }
.pet-portrait:has(img[src^="data:"]) img { display: none; }
.pet-portrait:has(img[src^="data:"]) span { display: block; }
.field-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; color: #566549; font-size: 12px; }
.field-caption span { color: #8a8876; font-size: 10px; }
.points-grid, .mm-inputs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.points-grid > label, .mm-inputs > label { display: grid; gap: 4px; text-align: center; color: #7b705f; font-size: 12px; }
.points-grid input, .mm-inputs input { text-align: center; }
.point-delta { min-height: 15px; color: #8c957b; font-size: 11px; }
.point_label_red { color: #c14733; font-weight: 700; }
.point_label_green { color: #287445; font-weight: 700; }
.properties { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px 8px; margin: 8px 0 12px; color: #7b705f; font-size: 12px; }
.properties > div { display: flex; align-items: center; min-height: 18px; gap: 1px; }
.properties img, .imgprop { width: 9px; height: 9px; border-radius: 2px; }
.levels { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 0; padding: 0; border: 0; }
.levels legend { float: left; padding: 12px 0; margin-right: 10px; font-size: 12px; color: #7b705f; }
.levels label { display: flex; align-items: center; gap: 4px; min-height: 44px; font-size: 12px; cursor: pointer; }
.levels input { width: 17px; height: 17px; min-height: 0; box-shadow: none; accent-color: var(--leaf); }
.advanced { margin-top: 9px; border-top: 1px dashed #dfe2cf; }
.advanced summary { padding: 14px 0 2px; color: #647851; font-size: 12px; cursor: pointer; }
.helper { font-size: 12px; color: #7b705f; line-height: 1.7; }
.preset-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.preset-buttons button { flex: 1 0 auto; min-height: 44px; padding: 8px; border: 1px solid #d5e0c5; border-radius: 9px; background: #f1f6e9; color: #456a39; font: inherit; font-size: 12px; cursor: pointer; }
.predict-button { width: 100%; min-height: 44px; margin-top: 14px; border: 1px solid #cadcba; border-radius: 10px; background: #e6f0dd; color: var(--leaf); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.prediction { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.prediction > div { display: flex; justify-content: space-between; }
.prediction strong { color: var(--leaf); font-variant-numeric: tabular-nums; }
.optional-pet { min-width: 0; border: 2px dashed #bacda4; border-radius: 22px; background: #f5f9e9b3; }
.optional-pet > summary { min-height: 140px; padding: 36px 20px; text-align: center; list-style: none; cursor: pointer; color: #567247; }
.optional-pet > summary::-webkit-details-marker { display: none; }
.optional-pet > summary span { display: block; font-weight: 700; }
.optional-pet > summary small { display: block; margin-top: 8px; color: #849472; }
.optional-pet[open] > summary { min-height: 44px; padding: 10px; font-size: 12px; }
.optional-pet[open] > summary small { display: none; }
.optional-pet .pet-card { box-shadow: none; border-radius: 0 0 20px 20px; }
.result-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px; }
.result-card { border-color: #e4edcc; }
.result-card .step-number { color: #a66715; background: #fff0c8; }
.result-card .pet-picker { grid-template-columns: minmax(0,1fr) 110px; }
.result-base { border-top: 1px dashed #dfe2cf; margin-top: 12px; }
.result-base summary { display: flex; justify-content: space-between; padding: 12px 0 0; cursor: pointer; color: #667452; font-size: 12px; }
.result-base b { color: #bf6c21; font-size: 16px; }
.feed-card { padding: 24px; border-radius: 22px; background: #fff3d9; border: 2px solid #fffaf0; align-self: stretch; }
.feed-card h3 { margin: 0; color: #876329; font-size: 17px; }
.feed-card p { color: #90774f; font-size: 12px; line-height: 1.7; }
.feed-card .points-grid { margin-top: 22px; }
.feed-total { text-align: right; }
.query-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0 0; padding: 18px 24px; background: #e7f0d8; border: 1px solid #cedfba; border-radius: 18px; }
.query-bar p { margin: 0; color: #668051; font-size: 13px; }
#opt_btn { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 50px; padding: 12px 24px; border: 1px solid #1c572f; border-radius: 13px; background: #286b3e; box-shadow: 0 4px 0 #184a2b; color: #fffdf0; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
#opt_btn:disabled { cursor: wait; opacity: .6; }
.forecast-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.forecast { border: 1px solid #e2dfce; border-radius: 18px; background: #fffdf7; padding: 18px 20px; }
.forecast h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #576d45; font-size: 16px; }
.forecast h3 span { font-size: 11px; color: #8c8775; font-weight: 400; }
.forecast_min h3 { color: #9b7644; }
.forecast_max { background: #f2f7e8; border-color: #d2dfbc; }
.forecast_max h3 { color: #357a40; }
.forecast dl { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 18px; }
.forecast dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.forecast dt { color: #8a836f; font-size: 12px; }
.forecast dd { margin: 0; font-size: 16px; color: #465f38; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.forecast dl > div:last-child { grid-column: 1 / -1; padding-top: 12px; border-top: 1px dashed #e2dfcd; }
.formula-note { color: #80775f; font-size: 12px; line-height: 1.8; margin: 16px 4px; }
.actual-egg { border: 1px solid #d4dec3; border-radius: 18px; background: #f8faee; margin-top: 22px; }
.actual-egg > summary { padding: 18px 20px; cursor: pointer; color: var(--leaf); font-size: 14px; font-weight: 700; }
.actual-egg > summary > span { float: right; }
.actual-egg-body { padding: 0 20px 20px; }
.actual-egg-body > .points-grid { max-width: 600px; }
.actual-egg-body > .predict-button { max-width: 600px; }
.actual-forecast { max-width: 600px; }
.usage { margin-top: 24px; }
.usage-content { padding: 0 20px 16px; color: #786e59; font-size: 13px; line-height: 1.9; }
.usage-content ul { padding-left: 20px; margin: 4px 0; }
.usage-content li { margin: 8px 0; }
.load-status { padding: 12px 16px; border: 1px solid #e6d1a9; border-radius: 12px; color: #865b21; background: #fff6df; font-size: 14px; }
.is-error { color: #ad362a !important; }
.fusion-page .swal2-popup { width: min(680px, calc(100vw - 24px)) !important; min-width: 0; border: 3px solid #fffdf2; border-radius: 22px; background: #fffdf7; color: #526148; font-family: var(--font-body); padding-bottom: 16px; }
.fusion-page .swal2-title { padding: 22px 16px 6px; color: var(--leaf); font-size: 20px; overflow-wrap: anywhere; }
.fusion-page .swal2-html-container { margin: 0; padding: 16px; max-height: 65vh; max-height: 65dvh; overflow: auto; font-size: 14px; }
.fusion-page .swal2-html-container table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; }
.fusion-page .swal2-html-container td, .fusion-page .swal2-html-container th { padding: 10px 5px; border-bottom: 1px solid #e4e4d3; overflow-wrap: anywhere; }
.fusion-page .swal2-html-container img { max-width: 100%; max-height: 88px; object-fit: contain; }
.fusion-page .swal2-html-container .imgprop { width: 8px; height: 8px; }
.fusion-page .swal2-confirm { min-width: 120px; min-height: 44px; border-radius: 10px; background: #286b3e; font-family: inherit; }
@media (hover: hover) and (pointer: fine) {
  #opt_btn:hover { background: #337e4b; }
  .preset-buttons button:hover, .predict-button:hover { background: #dceccf; }
  .clear-pet:hover, .quick-nav a:hover { color: #bf6c21; }
}
@media (max-width: 1000px) {
  .material-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .optional-pet { grid-column: 1 / -1; }
  .optional-pet > summary { min-height: 68px; padding: 16px; }
  .optional-pet > summary span, .optional-pet > summary small { display: inline; margin: 0 8px; }
  .intro-pets { gap: 7px; padding: 10px; }
  .intro-pets img { width: 48px; }
}
@media (max-width: 600px) {
  .fusion-page .topbar { width: calc(100% - 24px); flex-wrap: nowrap; gap: 4px; }
  .fusion-page .page-chip { display: none; }
  .fusion-page .back-home { margin-left: auto; white-space: nowrap; font-size: 12px; padding: 8px 10px; }
  .fusion-page-main { width: calc(100% - 24px); margin: 8px auto 22px; }
  .fusion-page { padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
  .fusion-intro { position: relative; display: block; padding: 24px 8px 12px; }
  .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .fusion-intro h1 { font-size: 29px; }
  .intro-copy { font-size: 12px; padding-right: 2px; line-height: 1.85; }
  .intro-pets { display: none; }
  .quick-nav { gap: 6px 14px; padding: 4px 8px 16px; font-size: 12px; }
  .quick-nav a:last-child { margin-left: 0; }
  .section-heading { margin-top: 24px; padding: 0 4px; }
  .section-heading h2 { font-size: 17px; }
  .section-heading > span { font-size: 11px; }
  .material-grid, .result-grid, .forecast-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .pet-card { padding: 16px; border-radius: 20px; }
  .optional-pet { grid-column: auto; }
  .card-heading { margin-bottom: 14px; }
  .card-heading p { font-size: 11px; }
  .pet-picker { grid-template-columns: minmax(0,1fr) 82px; gap: 10px; }
  .result-card .pet-picker { grid-template-columns: minmax(0,1fr) 82px; }
  .race-search summary, .usage summary { padding: 14px 16px; font-size: 13px; }
  .search-fields { grid-template-columns: minmax(0,1fr); padding: 0 16px 16px; }
  .feed-card { padding: 20px; }
  .feed-card .points-grid { margin-top: 14px; }
  .query-bar { position: fixed; z-index: 50; bottom: 0; left: 0; right: 0; display: block; margin: 0; padding: 9px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; border: 1px solid #d6dec7; background: #fffdf4; box-shadow: 0 -5px 24px #47603215; }
  .query-bar p { margin-bottom: 7px; text-align: center; font-size: 11px; }
  #opt_btn { width: 100%; min-height: 48px; justify-content: center; gap: 18px; padding: 10px 16px; }
  .forecast { padding: 18px 20px; }
  .forecast dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fusion-page .swal2-title { font-size: 18px; }
  .fusion-page .swal2-html-container { padding: 10px; font-size: 12px; }
  .fusion-page .swal2-html-container td { padding: 10px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fusion-page *, .fusion-page *::before, .fusion-page *::after { animation: none !important; transition: none !important; }
}