:root{
  --bg0:#F6F7F9;
  --bg1:#ECEFF3;
  --card:#FFFFFF;
  --card2:#F8FAFC;
  --text:#0B0F14;
  --muted:#525B67;
  --line:#E5EAF0;
  --line-strong:#D6DDE7;

  --army-black:#0A0A0A;
  --army-green:#0B2A16;

  --accent:#FFCC01;
  --accent-strong:#E6B800;
  --accent-soft:rgba(255,204,1,.14);

  --green:#16A34A;
  --amber:#D97706;
  --red:#DC2626;

  --shadow: 0 14px 40px rgba(10,10,10,.10);
  --shadow-soft: 0 10px 22px rgba(10,10,10,.08);

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255,204,1,.08), transparent 62%),
    radial-gradient(800px 520px at 80% -10%, rgba(11,42,22,.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  padding:18px;
}

.app{
  max-width:560px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:18px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 2px 8px;
}

.titles h1{
  margin:0;
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.titles p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px;
  box-shadow:var(--shadow);
}

/* 🔥 UPDATED SECTION */
.modeRow{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  margin-bottom:12px;
}

.modeTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:.6px;
  color:var(--muted);
  text-transform:uppercase;
}

.segWrap{
  display:flex;
  gap:6px;
  padding:4px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:linear-gradient(180deg,#F4F6F8,#EEF1F5);
}

.seg{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:8px 12px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}

.seg.active{
  background:var(--army-black);
  color:var(--accent);
  border-color:var(--army-black);
  box-shadow:0 8px 18px rgba(10,10,10,.18);
}

/* Remaining styling unchanged */

.label{display:block;color:var(--muted);font-size:13px;font-weight:800;margin:10px 0 8px;}
input[type="number"]{
  width:100%;
  padding:16px;
  font-size:18px;
  font-weight:800;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
}
.actions{display:flex;gap:10px;margin-top:12px;}
.btn{flex:1;padding:14px;border-radius:var(--radius-sm);font-weight:900;cursor:pointer;}
.btn.primary{background:#0A0A0A;color:var(--accent);}
.btn.ghost{background:#F3F5F8;}
.result{
  margin-top:16px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  padding:16px;
  text-align:center;
}
.points{font-size:54px;font-weight:1000;}
.range{margin-top:6px;color:var(--muted);font-size:13px;}
.footer{margin-top:auto;color:var(--muted);font-size:12px;text-align:center;}