/* ==========================================================================
   TutorAI Marketplace — Premium Design System v2
   Ground-up rebuild. No Bootstrap dependency for redesigned pages — this
   file is the entire visual layer: reset, tokens, type, and every
   component (buttons, cards, forms, tables, badges, alerts, empty/loading
   states, modals, tabs, toasts, dropdowns, pagination, breadcrumbs,
   tooltips, progress/stepper, file upload, calendar grid, charts). Legacy
   CRUD pages not yet rebuilt this round still load Bootstrap for grid/
   utility classes only; every visual token below overrides Bootstrap's
   defaults hard enough that nothing reads as Bootstrap even there.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Neutral scale (cool gray, Linear/Stripe-style) ---- */
  --gray-25:  #fbfbfd;
  --gray-50:  #f6f6f9;
  --gray-100: #eeeef3;
  --gray-150: #e4e4ec;
  --gray-200: #d7d7e2;
  --gray-300: #b9b9cb;
  --gray-400: #9393ab;
  --gray-500: #6f6f8a;
  --gray-600: #55556d;
  --gray-700: #3f3f54;
  --gray-800: #26263a;
  --gray-900: #131320;
  --black: #0a0a12;

  /* ---- Accent: signal violet ---- */
  --accent-50:  #f1efff;
  --accent-100: #e3dfff;
  --accent-300: #b4a6ff;
  --accent-500: #6a5cf5;
  --accent-600: #5847e0;
  --accent-700: #4736bd;

  --success-500: #17b26a;
  --success-50:  #e7f9f0;
  --warn-500: #f79009;
  --warn-50:  #fef3e0;
  --danger-500: #f04452;
  --danger-50:  #fde9ea;

  /* ---- AI signal: violet -> pink, reserved for AI-powered surfaces
     (match cards, AI assistant, AI lesson tools) so "AI-generated" reads
     as a distinct, premium signal rather than the everyday accent ---- */
  --ai-500: #8b5cf6;
  --ai-600: #7c3aed;
  --ai-pink: #ec4899;
  --gradient-ai: linear-gradient(135deg, var(--ai-600) 0%, var(--ai-500) 45%, var(--ai-pink) 100%);
  --gradient-ai-soft: linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(236,72,153,0.08) 100%);

  /* ---- Secondary accents: warmth against the cool violet/gray palette so
     the site doesn't read as one monotone hue — orange for human/CTA
     moments (audio player, consultation forms), teal for trust/growth
     moments (stats, tutor-earning band) ---- */
  --warm-400: #fdba74;
  --warm-500: #f7822c;
  --warm-600: #e2650f;
  --warm-50:  #fff3e8;
  --teal-400: #5eead4;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-50:  #e7fbf8;
  --navy-900: #0c1130;
  --navy-800: #161b3d;
  --gradient-warm: linear-gradient(135deg, #f7822c 0%, #ec4899 100%);
  --gradient-navy: linear-gradient(135deg, var(--navy-900) 0%, #241a52 55%, #3d1f6b 100%);

  --surface: #ffffff;
  --surface-sunk: var(--gray-25);
  --border: var(--gray-150);
  --border-strong: var(--gray-200);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-xs: 0 1px 2px rgba(19,19,32,0.05);
  --shadow-sm: 0 2px 8px rgba(19,19,32,0.06), 0 1px 2px rgba(19,19,32,0.04);
  --shadow-md: 0 8px 24px rgba(19,19,32,0.09), 0 2px 6px rgba(19,19,32,0.05);
  --shadow-focus: 0 0 0 4px rgba(106,92,245,0.16);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
body {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gray-800);
  background: var(--surface-sunk);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--black);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
}
h1 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-size: 1.65rem; line-height: 1.2; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 0.75em; color: var(--gray-600); }
a { color: var(--accent-600); text-decoration: none; transition: color .12s var(--ease); }
a:hover { color: var(--accent-700); }
code { background: var(--gray-100); padding: 0.1em 0.4em; border-radius: 5px; font-size: 0.9em; }

