/* ==========================================================================
   Soft Skill Zone — Components: glass, buttons, cards, forms, tables,
   badges, toasts, modals, loaders, empty states, pagination
   ========================================================================== */

/* ==========================================================================
   GLASS
   ========================================================================== */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--shadow-inset);
  border-radius: var(--r-lg);
}
.glass-strong { background: var(--glass-bg-solid); }
/* Graceful fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong { background: var(--bg-surface); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
/* Button ka poora roop teen cheezon se banta hai: halka upar-se-neeche
   gradient (ek flat rang plastic lagta hai), teen-parat wali chhaya
   (--btn-lift), aur hover par sirf 2px ka uthaan. Koi sheen sweep nahi —
   wo purane phone par har hover par repaint karata tha aur "shaant" look
   se mel bhi nahi khata. */
.btn-ssz {
  --btn-bg: var(--btn-grad);
  --btn-fg: var(--brand-contrast);
  --btn-bd: transparent;
  --btn-sh: var(--btn-lift);
  --btn-sh-hover: var(--btn-lift-hover);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.72rem 1.4rem;
  min-height: 46px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-sh);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  /* Sirf transform aur box-shadow animate hote hain — dono GPU par chalte
     hain, isliye 4G wale purane phone par bhi hakla nahi. */
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.btn-ssz:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--btn-sh-hover);
}
.btn-ssz:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: var(--btn-lift-press);
}
.btn-ssz:disabled, .btn-ssz.is-disabled {
  opacity: 0.55; pointer-events: none;
  box-shadow: none;
}
/* Touch par hover ruk jaata hai — ungli hatane ke baad button uthaa hi
   reh jaata tha. Isliye lift sirf asli pointer wale device par. */
@media (hover: none) {
  .btn-ssz:hover { transform: none; box-shadow: var(--btn-sh); }
}

.btn-primary-ssz  { background: var(--btn-grad); }
.btn-primary-ssz:hover { background: var(--btn-grad-hover); }

