/* ===== HVAC Calculator — shared styles (light/intl theme) ===== */
:root{
  --bg:#f4f6f9; --panel:#ffffff; --ink:#1f2933; --muted:#5b6b7b;
  --brand:#0b6e99; --brand-d:#084e6c; --accent:#e8722b; --line:#dde3ea;
  --ok:#1a7f37; --warn:#b54708; --shadow:0 1px 3px rgba(16,32,48,.08),0 4px 16px rgba(16,32,48,.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,"Microsoft YaHei","Hiragino Sans",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; font-size:15px;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Top bar ---- */
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(90deg,var(--brand-d),var(--brand));
  color:#fff; padding:10px 18px; position:sticky; top:0; z-index:50;
  box-shadow:0 2px 10px rgba(8,78,108,.25);
}
.topbar .brand{font-weight:700; font-size:16px; letter-spacing:.2px; margin-right:auto; display:flex; align-items:center; gap:8px}
.topbar .brand small{font-weight:400;opacity:.85;font-size:12px}
.topbar .btn{
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35);
  padding:7px 13px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; transition:.15s;
}
.topbar .btn:hover{background:rgba(255,255,255,.26); text-decoration:none}
.langsel{display:flex; align-items:center; gap:6px}
.langsel label{font-size:12px; opacity:.9}
.langsel select{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:6px 8px; font-size:13px; min-width:120px;
}

/* ---- Layout ---- */
.layout{max-width:1180px; margin:0 auto; padding:18px 16px 40px}
.hero{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 24px; margin-bottom:18px}
.hero h1{margin:0 0 6px; font-size:22px; color:var(--brand-d)}
.hero p{margin:0; color:var(--muted); font-size:14px}
.breadcrumb{font-size:13px; color:var(--muted); margin:4px 0 14px}
.breadcrumb a{color:var(--brand)}

/* card grid (home) */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px; transition:.15s; display:flex; flex-direction:column; gap:8px;
}
.card:hover{border-color:var(--brand); transform:translateY(-2px)}
.card h3{margin:0; font-size:16px; color:var(--brand-d)}
.card p{margin:0; color:var(--muted); font-size:13px; flex:1}
.card .go{font-weight:600; color:var(--brand); font-size:14px}

/* calc layout: two columns */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:880px){ .calc{grid-template-columns:1fr} }
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.panel h2{margin:0 0 12px; font-size:17px; color:var(--brand-d); border-bottom:1px solid var(--line); padding-bottom:8px}
.intro{font-size:13px; color:var(--muted); margin:0 0 14px}

/* form */
.field{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.field label{flex:1; font-size:13px; color:var(--ink)}
.field label .u{color:var(--muted); font-size:12px}
.field input,.field select{
  width:140px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font-size:14px; text-align:right;
}
.field select{text-align:left}
.field input:focus,.field select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 2px rgba(11,110,153,.15)}
.actions{display:flex; gap:10px; margin-top:8px}
.btn-primary{background:var(--brand); color:#fff; border:none; padding:10px 18px; border-radius:8px; font-size:14px; cursor:pointer; font-weight:600}
.btn-primary:hover{background:var(--brand-d)}
.btn-secondary{background:#eef2f6; color:var(--ink); border:1px solid var(--line); padding:10px 18px; border-radius:8px; font-size:14px; cursor:pointer}
.btn-secondary:hover{background:#e2e8ef}

/* results table */
.results{margin-top:4px}
.results table{width:100%; border-collapse:collapse; font-size:13.5px}
.results td{padding:7px 8px; border-bottom:1px solid var(--line)}
.results td.k{color:var(--muted); width:62%}
.results td.v{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}
.results tr:last-child td{border-bottom:none}
.badge{display:inline-block; background:#eaf5fb; color:var(--brand-d); border-radius:6px; padding:2px 8px; font-size:12px; margin-left:6px}

.note{background:#fff8ef; border:1:1px solid #f3d9b5; border:1px solid #f3d9b5; border-radius:8px; padding:10px 12px; font-size:12.5px; color:var(--warn); margin-top:12px}
.disclaimer{background:#fbfdff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-top:22px; font-size:12px; color:var(--muted)}
.disclaimer b{color:var(--ink)}
.footer-meta{font-size:11.5px; color:var(--muted); margin-top:8px}
.sep{height:1px;background:var(--line);margin:14px 0}
hr.soft{border:none;border-top:1px solid var(--line);margin:14px 0}

/* ---- step-by-step detail (feature ①) ---- */
.steps{margin-top:16px; background:#f8fafc; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.steps h3{margin:0 0 8px; font-size:13px; color:var(--brand-d); text-transform:uppercase; letter-spacing:.04em}
.steps ol{margin:0; padding-left:0; list-style:none}
.steps li{display:flex; gap:8px; align-items:flex-start; padding:5px 0; font-size:12.5px; line-height:1.55; border-bottom:1px dashed #e6ebf1}
.steps li:last-child{border-bottom:none}
.steps .stepno{flex:0 0 auto; background:var(--brand); color:#fff; border-radius:50%; width:20px; height:20px; line-height:20px; text-align:center; font-size:11px; font-weight:700}

/* ---- toolbar buttons ---- */
.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.actions .btn-secondary, .actions .btn-primary{padding:8px 14px; font-size:13px}

/* ---- coefficient override note (feature ④) ---- */
.coef-note{margin-top:10px; background:#eef9f1; border:1px solid #bfe6c9; color:#1d6b34; border-radius:8px; padding:8px 12px; font-size:12px}

/* ---- inline SVG trend chart ---- */
.chart-wrap{margin:14px 0 4px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; box-shadow:var(--shadow)}
.trend-svg{display:block; max-width:360px; height:auto}

/* ---- input parameter summary above results (P1-①) ---- */
.summary-h{margin:0 0 8px; font-size:13px; color:var(--brand-d); text-transform:uppercase; letter-spacing:.04em}
.summary{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:14px; background:#f8fafc; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.summary td{padding:5px 8px; border-bottom:1px solid #eef1f5}
.summary tr:last-child td{border-bottom:none}
.summary td.k{color:var(--muted); width:62%}
.summary td.v{text-align:right; font-weight:600; font-variant-numeric:tabular-nums}

/* ---- shared link note under results ---- */
.shared-note{margin-top:12px; font-size:11.5px; color:var(--muted); font-style:italic}
.results .err{color:#b54708; font-weight:600}

/* ---- print: keep only the result report on the page (P3-⑦) ---- */
@media print{
  .topbar, .breadcrumb, .disclaimer, .calc .panel:first-child, .actions,
  .shared-note, .coef-note{display:none !important}
  .layout{max-width:none; padding:0}
  .calc{display:block}
  .calc .panel{border:none; box-shadow:none; padding:0}
  .chart-wrap{box-shadow:none; max-width:520px}
  .trend-svg{max-width:520px}
}