:root{
  --bg: #ffffff;
  --card: #ffffff;
  --accent-start: #16a34a;
  --accent-end: #10b981;
  --glass: rgba(255,255,255,0.85); /* frost for card */
  --muted: #475569; /* slate-600 */
  --radius: 12px;
  --text: #0f1724; /* slate-900 */

  /* full-page background image (change to your path) */
  --hero-img: url('/images/hero-simple-bg.jpg');

  /* tint strength over the image */
  --hero-tint: rgba(31,143,74,0.12);

  /* mobile card lift (if you want slight overlap feel) */
  --card-lift-mobile: -20px;
}

/* -------------------------
   Page + fixed background
   ------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: var(--bg);
  color: var(--text);
  margin:0;
  /* keep page padding but can be reduced if you want card nearer the edge */
  padding:32px;
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Fixed full-page background (behind everything) */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-9999;
  background-image: var(--hero-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment: fixed; /* desktop */
  will-change: transform;
}

/* green translucent tint overlay to match brand */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-9998;
  background: linear-gradient(180deg, var(--hero-tint), rgba(31,143,74,0.04));
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* Container keeps content centered and above fixed bg */
.container{max-width:980px;margin:0 auto;position:relative;z-index:2}

/* Brand area (kept from your original) */
.brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.brand .logo{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,#059669,#047857);display:flex;align-items:center;justify-content:center;font-weight:700;color:white}
.brand h1{font-size:18px;margin:0}

/* -------------------------
   Card: frosted glass that shows background behind it
   ------------------------- */
.card{
  /* Use a translucent white so the background image shows through slightly */
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86));
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.08);
  border: 1px solid rgba(15,23,36,0.06);
  position: relative;
  z-index: 3; /* above body::before/after */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* slight lift feel (optional): can be negative to peek into top */
  margin-top: 6px;
}
/* centered page heading above the form */
.page-title{
  text-align: center;
  color: var(--accent-start);       /* uses your accent green */
  padding: 8px 0;                   /* space above/below the text */
  margin: 6px 0 12px;               /* extra spacing control if needed */
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
/* Keep original form grid & responsive layout */
form.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
@media (max-width:760px){ form.grid{grid-template-columns:1fr} }

/* Labels, inputs and small helpers (unchanged visuals) */
label{font-size:13px;color:var(--muted);display:block;margin-bottom:6px}
.input{background:transparent;border:1px solid rgba(15,23,36,0.08);padding:12px 14px;border-radius:10px;color:var(--text);width:100%;outline:none;transition:all .15s}
.input:focus{box-shadow:0 6px 18px rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.8);transform:translateY(-1px)}

.field-help{font-size:12px;color:var(--muted);margin-top:6px}
.stud-name{display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;background:rgba(16,185,129,0.12);color:#065f46;font-weight:600}

.row{display:flex;gap:10px}
.btn{appearance:none;border:none;padding:10px 16px;border-radius:10px;background:linear-gradient(90deg,var(--accent-start),var(--accent-end));color:white;font-weight:600;cursor:pointer}
.btn:disabled{opacity:0.55;cursor:not-allowed}

.muted{color:var(--muted)}

.summary{background:rgba(15,23,36,0.02);padding:12px;border-radius:10px;border:1px solid rgba(15,23,36,0.04);font-size:14px}

.inline-label{display:flex;align-items:center;gap:8px}

.small{font-size:13px}

.alert{padding:10px;border-radius:9px;margin-bottom:12px}
.alert.error{background:rgba(254,226,226,0.8);color:#7f1d1d;border:1px solid rgba(254,215,215,0.8)}
.alert.success{background:rgba(236,253,245,0.8);color:#065f46;border:1px solid rgba(167,243,208,0.8)}

footer.note{margin-top:18px;color:var(--muted);font-size:13px}

/* small form tweaks */
.full{grid-column:1/-1}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* -------------------------
   Mobile / responsive fixes
   - many mobile browsers don't respect background-attachment:fixed,
     we'll fall back to scroll in a media query
   - tighten spacing & stack buttons for easy tapping
   ------------------------- */
@media (max-width:980px){
  body{padding:24px}
  .card{ padding:18px; margin-top: 4px; }
  form.grid{ gap:12px; }
}

@media (max-width:600px){
  /* mobile fallback for fixed background */
  body::before{ background-attachment: scroll; background-position: center; }

  body{ padding:16px; }

  /* allow card to overlap slightly but not too much */
  .card{ margin-top: var(--card-lift-mobile); border-radius:10px; padding:16px; }

  /* stack form fields and make buttons full-width for tapping */
  .hero-like { /* not necessary but kept for semantics if you want a top-specific class */ }

  form.grid{ grid-template-columns:1fr; gap:12px; }
  .hero h2, .brand h1 { font-size: 18px; } /* if you have hero headings on same page */

  .hero .muted, .muted { font-size: 13px; }

  .hero-card .cta-row,
  .card .cta-row,
  .card .row { flex-direction: column; align-items: stretch; gap:12px; }

  .search{ width:100%; min-width:0; }
  .btn{ width:100%; padding:12px; justify-content:center; }
}

/* slightly smaller on very small phones */
@media (max-width:420px){
  .page-title{ font-size: 1.0rem; padding: 6px 0; margin: 4px 0 10px; }
}

/* gentle elevation animation (optional) */
@media (prefers-reduced-motion: no-preference){
  .card{ transition: transform .18s ease, box-shadow .18s ease; }
  .card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(2,6,23,0.09); }
}