.btn-secondary-ssz {
  --btn-sh: var(--shadow-xs);
  --btn-sh-hover: 0 2px 4px rgba(15,23,42,0.06), 0 10px 20px -12px rgba(79,70,229,0.45);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-secondary-ssz:hover { border-color: var(--brand); color: var(--brand); }

.btn-ghost-ssz {
  --btn-sh: none;
  --btn-sh-hover: none;
  background: transparent; color: var(--text-secondary); border-color: transparent;
}
.btn-ghost-ssz:hover { background: var(--bg-surface-2); color: var(--text-primary); }

.btn-outline-ssz {
  --btn-sh: none;
  --btn-sh-hover: 0 8px 18px -10px rgba(79,70,229,0.55);
  background: transparent; color: var(--brand); border-color: var(--brand);
}
.btn-outline-ssz:hover { background: var(--brand-solid); color: var(--brand-contrast); }

.btn-glass-ssz {
  --btn-sh: var(--shadow-sm);
  --btn-sh-hover: var(--shadow-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--glass-border);
  color: var(--text-primary);
}
/* Inki chhaya neutral hai — laal button ke neeche neeli chhaya galat lagti. */
.btn-success-ssz, .btn-danger-ssz, .btn-warning-ssz {
  --btn-sh: var(--btn-lift-neutral);
  --btn-sh-hover: var(--btn-lift-neutral-hover);
}
.btn-success-ssz { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 88%, #fff), var(--success)); }
.btn-danger-ssz  { background: linear-gradient(180deg, color-mix(in srgb, var(--danger)  88%, #fff), var(--danger)); }
.btn-warning-ssz { background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 88%, #fff), var(--warning)); color: #1a1204; }
/* color-mix purane browser me nahi hai — wahan seedha flat rang. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .btn-success-ssz { background: var(--success); }
  .btn-danger-ssz  { background: var(--danger); }
  .btn-warning-ssz { background: var(--warning); }
}

.btn-sm-ssz { padding: 0.5rem 0.95rem; min-height: 38px; font-size: var(--fs-xs); border-radius: var(--r-sm); }
.btn-lg-ssz { padding: 0.95rem 2rem; min-height: 56px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.btn-block-ssz { width: 100%; }
.btn-pill { border-radius: var(--r-pill); }
.btn-ssz svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Loading state — set by js/core/loader.js */
.btn-ssz.is-loading { color: transparent !important; pointer-events: none; }
.btn-ssz.is-loading::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  color: var(--btn-fg);
  animation: ssz-spin 0.65s linear infinite;
  z-index: 2;
}
.btn-secondary-ssz.is-loading::before,
.btn-ghost-ssz.is-loading::before { border-color: var(--border-default); border-top-color: var(--brand); }

/* ==========================================================================
   CARDS
   ========================================================================== */
/* Card safed par safed hai, isliye halka gradient (upar bilkul safed, neeche
   zara neela) use hota hai — kinara bina moti border ke bhi dikh jaata hai. */
.card-ssz {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-lift);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color var(--dur-base) var(--ease-out);
}
.card-ssz.is-hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-lift-hover);
  border-color: var(--border-default);
}
@media (hover: none) {
  .card-ssz.is-hoverable:hover { transform: none; box-shadow: var(--card-lift); }
}
.card-ssz__body { padding: var(--sp-6); }
.card-ssz__head {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.card-ssz__foot {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.card-ssz__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-surface-2); }
.card-ssz__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card-ssz.is-hoverable:hover .card-ssz__media img { transform: scale(1.06); }

/* Gradient top-edge accent */
.card-ssz.has-accent::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.card-ssz.has-accent:hover::before { transform: scaleX(1); }

/* Stat tile */
.stat-tile {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--t-base);
}
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-tile__icon {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
}
.stat-tile__icon svg { width: 22px; height: 22px; }
.stat-tile__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.stat-tile__label { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: var(--ls-wide); }
.stat-tile--success .stat-tile__icon { background: var(--success-soft); color: var(--success); }
.stat-tile--warning .stat-tile__icon { background: var(--warning-soft); color: var(--warning); }
.stat-tile--danger  .stat-tile__icon { background: var(--danger-soft);  color: var(--danger); }
.stat-tile--accent  .stat-tile__icon { background: var(--accent-soft);  color: var(--accent); }

/* ==========================================================================
   BADGES & CHIPS
   ========================================================================== */
.badge-ssz {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.32em 0.72em;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge-brand   { background: var(--brand-soft);   color: var(--brand-ink); }
.badge-success { background: var(--success-soft); color: var(--success-ink); }
.badge-warning { background: var(--warning-soft); color: var(--warning-ink); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger-ink); }
.badge-accent  { background: var(--accent-soft);  color: var(--accent-ink); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--t-fast);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  display: flex; align-items: center; gap: 0.3em;
}
.field__label .req { color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field__error {
  font-size: var(--fs-xs);
  color: var(--danger);
  display: none;
  align-items: center; gap: 0.35em;
}
.field.has-error .field__error { display: flex; }

/* font-size 16px se chhota ho to iOS har field tap par page zoom kar deta
   hai aur layout bagal khisak jaata hai. Chat input me ye pehle theek kiya
   gaya tha, par asli form (admission, login, contact) chhoot gaye the. */
.input-ssz, .select-ssz, .textarea-ssz {
  width: 100%;
  padding: 0.78rem 1rem;
  min-height: 48px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: max(16px, var(--fs-base));
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  appearance: none;
}
.input-ssz::placeholder, .textarea-ssz::placeholder { color: var(--text-muted); opacity: 0.85; }
.input-ssz:hover, .select-ssz:hover, .textarea-ssz:hover { border-color: var(--border-strong); }
.input-ssz:focus, .select-ssz:focus, .textarea-ssz:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.field.has-error .input-ssz,
.field.has-error .select-ssz,
.field.has-error .textarea-ssz { border-color: var(--danger); }
.field.has-error .input-ssz:focus { box-shadow: 0 0 0 4px var(--danger-soft); }
.textarea-ssz { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }
.input-ssz:disabled, .select-ssz:disabled { background: var(--bg-surface-2); cursor: not-allowed; opacity: 0.7; }

.select-ssz {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
  padding-right: 2.6rem;
  cursor: pointer;
}

/* Input with leading icon */
.input-group-ssz { position: relative; display: flex; align-items: center; }
.input-group-ssz .input-ssz { padding-left: 2.85rem; }
.input-group-ssz__icon {
  position: absolute; left: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  display: grid; place-items: center;
}
.input-group-ssz__icon svg { width: 18px; height: 18px; }
.input-group-ssz__btn {
  position: absolute; right: 0.5rem;
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer; padding: 0.4rem;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
}
.input-group-ssz__btn:hover { color: var(--brand); background: var(--bg-surface-2); }

/* Checkbox / radio */
.check-ssz { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); }
.check-ssz input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; margin-top: 1px; }

