/* =====================================================================
   MODERN FORM / AUTH / PHOTO-UPLOAD SYSTEM
   ---------------------------------------------------------------------
   Loaded after stylenew.css / template.css / stylenew-fixes.css so the
   cascade always wins, and driven entirely by the shared design tokens
   (--primary, --primary-mist, --border, --r-*, --shadow-*, --font-*)
   so the whole thing re-colours itself from School Settings → Theme.

   Components
   ----------
   .rf-*     Student / Parent registration forms
             student-registration.php, student-registration2.php
   .pp-*     Passport photo uploader
             upload-passport.php
   .cbt-up   CBT question & choice image uploader
             set-cbt2.php, set-cbt3.php
   .auth-*   Additions layered on the auth-page-v2 system
             login.php, admin.php

   Design notes (first principles)
   -------------------------------
   * One visual language: same radius, border, focus ring and typography
     as the rest of the portal, never a one-off style.
   * Compulsory fields are marked once, in one place: .req-star.
   * Every input is 4.8rem tall (48px) on desktop and 1.6rem font on
     phones (<16px triggers iOS auto-zoom — a real usability bug).
   * The uploader controls are *attached* to the preview: the camera
     button sits on the bottom-right edge of the avatar circle and the
     whole CBT tile is the file input, so there is no orphan button
     floating under the image.
   ===================================================================== */

/* =====================================================================
   0. SHARED PRIMITIVES
   ===================================================================== */

/* Compulsory-field marker — one class, used everywhere */
.req-star{
  color:#dc2626;
  font-weight:800;
  line-height:1;
  margin-left:.15rem;
  font-size:1.1em;
}

/* Accessible visually-hidden helper */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* =====================================================================
   1. REGISTRATION FORMS  (.rf-*)
   ===================================================================== */

.rf-page{
  position:relative;
  padding:4.2rem 0 6.4rem;
  min-height:60vh;
  background:
    radial-gradient(1100px 520px at 6% -12%, rgba(var(--primary-rgb),.10), transparent 62%),
    radial-gradient(900px 480px at 102% -4%, rgba(var(--gold-rgb),.13), transparent 58%),
    var(--bg);
  overflow:hidden;
}
.rf-page::before,
.rf-page::after{
  content:'';
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  opacity:.5;
}
.rf-page::before{
  width:34rem; height:34rem;
  bottom:-16rem; left:-12rem;
  background:radial-gradient(circle, rgba(var(--primary-rgb),.09), transparent 70%);
}
.rf-page::after{
  width:26rem; height:26rem;
  top:-10rem; right:-8rem;
  background:radial-gradient(circle, rgba(var(--gold-rgb),.14), transparent 70%);
}
.rf-page .container{ position:relative; z-index:1; }

.rf-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 31rem;
  gap:2.4rem;
  align-items:start;
  max-width:1120px;
  margin:0 auto;
}
.rf-layout--narrow{ grid-template-columns:minmax(0,1fr) 30rem; max-width:1040px; }

/* ---- Card ---- */
.rf-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-xl);
  box-shadow:0 20px 54px rgba(15,23,42,.09), 0 2px 8px rgba(15,23,42,.04);
  overflow:hidden;
  position:relative;
}
.rf-card::before{
  content:'';
  position:absolute; inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--primary), var(--primary-light) 55%, var(--gold));
}

