@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================================
   Prophetic Shorts — Design System (ported for PDC LMS)
   Color tokens: dark cinematic ink + candlelight gold; violet secondary accent.
   ========================================================================== */
:root {
  --ink-950: #07070b;
  --ink-900: #0c0c13;
  --ink-850: #11111a;
  --ink-800: #171722;
  --ink-700: #20202e;
  --ink-600: #2e2e3e;
  --ink-500: #44445a;

  --parchment-50: #f7f3e9;
  --parchment-100: #efe9da;
  --parchment-300: #cfc8b4;
  --parchment-500: #a39c8a;

  --gold-300: #f0d189;
  --gold-400: #e4ba60;
  --gold-500: #d6a342;
  --gold-600: #b78630;
  --gold-700: #8f6722;

  --violet-400: #9486e8;
  --violet-500: #7a6ad4;
  --violet-700: #4d3f96;

  --green-500: #46b97e;
  --red-500: #e25c55;

  --surface-app: var(--ink-950);
  --surface-page: var(--ink-900);
  --surface-card: var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-hover: var(--ink-700);
  --surface-overlay: rgba(7, 7, 11, 0.72);
  --surface-scrim: linear-gradient(to top, rgba(7,7,11,0.92), rgba(7,7,11,0));

  --text-primary: var(--parchment-50);
  --text-secondary: var(--parchment-300);
  --text-muted: var(--parchment-500);
  --text-on-accent: #1c1306;
  --text-accent: var(--gold-400);

  --accent: var(--gold-500);
  --accent-hover: var(--gold-400);
  --accent-active: var(--gold-600);
  --accent-soft: rgba(214, 163, 66, 0.14);
  --omen: var(--violet-500);
  --omen-soft: rgba(122, 106, 212, 0.18);
  --positive: var(--green-500);
  --danger: var(--red-500);
  --danger-soft: rgba(226, 92, 85, 0.14);

  --border-subtle: rgba(247, 243, 233, 0.08);
  --border-strong: rgba(247, 243, 233, 0.18);
  --border-accent: rgba(214, 163, 66, 0.45);
  --focus-ring: 0 0 0 2px var(--ink-950), 0 0 0 4px var(--gold-500);

  --font-display: 'Marcellus', 'Times New Roman', serif;
  --font-sans: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --display-md: 44px;
  --display-lg: 60px;
  --display-xl: 80px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  --tracking-caps: 0.18em;
  --tracking-wide: 0.06em;
  --tracking-normal: 0;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.75);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 420ms;
}

/* ── base ─────────────────────────────────────────────── */
.ps-body { box-sizing: border-box; }
.ps-body *, .ps-body *::before, .ps-body *::after { box-sizing: border-box; }
.ps-body {
  margin: 0;
  padding: 0;
  background: var(--surface-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.ps-body h1, .ps-body h2, .ps-body h3 { margin: 0; font-weight: var(--weight-regular); }
.ps-body a { color: var(--text-accent); text-decoration: none; }
.ps-body a:hover { color: var(--accent-hover); }
.ps-body ::selection { background: var(--accent); color: var(--text-on-accent); }
.ps-main { flex: 1; }

.ps-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-caps); line-height: var(--leading-tight); }
.ps-eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-accent); }