/* Radio card (gender, payment mode, etc.) */
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__box {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: var(--t-fast);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.radio-card__box:hover { border-color: var(--brand); }
.radio-card input:checked + .radio-card__box {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.radio-card input:focus-visible + .radio-card__box { outline: 2px solid var(--brand); outline-offset: 2px; }

/* File dropzone */
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  background: var(--bg-surface-2);
  cursor: pointer;
  transition: var(--t-base);
}
.dropzone:hover, .dropzone.is-dragover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.dropzone__icon { color: var(--brand); margin-bottom: var(--sp-3); }
.dropzone__icon svg { width: 34px; height: 34px; margin-inline: auto; }
.file-preview {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  margin-top: var(--sp-3);
}
.file-preview__thumb {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-surface-2);
  display: grid; place-items: center;
  color: var(--brand);
}
.file-preview__meta { min-width: 0; flex: 1; }
.file-preview__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview__size { font-size: var(--fs-xs); color: var(--text-muted); }

/* Progress */
.progress-ssz { height: 8px; background: var(--bg-surface-3); border-radius: var(--r-pill); overflow: hidden; }
.progress-ssz__bar {
  height: 100%;
  background: var(--grad-brand);
  border-radius: var(--r-pill);
  width: 0;
  transition: width var(--dur-base) var(--ease-out);
}
.progress-ssz--success .progress-ssz__bar { background: var(--success); }
.progress-ssz--danger  .progress-ssz__bar { background: var(--danger); }

/* Stepper (multi-step admission form) */
.stepper { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
.stepper__item { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.stepper__dot {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: var(--t-base);
}
.stepper__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.stepper__line { width: 32px; height: 2px; background: var(--border-default); flex-shrink: 0; }
.stepper__item.is-active .stepper__dot { border-color: var(--brand); background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.stepper__item.is-active .stepper__label { color: var(--brand); }
.stepper__item.is-done .stepper__dot { border-color: var(--success); background: var(--success); color: #fff; }
.stepper__item.is-done .stepper__label { color: var(--text-secondary); }

/* ==========================================================================
   TABLES
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  -webkit-overflow-scrolling: touch;
}
.table-ssz { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table-ssz thead th {
  position: sticky; top: 0;
  background: var(--bg-surface-2);
  padding: var(--sp-4);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-subtle);
  z-index: 2;
}
.table-ssz tbody td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}
.table-ssz tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table-ssz tbody tr:hover { background: var(--bg-surface-2); }
.table-ssz tbody tr:last-child td { border-bottom: none; }
.table-ssz .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   EMPTY / SKELETON / PAGINATION
   ========================================================================== */
.empty-state { text-align: center; padding: var(--sp-16) var(--sp-5); }
.empty-state__icon {
  width: 72px; height: 72px;
  margin-inline: auto; margin-bottom: var(--sp-5);
  display: grid; place-items: center;
  border-radius: var(--r-xl);
  background: var(--bg-surface-2);
  color: var(--text-muted);
}
.empty-state__icon svg { width: 32px; height: 32px; }
.empty-state :is(h2,h3,h4) { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.empty-state p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 380px; margin-inline: auto; }

.skeleton {
  background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-surface-3) 50%, var(--bg-surface-2) 75%);
  background-size: 200% 100%;
  animation: ssz-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.skeleton-text { height: 12px; margin-bottom: var(--sp-2); }
.skeleton-title { height: 22px; width: 60%; margin-bottom: var(--sp-3); }
.skeleton-card { height: 260px; border-radius: var(--r-lg); }

.pagination-ssz { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-8); flex-wrap: wrap; }
.pagination-ssz button {
  min-width: 40px; height: 40px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--t-fast);
}
.pagination-ssz button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pagination-ssz button.is-active { background: var(--grad-brand); color: #fff; border-color: transparent; }
.pagination-ssz button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ==========================================================================
   TOASTS  (js/core/toast.js)
   ========================================================================== */
.ssz-toast-stack {
  position: fixed;
  top: calc(var(--navbar-h) + var(--sp-3));
  right: var(--sp-4);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-3);
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
@media (max-width: 576px) {
  .ssz-toast-stack { left: var(--sp-3); right: var(--sp-3); width: auto; }
}
.ssz-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--brand);
  box-shadow: var(--shadow-lg);
  animation: ssz-toast-in var(--dur-base) var(--ease-spring) both;
}
.ssz-toast.is-leaving { animation: ssz-toast-out var(--dur-fast) var(--ease-out) forwards; }
.ssz-toast__icon { flex-shrink: 0; color: var(--brand); display: grid; place-items: center; }
.ssz-toast__icon svg { width: 20px; height: 20px; }
.ssz-toast__body { flex: 1; min-width: 0; }
.ssz-toast__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.ssz-toast__msg { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; word-break: break-word; }
.ssz-toast__close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; line-height: 0; }
.ssz-toast__close:hover { color: var(--text-primary); }
.ssz-toast--success { border-left-color: var(--success); } .ssz-toast--success .ssz-toast__icon { color: var(--success); }
.ssz-toast--error   { border-left-color: var(--danger);  } .ssz-toast--error   .ssz-toast__icon { color: var(--danger); }
.ssz-toast--warning { border-left-color: var(--warning); } .ssz-toast--warning .ssz-toast__icon { color: var(--warning); }

