/* ══════════════════════════════════════════════════════════════
   RHYTHME — Pastel Lavender/Peach Design System
   Dreamy lavender · soft peach · rounded · diffused · gentle
   Watercolor washes, soft borders, feminine illustration aesthetic.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* paper & surfaces — dreamy lavender/peach */
  --paper:      #f7f2fa;
  --paper-deep: #f0e8f5;
  --card:       rgba(255, 255, 255, 0.82);
  --card-solid: #ffffff;
  --sunken:     #f0eaf5;
  --line:       rgba(107, 82, 142, 0.15);
  --line-soft:  rgba(107, 82, 142, 0.08);

  /* type — deep lavender-plum */
  --ink:        #3d2f52;
  --cocoa:      #3d2f52;
  --taupe:      #7a6896;
  --faded:      #7a6896;

  /* accents — soft mauve-lavender and peach */
  --mauve:      #7a5c96;
  --terracotta: #d49a8a;
  --coral:      #e8a898;
  --coral-deep: #d89888;
  --gold:       #e5c98a;

  /* signature pastels */
  --lavender:   #c4b5e0;
  --periwinkle: #a8b8d8;
  --sage:       #a8c0a0;
  --sky:        #b8cde0;
  --blush:      #f5c6b8;

  /* six domains (softened) */
  --d-medical:  #9b7bb0;
  --d-cycle:    #d49ab8;
  --d-stress:   #e0a890;
  --d-exercise: #e0c080;
  --d-diet:     #9cbb90;
  --d-sleep:    #9ab0d0;

  /* status — softened */
  --ok:         #6ba88a;
  --warn:       #d4a85a;
  --low:        #c47a6a;

  /* Shared shell dimensions. JS replaces top/nav fallbacks with measured sizes. */
  --shell-safe-top: env(safe-area-inset-top, 0px);
  --shell-safe-bottom: env(safe-area-inset-bottom, 0px);
  --shell-safe-left: env(safe-area-inset-left, 0px);
  --shell-safe-right: env(safe-area-inset-right, 0px);
  --shell-top-size: calc(69px + var(--shell-safe-top));
  --shell-bottom-size: calc(82px + var(--shell-safe-bottom));
  --shell-text-scale: 1;
  --shell-base-font-size: 16px;

  --serif: 'Newsreader', Georgia, serif;
  --sans:  'Manrope', system-ui, sans-serif;
  --r: 22px; --r-sm: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--sans);
  font-size: var(--shell-base-font-size);
  color: var(--ink);
  background: var(--paper);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ── dreamy watercolor wash ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 30% at 82% 6%, rgba(196, 181, 224, 0.45), transparent 70%),
    radial-gradient(38% 26% at 8% 16%, rgba(245, 198, 184, 0.4), transparent 70%),
    radial-gradient(46% 30% at 90% 52%, rgba(214, 200, 235, 0.3), transparent 70%),
    radial-gradient(40% 26% at 4% 66%, rgba(200, 215, 240, 0.28), transparent 70%),
    radial-gradient(44% 30% at 70% 96%, rgba(248, 210, 200, 0.32), transparent 72%),
    radial-gradient(26% 18% at 50% 40%, rgba(255, 240, 235, 0.3), transparent 70%);
}

/* ── watercolor washes — removed for minimal design ── */
.washes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }
.washes::before { display: none; }
.washes::after { display: none; }
.dots { display: none; }
.dots i { display: none; }
.dots::before { display: none; }

/* ── phone column ── */
.app {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  min-width: 0;
  padding-top: calc(var(--shell-top-size) + 8px);
  padding-bottom: calc(var(--shell-bottom-size) + 16px);
}