/* ── Button ───────────────────────────────────────────── */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--weight-semibold); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.ps-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ps-btn:active { transform: scale(0.985); }
.ps-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ps-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.ps-btn--md { height: 40px; padding: 0 var(--space-4); font-size: var(--text-base); }
.ps-btn--lg { height: 50px; padding: 0 var(--space-5); font-size: var(--text-md); }
.ps-btn--block { width: 100%; }
.ps-btn--primary { background: var(--accent); color: var(--text-on-accent) !important; }
.ps-btn--primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--text-on-accent); }
.ps-btn--primary:active { background: var(--accent-active); }
.ps-btn--secondary { background: rgba(247, 243, 233, 0.1); color: var(--text-primary); }
.ps-btn--secondary:hover:not(:disabled) { background: rgba(247, 243, 233, 0.18); color: var(--text-primary); }
.ps-btn--outline { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.ps-btn--outline:hover:not(:disabled) { border-color: var(--border-accent); color: var(--text-accent); }
.ps-btn--ghost { background: transparent; color: var(--text-secondary); }
.ps-btn--ghost:hover:not(:disabled) { background: rgba(247, 243, 233, 0.08); color: var(--text-primary); }
.ps-btn--danger { background: var(--danger-soft); color: var(--danger); }
.ps-btn--danger:hover:not(:disabled) { background: rgba(226, 92, 85, 0.24); }
.ps-btn__icon { display: inline-flex; }
.ps-btn__icon svg { width: 1.15em; height: 1.15em; }

/* ── Badge ────────────────────────────────────────────── */
.ps-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.ps-badge--neutral { background: rgba(247, 243, 233, 0.1); color: var(--text-secondary); }
.ps-badge--gold { background: var(--accent); color: var(--text-on-accent); }
.ps-badge--soft { background: var(--accent-soft); color: var(--text-accent); }
.ps-badge--omen { background: var(--omen-soft); color: var(--violet-400); }
.ps-badge--free { background: rgba(70, 185, 126, 0.16); color: var(--positive); }
.ps-badge--danger { background: var(--danger-soft); color: var(--danger); }
.ps-badge--outline { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ── Input / field ────────────────────────────────────── */
.ps-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ps-field__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.ps-input, .ps-select, .ps-textarea { width: 100%; background: rgba(247, 243, 233, 0.06); background-color: rgba(247, 243, 233, 0.06); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-base); height: 42px; padding: 0 var(--space-3); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.ps-textarea { height: auto; min-height: 88px; padding: var(--space-3); resize: vertical; line-height: var(--leading-snug); }
.ps-input::placeholder, .ps-textarea::placeholder { color: var(--text-muted); }
.ps-input:hover, .ps-select:hover, .ps-textarea:hover { border-color: var(--border-strong); }
.ps-input:focus, .ps-select:focus, .ps-textarea:focus { outline: none; border-color: var(--border-accent); background: rgba(247, 243, 233, 0.09); }
.ps-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.ps-field__error { font-size: var(--text-xs); color: var(--danger); }
.ps-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a39c8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }

/* ── wordmark ─────────────────────────────────────────── */
.ps-wordmark { display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; user-select: none; line-height: 1; gap: 3px; }
.ps-wordmark__main { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 22px; color: var(--text-primary); }
.ps-wordmark__main em { font-style: normal; color: var(--text-accent); }
.ps-wordmark__sub { font-size: 9px; font-weight: 600; letter-spacing: 0.52em; text-transform: uppercase; color: var(--text-muted); }
.ps-wordmark--sm .ps-wordmark__main { font-size: 17px; }
.ps-wordmark--sm .ps-wordmark__sub { font-size: 7.5px; }

/* ── guest header / footer ────────────────────────────── */
.ps-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-7); background: rgba(7, 7, 11, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
.ps-header__nav { display: flex; align-items: center; gap: var(--space-5); }
.ps-header__link { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; padding: 6px 2px; white-space: nowrap; }
.ps-header__link:hover { color: var(--text-primary); }
.ps-header__link.is-active { color: var(--text-primary); box-shadow: 0 2px 0 var(--accent); }
.ps-header__right { display: flex; align-items: center; gap: var(--space-3); }
.ps-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6) var(--space-7); border-top: 1px solid var(--border-subtle); color: var(--text-muted); font-size: var(--text-xs); }
.ps-footer__links { display: flex; gap: var(--space-4); }
.ps-footer__links a { color: var(--text-muted); }
.ps-footer__links a:hover { color: var(--text-accent); }

