/* ============================================================================
   pt-uplift.css — app-wide clinical UX/визуал uplift
   Loaded LAST (after pt-custom.css) so same-specificity rules win.
   Scope: pt-* clinical screens only. Does NOT touch gj-* (game/quiz) or
   the questionnaire pages (which scope their own .pt-card via wrappers).
   ========================================================================== */

/* ── Route content fade-in + keyboard focus + reduced motion ─────────────── */
/* Opacity ONLY — no transform. An animating (or stalled: getUserMedia's
   permission prompt freezes the animation timeline at currentTime 0) transform
   on this wrapper makes it the containing block for every position:fixed
   descendant, which shrank the full-screen call overlay (.pt-call) into a
   ~350px strip. Opacity never creates a containing block. */
.pt-route-fade { animation: pt-fade-in 0.26s ease both; }
@keyframes pt-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Neutralize the marketing theme's bare-element rules ─────────────────────
   style.css ships `section { padding: 100px 0 }` for landing pages. This file
   loads last, so a same-specificity zero wins over it — while any CLASS rule
   (e.g. .phm-card { padding: 20px }) still beats both. The old fix was an
   ID-scoped reset in app-shell.css, which was strong enough to strip the
   redesign's own card padding too (and covered nothing outside #app-content,
   which is how the ChatFab's chat pane inherited 100px). */
section { padding: 0; }

.btn-main:focus-visible,
.pt-chip:focus-visible,
a.btn-main:focus-visible,
.qn-opt:focus-visible,
.pt-iconbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 117, 110, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --pt-up-primary: var(--pt-primary);
  --pt-up-primary-d: var(--pt-primary-hover);
  --pt-up-grad: linear-gradient(135deg, var(--pt-primary), var(--pt-primary-hover));
  /* Сүүдэр нь цэвэр хар/цэнхэр биш, Zen-ий хүрэн ambient (DESIGN.md:
     «shadow color is a dark brown/tertiary tint … to maintain the warm
     aesthetic»). Эдгээр нь --pt-shadow-1..pop-оос ӨӨР нэртэй хувьсагчид —
     .pt-card эдгээрийг уншдаг тул тусад нь Zen болгох ёстой. */
  --pt-shadow-sm: var(--zen-shadow-sm);
  --pt-shadow-md: var(--zen-shadow);
  --pt-radius-card: var(--zen-r-md); /* Zen rounded.md = 24px */
}

/* ── Cards ─────────────────────────────────────────────────────────────────
   Softer, deeper, more rounded — matches the polished questionnaire look.
   Skeleton/ghost variants keep their own treatment below. */
.pt-card:not(.pt-card--skeleton):not(.pt-card--ghost) {
  border-radius: var(--pt-radius-card);
  border: 1px solid var(--pt-surface-dim);
  box-shadow: var(--pt-shadow-sm);
}
/* clickable/list cards get a gentle hover lift */
.pt-list .pt-card:not(.pt-card--skeleton):not(.pt-card--ghost),
.pt-invoice-card, .pt-news-card, .pt-report-card, .pt-history-card,
.pt-reward-card, .pt-explore-hcard, .pt-explore-blog-card {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.pt-list .pt-card:not(.pt-card--skeleton):not(.pt-card--ghost):hover,
.pt-invoice-card:hover, .pt-news-card:hover, .pt-report-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-md);
}

/* ── Empty / ghost cards ────────────────────────────────────────────────── */
.pt-card--ghost {
  border-radius: var(--pt-radius-card);
  padding: 30px 22px;
  text-align: center;
}

/* ── Buttons — unify on brand green, add depth + hover (size kept as-is) ────
   Zen-ий хэлбэрийн гол дүрэм: товч БҮРЭН дугуй. DESIGN.md — «Buttons and
   Input fields use full rounding (rounded-full) to evoke a sense of
   friendliness and safety». .btn-main нь ДӨРВӨН sheet-д (coloring.css,
   style.css:8550, app-shell.css:449, энд) тодорхойлогддог бөгөөд pt-uplift
   хамгийн сүүлд ачаалагддаг тул радиусыг энд нэг л удаа тавьж бүгдийг дарна.
   Сүүдэр нь мөн Zen-ий хүрэн ambient — цэвэр хар биш. */
