:root{
  --bg:#0A0F1F; --card:#0F1930; --panel:#111F3A; --ink:#F2F6FF; --muted:#A9B8D8;
  --line:#28406C; --accent:#67B4FF; --accent2:#8AD1FF; --ok:#19C37D; --warn:#FFB020; --bad:#FF6B6B;
}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 800px at 10% 0%, #0D1732 10%, #0A0F1F 60%), var(--bg);
  color:var(--ink); font-family: "Manrope", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
.wrap{max-width:1080px; margin:34px auto; padding:0 22px}
header{margin-bottom:14px}
h1{font-size:28px; margin:0; letter-spacing:.2px; font-weight:900}
.sub{color:var(--muted); font-size:14px; font-weight:600; line-height:1.6}
.grid{display:grid; grid-template-columns: 1.05fr 1fr; gap:20px; align-items:start}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
  border:1px solid var(--line); border-radius:18px; padding:20px;
  box-shadow:0 14px 30px rgba(0,0,0,.28)
}
.card h2{font-size:16px; margin:0 0 10px 0; letter-spacing:.3px; text-transform:uppercase; font-weight:900}
.row{display:flex; align-items:center; gap:14px; margin:12px 0; flex-wrap:wrap}
label{width:290px; color:#D6E1F7; font-size:14px; font-weight:600}
input, select{
  background:#0F1930; border:1px solid #2A3C5F; color:var(--ink);
  padding:12px 14px; border-radius:12px; width:230px; font-size:14px; outline:none; font-weight:600
}
input.small{width:120px}
input:focus, select:focus{border-color:#3A5FA5; box-shadow:0 0 0 3px rgba(103,180,255,.18)}
.help{font-size:13px; color:#C1D0EE; margin-top:8px; line-height:1.7; font-weight:500}
.result{display:flex; align-items:baseline; gap:16px; margin-top:16px}
.result .tag{font-size:12px; color:#BBD0F2; font-weight:800; letter-spacing:.2px}
.result .val{font-size:34px; font-weight:900; letter-spacing:.3px}
.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
     padding:3px 8px; border-radius:8px; border:1px solid #233659; background:#0E172B; font-weight:800; font-size:12px; line-height:1.4}
.btnrow{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}
button{background:linear-gradient(135deg, var(--accent), #3F82FF); color:white; border:none;
       border-radius:12px; padding:11px 16px; font-weight:900; cursor:pointer; letter-spacing:.2px}
button.secondary{background:#0F1930; border:1px solid #29406A; color:#D6E1F7}
footer{margin-top:16px; color:#9FB2D6; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:12px}
.footnote{color:#4B6A93}
.socials{margin-left:auto; display:flex; gap:10px}
.social-btn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:#EDF7FF; border:1px solid #BBD9FF; transition:background .2s, transform .1s}
.social-btn:hover{background:#E2F2FF}
.social-btn:active{transform:translateY(1px)}
.social-btn svg{width:18px; height:18px; fill:#1C4D7E}
.epsgrid{display:grid; grid-template-columns: repeat(5, 1fr); gap:10px}
.epsgrid label{width:auto}
.bullet{margin:10px 0 0 18px; padding-left:10px; border-left:2px solid #2E4A7C}
.bullet li{margin:8px 0; font-weight:600; color:#D6E1F7; line-height:1.6}
.muteb{color:#AFC0E0; font-weight:700}
@media (max-width:980px){
  .grid{grid-template-columns: 1fr}
  label{width:220px}
  .epsgrid{grid-template-columns: repeat(3, 1fr)}
}

/* Small utility helpers extracted from inline styles */
.mt-10{ margin-top:10px; }
.mt-20{ margin-top:20px; }
.fw-800{ font-weight:800; }

/* --- Enhanced mobile responsiveness --- */
@media (max-width: 680px){
  .wrap{ padding: 0 14px; }
  h1{ font-size:22px; }
  .sub{ font-size:12px; }
  .card{ padding:16px; border-radius:16px; }
  .row{ flex-direction:column; align-items:stretch; gap:8px; margin:10px 0; }
  label{ width:auto; }
  input, select{ width:100%; box-sizing:border-box; }
  .help{ font-size:14px; }
  /* EPS grid items: stack label above input and make inputs full-width */
  .epsgrid > div{ display:flex; flex-direction:column; align-items:stretch; }
  .epsgrid label{ margin-bottom:4px; }
  input.small{ width:100%; }
  .result{ gap:10px; margin-top:12px; }
  .result .val{ font-size:28px; }
  .btnrow{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  .epsgrid{ grid-template-columns: repeat(2, 1fr); gap:8px; }
  footer{ flex-direction:column; align-items:flex-start; gap:8px }
  .socials{ margin-left:0 }
}

@media (max-width: 420px){
  .wrap{ padding: 0 12px; }
  h1{ font-size:20px; }
  .card{ padding:14px; }
  .epsgrid{ grid-template-columns: 1fr; }
  .kbd{ word-break: break-word; white-space: normal; }
  button{ width:100%; }
}