/* =========================================================
   Property mockup — Option 2 "Aurora"
   Dark, glass-first layout: drifting aurora light, frosted
   panels, bento dashboards, floating capsule tab bar.
   Loads after ../styles.css (shared behavior + app.js).
   ========================================================= */

:root {
  --bg: var(--night);
  --bg-soft: #0c1714;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --ink: #f3f1ea;
  --ink-muted: rgba(243, 241, 234, 0.68);
  --ink-faint: rgba(243, 241, 234, 0.42);
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --accent: var(--glow);
  --accent-deep: #c4f5e3;
  --accent-soft: rgba(var(--glow-rgb), 0.14);
  --accent-mid: #3fb892;
  --gold: #f0c27e;
  --gold-soft: rgba(240, 194, 126, 0.14);
  --danger: #ff8a7a;
  --radius: 24px;
  --radius-sm: 16px;
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --blur: blur(22px) saturate(160%);
  --shadow: var(--glass-hi), var(--glass-shadow);
  --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

/* ---------- Stage ---------- */
body.aurora {
  color: var(--ink);
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(63, 184, 146, 0.28), transparent 60%),
    radial-gradient(700px 520px at 100% 100%, rgba(240, 150, 90, 0.18), transparent 60%),
    #050807;
}
.aurora .pitch-bar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--ink);
}
.aurora .pitch-sub { color: var(--ink-faint); }
.aurora .pitch-mark { background: linear-gradient(145deg, var(--glow), #2c8f73); color: var(--night-2); }
.aurora .demo-badge { background: var(--accent-soft); color: var(--accent); border-color: rgba(var(--glow-rgb), 0.3); }
.aurora .layout-switch { background: rgba(255, 255, 255, 0.07); }
.aurora .layout-switch a { color: var(--ink-muted); }
.aurora .layout-switch a.active { background: var(--ink); color: var(--night); }
.aurora .pitch-hint { color: var(--ink-faint); }
.aurora .pitch-hint strong { color: var(--ink); }
.aurora .phone-shell {
  background: linear-gradient(150deg, #3a3d3b, #111312 40%, #1d201f);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #454947, 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.aurora .phone-screen { background: var(--bg); }
.aurora .status-bar { color: var(--ink); }

/* ---------- Drifting aurora light ---------- */
.aurora-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora-bg i {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  animation: drift 22s ease-in-out infinite alternate;
}
.aurora-bg i:nth-child(1) { background: #1f8f6f; top: -120px; left: -110px; }
.aurora-bg i:nth-child(2) { background: #3a4fa8; top: 260px; right: -170px; opacity: 0.35; animation-duration: 28s; animation-delay: -6s; }
.aurora-bg i:nth-child(3) { background: #c46a3c; bottom: -180px; left: 10px; opacity: 0.3; animation-duration: 25s; animation-delay: -12s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.12); }
  100% { transform: translate(-30px, 60px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) { .aurora-bg i { animation: none; } }
.aurora .status-bar,
.aurora .app { position: relative; z-index: 1; }

/* ---------- Glass primitives ---------- */
.aurora .card,
.aurora .tile,
.aurora .plan-card,
.aurora .doc-item,
.aurora .req-item,
.aurora .method,
.aurora .gift,
.aurora .quick-action,
.aurora .perk-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: var(--radius);
  color: var(--ink);
}
.aurora .card + .card { margin-top: 12px; }
.aurora .divider { background: var(--line-soft); }

/* ---------- Type ---------- */
.aurora .page-header { margin: 6px 0 20px; }
.aurora .page-header h1 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
}
.aurora .page-header .sub { color: var(--ink-muted); font-size: 13px; margin-top: 4px; }
.aurora .section-label {
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.16em;
  margin: 26px 0 12px;
}
.aurora .back-btn { color: var(--accent); }
.aurora .fine-print { color: var(--ink-faint); }
.aurora .empty { color: var(--ink-faint); }

/* ---------- Buttons, pills, chips ---------- */
.aurora .btn { border-radius: 999px; font-weight: 650; }
.aurora .btn-primary {
  background: var(--ink);
  color: var(--night);
  box-shadow: 0 10px 30px rgba(var(--glow-rgb), 0.18);
}
.aurora .btn-primary:hover { background: #ffffff; }
.aurora .btn-primary:disabled { opacity: 0.4; }
.aurora .btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--glass-border); }
.aurora .btn-ghost { background: var(--accent-soft); color: var(--accent); }

.gbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-hi);
  transition: transform 0.15s ease, background 0.15s ease;
}
.gbtn.solid { background: var(--ink); color: var(--night); border-color: transparent; }
.gbtn.sm { min-height: 34px; padding: 7px 14px; font-size: 13px; }
.gbtn:active { transform: scale(0.97); }

.aurora .pill { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(240, 194, 126, 0.25); }
.aurora .pill.green { background: var(--accent-soft); color: var(--accent); border-color: rgba(var(--glow-rgb), 0.25); }
.aurora .chip {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  color: var(--ink-muted);
}
.aurora .chip.active,
.aurora .chip.selected { background: var(--ink); border-color: var(--ink); color: var(--night); }
.aurora .perk-chip { background: var(--accent-soft); color: var(--accent); border-color: rgba(var(--glow-rgb), 0.25); }
.aurora .perk-chip.gold { background: var(--gold-soft); color: var(--gold); border-color: rgba(240, 194, 126, 0.25); }

/* ---------- Top bar ---------- */
.aurora .top-bar { padding: 2px 16px 10px; }
.aurora .top-home {
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi);
  color: var(--ink);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  font-weight: 750;
}
.aurora .mode-strip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-soft);
}
.aurora .mode-strip button { color: var(--ink-muted); }
.aurora .mode-strip button.active { background: rgba(255, 255, 255, 0.16); color: var(--ink); box-shadow: var(--glass-hi); }
.aurora .top-events {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  box-shadow: var(--glass-hi);
}
.aurora .top-events.active { background: rgba(var(--glow-rgb), 0.2); border-color: rgba(var(--glow-rgb), 0.5); }
.aurora .top-events .badge { background: var(--accent); color: var(--night-2); border-color: var(--bg); }

