/* ---------- Base / Variables ---------- */
:root{
  --text:#eef2f6;
  --muted:#b8c2cc;
  --primary:#22c55e;
  --primary-ink:#072b12;
  --danger:#ef4444;
  --danger-ink:#2a0b0b;
  --glass-bg: rgba(15, 23, 42, .48);     /* slate-900 w/ opacity */
  --glass-brd: rgba(255,255,255,.10);
  --focus: 0 0 0 3px rgba(34,197,94,.35);
}

/* Mobile-first resets */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;color:var(--text);}

/* ---------- Background image ---------- */
.bg-cover{
  position:relative;
  background: #0b1220 url("../img/cafe-bg.jpg") center/cover no-repeat fixed;
}
.bg-cover::before{
  content:"";
  position:fixed; inset:0;
  background: radial-gradient(1200px 800px at 50% 20%, rgba(0,0,0,.15), rgba(0,0,0,.55)),
              linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,.60));
  pointer-events:none;
}

/* ---------- Layout ---------- */
.page{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
}
.card{
  width:100%;
  max-width:480px;
  border-radius:20px;
  padding:20px;
}
.card--glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* ---------- Typography ---------- */
.title{margin:0 0 6px;font-size:22px;letter-spacing:.2px}
.sub{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.5}
.label{display:block;margin:8px 0 8px;font-size:14px;color:var(--muted)}
.muted{color:var(--muted)}
.center{text-align:center}
.pill{margin-left:6px;display:inline-block;padding:3px 10px;border:1px solid var(--glass-brd);border-radius:999px;font-size:12px;color:var(--text);opacity:.9}

/* ---------- Stacks / Grids ---------- */
.stack{display:flex;flex-direction:column;gap:10px}
.grid{display:grid;gap:10px}
.grid-2{grid-template-columns:1fr 1fr}

/* ---------- Inputs ---------- */
.input-group{
  display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--glass-brd);
  border-radius:14px;
  padding:8px;
}
.prefix{
  min-width:68px;text-align:center;
  font-weight:600; letter-spacing:.5px;
  background: rgba(255,255,255,.06);
  border-radius:10px; padding:10px 12px;
}
.input{
  appearance:none; border:0; outline:0;
  flex:1; font-size:18px; padding:10px 12px;
  color:var(--text); background:transparent;
}
.input::placeholder{color:#9aa6b2}
.input:focus-visible{box-shadow: var(--focus); border-radius:10px}

/* ---------- Buttons ---------- */
.btn{appearance:none; border:0; cursor:pointer; display:inline-block; text-align:center;
     padding:14px 16px; border-radius:14px; font-weight:700; text-decoration:none}
.btn-lg{width:100%; font-size:16px}
.btn-primary{background:var(--primary); color:var(--primary-ink)}
.btn-ghost{background: rgba(255,255,255,.08); color:var(--text); border:1px solid var(--glass-brd)}
.btn-danger{background:var(--danger); color:var(--danger-ink)}
.btn:focus-visible{box-shadow: var(--focus)}

/* ---------- Alerts ---------- */
.alert{padding:12px;border-radius:12px;margin:4px 0 8px}
.alert-error{background: rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#fecaca}

/* ---------- Key/Value list ---------- */
.kv{display:flex;flex-direction:column;gap:10px;margin:10px 0 18px}
.kv > div{display:flex;justify-content:space-between;gap:14px;background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);border-radius:12px;padding:10px 12px}
.kv strong{font-weight:700}

/* ---------- Success icon ---------- */
.icon-check{
  display:inline-grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  background:rgba(34,197,94,.15); color:#86efac; font-size:28px; margin:0 auto 4px;
}

/* ---------- Responsive tweaks ---------- */
@media (min-width: 540px){
  .title{font-size:24px}
  .card{padding:24px}
}
/* add to css/style.css */
.input--box{background:rgba(255,255,255,.06);border:1px solid var(--glass-brd);border-radius:14px;padding:12px;font-size:16px}
}