/* Modern, minimal styles */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#94a3b8;
  --accent:#7c3aed;
  --accent-2:#06b6d4;
  --surface:#0b1220;
  --text:#e6eef8;
  --radius:12px;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,Segoe UI,system-ui,-apple-system,Roboto,'Helvetica Neue',Arial;
  background: linear-gradient(180deg,#071025 0%, #081428 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{padding-top:30px;padding-bottom:10px}
.brand{margin:0;font-size:1.6rem;letter-spacing:0.2px}
.tag{margin:6px 0 0;color:var(--muted)}
.main-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;padding:24px 0}
.panel{background:var(--glass);padding:20px;border-radius:var(--radius);backdrop-filter: blur(6px);box-shadow: 0 6px 20px rgba(2,6,23,0.6)}
.about h2{margin-top:0}
.form-card{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:0.9rem;color:var(--muted)}
.field input{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);outline:none}
.field input:focus{box-shadow:0 6px 18px rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.6)}
.actions{display:flex;gap:8px;margin-top:6px}
.btn{border:0;padding:10px 14px;border-radius:10px;background:transparent;color:var(--text);cursor:pointer;border:1px solid rgba(255,255,255,0.06)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none}
.btn:active{transform:translateY(1px)}
.results{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,0.04)}
.result-row{display:flex;justify-content:space-between;padding:6px 0}
.small{font-size:0.92rem}
.muted{color:var(--muted)}
.site-footer{padding:24px 0;text-align:center;color:var(--muted)}
@media (max-width:980px){
  .main-grid{grid-template-columns:1fr;}
  .calculator{order:-1}
}