/* ── top bar (fixed, stays visible) ── */
.top {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  z-index: 50;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: calc(14px + var(--shell-safe-top)) max(12px, var(--shell-safe-right)) 10px max(12px, var(--shell-safe-left));
  background: rgba(247, 242, 250, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(196, 181, 224, 0.2);
}
[data-theme="dark"] .top {
  background: rgba(30, 25, 45, 0.92);
  border-bottom-color: rgba(196, 181, 224, 0.15);
}
.top .t-title { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing:-.01em; flex:1; }
.top .t-icon {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-shrink: 0; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--card); border:2px solid var(--ink);
  color: var(--ink); text-decoration:none; font-size:19px;
  box-shadow: 0 2px 8px rgba(29,27,24,.08);
}
.brandline { display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.brandline .bdot { width:20px; height:20px; border-radius:6px;
  background: var(--ink); }
.brandline b { font-family:var(--serif); font-weight:800; font-size:21px; color:var(--ink); letter-spacing:-.01em; }

/* ── content ── */
.scroll { padding: 4px 18px 24px; display:flex; flex-direction:column; gap:16px; }

h2.sec { font-family:var(--serif); font-weight:800; font-size:19px; color:var(--ink); margin:8px 2px 0; letter-spacing:-.01em; }
.sub { font-size:13.5px; color:var(--taupe); line-height:1.5; }

/* ── cards — soft pastel with diffused borders ── */
.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: 0 8px 24px -12px rgba(107, 82, 142, 0.18);
  backdrop-filter: blur(8px);
}
.card.tint-lavender { background: rgba(196, 181, 224, 0.18); border-color: rgba(196, 181, 224, 0.4); }
.card.tint-sage     { background: rgba(168, 192, 160, 0.16); border-color: rgba(168, 192, 160, 0.35); }
.card.tint-blush    { background: #FCF6F5; border-color: var(--blush); }
.card.tint-gold     { background: #FDFAF3; border-color: var(--gold); }

.row { display:flex; align-items:center; gap:12px; }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }

/* metric tiles */
.metric { text-align:center; padding:12px 6px; border-radius:var(--r-sm); background:var(--sunken); border:1.5px solid var(--line-soft); }
.metric .m-ic { font-size:19px; margin-bottom:4px; }
.metric .m-v { font-family:var(--serif); font-size:17px; font-weight:800; color:var(--ink); }
.metric .m-l { font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--taupe); font-weight:700; margin-top:2px; }

/* pills & badges */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  padding:4px 11px; border-radius:99px; letter-spacing:.04em; }
.badge.ok   { background:rgba(78,140,106,.14); color:var(--ok); }
.badge.warn { background:rgba(201,138,46,.16); color:var(--warn); }
.badge.low  { background:rgba(190,74,62,.13);  color:var(--low); }
.badge.info { background:rgba(158,174,200,.22); color:#4B5C97; }

/* buttons */
.btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:16px; border:none; cursor:pointer;
  border-radius:99px; font:800 15px var(--sans); letter-spacing:-.01em;
  background: var(--ink); color:#FFFFFF;
  box-shadow: 0 4px 14px rgba(29,27,24,.18);
  text-decoration:none; transition:.18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(29,27,24,.25); }