/* ── landing ──────────────────────────────────────────── */
.ps-landing__hero { position: relative; min-height: 72vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-bottom: 1px solid var(--border-subtle); }
.ps-landing__hero-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% 0%, rgba(77,63,150,0.55) 0%, var(--ink-850) 55%, var(--ink-950) 100%); }
.ps-landing__hero-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(247,243,233,0.045) 1px, transparent 1px); background-size: 3px 3px; }
.ps-landing__hero-content { position: relative; z-index: 2; max-width: 720px; padding: var(--space-9) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.ps-landing__headline { font-size: clamp(40px, 6vw, var(--display-lg)); }
.ps-landing__sub { font-size: var(--text-md); color: var(--text-secondary); max-width: 520px; margin: 0; }
.ps-landing__cta { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }
.ps-landing__note { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.ps-landing__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); padding: var(--space-7); max-width: 1100px; margin: 0 auto; }
.ps-landing__feature { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.ps-landing__feature h3 { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }
.ps-landing__feature p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.ps-section { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-7) var(--space-8); }
.ps-section__title { font-size: var(--text-2xl); margin: 0 0 var(--space-5); }

/* ── auth ─────────────────────────────────────────────── */
.ps-auth { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: var(--space-8) var(--space-4); }
.ps-auth__bg { position: absolute; inset: 0; background: radial-gradient(75% 70% at 50% 45%, rgba(77,63,150,0.28) 0%, rgba(7,7,11,0.92) 72%, var(--ink-950) 100%); }
.ps-auth__card { position: relative; z-index: 2; width: 400px; max-width: 100%; background: rgba(12, 12, 19, 0.92); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); backdrop-filter: blur(8px); }
.ps-auth__card--wide { width: 520px; }
.ps-auth__title { font-size: var(--text-xl); font-weight: 600; }
.ps-auth__lead { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.ps-auth__form { display: flex; flex-direction: column; gap: var(--space-4); }
.ps-auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ps-auth__error { display: flex; flex-direction: column; gap: 2px; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.ps-auth__status { color: var(--positive); background: rgba(70,185,126,0.14); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.ps-auth__switch { font-size: var(--text-sm); color: var(--text-muted); text-align: center; }
.ps-auth__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ps-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; }
.ps-check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* ── Tom Select dark theming (auth / dark surfaces) ───── */
.ps-tomselect .ts-control { background: rgba(247, 243, 233, 0.06); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); min-height: 42px; padding: 0 var(--space-3); box-shadow: none; }
.ps-tomselect .ts-control:hover { border-color: var(--border-strong); }
.ps-tomselect.focus .ts-control { border-color: var(--border-accent); box-shadow: none; background: rgba(247, 243, 233, 0.09); }
.ps-tomselect .ts-control input, .ps-tomselect .ts-control .item { color: var(--text-primary); }
.ps-tomselect .ts-dropdown { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); box-shadow: var(--shadow-pop); }
.ps-tomselect .ts-dropdown .option { color: var(--text-secondary); }
.ps-tomselect .ts-dropdown .active { background: var(--surface-hover); color: var(--text-primary); }
.ps-tomselect .ts-dropdown .option:hover { background: var(--surface-hover); color: var(--text-primary); }

/* ── flatpickr accent (works with dark theme CDN) ─────── */
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .ps-header { padding: var(--space-3) var(--space-4); }
  .ps-footer { padding: var(--space-5) var(--space-4); }
  .ps-landing__strip { grid-template-columns: 1fr; padding: var(--space-6) var(--space-5); }
  .ps-section { padding: var(--space-5); }
  .ps-auth__row { grid-template-columns: 1fr; }
  .ps-header__nav .ps-header__link--hide-sm { display: none; }
}

[x-cloak] { display: none !important; }

/* ============================================================================
   Authenticated dashboard navigation (.ps-appnav)
   Dark top navigation shared by Student, Admin and Accounting dashboards.
   ========================================================================== */