.rf-card-head{
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:2.4rem 2.6rem 2.1rem;
  background:linear-gradient(135deg, rgba(var(--primary-rgb),.07) 0%, rgba(var(--gold-rgb),.05) 100%);
  border-bottom:1px solid var(--border-light);
}
.rf-card-icon{
  width:5.2rem; height:5.2rem;
  flex-shrink:0;
  border-radius:var(--r-lg);
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  font-size:2.1rem;
  box-shadow:0 10px 22px rgba(var(--primary-rgb),.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.rf-card-head h2{
  margin:0 0 .35rem;
  font-family:var(--font-heading);
  font-size:2.05rem;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--text);
  line-height:1.2;
}
.rf-card-head p{
  margin:0;
  font-size:1.3rem;
  line-height:1.55;
  color:var(--text-secondary);
}

.rf-body{ padding:2.4rem 2.6rem 2.6rem; }

/* ---- Section + grid ---- */
.rf-section + .rf-section{
  margin-top:2.6rem;
  padding-top:2.4rem;
  border-top:1px dashed var(--border);
}
.rf-section-title{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:0 0 1.6rem;
  font-family:var(--font-heading);
  font-size:1.22rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.rf-section-title i{
  width:2.4rem; height:2.4rem;
  display:inline-grid; place-items:center;
  border-radius:var(--r-xs);
  background:var(--primary-mist);
  color:var(--primary);
  font-size:1.15rem;
  letter-spacing:0;
}

.rf-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.5rem 1.7rem;
}
.rf-field--full{ grid-column:1 / -1; }

/* ---- Field ---- */
.rf-field{ min-width:0; }
.rf-label{
  display:flex;
  align-items:center;
  gap:.2rem;
  margin:0 0 .6rem;
  font-family:var(--font-heading);
  font-size:1.26rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:.005em;
}
.rf-hint{
  display:block;
  margin-top:.5rem;
  font-size:1.13rem;
  line-height:1.5;
  color:var(--text-muted);
}

.rf-control-wrap{ position:relative; }
.rf-field-icon{
  position:absolute;
  left:1.35rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--gray-400);
  font-size:1.45rem;
  line-height:1;
  pointer-events:none;
  transition:color var(--t-fast);
}
.rf-control-wrap--area .rf-field-icon{ top:1.75rem; transform:none; }
.rf-control-wrap:focus-within .rf-field-icon{ color:var(--primary); }

.rf-control{
  width:100%;
  height:4.8rem;
  padding:0 1.4rem 0 4.2rem;
  font-family:var(--font-body);
  font-size:1.4rem;
  font-weight:500;
  color:var(--text);
  background:var(--white);
  border:1px solid var(--gray-300);
  border-radius:var(--r-md);
  outline:none;
  line-height:1.4;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance:none;
  appearance:none;
}
.rf-control::placeholder{ color:var(--gray-400); opacity:1; }
.rf-control:hover{ border-color:var(--gray-400); }
.rf-control:focus{
  border-color:var(--primary);
  background:var(--white);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.rf-control:disabled{ background:var(--gray-50); color:var(--text-muted); cursor:not-allowed; }
.rf-control--plain{ padding-left:1.4rem; }

/* Select — custom chevron so it matches inputs on every browser */
select.rf-control{
  padding-right:4.2rem;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c737a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.4rem center;
  background-size:1.7rem;
  cursor:pointer;
}
select.rf-control:invalid,
select.rf-control.is-placeholder{ color:var(--gray-500); }

textarea.rf-control{
  height:auto;
  min-height:10.4rem;
  padding:1.35rem 1.4rem 1.35rem 4.2rem;
  line-height:1.65;
  resize:vertical;
}
textarea.rf-control--plain{ padding-left:1.4rem; }

/* Date input — normalise the native picker */
input.rf-control[type="date"]{ padding-right:1.2rem; }
input.rf-control[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.55;
  transition:opacity var(--t-fast);
}
input.rf-control[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1; }

/* ---- Alerts ---- */
.rf-alert{
  display:flex;
  align-items:flex-start;
  gap:1.1rem;
  padding:1.3rem 1.5rem;
  margin-bottom:2rem;
  border:1.5px solid;
  border-radius:var(--r-md);
  font-size:1.32rem;
  font-weight:600;
  line-height:1.55;
  animation:rfAlertIn .28s ease both;
}
.rf-alert i{ font-size:1.55rem; line-height:1.35; flex-shrink:0; }
.rf-alert--error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.rf-alert--success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.rf-alert--info{ background:var(--primary-mist); border-color:rgba(var(--primary-rgb),.2); color:var(--primary-dark); }
@keyframes rfAlertIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---- Actions ---- */
.rf-actions{
  display:flex;
  align-items:center;
  gap:1.4rem;
  flex-wrap:wrap;
  margin-top:2.6rem;
  padding-top:2.2rem;
  border-top:1px solid var(--border-light);
}
.rf-actions .rf-note{
  font-size:1.2rem;
  color:var(--text-muted);
  line-height:1.5;
  flex:1 1 18rem;
  margin:0;
}
.rf-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  min-height:5rem;
  padding:1.3rem 2.8rem;
  border:0;
  border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white) !important;
  font-family:var(--font-heading);
  font-size:1.45rem;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none !important;
  box-shadow:0 8px 22px rgba(var(--primary-rgb),.32), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
  white-space:nowrap;
}
.rf-submit:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 14px 30px rgba(var(--primary-rgb),.4), inset 0 1px 0 rgba(255,255,255,.18);
}
.rf-submit:active{ transform:translateY(0); }
.rf-submit i{ font-size:1.35rem; }
.rf-submit--ghost{
  background:var(--white) !important;
  color:var(--primary) !important;
  border:2px solid var(--primary);
  box-shadow:var(--shadow-sm);
}
.rf-submit--ghost:hover{ background:var(--primary-mist) !important; box-shadow:var(--shadow-md); }
.rf-submit--block{ width:100%; }
.rf-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none !important; filter:none; }
/* A link cannot be `disabled`, so locked actions use aria-disabled */
.rf-submit[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
  box-shadow:none;
  transform:none !important;
  filter:none;
}

