/* EngTool - 水文计算 Hydrology Calculator
   Windows-style dialog aesthetics shared across all pages */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #ece9d8;
  --panel: #f6f4ee;
  --frame: #aca899;
  --border: #7f7f7f;
  --text: #1a1a1a;
  --accent: #1a5276;
  --accent-2: #2874a6;
  --result: #f39c12;
  --result-bg: #fef4e0;
  --menubg: linear-gradient(180deg,#eef1f4,#d6dae0);
}

html, body {
  font-family: "Segoe UI", Tahoma, Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top action bar ---------- */
.topbar {
  background: var(--menubg);
  border-bottom: 1px solid var(--frame);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar .brand { font-weight: 700; color: var(--accent); display:flex; align-items:center; gap:6px; margin-right:auto; }
.topbar .icon { width: 22px; height: 22px; }
.tbtn {
  border:1px solid var(--frame); border-radius:3px;
  background: linear-gradient(180deg,#ffffff,#e6eaef);
  padding: 5px 12px; cursor:pointer; color:var(--text);
  font-size: 13px;
}
.tbtn:hover { background: linear-gradient(180deg,#fff,#d4dbe4); }
.tbtn.primary { background: linear-gradient(180deg,#3a8ece,#1a5276); color:#fff; border-color:#14507a; }
.tbtn.primary:hover { background: linear-gradient(180deg,#4aa0e0,#1f628f); }

.langsel { font-size: 13px; padding: 4px 6px; border:1px solid var(--frame); border-radius:3px; background:#fff; }

/* ---------- Nav menu ---------- */
.navbar {
  background: var(--menubg);
  border-bottom: 1px solid var(--frame);
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
}
.nav-item {
  padding: 9px 14px; cursor:pointer; font-size: 14px; color: var(--text);
  border-bottom: 3px solid transparent; user-select:none;
}
.nav-item:hover { background: rgba(255,255,255,.5); }
.nav-item.active { border-bottom-color: var(--accent); font-weight:600; color: var(--accent); }

/* ---------- Layout ---------- */
.container { max-width: 1060px; margin: 20px auto; padding: 0 16px; }

.page-title { font-size: 20px; font-weight:700; margin: 6px 0 14px; color: var(--accent); }

/* ---------- Cards (home) ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 14px; }
.card {
  background: var(--panel); border:1px solid var(--frame); border-radius:6px;
  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card h3 { font-size:16px; margin-bottom:8px; color:var(--accent); }
.card p { font-size:13px; color:#444; line-height:1.5; }
.card:hover { box-shadow: 0 3px 9px rgba(0,0,0,.14); }

.hero { text-align:center; padding: 26px 0 16px; }
.hero .big { font-size: 30px; font-weight:800; color: var(--accent); }
.hero .sub { font-size: 15px; color:#555; margin-top:8px; }

/* ---------- Calculator panel ---------- */
.panel {
  background: var(--panel); border:1px solid var(--frame); border-radius:6px;
  padding: 16px; margin-bottom:16px;
}
.panel h2 { font-size:16px; margin-bottom:12px; color:var(--accent); border-bottom:1px solid var(--frame); padding-bottom:6px; }

.form-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:10px 18px; }
.field { display:flex; align-items:center; gap:8px; }
.field label { font-size:13px; flex:1; color:#333; }
.field input {
  width: 120px; padding:5px 7px; border:1px solid var(--border); border-radius:3px;
  background:#fff; font-size:14px; text-align:right;
}
.field input:focus { outline:2px solid var(--accent-2); }
.unit { font-size:12px; color:#666; width:48px; }

/* ---------- Buttons row ---------- */
.btnrow { display:flex; gap:10px; margin:6px 0 4px; flex-wrap:wrap; }
button.action {
  border:1px solid var(--frame); border-radius:3px; cursor:pointer;
  padding:7px 18px; font-size:14px; color:#fff;
}
.action.calc { background:linear-gradient(180deg,#43a047,#1e7a23); border-color:#1a6f1f; }
.action.calc:hover { background:linear-gradient(180deg,#4cb350,#23862a); }
.action.clear { background:linear-gradient(180deg,#757575,#545454); border-color:#4a4a4a; }
.action.clear:hover { background:linear-gradient(180deg,#8a8a8a,#636363); }
.action.back { background:linear-gradient(180deg,#3a8ece,#1a5276); border-color:#14507a; }
.action.back:hover { background:linear-gradient(180deg,#4aa0e0,#1f628f); }
.action.report { background:linear-gradient(180deg,#8e6a3a,#5d4423); border-color:#57401f; }
.action.report:hover { background:linear-gradient(180deg,#a37c46,#6b4e29); }
.action.small { padding:5px 12px; font-size:13px; }

/* ---------- Results ---------- */
.results { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-top:6px; }
.result-group { border:1px solid var(--frame); border-radius:6px; background:#fff; overflow:hidden; }
.result-group .rg-title {
  background: var(--menubg); padding:8px 12px; font-size:13px; font-weight:700;
  border-bottom:1px solid var(--frame);
}
.rg-body { padding: 8px 12px; }
.rrow { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px dashed #ddd; font-size:13px; }
.rrow:last-child { border-bottom:none; }
.rrow .rval {
  background: var(--result-bg); color:#b36800; font-weight:700; font-size:15px;
  border:1px solid #f0d39a; border-radius:3px; padding:2px 12px; min-width:76px; text-align:center;
}
.rrow .rval.warnok { color:#1e7d32; border-color:#a5d6a7; background:#e8f5e9; }
.rrow .rval.warnbad { color:#b71c1c; border-color:#ef9a9a; background:#ffebee; }

.formula-note { font-size:12px; color:#666; margin-top:10px; line-height:1.5; }

/* ---------- Standard table (frequency / roughness) ---------- */
.std-table { width:100%; border-collapse:collapse; font-size:13px; }
.std-table th, .std-table td { border:1px solid #dfe3e8; padding:5px 8px; text-align:left; }
.std-table th { background:#f0f4f8; }
.std-table td.num { text-align:right; font-variant-numeric: tabular-nums; }
.std-table th.tt, .std-table td.tt { text-align:center; font-size:12px; white-space:nowrap; }
.table-scroll { overflow-x:auto; }
.table-scroll .std-table th:first-child, .table-scroll .std-table td:first-child { position:sticky; left:0; background:#f0f4f8; z-index:1; }
.table-scroll .std-table td:first-child { background:#f7fafc; }
.std-table .hl { background: var(--result-bg); color:#b36800; font-weight:700; }

/* ---------- Charts & report ---------- */
.chart-box { margin-top:8px; }
.chart-box svg.chart-svg { width:100%; height:auto; border:1px solid var(--frame); border-radius:6px; background:#fff; }
.field select, .field textarea {
  border:1px solid var(--frame); border-radius:3px; padding:5px 6px;
  font-size:13px; font-family:inherit; background:#fff; color:#222; flex:1; min-width:0;
}
.field textarea { resize: vertical; min-height: 90px; font-family: Consolas, monospace; }
.field select:focus, .field textarea:focus { outline:2px solid var(--accent-2); }

/* ---------- Report modal ---------- */
.report-overlay {
  display:none; position:fixed; inset:0; z-index:2000; flex-direction:column;
  background:#fff; padding:12px 16px 24px; overflow:auto;
}
.report-overlay .report-toolbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 8px; border-bottom:1px solid var(--frame); margin-bottom:12px;
  position:sticky; top:-12px; background:#fff;
}
.report-overlay .rt-title { font-weight:700; color:var(--accent); font-size:16px; }
.report-overlay .rt-btns { display:flex; gap:8px; }
.report-overlay button {
  border:1px solid var(--frame); border-radius:3px; background:linear-gradient(180deg,#3a8ece,#1a5276);
  color:#fff; padding:6px 14px; cursor:pointer; font-size:13px;
}
.report-overlay button.close { background:linear-gradient(180deg,#757575,#545454); }
.report-overlay .report-body { max-width:860px; width:100%; margin:0 auto; }
.report-overlay .report-body table {
  width:100%; border-collapse:collapse; font-size:13px; margin:4px 0 8px;
}
.report-overlay .report-body td, .report-overlay .report-body th {
  border:1px solid #dfe3e8; padding:5px 8px; text-align:left;
}
.report-overlay .report-body th { background:#f0f4f8; }
.report-overlay .report-body h1 { font-size:22px; color:var(--accent); border-bottom:2px solid #3a8ece; padding-bottom:8px; }
.report-overlay .report-body h2 { font-size:15px; color:var(--accent); margin:18px 0 6px; border-left:4px solid #3a8ece; padding-left:8px; }
.report-overlay .report-body svg.chart-svg { width:100%; height:auto; border:1px solid #eef1f5; border-radius:4px; }
@media print { .report-overlay { position:static; padding:0; } .report-overlay .no-print { display:none !important; } }

/* ---------- Footer ---------- */
footer { text-align:center; color:#666; font-size:12px; padding: 22px 10px 30px; }
footer a { color: var(--accent); }

/* ---------- Help ---------- */
.help-section { margin-bottom:14px; }
.help-section h3 { color:var(--accent); margin-bottom:6px; font-size:15px; }
.help-section p, .help-section li { font-size:13px; color:#333; line-height:1.6; }
.help-section ul { padding-left:20px; }
.code { background:#eef1f4; border:1px solid var(--frame); border-radius:4px; padding:2px 6px; font-family:Consolas,monospace; font-size:12px; }

@media (max-width: 640px){
  .container { padding: 0 10px; }
  .topbar, .navbar { padding-left:8px; padding-right:8px; }
}

/* ---------- Integrated multi-scenario ---------- */
.panel-sub { background:#f7fafc; border:1px dashed var(--frame); border-radius:6px; padding:10px 12px; }
.panel-sub h4 { margin:0 0 8px; color:var(--accent); font-size:13px; }
.scn-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.scn-card { flex:1 1 300px; min-width:280px; border:1px solid var(--frame); border-radius:8px; background:#fff; overflow:hidden; }
.scn-card .scn-head { padding:7px 12px; font-weight:700; font-size:13px; color:#fff; }
.scn-head.scn1 { background:var(--accent); }
.scn-head.scn2 { background:#7d5fb0; }
.scn-head.scn3 { background:#b7791f; }
.scn-card .form-grid { padding:10px 12px; }
.result-group .rg-title.scn-hdr-ok { color:#2e7d32; }
.result-group .rg-title.scn-hdr-no { color:#c0392b; }
.std-table td.rec, .std-table th.rec { background:#eaf7ee; font-weight:700; color:#2e7d32; }

/* project history */
.history-box h4 { margin:0 0 6px; color:var(--accent); font-size:13px; }
.hist-item { display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px dashed #eee; font-size:13px; }
.hist-item:last-child { border-bottom:none; }
.hist-item .tt { color:#888; font-size:12px; margin-right:auto; }

/* buttons */
.action.danger { background:#c0392b; border-color:#a93226; }

/* ---------- Watershed regions schematic map ---------- */
.map-wrap { margin-top:6px; border:1px solid var(--frame); border-radius:6px; overflow:hidden; background:#eaf3fb; }
.map-wrap svg.map-svg { width:100%; height:auto; display:block; background:#eaf3fb; }
.map-wrap svg .mglab { pointer-events:none; font-weight:600; fill:#2f3b47; }
.map-wrap svg .rmark circle { transition: r .12s ease; }
.std-table tr.hlrow td { background:#fff1cc; font-weight:700; color:#8a6d00; }
.std-table td.strong { font-weight:700; color:#1a5276; }