/* ── Calculator v4 ── */
.calc-hero { min-height:auto; padding:90px 0 14px; text-align:center; background:var(--hero-grad); }
.calc-hero h1 { font-size:clamp(1.4rem,3.5vw,2rem); margin-bottom:2px; }
.calc-hero h1 .hl { color:var(--accent); }
.calc-hero .hero-sub { font-size:0.88rem; color:var(--text-dim); max-width:560px; margin:0 auto; }

/* ── TAB BAR ── */
.tab-bar { max-width:780px; margin:0 auto 6px; padding:0 24px; display:flex; gap:6px; }
.tab-btn { flex:1; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text-dim); cursor:pointer; font-size:0.82rem; font-family:inherit; font-weight:500; transition:all 0.18s; white-space:nowrap; }
.tab-btn:hover { border-color:var(--accent); color:var(--text); background:var(--bg); }
.tab-btn.active { background:var(--accent); color:var(--btn-primary-text); border-color:var(--accent); font-weight:700; box-shadow:0 2px 8px rgba(56,189,248,0.2); }

/* ── PART 1: CARDS ── */
.metric-band { max-width:1000px; margin:0 auto 18px; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }

.info-card { max-width:1132px; margin:0 auto 20px; padding:22px 28px; background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.loc-label { min-width:70px; font-size:0.8rem; color:var(--text-dim); font-weight:500; }
.loc-section-label { font-size:0.72rem; color:var(--text-dim); margin-bottom:6px; margin-top:8px; letter-spacing:0.03em; }
.loc-tabs { display:flex; gap:0; margin-bottom:8px; }
.loc-tab { padding:7px 18px; border:1px solid var(--border); background:var(--bg); color:var(--text-dim); cursor:pointer; font-size:0.76rem; font-family:inherit; transition:all 0.15s; }
.loc-tab:first-child { border-radius:6px 0 0 6px; }
.loc-tab:last-child { border-radius:0 6px 6px 0; }
.loc-tab.active { background:var(--accent); color:var(--btn-primary-text); border-color:var(--accent); }
.loc-tab:not(.active):hover { background:var(--surface); color:var(--text); }
.loc-tab-panel { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.loc-row { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.loc-results { display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border); }
.loc-res-item { display:flex; align-items:center; gap:4px; font-size:0.76rem; }
.loc-res-item b { color:var(--text-dim); font-weight:500; }
.loc-val { color:var(--accent); font-weight:600; }
.loc-status { font-size:0.68rem; color:var(--text-dim); white-space:nowrap; }
.loc-input { padding:9px 12px; border-radius:6px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:0.8rem; font-family:inherit; transition:border-color 0.15s; }
.loc-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(56,189,248,0.1); }
.loc-input::placeholder { color:var(--text-dim); }
.loc-btn { padding:6px 12px; border-radius:18px; border:1.5px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; font-size:0.76rem; white-space:nowrap; font-family:inherit; transition:all 0.15s; }
.loc-btn:hover { background:var(--accent); color:var(--btn-primary-text); }
@media (max-width:768px) { .loc-row { flex-wrap:wrap; } .loc-input { flex:auto !important; width:100% !important; } .loc-status { width:100%; text-align:center; } }
.nav-input { padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.78rem; width:120px; font-family:inherit; }
.nav-input:focus { outline:none; border-color:var(--accent); }
.nav-input::placeholder { color:var(--text-dim); }
.metric-band.row2 { grid-template-columns:repeat(4,1fr); }
.metric-band.row3 { grid-template-columns:repeat(4,1fr); }
.metric-band.row4 { grid-template-columns:repeat(4,1fr); }
.band-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 16px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.06); transition:box-shadow 0.2s; }
.band-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.band-label { font-size:0.68rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:5px; font-weight:500; }
.band-value { font-size:1.7rem; font-weight:700; color:var(--text); line-height:1.2; }
.band-sub { font-size:0.65rem; color:var(--text-dim); margin-top:1px; }

/* ── PART 2: PARAMETERS ── */
.params-wrap { max-width:1180px; margin:0 auto 18px; padding:0 24px 12px; }
.params-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.params-grid > div > .param-group { width:100%; }