/* ---- Sidebar ---- */
.rf-side{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  position:sticky;
  top:2rem;
}
.rf-side-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg);
  padding:1.9rem;
  box-shadow:var(--shadow-card);
}
.rf-side-card h3{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.5rem;
  font-family:var(--font-heading);
  font-size:1.32rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text);
}
.rf-side-card h3 i{ color:var(--primary); font-size:1.3rem; }

/* Progress rail */
.rf-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.rf-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:1.1rem;
  padding:.85rem 0;
}
.rf-step:not(:last-child)::after{
  content:'';
  position:absolute;
  left:1.55rem;
  top:4.3rem;
  bottom:-.2rem;
  width:2px;
  background:var(--border);
  border-radius:2px;
}
.rf-step.is-done:not(:last-child)::after{ background:var(--primary); }
.rf-step-dot{
  position:relative;
  z-index:1;
  width:3.2rem; height:3.2rem;
  flex-shrink:0;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--gray-100);
  color:var(--text-muted);
  font-family:var(--font-heading);
  font-size:1.24rem;
  font-weight:800;
  border:2px solid var(--white);
  box-shadow:0 0 0 1.5px var(--border);
  transition:all var(--t-base);
}
.rf-step-body{ padding-top:.15rem; min-width:0; }
.rf-step-title{
  display:block;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:700;
  color:var(--text-secondary);
  line-height:1.3;
}
.rf-step-sub{
  display:block;
  margin-top:.15rem;
  font-size:1.13rem;
  color:var(--text-muted);
  line-height:1.45;
}
.rf-step.is-active .rf-step-dot{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:var(--white);
  box-shadow:0 0 0 4px var(--primary-mist), 0 6px 14px rgba(var(--primary-rgb),.28);
}
.rf-step.is-active .rf-step-title{ color:var(--text); font-weight:800; }
.rf-step.is-done .rf-step-dot{
  background:var(--primary-mist);
  color:var(--primary);
  box-shadow:0 0 0 1.5px rgba(var(--primary-rgb),.28);
}
.rf-step.is-done .rf-step-title{ color:var(--primary); }

/* Checklist */
.rf-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.rf-check li{
  display:flex;
  align-items:flex-start;
  gap:.85rem;
  font-size:1.24rem;
  line-height:1.55;
  color:var(--text-secondary);
}
.rf-check li i{
  margin-top:.15rem;
  font-size:1.05rem;
  color:var(--primary);
  background:var(--primary-mist);
  width:2rem; height:2rem;
  display:inline-grid; place-items:center;
  border-radius:50%;
  flex-shrink:0;
}

/* =====================================================================
   2. PASSPORT PHOTO UPLOADER  (.pp-*)
   ===================================================================== */