/* ==========================================================================
   Buttons — solid dark primary, thin-border secondary, ghost tertiary
   ========================================================================== */
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--font); font-weight: 600; font-size: 0.875rem;
  padding: 0.6rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: all .14s var(--ease);
  white-space: nowrap;
}
.pbtn-primary { background: var(--black); color: #fff; }
.pbtn-primary:hover { background: var(--gray-800); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pbtn-accent { background: var(--accent-500); color: #fff; }
.pbtn-accent:hover { background: var(--accent-600); color: #fff; box-shadow: var(--shadow-sm); }
.pbtn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--gray-800); }
.pbtn-secondary:hover { border-color: var(--gray-400); background: var(--gray-25); }
.pbtn-ghost { background: transparent; color: var(--gray-600); }
.pbtn-ghost:hover { background: var(--gray-100); color: var(--gray-900); }
.pbtn-danger { background: var(--danger-50); color: var(--danger-500); }
.pbtn-danger:hover { background: var(--danger-500); color: #fff; }
.pbtn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.pbtn-lg { padding: 0.85rem 1.6rem; font-size: 0.95rem; border-radius: var(--radius-md); }
.pbtn-block { width: 100%; }
.pbtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ==========================================================================
   Surfaces — cards, panels
   ========================================================================== */
.psurface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.psurface--pad { padding: 1.5rem; }
.psurface--hover { transition: box-shadow .16s var(--ease), border-color .16s var(--ease); }
.psurface--hover:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }

/* ==========================================================================
   Forms
   ========================================================================== */
.pfield { margin-bottom: 1.1rem; }
.pfield__error { font-size: 0.78rem; color: var(--danger-500, #dc2626); margin: 0.35rem 0 0; }

/* ==========================================================================
   Date & time picker — modern inline calendar replacing the browser's
   native <input type="datetime-local">, whose look varies wildly (and
   often dated) across browsers/OS. Expands inline rather than as a
   floating popover so it never gets clipped by a modal's overflow.
   ========================================================================== */
.pdatepicker { position: relative; }
.pdatepicker__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  cursor: pointer; text-align: left; font: inherit;
}
[dir="rtl"] .pdatepicker__trigger { text-align: right; }
.pdatepicker__trigger span { color: var(--gray-400); }
.pdatepicker__trigger span.has-value { color: var(--gray-900); font-weight: 600; }
.pdatepicker__trigger svg { color: var(--gray-400); flex-shrink: 0; }
.pdatepicker__panel {
  display: none; margin-top: 0.6rem; padding: 1rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm);
}
.pdatepicker__panel.is-open { display: block; }
.pdatepicker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.pdatepicker__month-label { font-weight: 700; font-size: 0.88rem; color: var(--gray-900); }
.pdatepicker__nav {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gray-500); transition: background .12s var(--ease), color .12s var(--ease);
}
.pdatepicker__nav:hover:not(:disabled) { background: var(--gray-100); color: var(--gray-900); }
.pdatepicker__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.pdatepicker__weekdays, .pdatepicker__days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; text-align: center;
}
.pdatepicker__weekdays { margin-bottom: 0.3rem; }
.pdatepicker__weekdays span { font-size: 0.7rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; padding: 0.3rem 0; display: block; }
.pdatepicker__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.83rem; font-family: var(--font); cursor: pointer;
  border: none; background: transparent; color: var(--gray-700);
  transition: background .1s var(--ease), color .1s var(--ease);
}
.pdatepicker__day:hover:not(:disabled):not(.is-empty) { background: var(--gray-100); }
.pdatepicker__day:disabled:not(.is-empty) { color: var(--gray-300); cursor: not-allowed; }
.pdatepicker__day.is-empty { visibility: hidden; cursor: default; }
.pdatepicker__day.is-today { color: var(--accent-600); font-weight: 700; }
.pdatepicker__day.is-selected { background: var(--gradient-ai); color: #fff; font-weight: 700; }
.pdatepicker__time-row {
  display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.8rem;
  padding-top: 0.9rem; border-top: 1px solid var(--gray-100); font-size: 0.83rem; color: var(--gray-600);
}
.pdatepicker__time-row svg { flex-shrink: 0; color: var(--gray-400); }
.pdatepicker__time-row input { flex: 1; }
.pfield label {
  display: block; font-weight: 600; font-size: 0.82rem; color: var(--gray-700);
  margin-bottom: 0.4rem;
}
.pinput, select.pinput, textarea.pinput {
  width: 100%; font-family: var(--font); font-size: 0.9rem; color: var(--gray-900);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 0.65rem 0.85rem;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.pinput:focus, select.pinput:focus, textarea.pinput:focus {
  outline: none; border-color: var(--accent-500); box-shadow: var(--shadow-focus);
}
.pinput::placeholder { color: var(--gray-400); }

/* ==========================================================================
   Tables
   ========================================================================== */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th {
  text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--gray-400); padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
}
.ptable td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); font-size: 0.88rem; }
.ptable tr:hover td { background: var(--gray-25); }
.ptable tr:last-child td { border-bottom: none; }

/* ==========================================================================
   Badges / pills / avatars
   ========================================================================== */
.ppill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.65rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em;
}
.ppill--success { background: var(--success-50); color: var(--success-500); }
.ppill--warn { background: var(--warn-50); color: var(--warn-500); }
.ppill--danger { background: var(--danger-50); color: var(--danger-500); }
.ppill--neutral { background: var(--gray-100); color: var(--gray-600); }
.ppill--accent { background: var(--accent-50); color: var(--accent-700); }

.pavatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; color: #fff; flex-shrink: 0;
  font-family: var(--font);
}
/* deterministic color from a numeric seed via inline style --seed */
.pavatar { background: var(--accent-500); }
.pavatar-photo { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-block; }

/* ==========================================================================
   Alerts / toasts
   ========================================================================== */