/* ---------- Floating capsule tab bar ---------- */
.aurora .tab-bar {
  left: 14px;
  right: 14px;
  bottom: 16px;
  height: 64px;
  padding: 7px;
  border-radius: 32px;
  background: rgba(18, 26, 23, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 50px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
}
.aurora .tab { color: var(--ink-faint); border-radius: 24px; transition: background 0.2s ease, color 0.2s ease; }
.aurora .tab.active { color: var(--ink); background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.aurora .tab:active { background: rgba(255, 255, 255, 0.08); }
.aurora .tab svg { width: 21px; height: 21px; }
.aurora .home-indicator { background: rgba(255, 255, 255, 0.4); bottom: 5px; }
.aurora .screen { padding-bottom: calc(var(--tab-h) + 40px); }
.aurora .screen.no-tab { padding-bottom: 28px; }
.aurora .toast {
  background: rgba(243, 241, 234, 0.95);
  color: var(--night);
  bottom: calc(var(--tab-h) + 30px);
}
.aurora .demo-watermark {
  bottom: calc(var(--tab-h) + 30px);
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--line);
  color: var(--ink-muted);
}

/* ---------- Splash (main page) ---------- */
.aurora .mode-splash {
  padding: 0;
  background: var(--bg);
  justify-content: flex-end;
  overflow: hidden;
}
.sp-scene { position: absolute; inset: 0 0 34% 0; }
.sp-scene .scene { width: 100%; height: 100%; display: block; }
.sp-content {
  position: relative;
  padding: 0 22px 34px;
  display: flex;
  flex-direction: column;
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.sp-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 19px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  margin-bottom: 14px;
}
.sp-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 226, 180, 0.85); }
.aurora .mode-splash h1 {
  font-family: var(--display);
  font-size: 54px;
  font-weight: 780;
  letter-spacing: -0.05em;
  line-height: 0.95;
  margin: 8px 0 6px;
  background: linear-gradient(180deg, #ffffff 30%, rgba(255, 255, 255, 0.6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sp-tag { color: var(--ink-muted); font-size: 15px; margin-bottom: 22px; }
.sp-choices { display: flex; flex-direction: column; gap: 10px; }
.sp-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px;
  border-radius: 22px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--glass-hi);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: transform 0.15s ease, background 0.15s ease;
}
.sp-choice:hover { background: rgba(255, 255, 255, 0.13); }
.sp-choice:active { transform: scale(0.98); }
.sp-ico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--accent);
  color: var(--night-2);
}
.sp-choice + .sp-choice .sp-ico { background: var(--gold); }
.sp-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sp-txt strong { font-size: 16px; }
.sp-txt em { font-style: normal; font-size: 12.5px; color: var(--ink-muted); }
.sp-chev { font-size: 22px; color: var(--ink-faint); }
.sp-note { margin-top: 16px; text-align: center; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Explore (prospect) ---------- */
.x-hero {
  position: relative;
  height: 360px;
  margin: 0 -18px;
  overflow: hidden;
}
.x-hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-hero-copy { position: absolute; left: 18px; right: 18px; bottom: 18px; }
.x-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 226, 180, 0.9); }
.x-hero h1 {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 8px 0 16px;
  color: #fff;
}
.x-hero-cta { display: flex; gap: 8px; }
.x-hero-cta .gbtn { flex: 1; }