.ps-appnav { position: sticky; top: 0; z-index: 40; background: rgba(7, 7, 11, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
.ps-appnav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: 1200px; margin: 0 auto; padding: var(--space-3) var(--space-6); }
.ps-appnav__left { display: flex; align-items: center; gap: var(--space-6); min-width: 0; }
.ps-appnav__links { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ps-appnav__link { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; padding: 8px 12px; border-radius: var(--radius-sm); white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.ps-appnav__link:hover { color: var(--text-primary); background: rgba(247, 243, 233, 0.06); }
.ps-appnav__link.is-active { color: var(--text-accent); background: var(--accent-soft); }
.ps-appnav__right { display: flex; align-items: center; gap: var(--space-2); }

.ps-appnav__user { position: relative; }
.ps-appnav__trigger { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 5px 12px 5px 5px; color: var(--text-secondary); cursor: pointer; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ps-appnav__trigger:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ps-appnav__avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--accent); color: var(--text-on-accent); font-weight: 700; font-size: 12px; text-transform: uppercase; }
.ps-appnav__menu { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: var(--space-2); z-index: 50; }
.ps-appnav__menu-head { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-2); }
.ps-appnav__menu-name { color: var(--text-primary); font-weight: 600; font-size: var(--text-sm); }
.ps-appnav__menu-email { color: var(--text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; }
.ps-appnav__menu a, .ps-appnav__menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; color: var(--text-secondary); font-family: var(--font-sans); font-size: var(--text-sm); padding: 8px 12px; border-radius: var(--radius-sm); }
.ps-appnav__menu a:hover, .ps-appnav__menu button:hover { background: var(--surface-hover); color: var(--text-primary); }
.ps-appnav__burger { display: none; background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); width: 40px; height: 38px; cursor: pointer; align-items: center; justify-content: center; }
.ps-appnav__burger svg { width: 22px; height: 22px; }
.ps-appnav__mobile { display: none; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-6) var(--space-4); border-top: 1px solid var(--border-subtle); }
.ps-appnav__mobile .ps-appnav__link { padding: 10px 12px; }

.ps-app__header { border-bottom: 1px solid var(--border-subtle); background: rgba(12, 12, 19, 0.4); }
.ps-app__header-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--space-6); }

@media (max-width: 900px) {
  .ps-appnav__bar { padding: var(--space-3) var(--space-4); }
  .ps-appnav__left .ps-appnav__links { display: none; }
  .ps-appnav__burger { display: inline-flex; }
  .ps-appnav__mobile.is-open { display: flex; }
  .ps-app__header-inner { padding: var(--space-4); }
}

/* ============================================================================
   Authenticated dashboard theme bridge (.ps-app)
   Remaps the Tailwind utility classes used throughout the existing dashboard
   Blade views onto the Prophetic dark palette, so every authenticated page
   adopts the design language without a per-page rewrite. Scoping each rule
   under `.ps-app` raises specificity above Tailwind's single-class utilities,
   so these win regardless of stylesheet load order.
   ========================================================================== */
.ps-app { background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); min-height: 100vh; }

/* surfaces */
.ps-app .bg-gray-100 { background-color: var(--surface-app) !important; }
.ps-app .bg-gray-50 { background-color: var(--surface-raised) !important; }
.ps-app .bg-white { background-color: var(--surface-card) !important; }
.ps-app .bg-gray-800, .ps-app .bg-gray-900 { background-color: var(--surface-card) !important; }

/* text */
.ps-app .text-gray-900, .ps-app .text-gray-800 { color: var(--text-primary) !important; }
.ps-app .text-gray-700, .ps-app .text-gray-600 { color: var(--text-secondary) !important; }
.ps-app .text-gray-500, .ps-app .text-gray-400 { color: var(--text-muted) !important; }

/* borders + dividers */
.ps-app .border, .ps-app .border-b, .ps-app .border-t, .ps-app .border-l, .ps-app .border-r,
.ps-app .border-gray-100, .ps-app .border-gray-200, .ps-app .border-gray-300 { border-color: var(--border-subtle) !important; }
.ps-app .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.ps-app .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-subtle) !important; }

/* card separation */
.ps-app .shadow, .ps-app .shadow-sm, .ps-app .shadow-md, .ps-app .shadow-lg { box-shadow: var(--shadow-card) !important; }

