/* ── pt-custom.css — missing component styles ─────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   GAME SHELL — dark gaming navbar replaces the regular header during game play
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-game-shell {
  background: #0d0d1a;
  min-height: 100vh;
}

.pt-game-shell #app-content {
  background: #0d0d1a;
  color: #f1f5f9;
}

.pt-game-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 60px;
  background: rgba(13, 13, 26, 0.96);
  border-bottom: 1px solid rgba(139, 92, 246, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.pt-game-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
  max-width: 900px;
  margin: 0 auto;
}

.pt-game-header__back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.28);
  color: #c4b5fd;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.pt-game-header__back:hover {
  background: rgba(139, 92, 246, 0.22);
  color: #ede9fe;
}

.pt-game-header__back i {
  font-size: 0.8rem;
}

.pt-game-header__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.01em;
}

.pt-game-header__icon {
  color: #a78bfa;
  font-size: 1.1rem;
}

.pt-game-header__user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pt-game-header__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pt-game-header__username {
  font-size: 0.82rem;
  color: #94a3b8;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-game-header__stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.pt-game-header__stat:hover { background: rgba(139,92,246,.2); color: #f1f5f9; }

.pt-game-header__avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pt-game-header__avatar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(139,92,246,.5);
}

@media (max-width: 480px) {
  .pt-game-header__username { display: none; }
  .pt-game-header__stat { display: none; }
  .pt-game-header__back span { display: none; }
  .pt-game-header__back { padding: 7px 10px; }
}

/* style.css sets html{background:var(--bg-dark-1)=#111} — override to light */
html, body {
  background: #f8f9fa !important;
  min-height: 100vh;
}

/* style.css sets h1{letter-spacing:-3px} for 64px display headings — reset for app */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: normal !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN ELEVATION — richer shadows, depth, and visual polish
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Card depth ───────────────────────────────────────────────────────────── */
.pt-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  border: 1px solid rgba(226, 232, 240, 0.7);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.pt-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);
  transform: translateY(-1px);
}
.pt-card--skeleton {
  pointer-events: none;
}
.pt-card--skeleton:hover {
  transform: none;
  box-shadow: none;
}

/* ── Page title ───────────────────────────────────────────────────────────── */
.pt-page-title {
  letter-spacing: -0.4px;
  color: #0f172a;
  font-weight: 800;
}

/* ── Page head — subtle left accent bar ──────────────────────────────────── */
.pt-page-head {
  padding-left: 14px;
  border-left: 4px solid var(--primary-color);
  margin-bottom: 20px;
}
.pt-page-head--compact {
  border-left: none;
  padding-left: 0;
}

/* ── Section titles ───────────────────────────────────────────────────────── */
.pt-section-title,
.pt-section-head h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PSYCHOLOGIST CARDS — more visual weight
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-psychologist-list-card {
  border-radius: 18px !important;
  overflow: hidden;
  padding: 0 !important;
}

.pt-psychologist-list-card .pt-psychologist {
  padding: 20px 20px 12px;
  align-items: flex-start;
  gap: 14px;
}

.pt-psychologist-list-card__actions {
  padding: 0 20px 18px;
}

.pt-psychologist__avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 3px solid rgba(var(--primary-color-rgb), 0.2);
  box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.07);
  flex-shrink: 0;
}

.pt-psychologist__name {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.pt-psychologist__role {
  font-size: 0.8rem;
  color: var(--primary-color);
  font-weight: 500;
  margin-top: 2px;
}

.pt-psychologist__meta {
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.5);
  margin-top: 4px;
}

/* ── Psychologist grid ────────────────────────────────────────────────────── */
.pt-psych-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   STEPPER — modern pill style
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-stepper {
  display: flex;
  gap: 0;
  align-items: center;
  margin-bottom: 28px;
  background: #f1f5f9;
  border-radius: 99px;
  padding: 4px;
}

.pt-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 99px;
  transition: background 0.22s, box-shadow 0.22s;
  cursor: default;
}

.pt-step.is-active {
  background: var(--primary-color);
  box-shadow: 0 3px 12px rgba(var(--primary-color-rgb), 0.35);
}

.pt-step.is-done {
  background: rgba(var(--primary-color-rgb), 0.12);
}

.pt-step__index {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  color: rgba(15, 23, 42, 0.5);
  flex-shrink: 0;
}

.pt-step.is-active .pt-step__index {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

.pt-step.is-done .pt-step__index {
  background: var(--primary-color);
  color: #fff;
}

.pt-step__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.45);
  white-space: nowrap;
}

.pt-step.is-active .pt-step__label {
  color: #fff;
}

.pt-step.is-done .pt-step__label {
  color: var(--primary-color);
}

/* ══════════════════════════════════════════════════════════════════════════════
   CALENDAR — richer cells
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-calendar {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.pt-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #0f172a;
}

.pt-calendar__nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(15,23,42,0.12);
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s;
  color: #0f172a;
}

.pt-calendar__nav:hover {
  background: rgba(var(--primary-color-rgb), 0.08);
  border-color: var(--primary-color);
}

.pt-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.pt-calendar__weekday {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 0;
}

.pt-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.pt-calendar__cell {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.pt-calendar__cell:hover:not(:disabled) {
  background: rgba(var(--primary-color-rgb), 0.1);
  color: var(--primary-color);
}

.pt-calendar__cell--past {
  color: rgba(15, 23, 42, 0.25);
  cursor: not-allowed;
}

.pt-calendar__cell--selected {
  background: var(--primary-color) !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(var(--primary-color-rgb), 0.4);
}

.pt-calendar__cell--empty {
  pointer-events: none;
}

/* ── Slot layout ──────────────────────────────────────────────────────────── */
.pt-slot-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.pt-slot-panel {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  padding: 16px;
}

.pt-slot-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.pt-slot-panel__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.pt-slot-panel__date {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

.pt-slot-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  .pt-slot-layout {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CONFIRM CARD — elevated appointment summary
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-confirm-card {
  border-radius: 18px !important;
  background: linear-gradient(135deg, #f8fbfd 0%, #fff 100%) !important;
  border: 1.5px solid rgba(var(--primary-color-rgb), 0.15) !important;
}

.pt-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.92rem;
  gap: 12px;
}

.pt-confirm-row:last-child { border-bottom: none; }

.pt-confirm-row span {
  color: rgba(15, 23, 42, 0.5);
}

.pt-confirm-row strong {
  color: #0f172a;
  font-weight: 600;
  text-align: right;
}

.pt-confirm-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.pt-confirm-note {
  font-size: 0.82rem;
  color: rgba(15, 23, 42, 0.45);
  margin-top: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APPOINTMENT DETAIL — summary & psychologist cards
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-summary-card {
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.07) 0%, #fff 100%) !important;
  border-left: 4px solid var(--primary-color) !important;
  padding-bottom: 14px !important;
}

.pt-summary-status {
  margin-bottom: 6px;
}

.pt-summary-time {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.pt-psychologist-card {
  border-radius: 18px !important;
}

.pt-psychologist-card .pt-psychologist {
  align-items: center;
  gap: 14px;
}

.pt-appointment-info {
  border-radius: 18px !important;
}

/* ── Timeline in detail ───────────────────────────────────────────────────── */
.pt-timeline__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 16px;
}

.pt-timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: rgba(var(--primary-color-rgb), 0.15);
}

.pt-timeline__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.12);
}

.pt-timeline__content {
  flex: 1;
}

.pt-timeline__status {
  font-weight: 600;
  font-size: 0.9rem;
  color: #0f172a;
}

.pt-timeline__date {
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.45);
  margin-top: 2px;
}

.pt-timeline__note {
  font-size: 0.82rem;
  color: rgba(15, 23, 42, 0.6);
  margin-top: 4px;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOME PAGE CARDS — richer visual
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-home-card__actions .btn-main {
  position: relative;
  overflow: hidden;
}

/* Hero banner extra polish */
.pt-hero-banner,
.pt-home-hero {
  border-radius: 20px;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APPOINTMENT HUB CARD — the main list card
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-appointment-hub-card {
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden;
}

.pt-appointment-hub-card__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 20px 20px 14px !important;
  gap: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.pt-appointment-hub-card__title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 4px 0 4px !important;
  letter-spacing: -0.2px;
}

.pt-appointment-hub-card__subtitle {
  font-size: 0.82rem !important;
  color: rgba(15, 23, 42, 0.45) !important;
  margin: 0 !important;
}

.pt-appointment-hub-card__meta-grid {
  display: flex !important;
  gap: 0 !important;
  padding: 0 20px !important;
  flex-wrap: wrap !important;
}

.pt-appointment-hub-card__meta-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 14px 20px 14px 0 !important;
  border: none !important;
  border-right: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-right: 20px;
  min-width: 70px;
  transform: none !important;
}

.pt-appointment-hub-card__meta-item:hover {
  transform: none !important;
  box-shadow: none !important;
}

.pt-appointment-hub-card__meta-item:last-child {
  border-right: none !important;
}

.pt-appointment-hub-card__meta-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: rgba(15, 23, 42, 0.35) !important;
}

.pt-appointment-hub-card__meta-item strong {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.pt-appointment-hub-card__actions {
  padding: 14px 20px 18px !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Status-based left accent */
.pt-appointment-hub-card.is-live {
  border-left: 4px solid #ef4444 !important;
}
.pt-appointment-hub-card.is-soon {
  border-left: 4px solid #f59e0b !important;
}
.pt-appointment-hub-card.is-past {
  border-left: 4px solid #9ca3af !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APPOINTMENTS PAGE — next appointment hero card
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-hero-appt-card,
.pt-next-appointment {
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.06) 0%, #fff 60%) !important;
  border-left: 4px solid var(--primary-color) !important;
}

/* ── Fix h1 letter-spacing (theme sets -3px which merges words at 24px) ────── */

/* ── Article meta row ────────────────────────────────────────────────────── */
.pt-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.pt-article-date,
.pt-article-author {
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.55);
}

.pt-article-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.3px;
}

/* ── Page layout helpers ──────────────────────────────────────────────────── */
.pt-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.pt-home-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.pt-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.pt-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

.pt-form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  font-size: 0.95rem;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color 0.18s;
  box-sizing: border-box;
}

.pt-form-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.12);
}

textarea.pt-form-input {
  resize: vertical;
  min-height: 80px;
}

select.pt-form-input {
  appearance: auto;
}

/* ── Settings nav ─────────────────────────────────────────────────────────── */
.pt-settings-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Toggle switch ────────────────────────────────────────────────────────── */
.pt-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.pt-toggle-row:last-child { border-bottom: none; }

.pt-toggle-label {
  font-size: 0.95rem;
  color: #0f172a;
  font-weight: 500;
}

.pt-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.pt-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.pt-toggle__track {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 99px;
  transition: background 0.2s;
}

.pt-toggle__track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.pt-toggle input:checked + .pt-toggle__track {
  background: var(--primary-color);
}

.pt-toggle input:checked + .pt-toggle__track::after {
  transform: translateX(20px);
}

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.pt-stat-card {
  background: #f8fbfc;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

.pt-stat-card__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.1;
}

.pt-stat-card__label {
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ── Mood picker (check-in) ───────────────────────────────────────────────── */
.pt-mood-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pt-mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 2px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: #f8fbfc;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  min-width: 64px;
}

.pt-mood-btn:hover {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.07);
}

.pt-mood-btn.is-selected {
  border-color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.12);
}

.pt-mood-btn__emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.pt-mood-btn__label {
  font-size: 0.72rem;
  color: rgba(15, 23, 42, 0.6);
  text-align: center;
}

/* ── Mood chart ───────────────────────────────────────────────────────────── */
.pt-mood-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  padding: 8px 0 0;
}

.pt-mood-chart__bar {
  flex: 1;
  background: rgba(var(--primary-color-rgb), 0.35);
  border-radius: 6px 6px 0 0;
  min-height: 8px;
  transition: background 0.2s;
}

/* ── Progress timeline ────────────────────────────────────────────────────── */
.pt-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

.pt-timeline-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pt-timeline-item__date {
  min-width: 80px;
  font-size: 0.8rem;
  color: rgba(15, 23, 42, 0.5);
  padding-top: 14px;
  flex-shrink: 0;
}

.pt-timeline-item__card {
  flex: 1;
  padding: 14px 16px;
}

.pt-timeline-item__mood {
  font-size: 1.05rem;
  font-weight: 600;
}

/* ── Explore page ─────────────────────────────────────────────────────────── */
.pt-explore {
  padding-bottom: 32px;
}

.pt-explore-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pt-explore-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}

.pt-explore-hscroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.pt-explore-hscroll::-webkit-scrollbar { display: none; }

.pt-explore-hcard {
  min-width: 180px;
  max-width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s;
}

.pt-explore-hcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.pt-explore-hcard__image {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  aspect-ratio: 16/9;
  background: #eef2f7;
}

.pt-explore-hcard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-explore-hcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pt-explore-hcard__desc {
  font-size: 0.82rem;
  color: rgba(15, 23, 42, 0.6);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-explore-news-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s;
}

.pt-explore-news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.pt-explore-news-card__image {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  aspect-ratio: 16/9;
  background: #eef2f7;
}

.pt-explore-news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-explore-news-card__body { flex: 1; }

.pt-explore-news-card__date {
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.45);
  margin-top: 4px;
}

.pt-explore-blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  margin-bottom: 4px;
  transition: box-shadow 0.18s;
}

.pt-explore-blog-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}

.pt-explore-blog-card__body { flex: 1; }

.pt-explore-blog-card__summary {
  font-size: 0.87rem;
  color: rgba(15, 23, 42, 0.65);
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-explore-blog-card__meta {
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  color: rgba(15, 23, 42, 0.45);
  margin-top: 6px;
}

/* ── Achievement grid ─────────────────────────────────────────────────────── */
.pt-achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.pt-achievement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 14px;
  gap: 8px;
  transition: transform 0.18s;
}

.pt-achievement-card--earned {
  border-left: 3px solid var(--primary-color);
}

.pt-achievement-card--locked {
  opacity: 0.5;
  filter: grayscale(0.6);
}

.pt-achievement-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.pt-achievement-card__badge {
  font-size: 2.2rem;
  line-height: 1;
}

.pt-achievement-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.pt-achievement-card__desc {
  font-size: 0.8rem;
  color: rgba(15, 23, 42, 0.6);
  margin: 0;
}

.pt-achievement-card__date {
  font-size: 0.75rem;
  color: rgba(15, 23, 42, 0.4);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APPOINTMENT HERO CARD — "next appointment" large card at top of list
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-appointment-hero-card {
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.07) 0%, #fff 70%) !important;
  border-left: 5px solid var(--primary-color) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.pt-appointment-hero-card__main {
  padding: 22px 24px 16px !important;
}

.pt-appointment-hero-card__title {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.4px !important;
  margin: 4px 0 6px !important;
}

.pt-appointment-hero-card__text {
  font-size: 0.88rem !important;
  color: rgba(15, 23, 42, 0.55) !important;
  margin: 0 0 14px !important;
  max-width: 460px;
  line-height: 1.55;
}

/* Fix meta row — override theme's single-column grid */
.pt-appointment-hero-card__meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  grid-template-columns: unset !important;
  border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
  padding: 0 !important;
}

.pt-appointment-hero-card__meta-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 14px 24px 14px 0 !important;
  border: none !important;
  border-right: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 80px !important;
  margin-right: 24px !important;
  transform: none !important;
}

.pt-appointment-hero-card__meta-item:last-child {
  border-right: none !important;
}

.pt-appointment-hero-card__meta-item:hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.pt-appointment-hero-card__meta-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: rgba(15, 23, 42, 0.38) !important;
}

