/* ========== Theme ========== */
:root{
  --bg: #f7f8ff;
  --bg-soft: #eef1ff;
  --card: #ffffff;
  --text: #16192f;
  --muted: #596089;
  --primary: #3e60ff;
  --primary-strong: #2345ff;
  --success: #46d39a;
  --danger: #ff6b6b;
  --radius: 18px;
  --ring: 0 0 0 6px rgba(62,96,255,.15);
  --shadow: 0 12px 32px rgba(20,24,54,.12);
  --shadow-soft: 0 6px 18px rgba(20,24,54,.10);
}

/* ========== Layout ========== */
main {
  display:grid;
  place-items:center;
  padding:5% 16px; 
  gap:14px; 

  background-color: rgba(238, 241, 255, 0.3);
  background-blend-mode: lighten;
}

main #getStatsForm, main #result{
  width:min(750px, 100%);
}

main #result.hidden {
  opacity: 0;
}

main h2{
  margin:0 0 8px 0; 
  font-weight:800;
  font-size: 1.8em;
  letter-spacing:.2px;
  text-align:center;
  background: linear-gradient(90deg, var(--primary), var(--success));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ========== Form ========== */
main #getStatsForm{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  align-items:center;
  animation: floatIn .6s cubic-bezier(.2,.8,.2,1);
}

main input[type="text"]{
  width:100%;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  color:var(--text);
  padding:14px 16px;
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  outline:none;
  transition:border .2s ease, transform .06s ease;
}
main input::placeholder{ color:var(--muted) }
main input:focus{
  border-color: var(--primary);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}
main input:focus-visible{ outline: var(--ring) }

main button[type="submit"]{
  cursor:pointer;
  border:none;
  padding:14px 18px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.3px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(90deg, var(--primary), var(--primary-strong));
  color:white;
  box-shadow: 0 8px 18px rgba(62,96,255,.35);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
main button[type="submit"]:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(62,96,255,.4);
}
main button[type="submit"]:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(62,96,255,.35);
}

main #result{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.06);
  margin-top:22px;
}
main #result h3{
  margin-top:0;
  font-size: 1em;
  color:var(--primary);
}
main #result a{
  color:var(--primary);
  text-decoration:none;
}
main #result a:hover{ text-decoration:underline }
main #result ul{
  list-style:none;
  padding-left:0;
  margin:10px 0 0 0;
}
main #result li{
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
main #result li:last-child{ border-bottom:none }
main #result strong{
  color:var(--success);
}

/* Graph */
main #result .graph{
  display:block;
  width:100%;
  margin-top:18px;
  border-radius:var(--radius);
  box-shadow: var(--shadow-soft);
  border:1px solid rgba(255,255,255,.05);
}

/* State message */
main #result p{
  margin:0;
  padding:12px 0;
  text-align:center;
}
main #result p.error{
  color:var(--danger);
  font-weight:600;
}
main #result p.loading{
  color:var(--muted);
  font-style:italic;
}

/* Loading */
main .loading::after{
  content: " ⟳";
  display:inline-block;
  animation: spin 1s linear infinite;
  vertical-align: middle;
}

/* ========== Animation ========== */
@keyframes floatIn{
  from{opacity:0;transform:translateY(8px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media (max-width: 520px){
  #getStatsForm{grid-template-columns: 1fr;}
  button[type="submit"]{width:100%;}
}


/* ========== Intro section ========== */
main .intro{
  text-align:center;
  color:var(--muted);
  font-size:1em;
  margin:0 0 16px 0; 
  line-height:1.4; 
}
main .intro a{
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
}
main .intro a:hover{
  text-decoration:underline;
}

/* ========== Modal overlay ========== */
main #overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  z-index:10;
  opacity:1;
  transition:opacity .3s ease;
}
main #overlay.hidden{
  opacity:0;
  pointer-events:none;
}

/* ========== Modal ========== */
#modal{
  position:fixed;
  background: rgba(0, 0, 0, 0.5);
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:11;
  opacity:1;
  transition:opacity .3s ease, transform .3s ease;
}
#modal.hidden{
  opacity:0;
  pointer-events:none;
  transform:scale(0.98);
}
.modal-content{
  background:var(--card);
  padding: 2em 3.5em;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  max-width:800px;
  width:90%;
  max-height:90%;
  overflow: auto;
  text-align:center;
  animation: floatIn .4s ease;
}
.modal-content h3{
  margin-top:0;
  color:var(--primary);
}
.modal-content p{
  color:var(--muted);
  margin-bottom:20px;
}
.modal-content button{
  background:var(--primary);
  color:white;
  border:none;
  padding:10px 18px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:filter .2s ease, transform .08s ease;
}
.modal-content button:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}
.modal-content button:active{
  transform:translateY(0);
}

/* ========== Developer code style ========== */
pre{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding:10px 14px;
  overflow-x:auto;
  margin:10px 0;
  box-shadow: inset 0 0 12px rgba(0,0,0,.2);
}
code{
  font-family: "Fira Code", Consolas, monospace;
  font-size: 0.9rem;
  color: #a8c7ff;
  white-space: pre;
}
pre code .comment{ color:#6b799c; font-style:italic; }
pre code .keyword{ color:#86d3ff; }
pre code .number{ color:#ffd580; }
pre code .string{ color:#a1e5a1; }