:root{
    --accent:#4caf50;
    --text:#222;
    --muted:#666;
  }
  
  *{ box-sizing:border-box; }
  
  body{
    margin:0;
    font-family:system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background:#f6f7f8;
    color:var(--text);
  }
  
  .wrap{
    max-width:720px;
    margin:40px auto;
    padding:0 16px;
  }
  
  h1{ margin:0 0 16px; }
  
  .card{
    background:#fff;
    border-radius:12px;
    padding:16px;
    box-shadow:0 6px 20px rgba(0,0,0,.06);
    margin-bottom:16px;
  }
  
  label{
    display:block;
    margin-bottom:6px;
    color:var(--muted);
  }
  
  input{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:16px;
  }
  
  /* Primary action button */
  .btn-primary{
    margin-top:12px;
    padding:12px 16px;
    border:none;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-weight:700;
    cursor:pointer;
  }
  .btn-primary:disabled{ opacity:.7; cursor:not-allowed; }
  
  /* Inline buttons + input row */
  .row{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
  }
  .row input{ flex:1; min-width:160px; }
  
  .btn-ghost{
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #ddd;
    background:#fff;
    color:var(--text);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
    white-space:nowrap;
  }
  .btn-ghost:hover{ background:#f9f9f9; border-color:#ccc; }
  
  .msg{ color:#c00; margin:8px 0; }
  
  .result-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .result-grid div{
    background:#fafafa;
    border:1px solid #eee;
    border-radius:8px;
    padding:10px;
  }
  .small{ color:var(--muted); font-size:14px; }
  
  /* Mobile: stack result tiles */
  @media (max-width:560px){
    .result-grid{ grid-template-columns:1fr; }
  }

  /* --- Results footnote --- */
.footnote {
  margin-top: 8px;
  color: #777;
  font-size: 0.9rem;
}

/* --- Button spinner --- */
.btn--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

.btn--loading .btn-label {
  visibility: hidden; /* keep width stable while spinner shows */
}

.btn--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.55);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}