.pp-page{
  padding:4.2rem 0 6.4rem;
  min-height:60vh;
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(var(--primary-rgb),.10), transparent 62%),
    radial-gradient(820px 420px at 100% 0%, rgba(var(--gold-rgb),.13), transparent 58%),
    var(--bg);
}
.pp-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 31rem;
  gap:2.4rem;
  align-items:start;
  max-width:1040px;
  margin:0 auto;
}
.pp-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-xl);
  box-shadow:0 20px 54px rgba(15,23,42,.09), 0 2px 8px rgba(15,23,42,.04);
  padding:3.2rem 2.6rem 3rem;
  text-align:center;
  overflow:hidden;
}
.pp-card::before{
  content:'';
  position:absolute; inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg, var(--primary), var(--primary-light) 55%, var(--gold));
}
.pp-card-head{ margin-bottom:2.4rem; }
.pp-card-head .pp-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem 1.2rem;
  margin-bottom:1.1rem;
  border-radius:var(--r-full);
  background:var(--primary-mist);
  border:1px solid rgba(var(--primary-rgb),.18);
  color:var(--primary-dark);
  font-family:var(--font-heading);
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.pp-card-head h2{
  margin:0 0 .6rem;
  font-family:var(--font-heading);
  font-size:2.05rem;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--text);
  line-height:1.2;
}
.pp-card-head p{
  margin:0 auto;
  max-width:44rem;
  font-size:1.32rem;
  line-height:1.6;
  color:var(--text-secondary);
}

/* ---- Avatar: preview + camera button attached to the lower-right edge ---- */
.pp-avatar-wrap{
  display:flex;
  justify-content:center;
  margin:0 auto 1.4rem;
}
.pp-avatar{
  position:relative;
  width:22rem;
  height:22rem;
  flex-shrink:0;
  /* the camera button lives OUTSIDE the circle, so no clipping here */
}
.pp-avatar-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, var(--gray-100), var(--gray-200) 95%);
  border:4px solid var(--white);
  box-shadow:
    0 0 0 2px var(--gray-300),
    0 20px 44px rgba(15,23,42,.16),
    inset 0 0 0 1px rgba(0,0,0,.03);
  display:grid;
  place-items:center;
  transition:box-shadow var(--t-base), background var(--t-base);
}
.pp-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.pp-avatar.has-photo img{ display:block; }
.pp-avatar.has-photo .pp-avatar-empty{ display:none; }
.pp-avatar-empty{
  display:grid;
  place-items:center;
  gap:.8rem;
  color:var(--gray-400);
  pointer-events:none;
}
.pp-avatar-empty i{ font-size:7rem; line-height:1; opacity:.75; }
.pp-avatar-empty span{
  font-family:var(--font-heading);
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-500);
}

/* The camera button — centre lands on the 45° lower-right point of the circle */
.pp-avatar-btn{
  position:absolute;
  right:-.3rem;
  bottom:-.3rem;
  z-index:4;
  width:6.4rem;
  height:6.4rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:4px solid var(--white);
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  font-size:2.15rem;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(var(--primary-rgb),.42), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform var(--t-spring), box-shadow var(--t-base), filter var(--t-base);
}
.pp-avatar-btn:hover,
.pp-avatar-btn:focus-visible{
  transform:scale(1.09) rotate(7deg);
  filter:brightness(1.08);
  box-shadow:0 14px 30px rgba(var(--primary-rgb),.5), inset 0 1px 0 rgba(255,255,255,.22);
  outline:none;
}
.pp-avatar-btn:active{ transform:scale(.98); }
.pp-avatar-btn i{ line-height:1; }