.btn-main {
  background: var(--pt-up-grad);
  color: var(--zen-on-primary);
  border-radius: var(--zen-r-full);
  box-shadow: var(--zen-shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn-main:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: var(--zen-shadow);
  color: var(--zen-on-primary);
}
.btn-main:active { transform: translateY(0); }

/* ghost / light-transparent secondary button → clean neutral */
.btn-main.btn-light-trans {
  background: var(--pt-surface);
  color: var(--pt-on-surface-secondary);
  border: 1.5px solid var(--pt-surface-dim);
  box-shadow: none;
}
.btn-main.btn-light-trans:hover {
  background: var(--pt-surface-muted);
  color: var(--pt-up-primary-d);
  filter: none;
  box-shadow: none;
}

/* home/appointments hero buttons were teal — recolor to brand green */
.pt-home-btn-main,
.pt-home-next-action__btn-primary,
.pt-appt-hero__cta,
.pt-detail-action--primary {
  background: var(--pt-up-grad) !important;
  box-shadow: 0 10px 22px rgba(47, 117, 110, 0.22) !important;
}

/* ── Badges — leading dot for clearer status ─────────────────────────────── */
.pt-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pt-badge { gap: 6px; }

/* ── Section headers — match accent treatment ────────────────────────────── */
.pt-page-title { letter-spacing: -0.02em; }

/* ── Inputs — soft focus ring ────────────────────────────────────────────── */
.pt-search input:focus,
.pt-input:focus,
.form-control:focus {
  outline: none;
  border-color: var(--pt-up-primary);
  box-shadow: 0 0 0 3px rgba(47, 117, 110, 0.14);
}

/* ── Shared component helpers (StateCard / Skeleton / Spinner) ───────────── */
.pt-state { text-align: center; padding: 30px 22px; }
.pt-state__icon { font-size: 2.2rem; display: block; margin-bottom: 10px; line-height: 1; }
.pt-state__title { font-size: 1rem; font-weight: 700; color: var(--pt-on-surface); margin: 0 0 4px; }
.pt-state__text { font-size: 0.86rem; color: var(--pt-on-surface-secondary); line-height: 1.5; margin: 0 0 6px; }

.pt-sk { background: linear-gradient(90deg, var(--pt-surface-dim) 25%, var(--pt-surface-border) 37%, var(--pt-surface-dim) 63%); background-size: 400% 100%; animation: pt-sk-shimmer 1.4s ease-in-out infinite; }
@keyframes pt-sk-shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }
/* Global: several page CSS files reference phmSkel but only home.css defined it,
   so skeletons froze on any direct visit that skipped Home. */
