* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:#e8ecf1; color:#1f2937; max-width:480px; margin:0 auto;
  min-height:100vh; user-select:none;
}
.app { display:flex; flex-direction:column; min-height:100vh; }

/* Header */
.app-header {
  background:linear-gradient(135deg,#eab308,#ca8a04);
  color:#fff; padding:20px 20px 46px; text-align:center; position:relative;
}
.header-title { font-size:20px; font-weight:700; letter-spacing:1px; }
.header-sub { font-size:12px; opacity:.8; margin-top:4px; }

/* Content */
.app-content { flex:1; padding:0 16px 90px; margin-top:-26px; }
.panel { display:none; animation:fadeIn .25s ease; }
.panel.active { display:block; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.panel-title {
  display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700;
  background:#fff; padding:14px 16px; border-radius:12px 12px 0 0;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.step-badge {
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  background:#eab308; color:#fff; border-radius:50%; font-size:13px; flex-shrink:0;
}

.form-group { background:#fff; padding:14px 16px; border-top:1px solid #f1f5f9; }
.form-group label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.input-wrap {
  display:flex; align-items:center; background:#f8fafc; border:1.5px solid #e2e8f0;
  border-radius:10px; overflow:hidden; transition:border-color .2s;
}
.input-wrap:focus-within { border-color:#eab308; }
.input-wrap input {
  flex:1; border:none; outline:none; background:transparent; padding:11px 14px;
  font-size:16px; font-weight:600; color:#0f172a; width:100%;
}
.input-wrap .unit { padding:0 14px; font-size:13px; color:#64748b; background:#f1f5f9; align-self:stretch; display:flex; align-items:center; }
.hint { font-size:12px; color:#94a3b8; margin-top:6px; }

/* Segmented control */
.segmented { display:flex; background:#f1f5f9; border-radius:10px; padding:4px; }
.seg-item { flex:1; border:none; background:transparent; padding:10px; border-radius:8px; font-size:14px; font-weight:600; color:#64748b; cursor:pointer; transition:all .2s; }
.seg-item.active { background:#fff; color:#ca8a04; box-shadow:0 1px 4px rgba(0,0,0,.12); }

/* Buttons */
.btn-next, .btn-back {
  width:100%; border:none; padding:14px; border-radius:12px; font-size:15px; font-weight:700;
  cursor:pointer; transition:transform .1s, opacity .2s;
}
.btn-next { background:linear-gradient(135deg,#eab308,#facc15); color:#fff; margin-top:6px; }
.btn-back { background:#f1f5f9; color:#475569; margin-top:10px; }
.btn-next:active, .btn-back:active { transform:scale(.98); opacity:.9; }

/* Results */
.result-card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.result-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed #e2e8f0; }
.result-item:last-child { border-bottom:none; }
.result-label { font-size:13px; color:#64748b; }
.result-value { font-size:15px; font-weight:700; color:#0f172a; }
.result-value.highlight { color:#ca8a04; font-size:20px; }
.result-value.danger { color:#dc2626; }
.result-value.warn { color:#d97706; }

/* Verdict box */
.verdict-box {
  margin-top:10px; padding:10px; border-radius:8px; font-size:13px; line-height:1.6;
}
.verdict-box.ok { background:#f0fdf4; color:#166534; }
.verdict-box.warn { background:#fef3c7; color:#92400e; }

/* Reference table */
.ref-table { background:#fff; border-radius:12px; padding:16px; margin-top:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.ref-title { font-size:14px; font-weight:700; margin-bottom:10px; }
.ref-table table { width:100%; border-collapse:collapse; font-size:13px; }
.ref-table th, .ref-table td { padding:8px 6px; text-align:left; border-bottom:1px solid #f1f5f9; }
.ref-table th { color:#64748b; font-weight:600; }
.ref-table tr:last-child td { border-bottom:none; }

/* Bottom navigation */
.bottom-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; background:#fff; display:flex;
  border-top:1px solid #e2e8f0; padding:6px 0 calc(6px + env(safe-area-inset-bottom)); z-index:10;
}
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; color:#94a3b8; cursor:pointer; transition:color .2s; }
.nav-item.active { color:#ca8a04; }
.nav-icon { font-size:20px; }
.nav-item span { font-size:11px; }
/* === layout fix: full-width header & bottom nav === */
html, body { height: 100%; }
body { max-width: none !important; margin: 0 !important; overflow: hidden; }
.app { height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 72px; }
.app-header { position: sticky; top: 0; left: 0; right: 0; width: 100%; z-index: 30; }
.app-content { flex: none; max-width: 720px; margin: 0 auto; padding: 16px 16px 90px !important; }
.panel-title { position: relative; z-index: 31; }
.bottom-nav { position: fixed !important; bottom: 0; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; max-width: none !important; z-index: 40; }