.col-header { padding:6px 12px 4px; font-size:0.78rem; font-weight:700; color:var(--accent); letter-spacing:0.02em; border-bottom:1.5px solid var(--accent); margin-bottom:4px; }

.hy-section-label { padding:8px 0 3px; font-size:0.7rem; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; }

.param-group { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:16px; }
.param-group:last-child { margin-bottom:0; }
.param-group-header { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; cursor:pointer; user-select:none; font-size:0.82rem; font-weight:600; color:var(--text); transition:background 0.15s; }
.param-group-header:hover { background:var(--border); }
.param-group-header .arrow { font-size:0.6rem; color:var(--text-dim); transition:transform 0.2s; }
.param-group.open .param-group-header .arrow { transform:rotate(90deg); }
.param-group-body { display:none; padding:4px 14px 14px; }
.param-group.open .param-group-body { display:block; }

.pr { margin-bottom:16px; }
.pr:last-child { margin-bottom:0; }
.pr-label { display:flex; justify-content:space-between; align-items:baseline; font-size:0.78rem; color:var(--text); margin-bottom:5px; font-weight:500; }
.pr, .dual-input { text-align:left; }
.pr-val { color:var(--accent); font-weight:700; font-size:0.8rem; }
.pr-val.gold { color:var(--gold); }
.pr.derived { background:var(--bg); border-radius:6px; padding:8px 10px; margin-bottom:16px; }
.pr.derived .pr-label { font-weight:600; }

.dual-input { display:grid; grid-template-columns:1fr 62px; gap:8px; align-items:center; }
.pr input[type="range"] { width:100%; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; background:var(--border); outline:none; cursor:pointer; }
.pr input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent); cursor:pointer; border:1.5px solid var(--surface); box-shadow:0 0 0 2px rgba(56,189,248,0.15); transition:box-shadow 0.15s; }
.pr input[type="range"]::-webkit-slider-thumb:hover { box-shadow:0 0 0 4px rgba(56,189,248,0.25); }
.pr input[type="range"]::-webkit-slider-thumb:active { box-shadow:0 0 0 6px rgba(56,189,248,0.3); }
.num-field { width:100%; padding:3px 4px; border-radius:4px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.73rem; text-align:center; font-family:inherit; transition:border-color 0.15s; }
.num-field:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(56,189,248,0.1); }

/* ── TOU price rows ── */
.tou-row { display:flex; align-items:center; gap:4px; margin-bottom:4px; padding:2px 0; }
.tou-label { font-size:0.75rem; font-weight:600; min-width:28px; }
.tou-time { flex:1; padding:2px 4px; border-radius:4px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.68rem; font-family:inherit; min-width:80px; }
.tou-price { width:46px; padding:2px 3px; border-radius:4px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.73rem; text-align:center; font-family:inherit; }
.tou-hour { width:32px; padding:2px 3px; border-radius:4px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.73rem; text-align:center; font-family:inherit; }
.tou-unit { font-size:0.65rem; color:var(--text-dim); }
.tou-price:focus,.tou-hour:focus { outline:none; border-color:var(--accent); }

.pr-note { font-size:0.62rem; color:var(--text-dim); margin-top:1px; line-height:1.2; }
.pr-sub { font-size:0.62rem; color:var(--text-dim); margin-bottom:2px; }
.pr-sub span { color:var(--accent); font-weight:600; }

.region-select-full { width:100%; padding:7px 10px; border-radius:5px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.78rem; margin-bottom:6px; cursor:pointer; }
.region-select-full:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(56,189,248,0.1); }
.repay-select { width:100%; padding:7px 10px; border-radius:5px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.78rem; cursor:pointer; margin-top:4px; }
.repay-select:focus { outline:none; border-color:var(--accent); }

/* ── PART 3: CHART ── */
.chart-band { max-width:1180px; margin:0 auto 18px; padding:0 24px 12px; }
.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 14px 6px; box-shadow:var(--shadow); }
.chart-card h3 { font-size:0.78rem; color:var(--text-dim); margin-bottom:4px; }
.chart-card canvas { display:block; }