@keyframes phmSkel { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.pt-spinner { width: 36px; height: 36px; border: 3px solid rgba(47, 117, 110, 0.22); border-top-color: var(--pt-up-primary); border-radius: 50%; animation: pt-spin 0.8s linear infinite; }
.pt-spinner--sm { width: 22px; height: 22px; border-width: 2px; }
@keyframes pt-spin { to { transform: rotate(360deg) } }

/* ── Profile: de-emphasize "coming soon" / disabled controls ─────────────── */
.pt-profile-soon-tag, .pt-profile-coming-soon__badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(106, 75, 50,0.14); color: var(--pt-status-soon);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.pt-toggle.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Range slider value pill + accent ────────────────────────────────────── */
.pt-range-val { display: inline-block; min-width: 34px; padding: 1px 8px; border-radius: 999px; background: rgba(47, 117, 110,0.14); color: var(--pt-up-primary-d); font-size: 0.74rem; font-weight: 700; margin-left: 6px; }
.pt-range { accent-color: var(--pt-up-primary); }

/* ── Alert polish (replaces Bootstrap legacy look) ───────────────────────── */
.pt-uplift-alert { border-radius: 14px; padding: 12px 15px; font-size: 0.86rem; line-height: 1.5; border: 1px solid; }
.pt-uplift-alert--info { background: rgba(47, 117, 110,0.07); border-color: rgba(47, 117, 110,0.22); color: var(--pt-primary); }
.pt-uplift-alert--danger { background: rgba(186, 26, 26,0.06); border-color: rgba(186, 26, 26,0.22); color: var(--zen-error); }
.pt-uplift-alert--success { background: rgba(47, 117, 110,0.1); border-color: rgba(47, 117, 110,0.3); color: var(--pt-primary); }

/* ── Appointments: view toggle + calendar (added 2026-07-04) ───────────────── */
.pt-appt-viewtoggle { display: inline-flex; gap: 4px; padding: 4px; background: rgba(47, 117, 110,0.08); border-radius: 12px; margin-bottom: 16px; }
.pt-appt-viewtoggle__btn { border: none; background: transparent; padding: 8px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--pt-on-surface-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
.pt-appt-viewtoggle__btn.is-active { background: var(--pt-surface); color: var(--pt-primary); box-shadow: var(--zen-shadow-sm); }

.pt-appt-calendar { background: var(--pt-surface); border: 1px solid rgba(47, 117, 110,0.16); border-radius: 18px; padding: 18px; }
.pt-appt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pt-appt-cal-title { font-size: 16px; font-weight: 700; color: var(--pt-on-surface); }
.pt-appt-cal-nav { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(47, 117, 110,0.2); background: var(--pt-surface); color: var(--pt-primary); cursor: pointer; }
.pt-appt-cal-nav:hover { background: rgba(47, 117, 110,0.08); }
.pt-appt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pt-appt-cal-grid--head { margin-bottom: 6px; }
.pt-appt-cal-dow { text-align: center; font-size: 12px; font-weight: 600; color: var(--pt-on-surface-muted); padding: 4px 0; }
.pt-appt-cal-cell { position: relative; aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px; background: rgba(111, 121, 119,0.06); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; transition: all .12s; }
.pt-appt-cal-cell--empty { background: transparent; cursor: default; }
.pt-appt-cal-cell:not(.pt-appt-cal-cell--empty):hover { background: rgba(47, 117, 110,0.1); }
.pt-appt-cal-cell.has-appt { background: rgba(47, 117, 110,0.1); font-weight: 700; }
.pt-appt-cal-cell.is-today { border-color: var(--pt-primary); }
.pt-appt-cal-cell.is-selected { background: var(--pt-primary); color: var(--zen-on-primary); }
.pt-appt-cal-daynum { font-size: 14px; }
.pt-appt-cal-dots { display: flex; gap: 3px; }
.pt-appt-cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.pt-appt-cal-dot.is-upcoming { background: var(--pt-primary); }
.pt-appt-cal-dot.is-done { background: var(--pt-on-surface-muted); }
.pt-appt-cal-dot.is-cancelled { background: var(--zen-error); }
.pt-appt-cal-cell.is-selected .pt-appt-cal-dot { background: rgba(255,255,255,0.85); }
.pt-appt-cal-day { margin-top: 18px; border-top: 1px solid rgba(111, 121, 119,0.16); padding-top: 14px; }
.pt-appt-cal-day__title { font-size: 14px; font-weight: 700; color: var(--pt-on-surface); margin-bottom: 10px; }
.pt-appt-cal-day__empty { font-size: 13px; color: var(--pt-on-surface-muted); }
.pt-appt-cal-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(47, 117, 110,0.14); border-radius: 12px; background: var(--pt-surface); cursor: pointer; margin-bottom: 8px; font: inherit; text-align: left; transition: all .12s; }
.pt-appt-cal-item:hover { background: rgba(47, 117, 110,0.05); }
.pt-appt-cal-item__time { font-weight: 700; color: var(--pt-primary); min-width: 48px; }
.pt-appt-cal-item__name { flex: 1; color: var(--pt-on-surface); font-size: 14px; }
@media (max-width: 480px) { .pt-appt-cal-cell { border-radius: 8px; } .pt-appt-cal-daynum { font-size: 12px; } }

/* ── Psychologist card: no-slot treatment (added 2026-07-04) ──────────────── */
.pt-disc-card--noslot { opacity: .82; }
.pt-disc-card__slot--none { color: var(--pt-on-surface-muted) !important; }
.pt-disc-card__btn-primary--muted { background: var(--pt-on-surface-muted) !important; }

/* ── Wellbeing charts (added 2026-07-04) ──────────────────────────────────── */
.pt-mood-linechart { margin-top: 10px; }
.pt-mood-linechart svg { width: 100%; height: auto; display: block; }
.pt-mood-linechart__axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--pt-on-surface-muted); margin-top: 4px; }
.pt-mood-dist { display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-top: 12px; }
.pt-mood-dist__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.pt-mood-dist__bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pt-mood-dist__bar { width: 60%; min-height: 4px; border-radius: 6px 6px 0 0; transition: height .4s ease; }
.pt-mood-dist__emoji { font-size: 18px; margin-top: 6px; }
.pt-mood-dist__count { font-size: 12px; font-weight: 700; color: var(--pt-on-surface-secondary); }
.pt-mood-note-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(111, 121, 119,0.14); }
.pt-mood-note-row:last-child { border-bottom: none; }
.pt-mood-note-row__emoji { font-size: 22px; }
.pt-mood-note-row__text { color: var(--pt-on-surface); font-size: 14px; margin: 0; }
.pt-mood-note-row__date { font-size: 12px; color: var(--pt-on-surface-muted); }