/* primary accent (indigo -> candlelight gold) */
.ps-app .bg-indigo-600, .ps-app .bg-indigo-500 { background-color: var(--accent) !important; color: var(--text-on-accent) !important; }
.ps-app .hover\:bg-indigo-700:hover, .ps-app .hover\:bg-indigo-600:hover { background-color: var(--accent-hover) !important; color: var(--text-on-accent) !important; }
.ps-app .text-indigo-600, .ps-app .text-indigo-500, .ps-app .text-indigo-700 { color: var(--text-accent) !important; }
.ps-app .hover\:text-indigo-800:hover, .ps-app .hover\:text-indigo-700:hover, .ps-app .hover\:text-indigo-900:hover { color: var(--accent-hover) !important; }
.ps-app .border-indigo-500, .ps-app .focus\:border-indigo-500:focus { border-color: var(--border-accent) !important; }
.ps-app .ring-indigo-500, .ps-app .focus\:ring-indigo-500:focus { --tw-ring-color: var(--border-accent) !important; box-shadow: 0 0 0 1px var(--border-accent) !important; }

/* hover rows / soft accents */
.ps-app .hover\:bg-gray-50:hover, .ps-app .hover\:bg-gray-100:hover { background-color: var(--surface-hover) !important; }
.ps-app .hover\:bg-indigo-50:hover { background-color: var(--accent-soft) !important; }

/* form controls */
.ps-app input[type="text"], .ps-app input[type="email"], .ps-app input[type="password"],
.ps-app input[type="url"], .ps-app input[type="number"], .ps-app input[type="search"],
.ps-app input[type="date"], .ps-app input[type="tel"], .ps-app select, .ps-app textarea {
  background-color: rgba(247, 243, 233, 0.06) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
.ps-app input::placeholder, .ps-app textarea::placeholder { color: var(--text-muted) !important; }
.ps-app input:focus, .ps-app select:focus, .ps-app textarea:focus { border-color: var(--border-accent) !important; }
.ps-app input[type="checkbox"], .ps-app input[type="radio"] { accent-color: var(--accent); }

/* ============================================================================
   Lesson listing — view toggle + cinematic poster grid
   Ported from the amp2go / Prophetic Shorts catalog design (ps-poster/rail).
   ========================================================================== */
.ps-viewtoggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: rgba(247, 243, 233, 0.06); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); }
.ps-viewtoggle__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; padding: 7px 14px; border-radius: var(--radius-full); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.ps-viewtoggle__btn:hover { color: var(--text-secondary); }
.ps-viewtoggle__btn.is-active { background: var(--accent); color: var(--text-on-accent); }
.ps-viewtoggle__btn svg { width: 16px; height: 16px; }

.ps-lessongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); }

