/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:    #FAF9F6;
  --navy:     #1B2A4A;
  --navy-mid: #2D4168;
  --sage:     #4A7B6F;
  --sage-dk:  #3A6157;
  --sage-lt:  #EAF2EF;
  --amber:    #C8854A;
  --amber-dk: #A86A35;
  --purple:   #534AB7;
  --purple-lt:#E8EBF5;
  --rose:     #8A3A5E;
  --rose-lt:  #F5EAF0;
  --border:   #E2DFDA;
  --text:     #1B2A4A;
  --text-sec: #4A5568;
  --text-ter: #718096;
  --radius:   14px;
  --radius-sm:9px;
  --shadow:   0 2px 8px rgba(27,42,74,0.08), 0 0 1px rgba(27,42,74,0.06);
  --shadow-lg:0 8px 32px rgba(27,42,74,0.12), 0 1px 3px rgba(27,42,74,0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); color: var(--navy); }
h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 0.5rem; }
p  { color: var(--text-sec); line-height: 1.7; }

.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.75rem;
}
.section-label.light { color: var(--amber); }
.section-sub {
  max-width: 600px;
  margin: 1rem auto 3rem;
  text-align: center;
  font-size: 1.05rem;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}
.btn-primary:hover { background: var(--sage-dk); border-color: var(--sage-dk); box-shadow: 0 4px 16px rgba(74,123,111,0.3); }
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.btn-ghost:hover { background: rgba(255,255,255,0.6); border-color: var(--navy-mid); }
.btn-amber {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
.btn-amber:hover { background: var(--amber-dk); border-color: var(--amber-dk); box-shadow: 0 4px 16px rgba(200,133,74,0.3); }
.btn-nav {
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}
.btn-nav:hover { background: var(--sage-dk); border-color: var(--sage-dk); }
.btn-large { padding: 0.95rem 2.2rem; font-size: 1.05rem; }

/* Focus visible for keyboard users */
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* ── Layout helpers ── */
.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
section { padding: 5rem 0; }

/* ── NAV ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,249,246,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-sec);
  text-decoration: none;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--navy); }
.nav-login { font-weight: 500 !important; }
.mobile-menu { display: none !important; }
.mobile-menu.is-open { display: flex !important; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu {
  border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mobile-menu a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-sec);
  text-decoration: none;
  padding: 0.4rem 0;
}
.mobile-menu .btn { margin-top: 0.5rem; text-align: center; justify-content: center; }

/* ── HERO ── */
.hero {
  position: relative;
  padding: 6rem 0 5.5rem;
  overflow: hidden;
  text-align: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-texture {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74,123,111,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(83,74,183,0.05) 0%, transparent 60%);
}
.hero-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(74,123,111,0.09) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.25rem;
}
.hero-headline {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 1.5rem;
  line-height: 1.15;
}
.hero-fade {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: fadeUp 0.8s ease 0.45s forwards;
  font-style: italic;
  color: var(--sage-dk);
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fade { animation: none; opacity: 1; transform: none; }
}
.hero-sub {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 2.25rem;
  color: var(--text-sec);
  line-height: 1.75;
}
.hero-actions {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hero-note {
  font-size: 0.82rem;
  color: var(--text-ter);
  margin-top: 0.5rem;
}

/* ── TRUST BAR ── */
.trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
  padding: 1.1rem 1.5rem;
}
.trust-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-sec);
}
.trust-item svg { color: var(--sage); flex-shrink: 0; }
.trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border);
}

/* ── HOW IT WORKS ── */
.hiw { text-align: center; }
.steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 2rem;
}
.step {
  flex: 1;
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, transform 0.2s;
}
.step:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.step-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--ic-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.step h3 { text-align: center; font-size: 1.2rem; }
.step p  { text-align: center; font-size: 0.93rem; margin-top: 0.5rem; }
.step-arrow {
  flex-shrink: 0;
  padding: 0 0.75rem;
  margin-top: 68px;
  opacity: 0.6;
}

/* ── MILITARY ── */
.military {
  background: var(--navy);
  color: #fff;
}
.military-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}
.military-badge {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(200,133,74,0.15);
  border: 1px solid rgba(200,133,74,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
}
.military-text { flex: 1; }
.military-text h2 { color: #fff; margin-bottom: 1rem; }
.military-text > p {
  color: rgba(255,255,255,0.72);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}
.mil-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.mil-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}
.mil-list li svg { flex-shrink: 0; margin-top: 2px; }
.mil-list strong { color: #fff; }

/* ── LEGACY GRID ── */
.legacy { text-align: center; background: var(--sage-lt); }
.legacy h2 { margin-bottom: 0.5rem; }
.legacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.legacy-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: left;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
}
.legacy-card:hover { box-shadow: var(--shadow-lg); }
.lc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sage-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.legacy-card h3 { font-size: 1rem; }
.legacy-card p  { font-size: 0.9rem; margin-top: 0.4rem; }

/* ── FAQ ── */
.faq { background: #fff; }
.faq-inner { max-width: 700px !important; text-align: center; }
.faq-inner h2 { margin-bottom: 0.5rem; }
.faq-inner > .section-sub { margin-bottom: 2.5rem; }
.faq-list {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  padding: 1.1rem 1.25rem;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background 0.15s;
  font-family: 'Inter', sans-serif;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:hover { background: var(--cream); }
.faq-item[open] summary { background: var(--cream); }
.faq-item > p {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--text-sec);
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* ── FINAL CTA ── */
.cta-band {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%);
  text-align: center;
  padding: 5.5rem 0;
}
.cta-inner { max-width: 640px !important; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band > .cta-inner > p {
  color: rgba(255,255,255,0.72);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
.cta-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}

/* ── FOOTER ── */
.footer {
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 3rem 0 0;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.footer-brand { flex: 1; min-width: 180px; }
.footer-brand .logo { color: #fff; margin-bottom: 0.75rem; }
.footer-brand .logo svg { stroke: var(--sage); }
.footer-tagline { font-size: 0.88rem; color: rgba(255,255,255,0.45); margin-top: 0.5rem; }
.footer-links { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; min-width: 110px; }
.footer-col-head {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.25rem;
  font-family: 'Inter', sans-serif;
}
.footer-col a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: #fff; }
/* Beta band on the pricing page — the founding-tester pitch + the promise. */
.beta-band {
  background: var(--sage-lt);
  border: 1px solid var(--sage);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}
.beta-band strong { color: var(--sage-dk); }

/* Two-line feature bullet: name on top, limits as a quiet second line. */
.pr-feat-stack { display: inline-flex; flex-direction: column; gap: 0.1rem; }
.pr-feat-sub { font-size: 0.82em; color: var(--text-ter); }

.footer-built { margin-top: 0.4rem; }
.footer-built a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-ter);
  text-decoration: none;
}
.footer-built a:hover { color: var(--text-sec); text-decoration: underline; }
.footer-built svg { flex-shrink: 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.25rem 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer-bottom p { font-size: 0.82rem; color: rgba(255,255,255,0.35); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .steps { flex-direction: column; gap: 1rem; }
  .step { padding: 1.5rem; }
  .step-arrow { display: none; }
  .military-inner { flex-direction: column; gap: 1.5rem; }
  .military-badge { width: 48px; height: 48px; }
  .footer-inner { flex-direction: column; gap: 2rem; }
  .footer-links { gap: 2rem; }
  section { padding: 3.5rem 0; }
  .hero { padding: 4rem 0 3.5rem; }
  .hero-headline { font-size: 2.2rem; }
}
@media (max-width: 480px) {
  .trust-dot { display: none; }
  .trust-inner { gap: 0.75rem; }
  .hero-actions { flex-direction: column; align-items: center; }
  .legacy-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   AUTH PAGES (signup.html, login.html)
   ═══════════════════════════════════════ */

/* ── Auth body ── */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; }

/* ── Minimal nav variant ── */
.nav-minimal .nav-inner { justify-content: space-between; }
.nav-auth-hint { font-size: 0.88rem; color: var(--text-ter); }
.nav-auth-hint a { color: var(--sage); font-weight: 600; text-decoration: none; }
.nav-auth-hint a:hover { color: var(--sage-dk); text-decoration: underline; }

/* ── Layout: split (signup) ── */
.auth-main {
  flex: 1;
  display: flex;
  align-items: stretch;
}
.auth-split {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 64px);
}
.auth-form-side {
  flex: 0 0 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--cream);
}
.auth-panel {
  flex: 0 0 48%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
}

/* ── Layout: centered (login) ── */
.auth-main-centered {
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--cream);
}

/* ── Auth card ── */
.auth-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-lg);
}
.auth-card-solo {
  /* login card — slightly narrower feels less imposing */
  max-width: 400px;
}

/* ── Card header ── */
.auth-card-head { margin-bottom: 1.5rem; }
.auth-card-head h1 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.35rem;
  line-height: 1.2;
}
.auth-card-head p { font-size: 0.93rem; color: var(--text-sec); margin: 0; }

/* ── Trust micro-strip ── */
.auth-trust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 0.65rem 0.875rem;
  background: var(--sage-lt);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.auth-trust-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sage-dk);
}
.auth-trust-item svg { color: var(--sage); flex-shrink: 0; }
.auth-trust-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.4;
  flex-shrink: 0;
}

/* ── Form elements ── */
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }

.field-group { display: flex; flex-direction: column; gap: 0.375rem; }

.field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
}
.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.field-label-link {
  font-size: 0.8rem;
  color: var(--sage);
  font-weight: 500;
  text-decoration: none;
}
.field-label-link:hover { text-decoration: underline; }

.field-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.field-input::placeholder { color: var(--text-ter); }
.field-input:hover { border-color: #C8C5BE; }
.field-input:focus {
  outline: none;
  border-color: var(--sage);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74,123,111,0.12);
}
.field-input.has-error {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}
.field-input.is-valid { border-color: var(--sage); }

.field-error {
  font-size: 0.8rem;
  color: #C0392B;
  font-weight: 500;
  min-height: 1em;
  display: block;
}

/* ── Password field with toggle ── */
.field-pw-wrap { position: relative; }
.field-pw-wrap .field-input { padding-right: 2.75rem; }
.pw-toggle {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-ter);
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.15s;
}
.pw-toggle:hover { color: var(--text-sec); }
.pw-toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* ── Password strength ── */
.pw-strength {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  min-height: 1.2rem;
}
.pw-bars { display: flex; gap: 4px; flex: 1; }
.pw-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.25s;
}
.pw-bar.active-1 { background: #C0392B; }
.pw-bar.active-2 { background: var(--amber); }
.pw-bar.active-3 { background: #A3B800; }
.pw-bar.active-4 { background: var(--sage); }
.pw-label { font-size: 0.75rem; font-weight: 500; color: var(--text-ter); white-space: nowrap; }

/* ── Checkbox ── */
.check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
}
.check-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.check-box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: border-color 0.15s, background 0.15s;
}
.check-label input:checked + .check-box {
  background: var(--sage);
  border-color: var(--sage);
}
.check-label input:checked + .check-box::after {
  content: '';
  display: block;
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.check-label input:focus-visible + .check-box {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}
.check-text { font-size: 0.875rem; color: var(--text-sec); line-height: 1.5; }
.check-text a { color: var(--sage); font-weight: 500; text-decoration: none; }
.check-text a:hover { text-decoration: underline; }

/* ── Full-width button ── */
.btn-full {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  margin-top: 0.25rem;
}

/* ── Loading spinner on button ── */
.btn-full.loading { pointer-events: none; opacity: 0.7; }
.btn-full.loading::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 0.5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Military aside ── */
.auth-aside {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: #FDF5ED;
  border: 1px solid rgba(200,133,74,0.25);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-sec);
  line-height: 1.5;
}
.auth-aside svg { flex-shrink: 0; margin-top: 1px; }

/* ── Alert banner (login errors) ── */
.auth-alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.875rem;
  background: #FDF0F0;
  border: 1px solid rgba(192,57,43,0.2);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: #9B2335;
  margin-bottom: 0.5rem;
}
.auth-alert svg { flex-shrink: 0; color: #C0392B; }

/* ── Divider ── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--text-ter);
  font-size: 0.82rem;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Social login buttons ── */
.auth-social { display: flex; flex-direction: column; gap: 0.6rem; }
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.btn-social:hover { background: var(--cream); border-color: var(--text-ter); }
.btn-social svg { flex-shrink: 0; }

/* ── Auth error banner (e.g. OAuth failures) ── */
.auth-error-banner {
  background: #FDECEA;
  border: 1px solid #F5C6C0;
  color: #9B2335;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* ── Check-in link note ── */
.auth-checkin-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  background: var(--sage-lt);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--sage-dk);
  line-height: 1.55;
}
.auth-checkin-note svg { flex-shrink: 0; margin-top: 1px; }
.auth-checkin-note a { color: var(--sage); font-weight: 600; text-decoration: none; }
.auth-checkin-note a:hover { text-decoration: underline; }

/* ── Footer note ── */
.auth-footer-note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-ter);
  margin-top: 1.25rem;
}
.auth-footer-note a { color: var(--sage); font-weight: 600; text-decoration: none; }
.auth-footer-note a:hover { text-decoration: underline; }

/* ── Success state ── */
.auth-success { text-align: center; padding: 1rem 0; }
.success-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--sage-lt);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.auth-success h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.auth-success p { font-size: 0.93rem; margin-bottom: 0.5rem; }
.success-note { font-size: 0.85rem; color: var(--text-ter); }
.link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--sage); font-size: inherit;
  font-weight: 600; padding: 0; text-decoration: underline;
}

/* ── Right panel (signup) ── */
.auth-panel-inner { max-width: 380px; }
.auth-quote {
  border-left: 3px solid var(--amber);
  padding-left: 1.25rem;
  margin-bottom: 2.5rem;
}
.auth-quote p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.auth-quote footer { font-size: 0.82rem; color: rgba(255,255,255,0.45); }
.quote-name { font-weight: 600; color: rgba(255,255,255,0.6); }