/* ── Therapy: guided breathing (added 2026-07-04) ─────────────────────────── */
.pt-breathe { text-align: center; }
.pt-breathe__intro { padding: 20px 8px; }
.pt-breathe__pattern { font-weight: 700; color: var(--pt-primary); margin: 10px 0 18px; }
.pt-breathe__stage { padding: 24px 8px 12px; display: flex; flex-direction: column; align-items: center; }
.pt-breathe__orb { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, var(--zen-primary-fixed-dim), var(--pt-primary)); box-shadow: 0 12px 40px rgba(61,129,97,.35);
  transition-property: transform; transition-timing-function: ease-in-out; will-change: transform; }
.pt-breathe__orb--hold, .pt-breathe__orb--exhaleHold { transition-timing-function: linear; }
.pt-breathe__count { color: var(--zen-on-primary); font-size: 42px; font-weight: 700; }
.pt-breathe__phase { font-size: 20px; font-weight: 700; color: var(--pt-on-surface); margin-top: 22px; }
.pt-breathe__cycle { font-size: 13px; color: var(--pt-on-surface-secondary); }
.pt-breathe__done { padding: 24px 8px; }

/* ── Explore redesign (2026-07-04): card grid with gradient banners ───────── */
.pt-explore-section { margin-bottom: 34px; }
.pt-explore-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pt-explore-section__title { font-size: 20px; font-weight: 700; color: var(--pt-on-surface); margin: 0; }
.pt-explore-section__all { font-size: 13px; font-weight: 600; color: var(--pt-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.pt-explore-section__all:hover { color: var(--pt-primary); }
.pt-explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.pt-explore-card { display: flex; flex-direction: column; background: var(--pt-surface); border: 1px solid rgba(47, 117, 110,0.14); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.pt-explore-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(30, 28, 13,0.12); }
.pt-explore-card__banner { position: relative; height: 116px; display: flex; align-items: center; justify-content: center; }
.pt-explore-card__icon { color: rgba(255,255,255,0.9); font-size: 34px; }
.pt-explore-card__chip { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.92); color: var(--pt-primary); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pt-explore-card__body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pt-explore-card__cat { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pt-primary); }
.pt-explore-card__title { font-size: 15px; font-weight: 700; color: var(--pt-on-surface); margin: 0; line-height: 1.3; }
.pt-explore-card__summary { font-size: 13px; color: var(--pt-on-surface-secondary); margin: 0; line-height: 1.45; }
.pt-explore-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--pt-on-surface-secondary); margin-top: auto; }
.pt-explore-card__meta i { margin-right: 3px; color: var(--pt-primary); }
.pt-explore-card__date { font-size: 12px; color: var(--pt-on-surface-muted); margin-top: auto; }
@media (max-width: 520px) { .pt-explore-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .pt-explore-card__banner { height: 92px; } }