.ps-poster { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--surface-card); box-shadow: var(--shadow-card); border: 1px solid var(--border-subtle); text-decoration: none; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.ps-poster:hover { transform: translateY(-4px) scale(1.025); box-shadow: var(--shadow-pop); border-color: var(--border-strong); z-index: 2; }
.ps-poster:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ps-poster__art { position: absolute; inset: 0; }
.ps-poster__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-poster__art--g0 { background: radial-gradient(120% 90% at 80% 0%, #4d3f96 0%, #171722 60%, #07070b 100%); }
.ps-poster__art--g1 { background: radial-gradient(130% 100% at 20% 10%, #8f6722 0%, #1d1610 55%, #07070b 100%); }
.ps-poster__art--g2 { background: radial-gradient(120% 110% at 50% 100%, #1f4d44 0%, #11151a 60%, #07070b 100%); }
.ps-poster__art--g3 { background: radial-gradient(140% 90% at 90% 90%, #6e2734 0%, #190f16 55%, #07070b 100%); }
.ps-poster__art--g4 { background: radial-gradient(120% 100% at 10% 90%, #2c4a78 0%, #10131c 60%, #07070b 100%); }
.ps-poster__art--g5 { background: radial-gradient(130% 110% at 50% 0%, #5a5430 0%, #15140e 55%, #07070b 100%); }
.ps-poster__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,11,0.88) 0%, rgba(7,7,11,0.1) 55%, rgba(7,7,11,0.25) 100%); }
.ps-poster__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-3); }
.ps-poster__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.ps-poster__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.15; font-size: var(--text-md); color: var(--text-primary); text-wrap: balance; }
.ps-poster__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: var(--text-xs); color: var(--text-secondary); }
.ps-poster__meta i { color: var(--text-muted); font-style: normal; }
.ps-poster__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); width: 54px; height: 54px; border-radius: var(--radius-full); background: rgba(7,7,11,0.5); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.ps-poster__play svg { width: 22px; height: 22px; fill: var(--accent); margin-left: 3px; }
.ps-poster:hover .ps-poster__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ps-poster__lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: var(--radius-full); background: rgba(7,7,11,0.55); display: flex; align-items: center; justify-content: center; color: var(--gold-300); }
.ps-poster__lock svg { width: 22px; height: 22px; }

.ps-lessons__empty { grid-column: 1 / -1; padding: var(--space-8); text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }

@media (max-width: 640px) {
  .ps-lessongrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ============================================================================
   Home page redesign (guest landing + authenticated catalog)
   Ported layout from the PCDL reference design, re-skinned onto the Prophetic
   cinematic ink + candlelight-gold palette. Uses Splide.js for the rails.
   ========================================================================== */
.ps-home { display: flex; flex-direction: column; gap: var(--space-8); padding-bottom: var(--space-9); }
.ps-home__wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }

/* ── Subscription alert ───────────────────────────────── */
.ps-subalert { position: relative; z-index: 30; max-width: 1200px; margin: var(--space-5) auto 0; padding: 0 var(--space-6); }
.ps-subalert__inner { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; background: linear-gradient(120deg, rgba(214,163,66,0.16), rgba(122,106,212,0.14)); border: 1px solid var(--border-accent); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card); }
.ps-subalert__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--text-accent); flex-shrink: 0; }
.ps-subalert__icon svg { width: 24px; height: 24px; }
.ps-subalert__body { flex: 1; min-width: 220px; }
.ps-subalert__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-md); color: var(--text-primary); }
.ps-subalert__text { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.ps-subalert__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ── Hero banner slider ───────────────────────────────── */
.ps-hero { position: relative; }
.ps-hero__slide { position: relative; display: block; height: clamp(340px, 56vw, 620px); overflow: hidden; border-radius: 0; }
.ps-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,11,0.92) 0%, rgba(7,7,11,0.75) 35%, rgba(7,7,11,0.15) 75%, rgba(7,7,11,0.05) 100%); }
.ps-hero__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); max-width: 1200px; margin: 0 auto; padding: 0 var(--space-7); }
.ps-hero__inner { max-width: 560px; display: flex; flex-direction: column; gap: var(--space-3); }
.ps-hero__title { /*font-family: var(--font-display);*/ text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: clamp(30px, 5vw, var(--display-md)); line-height: var(--leading-tight); color: var(--text-primary); }
.ps-hero__desc { font-size: var(--text-base); color: var(--text-secondary); max-width: 480px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ps-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }

/* ── Rails (horizontal poster carousels) ──────────────── */
.ps-rail { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.ps-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.ps-rail__title { /*font-family: var(--font-display);*/ text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-lg); color: var(--text-primary); }
.ps-rail__link { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-accent); white-space: nowrap; }
.ps-rail__link:hover { color: var(--accent-hover); }