.panel-features { display: flex; flex-direction: column; gap: 1.5rem; }
.panel-feature { display: flex; gap: 1rem; align-items: flex-start; }
.pf-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(74,123,111,0.15);
  border: 1px solid rgba(74,123,111,0.25);
  display: flex; align-items: center; justify-content: center;
}
.panel-feature strong { display: block; font-size: 0.93rem; color: #fff; margin-bottom: 0.2rem; }
.panel-feature p { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.55; }

/* ── Auth responsive ── */
@media (max-width: 900px) {
  .auth-split { flex-direction: column; min-height: auto; }
  .auth-form-side, .auth-panel { flex: none; width: 100%; }
  .auth-panel { padding: 2.5rem 1.5rem; }
  .auth-panel-inner { max-width: 100%; }
}
@media (max-width: 520px) {
  .auth-card { padding: 1.75rem 1.25rem; border-radius: var(--radius-sm); }
  .auth-form-side { padding: 1.5rem 1rem; }
  .auth-trust { gap: 0.4rem; }
  .auth-trust-dot { display: none; }
}

/* ═══════════════════════════════════════
   DASHBOARD (dashboard.html)
   ═══════════════════════════════════════ */

/* ── App page layout ── */
.app-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

/* ── App nav ── */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,249,246,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.app-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 0;
}
.app-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 2rem;
}
.app-nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.875rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-sec);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.app-nav-link:hover { background: rgba(74,123,111,0.07); color: var(--navy); }
.app-nav-link.active {
  background: var(--sage-lt);
  color: var(--sage-dk);
  font-weight: 600;
}
.app-nav-right { margin-left: auto; position: relative; }

/* ── Avatar button + dropdown ── */
.app-avatar-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 0.3rem 0.6rem 0.3rem 0.3rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.app-avatar-btn:hover { border-color: #C0BDB7; background: #fff; }
.app-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--purple-lt);
  color: var(--purple);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-avatar-lg { width: 36px; height: 36px; font-size: 13px; }
.app-avatar-btn svg { color: var(--text-ter); }

.app-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;
}
.app-dropdown-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}
.dropdown-name { font-size: 0.9rem; font-weight: 600; color: var(--navy); margin: 0; }
.dropdown-email { font-size: 0.78rem; color: var(--text-ter); margin: 0; }
.app-dropdown-divider { height: 1px; background: var(--border); margin: 0; }
.app-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-sec);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.app-dropdown-item:hover { background: var(--cream); color: var(--navy); }
.app-dropdown-item svg { color: var(--text-ter); flex-shrink: 0; }
.app-dropdown-item-danger { color: #9B2335; }
.app-dropdown-item-danger:hover { background: #FDF0F0; color: #9B2335; }
.app-dropdown-item-danger svg { color: #C0392B; }
/* Mobile bottom tab bar — shown only ≤640px, where the top nav row is hidden.
   Home/Videos/People are links; Account opens the account menu as a slide-up sheet. */
.pm-tabbar { display: none; }
[data-theme="dark"] .pm-tabbar { background: var(--surface-2); }
@media (max-width: 640px) {
  .pm-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: #fff; border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(27,42,74,0.06);
  }
  .pm-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 0 9px; background: none; border: none; cursor: pointer;
    font: inherit; color: var(--text-ter); text-decoration: none;
  }
  .pm-tab svg { width: 23px; height: 23px; }
  .pm-tab span { font-size: 11px; font-weight: 500; }
  .pm-tab-active { color: var(--sage); }
  .app-main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body.app-page { overflow-x: clip; }
}
/* Account slide-up sheet (opened from the mobile Account tab). Appended to <body>
   so it clears the frosted header's backdrop-filter, which creates a containing
   block that would otherwise anchor a fixed sheet to the header, not the viewport. */
.pm-sheet { position: fixed; inset: 0; z-index: 300; display: none; }
.pm-sheet.pm-sheet-open { display: block; }
.pm-sheet-backdrop { position: absolute; inset: 0; background: rgba(27,42,74,0.45); }
.pm-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 16px 16px 0 0;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(27,42,74,0.2);
  max-height: 80vh; overflow-y: auto;
}
[data-theme="dark"] .pm-sheet-panel { background: var(--surface-2); }

/* ── Main shell ── */
.app-main { flex: 1; }
.app-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* ── Check-in banner ── */
.checkin-banner {
  border-radius: var(--radius);
  margin: 1.5rem 0 0;
}
.checkin-ok {
  background: var(--sage-lt);
  border: 1px solid rgba(74,123,111,0.2);
}
.checkin-warn {
  background: #FDF5ED;
  border: 1px solid rgba(200,133,74,0.25);
}
.checkin-alert {
  background: #FDF0F0;
  border: 1px solid rgba(192,57,43,0.2);
}
.checkin-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}
.checkin-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sage-dk);
}
.checkin-ok .checkin-left svg { color: var(--sage); }
.checkin-warn .checkin-left { color: var(--amber-dk); }
.checkin-warn .checkin-left svg { color: var(--amber); }
.checkin-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sage-dk);
  opacity: 0.5;
  padding: 4px;
  display: flex;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.checkin-dismiss:hover { opacity: 1; }

/* ── Greeting ── */
.dash-greeting {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0 1.5rem;
}
.dash-hello {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.dash-sub { font-size: 0.93rem; color: var(--text-ter); margin: 0; }
.dash-quota {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.875rem;
  white-space: nowrap;
}
.quota-used { font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.quota-sep  { font-size: 1rem; color: var(--border); }
.quota-total { font-size: 1rem; color: var(--text-ter); }
.quota-label { font-size: 0.78rem; color: var(--text-ter); margin-left: 0.4rem; }

/* ── Three action cards ── */
.dash-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-action-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
  box-shadow: var(--shadow);
}
.dash-action-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.dash-action-record { border-left: 3px solid var(--purple); }
.dash-action-record:hover { border-color: var(--purple); }
.dash-action-videos  { border-left: 3px solid var(--sage); }
.dash-action-videos:hover { border-color: var(--sage); }
.dash-action-people  { border-left: 3px solid var(--rose); }
.dash-action-people:hover { border-color: var(--rose); }

.dac-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-action-record .dac-icon { background: var(--purple-lt); color: var(--purple); }
.dash-action-videos  .dac-icon { background: var(--sage-lt);   color: var(--sage); }
.dash-action-people  .dac-icon { background: var(--rose-lt);   color: var(--rose); }

/* "Shared with me" — appears only when someone shared a timeline; spans the row */
.dash-action-shared { grid-column: 1 / -1; border-left: 3px solid var(--purple); }
.dash-action-shared:hover { border-color: var(--purple); }
.dash-action-shared .dac-icon { background: var(--purple-lt); color: var(--purple); }

.dac-text { flex: 1; min-width: 0; }
.dac-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.dac-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--text-ter);
}
.dac-arrow { color: var(--text-ter); flex-shrink: 0; }

/* ── Lower two-col layout ── */
.dash-lower {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;
  align-items: start;
}

/* ── Shared card shell ── */
.dash-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
}
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.dash-card-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.dash-card-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sage);
  text-decoration: none;
}
.dash-card-link:hover { text-decoration: underline; }
.dash-card-btn {
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
  font-size: 0.88rem;
  padding: 0.6rem 1rem;
}

/* ── Recent videos list ── */
.recent-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.recent-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.recent-item:last-child { border-bottom: none; }
.recent-thumb {
  width: 56px;
  height: 38px;
  border-radius: 6px;
  background: #2C2C2A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.recent-thumb-audio { background: #1B2A4A; }
.recent-meta { flex: 1; min-width: 0; }
.recent-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-date {
  display: block;
  font-size: 0.78rem;
  color: var(--text-ter);
  margin-top: 2px;
}
.recent-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.badge-saved  { background: var(--sage-lt); color: var(--sage-dk); }
.badge-legacy { background: var(--purple-lt); color: var(--purple); }

/* ── Right column cards ── */
.dash-right-col { display: flex; flex-direction: column; gap: 1rem; }

/* Storage */
.storage-bar-wrap { margin-bottom: 0.5rem; }
.storage-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.storage-bar-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.storage-label {
  font-size: 0.875rem;
  color: var(--text-sec);
  margin-bottom: 0.35rem;
}
.storage-label strong { color: var(--navy); }
.storage-note { font-size: 0.8rem; color: var(--text-ter); line-height: 1.5; }

/* Legacy summary */
.legacy-summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.legacy-summary li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-sec);
}
.legacy-summary li svg { flex-shrink: 0; }
.legacy-summary strong { color: var(--navy); }

/* Deployment callout */
.dash-deploy-card { border-top: 3px solid var(--amber); }
.deploy-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FDF5ED;
  border: 1px solid rgba(200,133,74,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
}
.dash-deploy-card h2 {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.dash-deploy-card p {
  font-size: 0.82rem;
  color: var(--text-sec);
  line-height: 1.55;
  margin-bottom: 0.875rem;
}
.dash-deploy-btn {
  width: 100%;
  justify-content: center;
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
}

/* ── Dashboard responsive ── */
@media (max-width: 860px) {
  .dash-lower { grid-template-columns: 1fr; }
  .dash-right-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 640px) {
  .dash-actions { grid-template-columns: 1fr; }
  .app-nav-links { display: none; }
  .dash-greeting { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .dash-quota { align-self: flex-start; }
  .dash-right-col { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   RECORDING SCREEN (record.html)
   ═══════════════════════════════════════ */

.rec-page { background: #16161A; }

/* ── Header ── */
.rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 56px;
  background: rgba(22,22,26,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: sticky;
  top: 0;
  z-index: 50;
}
.rec-back {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.rec-back:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.07); }
.rec-header-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.rec-quota {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}
.rec-quota-num {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sage);
}
.rec-quota-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}

/* ── Main layout ── */
.rec-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1.25rem 2.5rem;
  min-height: calc(100vh - 56px);
  gap: 1.25rem;
}

/* ── Mode toggle ── */
.rec-mode-toggle {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  overflow: hidden;
}
.rec-mode-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rec-mode-btn.active {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
}
.rec-mode-btn:hover:not(.active) { color: rgba(255,255,255,0.7); }

/* ── Preview area ── */
.rec-preview-wrap {
  width: 100%;
  max-width: 640px;
}
.rec-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1A1A1E;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder */
.rec-placeholder,
.rec-audio-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255,255,255,0.25);
  font-size: 0.82rem;
  text-align: center;
  padding: 1rem;
}

/* Audio waveform (animated when active) */
.audio-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 48px;
}
.wave-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--sage);
  opacity: 0.4;
  animation: wave 1s ease-in-out infinite;
  height: 12px;
}
.wave-bar:nth-child(1) { animation-delay: 0s;    height: 16px; }
.wave-bar:nth-child(2) { animation-delay: 0.1s;  height: 28px; }
.wave-bar:nth-child(3) { animation-delay: 0.2s;  height: 40px; }
.wave-bar:nth-child(4) { animation-delay: 0.15s; height: 48px; }
.wave-bar:nth-child(5) { animation-delay: 0.25s; height: 36px; }
.wave-bar:nth-child(6) { animation-delay: 0.1s;  height: 28px; }
.wave-bar:nth-child(7) { animation-delay: 0.2s;  height: 20px; }
.wave-bar:nth-child(8) { animation-delay: 0.05s; height: 14px; }
.wave-bar:nth-child(9) { animation-delay: 0.3s;  height: 8px; }
@keyframes wave {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50%       { transform: scaleY(1.5); opacity: 0.8; }
}
.rec-page.is-recording .wave-bar { opacity: 1; animation-duration: 0.6s; }
@media (prefers-reduced-motion: reduce) { .wave-bar { animation: none; } }

/* Live badge */
.rec-live-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.55);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E24B4A;
  animation: pulse-dot 1.2s ease-in-out infinite;
}
.is-paused .rec-dot { animation: none; background: rgba(255,255,255,0.4); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Paused overlay */
.rec-paused-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}

/* Timer overlay */
/* Self-timer: 3-2-1 countdown over the stage before recording starts.
   Parity with the app's record screen. */
.rec-countdown-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0,0,0,0.35);
  border-radius: inherit;
  z-index: 5;
}
.rec-countdown-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.rec-countdown-hint {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.rec-timer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 0.5rem;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary, #555450);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E3E0D8);
  border-radius: 999px;
  cursor: pointer;
}
.rec-timer-toggle:hover { border-color: var(--sage, #5E7F5C); }
.rec-timer-toggle[aria-pressed="true"] {
  background: var(--sage, #5E7F5C);
  border-color: var(--sage, #5E7F5C);
  color: #fff;
}

.rec-timer-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: rgba(0,0,0,0.55);
  border-radius: 6px;
  padding: 4px 10px;
}
.rec-elapsed {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  min-width: 2.6ch;
}
.rec-timer-sep { font-size: 0.85rem; color: rgba(255,255,255,0.35); }
.rec-limit     { font-size: 0.85rem; color: rgba(255,255,255,0.45); }

/* Warning when time is short */
.rec-time-warn .rec-elapsed { color: #F0A050; }
.rec-time-crit .rec-elapsed { color: #E24B4A; animation: pulse-dot 0.8s ease-in-out infinite; }

/* Review thumbnail */
.rec-review-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0F0F12;
}
.rec-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.rec-play-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.05); }
.rec-review-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.55);
  padding: 3px 8px;
  border-radius: 6px;
}