.palert {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.1rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500; margin-bottom: 1.25rem;
}
.palert--success { background: var(--success-50); color: #0b7a45; }
.palert--danger  { background: var(--danger-50); color: #b8202c; }
.palert--info    { background: var(--accent-50); color: var(--accent-700); }
.palert--warn    { background: var(--warn-50); color: #92600a; }

/* ==========================================================================
   Empty / loading states
   ========================================================================== */
.pempty { text-align: center; padding: 4rem 1.5rem; color: var(--gray-500); }
.pempty__icon {
  width: 56px; height: 56px; border-radius: 16px; background: var(--gray-100);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  margin: 0 auto 1rem;
}
.pskeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 37%, var(--gray-100) 63%);
  background-size: 400% 100%; animation: pskeleton-move 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes pskeleton-move { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==========================================================================
   Layout primitives (replaces Bootstrap grid on rebuilt pages)
   ========================================================================== */
.pshell { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.pshell--wide { max-width: 1440px; }
.pgrid { display: grid; gap: 1.25rem; }
.pgrid-2 { grid-template-columns: repeat(2, 1fr); }
.pgrid-3 { grid-template-columns: repeat(3, 1fr); }
.pgrid-4 { grid-template-columns: repeat(4, 1fr); }
.pvisually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.pflex { display: flex; }
.pflex-col { flex-direction: column; }
.pitems-center { align-items: center; }
.pjustify-between { justify-content: space-between; }
.pgap-1 { gap: 0.5rem; } .pgap-2 { gap: 1rem; } .pgap-3 { gap: 1.5rem; }

/* ==========================================================================
   Public marketing nav
   ========================================================================== */
.pnav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.pnav__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0; }
.pnav__brand { font-weight: 800; font-size: 1.15rem; color: var(--black); letter-spacing: -0.02em; }
.pnav__brand span { color: var(--accent-500); }
.pnav__links { display: flex; align-items: center; gap: 0.35rem; }
.pnav__links a:not(.pbtn) {
  color: var(--gray-600); font-weight: 600; font-size: 0.875rem;
  padding: 0.5rem 0.8rem; border-radius: var(--radius-sm);
}
.pnav__links a:not(.pbtn):hover { background: var(--gray-100); color: var(--gray-900); }

.plang-switch, .pcur-switch {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--gray-600); font-weight: 600; font-size: 0.8rem;
  padding: 0.4rem 0.55rem; cursor: pointer;
}
.plang-switch:hover, .pcur-switch:hover { border-color: var(--gray-300); }
.dtopbar .plang-switch, .dtopbar .pcur-switch { font-size: 0.78rem; padding: 0.35rem 0.5rem; }

/* ==========================================================================
   Dashboard shell — light sidebar, hairline borders (Linear/Stripe-style,
   NOT a dark navy admin-template sidebar)
   ========================================================================== */
.dshell { display: flex; min-height: 100vh; background: var(--surface-sunk); }
.dsidebar {
  width: 232px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.75rem;
}
.dsidebar__brand { font-weight: 800; font-size: 1.05rem; color: var(--black); padding: 0 0.5rem; letter-spacing: -0.02em; }
.dsidebar__brand span { color: var(--accent-500); }
.dnav { display: flex; flex-direction: column; gap: 0.1rem; }
.dnav a {
  display: flex; align-items: center; gap: 0.65rem;
  color: var(--gray-600); font-weight: 500; font-size: 0.86rem;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  transition: all .12s var(--ease);
}
.dnav a:hover { background: var(--gray-50); color: var(--gray-900); }
.dnav a.active { background: var(--accent-50); color: var(--accent-700); font-weight: 700; }
.dnav a .dnav__icon { font-size: 0.95rem; width: 18px; text-align: center; opacity: 0.85; }
.dmain { flex: 1; min-width: 0; }
.dtopbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0.9rem 2rem; display: flex; align-items: center; justify-content: space-between;
}
.dtopbar__title { font-weight: 700; font-size: 0.95rem; color: var(--gray-900); }
.dcontent { padding: 2rem; max-width: 1100px; }
.duser {
  display: flex; align-items: center; gap: 0.6rem; margin-top: auto;
  padding: 0.6rem 0.6rem; border-radius: var(--radius-sm); background: var(--gray-50);
}
.duser__name { font-size: 0.82rem; font-weight: 600; color: var(--gray-800); }
.duser__role { font-size: 0.72rem; color: var(--gray-500); }

/* ==========================================================================
   Stat cards
   ========================================================================== */
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
}
.stat__label { font-size: 0.76rem; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.stat__value { font-size: 1.9rem; font-weight: 800; color: var(--black); letter-spacing: -0.02em; margin-top: 0.2rem; }
.stat__delta { font-size: 0.78rem; font-weight: 700; margin-top: 0.3rem; }
.stat__delta--up { color: var(--success-500); }
.stat__delta--down { color: var(--danger-500); }

/* ==========================================================================
   Hero (landing)
   ========================================================================== */
.hero { padding: 5.5rem 0 5rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--accent-50); color: var(--accent-700);
  font-weight: 700; font-size: 0.78rem; padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--accent-100);
}
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); max-width: 720px; }
.hero p.lead { font-size: 1.15rem; max-width: 560px; }

/* ==========================================================================
   Tutor cards / match pill
   ========================================================================== */
.tcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.4rem; transition: all .16s var(--ease);
}
.tcard:hover { border-color: var(--gray-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.tcard--photo { padding: 0; overflow: hidden; }
.tcard__photo { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--gray-100); overflow: hidden; }
.tcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard__photo-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; color: #fff; background: var(--accent-500);
}
.tcard__photo-fallback[data-c="2"] { background: var(--success-500); }
.tcard__photo-fallback[data-c="3"] { background: var(--warn-500); }
.tcard__photo-fallback[data-c="4"] { background: #2f8fe0; }
.tcard__photo-fallback[data-c="5"] { background: #e0568f; }
.tcard__rating {
  position: absolute; top: 0.7rem; right: 0.7rem; display: inline-flex; align-items: center; gap: 0.25rem;
  background: rgba(10,10,18,0.72); backdrop-filter: blur(4px); color: #fff; font-weight: 700; font-size: 0.78rem;
  padding: 0.3rem 0.6rem; border-radius: 999px;
}
.tcard__rating svg { color: var(--warm-400); }
.matchpill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--success-50); color: #0b7a45; font-weight: 800; font-size: 0.78rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}

/* ==========================================================================
   Pricing / testimonials
   ========================================================================== */
.pricing-card { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); padding: 2.25rem 2rem; }
.pricing-card--featured { border: 1.5px solid var(--black); box-shadow: var(--shadow-md); }
.testimonial { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); padding: 1.75rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .dsidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 60; transition: left .18s var(--ease); box-shadow: var(--shadow-md); }
  .dsidebar.is-open { left: 0; }
  .dcontent { padding: 1.25rem; }
  .pgrid-2, .pgrid-3, .pgrid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  /* Force ANY .pgrid to a single column on phones, including ones that set
     a custom grid-template-columns inline (hero split, sidebar layouts) —
     inline styles win specificity over .pgrid-2/-3/-4, so this is the one
     rule that guarantees nothing stays multi-column on a phone screen. */
  .pgrid { grid-template-columns: 1fr !important; }

  .pnav__toggle { display: inline-flex; }
  .pnav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 0.75rem 1.5rem 1.1rem; box-shadow: var(--shadow-sm);
  }
  .pnav__links.is-open { display: flex; }
  .pnav__links a:not(.pbtn) { padding: 0.65rem 0.4rem; }
  .pnav__links .pbtn { margin-top: 0.4rem; }
}
@media (min-width: 768px) {
  .pnav__toggle { display: none; }
}
@media (max-width: 576px) {
  .hero { padding: 3rem 0; }
  .pricing-card--featured { transform: none; }
}