/* Drag & drop + upload states */
.pp-avatar.is-dragover .pp-avatar-ring{
  box-shadow:
    0 0 0 4px var(--primary-glow),
    0 0 0 9px rgba(var(--primary-rgb),.10),
    0 20px 44px rgba(15,23,42,.16);
  background:var(--primary-mist);
}
.pp-avatar-loader{
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:50%;
  display:none;
  place-items:center;
  background:rgba(4,31,18,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  color:var(--white);
}
.pp-avatar.is-uploading .pp-avatar-loader{ display:grid; }
.pp-avatar.is-uploading .pp-avatar-btn{ pointer-events:none; opacity:.45; }

.pp-spinner{
  width:4.2rem;
  height:4.2rem;
  border-radius:50%;
  border:3.5px solid rgba(255,255,255,.28);
  border-top-color:var(--white);
  animation:ppSpin .7s linear infinite;
}
@keyframes ppSpin{ to{ transform:rotate(360deg); } }

/* Success tick on the ring */
.pp-avatar.is-saved .pp-avatar-ring{
  box-shadow:
    0 0 0 2px var(--primary),
    0 0 0 7px var(--primary-mist),
    0 20px 44px rgba(15,23,42,.16);
}

.pp-hint{
  margin:0 auto 1.6rem;
  max-width:40rem;
  font-size:1.2rem;
  line-height:1.6;
  color:var(--text-muted);
}

/* Status line */
.pp-status{
  display:none;
  align-items:flex-start;
  justify-content:center;
  gap:.7rem;
  margin:0 auto 1.6rem;
  padding:1.1rem 1.4rem;
  max-width:44rem;
  border:1.5px solid;
  border-radius:var(--r-md);
  font-size:1.28rem;
  font-weight:600;
  line-height:1.5;
  text-align:left;
}
.pp-status.is-visible{ display:flex; }
.pp-status.is-uploading{ background:var(--primary-mist); border-color:rgba(var(--primary-rgb),.2); color:var(--primary-dark); }
.pp-status.is-success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.pp-status.is-error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* Full-width fallback button (important on phones) */
.pp-choose{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  width:100%;
  min-height:5rem;
  padding:1.3rem 2rem;
  border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white) !important;
  font-family:var(--font-heading);
  font-size:1.42rem;
  font-weight:800;
  cursor:pointer;
  text-decoration:none !important;
  box-shadow:0 8px 22px rgba(var(--primary-rgb),.32), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
  margin:0;
}
.pp-choose:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 14px 30px rgba(var(--primary-rgb),.4), inset 0 1px 0 rgba(255,255,255,.18);
}
.pp-choose:active{ transform:translateY(0); }

.pp-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1.6rem;
}
.pp-continue{ /* share the .rf-submit look */ margin-top:0; }

/* ---- Sidebar summary ---- */
.pp-summary{ display:flex; flex-direction:column; gap:1.6rem; position:sticky; top:2rem; }
.pp-summary-card{
  background:var(--white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:1.9rem;
}
.pp-summary-card h3{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1.5rem;
  font-family:var(--font-heading);
  font-size:1.32rem;
  font-weight:800;
  color:var(--text);
}
.pp-summary-card h3 i{ color:var(--primary); }
.pp-student{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding-bottom:1.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px dashed var(--border);
}
.pp-student-avatar{
  width:4.6rem; height:4.6rem;
  flex-shrink:0;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--primary-mist);
  color:var(--primary);
  font-family:var(--font-heading);
  font-size:1.75rem;
  font-weight:800;
  border:2px solid var(--white);
  box-shadow:0 0 0 1.5px var(--border);
}
.pp-student-name{
  font-family:var(--font-heading);
  font-size:1.42rem;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
  word-break:break-word;
}
.pp-student-meta{ margin-top:.25rem; font-size:1.15rem; color:var(--text-muted); }

.pp-info{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.pp-info li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:1.24rem;
  color:var(--text-secondary);
  line-height:1.5;
}
.pp-info li span:first-child{ color:var(--text-muted); }
.pp-info li strong{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--text);
  text-align:right;
  word-break:break-word;
}
.pp-portal-no{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1.1rem;
  margin-top:1.5rem;
  width:100%;
  justify-content:center;
  border-radius:var(--r-md);
  background:var(--primary-mist);
  border:1px dashed rgba(var(--primary-rgb),.28);
  color:var(--primary-dark) !important;
  font-family:var(--font-heading);
  font-size:1.7rem;
  font-weight:800;
  letter-spacing:.08em;
}

/* =====================================================================
   3. CBT IMAGE UPLOADER  (.cbt-up)
   ---------------------------------------------------------------------
   One tile = thumbnail + label + invisible full-size file input.
   Click anywhere or drag a file onto it. The camera badge stays attached
   to the thumbnail instead of floating underneath it.
   ===================================================================== */