/* Catalog tile — square cover with title overlay */
.ps-tile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); text-decoration: none; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.ps-tile:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-pop); border-color: var(--border-strong); z-index: 2; }
.ps-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ps-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,11,0.9) 0%, rgba(7,7,11,0.05) 55%); opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.ps-tile:hover .ps-tile__scrim { opacity: 1; }
.ps-tile__body { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; transform: translateY(6px); opacity: 0; transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out); }
.ps-tile:hover .ps-tile__body { transform: translateY(0); opacity: 1; }
.ps-tile__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps-tile__flag { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 2; }
.ps-tile__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8); width: 48px; height: 48px; border-radius: var(--radius-full); background: rgba(7,7,11,0.55); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.ps-tile__play svg { width: 20px; height: 20px; fill: var(--accent); margin-left: 2px; }
.ps-tile:hover .ps-tile__play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.ps-tile__lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(7,7,11,0.6); display: flex; align-items: center; justify-content: center; color: var(--gold-300); }
.ps-tile__lock svg { width: 20px; height: 20px; }

/* ── Splide theming to match the dark palette ─────────── */
.ps-home .splide__arrow { background: rgba(7,7,11,0.72); border: 1px solid var(--border-strong); opacity: 1; height: 40px; width: 40px; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.ps-home .splide__arrow:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.ps-home .splide__arrow svg { fill: var(--text-primary); height: 16px; width: 16px; }
.ps-home .splide__arrow:hover:not(:disabled) svg { fill: var(--text-on-accent); }
.ps-home .splide__arrow:disabled { opacity: 0.35; }
.ps-home .splide__pagination__page { background: var(--border-strong); }
.ps-home .splide__pagination__page.is-active { background: var(--accent); transform: scale(1.1); }
.ps-home .ps-hero .splide__pagination { bottom: var(--space-4); }

/* ── Marketing feature bands (guest) ──────────────────── */
.ps-band { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.ps-band__grid { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: var(--space-7); }
.ps-band__media img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); display: block; }
.ps-band__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-2xl); color: var(--text-primary); line-height: var(--leading-tight); }
.ps-band__text { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-base); }
.ps-band__actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ps-band__accent { color: var(--text-accent); }

/* ── CTA panel ────────────────────────────────────────── */
.ps-ctapanel { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }
.ps-ctapanel__inner { text-align: center; border: 1px solid var(--border-subtle); background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); }
.ps-ctapanel__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-xl); color: var(--text-primary); }
.ps-ctapanel__text { margin-top: var(--space-2); color: var(--text-secondary); }
.ps-ctapanel__actions { margin-top: var(--space-5); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ── FAQ accordion ────────────────────────────────────── */
.ps-faq { max-width: 820px; margin: 0 auto; padding: 0 var(--space-6); }
.ps-faq__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-2xl); color: var(--text-primary); margin-bottom: var(--space-5); }
.ps-faq__item { border-top: 1px solid var(--border-subtle); }
.ps-faq__q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4); background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); padding: var(--space-4) 0; }
.ps-faq__q svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-accent); transition: transform var(--dur-fast) var(--ease-out); }
.ps-faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.ps-faq__a { color: var(--text-secondary); font-size: var(--text-sm); padding: 0 0 var(--space-4); max-width: 680px; }
.ps-faq__links { display: flex; gap: var(--space-5); flex-wrap: wrap; border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); margin-top: var(--space-2); }
.ps-faq__links a { color: var(--text-accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); }

@media (max-width: 900px) {
  .ps-home__wrap, .ps-rail, .ps-band, .ps-ctapanel, .ps-faq, .ps-subalert { padding-inline: var(--space-4); }
  .ps-hero__content { padding-inline: var(--space-5); }
  .ps-band__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .ps-band__media { order: -1; }
  .ps-subalert__actions { width: 100%; }
  .ps-subalert__actions .ps-btn { flex: 1; }
}

.country-select-wrapper .ts-control, .country-select-wrapper .ts-wrapper.single.input-active .ts-control{
  background: unset;
}
.country-select-wrapper .full .ts-control{
  background-color: unset;
}
.country-select-wrapper .ts-control{
  align-content: center;
  justify-content: center;
}
.country-select-wrapper .ts-control, .country-select-wrapper .ps-select{
  padding-left: 0;
}
.c1-select-wrapper select option{
  background-color: var(--surface-card);
}