/* ==========================================================================
   Legacy Bootstrap-classname compatibility layer
   Pages not yet rebuilt this round still use Bootstrap's grid (.row/.col-*)
   and component classes (.card/.btn/.table/.form-control/.alert/.badge).
   These overrides make sure they inherit the SAME tokens as the rebuilt
   pages — same colors, type, radius, spacing — so nothing on an
   not-yet-rebuilt page reverts to default Bootstrap blue.
   ========================================================================== */
.navbar { background: rgba(255,255,255,0.82) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border) !important; padding: 0.9rem 0; }
.navbar-brand { font-weight: 800; font-size: 1.15rem; color: var(--black) !important; letter-spacing: -0.02em; }
.navbar .d-flex a { font-weight: 600; font-size: 0.875rem; color: var(--gray-600); padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); }
.navbar .d-flex a:hover { background: var(--gray-100); color: var(--gray-900); }

.btn { font-family: var(--font); font-weight: 600; font-size: 0.875rem; border-radius: var(--radius-sm); padding: 0.6rem 1.1rem; border: 1px solid transparent; transition: all .14s var(--ease); }
.btn-primary { background: var(--black); color: #fff; }
.btn-primary:hover { background: var(--gray-800); color: #fff; }
.btn-outline-secondary, .btn-outline-primary { background: var(--surface); border-color: var(--border-strong); color: var(--gray-800); }
.btn-outline-secondary:hover, .btn-outline-primary:hover { border-color: var(--gray-400); background: var(--gray-25); }
.btn-outline-success { border-color: var(--success-500); color: var(--success-500); background: var(--surface); }
.btn-outline-success:hover { background: var(--success-500); color: #fff; }
.btn-outline-danger { border-color: var(--danger-500); color: var(--danger-500); background: var(--surface); }
.btn-outline-danger:hover { background: var(--danger-500); color: #fff; }
.btn-link { font-weight: 600; color: var(--accent-600); }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn-lg { padding: 0.85rem 1.6rem; font-size: 0.95rem; }

.card { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.card-body { padding: 1.4rem; }
.card-title { font-weight: 700; font-size: 1rem; color: var(--black); }

.form-control, .form-select { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; font-family: var(--font); color: var(--gray-900); background: var(--surface); }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--accent-500); box-shadow: var(--shadow-focus); }
.form-label { font-weight: 600; font-size: 0.82rem; color: var(--gray-700); margin-bottom: 0.4rem; }

.table thead th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); border-bottom: 1px solid var(--border); padding: 0.7rem 1rem; }
.table tbody td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); font-size: 0.88rem; vertical-align: middle; }
.table tbody tr:hover { background: var(--gray-25); }

.alert { border: none; border-radius: var(--radius-sm); padding: 0.85rem 1.1rem; font-weight: 500; font-size: 0.88rem; }
.alert-success { background: var(--success-50); color: #0b7a45; }
.alert-danger { background: var(--danger-50); color: #b8202c; }
.alert-info { background: var(--accent-50); color: var(--accent-700); }
.alert-warning { background: var(--warn-50); color: #92600a; }

.badge { font-weight: 700; border-radius: 999px; padding: 0.3em 0.75em; font-size: 0.72rem; }
.bg-primary { background: var(--accent-500) !important; }
.bg-success { background: var(--success-500) !important; }
.bg-secondary { background: var(--gray-400) !important; }

.empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--gray-500); }
.empty-state__icon { font-size: 2.25rem; margin-bottom: 0.75rem; }

/* ==========================================================================
   Skeleton variants + seeded avatar colors
   ========================================================================== */
.pskeleton--text { height: 0.9em; margin-bottom: 0.5em; }
.pskeleton--row { height: 2.6rem; margin-bottom: 0.5rem; }
.pskeleton--avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }

.pavatar[data-c="2"] { background: var(--success-500); }
.pavatar[data-c="3"] { background: var(--warn-500); }
.pavatar[data-c="4"] { background: #2f8fe0; }
.pavatar[data-c="5"] { background: #e0568f; }
.pavatar[data-c="6"] { background: var(--gray-700); }

/* extra grid utilities */
.pgrid-5 { grid-template-columns: repeat(5, 1fr); }
.pgrid-6 { grid-template-columns: repeat(6, 1fr); }
.pgrid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* shared focus-visible ring for interactive components below */
.pbtn:focus-visible, .pdropdown__item:focus-visible, .ptabs__tab:focus-visible,
.pmodal__close:focus-visible, .ppagination a:focus-visible {
  outline: none; box-shadow: var(--shadow-focus);
}

/* ==========================================================================
   Modal / dialog
   ========================================================================== */
.pmodal-overlay {
  position: fixed; inset: 0; background: rgba(10,10,18,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 1.5rem;
  opacity: 0; pointer-events: none; transition: opacity .16s var(--ease);
}
.pmodal-overlay.is-open { opacity: 1; pointer-events: auto; }
.pmodal {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  width: 100%; max-width: 480px; max-height: calc(100vh - 3rem); overflow-y: auto;
  transform: translateY(8px) scale(0.98); transition: transform .16s var(--ease);
}
.pmodal-overlay.is-open .pmodal { transform: translateY(0) scale(1); }
.pmodal--lg { max-width: 720px; }
.pmodal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.pmodal__title { font-weight: 700; font-size: 1.05rem; color: var(--black); margin: 0; }
.pmodal__close {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: transparent; border: none; color: var(--gray-500);
  font-size: 1rem; cursor: pointer; transition: all .12s var(--ease);
}
.pmodal__close:hover { background: var(--gray-100); color: var(--gray-900); }
.pmodal__body { padding: 1.5rem; }
.pmodal__footer {
  display: flex; justify-content: flex-end; gap: 0.6rem;
  padding: 1.1rem 1.5rem; border-top: 1px solid var(--border);
}
body.pmodal-locked { overflow: hidden; }

/* ==========================================================================
   Tabs
   ========================================================================== */
.ptabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }
.ptabs__tab {
  padding: 0.7rem 1rem; font-family: var(--font); font-weight: 600; font-size: 0.86rem;
  color: var(--gray-500); background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: color .12s var(--ease), border-color .12s var(--ease);
}
.ptabs__tab:hover { color: var(--gray-800); }
.ptabs__tab.active { color: var(--black); border-bottom-color: var(--accent-500); }
.ptabpanel { display: none; }
.ptabpanel.active { display: block; animation: pfade .14s var(--ease); }
@keyframes pfade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   Toasts (stacking, JS-driven — distinct from the inline session .palert)
   ========================================================================== */
.ptoasts {
  position: fixed; top: 1.25rem; right: 1.25rem; z-index: 300;
  display: flex; flex-direction: column; gap: 0.6rem;
  width: min(340px, calc(100vw - 2.5rem));
}
.ptoast {
  background: var(--gray-900); color: #fff; border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-md);
  display: flex; align-items: flex-start; gap: 0.6rem;
  opacity: 0; transform: translateX(12px); transition: all .18s var(--ease);
  border-left: 3px solid var(--gray-600);
}
.ptoast.is-visible { opacity: 1; transform: translateX(0); }
.ptoast--success { border-left-color: var(--success-500); }
.ptoast--danger  { border-left-color: var(--danger-500); }
.ptoast--warn    { border-left-color: var(--warn-500); }
.ptoast__close { margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 0.9rem; line-height: 1; }
.ptoast__close:hover { color: #fff; }

/* ==========================================================================
   Dropdown / menu
   ========================================================================== */
.pdropdown { position: relative; display: inline-block; }
.pdropdown__menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 0.4rem; display: none; z-index: 100;
}
.pdropdown.is-open .pdropdown__menu { display: block; animation: pdrop .12s var(--ease); }
@keyframes pdrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.pdropdown__item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  background: none; border: none; padding: 0.55rem 0.7rem; border-radius: 6px;
  font-family: var(--font); font-size: 0.85rem; font-weight: 500; color: var(--gray-700); cursor: pointer;
}
.pdropdown__item:hover { background: var(--gray-50); color: var(--gray-900); }
.pdropdown__item--danger { color: var(--danger-500); }
.pdropdown__item--danger:hover { background: var(--danger-50); }
.pdropdown__divider { height: 1px; background: var(--border); margin: 0.4rem 0; }

/* ==========================================================================
   Pagination / breadcrumbs / tooltip / progress / stepper
   ========================================================================== */
.ppagination { display: flex; align-items: center; gap: 0.3rem; margin-top: 1.5rem; }
.ppagination a, .ppagination span {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; color: var(--gray-600);
}
.ppagination a:hover { background: var(--gray-100); color: var(--gray-900); }
.ppagination .active { background: var(--black); color: #fff; }
.ppagination .disabled { color: var(--gray-300); pointer-events: none; }

.pbreadcrumbs { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--gray-500); margin-bottom: 1.25rem; }
.pbreadcrumbs a { color: var(--gray-500); font-weight: 500; }
.pbreadcrumbs a:hover { color: var(--gray-900); }
.pbreadcrumbs__sep { color: var(--gray-300); }
.pbreadcrumbs__current { color: var(--gray-900); font-weight: 600; }

[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(2px); background: var(--gray-900); color: #fff;
  font-size: 0.72rem; font-weight: 600; padding: 0.35rem 0.6rem; border-radius: 6px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: all .12s var(--ease); z-index: 150;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.pprogress { height: 8px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.pprogress__bar { height: 100%; background: var(--accent-500); border-radius: 999px; transition: width .3s var(--ease); }
.pprogress__bar--success { background: var(--success-500); }

.pstepper { display: flex; align-items: center; }
.pstepper__step { display: flex; align-items: center; gap: 0.5rem; color: var(--gray-400); font-weight: 600; font-size: 0.82rem; }
.pstepper__step.active { color: var(--gray-900); }
.pstepper__dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gray-100); color: var(--gray-500);
  display: flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 700; flex-shrink: 0;
}
.pstepper__step.done .pstepper__dot { background: var(--success-500); color: #fff; }
.pstepper__step.active .pstepper__dot { background: var(--accent-500); color: #fff; }
.pstepper__line { width: 32px; height: 2px; background: var(--gray-150); margin: 0 0.5rem; flex-shrink: 0; }

/* ==========================================================================
   File upload / dropzone
   ========================================================================== */
.pdropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: 2rem 1.5rem; text-align: center; color: var(--gray-500); cursor: pointer;
  transition: all .14s var(--ease); background: var(--surface-sunk);
}
.pdropzone:hover, .pdropzone.is-dragover { border-color: var(--accent-500); background: var(--accent-50); color: var(--accent-700); }
.pdropzone input[type="file"] { display: none; }

/* ==========================================================================
   Calendar grid (month view — availability/schedule pages)
   ========================================================================== */
.pcal { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.pcal__head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--gray-25); border-bottom: 1px solid var(--border); }
.pcal__head div { padding: 0.6rem; text-align: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); }
.pcal__body { display: grid; grid-template-columns: repeat(7, 1fr); }
.pcal__cell { min-height: 96px; padding: 0.5rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.8rem; color: var(--gray-400); }
.pcal__cell:nth-child(7n) { border-right: none; }
.pcal__cell.is-today { background: var(--accent-50); }
.pcal__cell.is-muted { color: var(--gray-300); background: var(--gray-25); }
.pcal__date { font-weight: 700; color: var(--gray-700); }
.pcal__cell.is-today .pcal__date { color: var(--accent-700); }
.pcal__event {
  margin-top: 0.3rem; background: var(--accent-500); color: #fff; font-size: 0.68rem; font-weight: 600;
  padding: 0.15rem 0.4rem; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   Live classroom (embedded Jitsi + lesson tools sidebar)
   ========================================================================== */
.pclassroom__header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 1rem;
}
.pclassroom__video {
  position: relative; background: var(--gray-900); border-radius: var(--radius-lg);
  height: 74vh; min-height: 480px; overflow: hidden;
}
.pclassroom__video #jitsiContainer, .pclassroom__video #jitsiContainer iframe {
  width: 100%; height: 100%; display: block; border: 0;
}
.pclassroom__prejoin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; max-width: 380px; width: 100%; padding: 2rem;
}
@media (max-width: 767px) {
  .pclassroom__video { height: 60vh; min-height: 360px; }
}