.cbt-up{
  position:relative;
  display:flex;
  align-items:center;
  gap:1.4rem;
  margin-top:.9rem;
  padding:1rem;
  background:var(--white);
  border:1.5px dashed var(--gray-300);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
  overflow:hidden;
}
/* The legacy sheet has `.ed_teacher_form label{display:block}` (0,1,1),
   which outranks `.cbt-up` (0,1,0). Re-assert the row at equal weight —
   this file loads later, so it wins the tie. */
label.cbt-up{ display:flex; }
.cbt-up:hover{
  border-color:var(--primary);
  background:var(--primary-mist);
}
/* The invisible file input is what Tab actually reaches — show that */
.cbt-up:focus-within{
  border-color:var(--primary);
  background:var(--primary-mist);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.cbt-up.is-dragover{
  border-style:solid;
  border-color:var(--primary);
  background:var(--primary-mist);
  box-shadow:0 0 0 4px var(--primary-glow);
}
.cbt-up.is-saved{
  border-style:solid;
  border-color:rgba(var(--primary-rgb),.34);
  background:#f5fcf8;
}
.cbt-up.is-saved:hover{ background:var(--primary-mist); }

/* The whole tile is the hit-area — no separate button to align */
.cbt-up input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:3;
}

.cbt-up-thumb{
  position:relative;
  width:8rem;
  height:8rem;
  flex-shrink:0;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--gray-100);
  border:1px solid var(--border-light);
  display:grid;
  place-items:center;
}
.cbt-up-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--t-slow);
}
.cbt-up-thumb > i{
  font-size:2.8rem;
  color:var(--gray-400);
  transition:color var(--t-base), transform var(--t-base);
}
.cbt-up:hover .cbt-up-thumb > i{
  color:var(--primary);
  transform:scale(1.06);
}
.cbt-up:hover .cbt-up-thumb img{ transform:scale(1.04); }

/* Camera badge pinned to the lower-right corner of the thumbnail */
.cbt-up-cam{
  position:absolute;
  right:-.1rem;
  bottom:-.1rem;
  z-index:2;
  width:3.2rem;
  height:3.2rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:var(--white);
  font-size:1.3rem;
  border:2.5px solid var(--white);
  box-shadow:0 4px 10px rgba(var(--primary-rgb),.38);
  transition:transform var(--t-fast);
}
.cbt-up:hover .cbt-up-cam{ transform:scale(1.1); }

.cbt-up-loader{
  position:absolute;
  inset:0;
  z-index:4;
  display:none;
  place-items:center;
  background:rgba(4,31,18,.55);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}
.cbt-up.is-uploading .cbt-up-loader{ display:grid; }
.cbt-up.is-uploading input[type="file"]{ pointer-events:none; }
.cbt-up-loader .cbt-spinner{
  width:2.8rem;
  height:2.8rem;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.3);
  border-top-color:var(--white);
  animation:ppSpin .7s linear infinite;
}