.x-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 16px 0 4px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-hi);
}
.x-stats div { padding: 14px 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.x-stats div + div { border-left: 1px solid var(--line-soft); }
.x-stats strong { font-size: 20px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.x-stats span { font-size: 11px; color: var(--ink-faint); }

.x-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; }
.x-head h2 { font-size: 21px; font-weight: 720; letter-spacing: -0.03em; }
.x-link { color: var(--accent); font-size: 13px; font-weight: 650; }

.x-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin: 0 -18px;
  padding: 0 18px 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.x-rail::-webkit-scrollbar { display: none; }
.x-home {
  flex-shrink: 0;
  width: 190px;
  scroll-snap-align: start;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px 14px;
  border-radius: 22px;
  color: var(--ink);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi);
}
.x-home-art {
  display: grid;
  place-items: center;
  height: 112px;
  margin-bottom: 8px;
  border-radius: 16px;
  color: var(--accent);
  background:
    radial-gradient(140px 90px at 70% 20%, rgba(var(--glow-rgb), 0.22), transparent 70%),
    rgba(255, 255, 255, 0.04);
}
.x-home-art svg { width: 120px; height: 80px; }
.x-home strong { font-size: 15px; padding: 0 4px; }
.x-home span { font-size: 12px; color: var(--ink-muted); padding: 0 4px; }
.x-home em { font-style: normal; font-size: 13px; font-weight: 650; color: var(--accent); padding: 4px 4px 0; }
.x-home:active { transform: scale(0.98); }

.x-contact { margin-top: 12px; }
.x-contact-actions { display: flex; gap: 8px; margin-top: 14px; }
.x-contact-actions .gbtn { flex: 1; min-height: 40px; }