/* ==========================================================================
   Consultation lead-capture card (homepage, near hero + near footer)
   ========================================================================== */
.pconsult {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--gradient-navy); padding: 3rem 2rem; text-align: center;
}
.pconsult__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.pconsult__heading { color: #fff; margin-bottom: 0.6rem; }
.pconsult__heading .ptext-gradient { background: var(--gradient-warm); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pconsult__subtext { color: rgba(255,255,255,.72); margin-bottom: 1.75rem; font-size: 0.95rem; }
.pconsult__row {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 1rem;
}
.pconsult__row .pinput {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff;
  flex: 1 1 170px; min-width: 150px;
}
.pconsult__row .pinput::placeholder { color: rgba(255,255,255,.45); }
.pconsult__row select.pinput option { color: var(--gray-900); }
.pconsult__submit {
  background: var(--gradient-warm); color: #fff; font-weight: 700; flex: 0 0 auto;
  padding: 0.75rem 1.6rem; border-radius: var(--radius-sm); border: none; cursor: pointer;
}
.pconsult__submit:hover { filter: brightness(1.08); }
.pconsult__consent {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.5rem;
}
.pconsult__consent label {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(255,255,255,.55); cursor: pointer;
}
.pconsult__consent a { color: rgba(255,255,255,.8); text-decoration: underline; }
@media (max-width: 640px) {
  .pconsult { padding: 2.25rem 1.25rem; }
  .pconsult__row .pinput, .pconsult__submit { flex: 1 1 100%; }
}

/* ==========================================================================
   Audio player (voice-note style — intro audio on tutor profiles)
   ========================================================================== */
.paudio {
  display: flex; align-items: center; gap: 0.9rem; background: var(--gray-50);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.85rem 1.1rem;
}
.paudio__play {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; border: none; cursor: pointer;
  background: var(--warm-500); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(247,144,9,0.35); transition: transform .12s var(--ease);
}
.paudio__play:hover { transform: scale(1.05); }
.paudio__meta { flex: 1; min-width: 0; }
.paudio__label { font-weight: 700; font-size: 0.88rem; color: var(--gray-800); margin-bottom: 0.25rem; }
.paudio__time { font-size: 0.78rem; color: var(--gray-400); font-variant-numeric: tabular-nums; }
.paudio__track { height: 4px; border-radius: 2px; background: var(--gray-200); margin-top: 0.5rem; overflow: hidden; }
.paudio__track-fill { height: 100%; background: var(--warm-500); width: 0%; transition: width .1s linear; }

/* ==========================================================================
   Datepicker (large popover calendar for date inputs)
   ========================================================================== */
.pdatepicker { position: relative; }
.pdatepicker__trigger {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; cursor: pointer; font-size: 0.92rem; padding: 0.75rem 1rem;
}
.pdatepicker__trigger span { color: var(--gray-400); }
.pdatepicker__trigger.has-value span { color: var(--gray-800); font-weight: 600; }
.pdatepicker__panel {
  display: none; position: absolute; z-index: 40; top: calc(100% + 0.5rem); left: 0;
  width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1rem;
}
.pdatepicker.is-open .pdatepicker__panel { display: block; }
.pdatepicker__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.pdatepicker__nav strong { font-size: 0.9rem; }
.pdatepicker__nav button {
  background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray-600);
}
.pdatepicker__nav button:hover { background: var(--gray-100); color: var(--black); }
.pdatepicker__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.3rem; }
.pdatepicker__weekdays div { text-align: center; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; color: var(--gray-400); padding: 0.3rem 0; }
.pdatepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pdatepicker__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.82rem;
  border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-700); border: 1px solid transparent;
}
.pdatepicker__day:hover { background: var(--gray-100); }
.pdatepicker__day.is-muted { color: var(--gray-300); }
.pdatepicker__day.is-today { border-color: var(--accent-300); font-weight: 700; }
.pdatepicker__day.is-selected { background: var(--accent-500); color: #fff; font-weight: 700; }
.pdatepicker__day.is-past { color: var(--gray-300); cursor: not-allowed; }
.pdatepicker__footer { display: flex; justify-content: space-between; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.pdatepicker__footer button { background: none; border: none; color: var(--gray-500); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.pdatepicker__footer button:hover { color: var(--accent-700); }

/* ==========================================================================
   Charts (Chart.js container) + pure-CSS/SVG sparklines
   ========================================================================== */
.pchart { position: relative; }
.pchart canvas { max-width: 100%; }
.pchart__legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.75rem; font-size: 0.78rem; color: var(--gray-600); }
.pchart__legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 0.35rem; }
.psparkline { display: block; overflow: visible; }

/* ==========================================================================
   Responsive additions for Phase 1 components
   ========================================================================== */
@media (max-width: 991px) {
  .pgrid-5, .pgrid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .pmodal { max-width: calc(100vw - 2rem); }
  .ptoasts { top: auto; bottom: 1rem; right: 1rem; left: 1rem; width: auto; }
  .pcal__cell { min-height: 56px; font-size: 0.72rem; }
  .pcal__event { display: none; }
  .pstepper__line { width: 16px; }
  .pdatepicker__panel { width: calc(100vw - 2.5rem); }
}

/* ==========================================================================
   Phase 2 — Premium visual identity
   Gradient/icon/motion layer that sits on top of the existing token system.
   Nothing here replaces the hairline-border, light-sidebar philosophy from
   Phase 1 — it adds warmth (AI gradient, grain, blobs, icon treatment,
   scroll-reveal motion) so pages read as a funded product, not a form.
   ========================================================================== */

/* Icon containers — replaces bare emoji glyphs everywhere */
.picon-box {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--accent-50); color: var(--accent-600);
}
.picon-box--lg { width: 52px; height: 52px; border-radius: var(--radius-md); }
.picon-box--gradient { background: var(--gradient-ai); color: #fff; }
.picon-box--success { background: var(--success-50); color: var(--success-500); }
.picon-box--neutral { background: var(--gray-100); color: var(--gray-600); }
.picon-box--dark { background: rgba(255,255,255,0.1); color: #fff; }
.picon-box--warm { background: var(--warm-50); color: var(--warm-600); }
.picon-box--teal { background: var(--teal-50); color: var(--teal-600); }

/* Gradient text — one hero/section headline accent word at a time, not a habit */
.ptext-gradient {
  background: var(--gradient-ai); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Pill CTA modifier for hero/marketing buttons */
.pbtn-pill { border-radius: 999px; }

/* Brand lockup — gradient icon mark + wordmark, replaces the plain
   text-only "TutorAI" logo across nav + sidebar */
.pbrand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.05rem; color: var(--black); letter-spacing: -0.02em; }
.pbrand span b, .pbrand span span { color: var(--ai-600); font-weight: 800; }
.pbrand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; background: var(--gradient-ai); color: #fff; flex-shrink: 0;
}

/* Decorative blurred blobs — depth behind hero/panel content, kept subtle */
.pblob {
  position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none;
  opacity: 0.55;
}
.pblob--violet { background: radial-gradient(circle, var(--ai-500), transparent 70%); }
.pblob--pink { background: radial-gradient(circle, var(--ai-pink), transparent 70%); }

/* Subtle grain texture overlay — Stripe/Linear-style, applied to dark or
   gradient surfaces only, never to plain white content */
.pgrain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Mesh gradient hero backdrop */
.pmesh {
  position: relative; overflow: hidden; isolation: isolate;
}
.pmesh::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, rgba(139,92,246,0.13), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 20%, rgba(236,72,153,0.10), transparent 60%),
    var(--surface-sunk);
}

