:root {
  --bg-dark: #040613;
  --panel-bg: #0a0e1a;
  --cyan: #2fe6ff;
  --cyan-mid: #16bde9;
  --red: #ff3b81;
  --text-light: #f0f4fa;
  --text-dim: #a9b4c6;
  --border-color: #1a1e2a;
}
html, body {
  overflow-x: hidden;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; padding:2.25rem;
  display:flex; justify-content:center;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text-light);
  background: radial-gradient(circle at center, #0b0f1e 0%, var(--bg-dark) 100%);
}
.container{
  width:100%; min-width: 430px; max-width:480px;
  background:linear-gradient(145deg,var(--panel-bg),#14161a 70%);
  border:1px solid var(--border-color); border-radius:18px;
  padding:1.75rem 1.5rem 2rem; text-align:center;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.55),0 2px 0 0 #111;
}
h1{
  margin:0 0 1.2rem; font-size:2rem; font-weight:600;
  letter-spacing:.5px; display:flex; align-items:center;
  justify-content:center; gap:.6rem;
  background:linear-gradient(90deg,var(--red),var(--cyan));
  -webkit-background-clip:text; color:transparent;
}
.pap-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pap-logo {
  width: 100%;
  max-width: 160px;
  height: auto;
  margin-bottom: 1.5rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}
/* Pace Inputs */
.input-group{display:flex;align-items:baseline;justify-content:center;gap:.5rem;margin:.55rem 0;}
.input-group input{
  width:6ch;font-size:2.25rem;font-weight:500;text-align:right;
  background:transparent;color:var(--text-light);
  border:1px solid transparent;padding:2px 6px;border-radius:8px;
  transition:border-color .25s;
}
.input-group input:focus{outline:none;border:2px solid var(--red);}
.input-group span{font-size:1rem;color:var(--text-dim);}
.equals{font-size:.8rem;letter-spacing:1px;text-transform:uppercase;margin:.2rem 0 .4rem;color:var(--text-dim);}
/* Buttons */
#swapBtn,.primary{
  background:linear-gradient(90deg,var(--cyan-mid),var(--cyan));
  border:none;padding:.55rem 1rem;border-radius:30px;
  font-size:.9rem;font-weight:600;color:#08232f;cursor:pointer;
  box-shadow:0 2px 4px -1px rgba(0,0,0,.4);
  transition:transform .15s,box-shadow .15s;
}
#swapBtn:hover,.primary:hover{transform:translateY(-2px);box-shadow:0 6px 14px -4px rgba(0,0,0,.5);}
#swapBtn:active,.primary:active{transform:translateY(0);box-shadow:0 2px 4px -1px rgba(0,0,0,.4);}
.secondary{
  background:#2a2d34;color:var(--text-dim);border:1px solid #363a42;
  padding:.55rem 1rem;border-radius:10px;font-size:.85rem;font-weight:600;
  letter-spacing:.5px;cursor:pointer;transition:.25s;
}
.secondary:hover{background:#333842;color:var(--text-light);}
/* Slider */
#slider{
  width:100%;margin:.9rem 0 1.2rem;appearance:none;height:6px;
  border-radius:3px;background:linear-gradient(90deg,var(--red) 0%,var(--cyan) 100%);
  cursor:pointer;
}
#slider::-webkit-slider-thumb{
  appearance:none;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--cyan-mid));
  border:2px solid #111;box-shadow:0 2px 6px rgba(0,0,0,.6);transition:transform .15s;
}
#slider::-webkit-slider-thumb:hover{transform:scale(1.08);}
#slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan-mid),var(--red));
  border:2px solid #111;box-shadow:0 2px 6px rgba(0,0,0,.6);
}
/* Predictions */
.predictions{text-align:left;font-size:.9rem;display:flex;flex-direction:column;gap:4px;margin:.85rem 0 .4rem;}
.prediction-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 8px 3px;border-radius:8px;background:#1d2127;
  border:1px solid #1f242b;position:relative;overflow:hidden;
}
.input-group input {
  width: 100%;
  max-width: 6ch; /* or adjust with media query if too wide */
}
.prediction-row {
  flex-wrap: wrap; /* allow wrapping */
  word-break: break-word;
}

#slider {
  width: 100%;
  box-sizing: border-box;
}

button {
  max-width: 100%;
}

