:root{
  --bg:#eef6fb;
  --card:#ffffff;
  --line:#dbe7f3;
  --text:#0f172a;
  --muted:#5b6b7d;
  --blue:#2563eb;
  --blue2:#0ea5e9;
  --red:#dc2626;
  --amber:#d97706;
  --green:#059669;
  --shadow:0 18px 42px rgba(15,23,42,.10)
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
  background:linear-gradient(180deg,#f4f9ff,#edf5ff);
  color:var(--text)
}
.app-shell{max-width:460px;margin:0 auto;min-height:100vh;padding-bottom:88px}
.topbar{
  position:sticky;top:0;z-index:20;
  padding:14px 16px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(219,231,243,.9)
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:44px;height:44px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1747d1,#2687ff);
  color:#fff;font-weight:800;font-size:1.05rem
}
.brand h1{margin:0;font-size:1.08rem;letter-spacing:-.02em}
.brand p{margin:2px 0 0;color:var(--muted);font-size:.84rem}
.screen{display:none;padding:16px}
.screen.active{display:block}
.hero{
  border-radius:28px;padding:18px;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.20), transparent 34%),
    linear-gradient(180deg,#0c2d70,#143e92 55%,#0f2f74 100%);
  color:#fff;box-shadow:0 20px 40px rgba(12,45,112,.28);margin-bottom:16px
}
.hero h2{margin:8px 0 6px;font-size:1.72rem;line-height:1.02;letter-spacing:-.03em}
.hero p{margin:0;color:rgba(255,255,255,.82);line-height:1.42}
.tag{
  display:inline-block;padding:7px 11px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;font-size:.76rem;font-weight:700
}
.banner{
  padding:12px 14px;border-radius:16px;background:#fff7ed;
  border:1px solid #fed7aa;color:#9a3412;margin-bottom:14px
}
.banner.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.card{
  background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px
}
.section-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px}
.section-head h3{margin:0;font-size:1.14rem;letter-spacing:-.02em}
.section-head p{margin:3px 0 0;color:var(--muted);font-size:.9rem}
.kpi-grid,.summary-grid,.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi-card,.mini-box,.module-card{
  background:#fbfdff;border:1px solid #e5edf7;border-radius:18px;padding:14px
}
.kpi-card span,.mini-box span{display:block;font-size:.75rem;color:#6b7280;margin-bottom:5px}
.kpi-card strong{display:block;font-size:1.9rem;color:#0f172a;line-height:1}
.kpi-card small{display:block;margin-top:6px;color:#64748b}
.module-card{text-align:left}
.module-card strong{display:block;margin-bottom:6px}
.module-card span{display:block;color:#68788d;font-size:.8rem;line-height:1.35}
.alert-list{display:grid;gap:10px}
.alert-row{
  display:flex;gap:12px;align-items:center;
  border-radius:16px;padding:12px 14px;border:1px solid #edf1f7;background:#fbfdff
}
.dot{width:10px;height:10px;border-radius:50%}
.danger .dot{background:var(--red)}
.warn .dot{background:var(--amber)}
label{display:block;font-size:.86rem;font-weight:700;margin:12px 0 6px}
input,select,textarea{
  width:100%;padding:13px 14px;border-radius:15px;
  border:1px solid #dbe5f0;background:#fbfdff;font-size:.96rem;color:#132238
}
textarea{min-height:94px;resize:vertical}
button,.btn{
  border:none;border-radius:16px;padding:14px 16px;font-size:.95rem;
  font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center
}
.primary{
  background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;
  box-shadow:0 14px 26px rgba(37,99,235,.26)
}
.ghost{background:#fff;border:1px solid #d9e5f1;color:#14263c}
.small{padding:10px 12px;font-size:.82rem}
.full{width:100%}
.action-grid{display:grid;grid-template-columns:1fr auto;gap:10px}
.info-box,.decision-summary,.module-summary{
  margin-top:14px;padding:14px;border:1px dashed #b7d2f7;border-radius:18px;background:#f8fbff;white-space:pre-wrap
}
.record-list{display:grid;gap:10px}
.record-item{padding:12px 14px;border:1px solid #e5edf7;border-radius:18px;background:#fbfdff}
.record-item strong{display:block;margin-bottom:6px}
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;max-width:460px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px 14px;
  background:rgba(255,255,255,.96);border-top:1px solid var(--line);backdrop-filter:blur(10px)
}
.bottom-nav button{
  padding:12px 8px;border-radius:14px;background:#fff;border:1px solid #e3ebf4;
  font-size:.8rem;color:#1c2b40
}
.bottom-nav button.active{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff}
.hidden{display:none}
.badge{
  padding:8px 10px;border-radius:999px;background:#eff6ff;border:1px solid #dbeafe;
  color:#1d4ed8;font-size:.76rem;font-weight:700
}
hr.sep{border:none;border-top:1px solid #eaf1f8;margin:14px 0}
@media (max-width:390px){
  .hero h2{font-size:1.54rem}
  .kpi-card strong{font-size:1.6rem}
}