/* Progress bar */
.rec-progress-wrap {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}
.rec-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--sage);
  border-radius: 2px;
  transition: width 1s linear, background 0.3s;
}
.rec-time-warn  .rec-progress-bar { background: var(--amber); }
.rec-time-crit  .rec-progress-bar { background: #E24B4A; }

/* ── Shared state wrapper ── */
.rec-state {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ── IDLE state ── */
.rec-tip {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin: 0;
}
.rec-controls-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
/* Big record button */
.rec-btn-record {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: none;
  border: 3px solid rgba(226,75,74,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.rec-btn-record:hover { border-color: rgba(226,75,74,0.8); transform: scale(1.04); }
.rec-btn-record:active { transform: scale(0.97); }
.rec-btn-record-inner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #E24B4A;
  display: block;
  transition: transform 0.15s;
  box-shadow: 0 0 20px rgba(226,75,74,0.4);
}
.rec-btn-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

/* Device selectors */
.rec-devices {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.rec-device-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  color: rgba(255,255,255,0.45);
  font-size: 0.8rem;
  cursor: pointer;
}
.rec-device-select {
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 0.8rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.rec-device-select option { background: #2C2C2A; color: #fff; }
.rec-help-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color 0.15s;
}
.rec-help-link:hover { color: var(--sage); }

/* ── RECORDING / PAUSED controls ── */
.rec-controls-active {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}
.rec-btn-pause,
.rec-btn-resume {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.12s;
}
.rec-btn-pause {
  background: rgba(200,133,74,0.18);
  color: var(--amber);
  border: 1.5px solid rgba(200,133,74,0.35);
}
.rec-btn-pause:hover { background: rgba(200,133,74,0.28); }
.rec-btn-resume {
  background: var(--sage);
  color: #fff;
  border: 1.5px solid var(--sage);
}
.rec-btn-resume:hover { background: var(--sage-dk); }
.rec-btn-stop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rec-btn-stop:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ── REVIEW state ── */
.rec-review-head { text-align: center; }
.rec-review-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.3rem;
}
.rec-review-sub { font-size: 0.88rem; color: rgba(255,255,255,0.4); margin: 0; }

/* Notify / legacy toggles */
.rec-notify-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  width: 100%;
}
.rec-notify-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.rec-check-box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.rec-notify-label input:checked + .rec-check-box {
  background: var(--sage);
  border-color: var(--sage);
}
.rec-notify-label input:checked + .rec-check-box::after {
  content: '';
  display: block;
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.rec-legacy-label { margin-top: -0.25rem; }
.rec-legacy-hint { font-size: 0.78rem; color: rgba(255,255,255,0.3); }

/* Trim panel on the review step (dark review panel) */
.rec-trim-panel { width:100%; background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.15); border-radius:var(--radius-sm); padding:0.9rem 1rem; margin-bottom:0.9rem; }
.rec-trim-head { font-size:0.88rem; color:rgba(255,255,255,0.85); margin:0 0 0.7rem; }
.rec-trim-head strong { color:#fff; }
.rec-trim-head span { color:rgba(255,255,255,0.5); }
.rec-trim-row { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem; }
.rec-trim-row label { flex:0 0 40px; font-size:0.8rem; color:rgba(255,255,255,0.6); }
.rec-trim-row input[type="range"] { flex:1; accent-color:var(--sage); }
.rec-trim-val { flex:0 0 44px; font-size:0.82rem; color:rgba(255,255,255,0.85); text-align:right; font-variant-numeric:tabular-nums; }
.rec-trim-actions { display:flex; gap:0.6rem; margin-top:0.6rem; }
.rec-trim-hint { font-size:0.75rem; color:rgba(255,255,255,0.4); margin:0.6rem 0 0; line-height:1.5; }

/* Note field on the review step (dark review panel) */
.rec-note-wrap { width: 100%; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.25rem; }
.rec-note-label { font-size: 0.88rem; color: rgba(255,255,255,0.65); }
.rec-note-input {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  resize: vertical;
  min-height: 56px;
}
.rec-note-input::placeholder { color: rgba(255,255,255,0.35); }
.rec-note-input:focus { outline: none; border-color: var(--sage); }

/* Review actions */
.rec-review-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.rec-btn-save {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  background: var(--sage);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.rec-btn-save:hover { background: var(--sage-dk); box-shadow: 0 4px 16px rgba(74,123,111,0.35); }
.rec-btn-save:active { transform: translateY(1px); }

.rec-review-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.rec-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem;
  font-size: 0.88rem;
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rec-btn-secondary:hover { background: rgba(255,255,255,0.12); color: #fff; }
/* The upload button stands alone in a text-align:center wrapper — as a
   block-level flex box it hugged the left edge (text-align can't move block
   boxes). Inline-flex lets the wrapper center it; the grid usages of
   .rec-btn-secondary are untouched. */
.rec-upload-wrap .rec-btn-secondary { display: inline-flex; }

/* ── SAVED state ── */
.rec-saved-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1rem 0;
}
.rec-saved-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(74,123,111,0.18);
  border: 1.5px solid rgba(74,123,111,0.35);
  display: flex; align-items: center; justify-content: center;
}
.rec-saved-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: rgba(255,255,255,0.9);
  margin: 0;
}
.rec-saved-sub { font-size: 0.92rem; color: rgba(255,255,255,0.4); margin: 0; }
.rec-saved-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}
.rec-saved-actions .btn-primary { background: var(--sage); border-color: var(--sage); }
.rec-saved-actions .btn-ghost {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
.rec-saved-actions .btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }
.rec-saved-quota { font-size: 0.8rem; color: rgba(255,255,255,0.25); margin: 0; }

/* ── Confirm dialog ── */
.rec-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 300;
}
.rec-dialog {
  background: #222228;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.75rem;
  max-width: 360px;
  width: 100%;
}
.rec-dialog h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.6rem;
}
.rec-dialog p { font-size: 0.88rem; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 1.25rem; }
.rec-dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.rec-btn-discard {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: #9B2335;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.rec-btn-discard:hover { background: #7D1B29; }
.rec-dialog .btn-ghost {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.65);
  padding: 0.6rem 1.25rem;
}
.rec-dialog .btn-ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .rec-header-title { display: none; }
  .rec-review-secondary { grid-template-columns: 1fr; }
  .rec-controls-active { flex-direction: column; width: 100%; }
  .rec-btn-pause, .rec-btn-resume, .rec-btn-stop { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════
   MY PEOPLE PAGE (my-people.html)
   ═══════════════════════════════════════ */

/* ── Page header ── */
.mp-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 2rem 0 1.5rem;
}
.mp-page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.mp-page-sub { font-size: 0.93rem; color: var(--text-ter); margin: 0; }

/* ── Section shell ── */
.mp-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.mp-section-legacy { border-top: 3px solid var(--purple); }

.mp-section-head {
  padding: 1.5rem 1.5rem 0;
}
.mp-section-label-wrap {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.mp-section-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.mp-icon-sage   { background: var(--sage-lt);   color: var(--sage); }
.mp-icon-purple { background: var(--purple-lt); color: var(--purple); }

.mp-section-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.mp-section-head p {
  font-size: 0.875rem;
  color: var(--text-sec);
  margin: 0;
  line-height: 1.55;
}

/* ── Person list ── */
.mp-person-list {
  list-style: none;
  border-top: 1px solid var(--border);
  margin: 0;
}
.mp-person-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.mp-person-item:last-child { border-bottom: none; }
.mp-person-item:hover { background: var(--cream); }

/* ── Avatars ── */
.mp-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mp-avatar-teal   { background: var(--sage-lt);   color: var(--sage-dk); }
.mp-avatar-purple { background: var(--purple-lt); color: var(--purple); }
.mp-avatar-rose   { background: var(--rose-lt);   color: var(--rose); }
.mp-avatar-amber  { background: #FDF5ED; color: var(--amber-dk); }

/* ── Person info ── */
.mp-person-info { flex: 1; min-width: 0; }
.mp-person-name-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mp-person-name {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--navy);
  display: block;
}
.mp-person-meta {
  font-size: 0.8rem;
  color: var(--text-ter);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Status badges ── */
.mp-status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mp-badge-active  { background: var(--sage-lt);   color: var(--sage-dk); }
.mp-badge-pending { background: #FAEEDA;           color: var(--amber-dk); }
.mp-badge-backup  { background: var(--purple-lt);  color: var(--purple); }

/* ── Action links ── */
.mp-action-link {
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sage);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.mp-action-link:hover { color: var(--sage-dk); text-decoration: underline; }
.mp-action-remove { color: var(--text-ter); }
.mp-action-remove:hover { color: #9B2335; }

/* ── Add / invite button ── */
.mp-add-wrap { padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.mp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sage);
  background: none;
  border: 1.5px dashed rgba(74,123,111,0.35);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
  justify-content: center;
}
.mp-add-btn:hover { background: var(--sage-lt); border-color: var(--sage); }

/* ── Inline expand form ── */
.mp-inline-form {
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border-top: 1px solid var(--border);
  animation: slide-down 0.2s ease;
}
.mp-inline-form-inner {
  margin: 1rem 0 0;
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--cream);
}
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mp-form-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.mp-form-desc {
  font-size: 0.85rem;
  color: var(--text-sec);
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.mp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}
.mp-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.mp-form-actions .btn {
  padding: 0.65rem 1.25rem;
  font-size: 0.88rem;
}
.mp-form-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sage-dk);
  margin-top: 0.875rem;
  padding: 0.6rem 0.875rem;
  background: var(--sage-lt);
  border-radius: var(--radius-sm);
}
.mp-form-success svg { color: var(--sage); flex-shrink: 0; }

/* ── Guardian cards ── */
.mp-guardian-card {
  margin: 0 1.5rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.mp-guardian-primary { border-color: rgba(83,74,183,0.25); }
.mp-guardian-backup  { border-color: var(--border); }
.mp-guardian-card-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
}
.mp-guardian-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--purple-lt);
  color: var(--purple);
  white-space: nowrap;
}
.mp-badge-backup {
  background: #FDF5ED;
  color: var(--amber-dk);
}
.mp-backup-actions { display: flex; gap: 0.75rem; margin-left: auto; }

/* ── Trust strip ── */
.mp-trust-strip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.125rem;
  background: var(--cream);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.mp-trust-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
}
.mp-trust-ok { color: var(--sage-dk); }
.mp-trust-ok svg { color: var(--sage); }
.mp-trust-warn { color: var(--amber-dk); }
.mp-trust-warn svg { color: var(--amber); }

.mp-trust-test-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sage);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.mp-trust-test-btn:hover { color: var(--sage-dk); text-decoration: underline; }
.mp-test-sent {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sage-dk);
}
.mp-test-sent svg { color: var(--sage); }

/* ── Backup section ── */
.mp-backup-wrap { padding: 0 1.5rem 1.25rem; }
.mp-backup-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-bottom: 0.75rem;
}
.mp-backup-label svg { color: var(--text-ter); }
.mp-add-backup-btn { border-style: dashed; }

/* ── Legacy explainer note ── */
.mp-legacy-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 1.5rem 1.5rem;
  padding: 0.875rem 1rem;
  background: var(--purple-lt);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.mp-legacy-note svg { color: var(--purple); flex-shrink: 0; margin-top: 1px; }
.mp-legacy-note p { color: var(--purple); margin: 0; line-height: 1.6; }
.mp-legacy-note a { color: var(--purple); font-weight: 600; }
.mp-legacy-note a:hover { text-decoration: none; }

/* ── Remove dialog ── */
.mp-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 300;
}
.mp-dialog {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.mp-dialog h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.mp-dialog p { font-size: 0.88rem; color: var(--text-sec); line-height: 1.6; margin-bottom: 1.25rem; }
.mp-dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.mp-dialog-confirm-btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: #9B2335;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.mp-dialog-confirm-btn:hover { background: #7D1B29; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .mp-form-row { grid-template-columns: 1fr; }
  .mp-person-item { flex-wrap: wrap; gap: 0.6rem; }
  .mp-status-badge { order: -1; }
  .mp-section-head { padding: 1.25rem 1rem 0; }
  .mp-guardian-card { margin: 0 1rem 1rem; }
  .mp-backup-wrap { padding: 0 1rem 1rem; }
  .mp-legacy-note { margin: 0 1rem 1.25rem; }
  .mp-add-wrap { padding: 0.875rem 1rem; }
  .mp-inline-form { padding: 1rem; }
}

/* ═══════════════════════════════════════
   MY VIDEOS PAGE (my-videos.html)
   ═══════════════════════════════════════ */

/* ── Page header ── */
.mv-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0 1.25rem;
  flex-wrap: wrap;
}
.mv-page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.mv-page-sub { font-size: 0.93rem; color: var(--text-ter); margin: 0; }
.mv-record-btn { font-size: 0.88rem; padding: 0.6rem 1.1rem; white-space: nowrap; }

/* Floating "New memory" — shown by JS once the header button scrolls away.
   z-index 500: above content, below dialogs (600). */
.mv-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.8rem 1.2rem;
  background: var(--sage, #5E7F5C);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mv-fab.mv-fab-show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mv-fab:hover { background: var(--sage-dark, #4C6B4A); color: #fff; }
@media (max-width: 640px) {
  .mv-fab { right: 14px; bottom: 14px; padding: 0.85rem; }
  .mv-fab .mv-fab-label { display: none; } /* icon-only on phones */
}

/* ── Stats strip ── */
.mv-stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
.mv-stat { display: flex; flex-direction: column; gap: 1px; }
.mv-stat-num {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}
.mv-stat-label { font-size: 0.75rem; color: var(--text-ter); }
.mv-stat-div {
  width: 1px;
  height: 32px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Chapter + sort bar ── */
.mv-chapter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  gap: 1rem;
}
.mv-chapter-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-ter);
  letter-spacing: 0.03em;
}
.mv-chapter-label svg { color: var(--text-ter); flex-shrink: 0; }
.mv-sort-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.mv-sort-label { font-size: 0.8rem; color: var(--text-ter); }
.mv-sort-select {
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
  color: var(--text-sec);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 1.5rem;
}