/* ==========================================================================
   MODAL  (js/core/modal.js)
   ========================================================================== */
.ssz-modal-backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(2, 6, 23, 0.6);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: grid; place-items: center;
  padding: var(--sp-4);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  overflow-y: auto;
}
.ssz-modal-backdrop.is-open { opacity: 1; }
.ssz-modal {
  width: min(560px, 100%);
  max-height: calc(100dvh - 3rem);
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.ssz-modal-backdrop.is-open .ssz-modal { transform: translateY(0) scale(1); opacity: 1; }
.ssz-modal--lg { width: min(880px, 100%); }
.ssz-modal--sm { width: min(420px, 100%); }
.ssz-modal__head {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.ssz-modal__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.ssz-modal__body { padding: var(--sp-6); overflow-y: auto; flex: 1; }
.ssz-modal__foot {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap;
}

/* ==========================================================================
   PAGE LOADER  (js/core/loader.js)
   ========================================================================== */
.ssz-page-loader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  background: var(--bg-body);
  display: grid; place-items: center;
  gap: var(--sp-4);
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.ssz-page-loader.is-hidden { opacity: 0; visibility: hidden; }
.ssz-spinner {
  width: 44px; height: 44px;
  border: 3px solid var(--border-default);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ssz-spin 0.7s linear infinite;
}
.ssz-spinner--sm { width: 20px; height: 20px; border-width: 2px; }
.ssz-topbar-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--grad-brand);
  z-index: var(--z-loader);
  transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base);
  box-shadow: 0 0 12px var(--brand);
}

/* ==========================================================================
   MISC
   ========================================================================== */
.divider-text {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--text-muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  margin-block: var(--sp-5);
}
.divider-text::before, .divider-text::after {
  content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}
.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface-2);
  border: 2px solid var(--bg-surface);
  box-shadow: var(--shadow-xs);
}
.avatar-sm { width: 34px; height: 34px; }
.avatar-md { width: 46px; height: 46px; }
.avatar-lg { width: 76px; height: 76px; }
.avatar-fallback {
  display: grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  font-weight: var(--fw-bold);
  font-family: var(--font-display);
}
.rating { display: inline-flex; gap: 2px; color: var(--ssz-amber-400); }
.rating svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   App install ka card (homepage)
   --------------------------------------------------------------------------
   Sirf tab dikhta hai jab browser wakai install kara sakta ho, isliye ise
   halka rakha hai — CTA band se takrana nahi chahiye.
   ========================================================================== */