.print-title { display:none; }
.print-sec { max-width:1180px; margin:0 auto 10px; padding:22px 24px 6px; font-size:0.88rem; font-weight:600; color:var(--text); letter-spacing:0.02em; }
.print-sec::after { content:''; display:block; margin-top:6px; border-bottom:2px solid var(--accent); }
.print-sec:first-of-type { padding-top:8px; }

/* ── PART 4: TABLE ── */
.table-band { max-width:1180px; margin:0 auto 18px; padding:0 24px 48px; }
.table-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:var(--shadow); }
.table-card h3 { font-size:0.78rem; color:var(--text-dim); margin-bottom:6px; }
.table-card table { width:100%; border-collapse:collapse; font-size:0.73rem; }
.table-card th, .table-card td { padding:4px 7px; text-align:right; border-bottom:1px solid var(--border); }
.table-card th { color:var(--text-dim); font-weight:600; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.03em; }
.table-card td:first-child, .table-card th:first-child { text-align:left; }
.table-card tr:last-child td { border-bottom:none; }
.table-card tr:hover td { background:var(--border); }
.calc-disclaimer { text-align:center; color:var(--text-dim); font-size:0.68rem; padding:0 24px 40px; max-width:700px; margin:0 auto; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .params-grid { grid-template-columns:1fr; }
  .metric-band { grid-template-columns:repeat(2,1fr); }
  .metric-band { grid-template-columns:repeat(2,1fr); }
  .chart-band { padding:8px 16px 10px; }
  .table-band { padding:0 16px 36px; }
}
@media (max-width:500px) {
  .calc-hero { padding:72px 0 10px; }
  .calc-hero h1 { font-size:1.2rem; }
  .metric-band { padding:6px 8px; gap:6px; }
  .band-card { padding:10px 8px; }
  .band-label { font-size:0.6rem; }
  .band-value { font-size:1.15rem; }
  .params-wrap { padding:8px; }
  .chart-band { padding:4px 8px 8px; }
  .table-band { padding:0 8px 28px; }
  .table-card table { font-size:0.64rem; }
  .table-card th, .table-card td { padding:2px 3px; }
}
/* ── Print / PDF ── */
@media print {
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg:#fff; --surface:#fff; --text:#111; --text-dim:#555; --accent:#0369a1; --accent2:#4338ca; --gold:#b45309; --border:#ddd; --shadow:none;
  }
  .nav, .calc-hero, .calc-disclaimer, .back-to-top, .skip-link, .btn-pdf { display:none !important; }
  body { background:#fff; color:#111; font-size:10pt; font-family:'PingFang SC','Microsoft YaHei',sans-serif; }
  body::before, body::after { display:none !important; }

  /* ── Info card (print) ── */
  .info-card { border:1px solid #ddd !important; box-shadow:none !important; background:#fff !important; padding:10px 14px !important; margin:0 auto 14pt; }
  .loc-row { margin-bottom:6px; }
  .loc-label { font-size:8pt; color:#555; }
  .loc-input { border:1px solid #ddd; background:#fafafa; font-size:8pt; padding:4px 8px; }
  .loc-btn { display:none; }
  .loc-tabs { display:none; }
  .loc-tab-panel { display:none !important; }
  .loc-section-label { font-size:7pt; color:#888; margin:2px 0 4px; }
  .loc-results { border-top:1px solid #eee; padding-top:6px; gap:14px; }
  .loc-res-item { font-size:7pt; }
  .loc-res-item b { color:#555; }
  .loc-val { color:#0369a1; }
  .loc-status { display:none; }

  /* ── Section titles (visible only in print) ── */
  .print-title { display:block !important; font-size:16pt; font-weight:800; color:#0369a1; text-align:center; padding:0; margin:0 0 14pt; border:none; position:relative; }
  .print-title::after { content:''; display:block; height:4px; margin-top:4pt; border-top:1.5px solid #0369a1; border-bottom:1.5px solid #0369a1; }
  .print-sec { display:block !important; font-size:11pt; font-weight:700; color:#111; padding:12pt 0 4pt; margin-bottom:8pt; border-bottom:1.5px solid #eee; }

  .chart-band { padding:0; }
  .metric-band { grid-template-columns:repeat(3,1fr) !important; padding:4px 0 10pt; gap:6px; }
  .metric-band.row2 { grid-template-columns:repeat(4,1fr) !important; }
  .metric-band.row3 { grid-template-columns:repeat(4,1fr) !important; }
  .metric-band.row4 { grid-template-columns:repeat(4,1fr) !important; }
  .band-card { border:1px solid #ddd; box-shadow:none; background:#fff; padding:8px 10px; }
  .band-label { color:#555; font-size:7pt; }
  .band-value { color:#111; font-size:14pt; }
  .band-sub { color:#888; font-size:6pt; }

  /* ── Part 4: Parameters ── */
  .params-wrap { padding:0; }
  .params-grid { grid-template-columns:repeat(3,1fr) !important; gap:8px; }
  .param-group { border:1px solid #ddd; box-shadow:none; background:#fff; margin-bottom:8px; break-inside:avoid; }
  .param-group-header { background:#f5f5f5; font-size:8pt; cursor:default; color:#111; padding:5px 10px; }
  .param-group-header .arrow { display:none; }
  .param-group-body { display:block !important; padding:4px 10px 6px; }
  .pr { margin-bottom:3px; }
  .pr-label { font-size:7pt; color:#111; }
  .pr-val { font-size:7pt; color:#0369a1; }
  .pr-note, .pr-sub { font-size:6pt; color:#888; }
  .pr input[type="range"] { display:none; }
  .num-field { display:none; }
  .dual-input { display:none; }
  .region-select-full { display:none; }
  .pr.derived { background:#f9f9f9; border-left:3px solid #b45309; padding:4px 8px; }
  .pr.derived .pr-label { font-weight:600; }
  .pr.derived .pr-val { color:#b45309; }

  /* ── Part 5: Chart ── */
  .chart-band { padding:0; }
  .chart-card { border:1px solid #ddd; box-shadow:none; background:#fff; padding:10px 12px; overflow:visible; }
  .chart-card h3 { color:#111; font-size:11pt; font-weight:700; padding-bottom:4pt; border-bottom:1.5px solid #eee; margin-bottom:8pt; }
  .chart-card canvas { max-width:100% !important; }

  /* ── Part 6: Table ── */
  .table-band { padding:0; }
  .table-card { border:1px solid #ddd; box-shadow:none; background:#fff; padding:10px 12px; }
  .table-card h3 { color:#111; font-size:11pt; font-weight:700; padding-bottom:4pt; border-bottom:1.5px solid #eee; margin-bottom:8pt; }
  .table-card table { font-size:7pt; width:100%; }
  .table-card thead th { background:#f5f5f5; color:#111; font-weight:600; }
  .table-card th, .table-card td { border-color:#ddd; padding:3px 5px; }
  .table-card tr:nth-child(even) td { background:#fafafa; }

  @page { margin:22mm 14mm 14mm 14mm; size:A4; @top-center { content: none; } @bottom-center { content: none; } }
}
@media (pointer:coarse) {
  .pr input[type="range"] { height:8px; }
  .pr input[type="range"]::-webkit-slider-thumb { width:20px; height:20px; }
  .num-field { font-size:16px; padding:4px 2px; }
}

/* ── Lat/Lon input ── */
.loc-latlon-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; width:100%; }
.loc-field-unit { display:inline-flex; align-items:center; gap:4px; }
.loc-field-label { font-size:0.76rem; color:var(--text-dim); font-weight:500; white-space:nowrap; }
.loc-latlon-input { width:90px !important; text-align:center; }
.loc-dms { width:52px !important; text-align:center; padding:7px 4px !important; font-size:0.78rem !important; }
.loc-unit { font-size:0.72rem; color:var(--accent); font-weight:600; }
.loc-sign-select { padding:3px 2px; border-radius:4px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:0.73rem; font-weight:600; font-family:inherit; cursor:pointer; width:46px; text-align:center; -moz-appearance:auto; appearance:auto; }
.loc-sign-select:focus { outline:none; border-color:var(--accent); }
.loc-city-row { display:flex; gap:6px; align-items:center; }