/* ── Avatar photo editor ── */
.av-ed-stage { display:flex; justify-content:center; }
.av-ed-stage canvas { border-radius:var(--radius-sm); background:#111; cursor:grab; max-width:100%; }
.av-ed-stage canvas:active { cursor:grabbing; }

/* ── "What's new" changelog ── */
.pm-wn-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#C0392B; margin-left:6px; vertical-align:middle; }
.pm-wn-body { max-height:60vh; overflow:auto; }
.pm-wn-group { margin-bottom:1.1rem; }
.pm-wn-group h3 { font-family:'Playfair Display',serif; font-size:1rem; color:var(--navy); margin:0 0 0.5rem; padding-bottom:0.3rem; border-bottom:1px solid var(--border); }
[data-theme="dark"] .pm-wn-group h3 { color:var(--text); }
.pm-wn-group ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.45rem; }
.pm-wn-group li { font-size:0.85rem; color:var(--text-sec); line-height:1.55; }
.pm-wn-badge { display:inline-block; font-size:0.65rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:1px 7px; border-radius:20px; margin-right:0.45rem; vertical-align:1px; }
.pm-wn-new { background:var(--sage-lt); color:var(--sage-dk); }
.pm-wn-fix { background:#FBEFD6; color:#B7791F; }
[data-theme="dark"] .pm-wn-fix { background:rgba(224,168,46,0.2); color:#E8C168; }

/* ── 2FA recovery codes ── */
.as-tfa-recovery { font-size:0.83rem; color:var(--text-sec); margin:0.6rem 0 0; }
.tfa-codes-panel { margin-top:1rem; background:var(--sage-lt); border:1px solid rgba(74,123,111,0.3); border-radius:var(--radius); padding:1rem 1.1rem; }
.tfa-codes-panel h3 { font-size:0.95rem; font-weight:600; color:var(--sage-dk); margin:0 0 0.3rem; }
.tfa-codes-panel p { font-size:0.83rem; color:var(--sage-dk); margin:0 0 0.8rem; line-height:1.5; }
.tfa-codes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.5rem; }
.tfa-codes-grid code { background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.45rem 0.6rem; font-size:0.85rem; text-align:center; letter-spacing:0.08em; color:var(--navy); }
[data-theme="dark"] .tfa-codes-grid code { background:var(--surface-2); color:var(--text); }
[data-theme="dark"] .tfa-codes-panel { border-color:rgba(107,165,147,0.4); }

/* ── Upgrade nudges (Free plan) — gentle, benefit-led, never blocking ── */
.pm-upsell { background:var(--sage-lt); border:1px solid rgba(74,123,111,0.3); border-radius:var(--radius); padding:1rem 1.1rem; margin:0 0 1rem; text-align:left; }
.pm-upsell h3 { font-size:0.95rem; font-weight:600; color:var(--sage-dk); margin:0 0 0.3rem; font-family:'Inter',sans-serif; }
.pm-upsell p { font-size:0.85rem; color:var(--sage-dk); margin:0 0 0.75rem; line-height:1.55; }
.pm-upsell .btn { font-size:0.83rem; padding:0.5rem 1rem; }
.pm-upsell-banner { display:flex; align-items:center; gap:1rem; background:var(--sage-lt); border:1px solid rgba(74,123,111,0.3); border-radius:var(--radius); padding:0.85rem 1.1rem; margin-bottom:1.25rem; }
.pm-upsell-banner p { flex:1; font-size:0.88rem; color:var(--sage-dk); margin:0; line-height:1.5; }
.pm-upsell-banner .btn { font-size:0.83rem; padding:0.5rem 1rem; flex-shrink:0; white-space:nowrap; }
.pm-upsell-dismiss { background:none; border:none; cursor:pointer; color:var(--sage-dk); font-size:1.25rem; line-height:1; padding:0.25rem 0.4rem; flex-shrink:0; }
[data-theme="dark"] .pm-upsell, [data-theme="dark"] .pm-upsell-banner { border-color:rgba(107,165,147,0.4); }

/* Guardian notify-now-or-later checkbox */
.mp-notify-check { display:flex; align-items:flex-start; gap:0.5rem; margin:0.25rem 0 0.9rem; cursor:pointer; font-size:0.83rem; color:var(--text-sec); line-height:1.5; }
.mp-notify-check input { margin-top:2px; flex-shrink:0; }
.mp-notify-check em { color:var(--text-ter); font-style:normal; }

/* ── Date search / filter bar ── */
.mv-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.mv-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 240px;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
}
.mv-search-wrap svg { color: var(--text-ter); flex-shrink: 0; }
.mv-search-input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--text);
}
.mv-search-input::placeholder { color: var(--text-ter); }
.mv-date-range { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mv-filter-label { font-size: 0.8rem; color: var(--text-ter); }
.mv-date-input {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--text-sec);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.5rem;
}
.mv-filter-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sage-dk);
  padding: 0.32rem 0.4rem;
}
.mv-filter-clear:hover { text-decoration: underline; }
.mv-filter-note { font-size: 0.78rem; color: var(--text-ter); margin-left: auto; }

/* Select-videos mode */
.mv-select-bar { display:flex; align-items:center; gap:0.75rem; margin-bottom:1rem; background:var(--sage-lt); border:1px solid rgba(74,123,111,0.3); border-radius:var(--radius); padding:0.6rem 1rem; }
.mv-select-bar span { font-size:0.85rem; font-weight:600; color:var(--sage-dk); flex:1; }
.mv-select-wrap { display:flex; align-items:center; flex-shrink:0; }
.mv-select-wrap input { width:18px; height:18px; accent-color:var(--sage); cursor:pointer; }
[data-theme="dark"] .mv-select-bar { border-color:rgba(107,165,147,0.4); }

/* Pagination footer */
.mv-more-wrap { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.mv-more-count { font-size: 0.82rem; color: var(--text-ter); }
.mv-more-btn { font-size: 0.82rem; padding: 0.45rem 1rem; }

/* ── Video list ── */
.mv-list {
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mv-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  position: relative;
}
.mv-item:last-child { border-bottom: none; }
.mv-item:hover { background: var(--cream); }
.mv-item-legacy { background: #FAF8FF; }
.mv-item-legacy:hover { background: #F3F0FF; }

/* Month group headers (collapsible) */
.mv-month-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.25rem;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  font-family: 'Inter', sans-serif;
}
.mv-month-header:hover { background: var(--border); }
.mv-month-header:last-child { border-bottom: none; }
.mv-month-chevron { color: var(--text-ter); flex-shrink: 0; transition: transform 0.15s; }
.mv-month-collapsed .mv-month-chevron { transform: rotate(-90deg); }
.mv-month-title { font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.mv-month-count { font-size: 0.75rem; color: var(--text-ter); margin-left: auto; }
.mv-month-header:focus-visible { outline: 2px solid var(--sage); outline-offset: -2px; }

/* Thumbnail */
.mv-thumb-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.mv-thumb-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.mv-thumb-img { position: relative; overflow: hidden; }
.mv-thumb-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv-thumb-play {
  position: relative;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.65));
}
.mv-thumb {
  width: 96px;
  height: 62px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.mv-thumb-video { background: #2C2C2A; }
.mv-thumb-audio { background: #1B2A4A; }
.mv-thumb-legacy { opacity: 0.7; }
.mv-thumb-btn:hover .mv-thumb { opacity: 0.85; }

/* Item body */
.mv-item-body { flex: 1; min-width: 0; }
.mv-item-top {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}
.mv-title {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.mv-title-untitled { color: var(--text-sec); font-style: italic; font-weight: 400; }
.mv-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }

/* Badges */
.mv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}
.mv-badge-new    { background: var(--sage-lt); color: var(--sage-dk); }
.mv-badge-legacy { background: var(--purple-lt); color: var(--purple); }
.mv-badge-important { background: #FBEFD6; color: #B7791F; }
/* Important videos get a subtle gold accent bar */
.mv-item-important { box-shadow: inset 3px 0 0 #E0A82E; }
/* Private note under the meta row */
.mv-note {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-sec);
  margin: 0.4rem 0 0;
  line-height: 1.45;
  white-space: pre-wrap;
}
.mv-note svg { flex-shrink: 0; margin-top: 2px; color: var(--text-ter); }

/* Meta row */
.mv-item-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-ter);
  flex-wrap: wrap;
}
.mv-meta-dot { opacity: 0.4; }
.mv-legacy-note {
  font-size: 0.75rem;
  color: var(--purple);
  margin: 0.35rem 0 0;
  opacity: 0.75;
}

/* Three-dot menu button */
.mv-item-actions { flex-shrink: 0; padding-top: 2px; }
.mv-menu-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--text-ter);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.mv-menu-btn:hover { background: var(--border); color: var(--navy); }
.mv-menu-btn.active { background: var(--border); color: var(--navy); }

/* Load more */
.mv-load-more { display: flex; justify-content: center; padding: 1rem; }
.mv-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sage);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.mv-load-btn:hover { background: var(--sage-lt); }

/* Empty state */
.mv-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mv-empty-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.mv-empty-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.mv-empty-sub { font-size: 0.93rem; color: var(--text-ter); margin-bottom: 1.5rem; }

/* ── Context menu ── */
.mv-context-menu {
  position: fixed;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: 400;
  overflow: hidden;
  animation: slide-down 0.15s ease;
}
.mv-ctx-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-sec);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.mv-ctx-item:hover { background: var(--cream); color: var(--navy); }
.mv-ctx-item svg { color: var(--text-ter); flex-shrink: 0; }
.mv-ctx-danger { color: #9B2335; }
.mv-ctx-danger svg { color: #C0392B; }
.mv-ctx-danger:hover { background: #FDF0F0; }
.mv-ctx-divider { height: 1px; background: var(--border); }

/* ── Player modal ── */
.mv-player-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 500;
}
.mv-player-inner {
  background: #16161A;
  border-radius: var(--radius);
  width: 100%;
  max-width: 680px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.mv-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mv-player-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-player-close {
  background: rgba(255,255,255,0.07);
  border: none;
  border-radius: 6px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: background 0.15s, color 0.15s;
}
.mv-player-close:hover { background: rgba(255,255,255,0.14); color: #fff; }

.mv-player-screen {
  position: relative;
  aspect-ratio: 16/9;
  background: #0F0F12;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv-player-placeholder { display: flex; align-items: center; justify-content: center; }
.mv-player-audio-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  font-size: 0.85rem; color: rgba(255,255,255,0.3);
}

/* Player controls overlay */
.mv-player-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  padding: 2rem 1.25rem 1rem;
}
.mv-player-progress { margin-bottom: 0.75rem; }
.mv-player-bar {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
}
.mv-player-fill { height: 100%; background: var(--sage); border-radius: 2px; }
.mv-player-thumb {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.mv-player-btns {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mv-player-time, .mv-player-dur {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}
.mv-player-dur { margin-left: auto; }
.mv-player-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  transition: color 0.15s;
}
.mv-player-btn:hover { color: #fff; }
.mv-player-play-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none; cursor: pointer;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.mv-player-play-btn:hover { background: rgba(255,255,255,0.25); }

.mv-player-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mv-player-date { font-size: 0.8rem; color: rgba(255,255,255,0.35); margin: 0; }
.mv-player-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--purple-lt);
  color: var(--purple);
}

/* ── Delete dialog ── */
.mv-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 600;
}
.mv-dialog {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.mv-dialog h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.mv-dialog p { font-size: 0.88rem; color: var(--text-sec); line-height: 1.6; margin-bottom: 1.25rem; }
.mv-dialog p strong { color: var(--navy); }
.mv-dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.mv-dialog-delete-btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  background: #9B2335;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.mv-dialog-delete-btn:hover { background: #7D1B29; }
.mv-dialog .btn-ghost {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .mv-thumb { width: 72px; height: 46px; }
  .mv-item { gap: 0.75rem; padding: 0.875rem 1rem; }
  .mv-stats { gap: 0.875rem; padding: 0.875rem 1rem; }
  .mv-stat-num { font-size: 1.1rem; }
  .mv-page-head { flex-direction: column; }
  .mv-record-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════
   LEGACY SETTINGS (legacy-settings.html)
   ═══════════════════════════════════════ */

.ls-shell { max-width: 720px; }

/* ── Page header ── */
.ls-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem 0 1.5rem;
  flex-wrap: wrap;
}
.ls-page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.ls-page-sub { font-size: 0.93rem; color: var(--text-ter); margin: 0; }
.ls-people-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sage);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.45rem 0;
  margin-top: 0.2rem;
}
.ls-people-link:hover { text-decoration: underline; }

/* ── Shared card shell ── */
.ls-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.ls-card-inner { padding: 1.5rem; }

/* Coloured top border variants */
.ls-card-status  { border-top: 3px solid var(--sage); }
.ls-card-deploy  { border-top: 3px solid var(--amber); }
.ls-card-download { border-top: 3px solid var(--purple); }

.ls-card-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.ls-card-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.ls-card-head p { font-size: 0.875rem; color: var(--text-sec); margin: 0; line-height: 1.55; }

.ls-card-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.ls-icon-sage   { background: var(--sage-lt);   color: var(--sage); }
.ls-icon-purple { background: var(--purple-lt); color: var(--purple); }
.ls-icon-amber  { background: #FDF5ED;           color: var(--amber); }

/* ── STATUS CARD ── */
.ls-status-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.ls-status-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ls-status-ok   { background: var(--sage-lt);   color: var(--sage); }
.ls-status-warn { background: #FDF5ED;           color: var(--amber); }
.ls-status-crit { background: #FDF0F0;           color: #C0392B; }

.ls-status-text { flex: 1; min-width: 0; }
.ls-status-label {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.ls-status-sub { font-size: 0.85rem; color: var(--text-sec); margin: 0; }

.ls-checkin-btn { font-size: 0.85rem; padding: 0.55rem 1rem; white-space: nowrap; flex-shrink: 0; }

/* Progress bar */
.ls-timeline-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.ls-timeline-fill {
  height: 100%;
  background: var(--sage);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.ls-timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-ter);
  margin-bottom: 0.875rem;
}
.ls-tl-left {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.ls-tl-left svg { color: var(--sage); }
.ls-tl-left strong, .ls-tl-right strong { color: var(--navy); }

.ls-checkin-flash {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sage-dk);
  padding: 0.6rem 0.875rem;
  background: var(--sage-lt);
  border-radius: var(--radius-sm);
  margin-bottom: 0.875rem;
}
.ls-checkin-flash svg { color: var(--sage); }

.ls-status-note {
  font-size: 0.82rem;
  color: var(--text-ter);
  border-top: 1px solid var(--border);
  padding-top: 0.875rem;
  margin: 0;
  line-height: 1.6;
}

/* ── TIMER CARD ── */
.ls-timer-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  margin-bottom: 1rem;
}
.ls-timer-opt { cursor: pointer; }
.ls-timer-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ls-timer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 0.875rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.ls-timer-opt input:focus-visible + .ls-timer-card { outline: 2px solid var(--sage); outline-offset: 2px; }
.ls-timer-opt input:checked + .ls-timer-card,
.ls-timer-selected {
  border-color: var(--purple);
  background: var(--purple-lt);
}
.ls-timer-card:hover { border-color: #C0BDB7; }
.ls-timer-opt input:checked + .ls-timer-card:hover { border-color: var(--purple); }

.ls-timer-days {
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}
.ls-timer-opt input:checked + .ls-timer-card .ls-timer-days { color: var(--purple); }
.ls-timer-unit { font-size: 0.8rem; color: var(--text-ter); }
.ls-timer-badge {
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--purple);
  color: #fff;
  padding: 1px 7px;
  border-radius: 20px;
  margin-top: 0.1rem;
}
.ls-timer-desc {
  font-size: 0.75rem;
  color: var(--text-ter);
  line-height: 1.5;
  margin-top: 0.35rem;
}

.ls-save-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  flex-wrap: wrap;
}
.ls-save-row .btn { font-size: 0.88rem; padding: 0.6rem 1.1rem; }
.ls-save-confirm {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sage-dk);
}
.ls-save-confirm svg { color: var(--sage); }

/* ── DEPLOYMENT CARD ── */
.ls-deploy-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.65rem 0.875rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.ls-deploy-inactive { background: var(--cream); color: var(--text-sec); border: 1px solid var(--border); }
.ls-deploy-inactive svg { color: var(--text-ter); }
.ls-deploy-paused { background: #FDF5ED; color: var(--amber-dk); border: 1px solid rgba(200,133,74,0.25); }
.ls-deploy-paused svg { color: var(--amber); }

.ls-deploy-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--amber-dk);
  background: #FDF5ED;
  border: 1.5px solid rgba(200,133,74,0.35);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 1rem;
}
.ls-deploy-trigger:hover { background: #FAE9D5; }

.ls-field-hint { font-size: 0.75rem; color: var(--text-ter); margin-top: 3px; display: block; }

.ls-deploy-cancel-btn {
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-ter);
  cursor: pointer;
  padding: 0.4rem 0;
  text-decoration: underline;
  transition: color 0.15s;
}
.ls-deploy-cancel-btn:hover { color: #9B2335; }

/* Military verify strip */
.ls-mil-verify {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1.125rem;
}
.ls-mil-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.ls-mil-text { flex: 1; min-width: 200px; }
.ls-mil-title { font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 0.25rem; }
.ls-mil-sub   { font-size: 0.8rem; color: var(--text-sec); margin: 0; line-height: 1.55; }
.ls-idme-btn {
  font-size: 0.82rem;
  padding: 0.55rem 1rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ls-mil-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sage-dk);
  padding: 0.5rem 0.875rem;
  background: var(--sage-lt);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.ls-mil-verified svg { color: var(--sage); }

/* ── HOW IT WORKS ── */
.ls-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1rem;
  position: relative;
}
.ls-steps::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--border);
}
.ls-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  position: relative;
}
.ls-step-num {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--purple-lt);
  color: var(--purple);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
  border: 2px solid #fff;
}
.ls-step-num-final {
  background: var(--sage-lt);
  color: var(--sage);
}
.ls-step-body { flex: 1; padding-top: 3px; }
.ls-step-body strong { display: block; font-size: 0.9rem; font-weight: 600; color: var(--navy); margin-bottom: 0.2rem; }
.ls-step-body p { font-size: 0.82rem; color: var(--text-sec); margin: 0; line-height: 1.55; }

