/* ===== Palette (from your image) ===== */
:root{
  --primary:#68a1ed;    /* light blue */
  --ink:#131b43;        /* deep navy */
  --black:#000000;
  --white:#ffffff;

  --bg:#f7f9ff;
  --surface:#ffffff;
  --border:#e3e7f0;
  --muted:#5a6277;
  --ring: var(--primary);

  --radius:14px;
  --shadow-lg:0 20px 45px rgba(19,27,67,0.08), 0 6px 18px rgba(19,27,67,0.06);
  --shadow-sm:0 6px 16px rgba(19,27,67,0.08);
}

/* ===== Reset-ish ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--black);
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(104,161,237,.15), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(19,27,67,.08), transparent 55%),
    var(--bg);
}

/* Remove number spinners for cleaner look */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
input[type="number"]{ -moz-appearance:textfield }

/* ===== Layout ===== */
.container{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:0 16px;
}

/* ===== Top Bar ===== */
.topbar{
  background: var(--primary);
  color: var(--black);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner{ display:flex; align-items:center; min-height:64px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{
  width:80px; height:80px; object-fit:contain; border-radius:10px;
  padding:0px; box-shadow: var(--shadow-sm);
}
.brand__text{ line-height:1.15 }
.brand__name{ margin:0; font-size:1.1rem; letter-spacing:.2px }
.brand__tagline{ margin:2px 0 0; font-size:.85rem; opacity:.85 }

/* ===== Card ===== */
.card{
  margin:28px auto;
  padding:22px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.card__title{
  margin:4px 0 12px;
  color: var(--ink);
  font-size:1.28rem;
}

/* ===== Grid for inputs ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
.field{ display:flex; flex-direction:column; }
.field--full{ grid-column:1 / -1; }

label{
  color: var(--muted);
  font-size:.95rem;
  margin-bottom:6px;
}

input[type="number"]{
  width:100%;
  padding:12px 12px;
  font-size:1rem;
  background: var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
input[type="number"]:hover{ border-color:#cfd6e6 }
input[type="number"]:focus{
  outline:none;
  border-color: var(--ring);
  box-shadow: 0 0 0 4px rgba(104,161,237,.25);
}

/* ===== Results (Summary) ===== */
.summary{
  margin-top:20px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background: linear-gradient(180deg, rgba(104,161,237,.08), rgba(104,161,237,.03));
}
.summary__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 6px;
  border-bottom:1px dashed #e4e8f2;
}
.summary__row:last-child{ border-bottom:none }
.summary__label{ color: var(--muted); font-size:.98rem }
.summary__value{ font-size:1.05rem }

.summary__row--highlight .summary__label{ color: var(--ink) }
.summary__row--highlight .summary__value{
  color: var(--ink);
  font-weight:700;
}

.summary__row--badge{
  position:relative;
}
.summary__row--badge .summary__label::before{
  content:"";
  position:absolute; left:0; width:4px; height:60%;
  background: var(--primary); border-radius:3px;
  transform:translate(-10px, 0);
}

/* Make it clear margin is computed */
#marginLine::after{
  margin-left:6px;
  font-size:.9rem;
  color: var(--muted);
}

/* ===== Footer ===== */
.footer{
  text-align:center;
  color:#6a7286;
  font-size:.92rem;
  margin-bottom:28px;
}

/* ===== Responsive ===== */
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
  .brand__logo{ width:38px; height:38px }
  .brand__name{ font-size:1rem }
  .brand__tagline{ font-size:.8rem }
  .card{ padding:18px }
}

/* Larger screens polish */
@media (min-width: 1024px){
  .card{ padding:26px 28px }
  .summary__value{ font-size:1.08rem }
}