/* ---------- Bento tiles (shared) ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  position: relative;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px;
  min-height: 118px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
button.tile:active { transform: scale(0.975); }
button.tile:hover { border-color: rgba(255, 255, 255, 0.22); }
.tile.t-wide { grid-column: span 2; }
.tile > span:not([class]) { font-size: 12.5px; color: var(--ink-muted); line-height: 1.35; }
.tile strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.t-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.tile .t-big { font-size: 38px; font-weight: 780; letter-spacing: -0.05em; line-height: 1; margin: 2px 0 2px; font-variant-numeric: tabular-nums; }
.t-ico { font-size: 20px; margin-bottom: 8px; }
.t-emoji { position: absolute; right: -6px; bottom: -10px; font-size: 64px; opacity: 0.9; transform: rotate(-12deg); pointer-events: none; }
.t-more { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 650; color: var(--accent); }
.t-quote {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.glow-jade { background: radial-gradient(260px 160px at 90% 0%, rgba(var(--glow-rgb), 0.35), transparent 70%), var(--glass-bg) !important; }
.glow-amber { background: radial-gradient(220px 160px at 100% 100%, rgba(240, 160, 90, 0.35), transparent 70%), var(--glass-bg) !important; }

.tile.t-row { flex-direction: row; align-items: center; gap: 12px; min-height: 0; margin-top: 10px; width: 100%; }
.tile.t-row .t-ico { margin: 0; }
.t-row-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.t-row-body strong { font-size: 15px; }
.t-row-body span { font-size: 12.5px; color: var(--ink-muted); }

/* ---------- Home (resident) ---------- */
.h-greet { display: flex; align-items: flex-end; justify-content: space-between; margin: 8px 0 18px; }
.h-hello { font-size: 13px; color: var(--ink-muted); }
.h-greet h1 { font-size: 40px; font-weight: 780; letter-spacing: -0.05em; line-height: 1; margin: 2px 0 4px; }
.h-sub { font-size: 12.5px; color: var(--ink-faint); }
.aurora .avatar { background: linear-gradient(145deg, #f0c27e, #b9824a); color: #1a0f05; box-shadow: none; }
.aurora .avatar.ring { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(var(--glow-rgb), 0.8); }

.t-rent {
  min-height: 176px;
  background:
    radial-gradient(300px 200px at 100% 0%, rgba(var(--glow-rgb), 0.3), transparent 65%),
    radial-gradient(240px 180px at 0% 100%, rgba(58, 79, 168, 0.35), transparent 70%),
    var(--glass-bg) !important;
}
.t-top { display: flex; justify-content: space-between; align-items: flex-start; }
.t-amount { font-size: 46px !important; font-weight: 780 !important; letter-spacing: -0.05em !important; line-height: 1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.t-amount small { font-size: 22px; color: var(--ink-muted); font-weight: 650; }
.t-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; }
.t-note { font-size: 12px; color: var(--accent); font-weight: 600; }
.due-ring {
  --p: 0.5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(closest-side, rgba(var(--night-rgb), 0.85) 78%, transparent 80% 100%),
    conic-gradient(var(--accent) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.12) 0);
}
.due-ring b { font-size: 17px; line-height: 1; }
.due-ring i { font-style: normal; font-size: 9px; color: var(--ink-faint); }

.faces { display: flex; align-items: center; margin-top: auto; padding-top: 10px; }
.faces i, .faces b {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-size: 8.5px; font-weight: 700;
  border: 2px solid #0c1714;
  margin-left: -6px;
}
.faces i:first-child { margin-left: 0; }
.faces i:nth-child(1) { background: var(--glow); color: var(--night-2); }
.faces i:nth-child(2) { background: #8fa4ff; color: #0a1030; }
.faces i:nth-child(3) { background: #f0c27e; color: #1a0f05; }
.faces b { background: rgba(255, 255, 255, 0.14); color: var(--ink); width: 30px; border-radius: 12px; }
.live-dot { position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(240, 194, 126, 0.6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(240, 194, 126, 0.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(240, 194, 126, 0); } }

/* ---------- Plans ---------- */
.aurora .plan-card { padding: 16px; }
.aurora .plan-card + .plan-card { margin-top: 10px; }
.aurora .plan-card .name { color: var(--ink); }
.aurora .plan-card .meta { color: var(--ink-muted); }
.aurora .plan-tag { background: rgba(255, 255, 255, 0.07); color: var(--ink-muted); }
.aurora .range-note { background: var(--gold-soft); border-color: rgba(240, 194, 126, 0.22); color: var(--ink-muted); }
.aurora .term { background: rgba(255, 255, 255, 0.05); }
.aurora .term .v { color: var(--ink); }
.aurora .feature-list li { color: var(--ink); }
.aurora .amenity-item { background: rgba(255, 255, 255, 0.05); color: var(--ink); }

/* ---------- Forms ---------- */
.aurora .form-group label { color: var(--ink-muted); }
.aurora .form-group input,
.aurora .form-group select,
.aurora .form-group textarea,
.aurora .composer textarea,
.aurora .composer-foot select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}
.aurora .form-group input:focus,
.aurora .form-group select:focus,
.aurora .form-group textarea:focus,
.aurora .composer textarea:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.09); }
.aurora ::placeholder { color: var(--ink-faint); }
.aurora option { color: #111; background: #fff; }
.aurora .slot { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); color: var(--ink-muted); }
.aurora .slot.selected { background: var(--ink); border-color: var(--ink); color: var(--night); }
.aurora .photo-drop { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.2); color: var(--ink-muted); }
.aurora .photo-drop.added,
.aurora .esign-box.signed { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.aurora .esign-box { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.22); color: var(--ink-muted); }

/* ---------- Pay ---------- */
.aurora .balance-block .amount { font-size: 48px; font-weight: 780; letter-spacing: -0.05em; color: var(--ink); }
.aurora .method.selected,
.aurora .gift.selected { border-color: var(--accent); background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.16), rgba(var(--glow-rgb), 0.06)); }
.aurora .method-icon { background: rgba(255, 255, 255, 0.08); color: var(--accent); }
.aurora .radio { border-color: rgba(255, 255, 255, 0.3); }
.aurora .switch { background: rgba(255, 255, 255, 0.18); }
.aurora .switch.on { background: var(--accent); }
.aurora .flex-preview { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); }
.aurora .success-ring { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 60px rgba(var(--glow-rgb), 0.35); }