.ls-how-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--text-ter);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 0.875rem;
}
.ls-how-note svg { color: var(--text-ter); flex-shrink: 0; margin-top: 1px; }

/* ── DOWNLOAD CARD ── */
.ls-download-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.ls-download-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--sage-lt);
  display: flex; align-items: center; justify-content: center;
}
.ls-download-text { flex: 1; min-width: 200px; }
.ls-download-text h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.25rem;
}
.ls-download-text p { font-size: 0.85rem; color: var(--text-sec); margin: 0; line-height: 1.55; }
.ls-download-btn { font-size: 0.85rem; padding: 0.6rem 1rem; white-space: nowrap; flex-shrink: 0; }

.ls-download-progress {
  padding: 0 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ls-dl-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.ls-dl-fill { height: 100%; background: var(--sage); width: 0%; transition: width 0.4s ease; border-radius: 2px; }
.ls-download-progress span { font-size: 0.78rem; color: var(--text-ter); }

/* Active dropdown item */
.app-dropdown-item-active { color: var(--navy) !important; background: var(--cream); font-weight: 600; }

/* ── Responsive ── */
@media (max-width: 580px) {
  .ls-timer-options { grid-template-columns: 1fr; }
  .ls-status-row { flex-direction: column; align-items: flex-start; }
  .ls-checkin-btn { width: 100%; justify-content: center; }
  .ls-download-inner { flex-direction: column; align-items: flex-start; }
  .ls-download-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════
   FORGOT PASSWORD
   ═══════════════════════════════════════ */
/* Reuses auth-page, auth-card, auth-form patterns — no new CSS needed */

/* ═══════════════════════════════════════
   CHECK-IN PAGE (checkin.html)
   ═══════════════════════════════════════ */
.checkin-page { background: var(--cream); }
.ci-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem 2rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.ci-card-success { border-top: 3px solid var(--sage); }
.ci-card-error   { border-top: 3px solid #C0392B; }

.ci-spinner svg { animation: spin 1s linear infinite; }
.ci-verifying-text { font-size: 0.93rem; color: var(--text-sec); margin: 0; }

.ci-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ci-icon-ok  { background: var(--sage-lt); }
.ci-icon-err { background: #FDF0F0; }

.ci-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.ci-body {
  font-size: 0.93rem;
  color: var(--text-sec);
  line-height: 1.7;
  margin: 0;
  max-width: 360px;
}

.ci-progress-wrap { width: 100%; }
.ci-progress-bar  { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; }
.ci-progress-fill { height: 100%; background: var(--sage); border-radius: 3px; width: 0%; transition: width 1.2s ease; }
.ci-progress-labels {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: var(--text-ter);
}
.ci-progress-labels span:first-child { display: flex; align-items: center; gap: 0.3rem; color: var(--sage-dk); }
.ci-progress-labels svg { color: var(--sage); }
.ci-progress-labels strong { color: var(--navy); }

.ci-actions { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; }
.ci-actions .btn { width: 100%; justify-content: center; }
.ci-dismiss { font-size: 0.8rem; color: var(--text-ter); margin: 0; }

/* ═══════════════════════════════════════
   ACCOUNT SETTINGS
   ═══════════════════════════════════════ */
.as-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  margin-bottom: 1rem;
}
.as-form-col { display: flex; flex-direction: column; gap: 0.875rem; margin-bottom: 1rem; }
.as-save-row { display: flex; align-items: center; gap: 0.875rem; }
.as-save-row .btn { font-size: 0.875rem; padding: 0.6rem 1.1rem; }

/* Email verified badge */
.as-email-wrap { position: relative; }
.as-verified-badge {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sage-dk);
  pointer-events: none;
}
.as-email-wrap .field-input { padding-right: 5.5rem; }

/* 2FA toggle */
.as-toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
}
.as-toggle-btn {
  width: 44px; height: 24px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.as-toggle-btn[aria-checked="true"] { background: var(--sage); }
.as-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: left 0.2s;
}
.as-toggle-btn[aria-checked="true"] .as-toggle-knob { left: 22px; }

.as-tfa-setup {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  animation: slide-down 0.2s ease;
}
.as-tfa-inner { display: flex; gap: 1.5rem; align-items: flex-start; }
.as-tfa-qr { flex-shrink: 0; }
.as-tfa-steps { flex: 1; }
.as-tfa-step { font-size: 0.85rem; color: var(--text-sec); margin-bottom: 0.5rem; line-height: 1.55; }
.as-tfa-code {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  background: var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--navy);
  letter-spacing: 0.05em;
}
.as-tfa-enabled-state, .as-tfa-active-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sage-dk);
  padding: 0.6rem 0.875rem;
  background: var(--sage-lt);
  border-radius: var(--radius-sm);
  margin-top: 1rem;
}
.as-tfa-active-badge svg { color: var(--sage); }