/* Gradient identity surface (dark hero bands, passport card, auth panel) */
.pgradient-surface {
  position: relative; overflow: hidden; background: var(--gradient-ai); color: #fff; isolation: isolate;
}

/* AI-flavored card — used for match reasons, AI recommendations, AI lesson tools */
.pcard-ai {
  border-radius: var(--radius-md); background: var(--gradient-ai-soft);
  border: 1px solid rgba(139,92,246,0.18); padding: 1.25rem;
}

/* Scroll-reveal — [data-reveal] fades/lifts in via IntersectionObserver in
   app.js; add [data-reveal-delay="1|2|3"] for a light stagger */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Card hover lift used across feature/tutor/pricing cards for a livelier feel */
.plift { transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.plift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

@media (max-width: 576px) {
  .pblob { display: none; }
}

/* ==========================================================================
   Split-panel auth layout (login/register) — breaks out of the centered
   .pshell to go full-bleed, like Linear/Stripe sign-in screens
   ========================================================================== */
.pauth {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 65px);
  margin: -2rem calc(50% - 50vw) -2rem;
  width: 100vw;
}
.pauth__form { display: flex; flex-direction: column; justify-content: center; padding: 3rem clamp(1.5rem, 6vw, 5rem); }
.pauth__form-inner { width: 100%; max-width: 380px; margin: 0 auto; }
.pauth__back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--gray-500); margin-bottom: 2rem; }
.pauth__panel {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--gradient-ai); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 3rem;
}
.pauth__quote { font-size: 1.3rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.pauth__quote-author { margin-top: 1.1rem; font-size: 0.85rem; opacity: 0.85; }
.pauth__stats { display: flex; gap: 2rem; }
.pauth__stats div div:first-child { font-size: 1.4rem; font-weight: 800; }
.pauth__stats div div:last-child { font-size: 0.76rem; opacity: 0.8; }
@media (max-width: 991px) {
  .pauth { grid-template-columns: 1fr; margin: -2rem 0; width: 100%; }
  .pauth__panel { display: none; }
}

/* Selectable role card (register.php) — replaces a plain <select> with a
   two-option visual picker, no JS required */
.prole-card { display: block; cursor: pointer; }
.prole-card input { position: absolute; opacity: 0; pointer-events: none; }
.prole-card__body {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 0.9rem 1rem; transition: all .14s var(--ease);
}
.prole-card input:checked + .prole-card__body { border-color: var(--ai-500); background: var(--gradient-ai-soft); }
.prole-card input:focus-visible + .prole-card__body { box-shadow: var(--shadow-focus); }
.prole-card__body strong { display: block; font-size: 0.9rem; }
.prole-card__body p { margin: 0; font-size: 0.78rem; color: var(--gray-500); }

/* FAQ — native <details>/<summary>, zero JS */
.pfaq { border-bottom: 1px solid var(--border); }
.pfaq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; font-weight: 700; font-size: 0.95rem; color: var(--gray-900);
  cursor: pointer; list-style: none;
}
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary .pfaq__chevron { transition: transform .16s var(--ease); color: var(--gray-400); flex-shrink: 0; }
.pfaq[open] summary .pfaq__chevron { transform: rotate(180deg); }
.pfaq p { padding-bottom: 1.1rem; margin: 0; max-width: 640px; }

