:root{
  --bg:#0b1220;
  --card:#131c2e;
  --card-border:#22304a;
  --text:#e8edf7;
  --text-dim:#93a1bd;
  --accent:#22c55e;
  --accent2:#3b82f6;
  --warn:#f59e0b;
  --danger:#ef4444;
  --neutral:#6b7686;
  --radius:14px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f2f5fb;
    --card:#ffffff;
    --card-border:#dde3ef;
    --text:#101828;
    --text-dim:#5a6478;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:88px;
  -webkit-tap-highlight-color:transparent;
}
.app-header{
  position:sticky;top:0;z-index:10;
  background:var(--bg);
  padding:16px 16px 8px;
  border-bottom:1px solid var(--card-border);
}
.brand{font-size:20px;font-weight:700;}
.brand span{color:var(--accent2);}
#app{padding:12px 12px 0;max-width:640px;margin:0 auto;}
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
}
.card h2{
  margin:0 0 12px;
  font-size:15px;
  font-weight:700;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.04em;
  display:flex;align-items:center;gap:8px;
}
.field{margin-bottom:12px;}
.field label{
  display:block;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:4px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
input[type="text"],input[type="tel"],input[type="number"],input[type="date"],select,textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--card-border);
  background:transparent;
  color:var(--text);
  font-size:16px;
}
textarea{resize:vertical;font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent2);}

.tabs{
  display:flex;
  gap:8px;
  max-width:640px;
  margin:0 auto 14px;
  padding:0 12px;
}
.tab-btn{
  flex:1;
  padding:12px 8px;
  border-radius:12px;
  border:1px solid var(--card-border);
  background:var(--card);
  color:var(--text-dim);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.tab-btn.active{
  background:var(--accent2);
  border-color:var(--accent2);
  color:#fff;
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.checklist{display:flex;flex-direction:column;gap:2px;}
.chk{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 4px;
  border-bottom:1px solid var(--card-border);
  font-size:15px;
  cursor:pointer;
}
.chk:last-child{border-bottom:none;}
.chk input[type="checkbox"]{
  width:22px;height:22px;
  flex:none;
  accent-color:var(--accent);
}

.info-btn{
  margin-left:auto;
  width:22px;height:22px;
  border-radius:50%;
  border:1px solid var(--card-border);
  background:transparent;
  color:var(--text-dim);
  font-size:13px;
  line-height:1;
  cursor:pointer;
}

.result-box{
  margin-top:8px;
  padding:14px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--card-border);
  text-align:center;
}
.delta-value{font-size:22px;font-weight:700;margin-bottom:6px;}
.verdict{font-size:15px;font-weight:600;}
.verdict.ok{color:var(--accent);}
.verdict.warn{color:var(--warn);}
.verdict.danger{color:var(--danger);}
.verdict.neutral{color:var(--neutral);}

.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;
  display:flex;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg);
  border-top:1px solid var(--card-border);
  z-index:20;
}
.btn{
  flex:1;
  padding:14px;
  border-radius:12px;
  border:none;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.btn.primary{background:#25d366;color:#04310f;}
.btn.secondary{background:var(--accent2);color:#fff;}

.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  align-items:center;justify-content:center;
  z-index:30;
  padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:20px;
  max-width:420px;
  width:100%;
}
.modal h3{margin-top:0;}
.modal p{color:var(--text-dim);line-height:1.5;font-size:14px;}

.toast{
  position:fixed;
  left:50%;bottom:100px;
  transform:translateX(-50%) translateY(20px);
  background:#1f2937;
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:40;
  max-width:90%;
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}