:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --shadow: 0 14px 38px rgba(2,6,23,.10);
  --shadow2: 0 10px 22px rgba(2,6,23,.08);
  --radius: 18px;
  --radius2: 14px;
  --primary:#1d4ed8;
  --primary2:#60a5fa;
  --warn:#b45309;
  --good:#047857;
  --bad:#b91c1c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(800px 420px at 10% 0%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(760px 420px at 90% 20%, rgba(29,78,216,.12), transparent 60%),
    var(--bg);
}
.container{max-width:1240px;margin:0 auto;padding:22px;}
@media (max-width: 640px){ .container{padding:14px;} }
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;}

.btn{
  border:1px solid transparent;
  padding:10px 14px;
  border-radius:14px;
  font-weight:950;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
}
.btn:active{transform: translateY(1px);}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  box-shadow: 0 14px 28px rgba(29,78,216,.18);
}
.btn-primary:hover{filter:brightness(.98)}
.btn-ghost{background:#fff;color:var(--text);border-color:var(--line);}
.btn-ghost:hover{background:#f8fafc}
.btn-warn{background:rgba(180,83,9,.10);color:var(--warn);border-color:rgba(180,83,9,.22);}
.btn-warn:hover{background:rgba(180,83,9,.14)}

.top{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.top-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{
  width:42px;height:42px;border-radius:16px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  display:grid;place-items:center;
  color:white;font-weight:950;
  box-shadow:0 14px 28px rgba(29,78,216,.16);
}
.brand-title{font-weight:990; letter-spacing:.2px;}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.top-actions{display:flex;gap:10px;flex-wrap:wrap;}

.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:stretch;
  margin-top:14px;
  margin-bottom:16px;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr;} }
.hero-left h1{margin:0 0 6px;font-size:32px;letter-spacing:-.02em;}
@media (max-width: 640px){ .hero-left h1{font-size:26px;} }

.hero-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
@media (max-width: 980px){ .hero-metrics{grid-template-columns:1fr;} }
.metric-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  padding:12px 14px;
  box-shadow:var(--shadow2);
}
.metric-title{font-weight:990;margin-bottom:8px;}
.metric-row{display:flex;gap:10px;flex-wrap:wrap;}
.metric{display:flex;gap:8px;align-items:baseline;border:1px solid var(--line);background:#fff;border-radius:14px;padding:8px 10px;}
.metric .k{font-size:12px;color:var(--muted);font-weight:990;}
.metric .v{font-size:18px;font-weight:990;}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
@media (max-width: 640px){ .card{padding:14px;} }
.card.soft{background:linear-gradient(180deg,#ffffff,#fbfdff);}
.card.tiny{box-shadow:var(--shadow2); padding:12px 14px; margin-top:12px;}
.tiny-title{font-weight:990;margin-bottom:8px;}

.soft-title{font-weight:990;margin-bottom:8px;}
.chip{
  display:inline-block;
  margin-top:10px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:950;
  font-size:12px;
  background:#fff;
}
.chip.ok{color:var(--good);border-color:rgba(4,120,87,.25);background:rgba(4,120,87,.08);}

.seg{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:6px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.segbtn{
  flex:1;
  min-width:160px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:990;
}
.segbtn.active{
  border-color:rgba(29,78,216,.35);
  background:rgba(29,78,216,.08);
  color:var(--primary);
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){ .grid{grid-template-columns:1fr;} }
@media (min-width: 981px){
  .grid > .card:nth-child(2){
    position: sticky;
    top: 88px;
  }
}

.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
h2{margin:0;font-size:18px;}

.searchbar{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  margin-bottom:12px;
}
.searchlabel{font-size:12px;font-weight:990;color:var(--muted);}
.search{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  outline:none;
  background:#fff;
}
.search:focus{border-color:#93c5fd; box-shadow:0 0 0 4px rgba(147,197,253,.30)}

.form{display:none;}
.form.active{display:block;}

.form-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 1100px){ .form-grid{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 640px){ .form-grid{grid-template-columns: 1fr;} }

.field .lbl{display:block;font-size:12px;font-weight:950;color:var(--muted);margin-bottom:6px;}
.input{
  width:100%;
  padding:11px 12px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  outline:none;
  background:#fff;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.input:focus{border-color:#93c5fd; box-shadow:0 0 0 4px rgba(147,197,253,.35)}

.toggle{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  cursor:pointer;
  user-select:none;
  background:#fff;
}
.toggle input{display:none}
.toggle-ui{
  width:42px;height:24px;border-radius:999px;
  background:#e2e8f0;
  position:relative;
  transition:.15s;
}
.toggle-ui::after{
  content:"";
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:999px;
  background:#fff;
  box-shadow: 0 6px 16px rgba(2,6,23,.12);
  transition:.15s;
}
.toggle input:checked + .toggle-ui{background:rgba(29,78,216,.25);}
.toggle input:checked + .toggle-ui::after{left:21px;background:var(--primary);}
.toggle-text{font-size:13px;}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}

.result{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:10px 0 8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.badge{padding:8px 12px;border-radius:999px;font-weight:990;border:1px solid var(--line);background:#f8fafc;}
.badge.low{background:rgba(4,120,87,.10);border-color:rgba(4,120,87,.25);color:var(--good);}
.badge.high{background:rgba(185,28,28,.08);border-color:rgba(185,28,28,.25);color:var(--bad);}
.big{font-size:34px;font-weight:990;letter-spacing:-.02em;}
@media (max-width: 640px){ .big{font-size:30px;} }

.proba3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px;}
@media (max-width: 640px){ .proba3{grid-template-columns: 1fr;} }
.pitem{border:1px solid var(--line); border-radius:14px; background:#fff; padding:10px 12px;}
.pk{font-size:12px;color:var(--muted);font-weight:990;}
.pv{font-size:16px;font-weight:990;margin-top:4px;}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 8px;}
.tab{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:950;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.tab:active{transform: translateY(1px);}
.tab.active{border-color:rgba(29,78,216,.35);background:rgba(29,78,216,.08);color:var(--primary);}
.pane{display:none;}
.pane.active{display:block;}
.img{width:100%;border-radius:16px;border:1px solid var(--line);background:#fff;}
.empty{padding:12px;border:1px dashed var(--line);border-radius:14px;background:#fbfdff;}
.table-wrap{overflow:auto;}
.table{width:100%;border-collapse:collapse;margin-top:8px;}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;}
.table th{color:var(--muted);font-weight:990;background:#fbfdff;}
.pos{color:var(--bad);font-weight:950;}
.neg{color:var(--good);font-weight:950;}

.footer{margin-top:20px;border-top:1px solid var(--line);background:#fff;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.footer-title{font-weight:990;}
\n
/* ---- Label Fix for Long Fetal Health Feature Names ---- */
.lbl{
  display:flex;
  flex-direction:column;
  gap:4px;
  line-height:1.25;
  word-break:break-word;
}
.lbl-title{
  font-size:13px;
  font-weight:700;
  color:#334155;
  white-space:normal;
}

/* -------- Fetal Form: List Layout (Label kiri, Input kanan) -------- */
.kvlist{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.kv{
  display:grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
@media (max-width: 900px){
  .kv{grid-template-columns: 1fr;}
}
.kv-label{min-width:0;}
.kv-title{
  font-size:13px;
  font-weight:900;
  color:#0f172a;
  line-height:1.25;
  word-break:break-word;
}
.kv-input{display:flex; justify-content:flex-end;}
@media (max-width: 900px){
  .kv-input{justify-content:stretch;}
}
.kv-input .input{max-width:360px;}
@media (max-width: 900px){
  .kv-input .input{max-width:none;}
}

/* Reduce hint density on very large lists */
.kv-hint{opacity:.9}

/* ---------- Header polish + animations ---------- */
.top{
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(240,249,255,.92), rgba(255,255,255,.92));
  backdrop-filter: blur(12px);
}
.logo{
  position:relative;
  overflow:hidden;
}
.logo::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 55%);
  transform: rotate(20deg);
  animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{
  0%{transform: translateX(-18%) rotate(20deg); opacity:.35;}
  50%{transform: translateX(18%) rotate(20deg); opacity:.60;}
  100%{transform: translateX(-18%) rotate(20deg); opacity:.35;}
}

/* Page entrance */
.hero, .grid, .metric-card, .card{
  animation: rise .55s ease both;
}
.metric-card{animation-delay:.05s}
.grid{animation-delay:.08s}
@keyframes rise{
  from{opacity:0; transform: translateY(10px);}
  to{opacity:1; transform: translateY(0);}
}

/* Micro interactions */
.metric-card:hover, .card:hover{
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 18px 48px rgba(2,6,23,.12);
}
.segbtn, .tab, .btn{will-change: transform;}