/* ==========================================================================
   Legal documents (Privacy Policy / Terms & Conditions) — sticky TOC
   sidebar + article body, same 260px/1fr split as the tutor directory
   filter sidebar.
   ========================================================================== */
.plegal-toc { position: sticky; top: 5.5rem; }
.plegal-toc__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-400); margin-bottom: 0.8rem; font-weight: 700; }
.plegal-toc a {
  display: block; font-size: 0.84rem; color: var(--gray-600); padding: 0.4rem 0;
  border-left: 2px solid transparent; padding-left: 0.8rem; margin-left: -0.8rem;
}
.plegal-toc a:hover { color: var(--accent-600); border-left-color: var(--accent-200); }
.plegal article { max-width: 720px; }
.plegal article h2 { font-size: 1.15rem; margin: 2.2rem 0 0.75rem; scroll-margin-top: 5.5rem; }
.plegal article h2:first-child { margin-top: 0; }
.plegal article h3 { font-size: 0.98rem; margin: 1.3rem 0 0.5rem; color: var(--gray-800); }
.plegal article p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.7; margin: 0 0 0.9rem; }
.plegal article ul { margin: 0 0 0.9rem; padding-left: 1.3rem; font-size: 0.9rem; color: var(--gray-600); line-height: 1.7; }
.plegal article li { margin-bottom: 0.3rem; }
.plegal-updated { font-size: 0.8rem; color: var(--gray-400); margin-bottom: 2rem; }
.plegal-placeholder {
  background: var(--warm-50); color: var(--warm-700, #92400e); border-radius: 4px;
  padding: 0.05rem 0.4rem; font-weight: 600; font-size: 0.88em;
}
.plegal-audience-switch { display: inline-flex; gap: 0.4rem; background: var(--gray-100); padding: 0.3rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; }
.plegal-audience-switch a { padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; color: var(--gray-500); }
.plegal-audience-switch a.active { background: #fff; color: var(--gray-900); box-shadow: var(--shadow-sm); }

/* Feature list with check icons — pricing/plan cards */
.pfeature-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 1rem 0; }
.pfeature-list div { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--gray-700); }
.pfeature-list div span { color: var(--success-500); flex-shrink: 0; margin-top: 0.1rem; }

/* Contact info row */
.pcontact-row { display: flex; align-items: center; gap: 0.8rem; }
.pcontact-row + .pcontact-row { margin-top: 1.1rem; }

/* Day-of-week toggle picker (recurring service schedule) */
.pday-picker { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pday-toggle { display: inline-flex; position: relative; cursor: pointer; }
.pday-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.pday-toggle span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  font-size: 0.76rem; font-weight: 700; color: var(--gray-600); transition: all .12s var(--ease);
}
.pday-toggle input:checked + span { background: var(--gradient-ai); color: #fff; border-color: transparent; }
.pday-toggle input:focus-visible + span { box-shadow: var(--shadow-focus); }

/* Type-to-search autocomplete — plain text input + client-side filtered
   dropdown, no external JS dependency. See app.js [data-autocomplete]. */
.pautocomplete { position: relative; }
.pautocomplete__list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 120;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 230px; overflow-y: auto; display: none;
}
.pautocomplete.is-open .pautocomplete__list { display: block; }
.pautocomplete__item { padding: 0.6rem 0.85rem; font-size: 0.85rem; cursor: pointer; }
.pautocomplete__item:hover, .pautocomplete__item.is-active { background: var(--gray-50); }
.pautocomplete__item small { display: block; color: var(--gray-400); font-size: 0.74rem; margin-top: 0.1rem; }
.pautocomplete__empty { padding: 0.6rem 0.85rem; font-size: 0.82rem; color: var(--gray-400); }

/* ==========================================================================
   Full-bleed photographic hero — real photography instead of an abstract
   gradient, edge-to-edge like Preply/Skyeng/Airbnb hero banners. Breaks out
   of .pshell via the same negative-margin trick as .pauth.
   ========================================================================== */
.hero-photo {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  background-size: cover; background-position: center; overflow: hidden;
  isolation: isolate;
}
.hero-photo__overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, rgba(10,10,18,0.94) 0%, rgba(71,54,189,0.82) 42%, rgba(236,72,153,0.42) 100%);
}
.hero-photo__inner { position: relative; z-index: 1; padding: 5.5rem 0; }
.hero-photo h1 { color: #fff; }
.hero-photo h1 .ptext-gradient {
  background: linear-gradient(135deg, var(--accent-300), #fff 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-photo p.lead { color: rgba(255,255,255,0.82); }
.hero-photo .hero__eyebrow { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.22); }
.hero-photo [data-counter], .hero-photo .pflex > div > div:first-child { color: #fff; }
.hero-photo .pflex > div > div:last-child { color: rgba(255,255,255,0.7); }

/* Full-width photo band — a section-length photo with overlay text, for
   breaking up an all-white page (About "mission", "For tutors", etc.) */
/* Full-bleed soft-tinted band — breaks up long runs of white sections
   without needing a photo (used around Pricing/Testimonials on the
   homepage where a photo would compete with the content). */
.psection-tint {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  background: linear-gradient(180deg, var(--accent-50) 0%, var(--warm-50) 100%);
}
.pimg-band {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  background-size: cover; background-position: center; min-height: 360px;
  display: flex; align-items: center; overflow: hidden; isolation: isolate;
}
.pimg-band__overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(10,10,18,0.88) 0%, rgba(10,10,18,0.55) 55%, rgba(10,10,18,0.15) 100%); }
.pimg-band__inner { position: relative; z-index: 1; padding: 3.5rem 0; }
.pimg-band h2, .pimg-band h3 { color: #fff; }
.pimg-band p { color: rgba(255,255,255,0.82); }

@media (max-width: 767px) {
  .hero-photo__inner { padding: 3.5rem 0; }
  .pimg-band { min-height: 280px; }
}