/* ── Article reader (news/blog detail redesign 2026-07-04) ────────────────── */
.pt-reader { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; }
.pt-reader__back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--pt-primary); text-decoration: none; margin: 8px 0 16px; }
.pt-reader__back:hover { color: var(--pt-primary); }
.pt-reader__article { background: var(--pt-surface); border: 1px solid rgba(47, 117, 110,0.14); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(30, 28, 13,0.06); }
.pt-reader__hero { position: relative; min-height: 240px; display: flex; align-items: flex-end; }
.pt-reader__hero-icon { position: absolute; top: 24px; right: 28px; font-size: 46px; color: rgba(255,255,255,0.35); }
.pt-reader__hero-overlay { position: relative; width: 100%; padding: 28px; }
.pt-reader__chip { display: inline-block; background: rgba(255,255,255,0.95); color: var(--pt-primary); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.pt-reader__title { color: var(--zen-on-primary); font-size: 30px; line-height: 1.2; font-weight: 800; margin: 0; letter-spacing: -0.5px; text-shadow: 0 2px 12px rgba(0,0,0,0.28); }
.pt-reader__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; color: rgba(255,255,255,0.92); font-size: 13px; }
.pt-reader__meta i { margin-right: 5px; opacity: .85; }
.pt-reader__body { padding: 30px 32px 34px; }
.pt-reader__lead { font-size: 18px; line-height: 1.6; color: var(--pt-on-surface-secondary); font-weight: 500; margin: 0 0 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(111, 121, 119,0.18); }
.pt-reader__body .pt-article-body { color: var(--pt-on-surface); font-size: 16px; line-height: 1.75; }
.pt-reader__body .pt-article-body h2 { font-size: 22px; font-weight: 700; margin: 28px 0 12px; color: var(--pt-on-surface); }
.pt-reader__body .pt-article-body h3 { font-size: 18px; font-weight: 700; margin: 22px 0 10px; color: var(--pt-on-surface); }
.pt-reader__body .pt-article-body p { margin: 0 0 16px; }
.pt-reader__body .pt-article-body ul, .pt-reader__body .pt-article-body ol { margin: 0 0 18px; padding-left: 22px; }
.pt-reader__body .pt-article-body li { margin-bottom: 8px; }
.pt-reader__body .pt-article-body img { max-width: 100%; border-radius: 12px; margin: 16px 0; }
.pt-reader__body .pt-article-body blockquote { border-left: 4px solid var(--pt-primary); margin: 18px 0; padding: 6px 18px; color: var(--pt-on-surface-secondary); background: rgba(47, 117, 110,0.06); border-radius: 0 10px 10px 0; }
.pt-reader__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(111, 121, 119,0.18); }
.pt-reader__tag { font-size: 13px; color: var(--pt-primary); font-weight: 600; }
@media (max-width: 560px) { .pt-reader__title { font-size: 23px; } .pt-reader__hero { min-height: 190px; } .pt-reader__body { padding: 22px 18px 26px; } }

/* ── Course detail hero (2026-07-04) ──────────────────────────────────────── */
.pt-course-hero { position: relative; border-radius: 18px; padding: 26px 28px; margin: 6px 0 20px; overflow: hidden; }
.pt-course-hero__icon { position: absolute; top: 20px; right: 26px; font-size: 46px; color: rgba(255,255,255,0.3); }
.pt-course-hero__title { color: var(--zen-on-primary); font-size: 26px; font-weight: 800; margin: 8px 0 0; letter-spacing: -0.4px; text-shadow: 0 2px 10px rgba(0,0,0,0.22); }
.pt-course-hero__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; color: rgba(255,255,255,0.92); font-size: 13px; }
.pt-course-hero__meta i { margin-right: 5px; }
.pt-section-title { font-size: 17px; font-weight: 700; color: var(--pt-on-surface); }

/* ── Unified public header (2026-07-04): PublicShell reuses .pt-header ────── */
.pt-lang-switch { display: inline-flex; gap: 2px; padding: 3px; background: rgba(47, 117, 110,0.1); border-radius: 999px; }
.pt-lang-switch__btn { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--pt-on-surface-secondary); text-decoration: none; transition: all .12s; }
.pt-lang-switch__btn.is-active { background: var(--pt-surface); color: var(--pt-primary); box-shadow: var(--zen-shadow-sm); }
.pt-lang-switch__btn:hover { color: var(--pt-primary); }
.pt-public-shell { background: var(--pt-surface-muted); min-height: 100vh; display: flex; flex-direction: column; }
.pt-public-main { flex: 1; }
.pt-public-footer { padding: 28px 20px; margin-top: 24px; text-align: center; border-top: 1px solid rgba(30, 28, 13,0.08); color: var(--pt-on-surface-secondary); font-size: 0.85rem; background: var(--pt-surface); }
.pt-public-footer__links { margin-bottom: 8px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 700px) { .pt-header .pt-lang-switch { display: none; } }

/* Дүрсний эргэлт — Font Awesome-ийн `fa-spin`-ийг орлоно (2026-08-21).
   `.pt-spinner` нь ХҮРЭЭТЭЙ дугуй (өөрийн зурагтай); энэ нь `<Icon>` SVG-г
   өөрийг нь эргүүлнэ, тиймээс `loader-circle` зэрэг ачааллын дүрстэй хамт
   хэрэглэнэ. `@keyframes pt-spin` дээр аль хэдийн зарлагдсан. */
.pt-spin { animation: pt-spin 0.9s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .pt-spin { animation: none; } }