/* ===== CSS Reset (modern minimal) ===== */
*,*::before,*::after{box-sizing:border-box;}html{font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.4;-webkit-text-size-adjust:100%;}body{margin:0;background:linear-gradient(135deg,#1d1e26 0%,#161823 60%,#0f1115 100%);color:#e9edf5;-webkit-font-smoothing:antialiased;font-size:15px;}
img,svg{display:block;max-width:100%;}

:root{
  --brand:#ffaa33;
  --brand-accent:#ff8a00;
  --error:#ff4d4f;
  --ok:#3cc76a;
  --bg:#1f212b;
  --bg-alt:#272a36;
  --border:rgba(255,255,255,0.08);
  --text:#e9edf5;
  --text-dim:#9aa0b5;
  --radius:18px;
  --radius-sm:8px;
  --shadow:0 4px 16px -4px rgba(0,0,0,.5),0 2px 4px -1px rgba(0,0,0,.4);
  --focus-ring:0 0 0 3px rgba(255,170,51,.35);
  --mono:'JetBrains Mono',monospace;
  --transition:150ms cubic-bezier(.4,0,.2,1);
}

body.light{background:linear-gradient(135deg,#ffffff 0%,#f0f3f8 70%,#e6ecf5 100%);color:#222;--bg:#fff;--bg-alt:#f5f7fa;--border:rgba(0,0,0,0.08);--text:#222;--text-dim:#6b7280;--shadow:0 4px 16px -4px rgba(0,0,0,.15),0 2px 4px -1px rgba(0,0,0,.12);}body.light .card{backdrop-filter:blur(12px) saturate(160%);}

/* Layout */
.app-header{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,48px);gap:24px;position:sticky;top:0;z-index:40;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.1));backdrop-filter:blur(14px) saturate(180%);border-bottom:1px solid var(--border);} 
.app-header h1{font-size:clamp(1.4rem,2.2vw,2.15rem);letter-spacing:-.5px;margin:0;font-weight:600;background:linear-gradient(90deg,var(--brand),#ffd466 70%);-webkit-background-clip:text;color:transparent;}

.header-actions{display:flex;align-items:center;gap:16px;}
.github-link{color:var(--text-dim);transition:color var(--transition);display:inline-flex;padding:6px;border-radius:8px;} .github-link:hover{color:var(--brand);background:rgba(255,255,255,0.04);} 

.container{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:32px;padding:32px clamp(16px,5vw,80px) 80px;max-width:1400px;margin:0 auto;}

.card{background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter:blur(18px) saturate(180%);border:1px solid var(--border);border-radius:var(--radius);padding:28px 30px 34px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,170,51,.25),transparent 60%);pointer-events:none;mix-blend-mode:overlay;}
.card h2{margin:0 0 18px;font-weight:600;font-size:1.15rem;letter-spacing:.5px;text-transform:uppercase;color:var(--brand);}

form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;align-items:start;}

.field-group{display:flex;flex-direction:column;gap:6px;position:relative;}
.field-group.inline input{width:100%;}
label{font-size:.75rem;letter-spacing:.7px;font-weight:500;text-transform:uppercase;color:var(--text-dim);}
input[type=number]{appearance:textfield;font:600 0.95rem/1 var(--mono);padding:12px 14px;border:1px solid var(--border);background:rgba(0,0,0,0.35);color:var(--text);border-radius:var(--radius-sm);outline:none;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition);} 
body.light input[type=number]{background:rgba(255,255,255,0.7);} 
input[type=number]:focus{border-color:var(--brand);box-shadow:var(--focus-ring);} 
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:.8rem;line-height:1.3;cursor:pointer;color:var(--text-dim);} 
.checkbox input{margin-top:3px;accent-color:var(--brand);} 

.divider{grid-column:1/-1;height:1px;background:linear-gradient(to right,transparent,var(--border),transparent);margin:4px 0;}

.actions{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:8px;}
.btn{border:none;border-radius:var(--radius-sm);padding:12px 22px;font:600 .85rem Poppins,system-ui;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:background var(--transition),color var(--transition),transform var(--transition);background:var(--brand);color:#1a1a1a;box-shadow:0 4px 10px -2px rgba(255,170,51,.5);} 
.btn:hover{background:var(--brand-accent);} 
.btn.ghost{background:rgba(255,255,255,0.08);color:var(--text-dim);box-shadow:none;} 
.btn.ghost:hover{background:rgba(255,255,255,0.16);color:var(--text);} 

.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:8px;}
.result-box{background:linear-gradient(160deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02));border:1px solid var(--border);padding:16px 18px;border-radius:16px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;}
.result-box::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 85%,rgba(255,170,51,0.18),transparent 60%);mix-blend-mode:soft-light;pointer-events:none;}
.result-box h3{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--text-dim);} 
.value{font:600 1.35rem/1.1 var(--mono);display:flex;align-items:center;gap:6px;color:var(--text);} 
.value.positive{color:var(--ok);} 
.value.negative{color:var(--error);} 
.sub{font:500 .7rem/1 var(--mono);letter-spacing:.5px;color:var(--text-dim);} 

.note{margin-top:22px;font-size:.65rem;line-height:1.4;color:var(--text-dim);white-space:pre-line;}

.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:20px clamp(16px,4vw,48px) 44px;font-size:.7rem;color:var(--text-dim);border-top:1px solid var(--border);background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.1));backdrop-filter:blur(14px) saturate(180%);} 
.footer .small{opacity:.7;}

/* Theme Switch */
.theme-switch{--h:28px;position:relative;display:inline-flex;align-items:center;gap:8px;font-size:.65rem;letter-spacing:.5px;color:var(--text-dim);cursor:pointer;}
.theme-switch input{position:absolute;opacity:0;pointer-events:none;}
.theme-switch .slider{width:52px;height:var(--h);background:rgba(255,255,255,0.15);border-radius:var(--h);display:inline-block;position:relative;transition:background var(--transition);} 
.theme-switch .slider::before{content:"";position:absolute;width:24px;height:24px;border-radius:50%;background:var(--brand);top:2px;left:2px;transition:transform var(--transition),background var(--transition);box-shadow:0 2px 6px -1px rgba(0,0,0,.6),0 0 0 3px rgba(255,170,51,.35);} 
.theme-switch input:checked + .slider::before{transform:translateX(24px);} 
.theme-switch input:checked + .slider{background:rgba(255,255,255,0.25);} 

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);} }
.result-box{animation:fadeInUp .35s ease;} 

/* Responsive Tweaks */
@media (max-width:840px){.container{padding-bottom:120px;}.app-header{padding:16px 22px;}.card{padding:24px 24px 30px;}}
@media (max-width:520px){.results-grid{grid-template-columns:1fr;}form{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}input[type=number]{font-size:.85rem;padding:10px 12px;}}