.pt-appointment-hero-card__meta-item strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.pt-appointment-hero-card__aside {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 24px 20px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  background: rgba(15, 23, 42, 0.015) !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.pt-appointment-hero-card__actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Empty hero card */
.pt-appointment-hero-card--empty {
  border-left: 3px solid rgba(15, 23, 42, 0.15) !important;
  background: #f8fafc !important;
  padding: 24px !important;
}

/* Status accents on hero card */
.pt-appointment-hero-card.is-live {
  border-left-color: #ef4444 !important;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, #fff 70%) !important;
}
.pt-appointment-hero-card.is-soon {
  border-left-color: #f59e0b !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, #fff 70%) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APPOINTMENT TABS — pill switcher
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-tab-list {
  display: flex !important;
  gap: 4px !important;
  background: #f1f5f9 !important;
  border-radius: 99px !important;
  padding: 4px !important;
  margin-bottom: 20px !important;
  width: fit-content !important;
  border: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.pt-tab {
  padding: 8px 20px !important;
  border-radius: 99px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: rgba(15, 23, 42, 0.5) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
  white-space: nowrap !important;
}

.pt-tab.is-active {
  background: #fff !important;
  color: var(--primary-color) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.pt-tab:hover:not(.is-active) {
  color: #0f172a !important;
  background: rgba(255,255,255,0.6) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NEWS / BLOG CARDS — grid layout + visual polish
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-news-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

@media (min-width: 640px) {
  .pt-news-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.pt-news-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.pt-news-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #eef2f7;
}

.pt-news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.pt-news-card:hover .pt-news-card__image img {
  transform: scale(1.04);
}

.pt-news-card__body {
  padding: 18px 20px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.pt-news-card__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-news-card__summary {
  font-size: 0.87rem !important;
  color: rgba(15, 23, 42, 0.6) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pt-news-card__meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 4px !important;
  font-size: 0.82rem !important;
  color: rgba(15, 23, 42, 0.45) !important;
}

/* Category eyebrow chip coloring */
.pt-card__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACTION BAR — detail page action buttons
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-action-bar,
.pt-action-area {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

.pt-action-bar__group {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.pt-action-bar__note {
  font-size: 0.84rem;
  color: rgba(15, 23, 42, 0.5);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DETAIL ROWS — info table rows in detail pages
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-detail-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  gap: 16px !important;
}

.pt-detail-item:last-child {
  border-bottom: none !important;
}

.pt-detail-label {
  font-size: 0.85rem !important;
  color: rgba(15, 23, 42, 0.5) !important;
  flex-shrink: 0 !important;
}

.pt-detail-value {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  text-align: right !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOME PAGE — hero check-in banner
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-home-hero,
.pt-hero-banner {
  border-radius: 24px !important;
  padding: 28px 24px !important;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.08) 0%, #f8fffe 100%) !important;
  border: 1.5px solid rgba(var(--primary-color-rgb), 0.15) !important;
}

/* Page subtitle */
.pt-page-subtitle {
  font-size: 0.9rem;
  color: rgba(15, 23, 42, 0.5);
  margin: 4px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROGRESS PAGE — stat ring accent
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-stat-card {
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, #fff 100%) !important;
  border-top: 3px solid var(--primary-color) !important;
  padding: 20px !important;
}

.pt-stat-card__value {
  font-size: 2.4rem !important;
  letter-spacing: -1px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   STATUS CHIPS — polished badges
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.pt-status-chip--live {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.pt-status-chip--soon {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.pt-status-chip--confirmed {
  background: rgba(var(--primary-color-rgb), 0.1);
  color: var(--primary-color);
}

.pt-status-chip--completed {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

.pt-status-chip--cancelled {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

/* ══════════════════════════════════════════════════════════════════════════════
   INVOICE / PAYMENTS CARDS
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-invoice-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pt-invoice-card {
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden;
}

.pt-invoice-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 20px 20px 12px !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.pt-invoice-card__amount {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 4px !important;
  line-height: 1.1 !important;
}

.pt-invoice-card__desc {
  font-size: 0.85rem !important;
  color: rgba(15, 23, 42, 0.5) !important;
  margin: 0 !important;
}

.pt-invoice-card__meta {
  display: flex !important;
  gap: 10px !important;
  margin-top: 6px !important;
  font-size: 0.8rem !important;
  color: rgba(15, 23, 42, 0.4) !important;
  align-items: center !important;
}

.pt-invoice-card__meta i {
  margin-right: 4px !important;
}

.pt-invoice-card__actions {
  padding: 12px 20px 16px !important;
  display: flex !important;
  gap: 10px !important;
}

/* Badge color overrides for payment status */
.pt-badge--completed {
  background: rgba(var(--primary-color-rgb), 0.1) !important;
  color: var(--primary-color) !important;
  border-color: rgba(var(--primary-color-rgb), 0.2) !important;
}

.pt-badge--inprogress {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

.pt-badge--cancelled {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BLOG LIST — similar to news grid
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-blog-list,
.pt-blog-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

@media (min-width: 640px) {
  .pt-blog-list,
  .pt-blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.pt-blog-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.pt-blog-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #eef2f7;
}

.pt-blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.pt-blog-card:hover .pt-blog-card__image img {
  transform: scale(1.04);
}

.pt-blog-card__body {
  padding: 18px 20px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.pt-blog-card__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
}

.pt-blog-card__summary {
  font-size: 0.87rem !important;
  color: rgba(15, 23, 42, 0.6) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   QUESTIONNAIRE CARDS — list items
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-questionnaire-card {
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.pt-questionnaire-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 20px 20px 14px !important;
}

.pt-questionnaire-card__meta {
  display: flex !important;
  gap: 12px !important;
  font-size: 0.8rem !important;
  color: rgba(15, 23, 42, 0.45) !important;
  margin-top: 6px !important;
}

.pt-questionnaire-card__meta i {
  margin-right: 4px !important;
}

.pt-questionnaire-card__body {
  padding: 20px 20px 14px !important;
}

.pt-questionnaire-card__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}

.pt-questionnaire-card__progress {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.pt-questionnaire-card__progress-bar {
  flex: 1 !important;
  height: 6px !important;
  background: #e2e8f0 !important;
  border-radius: 99px !important;
  overflow: hidden !important;
}

.pt-questionnaire-card__progress-fill {
  height: 100% !important;
  background: var(--primary-color) !important;
  border-radius: 99px !important;
  transition: width 0.4s ease !important;
}

.pt-questionnaire-card__actions {
  padding: 12px 20px 16px !important;
  display: flex !important;
  gap: 10px !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  justify-content: flex-start !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TRAINING / COURSE CARDS
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-training-card,
.pt-course-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.pt-training-card__image,
.pt-course-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15), #e2e8f0);
}

.pt-training-card__image img,
.pt-course-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-training-card__body,
.pt-course-card__body {
  padding: 18px 20px 20px !important;
}

.pt-training-card__title,
.pt-course-card__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOAST — notification bar
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-toast {
  position: fixed !important;
  bottom: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  background: #0f172a !important;
  color: #fff !important;
  padding: 12px 20px !important;
  border-radius: 99px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
  z-index: 9999 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity 0.2s, transform 0.2s !important;
}

.pt-toast.is-visible {
  transform: translateX(-50%) translateY(0) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTON WIDTH — prevent full-width stretch in flex-column card bodies
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-blog-card__body .btn-main,
.pt-news-card__body .btn-main,
.pt-questionnaire-card__body .btn-main,
.pt-training-card__body .btn-main,
.pt-course-card__body .btn-main {
  align-self: flex-start !important;
  width: auto !important;
}

/* ── Generic grid ─────────────────────────────────────────────────────────── */
.pt-grid {
  display: grid;
  gap: 14px;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.pt-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0f172a;
  color: #fff;
  padding: 10px 22px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.pt-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Status chip (appointment) ────────────────────────────────────────────── */
.pt-status-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pt-status-chip--upcoming,
.pt-status-chip--confirmed {
  background: rgba(var(--primary-color-rgb), 0.12);
  color: var(--primary-color);
}

.pt-status-chip--past,
.pt-status-chip--completed {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}

.pt-status-chip--live {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.pt-status-chip--cancelled {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

/* ── Appointment list grid ────────────────────────────────────────────────── */
.pt-appointment-list-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Action bar (appointment detail) ─────────────────────────────────────── */
.pt-action-bar,
.pt-action-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.pt-action-bar__group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pt-action-bar__note {
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.55);
  margin: 0 0 6px;
}

/* ── Detail list (appointment info rows) ─────────────────────────────────── */
.pt-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pt-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  gap: 12px;
}

.pt-detail-item:last-child { border-bottom: none; }

.pt-detail-label {
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.55);
  flex-shrink: 0;
}

.pt-detail-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: #0f172a;
  text-align: right;
}

/* ── OTP step indicator ───────────────────────────────────────────────────── */
.pt-otp-step {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.pt-otp-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--primary-color-rgb), 0.12);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .pt-mood-picker {
    gap: 6px;
  }

  .pt-mood-btn {
    min-width: 52px;
    padding: 8px 10px;
  }

  .pt-explore-hcard {
    min-width: 155px;
  }

  .pt-achievement-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .pt-timeline-item__date {
    min-width: 60px;
    font-size: 0.72rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   HOME V2 — Screen 1 Care Overview
   ══════════════════════════════════════════════════════════════════════════════ */

@keyframes ptSkeleton {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

.pt-home-v2 {
  padding-top: 24px !important;
  padding-bottom: 80px !important;
}

/* Greeting */
.pt-home-v2__greeting {
  margin-bottom: 28px !important;
}
.pt-home-v2__greeting-title {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.4px !important;
  margin: 0 0 4px !important;
}
.pt-home-v2__greeting-sub {
  font-size: 0.95rem !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* Layout */
.pt-home-v2__layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
@media (min-width: 1024px) {
  .pt-home-v2__layout {
    grid-template-columns: 1fr 340px !important;
    align-items: start !important;
  }
}

.pt-home-v2__main {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.pt-home-v2__sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* ── Section helpers ─────────────────────────────────────────────────────── */
.pt-home-section-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}
.pt-home-section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
.pt-home-section-link {
  font-size: 0.85rem !important;
  color: var(--primary-color) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.pt-home-section-link:hover { text-decoration: underline !important; }

/* ── NextActionCard ──────────────────────────────────────────────────────── */
.pt-home-next-action {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px !important;
  border: 1px solid rgba(226,232,240,0.7) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
  position: relative !important;
  overflow: hidden !important;
}
.pt-home-next-action::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: var(--primary-color) !important;
  border-radius: 20px 20px 0 0 !important;
}
.pt-home-next-action--payment::before { background: #f59e0b !important; }
.pt-home-next-action--soon::before    { background: #ef4444 !important; }
.pt-home-next-action--rating::before  { background: #8b5cf6 !important; }

/* status chip */
.pt-home-next-action__status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  margin-bottom: 16px !important;
}
.pt-home-next-action__status-chip .fa { font-size: 12px !important; }
.pt-home-next-action__status-chip--confirmed {
  background: rgba(90,158,124,0.12) !important;
  color: var(--primary-color) !important;
}
.pt-home-next-action__status-chip--warning {
  background: rgba(245,158,11,0.12) !important;
  color: #b45309 !important;
}
.pt-home-next-action__status-chip--live {
  background: rgba(239,68,68,0.1) !important;
  color: #dc2626 !important;
}
.pt-home-next-action__status-chip--done {
  background: rgba(90,158,124,0.1) !important;
  color: var(--primary-color) !important;
}

/* empty state */
.pt-home-next-action--empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.pt-home-next-action__icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: rgba(90,158,124,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pt-home-next-action__icon .material-symbols-outlined {
  font-size: 24px !important;
  color: var(--primary-color) !important;
}
.pt-home-next-action__copy { flex: 1 !important; }
.pt-home-next-action__eyebrow {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  margin-bottom: 4px !important;
}
.pt-home-next-action__title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}
.pt-home-next-action__sub {
  font-size: 0.875rem !important;
  color: #64748b !important;
  margin: 0 0 16px !important;
  line-height: 1.5 !important;
}

/* psych row */
.pt-home-next-action__psych-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
.pt-home-next-action__avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(90,158,124,0.25) !important;
  flex-shrink: 0 !important;
}
.pt-home-next-action__avatar--initials {
  background: rgba(90,158,124,0.15) !important;
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pt-home-next-action__psych-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 2px !important;
}
.pt-home-next-action__psych-spec {
  font-size: 0.82rem !important;
  color: #64748b !important;
  margin: 0 !important;
}
.pt-home-next-action__time-col {
  margin-left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  text-align: right !important;
}
.pt-home-next-action__time-main {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  justify-content: flex-end !important;
}
.pt-home-next-action__time-sub {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.8rem !important;
  color: #64748b !important;
  justify-content: flex-end !important;
}

/* countdown */
.pt-home-next-action__countdown {
  margin-left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: rgba(239,68,68,0.08) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
}
.pt-home-next-action__countdown-num {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #dc2626 !important;
  line-height: 1 !important;
}
.pt-home-next-action__countdown-label {
  font-size: 0.72rem !important;
  color: #dc2626 !important;
  font-weight: 600 !important;
}

/* action buttons */
.pt-home-next-action__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.pt-home-next-action__btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--primary-color) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
}
.pt-home-next-action__btn-primary:hover { opacity: 0.88 !important; }
.pt-home-next-action__btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(90,158,124,0.08) !important;
  color: var(--primary-color) !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid rgba(90,158,124,0.2) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.pt-home-next-action__btn-secondary:hover { background: rgba(90,158,124,0.14) !important; }

/* ── CareJourneyProgress ─────────────────────────────────────────────────── */
.pt-home-journey {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 24px !important;
  border: 1px solid rgba(226,232,240,0.7) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05) !important;
}
.pt-home-journey .pt-home-section-title { margin-bottom: 24px !important; }

.pt-home-journey__track { position: relative !important; }

.pt-home-journey__line {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  right: 20px !important;
  height: 3px !important;
  background: #e2e8f0 !important;
  border-radius: 99px !important;
  display: none !important;
}
@media (min-width: 640px) {
  .pt-home-journey__line { display: block !important; }
}
.pt-home-journey__line-fill {
  height: 100% !important;
  background: var(--primary-color) !important;
  border-radius: 99px !important;
  transition: width 0.5s ease !important;
}

.pt-home-journey__steps {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 1 !important;
}
.pt-home-journey__step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  opacity: 0.38 !important;
}
.pt-home-journey__step.is-done,
.pt-home-journey__step.is-active { opacity: 1 !important; }

.pt-home-journey__dot {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pt-home-journey__dot .fa { font-size: 14px !important; color: #94a3b8 !important; }
.pt-home-journey__step.is-done .pt-home-journey__dot {
  background: var(--primary-color) !important;
}
.pt-home-journey__step.is-done .pt-home-journey__dot .fa { color: #fff !important; }
.pt-home-journey__step.is-active .pt-home-journey__dot {
  background: var(--primary-color) !important;
  box-shadow: 0 0 0 6px rgba(90,158,124,0.18) !important;
}
.pt-home-journey__step.is-active .pt-home-journey__dot .fa { color: #fff !important; }

.pt-home-journey__label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.pt-home-journey__step.is-active .pt-home-journey__label { color: var(--primary-color) !important; }
.pt-home-journey__step.is-done  .pt-home-journey__label { color: #0f172a !important; }

/* ── RecommendedPsychologists ────────────────────────────────────────────── */
.pt-home-psych-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
@media (min-width: 640px) {
  .pt-home-psych-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

.pt-home-psych-card {
  background: #fff !important;
  border-radius: 18px !important;
  padding: 20px 16px !important;
  border: 1px solid rgba(226,232,240,0.7) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
.pt-home-psych-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}
.pt-home-psych-card__avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2.5px solid rgba(90,158,124,0.2) !important;
  margin-bottom: 6px !important;
  flex-shrink: 0 !important;
}
.pt-home-psych-card__avatar--initials {
  background: rgba(90,158,124,0.12) !important;
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pt-home-psych-card__name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}
.pt-home-psych-card__spec {
  font-size: 0.8rem !important;
  color: #64748b !important;
  margin: 0 !important;
}
.pt-home-psych-card__rating {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}
.pt-home-psych-card__slot {
  width: 100% !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  margin-top: 6px !important;
}
.pt-home-psych-card__slot-label {
  font-size: 0.68rem !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 2px !important;
}
.pt-home-psych-card__slot-time {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
  margin: 0 !important;
}
.pt-home-psych-card__btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 9px 0 !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-top: 4px !important;
  transition: background 0.2s, color 0.2s !important;
}
.pt-home-psych-card__btn:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* ── RecentActivity ──────────────────────────────────────────────────────── */
.pt-home-activity {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 24px !important;
  border: 1px solid rgba(226,232,240,0.7) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}
.pt-home-activity__list { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.pt-home-activity__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  transition: background 0.15s !important;
}
.pt-home-activity__item:hover { background: #f8fafc !important; }
.pt-home-activity__icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pt-home-activity__body { flex: 1 !important; }
.pt-home-activity__title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 0 2px !important;
}
.pt-home-activity__desc {
  font-size: 0.8rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.pt-home-activity__time {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 4px 0 0 !important;
}

/* ── Sidebar cards ───────────────────────────────────────────────────────── */
.pt-home-sidebar-card {
  background: #fff !important;
  border-radius: 18px !important;
  padding: 18px !important;
  border: 1px solid rgba(226,232,240,0.7) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}
.pt-home-sidebar-card--upcoming {
  border-left: 4px solid var(--primary-color) !important;
}
.pt-home-sidebar-card--chat {
  background: var(--primary-color) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(90,158,124,0.25) !important;
}
.pt-home-sidebar-card__label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  margin-bottom: 12px !important;
}
.pt-home-sidebar-card__title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 14px !important;
}

/* upcoming sidebar */
.pt-home-sidebar-upcoming__row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.pt-home-sidebar-upcoming__icon {
  font-size: 18px !important;
  color: var(--primary-color) !important;
  background: rgba(90,158,124,0.1) !important;
  padding: 10px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
.pt-home-sidebar-upcoming__title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 2px !important;
}
.pt-home-sidebar-upcoming__time {
  font-size: 0.8rem !important;
  color: #64748b !important;
  margin: 0 !important;
}
.pt-home-sidebar-upcoming__btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 9px !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.pt-home-sidebar-upcoming__btn:hover { background: #e2e8f0 !important; }

/* chat sidebar */
.pt-home-sidebar-chat__header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}
.pt-home-sidebar-chat__avatar-wrap { position: relative !important; flex-shrink: 0 !important; }
.pt-home-sidebar-chat__avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
}
.pt-home-sidebar-chat__avatar--initials {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pt-home-sidebar-chat__online-dot {
  position: absolute !important;
  bottom: 1px !important;
  right: 1px !important;
  width: 10px !important;
  height: 10px !important;
  background: #22c55e !important;
  border-radius: 50% !important;
  border: 2px solid var(--primary-color) !important;
}
.pt-home-sidebar-chat__name {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 2px !important;
}
.pt-home-sidebar-chat__badge {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.8) !important;
  margin: 0 !important;
}
.pt-home-sidebar-chat__btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 9px !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--primary-color) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: opacity 0.2s !important;
}
.pt-home-sidebar-chat__btn:hover { opacity: 0.9 !important; }

/* Quick actions grid */
.pt-home-quick-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.pt-home-quick-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 14px 8px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  text-decoration: none !important;
  transition: background 0.18s, transform 0.18s !important;
  border: 1px solid transparent !important;
}
.pt-home-quick-action:hover {
  background: rgba(90,158,124,0.08) !important;
  border-color: rgba(90,158,124,0.2) !important;
  transform: translateY(-1px) !important;
}
.pt-home-quick-action__icon {
  font-size: 18px !important;
  color: #64748b !important;
}
.pt-home-quick-action:hover .pt-home-quick-action__icon { color: var(--primary-color) !important; }
.pt-home-quick-action__label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

/* Sidebar hidden on mobile — show at lg */
@media (max-width: 1023px) {
  .pt-home-v2__sidebar { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 2 — Psychologist Discovery
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-disc-page { padding-top: 24px !important; padding-bottom: 80px !important; }

.pt-disc-header { margin-bottom: 24px !important; }
.pt-disc-header__title { font-size: 1.6rem !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.4px !important; margin: 0 0 6px !important; }
.pt-disc-header__sub { font-size: 0.95rem !important; color: #64748b !important; margin: 0 !important; }

.pt-disc-search-area { margin-bottom: 24px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.pt-disc-search-wrap { position: relative !important; width: 100% !important; }
.pt-disc-search-icon { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; color: #94a3b8 !important; font-size: 15px !important; pointer-events: none !important; }
.pt-disc-search { width: 100% !important; padding: 12px 44px !important; border: 1.5px solid #e2e8f0 !important; border-radius: 14px !important; background: #fff !important; font-size: 0.9rem !important; color: #0f172a !important; outline: none !important; transition: border-color 0.2s !important; box-sizing: border-box !important; }
.pt-disc-search:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(90,158,124,0.12) !important; }
.pt-disc-search-clear { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; background: none !important; border: none !important; color: #94a3b8 !important; cursor: pointer !important; padding: 4px !important; font-size: 14px !important; }

.pt-disc-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.pt-disc-chip { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 7px 14px !important; border-radius: 99px !important; border: 1.5px solid #e2e8f0 !important; background: #fff !important; color: #475569 !important; font-size: 0.8rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.18s !important; }
.pt-disc-chip:hover { border-color: var(--primary-color) !important; color: var(--primary-color) !important; }
.pt-disc-chip.is-active { background: rgba(90,158,124,0.12) !important; border-color: var(--primary-color) !important; color: var(--primary-color) !important; }

.pt-disc-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; }
@media (min-width: 768px) { .pt-disc-layout { grid-template-columns: 240px 1fr !important; align-items: start !important; } }

.pt-disc-sidebar { display: none !important; }
@media (min-width: 768px) { .pt-disc-sidebar { display: block !important; } }
.pt-disc-sidebar__inner { background: #fff !important; border-radius: 18px !important; padding: 20px !important; border: 1px solid rgba(226,232,240,0.7) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important; position: sticky !important; top: 80px !important; }
.pt-disc-sidebar__header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 20px !important; }
.pt-disc-sidebar__title { font-size: 0.95rem !important; font-weight: 700 !important; color: #0f172a !important; }
.pt-disc-sidebar__reset { font-size: 0.75rem !important; font-weight: 700 !important; color: var(--primary-color) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; background: none !important; border: none !important; cursor: pointer !important; padding: 0 !important; }
.pt-disc-sidebar__group { margin-bottom: 20px !important; }
.pt-disc-sidebar__label { font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #94a3b8 !important; margin: 0 0 10px !important; }
.pt-disc-sidebar__chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.pt-disc-filter-chip { padding: 5px 12px !important; border-radius: 99px !important; background: #f1f5f9 !important; border: 1.5px solid transparent !important; color: #475569 !important; font-size: 0.78rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.16s !important; }
.pt-disc-filter-chip:hover { background: rgba(90,158,124,0.08) !important; }
.pt-disc-filter-chip.is-active { background: rgba(90,158,124,0.12) !important; border-color: var(--primary-color) !important; color: var(--primary-color) !important; }
.pt-disc-sidebar__check { display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; font-size: 0.875rem !important; color: #475569 !important; }
.pt-disc-sidebar__check input { accent-color: var(--primary-color) !important; }

.pt-disc-results { min-width: 0 !important; }
.pt-disc-sort-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 16px !important; flex-wrap: wrap !important; gap: 8px !important; }
.pt-disc-sort-bar__count { font-size: 0.82rem !important; color: #64748b !important; font-weight: 600 !important; }
.pt-disc-sort-bar__options { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.pt-disc-sort-btn { padding: 5px 12px !important; border-radius: 99px !important; background: #f1f5f9 !important; border: 1.5px solid transparent !important; color: #64748b !important; font-size: 0.78rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.16s !important; }
.pt-disc-sort-btn:hover { color: var(--primary-color) !important; }
.pt-disc-sort-btn.is-active { background: rgba(90,158,124,0.1) !important; border-color: var(--primary-color) !important; color: var(--primary-color) !important; }

.pt-disc-list { display: flex !important; flex-direction: column !important; gap: 12px !important; }

.pt-disc-card { background: #fff !important; border-radius: 20px !important; border: 1px solid rgba(226,232,240,0.8) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important; transition: box-shadow 0.2s, transform 0.2s !important; position: relative !important; overflow: hidden !important; padding: 20px !important; }
.pt-disc-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1) !important; transform: translateY(-2px) !important; }
.pt-disc-card--featured { border: 2px solid rgba(90,158,124,0.4) !important; box-shadow: 0 4px 20px rgba(90,158,124,0.12) !important; }
.pt-disc-card__featured-badge { position: absolute !important; top: 0 !important; right: 0 !important; background: var(--primary-color) !important; color: #fff !important; font-size: 0.72rem !important; font-weight: 700 !important; padding: 4px 14px !important; border-radius: 0 20px 0 12px !important; }
.pt-disc-card__inner { display: flex !important; gap: 18px !important; flex-direction: column !important; }
@media (min-width: 540px) { .pt-disc-card__inner { flex-direction: row !important; align-items: flex-start !important; } }

.pt-disc-card__avatar-wrap { position: relative !important; flex-shrink: 0 !important; }
.pt-disc-card__avatar { width: 88px !important; height: 88px !important; border-radius: 50% !important; object-fit: cover !important; border: 2.5px solid rgba(90,158,124,0.25) !important; display: block !important; }
.pt-disc-card__avatar--initials { background: rgba(90,158,124,0.1) !important; color: var(--primary-color) !important; font-weight: 700 !important; font-size: 1.6rem !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.pt-disc-card__verified { position: absolute !important; bottom: 2px !important; right: 2px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: var(--primary-color) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; border: 2px solid #fff !important; }

.pt-disc-card__body { flex: 1 !important; min-width: 0 !important; }
.pt-disc-card__top-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 8px !important; margin-bottom: 8px !important; }
.pt-disc-card__name { font-size: 1.05rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 2px !important; }
.pt-disc-card__title { font-size: 0.82rem !important; color: #64748b !important; margin: 0 !important; }
.pt-disc-card__price { font-size: 1rem !important; font-weight: 700 !important; color: var(--primary-color) !important; white-space: nowrap !important; }
.pt-disc-card__price-unit { font-size: 0.75rem !important; font-weight: 400 !important; color: #94a3b8 !important; }

.pt-disc-card__tags { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-bottom: 10px !important; }
.pt-disc-card__tag { padding: 3px 9px !important; border-radius: 6px !important; background: #f1f5f9 !important; color: #475569 !important; font-size: 0.72rem !important; font-weight: 600 !important; }

.pt-disc-card__meta { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-bottom: 14px !important; }
.pt-disc-card__meta-item { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 0.8rem !important; color: #64748b !important; }
.pt-disc-card__slot { color: var(--primary-color) !important; font-weight: 600 !important; }
.pt-disc-card__slot--urgent { color: #059669 !important; }

.pt-disc-card__actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.pt-disc-card__btn-primary { display: inline-flex !important; align-items: center !important; background: var(--primary-color) !important; color: #fff !important; padding: 9px 22px !important; border-radius: 99px !important; font-size: 0.82rem !important; font-weight: 700 !important; text-decoration: none !important; transition: opacity 0.2s !important; }
.pt-disc-card__btn-primary:hover { opacity: 0.88 !important; color: #fff !important; }
.pt-disc-card__btn-secondary { display: inline-flex !important; align-items: center !important; background: #f1f5f9 !important; color: #475569 !important; padding: 9px 22px !important; border-radius: 99px !important; border: 1.5px solid #e2e8f0 !important; font-size: 0.82rem !important; font-weight: 600 !important; text-decoration: none !important; transition: background 0.2s !important; }
.pt-disc-card__btn-secondary:hover { background: #e2e8f0 !important; color: #475569 !important; }

.pt-disc-empty { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 60px 24px !important; text-align: center !important; background: #fff !important; border-radius: 20px !important; border: 1px solid rgba(226,232,240,0.8) !important; }
.pt-disc-empty__icon { font-size: 2.5rem !important; color: #cbd5e1 !important; margin-bottom: 16px !important; }
.pt-disc-empty__title { font-size: 1.05rem !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 8px !important; }
.pt-disc-empty__sub { font-size: 0.875rem !important; color: #64748b !important; margin: 0 0 20px !important; }
.pt-disc-empty__btn { padding: 10px 24px !important; border-radius: 10px !important; background: var(--primary-color) !important; color: #fff !important; font-size: 0.875rem !important; font-weight: 700 !important; border: none !important; cursor: pointer !important; }

.pt-disc-load-more { display: flex !important; justify-content: center !important; padding: 24px 0 !important; }
.pt-disc-load-more__btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 12px 32px !important; border-radius: 12px !important; border: 1.5px solid #e2e8f0 !important; background: #fff !important; color: #475569 !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background 0.2s !important; }
.pt-disc-load-more__btn:hover { background: #f8fafc !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 3 — Psychologist Profile + Booking
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-profile-page { padding-top: 24px !important; padding-bottom: 100px !important; }

/* Back nav */
.pt-profile-back { margin-bottom: 24px !important; }
.pt-profile-back__link { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: var(--primary-color) !important; font-size: 0.875rem !important; font-weight: 600 !important; text-decoration: none !important; margin-bottom: 10px !important; }
.pt-profile-back__link:hover { text-decoration: underline !important; }
.pt-profile-back__title { font-size: 1.5rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 !important; letter-spacing: -0.3px !important; }

/* 2-col layout */
.pt-profile-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
@media (min-width: 1024px) { .pt-profile-layout { grid-template-columns: 1fr 340px !important; } }

.pt-profile-main { display: flex !important; flex-direction: column !important; gap: 20px !important; }

/* Profile summary card */
.pt-profile-card { background: #fff !important; border-radius: 20px !important; padding: 24px !important; border: 1px solid rgba(226,232,240,0.7) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
.pt-profile-card__hero { display: flex !important; flex-direction: column !important; gap: 20px !important; }
@media (min-width: 640px) { .pt-profile-card__hero { flex-direction: row !important; align-items: flex-start !important; } }
.pt-profile-card__avatar-wrap { position: relative !important; flex-shrink: 0 !important; }
.pt-profile-card__avatar { width: 110px !important; height: 110px !important; border-radius: 18px !important; object-fit: cover !important; border: 2px solid rgba(90,158,124,0.2) !important; display: block !important; }
.pt-profile-card__avatar--initials { background: rgba(90,158,124,0.1) !important; color: var(--primary-color) !important; font-weight: 800 !important; font-size: 2.2rem !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.pt-profile-card__verified { position: absolute !important; bottom: -6px !important; right: -6px !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; background: var(--primary-color) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; border: 3px solid #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; }
.pt-profile-card__info { flex: 1 !important; }
.pt-profile-card__name-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin-bottom: 4px !important; }
.pt-profile-card__name { font-size: 1.4rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 !important; }
.pt-profile-card__badge { background: rgba(90,158,124,0.1) !important; color: var(--primary-color) !important; font-size: 0.72rem !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 99px !important; }
.pt-profile-card__role { font-size: 0.9rem !important; color: #64748b !important; margin: 0 0 14px !important; }
.pt-profile-card__stats { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; }
.pt-profile-card__stat { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 0.875rem !important; }
.pt-profile-card__stat strong { color: #0f172a !important; font-weight: 700 !important; }
.pt-profile-card__stat-sub { color: #64748b !important; }

/* Trust badges */
.pt-profile-trust { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid #f1f5f9 !important; }
@media (min-width: 480px) { .pt-profile-trust { grid-template-columns: repeat(3,1fr) !important; } }
.pt-profile-trust__badge { display: flex !important; align-items: center !important; gap: 8px !important; background: #f8fafc !important; border-radius: 10px !important; padding: 10px 12px !important; font-size: 0.8rem !important; color: #334155 !important; font-weight: 500 !important; }

/* Sections */
.pt-profile-section { background: #fff !important; border-radius: 20px !important; padding: 20px 24px !important; border: 1px solid rgba(226,232,240,0.7) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important; }
.pt-profile-section__header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 16px !important; }
.pt-profile-section__title { font-size: 0.95rem !important; font-weight: 700 !important; color: #0f172a !important; display: flex !important; align-items: center !important; gap: 7px !important; margin: 0 0 16px !important; }
.pt-profile-section__title .fa { color: var(--primary-color) !important; font-size: 14px !important; }
.pt-profile-section__sublabel { font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #94a3b8 !important; margin: 0 0 10px !important; }
.pt-profile-section__group { margin-bottom: 16px !important; }
.pt-profile-section__group:last-child { margin-bottom: 0 !important; }

/* Tags */
.pt-profile-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.pt-profile-tag { padding: 6px 14px !important; border-radius: 99px !important; font-size: 0.82rem !important; font-weight: 600 !important; }
.pt-profile-tag--filled { background: rgba(90,158,124,0.1) !important; color: var(--primary-color) !important; }
.pt-profile-tag--outline { border: 1.5px solid var(--primary-color) !important; color: var(--primary-color) !important; background: transparent !important; }

/* Bio */
.pt-profile-bio { font-size: 0.9rem !important; line-height: 1.7 !important; color: #475569 !important; margin: 0 !important; white-space: pre-wrap !important; }

/* Reviews */
.pt-profile-reviews { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
@media (min-width: 640px) { .pt-profile-reviews { grid-template-columns: 1fr 1fr !important; } }
.pt-review-card { background: #f8fafc !important; border-radius: 14px !important; padding: 14px !important; border: 1px solid #e2e8f0 !important; }
.pt-review-card__header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; margin-bottom: 10px !important; }
.pt-review-card__author-row { display: flex !important; align-items: center !important; gap: 8px !important; }
.pt-review-card__initials { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(90,158,124,0.15) !important; color: var(--primary-color) !important; font-weight: 700 !important; font-size: 0.9rem !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.pt-review-card__name { font-size: 0.82rem !important; font-weight: 600 !important; color: #0f172a !important; margin: 0 0 1px !important; }
.pt-review-card__date { font-size: 0.72rem !important; color: #94a3b8 !important; margin: 0 !important; }
.pt-review-card__text { font-size: 0.82rem !important; color: #475569 !important; line-height: 1.5 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }

/* Sidebar sticky */
.pt-profile-sidebar { display: none !important; }
@media (min-width: 1024px) { .pt-profile-sidebar { display: block !important; position: sticky !important; top: 80px !important; } }

/* ── Booking Panel ──────────────────────────────────────────────────────── */
.pt-booking-panel { background: #fff !important; border-radius: 20px !important; border: 1px solid rgba(226,232,240,0.7) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; overflow: hidden !important; }
.pt-booking-panel__header { background: var(--primary-color) !important; padding: 20px 24px !important; }
.pt-booking-panel__title { font-size: 1rem !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 4px !important; }
.pt-booking-panel__sub { font-size: 0.8rem !important; color: rgba(255,255,255,0.75) !important; margin: 0 !important; }
.pt-booking-panel__body { padding: 20px !important; display: flex !important; flex-direction: column !important; gap: 20px !important; }

.pt-booking-step__label { font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: #64748b !important; margin: 0 0 10px !important; display: block !important; }

/* Mode toggle */
.pt-booking-mode-toggle { display: flex !important; background: #f1f5f9 !important; border-radius: 99px !important; padding: 3px !important; }
.pt-booking-mode-btn { flex: 1 !important; padding: 8px 12px !important; border-radius: 99px !important; border: none !important; background: transparent !important; color: #64748b !important; font-size: 0.85rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s !important; }
.pt-booking-mode-btn.is-active { background: #fff !important; color: var(--primary-color) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; }

/* Date scroll */
.pt-booking-date-scroll { display: flex !important; gap: 8px !important; overflow-x: auto !important; padding-bottom: 4px !important; }
.pt-booking-date-scroll::-webkit-scrollbar { height: 3px !important; }
.pt-booking-date-scroll::-webkit-scrollbar-thumb { background: #e2e8f0 !important; border-radius: 99px !important; }
.pt-booking-date-btn { flex-shrink: 0 !important; width: 56px !important; height: 72px !important; border-radius: 14px !important; border: 1.5px solid #e2e8f0 !important; background: #fff !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; cursor: pointer !important; transition: all 0.18s !important; }
.pt-booking-date-btn:hover { border-color: var(--primary-color) !important; }
.pt-booking-date-btn.is-active { border-color: var(--primary-color) !important; background: rgba(90,158,124,0.08) !important; color: var(--primary-color) !important; }
.pt-booking-date-btn__day { font-size: 0.62rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.pt-booking-date-btn__num { font-size: 1.1rem !important; font-weight: 800 !important; }

/* Slots grid */
.pt-booking-slots-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.pt-booking-slot-btn { padding: 10px 4px !important; border-radius: 10px !important; border: 1.5px solid #e2e8f0 !important; background: #fff !important; color: #334155 !important; font-size: 0.85rem !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.18s !important; }
.pt-booking-slot-btn:hover { border-color: var(--primary-color) !important; color: var(--primary-color) !important; }
.pt-booking-slot-btn.is-active { border-color: var(--primary-color) !important; background: var(--primary-color) !important; color: #fff !important; }
.pt-booking-slots-error,.pt-booking-slots-empty { font-size: 0.82rem !important; color: #64748b !important; margin: 0 !important; }

/* Summary */
.pt-booking-summary { background: #f8fafc !important; border-radius: 12px !important; padding: 14px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.pt-booking-summary__row { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.85rem !important; color: #64748b !important; }
.pt-booking-summary__val { font-weight: 700 !important; color: #0f172a !important; }
.pt-booking-summary__row--price { padding-top: 8px !important; border-top: 1px solid #e2e8f0 !important; }
.pt-booking-summary__price { font-size: 1.1rem !important; font-weight: 800 !important; color: var(--primary-color) !important; }

.pt-booking-error { font-size: 0.82rem !important; color: #dc2626 !important; background: rgba(239,68,68,0.08) !important; padding: 10px 12px !important; border-radius: 8px !important; margin: 0 !important; }

/* CTA */
.pt-booking-cta { width: 100% !important; padding: 13px !important; border-radius: 12px !important; border: none !important; background: var(--primary-color) !important; color: #fff !important; font-size: 0.9rem !important; font-weight: 800 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: opacity 0.2s !important; box-shadow: 0 4px 14px rgba(90,158,124,0.3) !important; }
.pt-booking-cta:hover:not(:disabled) { opacity: 0.9 !important; }
.pt-booking-cta:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }

/* ── Confirm Modal ──────────────────────────────────────────────────────── */
.pt-modal-backdrop { position: fixed !important; inset: 0 !important; background: rgba(15,23,42,0.5) !important; z-index: 9000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; }
.pt-modal { background: #fff !important; border-radius: 20px !important; width: 100% !important; max-width: 420px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important; overflow: hidden !important; }
.pt-modal__header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 18px 20px !important; border-bottom: 1px solid #f1f5f9 !important; }
.pt-modal__title { font-size: 1rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 !important; }
.pt-modal__close { background: none !important; border: none !important; color: #94a3b8 !important; cursor: pointer !important; font-size: 16px !important; padding: 4px !important; }
.pt-modal__body { padding: 16px 20px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.pt-modal__footer { padding: 14px 20px !important; border-top: 1px solid #f1f5f9 !important; display: flex !important; gap: 10px !important; }
.pt-modal__btn-cancel { flex: 1 !important; padding: 11px !important; border-radius: 10px !important; border: 1.5px solid #e2e8f0 !important; background: #fff !important; color: #475569 !important; font-size: 0.875rem !important; font-weight: 600 !important; cursor: pointer !important; }
.pt-modal__btn-confirm { flex: 2 !important; padding: 11px !important; border-radius: 10px !important; border: none !important; background: var(--primary-color) !important; color: #fff !important; font-size: 0.875rem !important; font-weight: 700 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; }
.pt-modal__btn-confirm:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }

.pt-booking-confirm__row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 8px 0 !important; border-bottom: 1px solid #f8fafc !important; }
.pt-booking-confirm__icon { font-size: 16px !important; color: var(--primary-color) !important; width: 20px !important; text-align: center !important; flex-shrink: 0 !important; }
.pt-booking-confirm__label { font-size: 0.72rem !important; color: #94a3b8 !important; margin: 0 0 2px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; font-weight: 600 !important; }
.pt-booking-confirm__value { font-size: 0.875rem !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; }
.pt-booking-confirm__price-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 10px !important; font-size: 0.875rem !important; color: #64748b !important; }
.pt-booking-confirm__price { font-size: 1.1rem !important; font-weight: 800 !important; color: var(--primary-color) !important; }

/* Mobile CTA — fixed bottom bar on mobile */
.pt-profile-mobile-cta { display: block !important; }
@media (min-width: 1024px) { .pt-profile-mobile-cta { display: none !important; } }
.pt-profile-mobile-cta { position: fixed !important; bottom: 56px !important; left: 0 !important; right: 0 !important; padding: 10px 16px !important; background: rgba(255,255,255,0.95) !important; border-top: 1px solid #e2e8f0 !important; z-index: 100 !important; backdrop-filter: blur(8px) !important; }
.pt-profile-mobile-cta__btn { width: 100% !important; padding: 13px !important; border-radius: 12px !important; border: none !important; background: var(--primary-color) !important; color: #fff !important; font-size: 0.9rem !important; font-weight: 800 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; }

/* Mobile: show booking panel inline */
@media (max-width: 1023px) {
  .pt-profile-sidebar { display: block !important; position: static !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 4 — APPOINTMENTS PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Page shell */
.pt-appt-page { padding-bottom: 100px; }
.pt-appt-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 0 4px; }
.pt-appt-page__title { font-size: 1.5rem; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.pt-appt-page__sub { font-size: 0.875rem; color: #64748b; margin: 0; }
.pt-appt-page__new-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-color); color: #fff !important; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.pt-appt-page__new-btn:hover { background: #4a8e6c; }

/* Stats bar */
.pt-appt-stats { display: flex; align-items: center; gap: 0; background: #fff; border: 1px solid #e8f0ed; border-radius: 14px; padding: 14px 20px; margin: 14px 0 20px; }
.pt-appt-stat { display: flex; align-items: center; gap: 10px; flex: 1; }
.pt-appt-stat__icon { font-size: 1.2rem; color: var(--primary-color); width: 20px; text-align: center; }
.pt-appt-stat__icon--muted { color: #94a3b8; }
.pt-appt-stat__icon--accent { color: #f59e0b; }
.pt-appt-stat div { display: flex; flex-direction: column; }
.pt-appt-stat__val { font-size: 1.1rem; font-weight: 700; color: #1e293b; line-height: 1.2; }
.pt-appt-stat__label { font-size: 0.72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; }
.pt-appt-stat-divider { width: 1px; height: 36px; background: #e8f0ed; margin: 0 16px; flex-shrink: 0; }

/* Hero section */
.pt-appt-hero-section { margin-bottom: 24px; }
.pt-appt-hero-skel { height: 140px; border-radius: 16px; background: rgba(90,158,124,0.07); animation: ptSkeleton 1.4s ease-in-out infinite; }
.pt-appt-hero-empty { display: flex; align-items: center; gap: 10px; padding: 16px; background: #fff8f8; border-radius: 12px; color: #ef4444; font-size: 0.875rem; }
.pt-appt-hero-empty__icon { font-size: 1.2rem; }

/* Hero card */
.pt-appt-hero { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 18px; overflow: hidden; position: relative; }
.pt-appt-hero--live { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(90,158,124,0.12); }
.pt-appt-hero--soon { border-color: #f59e0b; }

.pt-appt-hero__live-badge { display: flex; align-items: center; gap: 8px; background: var(--primary-color); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 6px 16px; }
.pt-appt-hero__live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ptBlink 1s ease-in-out infinite; flex-shrink: 0; }
@keyframes ptBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.pt-appt-hero__countdown-bar { display: flex; align-items: center; gap: 6px; background: #fffbeb; color: #b45309; font-size: 0.82rem; padding: 6px 16px; border-bottom: 1px solid #fde68a; }
.pt-appt-hero__countdown-bar strong { color: #92400e; }

.pt-appt-hero__body { display: flex; align-items: flex-start; gap: 14px; padding: 18px; }
.pt-appt-hero__avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--primary-color), #4a8e6c); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; font-weight: 700; }
.pt-appt-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-appt-hero__info { flex: 1; min-width: 0; }
.pt-appt-hero__eyebrow { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-color); margin: 0 0 4px; }
.pt-appt-hero__name { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-appt-hero__role { font-size: 0.8rem; color: #64748b; margin: 0 0 10px; }
.pt-appt-hero__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-appt-hero__meta-chip { display: inline-flex; align-items: center; gap: 4px; background: #f1f5f9; color: #475569; font-size: 0.78rem; padding: 4px 10px; border-radius: 20px; }
.pt-appt-hero__meta-chip i { color: var(--primary-color); }
.pt-appt-hero__meta-chip--days { background: #ecfdf5; color: #065f46; font-weight: 600; }
.pt-appt-hero__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.pt-appt-hero__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pt-appt-hero__btn { display: inline-block; padding: 7px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; text-decoration: none; text-align: center; white-space: nowrap; }
.pt-appt-hero__btn--primary { background: var(--primary-color); color: #fff !important; }
.pt-appt-hero__btn--primary:hover { background: #4a8e6c; }
.pt-appt-hero__btn--ghost { background: transparent; color: var(--primary-color) !important; border: 1.5px solid var(--primary-color); }
.pt-appt-hero__btn--ghost:hover { background: #ecfdf5; }

/* Hero empty state */
.pt-appt-hero--empty { display: flex; align-items: center; gap: 16px; padding: 24px 20px; background: linear-gradient(135deg, #f8fffe 0%, #ecfdf5 100%); }
.pt-appt-hero__empty-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(90,158,124,0.12); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 1.4rem; flex-shrink: 0; }
.pt-appt-hero__empty-body { flex: 1; }
.pt-appt-hero__empty-title { font-size: 0.95rem; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.pt-appt-hero__empty-text { font-size: 0.82rem; color: #64748b; margin: 0 0 10px; }
.pt-appt-hero__empty-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-color); color: #fff !important; padding: 7px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; text-decoration: none; }

/* Tabs */
.pt-appt-tabs { }
.pt-appt-tab-list { display: flex; gap: 4px; border-bottom: 2px solid #e8f0ed; margin-bottom: 16px; }
.pt-appt-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: none; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; border-radius: 0; }
.pt-appt-tab:hover { color: var(--primary-color); }
.pt-appt-tab.is-active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: 700; }
.pt-appt-tab__badge { background: #e2e8f0; color: #475569; font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center; }
.pt-appt-tab__badge.is-active { background: var(--primary-color); color: #fff; }

/* List */
.pt-appt-list { display: flex; flex-direction: column; gap: 12px; }
.pt-appt-card-skel { height: 110px; border-radius: 14px; background: rgba(90,158,124,0.07); animation: ptSkeleton 1.4s ease-in-out infinite; }

/* Empty state */
.pt-appt-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; background: #fff; border: 1.5px dashed #e2e8f0; border-radius: 16px; }
.pt-appt-empty__icon { font-size: 2rem; color: #cbd5e1; margin-bottom: 12px; }
.pt-appt-empty__title { font-size: 1rem; font-weight: 700; color: #1e293b; margin: 0 0 6px; }
.pt-appt-empty__text { font-size: 0.85rem; color: #64748b; margin: 0 0 16px; max-width: 280px; }
.pt-appt-empty__btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-color); color: #fff !important; padding: 8px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; text-decoration: none; }

/* Appointment card */
.pt-appt-card { background: #fff; border: 1.5px solid #e8f0ed; border-radius: 16px; overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s; }
.pt-appt-card:hover { box-shadow: 0 4px 16px rgba(90,158,124,0.10); border-color: #b6d9c9; }
.pt-appt-card--live { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(90,158,124,0.12); }
.pt-appt-card--soon { border-color: #f59e0b; }
.pt-appt-card--past { border-color: #e8f0ed; opacity: 0.9; }

.pt-appt-card__live-bar { display: flex; align-items: center; gap: 6px; background: var(--primary-color); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 5px 14px; }
.pt-appt-card__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: ptBlink 1s ease-in-out infinite; flex-shrink: 0; }

.pt-appt-card__main { display: flex; gap: 12px; padding: 14px 16px 10px; }
.pt-appt-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--primary-color), #4a8e6c); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.95rem; font-weight: 700; }
.pt-appt-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-appt-card__info { flex: 1; min-width: 0; }
.pt-appt-card__name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.pt-appt-card__name { font-size: 0.95rem; font-weight: 700; color: #1e293b; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-appt-card__role { font-size: 0.78rem; color: #64748b; margin: 0 0 8px; }
.pt-appt-card__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.pt-appt-card__chip { display: inline-flex; align-items: center; gap: 4px; background: #f1f5f9; color: #475569; font-size: 0.75rem; padding: 3px 8px; border-radius: 20px; }
.pt-appt-card__chip i { color: var(--primary-color); font-size: 0.72rem; }
.pt-appt-card__chip--mode { background: #ecfdf5; color: #065f46; }
.pt-appt-card__footer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-appt-card__reltime { font-size: 0.75rem; color: #94a3b8; display: flex; align-items: center; gap: 4px; }
.pt-appt-card__reltime i { font-size: 0.7rem; }
.pt-appt-card__payment-badge { display: inline-flex; align-items: center; gap: 4px; background: #fff7ed; color: #c2410c; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; border: 1px solid #fed7aa; }

.pt-appt-card__actions { display: flex; gap: 8px; padding: 0 16px 14px; }
.pt-appt-card__btn { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; text-decoration: none; text-align: center; transition: background 0.15s; }
.pt-appt-card__btn--primary { background: var(--primary-color); color: #fff !important; }
.pt-appt-card__btn--primary:hover { background: #4a8e6c; }
.pt-appt-card__btn--ghost { background: transparent; color: var(--primary-color) !important; border: 1.5px solid var(--primary-color); }
.pt-appt-card__btn--ghost:hover { background: #ecfdf5; }

/* Status chip small variant */
.pt-status-chip--sm { font-size: 0.7rem !important; padding: 2px 8px !important; }

/* Responsive */
@media (max-width: 480px) {
  .pt-appt-hero__body { flex-wrap: wrap; }
  .pt-appt-hero__aside { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .pt-appt-stats { flex-wrap: wrap; gap: 12px; }
  .pt-appt-stat-divider { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 5 — APPOINTMENT DETAIL WORKSPACE
   ══════════════════════════════════════════════════════════════════════════════ */

.pt-detail-page { padding-bottom: 100px; }

/* Back nav */
.pt-detail-nav { display: flex; align-items: center; gap: 12px; padding: 16px 0 12px; }
.pt-detail-nav__back { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-color) !important; font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.pt-detail-nav__back:hover { text-decoration: underline; }
.pt-detail-nav__title { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0; }

/* Mobile tab switcher */
.pt-detail-mobile-tabs { display: none; gap: 4px; background: #f1f5f9; border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.pt-detail-mobile-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: none; background: transparent; border-radius: 8px; font-size: 0.875rem; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s; }
.pt-detail-mobile-tab.is-active { background: #fff; color: var(--primary-color); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* Layout */
.pt-detail-layout { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
.pt-detail-layout__left { display: flex; flex-direction: column; gap: 14px; }
.pt-detail-layout__right { position: sticky; top: 80px; }

/* Psychologist card */
.pt-detail-psych-card { background: #fff; border: 1.5px solid #e8f0ed; border-radius: 18px; padding: 20px; display: flex; gap: 16px; align-items: center; }
.pt-detail-psych-card__avatar { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--primary-color), #4a8e6c); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; font-weight: 700; }
.pt-detail-psych-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-detail-psych-card__info { flex: 1; min-width: 0; }
.pt-detail-psych-card__name { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 6px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-detail-psych-card__role { font-size: 0.8rem; color: #64748b; margin: 0; }

/* Live banner */
.pt-detail-live-banner { display: flex; align-items: center; gap: 8px; background: var(--primary-color); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 0.875rem; }
.pt-detail-live-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ptBlink 1s ease-in-out infinite; flex-shrink: 0; }
.pt-detail-live-banner__join { margin-left: auto; color: #fff !important; font-weight: 700; text-decoration: none; font-size: 0.875rem; }
.pt-detail-live-banner__join:hover { text-decoration: underline; }

/* Countdown */
.pt-detail-countdown { display: flex; align-items: center; gap: 8px; background: #fffbeb; color: #b45309; border: 1px solid #fde68a; padding: 10px 14px; border-radius: 12px; font-size: 0.875rem; }
.pt-detail-countdown i { color: #f59e0b; }
.pt-detail-countdown strong { color: #92400e; }

/* Meta card */
.pt-detail-meta-card { background: #fff; border: 1.5px solid #e8f0ed; border-radius: 16px; padding: 18px; }
.pt-detail-meta-card__title { font-size: 0.85rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 14px; }
.pt-detail-meta-list { display: flex; flex-direction: column; gap: 10px; }
.pt-detail-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-detail-meta-row__label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #64748b; }
.pt-detail-meta-row__label i { color: var(--primary-color); width: 14px; text-align: center; }
.pt-detail-meta-row__val { font-size: 0.875rem; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 6px; }
.pt-detail-pay-badge { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.pt-detail-pay-badge.is-paid { background: #ecfdf5; color: #065f46; }
.pt-detail-pay-badge.is-pending { background: #fff7ed; color: #c2410c; }

/* Actions */
.pt-detail-actions { display: flex; flex-direction: column; gap: 8px; }
.pt-detail-actions__btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s; width: 100%; }
.pt-detail-actions__btn--primary { background: var(--primary-color); color: #fff !important; }
.pt-detail-actions__btn--primary:hover { background: #4a8e6c; }
.pt-detail-actions__btn--ghost { background: transparent; color: var(--primary-color) !important; border: 1.5px solid var(--primary-color); }
.pt-detail-actions__btn--ghost:hover { background: #ecfdf5; }
.pt-detail-actions__btn--danger { background: #fff1f2; color: #e11d48 !important; border: 1.5px solid #fecdd3; }
.pt-detail-actions__btn--danger:hover:not(:disabled) { background: #ffe4e6; }
.pt-detail-actions__btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Status timeline section */
.pt-detail-section { background: #fff; border: 1.5px solid #e8f0ed; border-radius: 16px; padding: 18px; }
.pt-detail-section__title { font-size: 0.85rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 16px; display: flex; align-items: center; gap: 6px; }

/* Timeline */
.pt-detail-timeline { display: flex; flex-direction: column; gap: 0; }
.pt-detail-timeline__step { display: flex; align-items: flex-start; gap: 12px; position: relative; }
.pt-detail-timeline__dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #e2e8f0; background: #f8fafc; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.72rem; color: #94a3b8; z-index: 1; }
.pt-detail-timeline__step.is-done .pt-detail-timeline__dot { border-color: var(--primary-color); background: var(--primary-color); color: #fff; font-size: 0.7rem; }
.pt-detail-timeline__step.is-active .pt-detail-timeline__dot { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(90,158,124,0.18); }
.pt-detail-timeline__line { position: absolute; left: 13px; top: 28px; width: 2px; height: calc(100% + 8px); background: #e2e8f0; z-index: 0; }
.pt-detail-timeline__step.is-done .pt-detail-timeline__line { background: var(--primary-color); }
.pt-detail-timeline__label { padding: 4px 0 16px; }
.pt-detail-timeline__step-name { display: block; font-size: 0.85rem; font-weight: 600; color: #334155; }
.pt-detail-timeline__step.is-done .pt-detail-timeline__step-name { color: var(--primary-color); }
.pt-detail-timeline__step-time { display: block; font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }

/* ── Chat panel ── */
.pt-detail-chat { background: #fff; border: 1.5px solid #e8f0ed; border-radius: 18px; display: flex; flex-direction: column; height: 600px; overflow: hidden; }
.pt-detail-chat__header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }
.pt-detail-chat__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), #4a8e6c); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.875rem; font-weight: 700; flex-shrink: 0; }
.pt-detail-chat__name { font-size: 0.9rem; font-weight: 700; color: #1e293b; margin: 0; }
.pt-detail-chat__sub { font-size: 0.75rem; color: #94a3b8; margin: 0; }
.pt-detail-chat__expand { margin-left: auto; color: #94a3b8 !important; font-size: 1rem; text-decoration: none; }
.pt-detail-chat__expand:hover { color: var(--primary-color) !important; }

.pt-detail-chat__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.pt-detail-chat__body::-webkit-scrollbar { width: 4px; }
.pt-detail-chat__body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

.pt-detail-chat__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; text-align: center; color: #94a3b8; font-size: 0.875rem; padding: 20px; gap: 4px; }
.pt-detail-chat__retry { margin-top: 8px; background: none; border: 1.5px solid var(--primary-color); color: var(--primary-color); padding: 6px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }

/* Chat page containers */
.pt-chat-messages { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; min-height: 300px; max-height: 60vh; overflow-y: auto; }
.pt-chat-form { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid #e2e8f0; margin-top: 8px; }
.pt-chat-form .pt-form-input { flex: 1; }

/* Chat bubbles */
.pt-chat-bubble { display: flex; align-items: flex-end; gap: 8px; }
.pt-chat-bubble--me { flex-direction: row-reverse; }
.pt-chat-bubble__avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), #4a8e6c); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
.pt-chat-bubble__content { max-width: 72%; }
.pt-chat-bubble__text { padding: 10px 14px; border-radius: 18px; font-size: 0.875rem; line-height: 1.45; word-break: break-word; }
.pt-chat-bubble--them .pt-chat-bubble__text { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; }
.pt-chat-bubble--me .pt-chat-bubble__text { background: var(--primary-color); color: #fff; border-bottom-right-radius: 4px; }
.pt-chat-bubble__time { font-size: 0.68rem; color: #94a3b8; margin-top: 3px; text-align: right; }
.pt-chat-bubble--them .pt-chat-bubble__time { text-align: left; }

/* Input row */
.pt-detail-chat__input-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid #f1f5f9; flex-shrink: 0; }
.pt-detail-chat__input { flex: 1; border: 1.5px solid #e2e8f0; border-radius: 24px; padding: 8px 16px; font-size: 0.875rem; outline: none; transition: border-color 0.15s; }
.pt-detail-chat__input:focus { border-color: var(--primary-color); }
.pt-detail-chat__send { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-color); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0; transition: background 0.15s; }
.pt-detail-chat__send:hover:not(:disabled) { background: #4a8e6c; }
.pt-detail-chat__send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Toast */
.pt-toast { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 8px; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.pt-toast.is-visible { opacity: 1; }
.pt-toast--err { background: #dc2626; }

/* Responsive */
@media (max-width: 1023px) {
  .pt-detail-layout { grid-template-columns: 1fr; }
  .pt-detail-layout__right { position: static; }
  .pt-detail-mobile-tabs { display: flex; }
  .pt-detail-layout__left { display: none; }
  .pt-detail-layout__right { display: none; }
  .pt-detail-layout__left.is-mobile-active { display: flex; }
  .pt-detail-layout__right.is-mobile-active { display: block; }
  .pt-detail-chat { height: calc(100vh - 240px); min-height: 400px; }
}

/* ═══════════════════════════════════════════════════════
   SCREEN 6 — VIDEO CALL  (.pt-call-*)
   ═══════════════════════════════════════════════════════ */

/* Root: full-screen overlay that covers header + bottom nav */
.pt-call {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  background: #0a0a12 !important;
  overflow: hidden !important;
  font-family: inherit !important;
  color: #fff !important;
  user-select: none !important;
}

/* ── Video stage ── */
.pt-call-stage {
  position: absolute !important;
  inset: 0 !important;
}
.pt-call-video-remote {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── Remote fallback (waiting / no video) ── */
.pt-call-remote-fallback {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(ellipse at center, #1a2035 0%, #0a0a12 70%) !important;
  gap: 12px !important;
}

/* Pulsing rings */
.pt-call-waiting-rings {
  position: relative !important;
  width: 120px !important;
  height: 120px !important;
  margin-bottom: 8px !important;
}
.pt-call-waiting-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 2px solid rgba(90, 158, 124, 0.35) !important;
  animation: ptCallPulse 2.4s ease-out infinite !important;
}
.pt-call-waiting-ring--1 { inset: 0; animation-delay: 0s !important; }
.pt-call-waiting-ring--2 { inset: -16px; animation-delay: 0.6s !important; }
.pt-call-waiting-ring--3 { inset: -32px; animation-delay: 1.2s !important; }
@keyframes ptCallPulse {
  0%   { opacity: 0.8; transform: scale(0.9); }
  70%  { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; }
}

.pt-call-waiting-avatar {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #5a9e7c, #3a7e5c) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(90,158,124,0.4) !important;
}
.pt-call-waiting-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.pt-call-waiting-name {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}
.pt-call-waiting-status {
  font-size: 0.875rem !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 !important;
}
.pt-call-waiting-dots {
  display: flex !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
.pt-call-waiting-dots span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(90,158,124,0.7) !important;
  animation: ptCallDotBounce 1.4s ease-in-out infinite !important;
}
.pt-call-waiting-dots span:nth-child(2) { animation-delay: 0.2s !important; }
.pt-call-waiting-dots span:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes ptCallDotBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Local PiP ── */
.pt-call-pip {
  position: absolute !important;
  bottom: 120px !important;
  right: 16px !important;
  width: 100px !important;
  height: 140px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #1a2035 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.08) !important;
  z-index: 10 !important;
  transition: right 0.35s ease !important;
}
.pt-call-pip--shifted { right: calc(320px + 16px) !important; }
.pt-call-pip-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.pt-call-pip-fallback {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.6) !important;
  background: linear-gradient(135deg, #1e2a3a, #0f1729) !important;
}
.pt-call-pip-muted {
  position: absolute !important;
  bottom: 6px !important;
  left: 6px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(239,68,68,0.9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.65rem !important;
  color: #fff !important;
}

/* ── Top HUD ── */
.pt-call-hud {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 52px 16px 24px !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 20 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}
.pt-call-hud.is-visible { opacity: 1 !important; pointer-events: auto !important; }
.pt-call-hud-back {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  backdrop-filter: blur(8px) !important;
}
.pt-call-hud-back:hover { background: rgba(255,255,255,0.2) !important; }
.pt-call-hud-center {
  flex: 1 !important;
  min-width: 0 !important;
}
.pt-call-hud-name {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.pt-call-hud-sub {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 2px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.pt-call-hud-live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  display: inline-block !important;
  animation: ptCallLiveBlink 1.6s ease-in-out infinite !important;
}
@keyframes ptCallLiveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Quality indicator ── */
.pt-call-quality {
  display: flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}
.pt-call-quality span {
  display: block !important;
  width: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.25) !important;
}
.pt-call-quality span:nth-child(1) { height: 8px; }
.pt-call-quality span:nth-child(2) { height: 12px; }
.pt-call-quality span:nth-child(3) { height: 16px; }
.pt-call-quality[data-quality="good"] span { background: #4ade80 !important; }
.pt-call-quality[data-quality="fair"] span:nth-child(1),
.pt-call-quality[data-quality="fair"] span:nth-child(2) { background: #facc15 !important; }
.pt-call-quality[data-quality="poor"] span:nth-child(1) { background: #f87171 !important; }

/* ── Floating control bar ── */
.pt-call-controls {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(15, 20, 35, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  padding: 10px 18px !important;
  z-index: 20 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
.pt-call-controls.is-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}
.pt-call-ctrl-btn {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.18s, transform 0.15s !important;
  flex-shrink: 0 !important;
}
.pt-call-ctrl-btn:hover { background: rgba(255,255,255,0.22) !important; transform: scale(1.06) !important; }
.pt-call-ctrl-btn:active { transform: scale(0.94) !important; }
.pt-call-ctrl-btn.is-off {
  background: rgba(239,68,68,0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239,68,68,0.35) !important;
}
.pt-call-ctrl-btn.is-active {
  background: rgba(90,158,124,0.3) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(90,158,124,0.4) !important;
}
.pt-call-ctrl-btn--end {
  background: #ef4444 !important;
  color: #fff !important;
  width: 58px !important;
  height: 58px !important;
  font-size: 1.25rem !important;
  transform: rotate(135deg) !important;
  box-shadow: 0 4px 16px rgba(239,68,68,0.4) !important;
}
.pt-call-ctrl-btn--end:hover { background: #dc2626 !important; transform: rotate(135deg) scale(1.08) !important; }
.pt-call-ctrl-btn--end:active { transform: rotate(135deg) scale(0.92) !important; }

/* Camera off slash overlay */
.pt-call-ctrl-slash {
  position: absolute !important;
  width: 2px !important;
  height: 30px !important;
  background: #f87171 !important;
  border-radius: 2px !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

/* Chat badge on control button */
.pt-call-ctrl-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 100px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  pointer-events: none !important;
}

/* ── Chat panel (slide from right) ── */
.pt-call-chat-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 320px !important;
  max-width: 100vw !important;
  background: rgba(12, 16, 28, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 30 !important;
  transform: translateX(100%) !important;
  transition: transform 0.32s cubic-bezier(0.32, 0, 0.67, 0) !important;
}
.pt-call-chat-panel.is-open {
  transform: translateX(0) !important;
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1) !important;
}
.pt-call-chat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 60px 16px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  flex-shrink: 0 !important;
}
.pt-call-chat-header-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.pt-call-chat-header-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(90,158,124,0.2) !important;
  color: #6ee7b7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
}
.pt-call-chat-header-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}
.pt-call-chat-header-sub {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 2px 0 0 !important;
}
.pt-call-chat-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: none !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.pt-call-chat-close:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; }
.pt-call-chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.pt-call-chat-messages::-webkit-scrollbar { width: 4px; }
.pt-call-chat-messages::-webkit-scrollbar-track { background: transparent; }
.pt-call-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.pt-call-chat-empty {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,0.3) !important;
  font-size: 0.85rem !important;
  padding: 40px 0 !important;
}
.pt-call-chat-empty i { font-size: 2rem !important; }
.pt-call-chat-msg {
  display: flex !important;
  flex-direction: column !important;
  max-width: 82% !important;
}
.pt-call-chat-msg.is-me { align-self: flex-end !important; align-items: flex-end !important; }
.pt-call-chat-msg.is-them { align-self: flex-start !important; align-items: flex-start !important; }
.pt-call-chat-bubble {
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
}
.pt-call-chat-msg.is-me .pt-call-chat-bubble {
  background: #5a9e7c !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}
.pt-call-chat-msg.is-them .pt-call-chat-bubble {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.9) !important;
  border-bottom-left-radius: 4px !important;
}
.pt-call-chat-time {
  font-size: 0.7rem !important;
  color: rgba(255,255,255,0.3) !important;
  margin-top: 3px !important;
}
.pt-call-chat-composer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  flex-shrink: 0 !important;
}
.pt-call-chat-input {
  flex: 1 !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  padding: 9px 14px !important;
  font-size: 0.9rem !important;
  color: #fff !important;
  outline: none !important;
}
.pt-call-chat-input::placeholder { color: rgba(255,255,255,0.3) !important; }
.pt-call-chat-input:focus { border-color: rgba(90,158,124,0.5) !important; background: rgba(255,255,255,0.1) !important; }
.pt-call-chat-send {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #5a9e7c !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.pt-call-chat-send:hover { background: #4a8e6c !important; }
.pt-call-chat-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 29 !important;
  display: none !important;
}

/* ── Reconnecting overlay ── */
.pt-call-reconnect-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 40 !important;
}
.pt-call-reconnect-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  background: rgba(15,20,35,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  padding: 28px 36px !important;
  backdrop-filter: blur(12px) !important;
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.8) !important;
}
.pt-call-reconnect-spinner {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(90,158,124,0.2) !important;
  border-top-color: #5a9e7c !important;
  animation: ptCallSpin 0.8s linear infinite !important;
}
@keyframes ptCallSpin {
  to { transform: rotate(360deg); }
}

/* Mobile adjustments */
@media (max-width: 599px) {
  .pt-call-pip { width: 80px !important; height: 112px !important; bottom: 110px !important; }
  .pt-call-pip--shifted { right: 16px !important; bottom: calc(50vh + 8px) !important; }
  .pt-call-chat-panel { width: 100vw !important; top: 40% !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px 20px 0 0 !important; }
  .pt-call-chat-backdrop { display: block !important; }
  .pt-call-controls { bottom: 28px !important; gap: 6px !important; padding: 8px 14px !important; }
  .pt-call-ctrl-btn { width: 46px !important; height: 46px !important; font-size: 0.95rem !important; }
  .pt-call-ctrl-btn--end { width: 52px !important; height: 52px !important; }
}

/* ═══════════════════════════════════════════════════════
   SCREEN 7 — RATING PAGE  (.pt-rating-*)
   ═══════════════════════════════════════════════════════ */

.pt-rating-page {
  min-height: 100vh !important;
  padding: 0 0 100px !important;
  background: #f8fafc !important;
}
.pt-rating-wrap {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* Back link */
.pt-rating-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-decoration: none !important;
  padding: 20px 0 8px !important;
  transition: color 0.15s !important;
}
.pt-rating-back:hover { color: #5a9e7c !important; }

/* Psychologist hero card */
.pt-rating-psych-card {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 24px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
  margin-bottom: 16px !important;
}
.pt-rating-psych-avatar {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #5a9e7c, #4a8e6c) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(90,158,124,0.3) !important;
}
.pt-rating-psych-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.pt-rating-psych-info { flex: 1; min-width: 0; }
.pt-rating-psych-eyebrow {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #5a9e7c !important;
  margin: 0 0 4px !important;
}
.pt-rating-psych-name {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.pt-rating-psych-title {
  font-size: 0.83rem !important;
  color: #64748b !important;
  margin: 0 0 10px !important;
}
.pt-rating-psych-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.pt-rating-meta-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
}
.pt-rating-meta-chip i { color: #5a9e7c !important; font-size: 0.72rem !important; }

/* Form card */
.pt-rating-form-card {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
.pt-rating-form-header { margin-bottom: 28px !important; }
.pt-rating-form-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}
.pt-rating-form-sub {
  font-size: 0.88rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Stars */
.pt-rating-stars {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
.pt-rating-star {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 2.4rem !important;
  line-height: 1 !important;
  padding: 2px !important;
  color: #d1d5db !important;
  transition: color 0.15s, transform 0.15s !important;
}
.pt-rating-star:hover,
.pt-rating-star.is-filled { transform: scale(1.18) !important; }
.pt-rating-star.is-filled { color: #eab308 !important; }
.pt-rating-star:focus-visible { outline: 2px solid #5a9e7c; outline-offset: 2px; border-radius: 4px; }

/* Score label */
.pt-rating-score-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  margin-bottom: 24px !important;
  opacity: 0 !important;
  transform: translateY(4px) !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
.pt-rating-score-label.is-visible { opacity: 1 !important; transform: translateY(0) !important; }
.pt-rating-score-emoji { font-size: 1.4rem !important; line-height: 1 !important; }
.pt-rating-score-text {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

/* Comment field */
.pt-rating-field {
  position: relative !important;
  margin-bottom: 20px !important;
}
.pt-rating-label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 8px !important;
}
.pt-rating-label-opt {
  font-weight: 400 !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
}
.pt-rating-textarea {
  width: 100% !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 0.9rem !important;
  color: #1e293b !important;
  background: #f8fafc !important;
  resize: vertical !important;
  min-height: 100px !important;
  outline: none !important;
  transition: border-color 0.15s, background 0.15s !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.pt-rating-textarea:focus { border-color: #5a9e7c !important; background: #fff !important; }
.pt-rating-textarea::placeholder { color: #94a3b8 !important; }
.pt-rating-char-count {
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

/* Error msg */
.pt-rating-error-msg {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.875rem !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
}

/* Action buttons */
.pt-rating-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.pt-rating-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  padding: 11px 22px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s, transform 0.12s, opacity 0.15s !important;
}
.pt-rating-btn--primary {
  background: #5a9e7c !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(90,158,124,0.3) !important;
}
.pt-rating-btn--primary:hover { background: #4a8e6c !important; transform: translateY(-1px) !important; }
.pt-rating-btn--primary:active { transform: translateY(0) !important; }
.pt-rating-btn--primary:disabled { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; }
.pt-rating-btn--ghost {
  background: #f1f5f9 !important;
  color: #475569 !important;
}
.pt-rating-btn--ghost:hover { background: #e2e8f0 !important; color: #1e293b !important; }

/* Success state */
.pt-rating-success {
  text-align: center !important;
  padding: 48px 24px !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
  margin-top: 8px !important;
}
.pt-rating-success-icon {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5a9e7c, #4a8e6c) !important;
  color: #fff !important;
  font-size: 1.8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  box-shadow: 0 4px 16px rgba(90,158,124,0.35) !important;
  animation: ptRatingPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes ptRatingPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.pt-rating-success-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 10px !important;
}
.pt-rating-success-text {
  font-size: 0.93rem !important;
  color: #64748b !important;
  margin: 0 0 20px !important;
  line-height: 1.6 !important;
}
.pt-rating-success-stars {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 1.6rem !important;
  color: #eab308 !important;
  margin-bottom: 28px !important;
}
.pt-rating-success-stars .fa-star-o { color: #d1d5db !important; }
.pt-rating-success-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Skeleton */
.pt-rating-skel {
  border-radius: 20px !important;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%) !important;
  background-size: 200% 100% !important;
  animation: ptSkeleton 1.4s ease-in-out infinite !important;
  margin-bottom: 16px !important;
}
.pt-rating-skel--header { height: 120px !important; }
.pt-rating-skel--body   { height: 340px !important; }

/* Error fallback */
.pt-rating-error {
  text-align: center !important;
  padding: 48px 24px !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  margin-top: 8px !important;
}
.pt-rating-error i { font-size: 2.5rem !important; color: #f87171 !important; display: block; margin-bottom: 12px; }
.pt-rating-error p { color: #64748b !important; font-size: 0.9rem !important; margin: 0 0 14px !important; }
.pt-rating-error-link { color: #5a9e7c !important; font-weight: 600 !important; text-decoration: none !important; font-size: 0.9rem !important; }

@media (max-width: 480px) {
  .pt-rating-psych-card { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .pt-rating-psych-meta { justify-content: center !important; }
  .pt-rating-stars { gap: 4px !important; }
  .pt-rating-star { font-size: 2rem !important; }
  .pt-rating-actions { flex-direction: column !important; }
  .pt-rating-btn { justify-content: center !important; }
}

/* ═══════════════════════════════════════════════════════
   HEADER  (.pt-header)
   ═══════════════════════════════════════════════════════ */

.pt-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 800 !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

.pt-header__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  height: 64px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Logo */
.pt-header__logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: 32px !important;
  text-decoration: none !important;
}
.pt-header__logo img { height: 32px !important; width: auto !important; display: block !important; }

/* Desktop nav */
.pt-header__nav {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 !important;
}
.pt-header__nav-item {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  white-space: nowrap !important;
}
.pt-header__nav-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.pt-header__nav-item.is-active {
  background: rgba(90,158,124,0.12) !important;
  color: #5a9e7c !important;
  font-weight: 600 !important;
}

/* Right actions */
.pt-header__actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Icon buttons (chat, bell) */
.pt-header__icon-btn {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
}
.pt-header__icon-btn:hover { background: #f1f5f9 !important; color: #0f172a !important; }
.pt-header__icon-btn.active { color: #5a9e7c !important; }

.pt-header__badge {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 100px !important;
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3px !important;
  pointer-events: none !important;
  border: 2px solid #fff !important;
}

/* Avatar + profile dropdown */
.pt-header__profile { position: relative !important; }

.pt-header__avatar-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 10px 5px 5px !important;
  border-radius: 100px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  margin-left: 4px !important;
}
.pt-header__avatar-btn:hover {
  border-color: #5a9e7c !important;
  box-shadow: 0 0 0 3px rgba(90,158,124,0.1) !important;
}
.pt-header__avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5a9e7c, #4a8e6c) !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pt-header__username {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.pt-header__chevron {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  transition: transform 0.2s !important;
}

/* Dropdown */
.pt-header__dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 240px !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
  z-index: 900 !important;
  animation: ptDropIn 0.18s ease !important;
}
@keyframes ptDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pt-header__dropdown-user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
}
.pt-header__dropdown-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #5a9e7c, #4a8e6c) !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.pt-header__dropdown-name {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 !important;
}
.pt-header__dropdown-email {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 160px !important;
}
.pt-header__dropdown-divider {
  height: 1px !important;
  background: #f1f5f9 !important;
  margin: 2px 0 !important;
}
.pt-header__dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
}
.pt-header__dropdown-item i { width: 16px !important; color: #94a3b8 !important; }
.pt-header__dropdown-item:hover { background: #f8fafc !important; }
.pt-header__dropdown-item--danger { color: #ef4444 !important; }
.pt-header__dropdown-item--danger i { color: #ef4444 !important; }
.pt-header__dropdown-item--danger:hover { background: #fef2f2 !important; }

/* Auth buttons (guest) */
.pt-header__login-link {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  transition: background 0.15s !important;
}
.pt-header__login-link:hover { background: #f1f5f9 !important; }
.pt-header__register-btn {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: #5a9e7c !important;
  padding: 8px 18px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: background 0.15s !important;
}
.pt-header__register-btn:hover { background: #4a8e6c !important; }

/* Hamburger — mobile only */
.pt-header__hamburger {
  display: none !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  border: none !important;
  background: none !important;
  color: #374151 !important;
  font-size: 1.1rem !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Mobile drawer */
.pt-header__mobile-menu {
  display: none !important;
  flex-direction: column !important;
  background: #fff !important;
  border-top: 1px solid #f1f5f9 !important;
  padding: 8px 0 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}
.pt-header__mobile-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 20px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
}
.pt-header__mobile-item i { width: 18px !important; color: #94a3b8 !important; }
.pt-header__mobile-item:hover,
.pt-header__mobile-item.is-active { background: #f8fafc !important; }
.pt-header__mobile-item.is-active { color: #5a9e7c !important; font-weight: 600 !important; }
.pt-header__mobile-item.is-active i { color: #5a9e7c !important; }
.pt-header__mobile-item--danger { color: #ef4444 !important; }
.pt-header__mobile-item--danger i { color: #ef4444 !important; }
.pt-header__mobile-divider {
  height: 1px !important;
  background: #f1f5f9 !important;
  margin: 6px 0 !important;
}

/* ═══════════════════════════════════════════════════════
   BOTTOM NAV  (.pt-bottom-nav)
   ═══════════════════════════════════════════════════════ */

.pt-bottom-nav {
  display: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 800 !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  padding: 6px 0 max(8px, env(safe-area-inset-bottom)) !important;
  align-items: stretch !important;
  justify-content: space-around !important;
}

.pt-bottom-nav__item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 4px !important;
  text-decoration: none !important;
  color: #94a3b8 !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  transition: color 0.15s !important;
  border-radius: 0 !important;
  position: relative !important;
}
.pt-bottom-nav__item i {
  font-size: 1.25rem !important;
  line-height: 1 !important;
  transition: transform 0.2s, color 0.15s !important;
}
.pt-bottom-nav__item span { line-height: 1 !important; }

.pt-bottom-nav__item.is-active {
  color: #5a9e7c !important;
}
.pt-bottom-nav__item.is-active i {
  transform: translateY(-1px) !important;
}
.pt-bottom-nav__item.is-active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 25% !important;
  right: 25% !important;
  height: 2.5px !important;
  border-radius: 0 0 3px 3px !important;
  background: #5a9e7c !important;
}

/* Responsive breakpoints */
@media (max-width: 767px) {
  .pt-header__nav { display: none !important; }
  .pt-header__username { display: none !important; }
  .pt-header__hamburger { display: flex !important; }
  .pt-header__mobile-menu { display: flex !important; }
  .pt-bottom-nav { display: flex !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pt-header__nav-item { padding: 6px 10px !important; font-size: 0.85rem !important; }
  .pt-header__username { max-width: 80px !important; }
}

/* ════════════════════════════════════════════════════════
   PROFILE PAGE
   ════════════════════════════════════════════════════════ */

/* Layout */
.pt-profile-page {
  min-height: calc(100vh - 64px);
  padding: 24px 16px 120px;
  max-width: 1100px;
  margin: 0 auto;
}
.pt-profile-page__layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.pt-profile-page__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Sidebar */
.pt-profile-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-profile-sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #404943;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pt-profile-sidebar__item:hover { background: #ecefea; }
.pt-profile-sidebar__item.is-active {
  background: #d5e3fc;
  color: #21684a;
  font-weight: 600;
}
.pt-profile-sidebar__item .fa { font-size: 1.05rem; width: 20px; text-align: center; }
.pt-profile-sidebar__skeleton {
  height: 44px;
  border-radius: 12px;
  background: #e2e8f0;
  animation: ptSkeleton 1.4s ease-in-out infinite;
}
@media (max-width: 768px) {
  .pt-profile-sidebar { display: none; }
}

/* Section cards */
.pt-profile-section {
  background: #fff;
  border: 1px solid #bfc9c1;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  scroll-margin-top: 88px;
}
.pt-profile-section--skeleton {
  height: 200px;
  animation: ptSkeleton 1.4s ease-in-out infinite;
}
.pt-profile-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #21684a;
  margin: 0 0 20px;
}
.pt-profile-section__title--danger { color: #ba1a1a; }
.pt-profile-section__title .fa { font-size: 1.1rem; }
.pt-profile-section__hint {
  font-size: 0.82rem;
  color: #707972;
  font-style: italic;
  margin: 8px 0 0;
}

/* Profile Identity */
.pt-profile-identity {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.pt-profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.pt-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  border: 2px solid #abf2cb;
  background: #ecefea;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #21684a;
}
.pt-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pt-profile-avatar__edit {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #21684a;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform 0.15s;
}
.pt-profile-avatar__edit:hover { transform: scale(1.12); }
.pt-profile-identity__fields { flex: 1; }
.pt-profile-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 520px) {
  .pt-profile-identity { flex-direction: column; }
  .pt-profile-field-grid { grid-template-columns: 1fr; }
}
.pt-profile-field { display: flex; flex-direction: column; gap: 4px; }
.pt-profile-field__label {
  font-size: 0.8rem;
  color: #404943;
  font-weight: 500;
}
.pt-profile-field__input {
  width: 100%;
  background: #f1f5f9;
  border: 1px solid #bfc9c1;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.93rem;
  color: #191c1a;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.pt-profile-field__input:focus {
  border-color: #21684a;
  box-shadow: 0 0 0 3px rgba(33,104,74,.12);
}

/* Toggle */
.pt-toggle {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #e0e3df;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.pt-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform 0.2s;
}
.pt-toggle.is-on {
  background: #21684a;
}
.pt-toggle.is-on::after {
  transform: translateX(20px);
}

/* Privacy toggles */
.pt-profile-toggle-list { display: flex; flex-direction: column; }
.pt-profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(191,201,193,.3);
}
.pt-profile-toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.pt-profile-toggle-row:first-child { padding-top: 0; }
.pt-profile-toggle-row__label {
  font-size: 0.93rem;
  font-weight: 600;
  color: #191c1a;
  margin: 0 0 2px;
}
.pt-profile-toggle-row__desc {
  font-size: 0.82rem;
  color: #404943;
  margin: 0;
}

/* Contact */
.pt-profile-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 520px) { .pt-profile-contact-grid { grid-template-columns: 1fr; } }
.pt-profile-contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(191,201,193,.4);
  background: #f2f4f0;
}
.pt-profile-contact-card__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pt-profile-contact-card__icon {
  font-size: 1.2rem;
  color: #21684a;
}
.pt-profile-contact-card__type {
  font-size: 0.72rem;
  letter-spacing: .06em;
  color: rgba(64,73,67,.6);
  font-weight: 600;
  margin: 0 0 2px;
}
.pt-profile-contact-card__value {
  font-size: 0.93rem;
  font-weight: 600;
  color: #191c1a;
  margin: 0;
}
.pt-profile-contact-card__reveal {
  background: transparent;
  border: none;
  color: #21684a;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 1rem;
  transition: background 0.15s;
}
.pt-profile-contact-card__reveal:hover { background: rgba(171,242,203,.3); }
.pt-profile-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #404943;
  cursor: pointer;
  padding: 4px 0;
}
.pt-profile-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #21684a;
  cursor: pointer;
  flex-shrink: 0;
}

/* Video/Chat grid */
.pt-profile-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 520px) { .pt-profile-media-grid { grid-template-columns: 1fr; } }
.pt-profile-media-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: 12px;
  border: 1px solid rgba(191,201,193,.4);
  background: #f2f4f0;
  text-align: center;
}
.pt-profile-media-card__icon {
  font-size: 1.4rem;
  color: #21684a;
}
.pt-profile-media-card__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #191c1a;
  margin: 0;
}
.pt-profile-coming-soon {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(213,227,252,.15);
  border: 1px dashed #515f74;
  opacity: 0.85;
}
.pt-profile-coming-soon__icon {
  font-size: 1.3rem;
  color: #515f74;
  flex-shrink: 0;
}
.pt-profile-coming-soon__title {
  font-size: 0.93rem;
  font-weight: 600;
  margin: 0 0 2px;
}
.pt-profile-coming-soon__desc {
  font-size: 0.82rem;
  color: #404943;
  margin: 0;
}
.pt-profile-coming-soon__badge {
  margin-left: auto;
  flex-shrink: 0;
  background: #515f74;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* Notifications */
.pt-profile-notif-list { display: flex; flex-direction: column; gap: 4px; }
.pt-profile-notif-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.pt-profile-notif-row:hover { background: #f2f4f0; }
.pt-profile-notif-row.is-muted {
  background: #fff;
  border: 1px solid rgba(191,201,193,.4);
  margin-top: 8px;
}
.pt-profile-notif-row__icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(171,242,203,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #21684a;
  flex-shrink: 0;
  font-size: 1rem;
}
.pt-profile-notif-row.is-muted .pt-profile-notif-row__icon-wrap {
  background: #d5e3fc;
  color: #515f74;
}
.pt-profile-notif-row__text { flex: 1; }
.pt-profile-notif-row__title {
  font-size: 0.93rem;
  font-weight: 600;
  color: #191c1a;
  margin: 0 0 2px;
}
.pt-profile-notif-row__desc {
  font-size: 0.82rem;
  color: #404943;
  margin: 0;
}

/* Data Control */
.pt-profile-data-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 520px) { .pt-profile-data-btns { grid-template-columns: 1fr; } }
.pt-profile-data-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #bfc9c1;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  color: #191c1a;
  cursor: pointer;
  transition: background 0.15s;
}
.pt-profile-data-btn:hover { background: #f2f4f0; }
.pt-profile-data-btn__left { display: flex; align-items: center; gap: 10px; }
.pt-profile-data-btn .fa-angle-right { color: #707972; }

/* Danger zone */
.pt-profile-danger-zone {
  background: rgba(186,26,26,.06);
  border: 2px dashed rgba(186,26,26,.3);
  border-radius: 16px;
  padding: 24px;
}
.pt-profile-danger-zone__header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.pt-profile-danger-zone__icon-wrap {
  flex-shrink: 0;
  background: #ba1a1a;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.pt-profile-danger-zone__title {
  font-size: 1rem;
  font-weight: 700;
  color: #ba1a1a;
  margin: 0 0 6px;
}
.pt-profile-danger-zone__desc {
  font-size: 0.82rem;
  color: #404943;
  line-height: 1.6;
  margin: 0;
}
.pt-profile-danger-zone__btn {
  background: #ba1a1a;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 28px;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.pt-profile-danger-zone__btn:hover { opacity: 0.88; }
.pt-profile-danger-zone__btn:active { transform: scale(0.97); }

/* Sticky save bar */
.pt-profile-save-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  background: #fff;
  border-top: 1px solid #bfc9c1;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  padding: 14px 20px;
}
.pt-profile-save-bar.is-visible { transform: translateY(0); }
.pt-profile-save-bar__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pt-profile-save-bar__info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #21684a;
  font-size: 0.93rem;
  font-weight: 600;
}
.pt-profile-save-bar__info .fa { font-size: 1.05rem; }
.pt-profile-save-bar__actions { display: flex; gap: 12px; }
.pt-profile-save-bar__cancel {
  padding: 9px 20px;
  border: 1px solid #bfc9c1;
  border-radius: 10px;
  background: transparent;
  color: #404943;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pt-profile-save-bar__cancel:hover { background: #f2f4f0; }
.pt-profile-save-bar__cancel:disabled { opacity: 0.5; cursor: not-allowed; }
.pt-profile-save-bar__save {
  padding: 9px 24px;
  border: none;
  border-radius: 10px;
  background: #21684a;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(33,104,74,.3);
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pt-profile-save-bar__save:hover { opacity: 0.88; }
.pt-profile-save-bar__save:disabled { opacity: 0.6; cursor: not-allowed; }

.pt-confirm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.pt-confirm-dialog {
  background: #fff; border-radius: 16px;
  padding: 28px 24px 20px; max-width: 360px; width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.pt-confirm-dialog__msg {
  font-size: 1rem; margin-bottom: 20px; line-height: 1.5;
}
.pt-confirm-dialog__actions {
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ════════════════════════════════════════════════════════
   LANDING PAGE
   ════════════════════════════════════════════════════════ */

.pt-landing {
  min-height: 100vh;
  background: #fff;
  font-family: inherit;
}

/* Nav */
.pt-landing-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.pt-landing-nav__inner {
  max-width: 1100px; margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.pt-landing-nav__logo img { display: block; }
.pt-landing-nav__actions { display: flex; align-items: center; gap: 12px; }
.pt-landing-nav__link {
  color: #374151; font-weight: 500; font-size: 0.9rem;
  text-decoration: none; padding: 6px 10px; border-radius: 8px;
  transition: background 0.15s;
}
.pt-landing-nav__link:hover { background: #f1f5f1; color: var(--primary-color); }

/* Hero */
.pt-landing-hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 80px;
  text-align: center;
  background: linear-gradient(160deg, #f0faf5 0%, #fff 55%, #f5fff0 100%);
}
.pt-landing-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 700px 500px at 20% 0%, rgba(90,158,124,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 80% 100%, rgba(131,204,97,0.08) 0%, transparent 70%);
}
.pt-landing-hero__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 20px; }
.pt-landing-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(90,158,124,0.1); color: var(--primary-color);
  border: 1px solid rgba(90,158,124,0.25);
  border-radius: 100px; padding: 5px 14px; font-size: 0.82rem; font-weight: 600;
  margin-bottom: 24px;
}
.pt-landing-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900; line-height: 1.15;
  color: #0f172a; margin-bottom: 20px;
  letter-spacing: -0.8px !important;
}
.pt-landing-hero__accent { color: var(--primary-color); }
.pt-landing-hero__sub {
  font-size: 1.08rem; color: #475569; line-height: 1.7;
  margin-bottom: 36px;
}
.pt-landing-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.pt-landing-hero__note { font-size: 0.8rem; color: #94a3b8; }
.pt-landing-hero__note .fa { margin-right: 4px; }

/* Buttons */
.pt-landing-btn-primary {
  padding: 12px 28px !important; font-size: 1rem !important; font-weight: 700 !important;
  border-radius: 12px !important; min-width: 160px;
}
.pt-landing-btn-secondary {
  padding: 12px 28px !important; font-size: 1rem !important;
  border-radius: 12px !important; min-width: 120px;
}
.pt-landing-btn-lg {
  padding: 15px 36px !important; font-size: 1.05rem !important;
}

/* Stats bar */
.pt-landing-stats {
  background: var(--primary-color);
  padding: 36px 0;
}
.pt-landing-stats__grid {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 640px) {
  .pt-landing-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
.pt-landing-stat { text-align: center; color: #fff; }
.pt-landing-stat__value { font-size: 1.9rem; font-weight: 900; line-height: 1.1; }
.pt-landing-stat__label { font-size: 0.82rem; opacity: 0.82; margin-top: 4px; }

/* Sections */
.pt-landing-section { padding: 80px 0; }
.pt-landing-section--alt { background: #f8faf8; }
.pt-landing-section__head { text-align: center; margin-bottom: 52px; }
.pt-landing-section__title {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800; color: #0f172a; margin-bottom: 12px;
  letter-spacing: -0.4px !important;
}
.pt-landing-section__sub { font-size: 1rem; color: #64748b; }

/* Features grid */
.pt-landing-features {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 900px) { .pt-landing-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pt-landing-features { grid-template-columns: 1fr; } }

.pt-landing-feature {
  background: #fff;
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 20px; padding: 28px 24px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.pt-landing-feature:hover {
  box-shadow: 0 8px 32px rgba(90,158,124,0.12);
  transform: translateY(-3px);
}
.pt-landing-feature__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(90,158,124,0.10); color: var(--primary-color);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 16px;
}
.pt-landing-feature__title { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.pt-landing-feature__desc { font-size: 0.88rem; color: #64748b; line-height: 1.6; }

/* Steps */
.pt-landing-steps {
  max-width: 900px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  position: relative;
}
@media (max-width: 640px) { .pt-landing-steps { grid-template-columns: 1fr; gap: 24px; } }

.pt-landing-step { text-align: center; position: relative; }
.pt-landing-step__num {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary-color); color: #fff;
  font-size: 1.3rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 4px 16px rgba(90,158,124,0.30);
}
.pt-landing-step__title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.pt-landing-step__desc { font-size: 0.88rem; color: #64748b; line-height: 1.6; }

/* Reviews */
.pt-landing-reviews {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 860px) { .pt-landing-reviews { grid-template-columns: 1fr; max-width: 520px; } }

.pt-landing-review {
  background: #fff;
  border: 1px solid rgba(226,232,240,0.8);
  border-radius: 20px; padding: 28px 24px;
}
.pt-landing-review__stars { color: #f59e0b; font-size: 0.85rem; margin-bottom: 14px; letter-spacing: 2px; }
.pt-landing-review__text { font-size: 0.93rem; color: #374151; line-height: 1.65; margin-bottom: 20px; font-style: italic; }
.pt-landing-review__author { display: flex; align-items: center; gap: 12px; }
.pt-landing-review__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary-color); color: #fff;
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pt-landing-review__name { font-size: 0.88rem; font-weight: 700; color: #0f172a; }
.pt-landing-review__role { font-size: 0.78rem; color: #94a3b8; }

/* CTA section */
.pt-landing-cta {
  padding: 90px 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  text-align: center;
}
.pt-landing-cta__inner { max-width: 580px; margin: 0 auto; padding: 0 20px; }
.pt-landing-cta__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 900;
  color: #fff; margin-bottom: 14px; letter-spacing: -0.5px !important;
}
.pt-landing-cta__sub { font-size: 1rem; color: #94a3b8; margin-bottom: 36px; line-height: 1.6; }
.pt-landing-cta__note { margin-top: 18px; font-size: 0.85rem; color: #64748b; }
.pt-landing-cta__login { color: var(--primary-color); text-decoration: none; font-weight: 600; }
.pt-landing-cta__login:hover { text-decoration: underline; }

/* Footer */
.pt-landing-footer {
  background: #0f172a; border-top: 1px solid rgba(255,255,255,0.06);
  padding: 24px 0;
}
.pt-landing-footer__inner {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.pt-landing-footer__copy { font-size: 0.8rem; color: #64748b; }

/* ════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE
   ════════════════════════════════════════════════════════ */

.pt-notif-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 16px 100px;
}
.pt-notif-page__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.pt-notif-page__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #191c1a;
  margin: 0 0 2px;
}
.pt-notif-page__subtitle {
  font-size: 0.85rem;
  color: #707972;
  margin: 0;
}
.pt-notif-page__settings-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #21684a;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid #abf2cb;
  background: rgba(171,242,203,.15);
  transition: background 0.15s;
}
.pt-notif-page__settings-link:hover { background: rgba(171,242,203,.35); }

.pt-notif-list {
  background: #fff;
  border: 1px solid #bfc9c1;
  border-radius: 16px;
  overflow: hidden;
}

.pt-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #f2f4f0;
  transition: background 0.12s;
}
.pt-notif-row:last-child { border-bottom: none; }
.pt-notif-row:hover { background: #f7faf5; }
.pt-notif-row.is-failed { opacity: 0.6; }

.pt-notif-row__icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.pt-notif-row__body { flex: 1; min-width: 0; }
.pt-notif-row__title {
  font-size: 0.93rem;
  font-weight: 600;
  color: #191c1a;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pt-notif-row__badge {
  font-size: 0.7rem;
  font-weight: 700;
  background: #ffdad6;
  color: #ba1a1a;
  padding: 1px 8px;
  border-radius: 20px;
}
.pt-notif-row__desc {
  font-size: 0.83rem;
  color: #404943;
  margin: 0 0 4px;
  line-height: 1.5;
  white-space: pre-line;
}
.pt-notif-row__link {
  font-size: 0.82rem;
  color: #21684a;
  font-weight: 600;
  text-decoration: none;
}
.pt-notif-row__link:hover { text-decoration: underline; }
.pt-notif-row__time {
  font-size: 0.78rem;
  color: #707972;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* Skeleton */
.pt-notif-row--skeleton { pointer-events: none; }
.pt-notif-skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: #e2e8f0;
  animation: ptSkeleton 1.4s ease-in-out infinite;
}

/* Empty state */
.pt-notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px;
  gap: 8px;
}
.pt-notif-empty__icon {
  font-size: 2.8rem;
  color: #bfc9c1;
  margin-bottom: 8px;
}
.pt-notif-empty__title {
  font-size: 1rem;
  font-weight: 700;
  color: #191c1a;
  margin: 0;
}
.pt-notif-empty__desc {
  font-size: 0.85rem;
  color: #707972;
  margin: 0 0 16px;
  max-width: 300px;
  line-height: 1.6;
}
.pt-notif-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: #21684a;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pt-notif-empty__btn:hover { opacity: 0.88; color: #fff; }

/* Unread state */
.pt-notif-row--unread { background: #f0faf4; }
.pt-notif-row--unread .pt-notif-row__title { font-weight: 600; }
.pt-notif-row__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #21684a;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Clickable row */
.pt-notif-row--clickable { cursor: pointer; }
.pt-notif-row--clickable:hover { background: #eaf6ef; }

/* Mark all button */
.pt-notif-page__markall-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid #21684a;
  background: transparent;
  color: #21684a;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pt-notif-page__markall-btn:hover { background: #21684a; color: #fff; }
.pt-notif-page__markall-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Load more */
.pt-notif-loadmore {
  display: block;
  width: 100%;
  padding: 14px;
  text-align: center;
  background: none;
  border: none;
  border-top: 1px solid #e9f0eb;
  color: #21684a;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.pt-notif-loadmore:hover { background: #f0faf4; }
.pt-notif-loadmore:disabled { opacity: 0.6; cursor: default; }

/* Inline load-more error (one page failed; existing list stays) */
.pt-notif-loadmore-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-top: 1px solid #e9f0eb;
}
.pt-notif-loadmore-error span {
  font-size: 0.83rem;
  color: #dc2626;
}
.pt-notif-loadmore-error .pt-notif-loadmore {
  width: auto;
  padding: 6px 16px;
  border-top: none;
}

/* Inline alert */
.pt-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.pt-alert--warn {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
}

/* "Coming soon" inline tag for backend-pending controls */
.pt-profile-soon-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #fef3c7;
  color: #92400e;
  vertical-align: middle;
}
.pt-toggle.is-disabled,
.pt-profile-checkbox:disabled,
.pt-profile-field__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Select in settings */
.pt-select {
  padding: 7px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  background: #fff;
  color: #1e293b;
  cursor: pointer;
  outline: none;
}
.pt-select:focus { border-color: #21684a; }


/* ════════════════════════════════════════════════════════
   ERROR BOUNDARY
   ════════════════════════════════════════════════════════ */
.pt-error-boundary {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.pt-error-boundary__inner {
  text-align: center;
  max-width: 360px;
}
.pt-error-boundary__icon {
  font-size: 3rem;
  color: #d97706;
  margin-bottom: 16px;
  display: block;
}
.pt-error-boundary__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #191c1a;
  margin: 0 0 8px;
}
.pt-error-boundary__desc {
  font-size: 0.9rem;
  color: #707972;
  margin: 0 0 20px;
  line-height: 1.6;
}
.pt-error-boundary__btn {
  padding: 10px 24px;
  background: #21684a;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.15s;
}
.pt-error-boundary__btn:hover { opacity: 0.88; }

/* ════════════════════════════════════════════════════════
   PRE-CALL CHECK
   ════════════════════════════════════════════════════════ */
.pt-precall {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.pt-precall__card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid #bfc9c1;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.pt-precall__psych-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pt-precall__psych-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid #abf2cb;
}
.pt-precall__psych-avatar--initials {
  background: #ecefea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #21684a;
}
.pt-precall__psych-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #191c1a;
  margin: 0 0 2px;
}
.pt-precall__psych-sub {
  font-size: 0.8rem;
  color: #707972;
  margin: 0;
}
.pt-precall__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #191c1a;
  margin: 0 0 16px;
}
.pt-precall__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #1a1f2e;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-precall__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.pt-precall__no-cam {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #64748b;
}
.pt-precall__no-cam .fa {
  font-size: 2rem;
}
.pt-precall__no-cam p {
  font-size: 0.85rem;
  margin: 0;
}
.pt-precall__mic-pill {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}
.pt-precall__devices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.pt-precall__device {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e0e3df;
  background: #f7faf5;
}
.pt-precall__device .fa {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.pt-precall__device--ok { border-color: #abf2cb; }
.pt-precall__device--ok .fa { color: #21684a; }
.pt-precall__device--denied,
.pt-precall__device--unavailable { border-color: #ffdad6; }
.pt-precall__device--denied .fa,
.pt-precall__device--unavailable .fa { color: #ba1a1a; }
.pt-precall__device--checking .fa { color: #707972; }
.pt-precall__device-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #191c1a;
  margin: 0 0 2px;
}
.pt-precall__device-status {
  font-size: 0.78rem;
  color: #707972;
  margin: 0;
}
.pt-precall__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff8e6;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.83rem;
  color: #92400e;
  margin-bottom: 16px;
  line-height: 1.5;
}
.pt-precall__hint .fa { flex-shrink: 0; padding-top: 2px; }
.pt-precall__actions {
  display: flex;
  gap: 10px;
}
.pt-precall__cancel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border: 1px solid #bfc9c1;
  border-radius: 12px;
  color: #404943;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  transition: background 0.15s;
}
.pt-precall__cancel:hover { background: #f2f4f0; }
.pt-precall__join {
  flex: 1;
  padding: 12px;
  background: #21684a;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(33,104,74,.3);
  transition: opacity 0.15s;
}
.pt-precall__join:hover { opacity: 0.88; }
.pt-precall__join:disabled { opacity: 0.5; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════
   MOOD CHECK-IN WIDGET (home sidebar)
   ════════════════════════════════════════════════════════ */
.pt-home-sidebar-mood {}
.pt-home-sidebar-mood__row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 8px;
}
.pt-home-sidebar-mood__btn {
  flex: 1;
  font-size: 1.4rem;
  padding: 6px 2px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  line-height: 1;
}
.pt-home-sidebar-mood__btn:hover { transform: scale(1.2); background: #f2f4f0; }
.pt-home-sidebar-mood__btn.is-selected {
  border-color: #21684a;
  background: rgba(33,104,74,.08);
  transform: scale(1.15);
}
.pt-home-sidebar-mood__done {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #21684a;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 6px 0;
}
.pt-home-sidebar-mood__done .fa { font-size: 1.1rem; }

/* Countdown now/live badge */
.pt-home-next-action__countdown-now {
  font-size: 0.9rem;
  font-weight: 800;
  background: #ef4444;
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .06em;
  animation: ptCallPulse 1.2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════
   PROFILE SECURITY SECTION
   ════════════════════════════════════════════════════════ */
.pt-profile-security__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pt-profile-security__desc {
  font-size: 0.88rem;
  color: #404943;
  margin: 0;
  flex: 1;
  line-height: 1.5;
}
.pt-profile-security__start-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #21684a;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pt-profile-security__start-btn:hover { opacity: 0.88; }
.pt-profile-security__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pt-profile-security__step-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #707972;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0;
}
.pt-profile-security__msg {
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0;
}
.pt-profile-security__msg--ok { background: #d5f0e4; color: #145a32; }
.pt-profile-security__msg--err { background: #ffdad6; color: #93000a; }
.pt-profile-security__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}



/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL TOAST STACK
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-toast-stack {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.pt-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  animation: ptToastIn 0.25s ease;
  pointer-events: auto;
  white-space: nowrap;
}
.pt-toast--success { background: #21684a; color: #fff; }
.pt-toast--error   { background: #c0392b; color: #fff; }
.pt-toast--info    { background: #1a5276; color: #fff; }
@keyframes ptToastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   APPOINTMENTS SEARCH
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-appt-search {
  position: relative;
  margin-bottom: 12px;
}
.pt-appt-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.pt-appt-search__input {
  width: 100%;
  padding: 10px 40px 10px 38px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.9rem;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.pt-appt-search__input:focus { border-color: var(--primary-color); }
.pt-appt-search__clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.pt-appt-search__clear:hover { color: #475569; }

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════════ */
.pt-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: #94a3b8;
  text-align: center;
}
.pt-chat-empty .fa { font-size: 2rem; }
.pt-chat-empty p { margin: 0; font-size: 0.9rem; }

/* ══════════════════════════════════════════════════════════════════════════════
   LANDING PAGE — modern redesign styles
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── How it works ─────────────────────────────────────────────────────────── */
.lp-how { background: linear-gradient(160deg, #f0faf2 0%, #e8f5e9 100%); }
.lp-step-card {
  background: #fff;
  border-radius: 24px;
  padding: 44px 32px 36px;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 40px rgba(76,175,80,0.10);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
}
.lp-step-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(76,175,80,0.18);
}
.lp-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4caf50, #81c784);
  border-radius: 24px 24px 0 0;
}
.lp-step-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(76,175,80,0.30);
}
.lp-step-num {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.lp-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  color: #a5d6a7;
  font-size: 2rem;
}

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.lp-testimonials { background: #fff; }
.lp-testi-card {
  background: linear-gradient(145deg, #f8fffe, #f0faf2);
  border-radius: 24px;
  padding: 36px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1.5px solid #e8f5e9;
  position: relative;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s;
}
.lp-testi-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(76,175,80,0.13);
  border-color: #81c784;
}
.lp-testi-quote {
  font-size: 5rem;
  line-height: 0.6;
  color: #c8e6c9;
  font-family: Georgia, serif;
  font-weight: 900;
}
.lp-testi-text {
  flex: 1;
  color: #374151;
  line-height: 1.75;
  font-size: 1rem;
}
.lp-testi-stars { display: flex; gap: 4px; color: #f59e0b; }
.lp-testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid #e8f5e9;
}
.lp-testi-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #c8e6c9;
}
.lp-testi-name { font-weight: 700; font-size: 0.95rem; color: #111827; }
.lp-testi-role { color: #6b7280; font-size: 0.82rem; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.lp-faq { background: linear-gradient(160deg, #f0faf2 0%, #f8fffe 100%); }
.lp-faq-item {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 12px;
  border: 1.5px solid #e8f5e9;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-faq-item.open {
  border-color: #4caf50;
  box-shadow: 0 4px 24px rgba(76,175,80,0.12);
}
.lp-faq-btn {
  width: 100%; background: none; border: none;
  padding: 20px 28px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; font-size: 1rem; font-weight: 600;
  color: #111827; text-align: left; gap: 16px;
}
.lp-faq-btn:hover { background: #f8fffe; }
.lp-faq-chevron {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e8f5e9; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; color: #4caf50;
  transition: background 0.2s, transform 0.3s;
}
.lp-faq-item.open .lp-faq-chevron {
  background: #4caf50; color: #fff; transform: rotate(180deg);
}
.lp-faq-answer {
  padding: 0 28px 20px;
  color: #4b5563; line-height: 1.75;
  border-top: 1px solid #e8f5e9;
  padding-top: 16px;
}

/* ── Section title shared ─────────────────────────────────────────────────── */
.lp-section-badge {
  display: inline-block;
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  color: #fff; font-weight: 700; font-size: 0.78rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 18px; border-radius: 50px;
  margin-bottom: 16px;
}
.lp-section-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a;
  margin-bottom: 16px;
}
.lp-section-title .accent {
  background: linear-gradient(135deg, #2e7d32, #66bb6a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

/* ── Service cards ────────────────────────────────────────────────────── */
.lp-service-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  color: inherit;
}
.lp-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(76,175,80,0.18);
  color: inherit;
}
.lp-service-img {
  position: relative;
  overflow: hidden;
}
.lp-service-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.lp-service-card:hover .lp-service-img img {
  transform: scale(1.07);
}
.lp-service-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,60,15,0.75) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lp-service-card:hover .lp-service-overlay { opacity: 1; }
.lp-service-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #4caf50;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}
.lp-service-body {
  background: #fff;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp-service-body h5 {
  font-weight: 700;
  color: #0f172a;
  font-size: 1rem;
}
.lp-service-arrow {
  color: #4caf50;
  font-size: 0.9rem;
  transition: transform 0.2s;
}
.lp-service-card:hover .lp-service-arrow {
  transform: translateX(4px);
}

/* ── Stats section ────────────────────────────────────────────────────── */
.lp-stats-section {
  background: linear-gradient(135deg, #2e7d32 0%, #388e3c 50%, #1b5e20 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
}
.lp-stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/background/3.webp') center/cover no-repeat;
  opacity: 0.08;
}
.lp-stat-item {
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 1;
}
.lp-stat-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
}
.lp-stat-num {
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}
.lp-stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
  font-weight: 500;
}

/* ── Team cards ───────────────────────────────────────────────────────── */
.lp-team-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(0,0,0,0.09);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.lp-team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(76,175,80,0.16);
}
.lp-team-img-wrap {
  position: relative;
  overflow: hidden;
}
.lp-team-img-wrap img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.lp-team-card:hover .lp-team-img-wrap img {
  transform: scale(1.04);
}
.lp-team-body {
  background: #fff;
  padding: 18px 20px;
  text-align: center;
  border-top: 3px solid #4caf50;
}
.lp-team-body h4 {
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
  font-size: 1rem;
}
.lp-team-body p {
  color: #4caf50;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GAME JOURNEY — .gj-* component styles
   Dark space theme: bg #050816, purple #8B5CF6, gold #FACC15
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --gj-bg: #050816;
  --gj-bg2: #0d0d1a;
  --gj-panel: rgba(255,255,255,0.04);
  --gj-border: rgba(139,92,246,0.2);
  --gj-purple: #8B5CF6;
  --gj-purple-light: #a78bfa;
  --gj-gold: #FACC15;
  --gj-text: #e2e8f0;
  --gj-text-dim: #94a3b8;
  --gj-green: #22c55e;
  --gj-red: #ef4444;
  --gj-radius: 14px;
  --gj-radius-sm: 8px;
}

/* ── Skeleton loader ──────────────────────────────────────────────────── */
.gj-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: gj-shimmer 1.4s infinite;
  border-radius: var(--gj-radius-sm);
  width: 100%;
}
@keyframes gj-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Panel ────────────────────────────────────────────────────────────── */
.gj-panel {
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 20px;
  backdrop-filter: blur(12px);
}
.gj-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.gj-panel__title {
  color: var(--gj-text);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.gj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--gj-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
}
.gj-btn:active { transform: scale(0.97); }
.gj-btn:disabled { opacity: 0.45; pointer-events: none; }
.gj-btn--primary {
  background: var(--gj-purple);
  color: #fff;
  box-shadow: 0 4px 16px rgba(139,92,246,0.35);
}
.gj-btn--primary:hover { opacity: 0.88; box-shadow: 0 6px 20px rgba(139,92,246,0.45); }
.gj-btn--gold {
  background: var(--gj-gold);
  color: #1a1a2e;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(250,204,21,0.35);
}
.gj-btn--gold:hover { opacity: 0.88; }
.gj-btn--ghost {
  background: rgba(255,255,255,0.07);
  color: var(--gj-text);
  border: 1px solid var(--gj-border);
}
.gj-btn--ghost:hover { background: rgba(255,255,255,0.12); }
.gj-btn--danger {
  background: var(--gj-red);
  color: #fff;
}
.gj-btn--danger:hover { opacity: 0.88; }
.gj-btn--lg { padding: 14px 24px; font-size: 1rem; border-radius: 10px; }
.w-100 { width: 100%; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }

/* ── Progress bar ─────────────────────────────────────────────────────── */
.gj-progress-bar {
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
  height: 6px;
}
.gj-progress-bar--lg { height: 10px; border-radius: 999px; }
.gj-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gj-purple), var(--gj-purple-light));
  border-radius: 999px;
  transition: width 0.5s ease;
}

/* ── Error / empty ────────────────────────────────────────────────────── */
.gj-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  color: var(--gj-text-dim);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════════
   JOURNEY HOME PAGE
   ══════════════════════════════════════════════════════════════════════════════ */
.gj-home {
  padding: 16px;
  min-height: 100%;
}
.gj-home__grid {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1100px) {
  .gj-home__grid { grid-template-columns: 220px 1fr 240px; }
}
@media (max-width: 860px) {
  .gj-home__grid { grid-template-columns: 1fr; }
}

/* Bundle cards */
.gj-bundle-list { display: flex; flex-direction: column; gap: 10px; }
.gj-bundle-list__title {
  color: var(--gj-text-dim);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gj-bundle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--gj-radius-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}
.gj-bundle-card:hover,
.gj-bundle-card--current { border-color: var(--gj-purple); background: rgba(139,92,246,0.12); }
.gj-bundle-card--completed { border-color: rgba(34,197,94,0.3); }
.gj-bundle-card--locked { opacity: 0.5; cursor: not-allowed; }
.gj-bundle-card__icon { font-size: 1.3rem; }
.gj-bundle-card__name {
  flex: 1;
  color: var(--gj-text);
  font-size: 0.88rem;
  font-weight: 600;
}
.gj-bundle-card__badge {
  font-size: 0.75rem;
  background: var(--gj-purple);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
}

/* Star canvas */
.gj-canvas {
  min-height: 360px;
  background: radial-gradient(ellipse at center, rgba(139,92,246,0.1) 0%, transparent 70%);
  border-radius: var(--gj-radius);
  border: 1px solid var(--gj-border);
  position: relative;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gj-canvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.gj-canvas__title {
  color: var(--gj-text);
  font-weight: 700;
  font-size: 1.1rem;
}
.gj-canvas__subtitle { color: var(--gj-text-dim); font-size: 0.85rem; }
.gj-canvas__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--gj-text-dim);
}
.gj-daily-sun {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(250,204,21,0.1), rgba(250,204,21,0.05));
  border: 1px solid rgba(250,204,21,0.25);
  border-radius: var(--gj-radius);
  padding: 16px 20px;
  margin-bottom: 4px;
}
.gj-daily-sun__icon { font-size: 2.2rem; }
.gj-daily-sun__label {
  color: var(--gj-gold);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}
.gj-daily-sun__sub { color: var(--gj-text-dim); font-size: 0.8rem; }
.gj-episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.gj-planet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border-radius: var(--gj-radius);
  border: 1px solid var(--gj-border);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.gj-planet:hover { border-color: var(--gj-purple); box-shadow: 0 0 16px rgba(139,92,246,0.2); }
.gj-planet--current { border-color: var(--gj-purple); box-shadow: 0 0 20px rgba(139,92,246,0.3); }
.gj-planet--completed { border-color: rgba(34,197,94,0.4); }
.gj-planet--locked { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.gj-planet__icon { font-size: 2.4rem; }
.gj-planet__name { color: var(--gj-text); font-size: 0.82rem; font-weight: 600; text-align: center; }
.gj-planet__status { font-size: 0.7rem; color: var(--gj-text-dim); }

/* Right sidebar */
.gj-user-card {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.04));
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 20px;
  text-align: center;
}
.gj-user-card__avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--gj-purple);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
  box-shadow: 0 0 20px rgba(139,92,246,0.4);
}
.gj-user-card__name { color: var(--gj-text); font-weight: 700; font-size: 1rem; }
.gj-user-card__stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}
.gj-user-card__stat { color: var(--gj-text-dim); font-size: 0.85rem; }

.gj-daily-cta {
  background: linear-gradient(135deg, rgba(250,204,21,0.12), rgba(250,204,21,0.04));
  border: 1px solid rgba(250,204,21,0.2);
  border-radius: var(--gj-radius);
  padding: 16px;
  text-align: center;
}
.gj-daily-cta__label { color: var(--gj-gold); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.5px; margin-bottom: 8px; }
.gj-daily-cta__time { color: var(--gj-text-dim); font-size: 0.8rem; margin-bottom: 12px; }

.gj-journey-progress { }
.gj-journey-progress__title { color: var(--gj-text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-weight: 700; }
.gj-jp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gj-jp-row__name { color: var(--gj-text); font-size: 0.82rem; flex: 1; }
.gj-jp-row__pct { color: var(--gj-text-dim); font-size: 0.78rem; min-width: 32px; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 2 — JOURNEY / EPISODE / QUIZ LIST PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.gj-episode-page {
  padding: 16px 20px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Episode tabs ──────────────────────────────────────────────────────────── */
.gj-ep-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.gj-ep-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--gj-border);
  background: rgba(255,255,255,0.04);
  color: var(--gj-text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.gj-ep-tab:hover:not(.gj-ep-tab--locked) { border-color: var(--gj-purple); color: var(--gj-text); }
.gj-ep-tab--active {
  border-color: var(--gj-purple);
  background: rgba(139,92,246,.2);
  color: var(--gj-purple-light);
  box-shadow: 0 0 12px rgba(139,92,246,.25);
}
.gj-ep-tab--completed .gj-ep-tab__icon { color: #22c55e; }
.gj-ep-tab--locked { opacity: .45; cursor: not-allowed; }
.gj-ep-tab__icon { font-size: .8rem; }
.gj-ep-tab__label { }
.gj-ep-tab__prog { color: var(--gj-text-dim); font-size: .75rem; opacity: .75; }

/* ── 2-column grid ────────────────────────────────────────────────────────── */
.gj-episode__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
}
.gj-episode__map-panel { display: flex; flex-direction: column; gap: 0; }
.gj-episode__side { position: sticky; top: 76px; }
.gj-episode__side-inner {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(139,92,246,.3) transparent;
}

/* ── Map canvas ───────────────────────────────────────────────────────────── */
.gj-map-canvas {
  min-height: 400px;
  border-radius: 28px;
  border: 1px solid var(--gj-border);
  background:
    radial-gradient(ellipse at 30% 50%, rgba(139,92,246,.1) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(88,28,135,.12) 0%, transparent 55%),
    linear-gradient(180deg, #090920 0%, #050816 100%);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.gj-map-canvas__loading { padding: 20px; }
.gj-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  position: relative;
  z-index: 2;
}
.gj-map-header__title {
  color: var(--gj-text);
  font-weight: 800;
  font-size: 1.2rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.gj-map-header__prog {
  color: var(--gj-text-dim);
  font-size: .82rem;
  background: rgba(0,0,0,.35);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ── Map stage (node area) ───────────────────────────────────────────────── */
.gj-map-stage {
  position: relative;
  height: 300px;
  flex: 1;
}
.gj-map-path-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gj-path-line {
  stroke: rgba(139,92,246,.35);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}
.gj-path-line--completed {
  stroke: rgba(250,204,21,.55);
  stroke-dasharray: 4 4;
}
.gj-path-line--locked {
  stroke: rgba(100,116,139,.25);
  stroke-dasharray: 3 8;
}

/* ── Quiz nodes (absolutely positioned) ──────────────────────────────────── */
.gj-qnode {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.gj-qnode__orb {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.15);
  background: rgba(15,18,40,.85);
  color: var(--gj-text-dim);
  font-weight: 700;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.gj-qnode:hover .gj-qnode__orb {
  border-color: rgba(139,92,246,.6);
  background: rgba(139,92,246,.15);
  transform: scale(1.08);
}
.gj-qnode--current .gj-qnode__orb {
  border-color: var(--gj-purple);
  background: rgba(139,92,246,.22);
  color: var(--gj-purple-light);
  box-shadow: 0 0 0 4px rgba(139,92,246,.2), 0 0 24px rgba(139,92,246,.5);
  animation: gj-node-pulse 2.4s ease-in-out infinite;
}
.gj-qnode--completed .gj-qnode__orb {
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.12);
  color: #22c55e;
}
.gj-qnode--locked .gj-qnode__orb {
  opacity: .4;
  cursor: not-allowed;
}
.gj-qnode--selected .gj-qnode__orb {
  box-shadow: 0 0 0 3px var(--gj-purple), 0 0 28px rgba(139,92,246,.55) !important;
  border-color: var(--gj-purple) !important;
}
@keyframes gj-node-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(139,92,246,.2), 0 0 24px rgba(139,92,246,.5); }
  50%       { box-shadow: 0 0 0 8px rgba(139,92,246,.12), 0 0 36px rgba(139,92,246,.65); }
}

/* ── Episode summary ──────────────────────────────────────────────────────── */
.gj-ep-summary {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gj-ep-summary__title { color: var(--gj-text); font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; }
.gj-ep-summary__prog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: var(--gj-text-dim);
}
.gj-ep-summary__pct { color: var(--gj-purple-light); font-weight: 700; }

/* ── Selected quiz detail ─────────────────────────────────────────────────── */
.gj-sel-quiz {
  border-radius: 16px;
  padding: 16px;
  border: 1.5px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.gj-sel-quiz--active {
  border-color: rgba(139,92,246,.4);
  background: rgba(139,92,246,.06);
}
.gj-sel-quiz--done {
  border-color: rgba(34,197,94,.3);
  background: rgba(34,197,94,.05);
}
.gj-sel-quiz--locked {
  opacity: .75;
}
.gj-sel-quiz__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--gj-text-dim);
  margin-bottom: 6px;
}
.gj-sel-quiz--active .gj-sel-quiz__label { color: var(--gj-purple-light); }
.gj-sel-quiz--done .gj-sel-quiz__label { color: #22c55e; }
.gj-sel-quiz__title { color: var(--gj-text); font-weight: 700; font-size: 1.05rem; }
.gj-sel-quiz__reason { color: #f87171; font-size: .82rem; margin-top: 6px; }
.gj-sel-quiz__meta {
  display: flex;
  gap: 12px;
  font-size: .82rem;
  color: var(--gj-text-dim);
  margin-top: 6px;
}
.gj-sel-quiz__reward { color: var(--gj-gold); font-size: .85rem; margin-top: 6px; }

/* ── Next quiz shortcut ───────────────────────────────────────────────────── */
.gj-next-quiz {
  background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(139,92,246,.04));
  border: 1.5px solid rgba(139,92,246,.35);
  border-radius: 16px;
  padding: 14px 16px;
}
.gj-next-quiz__label {
  color: var(--gj-text-dim);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 4px;
  font-weight: 700;
}
.gj-next-quiz__num { color: var(--gj-text); font-weight: 700; font-size: 1rem; }
.gj-next-quiz__reward { color: var(--gj-gold); font-size: .85rem; margin-top: 4px; }

/* ── Quiz list ────────────────────────────────────────────────────────────── */
.gj-quiz-list { }
.gj-quiz-list__title {
  color: var(--gj-text-dim);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 6px;
  font-weight: 700;
}
.gj-quiz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
  color: var(--gj-text);
  font-size: .88rem;
}
.gj-quiz-row:hover:not(.gj-quiz-row--locked) { background: rgba(255,255,255,.06); }
.gj-quiz-row--completed .gj-quiz-row__icon { color: #22c55e; }
.gj-quiz-row--locked { opacity: .4; cursor: not-allowed; pointer-events: none; }
.gj-quiz-row--selected { background: rgba(139,92,246,.12); }
.gj-quiz-row__icon { width: 20px; text-align: center; color: var(--gj-text-dim); flex-shrink: 0; }
.gj-quiz-row__num { flex: 1; font-weight: 600; }
.gj-quiz-row__meta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.gj-quiz-row__coin { color: var(--gj-gold); font-size: .78rem; }

/* ── Episode rewards ──────────────────────────────────────────────────────── */
.gj-ep-rewards {
  background: rgba(250,204,21,.05);
  border: 1px solid rgba(250,204,21,.2);
  border-radius: 14px;
  padding: 14px 16px;
}
.gj-ep-rewards__title {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--gj-gold);
  font-weight: 700;
  margin-bottom: 10px;
}
.gj-ep-rewards__row {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--gj-text-dim);
  padding: 3px 0;
}
.gj-ep-rewards__row--total {
  color: var(--gj-gold);
  font-weight: 700;
  border-top: 1px solid rgba(250,204,21,.15);
  margin-top: 6px;
  padding-top: 8px;
}

/* ── Episode complete ─────────────────────────────────────────────────────── */
.gj-ep-complete {
  text-align: center;
  padding: 20px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gj-ep-complete__icon { font-size: 2.8rem; margin-bottom: 8px; }
.gj-ep-complete__title { color: var(--gj-text); font-weight: 800; font-size: 1.15rem; margin-bottom: 4px; }
.gj-ep-complete__sub { color: var(--gj-text-dim); font-size: .85rem; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .gj-episode__grid { grid-template-columns: 1fr; }
  .gj-episode__side { position: static; }
  .gj-episode__side-inner { max-height: none; }
  .gj-map-stage { height: 260px; }
}
@media (max-width: 599px) {
  .gj-episode-page { padding: 10px 12px 32px; }
  .gj-ep-tab__prog { display: none; }
  .gj-map-stage { height: 220px; }
  .gj-qnode__orb { width: 42px; height: 42px; font-size: .85rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   QUIZ PLAY PAGE
   ══════════════════════════════════════════════════════════════════════════════ */
.gj-quiz-play {
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.gj-quiz-skeleton { padding: 24px; }

/* Progress bar */
.gj-quiz-progress {
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 0;
  overflow: hidden;
}
.gj-quiz-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gj-purple), var(--gj-gold));
  transition: width 0.4s ease;
}

.gj-quiz-content {
  flex: 1;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Question card */
.gj-question-card {
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 24px;
}
.gj-question-card__label {
  color: var(--gj-text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  font-weight: 700;
}
.gj-question-card__img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: var(--gj-radius-sm);
  margin-bottom: 14px;
}
.gj-question-card__text {
  color: var(--gj-text);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
}

/* Feedback banner */
.gj-feedback {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 20px;
  border-radius: var(--gj-radius-sm);
}
.gj-feedback--correct { background: rgba(34,197,94,0.15); color: var(--gj-green); border: 1px solid rgba(34,197,94,0.3); }
.gj-feedback--wrong { background: rgba(239,68,68,0.15); color: var(--gj-red); border: 1px solid rgba(239,68,68,0.3); }

/* Answers */
.gj-answers { display: flex; flex-direction: column; gap: 10px; }
.gj-answer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--gj-radius-sm);
  border: 1px solid var(--gj-border);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  text-align: left;
  color: var(--gj-text);
}
.gj-answer:hover:not(:disabled) { border-color: var(--gj-purple); background: rgba(139,92,246,0.1); }
.gj-answer--selected { border-color: var(--gj-purple); background: rgba(139,92,246,0.2); }
.gj-answer--correct { border-color: var(--gj-green); background: rgba(34,197,94,0.15); }
.gj-answer--wrong { border-color: var(--gj-red); background: rgba(239,68,68,0.15); }
.gj-answer:disabled { opacity: 0.65; cursor: not-allowed; }
.gj-answer__badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
  color: var(--gj-purple-light);
}
.gj-answer--selected .gj-answer__badge { background: var(--gj-purple); color: #fff; }
.gj-answer--correct .gj-answer__badge { background: var(--gj-green); color: #fff; }
.gj-answer--wrong .gj-answer__badge { background: var(--gj-red); color: #fff; }
.gj-answer__text { font-size: 0.95rem; font-weight: 500; line-height: 1.4; }

/* Quiz actions */
.gj-quiz-actions { margin-top: auto; padding-top: 8px; }

/* Exit modal */
.gj-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gj-modal {
  background: #1a1a2e;
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 28px;
  max-width: 380px;
  width: 100%;
}
.gj-modal__title { color: var(--gj-text); font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; }
.gj-modal__body { color: var(--gj-text-dim); font-size: 0.9rem; margin-bottom: 20px; }
.gj-modal__actions { display: flex; gap: 10px; }

/* ══════════════════════════════════════════════════════════════════════════════
   RESULT PAGE
   ══════════════════════════════════════════════════════════════════════════════ */
.gj-result {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 32px 20px;
}
.gj-result__card {
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 40px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.gj-result__icon { font-size: 3.5rem; margin-bottom: 12px; }
.gj-result__title { color: var(--gj-text); font-weight: 800; font-size: 1.5rem; margin-bottom: 24px; }
.gj-result__stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}
.gj-result__stat { }
.gj-result__stat-value { color: var(--gj-text); font-weight: 800; font-size: 1.8rem; }
.gj-result__stat-label { color: var(--gj-text-dim); font-size: 0.82rem; margin-top: 4px; }
.gj-result__bonus {
  background: linear-gradient(135deg, rgba(250,204,21,0.12), rgba(250,204,21,0.04));
  border: 1px solid rgba(250,204,21,0.25);
  border-radius: var(--gj-radius-sm);
  color: var(--gj-gold);
  font-weight: 600;
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}
.gj-result__actions { display: flex; flex-direction: column; gap: 10px; }

/* ══════════════════════════════════════════════════════════════════════════════
   QUIZ PLAY PAGE v2  (.gj-qplay__)
   ══════════════════════════════════════════════════════════════════════════════ */
.gj-qplay {
  position: relative;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.gj-qplay__bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: scale(1.06);
  z-index: 0;
}
.gj-qplay__overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 22, 0.78);
  z-index: 1;
}

/* Subheader */
.gj-qplay__subheader {
  position: sticky;
  top: 60px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(8, 10, 28, 0.92);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(10px);
}
.gj-qplay__exit-btn {
  background: none;
  border: none;
  color: var(--gj-text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.gj-qplay__exit-btn:hover { color: var(--gj-text); background: rgba(255,255,255,0.07); }
.gj-qplay__subheader-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gj-qplay__quiz-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gj-purple-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gj-qplay__prog-wrap {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.gj-qplay__prog-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.gj-qplay__prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gj-purple), #C084FC);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.gj-qplay__prog-text {
  font-size: 0.7rem;
  color: var(--gj-text-dim);
}
.gj-qplay__reward {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gj-gold);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Content */
.gj-qplay__content {
  position: relative;
  z-index: 5;
  flex: 1;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Question card */
.gj-qplay__qcard {
  background: rgba(10, 15, 35, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 28px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  padding: 36px 32px;
  text-align: center;
}
.gj-qplay__qcard-label {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gj-purple-light);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}
.gj-qplay__qcard-img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 16px;
}
.gj-qplay__qcard-text {
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--gj-text);
  line-height: 1.25;
}

/* Answers */
.gj-qplay__answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gj-qplay__ans {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 16px 22px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(10, 15, 35, 0.84);
  cursor: pointer;
  text-align: left;
  color: var(--gj-text);
  width: 100%;
  transition: border-color 0.13s, background 0.13s, box-shadow 0.13s;
}
.gj-qplay__ans:hover:not(:disabled) {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.08);
}
.gj-qplay__ans--selected {
  border-color: #A855F7;
  background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(168,85,247,0.12));
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.45);
}
.gj-qplay__ans--correct {
  border-color: var(--gj-green);
  background: rgba(34, 197, 94, 0.15);
  box-shadow: 0 0 28px rgba(34, 197, 94, 0.35);
}
.gj-qplay__ans--wrong {
  border-color: var(--gj-red);
  background: rgba(239, 68, 68, 0.15);
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.35);
}
.gj-qplay__ans:disabled { cursor: not-allowed; opacity: 0.7; }

.gj-qplay__ans-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  flex-shrink: 0;
  color: #fff;
  transition: background 0.13s, border-color 0.13s;
}
.gj-qplay__ans--selected .gj-qplay__ans-badge { background: var(--gj-purple); border-color: var(--gj-purple); }
.gj-qplay__ans--correct .gj-qplay__ans-badge { background: var(--gj-green); border-color: var(--gj-green); }
.gj-qplay__ans--wrong .gj-qplay__ans-badge { background: var(--gj-red); border-color: var(--gj-red); }

.gj-qplay__ans-text { font-size: 1rem; font-weight: 600; line-height: 1.4; flex: 1; }
.gj-qplay__ans-icon { font-size: 1.4rem; font-weight: 800; flex-shrink: 0; }

/* Feedback */
.gj-qplay__feedback {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 20px;
  border-radius: 16px;
}
.gj-qplay__feedback--correct {
  background: rgba(34, 197, 94, 0.15);
  color: var(--gj-green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.gj-qplay__feedback--wrong {
  background: rgba(239, 68, 68, 0.15);
  color: var(--gj-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Submit error toast */
.gj-qplay__submit-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--gj-red);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}

/* Submit button */
.gj-qplay__actions { margin-top: 4px; }
.gj-qplay__submit-btn {
  width: 100%;
  min-height: 82px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 22px;
}

/* Completing overlay */
.gj-qplay__completing {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.gj-qplay__completing-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(139, 92, 246, 0.2);
  border-top-color: var(--gj-purple);
  border-radius: 50%;
  animation: gj-spin 0.8s linear infinite;
}
@keyframes gj-spin { to { transform: rotate(360deg); } }
.gj-qplay__completing-text { color: var(--gj-text-dim); font-size: 1.1rem; }

/* Mobile */
@media (max-width: 767px) {
  .gj-qplay__subheader { padding: 8px 14px; gap: 8px; }
  .gj-qplay__exit-btn { padding: 4px 8px; font-size: 0.8rem; }
  .gj-qplay__content { padding: 20px 14px 100px; gap: 12px; }
  .gj-qplay__qcard { padding: 24px 18px; border-radius: 20px; }
  .gj-qplay__qcard-text { font-size: clamp(1.1rem, 5vw, 1.4rem); }
  .gj-qplay__ans { min-height: 72px; padding: 12px 14px; gap: 12px; border-radius: 18px; }
  .gj-qplay__ans-badge { width: 44px; height: 44px; font-size: 1rem; }
  .gj-qplay__ans-text { font-size: 0.9rem; }
  .gj-qplay__actions { position: sticky; bottom: 16px; }
  .gj-qplay__submit-btn { min-height: 66px; font-size: 1rem; border-radius: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROFILE PAGE
   ══════════════════════════════════════════════════════════════════════════════ */
.gj-profile { padding: 16px; }
.gj-profile__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 700px) {
  .gj-profile__grid { grid-template-columns: 1fr; }
}
.gj-user-hero { text-align: center; margin-bottom: 20px; }
.gj-user-hero__avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--gj-purple);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 0 28px rgba(139,92,246,0.5);
}
.gj-user-hero__name { color: var(--gj-text); font-weight: 800; font-size: 1.2rem; margin-bottom: 10px; }
.gj-user-hero__stats { display: flex; justify-content: center; gap: 14px; color: var(--gj-text-dim); font-size: 0.9rem; }

.gj-sub-card {
  border-radius: var(--gj-radius-sm);
  border: 1px solid var(--gj-border);
  padding: 14px;
  margin-top: 16px;
  text-align: center;
}
.gj-sub-card--active { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.08); }
.gj-sub-card__title { color: var(--gj-text); font-weight: 700; font-size: 0.9rem; }
.gj-sub-card__sub { color: var(--gj-text-dim); font-size: 0.8rem; margin-top: 4px; }

.gj-equipped { margin-bottom: 16px; }
.gj-equipped__title { color: var(--gj-text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 700; }
.gj-equipped__row { display: flex; gap: 8px; }
.gj-equipped__slot {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius-sm);
  padding: 6px 12px;
  color: var(--gj-text-dim);
  font-size: 0.78rem;
}

.gj-inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.gj-inv-card {
  border-radius: var(--gj-radius-sm);
  border: 1px solid var(--gj-border);
  background: rgba(255,255,255,0.04);
  overflow: hidden;
  text-align: center;
  transition: border-color 0.15s;
}
.gj-inv-card--owned { border-color: var(--gj-purple); }
.gj-inv-card__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.gj-inv-card__placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  background: rgba(255,255,255,0.04);
}
.gj-inv-card__name { color: var(--gj-text); font-size: 0.75rem; font-weight: 600; padding: 6px 4px 4px; }
.gj-inv-card__price { color: var(--gj-gold); font-size: 0.72rem; padding-bottom: 6px; }

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 1 — GAME DASHBOARD (Star Journey Home)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard container & grid ─────────────────────────────────────────── */
.gj-dashboard {
  padding: 16px 20px 32px;
  min-height: 100%;
}
.gj-dashboard__grid {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  grid-template-areas: "left center right";
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}
.gj-left-panel   { grid-area: left; }
.gj-center-panel { grid-area: center; }
.gj-right-panel  { grid-area: right; display: flex; flex-direction: column; gap: 14px; }
.gj-panel__sub   { color: var(--gj-text-dim); font-size: 0.78rem; margin-top: 2px; }

/* ── Bundle cards ───────────────────────────────────────────────────────── */
.gj-bc-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; flex: 1; }
.gj-bc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
  width: 100%;
}
.gj-bc:hover { border-color: var(--gj-purple); background: rgba(139,92,246,0.1); }
.gj-bc--selected {
  border-color: var(--gj-purple) !important;
  background: rgba(139,92,246,0.14) !important;
  box-shadow: 0 0 16px rgba(139,92,246,0.2);
}
.gj-bc--current   { border-color: rgba(139,92,246,0.45); }
.gj-bc--completed { border-color: rgba(34,197,94,0.35); }
.gj-bc--locked    { opacity: 0.6; }
.gj-bc__icon { font-size: 1.2rem; width: 24px; text-align: center; flex-shrink: 0; color: var(--gj-purple-light); }
.gj-bc--completed .gj-bc__icon { color: var(--gj-green); }
.gj-bc--locked .gj-bc__icon    { color: var(--gj-text-dim); }
.gj-bc__body  { flex: 1; min-width: 0; }
.gj-bc__title { color: var(--gj-text); font-size: 0.88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gj-bc__sub   { color: var(--gj-text-dim); font-size: 0.75rem; margin-top: 2px; }
.gj-bc__ends  { color: var(--gj-gold); font-size: 0.72rem; margin-top: 2px; }
.gj-bc__badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gj-bc__badge--current   { background: rgba(139,92,246,0.25); color: var(--gj-purple-light); }
.gj-bc__badge--completed { background: rgba(34,197,94,0.2);   color: var(--gj-green); }
.gj-bc__badge--locked    { background: rgba(239,68,68,0.2);   color: #fca5a5; }
.gj-bc__badge--free      { background: rgba(255,255,255,0.1); color: var(--gj-text-dim); }

/* ── Selected bundle summary ─────────────────────────────────────────────── */
.gj-sel-bundle { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--gj-border); }
.gj-sel-bundle__name { color: var(--gj-text); font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.gj-sel-bundle__row  { display: flex; gap: 12px; flex-wrap: wrap; color: var(--gj-text-dim); font-size: 0.78rem; margin-bottom: 6px; }
.gj-sel-bundle__ends { color: var(--gj-gold); font-size: 0.78rem; margin-bottom: 4px; }

/* ── Star Journey Canvas ─────────────────────────────────────────────────── */
.gj-center-canvas--skeleton { min-height: 520px; }
.gj-star-canvas {
  border-radius: 28px;
  border: 1px solid var(--gj-border);
  background:
    radial-gradient(ellipse at 20% 30%, rgba(139,92,246,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(88,28,220,0.10) 0%, transparent 50%),
    linear-gradient(180deg, #09091f 0%, #050816 100%);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.gj-title-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gj-title-pill__text  { color: var(--gj-text); font-weight: 700; font-size: 1.05rem; }
.gj-title-pill__badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.gj-title-pill__badge--current { background: rgba(139,92,246,0.25); color: var(--gj-purple-light); }
.gj-title-pill__badge--done    { background: rgba(34,197,94,0.2);   color: var(--gj-green); }
.gj-title-pill__ends { color: var(--gj-gold); font-size: 0.78rem; margin-left: auto; }

.gj-canvas-area { position: relative; width: 100%; height: 500px; overflow: hidden; }

/* Orbit SVG */
.gj-orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.gj-orbit-line {
  stroke: rgba(168,85,247,0.28);
  stroke-width: 0.8;
  stroke-dasharray: 5 7;
  fill: none;
  animation: gj-orbit-glow 4s ease-in-out infinite;
}
.gj-orbit-line--locked { stroke: rgba(255,255,255,0.1); }
@keyframes gj-orbit-glow {
  0%, 100% { stroke-opacity: 0.28; }
  50%       { stroke-opacity: 0.52; }
}

/* Sun wrapper */
.gj-sun-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* ── Daily Quiz Sun ──────────────────────────────────────────────────────── */
.gj-sun {
  position: relative;
  width: 164px;
  height: 164px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(circle at 38% 32%, #fde68a, #fbbf24 40%, #d97706 80%);
  box-shadow: 0 0 0 4px rgba(251,191,36,0.25), 0 0 40px rgba(251,191,36,0.55), 0 0 80px rgba(251,191,36,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
.gj-sun:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px rgba(251,191,36,0.35), 0 0 54px rgba(251,191,36,0.7), 0 0 100px rgba(251,191,36,0.35);
}
.gj-sun:active { transform: scale(0.97); }
.gj-sun--played {
  background: radial-gradient(circle at 38% 32%, #c0c8d8, #7b8da6 40%, #4a5568 80%);
  box-shadow: 0 0 0 4px rgba(148,163,184,0.2), 0 0 36px rgba(148,163,184,0.35);
}
.gj-sun--played:hover { box-shadow: 0 0 0 4px rgba(148,163,184,0.3), 0 0 48px rgba(148,163,184,0.45); }

.gj-sun__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(251,191,36,0.45);
  animation: gj-sun-ring 3s ease-out infinite;
  pointer-events: none;
}
.gj-sun__ring--2 { animation-delay: 1.5s; }
.gj-sun--played .gj-sun__ring { border-color: rgba(148,163,184,0.35); }
@keyframes gj-sun-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

.gj-sun__core   { display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; z-index: 1; }
.gj-sun__emoji  { font-size: 2.2rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.gj-sun__label  { color: #1a1a2e; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.5px; }
.gj-sun__status { color: rgba(26,26,46,0.72); font-size: 0.7rem; font-weight: 600; }
.gj-sun--played .gj-sun__label  { color: #e2e8f0; }
.gj-sun--played .gj-sun__status { color: rgba(226,232,240,0.65); }

/* ── Episode Planets ─────────────────────────────────────────────────────── */
.gj-ep-planet {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.gj-ep-planet:disabled { cursor: not-allowed; }
.gj-ep-planet__orb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  position: relative;
  box-shadow: inset -4px -4px 12px rgba(0,0,0,0.4), 0 6px 24px rgba(0,0,0,0.4);
  transition: transform .2s, box-shadow .2s;
  overflow: hidden;
}
.gj-ep-planet:not(.gj-ep-planet--locked):hover .gj-ep-planet__orb { transform: scale(1.12); }
.gj-ep-planet--current .gj-ep-planet__orb {
  box-shadow: inset -4px -4px 12px rgba(0,0,0,0.4), 0 0 0 3px var(--gj-purple), 0 0 22px rgba(139,92,246,0.6);
  animation: gj-planet-pulse 2.5s ease-in-out infinite;
}
.gj-ep-planet--completed .gj-ep-planet__orb {
  box-shadow: inset -4px -4px 12px rgba(0,0,0,0.4), 0 0 0 2.5px rgba(34,197,94,0.6), 0 0 16px rgba(34,197,94,0.35);
}
.gj-ep-planet--locked .gj-ep-planet__orb {
  filter: brightness(0.4) saturate(0.3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
@keyframes gj-planet-pulse {
  0%, 100% { box-shadow: inset -4px -4px 12px rgba(0,0,0,0.4), 0 0 0 3px var(--gj-purple), 0 0 22px rgba(139,92,246,0.5); }
  50%       { box-shadow: inset -4px -4px 12px rgba(0,0,0,0.4), 0 0 0 3px var(--gj-purple), 0 0 36px rgba(139,92,246,0.75); }
}
.gj-ep-planet__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: rgba(0,0,0,0.28);
  border-radius: 50%;
}
.gj-ep-planet__overlay--check { color: var(--gj-green); font-size: 1.6rem; font-weight: 900; background: rgba(0,0,0,0.2); }
.gj-ep-planet__info   { text-align: center; pointer-events: none; }
.gj-ep-planet__name   { color: var(--gj-text); font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,0.9); white-space: nowrap; }
.gj-ep-planet__pct    { color: var(--gj-text-dim); font-size: 0.68rem; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }

.gj-canvas-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.gj-canvas-empty   { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gj-text-dim); font-size: 0.9rem; z-index: 2; }

/* ── Right panel: User card ──────────────────────────────────────────────── */
.gj-upc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.04));
  border: 1px solid var(--gj-border);
  border-radius: 18px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.gj-upc:hover { border-color: var(--gj-purple); background: rgba(139,92,246,0.16); }
.gj-upc__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gj-purple); color: #fff;
  font-size: 1.4rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  box-shadow: 0 0 18px rgba(139,92,246,0.45);
}
.gj-upc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gj-upc__body  { flex: 1; min-width: 0; }
.gj-upc__name  { color: var(--gj-text); font-weight: 700; font-size: 0.95rem; }
.gj-upc__level { color: var(--gj-purple-light); font-size: 0.75rem; margin-top: 1px; }
.gj-upc__stats { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; color: var(--gj-text-dim); font-size: 0.78rem; }

/* Daily Quiz CTA card (overrides old) */
.gj-daily-cta {
  padding: 16px;
  background: linear-gradient(135deg, rgba(250,204,21,0.1), rgba(250,204,21,0.03));
  border: 1px solid rgba(250,204,21,0.22);
  border-radius: 18px;
}
.gj-daily-cta--done  { background: rgba(255,255,255,0.04); border-color: var(--gj-border); }
.gj-daily-cta__head  { display: flex; align-items: flex-start; gap: 10px; }
.gj-daily-cta__icon  { font-size: 1.6rem; line-height: 1; }
.gj-daily-cta__title { color: var(--gj-text); font-weight: 700; font-size: 0.92rem; }
.gj-daily-cta__sub   { color: var(--gj-text-dim); font-size: 0.78rem; margin-top: 2px; }
.gj-daily-cta__meta  { display: flex; gap: 12px; margin-top: 10px; color: var(--gj-text-dim); font-size: 0.8rem; flex-wrap: wrap; }

/* Leaderboard preview */
.gj-lb-preview {
  padding: 16px;
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: 18px;
}
.gj-lb-preview__head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gj-lb-preview__title { color: var(--gj-text); font-weight: 700; font-size: 0.88rem; }
.gj-lb-entries        { display: flex; flex-direction: column; gap: 6px; }
.gj-lb-entry          { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); }
.gj-lb-entry--1       { background: rgba(250,204,21,0.09); }
.gj-lb-entry--2       { background: rgba(203,213,225,0.06); }
.gj-lb-entry--3       { background: rgba(234,179,8,0.06); }
.gj-lb-entry--me      { background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.25); }
.gj-lb-entry__rank    { font-size: 0.75rem; font-weight: 700; min-width: 28px; color: var(--gj-text-dim); }
.gj-lb-entry--1 .gj-lb-entry__rank { color: var(--gj-gold); }
.gj-lb-entry--2 .gj-lb-entry__rank { color: #cbd5e1; }
.gj-lb-entry--3 .gj-lb-entry__rank { color: #d97706; }
.gj-lb-entry--me .gj-lb-entry__rank { color: var(--gj-purple-light); }
.gj-lb-entry__name    { flex: 1; color: var(--gj-text); font-size: 0.82rem; font-weight: 600; }
.gj-lb-entry__pts     { color: var(--gj-text-dim); font-size: 0.78rem; }
.gj-lb-sep            { text-align: center; color: var(--gj-text-dim); font-size: 0.75rem; letter-spacing: 2px; padding: 2px 0; }
.gj-lb-preview__empty { color: var(--gj-text-dim); font-size: 0.82rem; text-align: center; }

/* Journey progress card */
.gj-progress-card {
  padding: 16px;
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: 18px;
}
.gj-progress-card__head { color: var(--gj-text); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.5px; margin-bottom: 12px; }
.gj-ep-prog-list { display: flex; flex-direction: column; gap: 6px; }
.gj-ep-prog {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 5px;
  column-gap: 8px;
  row-gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background .12s;
  width: 100%;
  text-align: left;
}
.gj-ep-prog:hover:not(:disabled) { background: rgba(255,255,255,0.05); }
.gj-ep-prog--locked { opacity: 0.45; cursor: not-allowed; }
.gj-ep-prog__name  { color: var(--gj-text); font-size: 0.82rem; font-weight: 600; }
.gj-ep-prog__count { color: var(--gj-text-dim); font-size: 0.75rem; }
.gj-ep-prog__bar   { grid-column: 1 / -1; height: 5px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; }
.gj-ep-prog__fill  { height: 100%; background: linear-gradient(90deg, var(--gj-purple), var(--gj-purple-light)); border-radius: 999px; transition: width .5s ease; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .gj-dashboard__grid {
    grid-template-columns: 1fr 280px;
    grid-template-areas: "left left" "center right";
  }
  .gj-left-panel .gj-bc-list { flex-direction: row; flex-wrap: wrap; }
  .gj-left-panel .gj-bc { flex: 1; min-width: 180px; }
  .gj-left-panel .gj-sel-bundle { display: none; }
}
@media (max-width: 767px) {
  .gj-dashboard { padding: 10px 12px 24px; }
  .gj-dashboard__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "center" "right" "left";
    gap: 12px;
  }
  .gj-left-panel .gj-sel-bundle { display: block; }
  .gj-canvas-area { height: 380px; }
  .gj-sun { width: 130px; height: 130px; }
  .gj-sun__emoji { font-size: 1.8rem; }
  .gj-ep-planet__orb { width: 58px; height: 58px; }
}
@media (max-width: 480px) {
  .gj-canvas-area { height: 320px; }
  .gj-sun { width: 110px; height: 110px; }
  .gj-ep-planet__orb { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DAILY QUIZ PLAY PAGE (.gj-quiz-page)
   ══════════════════════════════════════════════════════════════════════════════ */

.gj-quiz-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gj-quiz-page--error {
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #e2e8f0;
}

/* Header */
.gj-qp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gj-qp-meta { display: flex; align-items: center; gap: 8px; }
.gj-qp-badge {
  background: rgba(250,204,21,.15);
  color: #facc15;
  border: 1px solid rgba(250,204,21,.3);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
}
.gj-qp-date { color: #94a3b8; font-size: .8rem; }
.gj-qp-counter { color: #cbd5e1; font-size: .88rem; font-weight: 600; }
.gj-qp-timer {
  font-size: 1rem;
  font-weight: 700;
  color: #a78bfa;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 8px;
  padding: 4px 12px;
  font-variant-numeric: tabular-nums;
}
.gj-qp-timer--urgent { color: #f87171; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.3); }

/* Question card */
.gj-q-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 24px 20px;
  margin-bottom: 20px;
}
.gj-q-card__media {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 16px;
}
.gj-q-card__text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.55;
}

/* Options */
.gj-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.gj-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: background .18s, border-color .18s, transform .12s;
  color: #e2e8f0;
}
.gj-option:hover:not(:disabled) {
  background: rgba(139,92,246,.12);
  border-color: rgba(139,92,246,.4);
}
.gj-option--selected {
  background: rgba(139,92,246,.2) !important;
  border-color: #8b5cf6 !important;
}
.gj-option:disabled { cursor: not-allowed; opacity: .6; }
.gj-option__label {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(139,92,246,.25);
  color: #a78bfa;
  font-weight: 700;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gj-option--selected .gj-option__label { background: #8b5cf6; color: #fff; }
.gj-option__text { font-size: .95rem; line-height: 1.45; }

/* Actions */
.gj-qp-actions { margin-top: auto; padding-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════════════
   DAILY RESULT PAGE (.gj-result-page)
   ══════════════════════════════════════════════════════════════════════════════ */

.gj-result-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.gj-result-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 36px 28px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}
.gj-result-card__hero { margin-bottom: 28px; }
.gj-result-card__medal { font-size: 3.5rem; margin-bottom: 8px; line-height: 1; }
.gj-result-card__title { font-size: 1.5rem; font-weight: 700; color: #f1f5f9; margin-bottom: 4px; }
.gj-result-card__date { font-size: .85rem; color: #94a3b8; }

.gj-result-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.gj-result-stat {
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 12px;
  padding: 14px 20px;
  min-width: 90px;
}
.gj-result-stat__val { font-size: 1.4rem; font-weight: 800; color: #a78bfa; }
.gj-result-stat__lbl { font-size: .75rem; color: #94a3b8; margin-top: 2px; }

.gj-result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.gj-result-actions .gj-btn { min-width: 140px; }

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 4 — JOURNEY RESULT (.gj-rj-*)
   ══════════════════════════════════════════════════════════════════════════════ */
.gj-rj-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
.gj-rj-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .gj-rj-grid { grid-template-columns: 1fr; }
}

/* Hero card */
.gj-rj-hero {
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 44px 36px;
  text-align: center;
}
.gj-rj-hero__medal { font-size: 4rem; line-height: 1; margin-bottom: 12px; }
.gj-rj-hero__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gj-text);
  margin-bottom: 24px;
}
.gj-rj-hero__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.gj-rj-hero__score-num {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 900;
  color: var(--gj-text);
  line-height: 1;
}
.gj-rj-hero__score-sep { font-size: 2rem; color: var(--gj-text-dim); }
.gj-rj-hero__score-total { font-size: 2.2rem; font-weight: 700; color: var(--gj-text-dim); }
.gj-rj-hero__score-label { color: var(--gj-text-dim); font-size: 0.9rem; margin-bottom: 20px; }

.gj-rj-hero__acc-wrap { margin-bottom: 20px; }
.gj-rj-hero__acc-bar {
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.gj-rj-hero__acc-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gj-purple), #C084FC);
  border-radius: 99px;
}
.gj-rj-hero__acc-pct { color: var(--gj-text-dim); font-size: 0.85rem; }

.gj-rj-hero__coin {
  display: inline-block;
  background: linear-gradient(135deg, rgba(250,204,21,0.15), rgba(245,158,11,0.08));
  border: 1px solid rgba(250,204,21,0.3);
  border-radius: 99px;
  padding: 10px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gj-gold);
  margin-bottom: 12px;
}
.gj-rj-hero__bonus {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 12px;
  padding: 10px 16px;
  color: var(--gj-green);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 8px;
}

/* Side panel */
.gj-rj-side { display: flex; flex-direction: column; gap: 16px; }
.gj-rj-card {
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 20px 22px;
}
.gj-rj-card--gold { border-color: rgba(250,204,21,0.25); }
.gj-rj-card__title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gj-text-dim);
  margin-bottom: 14px;
}
.gj-rj-stats {
  display: flex;
  gap: 12px;
  justify-content: space-around;
}
.gj-rj-stat { text-align: center; }
.gj-rj-stat__val { font-size: 1.6rem; font-weight: 800; color: var(--gj-text); }
.gj-rj-stat__val--green { color: var(--gj-green); }
.gj-rj-stat__val--red { color: var(--gj-red); }
.gj-rj-stat__lbl { font-size: 0.75rem; color: var(--gj-text-dim); margin-top: 2px; }

.gj-rj-coin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gj-rj-coin-row__earned { font-size: 1.2rem; font-weight: 700; color: var(--gj-gold); }
.gj-rj-coin-row__balance { font-size: 0.82rem; color: var(--gj-text-dim); }

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 4 — DAILY RESULT + LEADERBOARD (.gj-rd-*)
   ══════════════════════════════════════════════════════════════════════════════ */
.gj-rd-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 0 48px;
}

/* Tabs */
.gj-rd-tabs {
  display: flex;
  border-bottom: 1px solid var(--gj-border);
  margin-bottom: 28px;
}
.gj-rd-tab {
  padding: 14px 24px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gj-text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.13s, border-color 0.13s;
}
.gj-rd-tab:hover { color: var(--gj-text); }
.gj-rd-tab--active { color: var(--gj-purple-light); border-bottom-color: var(--gj-purple); }

/* Result tab */
.gj-rd-result { padding: 0 24px; }
.gj-rd-hero {
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 20px;
}
.gj-rd-hero__medal { font-size: 3.5rem; line-height: 1; margin-bottom: 8px; }
.gj-rd-hero__title { font-size: 1.3rem; font-weight: 700; color: var(--gj-text); margin-bottom: 4px; }
.gj-rd-hero__date { font-size: 0.82rem; color: var(--gj-text-dim); margin-bottom: 20px; }

.gj-rd-hero__rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}
.gj-rd-hero__rank-num {
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 900;
  color: var(--gj-gold);
  line-height: 1;
  text-shadow: 0 0 40px rgba(250,204,21,0.4);
}
.gj-rd-hero__rank-lbl { font-size: 0.85rem; color: var(--gj-text-dim); font-weight: 600; }

.gj-rd-hero__stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.gj-rd-hero__stat { text-align: center; }
.gj-rd-hero__stat-val { font-size: 1.5rem; font-weight: 800; color: var(--gj-text); }
.gj-rd-hero__stat-val--purple { color: var(--gj-purple-light); }
.gj-rd-hero__stat-val--gold { color: var(--gj-gold); }
.gj-rd-hero__stat-lbl { font-size: 0.75rem; color: var(--gj-text-dim); }

.gj-rd-hero__bar-wrap { margin-top: 8px; }
.gj-rd-hero__bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
}
.gj-rd-hero__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gj-purple), #C084FC);
  border-radius: 99px;
}

.gj-rd-result-actions { display: flex; flex-direction: column; gap: 10px; }

/* Leaderboard tab */
.gj-rd-lb { padding: 0 24px; }

.gj-rd-lb-scopes {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.gj-rd-lb-scope {
  padding: 6px 18px;
  border-radius: 99px;
  border: 1px solid var(--gj-border);
  background: transparent;
  color: var(--gj-text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.gj-rd-lb-scope--active {
  background: rgba(139,92,246,0.2);
  border-color: var(--gj-purple);
  color: var(--gj-purple-light);
}
.gj-rd-lb-scope--locked { opacity: 0.45; cursor: not-allowed; }

.gj-rd-lb-loading { text-align: center; padding: 40px 0; }

/* Podium */
.gj-rd-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 20px;
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
}
.gj-rd-podium__slot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px; }
.gj-rd-podium__name { font-size: 0.8rem; font-weight: 700; color: var(--gj-text); text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gj-rd-podium__pts { font-size: 0.72rem; color: var(--gj-text-dim); }
.gj-rd-podium__bar {
  width: 72px;
  background: rgba(139,92,246,0.2);
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 10px 10px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
}
.gj-rd-podium__slot:nth-child(2) .gj-rd-podium__bar {
  background: linear-gradient(180deg, rgba(250,204,21,0.25), rgba(250,204,21,0.08));
  border-color: rgba(250,204,21,0.4);
}
.gj-rd-podium__slot:nth-child(1) .gj-rd-podium__bar {
  background: rgba(148,163,184,0.15);
  border-color: rgba(148,163,184,0.3);
}
.gj-rd-podium__slot:nth-child(3) .gj-rd-podium__bar {
  background: rgba(180,83,9,0.15);
  border-color: rgba(180,83,9,0.3);
}
.gj-rd-podium__medal { font-size: 1.4rem; }
.gj-rd-podium__rank { font-size: 0.7rem; color: var(--gj-text-dim); font-weight: 700; }

/* Leaderboard table */
.gj-rd-lb-table { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.gj-rd-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
  transition: background 0.1s;
}
.gj-rd-lb-row:hover { background: rgba(255,255,255,0.04); }
.gj-rd-lb-row--me {
  background: rgba(139,92,246,0.12);
  border-color: rgba(168,85,247,0.3);
  box-shadow: 0 0 20px rgba(139,92,246,0.15);
}
.gj-rd-lb-row__rank {
  width: 40px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gj-text-dim);
  flex-shrink: 0;
}
.gj-rd-lb-row__name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gj-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gj-rd-lb-row--me .gj-rd-lb-row__name { color: var(--gj-purple-light); }
.gj-rd-lb-row__you {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--gj-purple);
  color: #fff;
  border-radius: 99px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gj-rd-lb-row__pts {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gj-text);
}
.gj-rd-lb-row--me .gj-rd-lb-row__pts { color: var(--gj-gold); }

/* Streak card */
.gj-rd-streak {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.gj-rd-streak__icon { font-size: 2rem; flex-shrink: 0; }
.gj-rd-streak__val { font-size: 1rem; font-weight: 700; color: var(--gj-text); }
.gj-rd-streak__sub { font-size: 0.8rem; color: var(--gj-text-dim); margin-top: 2px; }

/* Locked scope message */
.gj-rd-lb-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}
.gj-rd-lb-locked__icon { font-size: 2.5rem; }
.gj-rd-lb-locked__msg { color: var(--gj-text-dim); font-size: 0.95rem; }

/* Around me */
.gj-rd-lb-around-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gj-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding: 0 4px;
}
.gj-rd-lb-aroundme-btn {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed rgba(139, 92, 246, 0.35);
  border-radius: 12px;
  background: transparent;
  color: var(--gj-purple-light);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.gj-rd-lb-aroundme-btn:hover {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.5);
}

/* Mobile */
@media (max-width: 767px) {
  .gj-rd-result, .gj-rd-lb { padding: 0 16px; }
  .gj-rd-hero { padding: 28px 20px; }
  .gj-rd-podium { padding: 14px; gap: 8px; }
  .gj-rd-podium__slot { min-width: 60px; }
  .gj-rd-podium__bar { width: 56px; }
  .gj-rj-page { padding: 20px 14px 48px; }
  .gj-rj-hero { padding: 28px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 2 — EPISODE TOPBAR + BUNDLE SWITCHER + PREMIUM MODAL
   ══════════════════════════════════════════════════════════════════════════════ */

/* Top bar */
.gj-episode-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gj-episode-topbar__back {
  color: var(--gj-text-dim);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.gj-episode-topbar__back:hover { color: var(--gj-text); }

/* Bundle mini-switcher */
.gj-bs { position: relative; }
.gj-bs__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid var(--gj-border);
  border-radius: 12px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--gj-text);
  font-size: .84rem;
  transition: border-color .15s, background .15s;
}
.gj-bs__trigger:hover { border-color: var(--gj-purple); background: rgba(139,92,246,.08); }
.gj-bs__label { color: var(--gj-text-dim); font-size: .75rem; }
.gj-bs__name { font-weight: 700; }
.gj-bs__arrow { color: var(--gj-text-dim); font-size: .75rem; transition: transform .2s; }
.gj-bs__arrow--open { transform: rotate(180deg); }

.gj-bs__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: rgba(12,14,35,.97);
  border: 1.5px solid rgba(139,92,246,.3);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  overflow: hidden;
  z-index: 300;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.gj-bs__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gj-text-dim);
  font-size: .85rem;
  text-align: left;
  transition: background .12s;
}
.gj-bs__item:hover { background: rgba(139,92,246,.12); color: var(--gj-text); }
.gj-bs__item--active { color: var(--gj-purple-light); background: rgba(139,92,246,.1); }
.gj-bs__item--premium { opacity: .6; }
.gj-bs__item-icon { width: 16px; flex-shrink: 0; }
.gj-bs__item-title { flex: 1; font-weight: 600; }
.gj-bs__item-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.gj-bs__item-badge--active { background: rgba(139,92,246,.25); color: var(--gj-purple-light); }
.gj-bs__item-badge--done  { background: rgba(34,197,94,.18); color: #22c55e; }
.gj-bs__item-badge--premium { background: rgba(250,204,21,.18); color: var(--gj-gold); }
.gj-bs__item-badge--free  { background: rgba(255,255,255,.08); color: var(--gj-text-dim); }

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 2 — TOPBAR BUNDLE TITLE + EMPTY STATE + MOBILE BOTTOM SHEET
   ══════════════════════════════════════════════════════════════════════════════ */

/* Topbar center bundle title */
.gj-episode-topbar__center {
  flex: 1;
  text-align: center;
}
.gj-episode-topbar__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gj-text);
  line-height: 1.2;
}
.gj-episode-topbar__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 3px;
}
.gj-episode-topbar__badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(139,92,246,.22);
  color: var(--gj-purple-light);
}
.gj-episode-topbar__badge--done {
  background: rgba(34,197,94,.18);
  color: #22c55e;
}
.gj-episode-topbar__ends {
  font-size: .75rem;
  color: var(--gj-gold);
}

/* No episodes empty state */
.gj-episode-empty {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.gj-episode-empty__icon { font-size: 3rem; }
.gj-episode-empty__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gj-text);
}
.gj-episode-empty__body { color: var(--gj-text-dim); font-size: .9rem; }

/* Mobile sticky bottom bar — hidden on desktop */
.gj-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(10,12,30,.96);
  border-top: 1px solid rgba(139,92,246,.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 16px;
  align-items: center;
  gap: 12px;
}
.gj-mobile-bar__info { flex: 1; min-width: 0; }
.gj-mobile-bar__title {
  font-weight: 700;
  font-size: .9rem;
  color: var(--gj-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gj-mobile-bar__prog { font-size: .75rem; color: var(--gj-text-dim); margin-top: 2px; }

/* Bottom sheet overlay */
.gj-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: flex-end;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gj-sheet {
  width: 100%;
  max-height: 80vh;
  background: rgba(10,12,32,.98);
  border-top: 1.5px solid rgba(139,92,246,.35);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  animation: gj-sheet-up .28s ease;
}
@keyframes gj-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.gj-sheet__handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.gj-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
  flex-shrink: 0;
}
.gj-sheet__title { font-weight: 800; font-size: 1rem; color: var(--gj-text); }
.gj-sheet__close {
  background: rgba(255,255,255,.08);
  border: none;
  color: var(--gj-text-dim);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.gj-sheet__body {
  padding: 8px 20px 32px;
  overflow-y: auto;
  flex: 1;
}

/* Show mobile UI only on small screens */
@media (max-width: 767px) {
  .gj-mobile-bar { display: flex; }
  .gj-episode__side { display: none; }
  .gj-episode-page { padding-bottom: 80px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 5 — Profile / Shop / Cosmetics Hub  (.gj-hub-*)
   ══════════════════════════════════════════════════════════════════════════════ */

.gj-hub {
  padding: 16px;
  min-height: 100%;
  position: relative;
}

/* 3-column grid */
.gj-hub__grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 1279px) {
  .gj-hub__grid {
    grid-template-columns: 260px 1fr;
  }
  .gj-hub__right { display: none; }
}
@media (max-width: 767px) {
  .gj-hub__grid {
    grid-template-columns: 1fr;
  }
  .gj-hub__right { display: block; }
}

/* Column wrappers */
.gj-hub__left,
.gj-hub__center,
.gj-hub__right { min-width: 0; }

/* Panel — reuse .gj-panel but with slightly more padding for hub */
.gj-hub-panel {
  background: var(--gj-panel);
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 20px;
  backdrop-filter: blur(12px);
}

/* Section title */
.gj-hub-section-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gj-text);
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}

/* ── Avatar composite ─────────────────────────────────────────────────────── */
.gj-hub-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--gj-purple);
  overflow: hidden;
  margin: 0 auto 12px;
  box-shadow: 0 0 20px rgba(139,92,246,0.35);
}
.gj-hub-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gj-hub-avatar__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--gj-text);
  background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(167,139,250,0.2));
}

/* ── Identity ─────────────────────────────────────────────────────────────── */
.gj-hub-identity {
  text-align: center;
  margin-bottom: 16px;
}
.gj-hub-identity__name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gj-text);
}
.gj-hub-identity__level {
  font-size: 0.8rem;
  color: var(--gj-text-dim);
  margin-top: 2px;
}

/* ── Stats ────────────────────────────────────────────────────────────────── */
.gj-hub-stats {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--gj-radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.gj-hub-stats__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
}
.gj-hub-stats__row:last-child { border-bottom: none; }
.gj-hub-stats__label { color: var(--gj-text-dim); }
.gj-hub-stats__val { color: var(--gj-text); font-weight: 600; }

/* ── Premium mini card (left panel) ──────────────────────────────────────── */
.gj-hub-mini-prem {
  background: rgba(250,204,21,0.08);
  border: 1px solid rgba(250,204,21,0.2);
  border-radius: var(--gj-radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.gj-hub-mini-prem--active {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.25);
}
.gj-hub-mini-prem__title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gj-gold);
}
.gj-hub-mini-prem--active .gj-hub-mini-prem__title { color: #4ade80; }
.gj-hub-mini-prem__sub { font-size: 0.78rem; color: var(--gj-text-dim); margin-top: 3px; }

/* ── Settings shortcuts ───────────────────────────────────────────────────── */
.gj-hub-settings { margin-bottom: 14px; }
.gj-hub-settings__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gj-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.gj-hub-settings__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--gj-radius-sm);
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: var(--gj-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.gj-hub-settings__row:hover { background: rgba(255,255,255,0.07); }
.gj-hub-settings__arrow { color: var(--gj-text-dim); }

/* ── Equipped cosmetics ───────────────────────────────────────────────────── */
.gj-hub-equipped {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.gj-hub-equipped__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--gj-radius-sm);
  padding: 10px 6px;
  text-align: center;
}
.gj-hub-equipped__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}
.gj-hub-equipped__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: rgba(139,92,246,0.12);
  border-radius: 6px;
}
.gj-hub-equipped__name {
  font-size: 0.7rem;
  color: var(--gj-text-dim);
  line-height: 1.2;
  word-break: break-word;
}
.gj-hub-equipped__badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34,197,94,0.12);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ── Inventory tabs ───────────────────────────────────────────────────────── */
.gj-hub-inv-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gj-hub-inv-tab {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gj-text-dim);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.15s;
}
.gj-hub-inv-tab--active {
  background: rgba(139,92,246,0.2);
  border-color: var(--gj-purple);
  color: var(--gj-text);
}

/* ── Inventory grid ───────────────────────────────────────────────────────── */
.gj-hub-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

/* ── Inventory card ───────────────────────────────────────────────────────── */
.gj-hub-inv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 8px;
  border-radius: var(--gj-radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  text-align: center;
  font-family: inherit;
  min-height: 130px;
}
.gj-hub-inv-card:hover { background: rgba(255,255,255,0.08); border-color: var(--gj-purple); }
.gj-hub-inv-card--selected { border-color: var(--gj-purple); box-shadow: 0 0 10px rgba(139,92,246,0.3); background: rgba(139,92,246,0.1); }
.gj-hub-inv-card--equipped { border-color: #4ade80; background: rgba(34,197,94,0.08); }
.gj-hub-inv-card--owned { border-color: rgba(139,92,246,0.3); }
.gj-hub-inv-card--premium { opacity: 0.75; border-color: rgba(250,204,21,0.3); }
.gj-hub-inv-card--insufficient { opacity: 0.7; }

.gj-hub-inv-card__img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 8px;
}
.gj-hub-inv-card__ph {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800;
  background: rgba(139,92,246,0.15);
  border-radius: 8px;
  color: var(--gj-text-dim);
}
.gj-hub-inv-card__check {
  position: absolute;
  top: 6px; right: 6px;
  width: 18px; height: 18px;
  background: #4ade80;
  color: #000;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.gj-hub-inv-card__name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gj-text);
  line-height: 1.2;
}
.gj-hub-inv-card__rarity {
  font-size: 0.65rem;
  font-weight: 600;
}
.gj-hub-inv-card__state {
  font-size: 0.68rem;
  color: var(--gj-text-dim);
  margin-top: 2px;
}
.gj-hub-inv-card--equipped .gj-hub-inv-card__state { color: #4ade80; font-weight: 700; }
.gj-hub-inv-card--owned .gj-hub-inv-card__state { color: var(--gj-purple-light); }

/* ── Empty inventory ──────────────────────────────────────────────────────── */
.gj-hub-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 24px;
  color: var(--gj-text-dim);
  text-align: center;
  font-size: 0.9rem;
}

/* ── Item detail (right panel) ────────────────────────────────────────────── */
.gj-hub-detail { position: relative; }
.gj-hub-detail__close {
  position: absolute;
  top: 0; right: 0;
  width: 26px; height: 26px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  color: var(--gj-text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
}
.gj-hub-detail__close:hover { background: rgba(255,255,255,0.15); }

.gj-hub-detail__preview {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--gj-radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
}
.gj-hub-detail__preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.gj-hub-detail__preview-ph {
  font-size: 3.5rem;
  font-weight: 900;
  color: rgba(139,92,246,0.4);
}

/* Leaderboard appearance preview */
.gj-hub-lb-preview {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--gj-radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.gj-hub-lb-preview__title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gj-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.gj-hub-lb-preview__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gj-hub-lb-preview__rank {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gj-gold);
  min-width: 36px;
}
.gj-hub-lb-preview__circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gj-purple);
  background: rgba(139,92,246,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--gj-text);
  flex-shrink: 0;
}
.gj-hub-lb-preview__info { flex: 1; min-width: 0; }
.gj-hub-lb-preview__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gj-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gj-hub-lb-preview__pts { font-size: 0.72rem; color: var(--gj-text-dim); }

.gj-hub-detail__info { margin-bottom: 12px; }
.gj-hub-detail__name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gj-text);
  margin-bottom: 3px;
}
.gj-hub-detail__rarity { font-size: 0.78rem; font-weight: 600; margin-bottom: 6px; }
.gj-hub-detail__desc { font-size: 0.82rem; color: var(--gj-text-dim); line-height: 1.4; }

/* ── Price / action ───────────────────────────────────────────────────────── */
.gj-hub-price { display: flex; flex-direction: column; gap: 8px; }
.gj-hub-price__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gj-hub-price__tag {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gj-gold);
}
.gj-hub-price__bal { font-size: 0.78rem; color: var(--gj-text-dim); }
.gj-hub-price__need { font-size: 0.78rem; color: #f87171; font-weight: 600; }
.gj-hub-price__equipped {
  padding: 10px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: var(--gj-radius-sm);
  color: #4ade80;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}
.gj-hub-price__premium {
  padding: 10px;
  background: rgba(250,204,21,0.08);
  border: 1px solid rgba(250,204,21,0.2);
  border-radius: var(--gj-radius-sm);
  color: var(--gj-gold);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

/* ── Coin balance + packages ──────────────────────────────────────────────── */
.gj-hub-coin-bal {
  font-size: 2rem;
  font-weight: 900;
  color: var(--gj-gold);
  margin-bottom: 16px;
}
.gj-hub-coin-pack {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: rgba(250,204,21,0.05);
  border: 1px solid rgba(250,204,21,0.15);
  border-radius: var(--gj-radius-sm);
  margin-bottom: 8px;
}
.gj-hub-coin-pack__amount { font-size: 0.95rem; font-weight: 700; color: var(--gj-text); }
.gj-hub-coin-pack__bonus { font-size: 0.72rem; color: #4ade80; font-weight: 600; }
.gj-hub-coin-pack__price { font-size: 0.78rem; color: var(--gj-text-dim); margin-top: 2px; }
.gj-hub-coin-pack__btn { padding: 6px 14px; font-size: 0.82rem; }

/* ── Premium card (right panel) ───────────────────────────────────────────── */
.gj-hub-prem-card {
  margin-top: 12px;
}
.gj-hub-prem-card--active {
  border-color: rgba(34,197,94,0.3) !important;
  background: rgba(34,197,94,0.06) !important;
}
.gj-hub-prem-card__title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gj-gold);
  margin-bottom: 4px;
}
.gj-hub-prem-card--active .gj-hub-prem-card__title { color: #4ade80; }
.gj-hub-prem-card__sub { font-size: 0.82rem; color: var(--gj-text-dim); margin-bottom: 10px; }
.gj-hub-prem-card__list {
  list-style: none;
  padding: 0; margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gj-hub-prem-card__list li {
  font-size: 0.82rem;
  color: var(--gj-text-dim);
}

/* ── Confirm purchase overlay ─────────────────────────────────────────────── */
.gj-hub-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gj-hub-confirm {
  background: #0e1228;
  border: 1px solid var(--gj-border);
  border-radius: var(--gj-radius);
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.gj-hub-confirm__name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gj-text);
  margin-bottom: 6px;
}
.gj-hub-confirm__price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--gj-gold);
  margin-bottom: 10px;
}
.gj-hub-confirm__msg {
  font-size: 0.9rem;
  color: var(--gj-text-dim);
  margin-bottom: 20px;
}
.gj-hub-confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.gj-hub-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  padding: 12px 24px;
  border-radius: var(--gj-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  animation: gj-hub-toast-in 0.2s ease;
}
@keyframes gj-hub-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.gj-hub-toast--success { background: #166534; border: 1px solid #4ade80; }
.gj-hub-toast--error   { background: #7f1d1d; border: 1px solid #f87171; }

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 4 DAILY RESULT — desktop 2-col layout fix
   ══════════════════════════════════════════════════════════════════════════════ */

/* Mobile-only element (tab bar) */
.gj-rd-mobile-only { display: flex; }

/* Top section: hero col + podium col */
.gj-rd-top { display: block; margin-bottom: 16px; }
.gj-rd-hero-col { margin-bottom: 16px; }
.gj-rd-podium-col { margin-bottom: 16px; }
.gj-rd-lb-col { }

.gj-rd-lb-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gj-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 12px;
}

/* Mobile tab visibility — controlled by page modifier class */
.gj-rd-page--tab-result .gj-rd-podium-col { display: none; }
.gj-rd-page--tab-result .gj-rd-lb-col { display: none; }
.gj-rd-page--tab-leaderboard .gj-rd-hero-col { display: none; }

/* Desktop: 2-col top + full-width leaderboard, ignore tab state */
@media (min-width: 768px) {
  .gj-rd-mobile-only { display: none !important; }
  .gj-rd-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .gj-rd-page--tab-result .gj-rd-podium-col,
  .gj-rd-page--tab-result .gj-rd-lb-col,
  .gj-rd-page--tab-leaderboard .gj-rd-hero-col {
    display: block !important;
  }
}

/* Today's Rewards */
.gj-rd-rewards {
  margin-top: 20px;
  background: rgba(250,204,21,0.06);
  border: 1px solid rgba(250,204,21,0.18);
  border-radius: var(--gj-radius-sm);
  padding: 14px 16px;
}
.gj-rd-rewards__title {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--gj-gold);
  margin-bottom: 10px;
}
.gj-rd-rewards__list { display: flex; flex-direction: column; gap: 8px; }
.gj-rd-rewards__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.gj-rd-rewards__rank {
  color: var(--gj-text-dim);
  font-weight: 600;
  min-width: 72px;
}
.gj-rd-rewards__item { color: var(--gj-text); }

/* ══════════════════════════════════════════════════════════════════════════════
   SCREEN 5 — gap fixes: drawer, featured items, right-back, days remaining
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tablet drawer — slide-in panel when item selected */
.gj-hub-drawer { display: none; }

@media (min-width: 768px) and (max-width: 1279px) {
  .gj-hub-drawer {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 600;
    justify-content: flex-end;
    align-items: stretch;
  }
  .gj-hub-drawer__panel {
    width: 380px;
    max-width: 90vw;
    background: #0c1024;
    border-left: 1px solid var(--gj-border);
    padding: 24px 20px;
    overflow-y: auto;
    animation: gj-hub-drawer-in 0.22s ease;
  }
}

@keyframes gj-hub-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Right panel "← Буцах" link */
.gj-hub-right-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--gj-text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  transition: color 0.15s;
}
.gj-hub-right-back:hover { color: var(--gj-text); }

/* Featured items list */
.gj-hub-featured-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.gj-hub-featured-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--gj-radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.gj-hub-featured-row:hover {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.3);
}
.gj-hub-featured-row__img {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.gj-hub-featured-row__ph {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139,92,246,0.15);
  border-radius: 6px;
  font-size: 1rem; font-weight: 800;
  color: var(--gj-text-dim);
  flex-shrink: 0;
}
.gj-hub-featured-row__info { flex: 1; min-width: 0; }
.gj-hub-featured-row__name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gj-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gj-hub-featured-row__rarity { font-size: 0.68rem; font-weight: 600; margin-top: 1px; }
.gj-hub-featured-row__price {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gj-gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.gj-hub-featured-row__arrow { color: var(--gj-text-dim); font-size: 1rem; flex-shrink: 0; }

/* ── Crossword node (episode map) ───────────────────────────────────────── */
.gj-qnode--crossword .gj-qnode__orb {
  border-radius: 14px;
  border-color: rgba(245,158,11,.5);
  background: rgba(245,158,11,.12);
}
.gj-qnode--crossword.gj-qnode--current .gj-qnode__orb {
  border-color: var(--gj-gold, #f59e0b);
  background: rgba(245,158,11,.22);
  box-shadow: 0 0 0 4px rgba(245,158,11,.18), 0 0 24px rgba(245,158,11,.45);
}

/* ── Crossword play screen ──────────────────────────────────────────────── */
.gj-cw {
  position: relative;
  min-height: calc(100vh - 60px);
  color: var(--gj-text);
}
.gj-cw__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
  gap: 18px;
  padding: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .gj-cw__content { grid-template-columns: 1fr; }
}
.gj-cw__grid-panel {
  background: rgba(13,13,26,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
}
.gj-cw__grid {
  display: grid;
  gap: 3px;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.gj-cw__cell {
  position: relative;
  background: #f5f5fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: text;
  transition: background .12s, box-shadow .12s;
}
.gj-cw__cell--block {
  background: transparent;
  cursor: default;
}
.gj-cw__cell--active { box-shadow: inset 0 0 0 2px var(--gj-purple); background: #e4dcff; }
.gj-cw__cell--correct { background: #bbf7d0; }
.gj-cw__cell--wrong { background: #fecaca; }
.gj-cw__cell-num {
  position: absolute;
  top: 1px; left: 2px;
  font-size: .55rem;
  font-weight: 700;
  color: #475569;
  line-height: 1;
  pointer-events: none;
}
.gj-cw__cell-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(.9rem, 3.4vw, 1.25rem);
  color: #0f172a;
  caret-color: var(--gj-purple);
  outline: none;
  padding: 0;
}
.gj-cw__active-clue {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(139,92,246,.1);
  border: 1px solid rgba(139,92,246,.28);
}
.gj-cw__active-clue-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.gj-cw__active-clue-tag {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--gj-purple-light);
}
.gj-cw__clue-mark { font-size: .74rem; font-weight: 700; }
.gj-cw__clue-mark--ok { color: #22c55e; }
.gj-cw__clue-mark--no { color: #ef4444; }
.gj-cw__active-clue-text { font-size: .95rem; line-height: 1.4; color: var(--gj-text); }

.gj-cw__clues {
  background: rgba(13,13,26,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  align-self: start;
}
.gj-cw__clue-group { margin-bottom: 14px; }
.gj-cw__clue-group-title {
  font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--gj-text-dim);
  margin-bottom: 8px;
}
.gj-cw__clue-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.gj-cw__clue-row:hover { background: rgba(255,255,255,.04); }
.gj-cw__clue-row--active { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.4); }
.gj-cw__clue-row--ok { background: rgba(34,197,94,.1); }
.gj-cw__clue-row--no { background: rgba(239,68,68,.1); }
.gj-cw__clue-no {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  color: var(--gj-text);
}
.gj-cw__clue-txt { flex: 1; font-size: .84rem; line-height: 1.3; color: var(--gj-text); }
.gj-cw__clue-state { flex: 0 0 auto; font-size: .8rem; color: var(--gj-text-dim); font-weight: 700; }