.prediction-row::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(47,169,220,0.12),rgba(230,70,70,0.12));
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.prediction-row:hover::before{opacity:1;}
.prediction-row .label-group{color:var(--text-dim);display:flex;align-items:center;gap:6px;}
.prediction-row .times{font-variant-numeric:tabular-nums;font-weight:500;display:flex;gap:.45rem;align-items:center;}
.prediction-row .delete-btn{
  background:transparent;border:none;color:var(--text-dim);
  font-size:14px;line-height:1;cursor:pointer;padding:2px 4px;
  border-radius:4px;opacity:0;transition:.2s;
}
.prediction-row:hover .delete-btn,.prediction-row .delete-btn:focus{opacity:1;}
.prediction-row .delete-btn:hover{background:#2a2d34;color:var(--red);}
.prediction-row input.distance-label,
.prediction-row input.distance-value{
  background:transparent;border:1px solid transparent;
  color:var(--text-light);font-size:.8rem;padding:4px 6px;
  border-radius:6px;transition:border-color .25s;
}
.prediction-row input.distance-label{width:80px;text-align:left;}
.prediction-row input.distance-value{width:72px;text-align:right;}
.prediction-row input:focus{outline:none;border:2px solid var(--red);}
.unit-toggle{
  display:inline-flex;border:1px solid #2d333b;border-radius:20px;
  overflow:hidden;background:#242a31;
}
.unit-toggle button{
  background:transparent;border:none;padding:4px 10px;
  font-size:.65rem;color:var(--text-dim);font-weight:600;
  letter-spacing:.5px;cursor:pointer;
}
.unit-toggle button.active{background:linear-gradient(90deg,var(--cyan-mid),var(--cyan));color:#041b24;}
/* Dual projection styling */
.proj-original{text-decoration:line-through;opacity:.55;}
.proj-adjusted{color:var(--cyan);font-weight:600;}
/* Environment Adjustment */
.env-adjust{
  margin-top:1.25rem;text-align:left;background:#16181c;
  border:1px solid #23272d;border-radius:14px;
  padding:1rem 1rem 1.1rem;
}
.env-adjust-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap;
}
.env-adjust-left{display:flex;align-items:center;gap:.55rem;}
#envEnableAdjusted{width:18px;height:18px;cursor:pointer;accent-color:var(--cyan);}
.env-adjust-title{
  margin:0;font-size:1rem;font-weight:600;letter-spacing:.5px;
  display:flex;align-items:center;gap:.4rem;
}
.env-adjust-title small{
  font-size:.55rem;font-weight:500;letter-spacing:.5px;
  background:#1f2328;border:1px solid #2e333a;
  padding:2px 6px;border-radius:6px;color:var(--text-dim);
  text-transform:uppercase;
}
#toggleEnvPanel{
  background:#2a2d34;color:var(--text-dim);border:1px solid #363a42;
  padding:.4rem .8rem;border-radius:8px;font-size:.65rem;
  font-weight:600;letter-spacing:.5px;cursor:pointer;
}
#toggleEnvPanel:hover{background:#333842;color:var(--text-light);}
.env-panel{animation:fadeIn .35s ease;}
.env-grid{
  display:grid;gap:.75rem .9rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-bottom:.55rem;
}
.env-field{display:flex;flex-direction:column;gap:.25rem;font-size:.65rem;color:var(--text-dim);}
.env-field span{font-weight:600;letter-spacing:.5px;font-size:.65rem;display:flex;align-items:center;gap:.25rem;}
.env-field small{font-weight:400;opacity:.7;}
.env-field input{
  background:#1f2328;border:1px solid #2e333a;color:var(--text-light);
  padding:.45rem .5rem;border-radius:6px;font-size:.75rem;width:100%;
}
.env-field input:focus{outline:none;border:1px solid var(--red);}
.env-checkbox{display:flex;align-items:center;gap:.5rem;font-size:.65rem;font-weight:600;}
.env-checkbox input{width:16px;height:16px;}
.env-results{
  font-size:.7rem;line-height:1.4;background:#1d2024;
  border:1px solid #272c32;border-radius:10px;padding:.55rem .7rem;
}
.env-adjusted-display{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:-.15rem 0 .4rem;
  font-size:2.25rem;font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
}
.env-adjusted-display span.label{
  font-size:.85rem;font-weight:600;letter-spacing:.5px;
  color:var(--text-dim);
  text-transform:uppercase;
  display:flex;align-items:center;gap:.45rem;
}
.env-adjusted-display span.value{
  font-size:inherit;font-weight:600;color:var(--cyan);
}
.factor-line{display:flex;justify-content:space-between;gap:.75rem;}
.factor-line span.value{font-weight:600;}
.env-applied-note{margin-top:.4rem;font-size:.6rem;color:var(--cyan);}
/* Changelog */
.changelog{
  margin-top:1.75rem;text-align:left;background:#16181c;
  border:1px solid #22252a;border-radius:14px;
  padding:1rem 1.1rem 1.25rem;
}
.changelog-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.25rem;}
.changelog-header h2{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:.5px;}
#toggleChangelogBtn{
  background:#2a2d34;color:var(--text-dim);border:1px solid #363a42;
  padding:.4rem .9rem;border-radius:8px;font-size:.7rem;
  font-weight:600;letter-spacing:.5px;cursor:pointer;
}
#toggleChangelogBtn:hover{background:#333842;color:var(--text-light);}
.changelog-entry h3{margin:.6rem 0 .4rem;font-size:.9rem;font-weight:600;color:var(--text-light);}
.changelog-date{font-weight:400;color:var(--text-dim);font-size:.7rem;}
.changelog-entry ul{margin:.25rem 0 0 1rem;padding:0;line-height:1.35;font-size:.72rem;}
.changelog-entry li{margin:.2rem 0;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}