:root{
  --bg1: #f7fbff;
  --bg2: #fffaf6;
  --card: #ffffff;
  --accent: #6aa0ff;
  --accent2: #f6cfa6;
  --muted: #5b5b61;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(20,30,60,0.06);
}
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: linear-gradient(135deg,var(--bg1),var(--bg2)); margin:0; padding:18px; }
.foal-root{max-width:880px;margin:12px auto;padding:16px}
.foal-title{font-size:22px;text-align:center;margin:6px 0 12px; background: linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; color:transparent}
.foal-card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);border:1px solid rgba(100,140,200,0.06)}
.foal-intro{color:var(--muted);margin-bottom:12px}
.foal-form label{display:block;margin:10px 0;font-weight:600;color:#333}
.foal-form input[type="date"], .foal-form input[type="number"], .foal-form select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(110,140,200,0.08);box-sizing:border-box;font-size:14px}
.foal-actions{display:flex;gap:10px;margin-top:12px}
.foal-btn{flex:1;padding:12px;border-radius:10px;border:none;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font-weight:700;cursor:pointer}
.foal-btn-ghost{background:transparent;border:1px solid rgba(100,140,200,0.12);color:var(--accent)}
.foal-result{margin-top:14px;padding:14px;border-radius:10px;background:linear-gradient(180deg,rgba(106,160,255,0.03),rgba(246,207,166,0.02));border:1px solid rgba(106,160,255,0.06)}
.foal-est{font-size:18px;color:#244b8a;font-weight:700;margin:6px 0}
.foal-note{margin-top:10px;color:var(--muted);font-weight:600}
.foal-disclaimer{margin-top:12px;font-size:13px;color:#666}

@media(max-width:640px){
  .foal-actions{flex-direction:column}
  .foal-root{padding:10px}
}