/* ---------- Docs / lease / maintenance / profile ---------- */
.aurora .doc-icon,
.aurora .qa-icon,
.aurora .call-cta .icon-wrap,
.aurora .teaser-icon { background: rgba(255, 255, 255, 0.08); color: var(--accent); }
.aurora .tip-icon { background: var(--gold-soft); color: var(--gold); }
.aurora .doc-item .info strong,
.aurora .req-item .info strong { color: var(--ink); }
.aurora .pdf-preview { border: none; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.aurora .pdf-toolbar { background: #ece8e1; color: #444; }
.aurora .pdf-body { color: #222; }
.aurora .renewal-card { background: radial-gradient(260px 160px at 90% 0%, rgba(var(--glow-rgb), 0.3), transparent 70%), var(--glass-bg); border-color: var(--glass-border); }
.aurora .status-chip.open { background: var(--gold-soft); color: var(--gold); }
.aurora .status-chip.in-progress { background: rgba(143, 164, 255, 0.16); color: #aebcff; }
.aurora .status-chip.done { background: var(--accent-soft); color: var(--accent); }
.aurora .info-row { border-bottom-color: var(--line-soft); }
.aurora .info-row .v { color: var(--ink); }
.aurora .profile-hero h2 { font-size: 26px; font-weight: 760; letter-spacing: -0.03em; }
.aurora .profile-hero .avatar.lg { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(var(--glow-rgb), 0.8); }
.aurora .tip-card h3,
.aurora .perk-card h3 { color: var(--ink); }

/* ---------- Events ---------- */
.aurora .event-date {
  background: linear-gradient(180deg, rgba(var(--glow-rgb), 0.22), rgba(var(--glow-rgb), 0.06));
  border: 1px solid rgba(var(--glow-rgb), 0.25);
  color: var(--accent);
}
.aurora .event-date strong { color: var(--ink); }
.aurora .event-body h3 { color: var(--ink); }
.aurora .rsvp { background: var(--ink); color: var(--night); }
.aurora .rsvp.going { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.aurora .rsvp.locked { background: var(--gold-soft); color: var(--gold); border-color: rgba(240, 194, 126, 0.3); }

/* ---------- Community ---------- */
.aurora .post.pinned { background: radial-gradient(260px 140px at 100% 0%, rgba(var(--glow-rgb), 0.22), transparent 70%), var(--glass-bg); border-color: rgba(var(--glow-rgb), 0.3); }
.aurora .post-actions { border-top-color: var(--line-soft); }
.aurora .post-act:active { background: rgba(255, 255, 255, 0.08); }
.aurora .post-act.liked { color: #ff8fa3; }
.aurora .avatar.official { background: linear-gradient(145deg, var(--glow), #2c8f73); color: var(--night-2); }

/* ---------- Perks ---------- */
.aurora .perk-search { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line-soft); }
.aurora .perk-cat span { background: var(--glass-bg); border-color: var(--glass-border); }
.aurora .perk-cat.active { color: var(--ink); }
.aurora .perk-cat.active span { background: rgba(var(--glow-rgb), 0.22); border-color: var(--accent); }
.aurora .perk-hero {
  background:
    radial-gradient(260px 200px at 100% 100%, rgba(240, 160, 90, 0.45), transparent 70%),
    radial-gradient(260px 200px at 0% 0%, rgba(var(--glow-rgb), 0.35), transparent 70%),
    #0f1a17;
  border: 1px solid var(--glass-border);
}
.aurora .perk-hero .perk-hero-tag { background: var(--ink); color: var(--night); }
.aurora .perk-img { border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.aurora .perk-badge { background: rgba(var(--night-rgb), 0.75); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.aurora .perk-info strong { color: var(--ink); }
.aurora .perk-info em { color: var(--accent); }

/* ---------- Bottom sheet ---------- */
.aurora .sheet-backdrop { background: rgba(0, 0, 0, 0.55); }
.aurora .sheet {
  background: rgba(20, 28, 25, 0.9);
  border-top: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}
.aurora .sheet-grab { background: rgba(255, 255, 255, 0.25); }
.aurora .sheet h2 { color: var(--ink); font-weight: 760; letter-spacing: -0.03em; }
.aurora .sheet-detail { color: var(--ink); }
.aurora .code-box { background: var(--accent-soft); border-color: rgba(var(--glow-rgb), 0.5); color: var(--ink-muted); }
.aurora .code-box strong { color: var(--accent); }

/* ---------- Phones: full-bleed ---------- */
@media (max-width: 480px) {
  body.aurora { background: var(--bg); }
}

/* ---------- Polish ---------- */
.sp-mark { display: none; }
.x-hero::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 0%, rgba(var(--night-rgb), 0.75) 55%, rgba(var(--night-rgb), 0.95) 100%);
  pointer-events: none;
}
.x-hero-copy { z-index: 1; }
.sp-content::before {
  content: "";
  position: absolute;
  inset: -80px 0 0 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 0%, rgba(var(--night-rgb), 0.85) 35%, var(--bg) 60%);
}
.aurora .demo-watermark {
  top: 40px;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  font-size: 8px;
  padding: 2px 6px;
  opacity: 0.6;
}