.btn.ghost { background:transparent; border:2px solid var(--ink); color:var(--ink); box-shadow:none; }
.btn.mauve { background:var(--mauve); color:#FFFFFF; box-shadow:0 4px 14px rgba(139,108,130,.3); }

/* chips */
.chiprow { display:flex; gap:9px; flex-wrap:wrap; }
.chip {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:13px 10px; min-width:64px; flex:1;
  background:var(--card); border:2px solid var(--line-soft); border-radius:var(--r-sm);
  font-size:11.5px; color:var(--taupe); cursor:pointer; transition:.15s;
  font-weight:600;
}
.chip .c-ic { font-size:21px; }
.chip.on { border-color:var(--ink); background:var(--sunken); color:var(--ink); font-weight:800; }

/* list rows */
.lrow {
  display:flex; align-items:center; gap:14px; padding:15px 4px;
  border-bottom:1px solid var(--line-soft); text-decoration:none; color:var(--ink);
}
.lrow:last-child { border-bottom:none; }
.lrow .l-ic { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; }
.lrow .l-t { flex:1; }
.lrow .l-t b { display:block; font-size:14.5px; font-weight:800; color:var(--ink); }
.lrow .l-t span { font-size:12px; color:var(--taupe); }
.lrow .l-arr { color:var(--faded); font-size:18px; }

/* AI / insight callout */
.insight { display:flex; gap:12px; padding:15px 16px; border-radius:var(--r-sm);
  background: var(--sunken);
  border:1.5px solid var(--line-soft); }
.insight .i-ic { font-size:20px; }
.insight p { font-size:13px; line-height:1.55; color:var(--ink); }
.insight b { color:var(--mauve); }

/* ── bottom nav ── */
.nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 40;
  display: flex; justify-content: space-around; align-items:center;
  padding: 8px max(8px, var(--shell-safe-right)) calc(10px + var(--shell-safe-bottom)) max(8px, var(--shell-safe-left));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 2px solid var(--ink);
}
.nav a {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:11px; line-height:1.35; font-weight:800; letter-spacing:.02em;
  color:var(--faded); text-decoration:none; min-width:44px; min-height:44px; flex:1; padding:4px 2px;
  border-radius:12px; transition:.15s;
}
.nav a .n-ic { font-family:'Material Symbols Outlined'; font-size:23px; font-weight:400; }
.nav a.on { color:var(--ink); }
.nav a.on .n-ic { color:var(--ink); }

/* material symbols helper */
.ms { font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap;
  word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased; }

/* charts */
.chart-frame { background:var(--sunken); border-radius:var(--r-sm); padding:10px; border:1.5px solid var(--line-soft); }
.axis { font-size:10px; fill:var(--faded); font-family:var(--sans); }

/* gallery (index) */
.gallery { position:relative; z-index:1; max-width:1080px; width:100%; padding:48px 28px 80px; }
.gallery h1 { font-family:var(--serif); font-weight:800; font-size:38px; color:var(--ink); letter-spacing:-.02em; }
.gallery .g-sub { color:var(--taupe); margin:10px 0 34px; max-width:52ch; line-height:1.6; }
.g-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.g-card { display:block; text-decoration:none; background:var(--card); border:2px solid var(--ink);
  border-radius:var(--r); padding:22px; transition:.18s; box-shadow:0 4px 14px rgba(29,27,24,.08); }
.g-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(29,27,24,.14); }
.g-card .g-ic { font-size:26px; margin-bottom:10px; }
.g-card b { font-family:var(--serif); font-weight:700; font-size:17px; color:var(--ink); display:block; letter-spacing:-.01em; }
.g-card span { font-size:12.5px; color:var(--taupe); line-height:1.5; display:block; margin-top:5px; }
.g-tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; background:var(--sunken); color:var(--ink); margin-bottom:12px; border:1.5px solid var(--ink); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Deep Midnight Purple Theme
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* paper & surfaces — deep midnight purple */
  --paper:      #1a1030;
  --paper-deep: #150c28;
  --card:       rgba(45, 27, 78, 0.85);
  --card-solid: #2d1b4e;
  --sunken:     #1f1438;
  --line:       rgba(200, 180, 240, 0.2);
  --line-soft:  rgba(200, 180, 240, 0.1);

  /* type — lavender */
  --ink:        #e8dff5;
  --cocoa:      #e8dff5;
  --taupe:      #b8a8d0;
  --faded:      #b3a1cb;

  /* accents — brightened mauve & gold */
  --mauve:      #c4a8e0;
  --terracotta: #e0a898;
  --coral:      #f0b8a8;
  --coral-deep: #e0a898;
  --gold:       #f0c878;

  /* signature pastels — brightened */
  --lavender:   #d4c5f0;
  --periwinkle: #b8c8e8;
  --sage:       #b8d0b0;
  --sky:        #c8dde8;
  --blush:      #f5d6c8;

  /* six domains — brightened */
  --d-medical:  #bb9bd0;
  --d-cycle:    #e4aac8;
  --d-stress:   #f0b8a0;
  --d-exercise: #f0d090;
  --d-diet:     #accba0;
  --d-sleep:    #aac0e0;

  /* status — brightened */
  --ok:         #7ac8a0;
  --warn:       #e0b860;
  --low:        #e08a7a;
}