.install-card {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  flex-wrap: wrap;
  background: var(--card-bg, var(--bg-surface));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 18px);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--card-lift, 0 1px 2px rgba(15, 23, 42, .04));
}

.install-card__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--brand-soft, rgba(79, 70, 229, .1));
  color: var(--brand);
}

/* Body ko badhne dete hain par 0 tak sikudne bhi — warna lambi line
   chhoti screen par poore card ko chauda kar deti hai. */
.install-card__body { flex: 1 1 260px; min-width: 0; }

.install-card__body h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 .4rem;
}
.install-card__body p {
  font-size: .9rem;
  color: var(--text-secondary);
  margin: 0 0 .75rem;
  max-width: 60ch;
  line-height: 1.7;
}

.install-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  margin: 0; padding: 0;
  list-style: none;
  font-size: .82rem;
  color: var(--text-muted);
}
.install-card__list li::before { content: "✓"; margin-right: .35rem; color: var(--success, #16a34a); }

.install-card__act {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex-shrink: 0;
}

/* Phone par button poori chaudai le — angootha wahin padta hai. */
@media (max-width: 640px) {
  .install-card { padding: 1.25rem 1.15rem; }
  .install-card__act { width: 100%; }
  .install-card__act .btn-ssz { width: 100%; }
}

/* Student sidebar ka install link — dikhne me baaki nav jaisa hi, par
   button hai kyunki ye kahin le nahi jaata. */
.dash-side__install { padding: 0 .6rem .4rem; }
.dash-link--install {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--brand);
}
.dash-link--install:hover { background: var(--brand-soft, rgba(79, 70, 229, .08)); }

/* Public navbar ka bhasha switch — dashboard wale jaisa hi, par navbar ke
   icon-button ke saath baithna chahiye. .lang-pick ka roop css/dashboard.css
   me hai; public pages wo file nahi lete, isliye zaroori hissa yahan bhi. */
.lang-pick__wrap { display: inline-flex; }

.lang-pick {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: .82rem; font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: .42rem 1.75rem .42rem .8rem;
  cursor: pointer; line-height: 1.2;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .18s ease, color .18s ease;
}
.lang-pick:hover { color: var(--text-primary); border-color: var(--brand); }
.lang-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 480px) {
  .lang-pick { font-size: .74rem; padding: .34rem 1.45rem .34rem .58rem; }
  .lang-pick { background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%; }
}

/* Devanagari chunne par padhne wala font badalta hai — Manrope me Devanagari
   hai hi nahi. Heading Poppins hi rehti hai, usme Devanagari maujood hai. */
html.lang-hi body, html.lang-hi .input-ssz, html.lang-hi .btn-ssz {
  font-family: "Noto Sans Devanagari", "Manrope", system-ui, sans-serif;
}
html.lang-hi h1, html.lang-hi h2, html.lang-hi h3 {
  font-family: "Poppins", "Noto Sans Devanagari", system-ui, sans-serif;
}
html.lang-hi { line-height: 1.75; }

/* Footer ka install button — chhota, par har page par maujood.
   Yahi ek jagah hai jahan se login kiye bina bhi app banayi ja sakti hai. */
.install-fbtn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-size: .84rem; font-weight: var(--fw-semibold);
  padding: .55rem .95rem;
  border-radius: 999px;
  /* Pehle yahan sab rang safed ki halki parat the — jo sirf gehre footer
     par dikhte. Par footer safed hai (--bg-surface), isliye light theme me
     ye button bilkul dikhta hi nahi tha: bina kinare ka saada text. */
  border: 1px solid var(--border-default);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.install-fbtn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.install-fbtn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.install-fbtn__icon { display: grid; place-items: center; }