.cbt-up-meta{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  min-width:0;
  flex:1 1 auto;
}
.cbt-up-title{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-heading);
  font-size:1.28rem;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
}
.cbt-up-title .cbt-up-tick{
  display:none;
  color:var(--primary);
  font-size:1.15rem;
}
.cbt-up.is-saved .cbt-up-tick{ display:inline-block; }
.cbt-up-name{
  font-size:1.15rem;
  color:var(--text-secondary);
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cbt-up.is-saved .cbt-up-name{ color:var(--primary-dark); font-weight:600; }
.cbt-up-hint{
  font-size:1.06rem;
  color:var(--text-muted);
  line-height:1.4;
}
.cbt-up.is-error .cbt-up-name{ color:#b91c1c; font-weight:600; }

/* Wide variant for the two question images: a vertical card, so the
   preview spans the tile and the caption sits underneath it — the same
   "control attached to the image" language as the passport uploader. */
.cbt-up--wide{
  flex-direction:column;
  align-items:stretch;
  gap:.9rem;
  padding:.8rem;
  width:100%;
  max-width:100%;
}
.cbt-up--wide .cbt-up-thumb{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  border-radius:var(--r-sm);
}
.cbt-up--wide .cbt-up-meta{ padding:0 .25rem .25rem; }

/* Two question images side by side */
.cbt-up-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.4rem;
  margin-top:.9rem;
  width:100%;
  max-width:100%;
}
.cbt-up-grid .cbt-up{ margin-top:0; }

/* =====================================================================
   4. AUTH ADDITIONS  (.auth-*)
   ===================================================================== */

/* page variant used on pages that already sit under the site header */
.auth-page-v2--site{
  min-height:auto;
  padding:4.6rem 2rem 6.4rem;
}
.auth-page-v2--site .container{
  position:relative;
  z-index:2;
  width:100%;
}

/* top accent bar (opt-in modifier so the `--dev` red gate is untouched) */
.auth-card-v2--accent{
  border-top:4px solid var(--primary);
}

.auth-field-hint{
  display:block;
  margin-top:.5rem;
  font-size:1.16rem;
  line-height:1.5;
  color:var(--text-muted);
}

/* Password toggle as a real <button> (keyboard accessible) */
button.pwd-toggle-v2{
  border:0;
  background:transparent;
  line-height:1;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  padding:.7rem;
  width:auto;
  height:auto;
  color:var(--text-muted);
}
button.pwd-toggle-v2:hover{ color:var(--primary); background:var(--primary-mist); }
button.pwd-toggle-v2:focus-visible{
  outline:none;
  color:var(--primary);
  background:var(--primary-mist);
  box-shadow:0 0 0 3px var(--primary-glow);
}

.auth-divider{
  position:relative;
  margin:2.2rem 0 1.5rem;
  text-align:center;
}
.auth-divider::before{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:var(--border-light);
}
.auth-divider span{
  position:relative;
  display:inline-block;
  padding:0 1.2rem;
  background:var(--white);
  font-family:var(--font-heading);
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.auth-extras{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.auth-alt-link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem 1.2rem;
  border-radius:var(--r-full);
  border:1.5px solid var(--border-light);
  background:var(--white);
  color:var(--text-secondary) !important;
  font-family:var(--font-heading);
  font-size:1.18rem;
  font-weight:700;
  text-decoration:none !important;
  transition:all var(--t-fast);
}
.auth-alt-link:hover{
  color:var(--primary) !important;
  border-color:rgba(var(--primary-rgb),.3);
  background:var(--primary-mist);
  transform:translateY(-1px);
}
.auth-alt-link i{ font-size:1.15rem; color:var(--primary); }

/* Role / trust chips under the form */
.auth-chips{
  display:flex;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:1.8rem;
}
.auth-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .95rem;
  border-radius:var(--r-full);
  background:var(--gray-50);
  border:1px solid var(--border-light);
  color:var(--text-muted);
  font-size:1.06rem;
  font-weight:600;
}
.auth-chip i{ color:var(--primary); font-size:1rem; }

/* =====================================================================
   5. RESPONSIVE — MOBILE FIRST-PRINCIPLES
   ---------------------------------------------------------------------
   * 1 column everywhere below 992px (no side-by-side squeeze)
   * 16px inputs on phones (stops iOS zoom)
   * 48px minimum touch targets
   * sanity gutters so cards never touch the screen edge
   ===================================================================== */

@media (max-width: 1024px){
  .rf-layout,
  .rf-layout--narrow,
  .pp-layout{
    grid-template-columns:minmax(0,1fr);
    gap:2rem;
    max-width:720px;
  }
  .rf-side,
  .pp-summary{ position:static; }
  .rf-side{ order:2; }
  .pp-summary{ order:2; }
}

@media (max-width: 767px){
  .rf-page,
  .pp-page{ padding:2.4rem 0 4.2rem; }
  .rf-page .container,
  .pp-page .container{ padding-left:1.4rem; padding-right:1.4rem; }

  .rf-card-head,
  .pp-card{ border-radius:var(--r-lg); }
  .rf-card-head{
    padding:1.9rem 1.7rem 1.7rem;
    gap:1.1rem;
    align-items:flex-start;
  }
  .rf-card-icon{ width:4.4rem; height:4.4rem; font-size:1.75rem; border-radius:var(--r-md); }
  .rf-card-head h2{ font-size:1.75rem; }
  .rf-card-head p{ font-size:1.22rem; }
  .rf-body{ padding:1.9rem 1.7rem 2.1rem; }

  .rf-grid{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }

  /* 16px inputs — anything smaller makes iOS Safari zoom on focus */
  .rf-control,
  select.rf-control,
  textarea.rf-control{ font-size:1.6rem; }
  .rf-control{ height:5.2rem; }
  textarea.rf-control{ min-height:9.6rem; }
  .rf-label{ font-size:1.32rem; }
  .rf-hint{ font-size:1.16rem; }

  .rf-actions{ flex-direction:column-reverse; align-items:stretch; gap:1.1rem; }
  .rf-actions .rf-note{ text-align:center; flex:none; }
  .rf-submit{ width:100%; }

  .rf-side-card,
  .pp-summary-card{ padding:1.6rem; border-radius:var(--r-md); }

  /* -- Passport -- */
  .pp-card{ padding:2.2rem 1.6rem 2.2rem; }
  .pp-card-head{ margin-bottom:1.8rem; }
  .pp-card-head h2{ font-size:1.8rem; }
  .pp-card-head p{ font-size:1.24rem; }
  .pp-avatar{ width:17rem; height:17rem; }
  .pp-avatar-btn{ width:5.4rem; height:5.4rem; font-size:1.75rem; border-width:3.5px; }
  .pp-avatar-empty i{ font-size:5.6rem; }
  .pp-avatar-empty span{ font-size:1rem; }
  .pp-hint{ font-size:1.16rem; }

  /* -- CBT uploader -- */
  .cbt-up{ padding:.9rem; gap:1.1rem; }
  .cbt-up-thumb{ width:7rem; height:7rem; }
  .cbt-up--wide .cbt-up-meta{ padding:.2rem .2rem .3rem; }
  .cbt-up-grid{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .cbt-up-name{ font-size:1.1rem; }

  /* -- Auth -- */
  .auth-page-v2--site{ padding:2.6rem 1.2rem 4rem; }
  .auth-chips{ gap:.45rem; }
  .auth-chip{ font-size:1rem; }
}

@media (max-width: 420px){
  .rf-page .container,
  .pp-page .container{ padding-left:1.1rem; padding-right:1.1rem; }
  .rf-card-head{ padding:1.6rem 1.4rem 1.5rem; }
  .rf-card-icon{ width:3.9rem; height:3.9rem; font-size:1.5rem; }
  .rf-card-head h2{ font-size:1.58rem; }
  .rf-body{ padding:1.6rem 1.4rem 1.8rem; }
  .pp-card{ padding:1.9rem 1.3rem 2rem; }
  .pp-avatar{ width:15rem; height:15rem; }
  .pp-avatar-btn{ width:4.9rem; height:4.9rem; font-size:1.55rem; }
  .pp-student-name{ font-size:1.32rem; }
  .pp-info li{ font-size:1.18rem; }
  .pp-portal-no{ font-size:1.5rem; }
  .auth-page-v2--site{ padding:2rem .9rem 3.2rem; }
}

/* Auth on phones: one consistent gutter for student + admin login, 16px
   controls (stops iOS zoom) and a full 44px password-toggle target. */
@media (max-width: 767px){
  .auth-page-v2,
  .auth-page-v2.auth-page-v2--site{ padding-left:1.6rem; padding-right:1.6rem; }
  .auth-page-v2 .container{ padding-left:0; padding-right:0; }
  .auth-page-v2 .form-control-v2{ font-size:1.6rem; }
  button.pwd-toggle-v2{
    width:4.4rem;
    height:4.4rem;
    right:.35rem;
    padding:0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rf-alert,
  .pp-avatar-btn,
  .pp-choose,
  .rf-submit,
  .cbt-up,
  .cbt-up-thumb img,
  .cbt-up-cam{ transition:none !important; animation:none !important; }
  .pp-spinner,
  .cbt-spinner{ animation-duration:2s !important; }
}