/* ── body: deep midnight purple gradient ── */
[data-theme="dark"] body {
  background: linear-gradient(160deg, #1a1030 0%, #150c28 40%, #0f0820 100%);
}

/* ── body::before watercolor wash → celestial starfield feel ── */
[data-theme="dark"] body::before {
  background:
    radial-gradient(42% 30% at 82% 6%, rgba(196, 168, 224, 0.18), transparent 70%),
    radial-gradient(38% 26% at 8% 16%, rgba(240, 200, 120, 0.1), transparent 70%),
    radial-gradient(46% 30% at 90% 52%, rgba(155, 123, 184, 0.15), transparent 70%),
    radial-gradient(40% 26% at 4% 66%, rgba(168, 184, 216, 0.1), transparent 70%),
    radial-gradient(44% 30% at 70% 96%, rgba(196, 168, 224, 0.12), transparent 72%),
    radial-gradient(30% 22% at 50% 30%, rgba(240, 200, 120, 0.06), transparent 70%);
}

/* ── top bar ── */
[data-theme="dark"] .top {
  background: linear-gradient(180deg, var(--paper) 62%, transparent);
}
[data-theme="dark"] .top .t-icon {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .brandline .bdot { background: var(--mauve); }

/* ── cards ── */
[data-theme="dark"] .card {
  background: var(--card);
  border-color: var(--line-soft);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(196, 168, 224, 0.05);
}
[data-theme="dark"] .card.tint-lavender { background: rgba(196, 168, 224, 0.12); border-color: rgba(196, 168, 224, 0.3); }
[data-theme="dark"] .card.tint-sage     { background: rgba(168, 192, 160, 0.1); border-color: rgba(168, 192, 160, 0.25); }
[data-theme="dark"] .card.tint-blush    { background: rgba(245, 198, 184, 0.08); border-color: rgba(245, 198, 184, 0.25); }
[data-theme="dark"] .card.tint-gold     { background: rgba(240, 200, 120, 0.08); border-color: rgba(240, 200, 120, 0.25); }

/* ── buttons ── */
[data-theme="dark"] .btn {
  background: var(--mauve);
  color: #1a1030;
  box-shadow: 0 4px 14px rgba(196, 168, 224, 0.25);
}
[data-theme="dark"] .btn:hover { box-shadow: 0 6px 20px rgba(196, 168, 224, 0.35); }
[data-theme="dark"] .btn.ghost {
  background: transparent;
  border-color: var(--mauve);
  color: var(--mauve);
}
[data-theme="dark"] .btn.mauve {
  background: var(--mauve);
  color: #1a1030;
  box-shadow: 0 4px 14px rgba(196, 168, 224, 0.3);
}

/* ── chips ── */
[data-theme="dark"] .chip {
  background: var(--card);
  border-color: var(--line-soft);
  color: var(--taupe);
}
[data-theme="dark"] .chip.on {
  border-color: var(--mauve);
  background: var(--sunken);
  color: var(--ink);
}

/* ── metric tiles ── */
[data-theme="dark"] .metric {
  background: var(--sunken);
  border-color: var(--line-soft);
}

/* ── badges ── */
[data-theme="dark"] .badge.ok   { background: rgba(122, 200, 160, 0.15); color: var(--ok); }
[data-theme="dark"] .badge.warn { background: rgba(224, 184, 96, 0.16); color: var(--warn); }
[data-theme="dark"] .badge.low  { background: rgba(224, 138, 122, 0.13); color: var(--low); }
[data-theme="dark"] .badge.info { background: rgba(168, 184, 216, 0.2); color: var(--periwinkle); }

/* ── list rows ── */
[data-theme="dark"] .lrow {
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}

/* ── insight callout ── */
[data-theme="dark"] .insight {
  background: var(--sunken);
  border-color: var(--line-soft);
}

/* ── inputs & textareas ── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--sunken);
  border-color: var(--line-soft);
  color: var(--ink);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--faded);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--mauve);
  outline: none;
  box-shadow: 0 0 0 3px rgba(196, 168, 224, 0.15);
}

/* ── bottom nav ── */
[data-theme="dark"] .nav {
  background: rgba(26, 16, 48, 0.92);
  border-top-color: var(--line);
}
[data-theme="dark"] .nav a { color: var(--faded); }
[data-theme="dark"] .nav a.on { color: var(--mauve); }
[data-theme="dark"] .nav a.on .n-ic { color: var(--mauve); }

/* ── evidence info button ── */
[data-theme="dark"] .qi {
  background: rgba(196, 168, 224, 0.14);
  border-color: rgba(196, 168, 224, 0.4);
  color: var(--mauve);
}
[data-theme="dark"] .qi:hover { background: rgba(196, 168, 224, 0.25); }

/* ── gallery (index page) ── */
[data-theme="dark"] .gallery h1 { color: var(--ink); }
[data-theme="dark"] .gallery .g-sub { color: var(--taupe); }
[data-theme="dark"] .g-card {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .g-card b { color: var(--ink); }
[data-theme="dark"] .g-card span { color: var(--taupe); }
[data-theme="dark"] .g-tag {
  background: var(--sunken);
  color: var(--ink);
  border-color: var(--line);
}

/* ── chart frame ── */
[data-theme="dark"] .chart-frame {
  background: var(--sunken);
  border-color: var(--line-soft);
}
[data-theme="dark"] .axis { fill: var(--faded); }

/* ═══════════════════════════════════════════════════════
   BOTTOM NAVIGATION (fixed, stays visible)
   ═══════════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px max(8px, var(--shell-safe-right)) calc(10px + var(--shell-safe-bottom)) max(8px, var(--shell-safe-left));
  background: rgba(247, 242, 250, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(196, 181, 224, 0.3);
}
[data-theme="dark"] .bottom-nav {
  background: rgba(30, 25, 45, 0.92);
  border-top-color: rgba(196, 181, 224, 0.2);
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  flex: 1;
  min-width: 44px;
  min-height: 44px;
  line-height: 1.35;
  text-decoration: none;
  color: var(--taupe, #8a7a9a);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--sans, 'Manrope', sans-serif);
  transition: color 0.2s, transform 0.1s;
  border-radius: 10px;
}
.bottom-nav a:active {
  transform: scale(0.95);
}
.bottom-nav a.active {
  color: var(--mauve, #7a5c96);
}
.bottom-nav a.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}
.bottom-nav .material-symbols-outlined {
  font-size: 22px;
}


/* One scaling path per page. Legacy px layouts use content zoom; rem-based
   pages opt in via body.text-scaled-page (Bio-Age/Home retain their aliases).
   Root rem scaling also reaches portaled evidence dialogs outside the content. */
html[data-font-mode="legacy"] .app > :is(.scroll, .content) { zoom: var(--shell-text-scale); }
html[data-font-mode="rem"] .app > :is(.scroll, .content) { zoom: 1; }
:is(.text-scaled-page, .bio-age-page, .home-page) { font-size: 1rem; }
.app > :is(.scroll, .content) { min-width: 0; overflow-wrap: anywhere; }
.app > :is(.scroll, .content) :is(img, svg, video, canvas) { max-width: 100%; }
/* Reserve exactly the measured fixed bars, including safe-area padding. This
   overrides older page-local hardcoded header offsets without adding them twice. */
html[data-shell-ready] .app > .top { padding-top: calc(14px + var(--shell-safe-top)); }
html[data-shell-ready] .app {
  padding-top: calc(var(--shell-top-size) + 8px) !important;
  padding-bottom: calc(var(--shell-bottom-size) + 16px) !important;
}
html { scroll-padding-top: calc(var(--shell-top-size) + 12px); scroll-padding-bottom: calc(var(--shell-bottom-size) + 12px); }
.top :is(a, button):focus-visible, :is(.nav, .bottom-nav) a:focus-visible {
  outline: 3px solid var(--mauve); outline-offset: 3px;
}
@media (max-width: 380px) {
  .top { gap: 6px; }
  .top .brandline b { font-size: 14px !important; letter-spacing: .12em !important; }
}
@media (max-width: 300px) {
  .top .brandline, .top .t-title { flex-basis: 100%; }
  :is(.nav, .bottom-nav) { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   RHYTHME PHONE FRAME — unified device wrapper for all pages
   Desktop: 390x844 iPhone frame with notch + shadow
   Mobile: fullscreen
   ══════════════════════════════════════════════════════════════ */

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100dvh;
  background: linear-gradient(135deg, #e8dff5 0%, #f5c4a8 50%, #e8dff5 100%);
}

@media (min-width: 500px) {
  body {
    padding: 20px;
    align-items: center;
  }
  
  .app {
    width: 390px;
    max-width: 390px;
    min-height: 844px;
    max-height: 90vh;
    border-radius: 44px;
    box-shadow: 
      0 0 0 10px #1a1228,
      0 0 0 12px #3a2a50,
      0 50px 100px -20px rgba(0,0,0,0.6);
    overflow: hidden;
    position: relative;
    background: var(--paper);
  }
  
  /* Notch */
  .app::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #1a1228;
    border-radius: 0 0 18px 18px;
    z-index: 1000;
  }
  
  /* Status bar area */
  .app > .top,
  .app > header,
  .app > .status-bar {
    padding-top: 36px !important;
  }
}

@media (max-width: 499px) {
  body {
    padding: 0;
    background: var(--paper);
  }
  .app {
    border-radius: 0;
    box-shadow: none;
    max-height: none;
  }
}

/* Ensure scrollable content fits within phone frame */
.app > .scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fix for pages that set body overflow hidden (room.html etc) */
body.overflow-hidden {
  overflow: hidden;
}

/* Universal centering for pages without .app wrapper */
@media (min-width: 500px) {
  body > .topbar,
  body > .content,
  body > .chat-container,
  body > .chat-header,
  body > .chat-area,
  body > .ppg-container,
  body > .lwrap,
  body > .gallery,
  body > main,
  body > section {
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Pages with .content wrapper */
  .content {
    max-width: 390px !important;
    margin: 0 auto;
  }
  
  /* Topbar alignment */
  .topbar {
    max-width: 390px !important;
    margin: 0 auto;
  }
  
  /* Bottom nav alignment */
  .bottom-nav,
  .bn {
    max-width: 390px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* Ensure all pages have consistent background on desktop */
@media (min-width: 500px) {
  body {
    background: linear-gradient(135deg, #e8dff5 0%, #f5c4a8 50%, #e8dff5 100%) !important;
  }
}

/* the Rhythme logo beside the wordmark (privacy, terms, sign-in and the older pages) */
.rh-logo{display:inline-block;width:1.4em;height:1.4em;border-radius:28%;object-fit:cover;vertical-align:middle;flex:none;margin-right:.45em;box-shadow:0 1px 5px rgba(90,66,116,.25)}
.rh-word{display:inline-flex;align-items:center}
.lhero .rh-logo{width:1.05em;height:1.05em;margin-right:.32em;position:relative;box-shadow:0 4px 18px rgba(90,66,116,.25),0 0 0 3px rgba(255,255,255,.7)}