/* Navbar ka install nishan — phone par bhi dikhta hai.

   Pehle ise 900px se neeche chhupa diya tha, ye maan kar ki jagah nahi
   bachegi. Wo galat tha: phone par logo aur baaki button ke beech kaafi
   khaali jagah rehti hai. Aur chhupane se sabse zyada nuksaan wahin hota
   tha jahan ye sabse zaroori hai — phone par, kyunki app phone par hi
   banti hai. Menu ke andar rakhna kaafi nahi; jise pata hi nahi wo menu
   kholega hi kyun.

   Bahut chhoti screen (360px se kam) par bhi jagah bani rahe, isliye wahan
   bhasha wala switch sirf chhota roop leta hai — niche wala niyam. */
.install-nav { display: grid; place-items: center; }

/* 360px se chhote phone: bhasha ke switch ka padding ghata dete hain taaki
   install ka nishan bahar na nikle. Naam phir bhi poora dikhta hai. */
@media (max-width: 380px) {
  .lang-pick { font-size: .7rem; padding: .3rem 1.25rem .3rem .5rem; }
  .lang-pick { background-position: calc(100% - 11px) 52%, calc(100% - 8px) 52%; }
}

/* Bahut chhote phone (320px — purana iPhone SE, Galaxy Fold ka bahar wala
   parda). Yahan paanch cheezein ek patti me nahi samaatin, isliye icon aur
   unke beech ki jagah thodi ghata dete hain. Kisi ko chhupaate nahi —
   chhupane se hi ye gadbad shuru hui thi. */
/* Ungli ka nishaan ~44px hota hai. Neeche wale gol button dikhne me chhote
   rehte hain (design waisa hi), par unke aas-paas ki 44px jagah bhi tap
   maan leti hai. `::after` sirf ek anjaan parat hai — kuchh dikhta nahi,
   layout bhi nahi hilta. */
.icon-btn, .pagination-ssz button, .social-btn, .input-group-ssz__btn { position: relative; }
.icon-btn::after, .pagination-ssz button::after,
.social-btn::after, .input-group-ssz__btn::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* Review step ka "badlein" button 18px oonchа tha — chhoona hi mushkil. */
.adm-review__edit { padding: .45rem .6rem; margin: -.45rem -.6rem; }

@media (max-width: 360px) {
  .ssz-nav__actions { gap: .25rem; }
  /* Yahan pehle icon-btn 36px kar diya jaata tha. Sabse chhote phone par
     hi menu ka button sabse chhota ho jaata tha — jabki wahi mobile par
     ghoomne ka ekmatra raasta hai. Upar wali gap kam karne se jagah waise
     hi mil jaati hai, isliye button 40px hi rehne diya. */
  .lang-pick { font-size: .66rem; padding: .26rem 1.1rem .26rem .42rem; }
  .lang-pick { background-position: calc(100% - 9px) 52%, calc(100% - 6px) 52%; }
}

/* --------------------------------------------------------------------------
   Modal phone par neeche se aati sheet ban jaati hai

   Do cheezein theek ki gayi hain:

   1) 360px par backdrop ka padding aur modal ka gol kinara milkar 32px kha
      jaate the — jo dikhta kisi ko nahi, par form ko 280px me thoos deta
      tha. Ab modal neeche se chipki poori-chaudai ki sheet hai (wahi shakl
      jo phone ke apne dialog ki hoti hai).

   2) Button ka kram ULTA tha. Footer `justify-content: flex-end` +
      `flex-wrap: wrap` hai, aur DOM me pehle "Galat hai" (laal) aata hai,
      phir "Verify + Receipt". Chhoti screen par jab ye do line me tootte
      the, to LAAL wala UPAR aa jaata tha aur asli kaam neeche. Ab
      `column-reverse` se asli kaam hamesha upar rehta hai, aur dono poori
      chaudai lete hain — jaldi me galat button dabne ka darr khatam.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .ssz-modal-backdrop {
    padding: 0;
    place-items: end stretch;
  }
  .ssz-modal,
  .ssz-modal--sm,
  .ssz-modal--lg {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
  }
  .ssz-modal__head { padding: var(--sp-4) var(--sp-5); }
  .ssz-modal__body { padding: var(--sp-5) var(--sp-4); }
  .ssz-modal__foot {
    padding: var(--sp-4);
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    flex-direction: column-reverse;
    flex-wrap: nowrap;
  }
  .ssz-modal__foot .btn-ssz { width: 100%; }
}