/* Subscription card */
.as-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.as-sub-detail { display: flex; flex-direction: column; gap: 3px; }
.as-sub-plan  { font-size: 0.93rem; font-weight: 600; color: var(--navy); }
.as-sub-next  { font-size: 0.8rem; color: var(--text-ter); }
.as-sub-next strong { color: var(--navy); }
.as-sub-badge {
  font-size: 0.72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  background: var(--sage-lt); color: var(--sage-dk);
  white-space: nowrap; flex-shrink: 0;
}
.as-sub-btn { font-size: 0.85rem; padding: 0.55rem 1rem; }
.as-sub-note { font-size: 0.8rem; color: var(--text-ter); margin: 0.6rem 0 0; line-height: 1.55; }
.as-sub-actions { display: flex; flex-direction: column; align-items: flex-start; }
/* Military discount note */
.as-mil-note { display:flex; gap:0.6rem; align-items:flex-start; background:#FDF5ED; border:1px solid rgba(200,133,74,0.3); border-radius:var(--radius-sm); padding:0.75rem 0.9rem; margin-bottom:1rem; font-size:0.83rem; color:var(--text-sec); line-height:1.5; }
.as-mil-note svg { flex-shrink:0; margin-top:1px; }
/* Plan switcher */
.as-plan-switch { margin-bottom:1rem; }
.as-plan-switch-head { font-size:0.82rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-ter); margin-bottom:0.6rem; }
.as-plan-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.75rem; }
.as-plan-opt { position:relative; text-align:left; display:flex; flex-direction:column; gap:0.2rem; padding:0.9rem 1rem; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.as-plan-opt:hover { border-color:var(--purple); }
.as-plan-opt.as-plan-opt-selected { border-color:var(--amber); box-shadow:0 0 0 3px rgba(200,133,74,0.28); }
.as-plan-opt.as-plan-opt-selected .as-plan-opt-name { color:var(--amber-dk); }
.as-plan-opt-current { border-color:var(--purple); }
.as-plan-opt-tag { position:absolute; top:0; right:0; background:var(--sage-lt); color:var(--sage-dk); font-size:0.68rem; font-weight:600; padding:2px 8px; border-bottom-left-radius:8px; }
/* Pending selection (the plan you're switching TO) — stands out clearly from the muted "Current" badge */
.as-plan-opt-tag-new { position:absolute; top:0; right:0; background:var(--amber); color:#fff; font-size:0.68rem; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-bottom-left-radius:8px; box-shadow:0 1px 4px rgba(200,133,74,0.4); }
.as-plan-opt-name { font-size:0.9rem; font-weight:600; color:var(--navy); }
.as-plan-opt-price { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:600; color:var(--navy); }
.as-plan-opt-price span { font-family:'Inter',sans-serif; font-size:0.8rem; font-weight:400; color:var(--text-ter); }
.as-plan-opt-limit { font-size:0.78rem; color:var(--text-ter); }
.as-plan-save-row { display:flex; align-items:center; gap:0.75rem; margin-top:0.9rem; flex-wrap:wrap; }
.as-plan-saved { font-size:0.85rem; font-weight:600; color:var(--sage-dk); }

/* Danger zone */
.as-danger-card { border-top: 3px solid #C0392B; }
.as-icon-red { background: #FDF0F0; color: #C0392B; }
.as-delete-btn {
  font-size: 0.875rem;
  font-weight: 600;
  color: #9B2335;
  background: none;
  border: 1.5px solid rgba(192,57,43,0.3);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.as-delete-btn:hover { background: #FDF0F0; border-color: #C0392B; }

@media (max-width: 580px) {
  .as-form-row  { grid-template-columns: 1fr; }
  .as-tfa-inner { flex-direction: column; }
}

/* ═══════════════════════════════════════
   GUARDIAN WATCH PAGE
   ═══════════════════════════════════════ */
.gw-page { background: var(--cream); }

/* Handover banner */
.gw-banner {
  background: var(--purple-lt);
  border: 1px solid rgba(83,74,183,0.2);
  border-radius: var(--radius);
  margin: 1.5rem 0 1.25rem;
  overflow: hidden;
}
.gw-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  flex-wrap: wrap;
}
.gw-banner-text { flex: 1; min-width: 240px; }
.gw-banner-title {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--purple-dk, #3C3489);
  margin-bottom: 0.35rem;
}
.gw-banner-sub {
  font-size: 0.875rem;
  color: var(--purple, #534AB7);
  line-height: 1.65;
  margin: 0;
  opacity: 0.85;
}
.gw-banner-sub strong { opacity: 1; color: var(--purple-dk, #3C3489); }
.gw-banner-actions { display: flex; flex-direction: column; gap: 0.6rem; flex-shrink: 0; }
.gw-download-all-btn {
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  background: var(--purple, #534AB7);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s;
  font-weight: 600;
}
.gw-download-all-btn:hover { background: #3C3489; }
.gw-what-next-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--purple, #534AB7);
  cursor: pointer;
  text-align: center;
  padding: 0;
  transition: text-decoration 0.15s;
}
.gw-what-next-btn:hover { text-decoration: underline; }

/* Explainer panel */
.gw-explainer {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  padding: 1.5rem;
  animation: slide-down 0.2s ease;
}
.gw-explainer-inner h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.gw-explainer-inner > p {
  font-size: 0.875rem;
  color: var(--text-sec);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.gw-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.gw-option {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.gw-option strong { display: block; font-size: 0.88rem; color: var(--navy); margin-bottom: 0.35rem; }
.gw-option p { font-size: 0.8rem; color: var(--text-sec); margin: 0; line-height: 1.55; }

/* Timeline header */
.gw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.gw-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.gw-meta { font-size: 0.85rem; color: var(--text-ter); margin: 0; }
.gw-sort-wrap { flex-shrink: 0; margin-top: 0.25rem; }

/* List extras */
.gw-list .mv-item { align-items: flex-start; }
.gw-dl-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-ter);
  padding: 6px;
  border-radius: 6px;
  display: flex;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
  margin-top: 2px;
}
.gw-dl-btn:hover { background: var(--border); color: var(--navy); }

/* Hearts + replies */
.gw-reply-strip {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.5rem;
}
.gw-heart-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-ter);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.gw-heart-btn:hover { border-color: #E87CA0; color: #993556; background: #FDF0F5; }
.gw-heart-btn[aria-pressed="true"],
.gw-heart-btn.gw-hearted { background: #FDF0F5; border-color: #E87CA0; color: #993556; }
.gw-heart-btn.gw-hearted svg { fill: currentColor; }
.gw-heart-btn[aria-pressed="true"] svg { fill: #993556; stroke: #993556; }
.gw-heart-count { min-width: 1ch; }
.gw-reply-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--sage);
  cursor: pointer;
  padding: 0;
  transition: text-decoration 0.15s;
}
.gw-reply-btn:hover { text-decoration: underline; }

.gw-reply-form {
  margin-top: 0.75rem;
  animation: slide-down 0.2s ease;
}
.gw-reply-input {
  width: 100%;
  padding: 0.6rem 0.875rem;
  font-size: 0.875rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.15s;
}
.gw-reply-input:focus { outline: none; border-color: var(--sage); background: #fff; }
.gw-reply-actions { display: flex; gap: 0.6rem; margin-top: 0.5rem; }

.gw-notes-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.gw-note-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--text-sec);
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  line-height: 1.5;
}
.gw-note-avatar {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--sage-lt);
  color: var(--sage-dk);
  font-size: 9px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

@media (max-width: 600px) {
  .gw-banner-inner { flex-direction: column; }
  .gw-banner-actions { width: 100%; }
  .gw-download-all-btn { justify-content: center; }
  .gw-options { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   PUBLIC PAGES — shared styles
   ═══════════════════════════════════════ */
.pub-hero {
  background: var(--cream);
  text-align: center;
  padding: 5rem 1.5rem 4rem;
  border-bottom: 1px solid var(--border);
}
.pub-hero-inner { max-width: 720px; margin: 0 auto; }
.pub-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3rem); color:var(--navy); margin-bottom:1rem; line-height:1.2; }
.pub-hero-sub { font-size:1.05rem; color:var(--text-sec); line-height:1.7; max-width:580px; margin:0 auto; }
.pub-section { padding:4.5rem 0; }
.pub-section-alt { background:var(--sage-lt); }
.pub-narrow { max-width:680px; margin:0 auto; padding:0 1.5rem; }
.pub-lead { font-size:1.05rem; color:var(--text-sec); margin-bottom:1.5rem; line-height:1.7; }
.pub-note { display:flex; gap:0.5rem; align-items:flex-start; font-size:0.85rem; color:var(--text-ter); margin-top:1.5rem; line-height:1.6; border-top:1px solid var(--border); padding-top:1rem; }
.pub-note svg { color:var(--text-ter); flex-shrink:0; margin-top:1px; }
.pub-contact-strip { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.pub-contact-strip p { font-size:0.93rem; color:var(--text-sec); margin:0; }

/* How it works — step detail layout */
.pub-step-detail { display:flex; gap:2rem; align-items:flex-start; margin-bottom:3.5rem; }
.pub-step-alt { flex-direction:row-reverse; }
.pub-step-num { width:52px; height:52px; border-radius:50%; background:var(--purple-lt); color:var(--purple); font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:0.25rem; }
.pub-step-body { flex:1; }
.pub-step-body h2 { font-family:'Playfair Display',serif; font-size:1.75rem; color:var(--navy); margin-bottom:0.875rem; }
.pub-step-body p { font-size:0.93rem; color:var(--text-sec); line-height:1.75; margin-bottom:0.75rem; }
.pub-feature-list { list-style:none; display:flex; flex-direction:column; gap:0.5rem; margin-top:1rem; }
.pub-feature-list li { font-size:0.88rem; color:var(--text-sec); padding-left:1.25rem; position:relative; }
.pub-feature-list li::before { content:'✓'; position:absolute; left:0; color:var(--sage); font-weight:600; }

/* Numbered steps */
.pub-numbered-steps { list-style:none; display:flex; flex-direction:column; gap:0.875rem; counter-reset:steps; }
.pub-numbered-steps li { display:flex; gap:0.75rem; align-items:flex-start; font-size:0.93rem; color:var(--text-sec); line-height:1.6; }
.pub-numbered-steps li::before { content:counter(steps); counter-increment:steps; width:24px; height:24px; border-radius:50%; background:var(--purple-lt); color:var(--purple); font-size:0.78rem; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.pub-numbered-steps li strong { color:var(--navy); }

/* Pricing */
.pr-plan-wrap { max-width:680px; margin:0 auto; }
.pr-plan-card { background:#fff; border:1.5px solid var(--purple); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; margin-bottom:1.25rem; }
.pr-plan-head { background:var(--purple-lt); padding:2rem; text-align:center; border-bottom:1px solid rgba(83,74,183,0.15); }
.pr-plan-name { font-size:0.82rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--purple); display:block; margin-bottom:0.75rem; }
.pr-price-row { display:flex; align-items:baseline; gap:0.25rem; justify-content:center; margin-bottom:0.5rem; }
.pr-price { font-family:'Playfair Display',serif; font-size:3rem; font-weight:600; color:var(--navy); }
.pr-per { font-size:1rem; color:var(--text-sec); }
.pr-price-note { font-size:0.85rem; color:var(--text-ter); margin-bottom:1.25rem; }
.pr-plan-btn { display:block; width:100%; justify-content:center; font-size:1rem; padding:0.875rem; }
.pr-features { list-style:none; padding:1.5rem; display:flex; flex-direction:column; gap:0.75rem; }
.pr-features li { display:flex; align-items:center; gap:0.6rem; font-size:0.9rem; color:var(--text-sec); }
.pr-features svg { color:var(--sage); flex-shrink:0; }
.pr-mil-card { background:#fff; border:1px solid rgba(200,133,74,0.3); border-radius:var(--radius); padding:1.25rem; display:flex; gap:1rem; align-items:flex-start; }
.pr-mil-icon { width:40px; height:40px; border-radius:10px; background:#FDF5ED; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pr-mil-title { font-size:0.93rem; font-weight:600; color:var(--navy); margin-bottom:0.25rem; }
.pr-mil-desc { font-size:0.85rem; color:var(--text-sec); line-height:1.55; margin-bottom:0.5rem; }
.pr-mil-link { font-size:0.85rem; font-weight:600; color:var(--amber-dk); text-decoration:none; }
.pr-mil-link:hover { text-decoration:underline; }
/* Two-tier pricing */
.pr-tier-wrap { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.25rem; max-width:1040px; margin:0 auto 1.25rem; align-items:start; }
.pr-tier-card { position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.pr-tier-featured { border-color:var(--purple); box-shadow:var(--shadow-lg); }
.pr-tier-flag { position:absolute; top:0; right:0; background:var(--purple); color:#fff; font-size:0.72rem; font-weight:600; letter-spacing:0.04em; padding:0.3rem 0.7rem; border-bottom-left-radius:10px; z-index:1; }
.pr-tier-limit { font-size:0.92rem; color:var(--text-sec); margin-bottom:1rem; }
.pr-tier-limit strong { color:var(--navy); }
.pr-shared { max-width:760px; margin:0 auto 1.25rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; }
.pr-shared-head { font-size:0.82rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-ter); text-align:center; margin-bottom:1.25rem; }
.pr-features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem 1.5rem; padding:0; }
/* Plan comparison table */
.pr-compare-block { max-width:1040px; margin:0 auto 1.5rem; }
.pr-compare-wrap { overflow-x:auto; border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); background:#fff; }
.pr-compare { width:100%; border-collapse:collapse; font-size:0.9rem; min-width:540px; }
.pr-compare th, .pr-compare td { padding:0.7rem 1rem; text-align:center; border-bottom:1px solid var(--line); }
.pr-compare thead th { font-size:0.8rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--navy); background:var(--cream); }
.pr-compare thead th.pr-compare-prem { color:var(--purple); }
.pr-compare tbody th[scope="row"] { text-align:left; font-weight:500; color:var(--text-sec); white-space:nowrap; }
.pr-compare tbody td { color:var(--navy); font-variant-numeric:tabular-nums; }
.pr-compare tbody tr:last-child th, .pr-compare tbody tr:last-child td { border-bottom:none; }
.pr-compare .pr-yes { color:var(--sage); font-weight:700; }
.pr-compare-note { font-size:0.85rem; color:var(--text-ter); text-align:center; margin-top:0.85rem; }
@media (max-width:640px){ .pr-compare th, .pr-compare td { padding:0.55rem 0.6rem; font-size:0.82rem; } }
.pr-mil-card { max-width:760px; margin:0 auto; }
.pr-promise-list { list-style:none; display:flex; flex-direction:column; gap:1.25rem; }
.pr-promise-list li { font-size:0.93rem; color:var(--text-sec); line-height:1.7; padding-left:1.25rem; border-left:3px solid var(--sage); }
.pr-promise-list strong { color:var(--navy); display:block; margin-bottom:0.2rem; }

/* FAQ page section title */
.pub-faq-section-title { font-family:'Inter',sans-serif; font-size:1rem; font-weight:600; color:var(--text-ter); letter-spacing:0.04em; text-transform:uppercase; margin-bottom:0.75rem; }

/* Contact page */
.ct-quick-links { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:0.5rem; }
.ct-quick-item { display:flex; align-items:center; gap:0.75rem; padding:0.875rem 1rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); text-decoration:none; color:var(--text-sec); font-size:0.9rem; font-weight:500; transition:background 0.12s; }
.ct-quick-item:hover { background:var(--cream); color:var(--navy); }
.ct-quick-item svg:first-child { color:var(--sage); flex-shrink:0; }
.ct-quick-item svg:last-child { margin-left:auto; color:var(--text-ter); }

/* Help page */
.help-browser-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; margin-bottom:2.5rem; }
.help-browser-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.help-browser-card h3 { font-family:'Inter',sans-serif; font-size:0.95rem; font-weight:600; color:var(--navy); margin-bottom:0.75rem; }
.help-steps { padding-left:1.25rem; display:flex; flex-direction:column; gap:0.4rem; font-size:0.87rem; color:var(--text-sec); line-height:1.5; margin-bottom:0.875rem; }
.help-steps strong { color:var(--navy); }
.help-note { font-size:0.8rem; color:var(--text-ter); line-height:1.55; background:var(--cream); padding:0.6rem 0.875rem; border-radius:var(--radius-sm); }

/* Legal pages */
.legal-inner { max-width:720px; margin:0 auto; padding:0 1.5rem; }
.legal-title { font-family:'Playfair Display',serif; font-size:clamp(1.75rem,4vw,2.5rem); color:var(--navy); margin-bottom:1rem; }
.legal-lead { font-size:1.05rem; color:var(--text-sec); line-height:1.75; margin-bottom:2rem; }
.legal-inner h2 { font-family:'Inter',sans-serif; font-size:1.05rem; font-weight:600; color:var(--navy); margin:2.25rem 0 0.75rem; border-top:1px solid var(--border); padding-top:1.5rem; }
.legal-inner h2:first-of-type { border-top:none; padding-top:0; }
.legal-inner p { font-size:0.93rem; color:var(--text-sec); line-height:1.8; margin-bottom:0.75rem; }
.legal-highlight { background:var(--sage-lt); border:1px solid rgba(74,123,111,0.2); border-radius:var(--radius-sm); padding:1rem 1.125rem; margin:1.5rem 0; font-size:0.9rem; color:var(--text-sec); line-height:1.7; }
.legal-highlight strong { color:var(--navy); }
.legal-highlight-important { background:#FDF5ED; border-color:rgba(200,133,74,0.25); }

/* ═══════════════════════════════════════
   ADMIN PANEL (admin-dashboard.html)
   ═══════════════════════════════════════ */
.admin-page { background:var(--cream); }
.admin-nav { background:var(--navy); border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; z-index:100; }
.admin-nav-inner { max-width:none; margin:0; padding:0 1.5rem; height:56px; display:flex; align-items:center; gap:1rem; }
.admin-nav .logo { color:#fff; }
.admin-nav .logo svg { stroke:var(--sage); }
.admin-nav-badge { font-size:0.7rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.6); padding:3px 8px; border-radius:4px; }
.admin-nav-right { margin-left:auto; display:flex; align-items:center; gap:1.25rem; }
.admin-nav-user { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:rgba(255,255,255,0.6); }
.admin-avatar { width:28px; height:28px; border-radius:50%; background:var(--purple-lt); color:var(--purple); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.admin-nav-logout { font-size:0.82rem; color:rgba(255,255,255,0.4); text-decoration:none; transition:color 0.15s; }
.admin-nav-logout:hover { color:rgba(255,255,255,0.8); }

/* Full-width shell: the sidebar always hugs the far-left edge of the screen;
   the main content stays capped for readability. */
.admin-shell { display:flex; max-width:none; margin:0; min-height:calc(100vh - 56px); }

/* Sidebar */
.admin-sidebar { width:200px; flex-shrink:0; background:#fff; border-right:1px solid var(--border); padding:1rem 0; display:flex; flex-direction:column; gap:2px; }
.admin-nav-item { display:flex; align-items:center; gap:0.6rem; width:100%; padding:0.65rem 1.25rem; font-size:0.875rem; font-weight:500; color:var(--text-sec); background:none; border:none; cursor:pointer; text-align:left; border-left:2px solid transparent; transition:background 0.12s, color 0.12s, border-color 0.12s; }
.admin-nav-item:hover { background:var(--cream); color:var(--navy); }
.admin-nav-item.active { background:var(--purple-lt); color:var(--purple); border-left-color:var(--purple); font-weight:600; }
.admin-nav-count { margin-left:auto; font-size:0.72rem; font-weight:600; padding:1px 7px; border-radius:20px; background:var(--border); color:var(--text-sec); }
.admin-nav-count.admin-nav-count-alert { background:#FDF0F0; color:#C0392B; }

/* Main area */
.admin-main { flex:1; padding:2rem 1.5rem; min-width:0; max-width:1100px; }
.admin-section { }
.admin-page-title { font-family:'Playfair Display',serif; font-size:1.75rem; color:var(--navy); margin-bottom:1.5rem; }
.admin-sub-heading { font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-ter); margin-bottom:0.875rem; margin-top:1.5rem; }
.admin-save-row { display:flex; align-items:center; gap:0.875rem; }

/* Stat cards */
.admin-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:2rem; }
.admin-stat-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); }
.admin-stat-num { display:block; font-size:1.75rem; font-weight:600; color:var(--navy); margin-bottom:0.25rem; }
.admin-stat-sub { font-size:0.82rem; font-weight:400; color:var(--sage); }
.admin-stat-label { font-size:0.8rem; color:var(--text-ter); }

/* Queue items on dashboard */
.admin-queue-list { display:flex; flex-direction:column; gap:0.5rem; }
.admin-queue-item { display:flex; align-items:center; gap:0.875rem; padding:0.875rem 1rem; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; text-align:left; width:100%; transition:background 0.12s; }
.admin-queue-item:hover { background:var(--cream); }
.admin-queue-item p { margin:0; }
.admin-queue-title { font-size:0.9rem; font-weight:600; color:var(--navy); }
.admin-queue-meta  { font-size:0.78rem; color:var(--text-ter); }
.admin-queue-item svg { margin-left:auto; color:var(--text-ter); flex-shrink:0; }
.admin-queue-badge { width:28px; height:28px; border-radius:50%; font-size:0.8rem; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.admin-badge-red   { background:#FDF0F0; color:#C0392B; }
.admin-badge-amber { background:#FAEEDA; color:var(--amber-dk); }
.admin-badge-green  { background:var(--sage-lt); color:var(--sage-dk); font-size:0.72rem; padding:2px 7px; border-radius:20px; display:inline-block; width:auto; height:auto; }
.admin-badge-purple { background:var(--purple-lt); color:var(--purple); font-size:0.72rem; padding:2px 7px; border-radius:20px; display:inline-block; width:auto; height:auto; }

/* Users table */
.admin-section-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.admin-search-wrap { display:flex; align-items:center; gap:0.5rem; border:1px solid var(--border); border-radius:18px; padding:0.4rem 0.875rem; background:#fff; }
.admin-search { border:none; outline:none; font-size:0.85rem; font-family:'Inter',sans-serif; color:var(--text); background:transparent; width:220px; }
.admin-table-wrap { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:auto; box-shadow:var(--shadow); }
.admin-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.admin-table th { padding:0.6rem 1rem; text-align:left; font-size:0.75rem; font-weight:600; color:var(--text-ter); letter-spacing:0.04em; text-transform:uppercase; border-bottom:1px solid var(--border); background:var(--cream); white-space:nowrap; }
.admin-tr { border-bottom:1px solid var(--border); transition:background 0.1s; }
.admin-tr:last-child { border-bottom:none; }
.admin-tr:hover { background:var(--cream); }
.admin-table td { padding:0.75rem 1rem; vertical-align:middle; color:var(--text-sec); white-space:nowrap; }
.admin-td-user { white-space:nowrap; }
.admin-td-ip { font-family:'Courier New',monospace; font-size:0.82rem; }
.admin-user-name { font-weight:600; color:var(--navy); font-size:0.88rem; }
.admin-user-email { font-size:0.78rem; color:var(--text-ter); }
.admin-mil-tag { font-size:0.65rem; font-weight:600; padding:1px 6px; border-radius:20px; background:var(--purple-lt); color:var(--purple); margin-left:4px; vertical-align:middle; }
.admin-action-btn { background:none; border:none; cursor:pointer; font-size:1.1rem; color:var(--text-ter); padding:4px 8px; border-radius:4px; letter-spacing:0.15em; transition:background 0.12s,color 0.12s; }
.admin-action-btn:hover { background:var(--border); color:var(--navy); }
.admin-table-note { font-size:0.78rem; color:var(--text-ter); margin-top:0.75rem; display:flex; align-items:center; gap:0.4rem; }

/* User action dropdown */
/* Admin Stats page: chart cards with dependency-free inline SVG areas. */
.stats-chart-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}
.stats-chart-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; box-shadow: var(--shadow);
}
.stats-chart-title { font-size: 0.8rem; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.stats-chart-now { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin: 0.15rem 0 0.5rem; }
.stats-chart-card svg { display: block; width: 100%; height: auto; }
.stats-chart-empty { font-size: 0.82rem; color: var(--text-ter); padding: 1.4rem 0 0.8rem; text-align: center; }

/* "Take it with you" app-badges band (hidden until public store listings). */
.badges-band { background: var(--navy, #1B2A4A); padding: 3rem 1.5rem; }
.badges-band-inner {
  max-width: 960px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.badges-band-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.6rem; color: #fff; margin: 0 0 0.3rem; }
.badges-band-sub { color: rgba(255,255,255,0.75); font-size: 0.95rem; margin: 0; max-width: 46ch; }
.badges-band-btns { display: flex; align-items: center; gap: 0.4rem; }
.badges-band-btns img { display: block; }

/* Founding-reward chooser (dashboard modal) */
.reward-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
@media (max-width: 520px) { .reward-cards { grid-template-columns: 1fr; } }
.reward-card {
  display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start;
  padding: 1rem 1.1rem; text-align: left; cursor: pointer; font: inherit;
  background: var(--cream, #FAF9F6); border: 2px solid var(--border, #E2DFDA);
  border-radius: 12px; transition: border-color 0.15s, transform 0.1s;
}
.reward-card:hover { border-color: var(--sage, #5E7F5C); transform: translateY(-1px); }
.reward-card-title { font-weight: 600; color: var(--navy, #1B2A4A); font-size: 1rem; }
.reward-card-sub { font-size: 0.85rem; color: var(--text-sec, #4A5568); }

/* Sortable user-table headers: neutral ↕ until active, ▲/▼ via aria-sort. */
.admin-th-sort {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.admin-th-sort::after { content: '↕'; font-size: 0.75em; opacity: 0.35; }
.admin-th-sort:hover::after { opacity: 0.7; }
th[aria-sort="ascending"] .admin-th-sort::after { content: '▲'; opacity: 1; }
th[aria-sort="descending"] .admin-th-sort::after { content: '▼'; opacity: 1; }

.admin-user-menu { position:fixed; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); min-width:190px; z-index:400; overflow:hidden; }
.admin-user-menu-item { display:flex; align-items:center; gap:0.6rem; width:100%; padding:0.6rem 1rem; font-size:0.85rem; font-weight:500; color:var(--text-sec); background:none; border:none; cursor:pointer; text-align:left; transition:background 0.1s; }
.admin-user-menu-item:hover { background:var(--cream); color:var(--navy); }
.admin-user-menu-item svg { color:var(--text-ter); }
.admin-user-menu-danger { color:#9B2335; }
.admin-user-menu-danger svg { color:#C0392B; }
.admin-user-menu-danger:hover { background:#FDF0F0; }

/* Clickable user rows (open the user detail page) */
#section-users .admin-tr[data-user-id] { cursor:pointer; }

/* ── User detail page ── */
.aud-back { display:inline-flex; align-items:center; gap:0.4rem; background:none; border:none; cursor:pointer; font-size:0.85rem; font-weight:600; color:var(--text-sec); padding:0.25rem 0; margin-bottom:1rem; transition:color 0.12s; }
.aud-back:hover { color:var(--navy); }
.aud-head { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.aud-avatar { flex:0 0 auto; width:54px; height:54px; border-radius:50%; background:var(--purple-lt); color:var(--purple); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.15rem; }
.aud-head-main { min-width:0; }
.aud-name { font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--navy); margin:0 0 0.25rem; line-height:1.15; }
.aud-sub { font-size:0.85rem; color:var(--text-ter); margin:0 0 0.6rem; }
.aud-badges { display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }
.aud-tag { font-size:0.72rem; font-weight:600; padding:2px 9px; border-radius:20px; background:var(--cream); color:var(--text-sec); border:1px solid var(--border); }
.aud-tag-admin { background:var(--purple-lt); color:var(--purple); border-color:transparent; }
.aud-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.1rem; align-items:start; }
.aud-card { max-width:none; margin:0; }
.aud-card-danger .ls-card-inner { border-left:3px solid #C0392B; }
.aud-card-title { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--navy); margin:0 0 0.9rem; }
.aud-row { display:flex; justify-content:space-between; gap:1rem; padding:0.4rem 0; border-bottom:1px solid var(--border); font-size:0.85rem; }
.aud-row:last-of-type { border-bottom:none; }
.aud-k { color:var(--text-ter); flex:0 0 auto; }
.aud-v { color:var(--navy); text-align:right; font-weight:500; }
.aud-muted { color:var(--text-ter); font-weight:400; }
.aud-actions { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.9rem; }
.aud-inline { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-top:0.9rem; }
.aud-select { width:auto; min-width:120px; padding:0.5rem 0.7rem; font-size:0.85rem; }
.aud-unit { font-size:0.85rem; color:var(--text-ter); }
.aud-btn { font-size:0.82rem; padding:0.5rem 0.9rem; }
.aud-danger { color:#9B2335; border-color:#E4B9BE; }
.aud-danger:hover { background:#FDF0F0; }
.aud-hint { font-size:0.78rem; color:var(--text-ter); margin:0.6rem 0 0; }
.aud-log { display:flex; flex-direction:column; }
.aud-log-row { display:flex; gap:0.9rem; align-items:baseline; padding:0.45rem 0; border-bottom:1px solid var(--border); font-size:0.82rem; }
.aud-log-row:last-child { border-bottom:none; }
.aud-log-when { flex:0 0 auto; color:var(--text-ter); width:96px; }
.aud-log-act { flex:1 1 auto; color:var(--navy); }
.aud-log-who { flex:0 0 auto; color:var(--text-ter); }
.aud-ticket { padding:0.6rem 0; border-bottom:1px solid var(--border); }
.aud-ticket:last-of-type { border-bottom:none; }
.aud-ticket-head { display:flex; justify-content:space-between; align-items:center; gap:0.6rem; margin-bottom:0.35rem; }
.aud-ticket-subj { font-weight:600; color:var(--navy); font-size:0.85rem; margin:0 0 0.2rem; }
.aud-ticket-msg { font-size:0.83rem; color:var(--text-sec); margin:0; white-space:pre-wrap; }

/* Open-ticket highlight in the users list */
.admin-ticket-tag { font-size:0.65rem; font-weight:600; padding:1px 6px; border-radius:20px; background:#FBE3E6; color:#9B2335; margin-left:4px; vertical-align:middle; }
.admin-tr-ticket { box-shadow:inset 3px 0 0 #C0392B; }

/* ── Dashboard "Messages from support" ── */
.dsup-unread-badge { display:inline-block; font-size:0.68rem; font-weight:600; padding:2px 8px; border-radius:20px; background:#FBE3E6; color:#9B2335; margin-left:6px; vertical-align:middle; }
.dsup-item { border-bottom:1px solid var(--border); }
.dsup-item:last-child { border-bottom:none; }
.dsup-head { display:flex; align-items:center; gap:0.5rem; width:100%; background:none; border:none; cursor:pointer; padding:0.65rem 0; text-align:left; font-family:'Inter',sans-serif; }
.dsup-dot { width:8px; height:8px; border-radius:50%; background:#C0392B; flex-shrink:0; }
.dsup-subject { flex:1; min-width:0; font-size:0.86rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dsup-badge { font-size:0.66rem; font-weight:600; padding:2px 8px; border-radius:20px; flex-shrink:0; }
.dsup-badge-open { background:#FBE3E6; color:#9B2335; }
.dsup-badge-pending { background:#FBEFD6; color:#B7791F; }
.dsup-badge-resolved { background:var(--sage-lt); color:var(--sage-dk); }
.dsup-chevron { color:var(--text-ter); flex-shrink:0; transition:transform 0.15s; }
.dsup-head[aria-expanded="true"] .dsup-chevron { transform:rotate(180deg); }
.dsup-thread { padding:0.25rem 0 0.85rem; }
.dsup-msg { font-size:0.82rem; color:var(--text-sec); line-height:1.5; margin:0 0 0.5rem; padding:0.5rem 0.7rem; border-radius:var(--radius-sm); background:var(--cream); white-space:pre-wrap; }
.dsup-msg-support { background:var(--sage-lt); }
.dsup-msg strong { color:var(--navy); }
.dsup-when { color:var(--text-ter); font-size:0.72rem; }
.dsup-reply { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.6rem; }
.dsup-send { align-self:flex-end; font-size:0.8rem; padding:0.45rem 1rem; }
[data-theme="dark"] .dsup-subject, [data-theme="dark"] .dsup-msg strong { color:var(--text); }
[data-theme="dark"] .dsup-msg { background:var(--surface-2); }
[data-theme="dark"] .dsup-msg-support { background:var(--sage-lt); }

/* Admin ticket thread (review queue) */
.admin-ticket-thread { margin:0 0 1rem; }
.admin-ticket-reply { font-size:0.83rem; color:var(--text-sec); line-height:1.5; margin:0 0 0.45rem; padding:0.5rem 0.7rem; border-radius:var(--radius-sm); background:var(--sage-lt); white-space:pre-wrap; }
.admin-ticket-reply-user { background:var(--cream); }
.admin-ticket-reply strong { color:var(--navy); }

/* ── Shared-with-me page ── */
.sh-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin-bottom:1.75rem; }
.sh-card {
  display:flex; align-items:center; gap:0.9rem;
  background:#fff; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.2rem; text-decoration:none; box-shadow:var(--shadow);
  transition:border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.sh-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:var(--purple); }
.sh-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--purple-lt); color:var(--purple);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.05rem;
}
.sh-avatar { position:relative; overflow:hidden; }
.sh-avatar-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sh-card-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sh-card-name { font-weight:600; color:var(--navy); font-size:0.95rem; }
.sh-card-meta { font-size:0.8rem; color:var(--text-ter); }
.sh-card .dac-arrow { color:var(--text-ter); flex-shrink:0; }
[data-theme="dark"] .sh-card { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .sh-card-name { color:var(--text); }

/* Owner-side replies under the My Videos player */
.mv-player-replies { margin-top:0.6rem; }
.mv-replies-head { font-size:0.75rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-ter); margin:0 0 0.4rem; }
.mv-replies-hearts { display:inline-block; font-size:0.85rem; color:var(--rose); margin-bottom:0.35rem; }
.mv-replies-note { font-size:0.85rem; color:var(--text-sec); margin:0.25rem 0 0; line-height:1.45; }
.mv-replies-note strong { color:var(--navy); }
[data-theme="dark"] .mv-replies-note strong { color:var(--text); }

/* Review queues */
.admin-queue-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.admin-queue-tab { padding:0.65rem 1.1rem; font-size:0.875rem; font-weight:500; color:var(--text-ter); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; display:flex; align-items:center; gap:0.5rem; transition:color 0.15s, border-color 0.15s; }
.admin-queue-tab:hover { color:var(--navy); }
.admin-queue-tab.active { color:var(--purple); border-bottom-color:var(--purple); font-weight:600; }
.admin-tab-count { font-size:0.7rem; font-weight:600; padding:1px 6px; border-radius:20px; }
.admin-review-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; margin-bottom:1rem; box-shadow:var(--shadow); }
.admin-review-card-alert { border-left:3px solid #C0392B; }
.admin-review-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:0.875rem; }
.admin-review-title { font-size:0.93rem; font-weight:600; color:var(--navy); margin-bottom:0.2rem; }
.admin-review-meta  { font-size:0.78rem; color:var(--text-ter); }
.admin-review-body  { font-size:0.875rem; color:var(--text-sec); line-height:1.65; margin-bottom:1rem; }
.admin-review-actions { display:flex; gap:0.75rem; flex-wrap:wrap; }
.admin-review-actions .btn { font-size:0.85rem; padding:0.55rem 1rem; }
.admin-deny-btn { color:#9B2335 !important; }
.admin-flagged-note { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; font-weight:500; color:var(--amber-dk); background:#FDF5ED; border-radius:var(--radius-sm); padding:0.6rem 0.875rem; margin-bottom:1rem; }
.admin-flagged-note svg { color:var(--amber); flex-shrink:0; }

/* Storage */
.admin-storage-overview { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.5rem; box-shadow:var(--shadow); }
.admin-storage-bar-wrap { margin-bottom:0.5rem; }
.admin-storage-bar { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.admin-storage-fill { height:100%; background:var(--sage); border-radius:4px; transition:width 0.5s; }
.admin-storage-labels { display:flex; justify-content:space-between; font-size:0.82rem; color:var(--text-ter); }
.admin-storage-labels strong { color:var(--navy); }
.admin-mini-bar { width:100%; height:6px; background:var(--border); border-radius:3px; overflow:hidden; min-width:80px; }
.admin-mini-bar div { height:100%; border-radius:3px; }

/* Settings */
.admin-setting-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 0; border-bottom:1px solid var(--border); }
.admin-setting-row:last-of-type { border-bottom:none; }
.admin-setting-label { font-size:0.875rem; color:var(--text-sec); flex:1; }
.admin-setting-input { max-width:100px; text-align:right; }

@media (max-width:768px) {
  .admin-shell { flex-direction:column; }
  .admin-sidebar { width:100%; flex-direction:row; overflow-x:auto; padding:0.5rem; border-right:none; border-bottom:1px solid var(--border); }
  .admin-nav-item { padding:0.5rem 0.875rem; font-size:0.8rem; border-left:none; border-bottom:2px solid transparent; }
  .admin-nav-item.active { border-left:none; border-bottom-color:var(--purple); }
  .pub-step-detail, .pub-step-alt { flex-direction:column; gap:1rem; }
  .pr-plan-wrap { max-width:100%; }
  .pr-tier-wrap { grid-template-columns:1fr; }
  .pr-features-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════
   REAL VIDEO RECORDING — extra styles
   ═══════════════════════════════════════ */

/* Live camera feed fills the preview area */
#rec-live-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* Mirror front-facing camera so it feels natural */
  transform: scaleX(-1);
}

/* Playback video fills the review-thumb area */
#rec-playback-video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  border-radius: inherit;
  object-fit: contain;
  /* Native controls are visible over the dark background */
}

/* Recording duration label below playback */
#rec-review-duration {
  position: absolute;
  bottom: 52px; /* just above native controls bar */
  right: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.45);
  padding: 2px 8px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}

/* While camera is initialising the record button shows a spinner overlay */
.btn-starting .rec-btn-record-inner {
  background: rgba(226,75,74,0.4);
  animation: pulse-dot 1s ease-in-out infinite;
}

/* Audio waveform is driven by real AnalyserNode — animated state */
.rec-page.is-recording .wave-bar { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   USER THEMES  — applied via [data-theme] on the user's app pages only
   (home, auth, and admin pages never set data-theme, so they stay default)
   ══════════════════════════════════════════════════════════ */

/* Accent themes: swap the primary colour family (buttons, links, highlights)
   and tint the page background (--cream) with a very light wash of the accent. */
[data-theme="ocean"]  { --sage:#2C6E9B; --sage-dk:#20567A; --sage-lt:#E6F0F7; --cream:#EFF5FA; }
[data-theme="plum"]   { --sage:#6B4FA8; --sage-dk:#543C87; --sage-lt:#EDE9F7; --cream:#F3F0FA; }
[data-theme="rose"]   { --sage:#B24A75; --sage-dk:#8E395C; --sage-lt:#F7EAF1; --cream:#FAF0F5; }
[data-theme="forest"] { --sage:#2F6B4A; --sage-dk:#23543A; --sage-lt:#E6F1EA; --cream:#EFF6F1; }

/* Dark theme */
[data-theme="dark"] {
  --cream:    #14181F;
  --border:   #2C333D;
  --text:     #E7EAEF;
  --text-sec: #B4BCC7;
  --text-ter: #8A93A0;
  /* --navy is used as TEXT everywhere on themed app pages (headings, values,
     labels) — lighten it globally so nothing renders dark-on-dark. Its few
     background uses are on public/auth pages, which never get data-theme. */
  --navy:     #E7EAEF;
  --sage:     #6BA593;
  --sage-dk:  #86BBAB;
  --sage-lt:  rgba(107,165,147,0.16);
  --purple-lt:rgba(123,111,208,0.18);
  --rose-lt:  rgba(180,90,130,0.18);
  --shadow:   0 2px 8px rgba(0,0,0,0.45);
  --shadow-lg:0 10px 34px rgba(0,0,0,0.55);
  --surface:  #1D232C;
  --surface-2:#262E39;
  color-scheme: dark;
}
[data-theme="dark"] body { background: var(--cream); color: var(--text); }

/* Card / panel surfaces (were white) */
[data-theme="dark"] .dash-card,
[data-theme="dark"] .ls-card,
[data-theme="dark"] .mv-item,
[data-theme="dark"] .mv-stats,
[data-theme="dark"] .mv-chapter-bar,
[data-theme="dark"] .mp-section,
[data-theme="dark"] .mp-person-item,
[data-theme="dark"] .mp-guardian-card,
[data-theme="dark"] .mp-inline-form,
[data-theme="dark"] .as-plan-opt,
[data-theme="dark"] .as-sub-row,
[data-theme="dark"] .ls-timer-card,
[data-theme="dark"] .checkin-banner,
[data-theme="dark"] .gw-banner,
[data-theme="dark"] .gw-explainer,
[data-theme="dark"] .gw-reply-input { background: var(--surface); border-color: var(--border); color: var(--text); }

/* Elevated surfaces: nav, dropdowns, menus, dialogs, player, inputs */
[data-theme="dark"] .app-nav,
[data-theme="dark"] .app-dropdown,
[data-theme="dark"] .mv-context-menu,
[data-theme="dark"] .mv-dialog,
[data-theme="dark"] .mv-player-inner,
[data-theme="dark"] .field-input,
[data-theme="dark"] .mv-sort-select,
[data-theme="dark"] .mv-search-wrap,
[data-theme="dark"] .mv-date-input,
[data-theme="dark"] .admin-setting-input { background: var(--surface-2); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .field-input::placeholder,
[data-theme="dark"] .mv-search-input::placeholder { color: var(--text-ter); }

/* Titles / numbers that use navy as text */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .mv-title,
[data-theme="dark"] .dropdown-name,
[data-theme="dark"] .dash-hello,
[data-theme="dark"] .mp-person-name,
[data-theme="dark"] .dac-title,
[data-theme="dark"] .recent-title,
[data-theme="dark"] .ls-status-label,
[data-theme="dark"] .mv-stat-num,
[data-theme="dark"] .as-sub-plan,
[data-theme="dark"] .legacy-summary strong,
[data-theme="dark"] .storage-label strong,
[data-theme="dark"] .app-nav-link { color: var(--text); }

/* Subtle tinted backgrounds → dark tints */
[data-theme="dark"] .storage-bar,
[data-theme="dark"] .ls-timeline-bar,
[data-theme="dark"] .pw-bar { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .btn-ghost { color: var(--text); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .as-theme-opt { background: var(--surface-2); border-color: var(--border); color: var(--text); }

/* Dark: fix contrast on the dashboard action tiles + My People section */
[data-theme="dark"] .dash-action-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .mp-section-head h2 { color: var(--text); }
[data-theme="dark"] .dash-action-record .dac-icon,
[data-theme="dark"] .mp-icon-purple { color: #A99CF0; }
[data-theme="dark"] .dash-action-people .dac-icon { color: #E495B8; }
[data-theme="dark"] .dash-action-videos .dac-icon,
[data-theme="dark"] .mp-icon-sage { color: #7FBBAA; }
/* Tinted note boxes: lighten the on-tint text so it reads in dark */
[data-theme="dark"] .mp-legacy-note p,
[data-theme="dark"] .mp-legacy-note a,
[data-theme="dark"] .mp-legacy-note svg,
[data-theme="dark"] .badge-legacy,
[data-theme="dark"] .mp-guardian-badge,
[data-theme="dark"] .mp-avatar-purple { color: #B7ACF2; }

/* Dark: remaining white-background stragglers + focus flashes */
[data-theme="dark"] .dash-quota,
[data-theme="dark"] .mv-list,
[data-theme="dark"] .mv-empty { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .field-input:focus,
[data-theme="dark"] .gw-reply-input:focus { background: var(--surface-2); }
[data-theme="dark"] .app-avatar-btn:hover { background: var(--surface-2); border-color: var(--border); }
/* Legacy settings: check-in dates + the selected 30/60/90 tile number */
[data-theme="dark"] .ls-timeline-labels strong { color: var(--text); }
[data-theme="dark"] .ls-timer-opt input:checked + .ls-timer-card .ls-timer-days { color: #A99CF0; }

/* Dark: legacy-settings handover steps ("Your timer runs out" list) */
[data-theme="dark"] .ls-step-body strong { color: var(--text); }
[data-theme="dark"] .ls-step-num { border-color: var(--surface); background: var(--purple-lt); color: #A99CF0; }
[data-theme="dark"] .ls-step-num-final { background: var(--sage-lt); color: #7FBBAA; }

/* Dark: My People remove-confirmation dialog (bg was hardcoded white) */
[data-theme="dark"] .mp-dialog { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .mp-dialog h3 { color: var(--text); }

/* Dark: change-plan cards (navy text) + military discount note (light cream bg) */
[data-theme="dark"] .as-plan-opt-name,
[data-theme="dark"] .as-plan-opt-price { color: var(--text); }
[data-theme="dark"] .as-plan-switch-head,
[data-theme="dark"] .as-plan-opt-limit { color: var(--text-sec); }
[data-theme="dark"] .as-mil-note { background: rgba(200,133,74,0.14); border-color: rgba(200,133,74,0.4); color: var(--text); }

/* Dark: month group headers (navy title → light) */
[data-theme="dark"] .mv-month-header { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .mv-month-header:hover { background: #2E3742; }
[data-theme="dark"] .mv-month-title { color: var(--text); }
[data-theme="dark"] .mv-badge-important { background: rgba(224,168,46,0.2); color: #E8C168; }

/* Theme picker (account settings) */
.as-theme-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0.6rem; }
.as-theme-opt { display:flex; align-items:center; gap:0.6rem; padding:0.7rem 0.9rem; background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; font-size:0.9rem; font-weight:500; color:var(--text); text-align:left; }
.as-theme-opt:hover { border-color:var(--sage); }
.as-theme-opt.as-theme-selected { border-color:var(--sage); box-shadow:0 0 0 3px var(--sage-lt); }
.as-theme-swatch { width:22px; height:22px; border-radius:50%; flex-shrink:0; }

/* In-app contact-support modal (injected on all app pages) */
.pm-modal-backdrop { position:fixed; inset:0; background:rgba(20,20,30,0.5); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:600; }
.pm-modal { position:relative; background:var(--surface,#fff); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%; max-width:440px; padding:1.5rem; max-height:90vh; overflow:auto; }
.pm-modal h2 { font-family:'Playfair Display',serif; font-size:1.35rem; color:var(--navy); margin:0 0 0.35rem; }
[data-theme="dark"] .pm-modal h2, [data-theme="dark"] .pm-modal h3 { color:var(--text); }
.pm-modal-sub { font-size:0.85rem; color:var(--text-sec); margin:0 0 1rem; }
.pm-modal-close { position:absolute; top:0.75rem; right:0.9rem; background:none; border:none; font-size:1.5rem; line-height:1; color:var(--text-ter); cursor:pointer; padding:0 0.25rem; }
.pm-modal-close:hover { color:var(--navy); }
[data-theme="dark"] .pm-modal-close:hover { color:var(--text); }
.pm-modal .field-group { margin-bottom:0.9rem; }
.pm-support-success { text-align:center; padding:1rem 0 0.5rem; }
.pm-support-success h3 { font-family:'Playfair Display',serif; font-size:1.2rem; color:var(--navy); margin:0.5rem 0 0.35rem; }
.pm-support-success p { font-size:0.88rem; color:var(--text-sec); margin:0; }


/* ── Our story (about.html) ──
   The founder story is the site's most personal writing: set it larger and
   looser than body copy so it reads like a letter, not marketing. */
.story p {
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--text-sec);
  margin-bottom: 1.5rem;
}
.story p:first-of-type::first-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3.4rem;
  line-height: 1;
  float: left;
  padding: 0.35rem 0.7rem 0 0;
  color: var(--sage);
}
.story-sign {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1rem !important;
  color: var(--text-ter) !important;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.story-promise { margin-bottom: 1.75rem; }
.story-promise h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.story-promise p {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--text-sec);
  margin: 0;
}
@media (max-width: 640px) {
  .story p { font-size: 1.05rem; line-height: 1.75; }
  .story p:first-of-type::first-letter { font-size: 2.8rem; }
}

/* ── Founder pull-quote band (index.html → about.html) ── */
.story-band { background: var(--sage-lt); padding: 4rem 0; }
.story-band-inner { max-width: 720px !important; text-align: center; }
.story-band-head {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-dk);
  margin-bottom: 1.25rem;
}
.story-band-quote { margin: 0; }
.story-band-quote p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--navy);
  margin-bottom: 1rem;
}
.story-band-quote footer { font-size: 0.9rem; color: var(--text-ter); }
.story-band-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sage-dk);
  text-decoration: none;
}
.story-band-link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .story-band { padding: 3rem 0; }
  .story-band-quote p { font-size: 1.22rem; }
}