/* Shared standalone-page palette. Scoped layouts leave message/ruby rendering alone. */
:root {
  --page-bg: linear-gradient(180deg, #f7fbff, #f7f8fa);
  --page-card: #ffffff;
  --page-ink: #111318;
  --page-muted: #526176;
  --page-line: #dce5ef;
  --page-tint: #eff6ff;
  --page-accent: #2563eb;
  --page-cta-ink: #ffffff;
  --page-error: #b91c1c;
  --page-ok: #166534;
  --page-shadow: 0 12px 28px rgba(17, 24, 39, 0.07);
}
:root[data-theme="bright"] {
  --page-bg: linear-gradient(180deg, #fff7f0, #fffdfb);
  --page-tint: #fff5ed;
}
:root[data-theme="vivid"] {
  --page-bg: linear-gradient(180deg, #fbfcff, #f7f8fb);
  --page-tint: #f3f0ff;
  --page-accent: #6d28d9;
}
:root[data-theme="dark"], :root[data-theme="aurora"], :root[data-theme="legacy"] {
  --page-bg: #0f1115;
  --page-card: #191e28;
  --page-ink: #f5f7fa;
  --page-muted: #b8c2d2;
  --page-line: #354054;
  --page-tint: #232b3b;
  --page-accent: #a58df0;
  --page-cta-ink: #101827;
  --page-error: #fecaca;
  --page-ok: #a7f3d0;
  --page-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
:root[data-theme="aurora"] { --page-bg: linear-gradient(135deg, #101b27, #211839); }
:root[data-theme="legacy"] { --page-bg: linear-gradient(135deg, #1a2040, #30204c); }

html[data-theme] body:is(.auth-page, .profile-page, .invite-page, .invite-usage-page, .info-page) {
  background: var(--page-bg);
  color: var(--page-ink);
  color-scheme: light;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
}
html:is([data-theme="dark"], [data-theme="aurora"], [data-theme="legacy"])
body:is(.auth-page, .profile-page, .invite-page, .invite-usage-page, .info-page) { color-scheme: dark; }
body:is(.profile-page, .invite-page, .invite-usage-page, .info-page) *,
body:is(.profile-page, .invite-page, .invite-usage-page, .info-page) *::before,
body:is(.profile-page, .invite-page, .invite-usage-page, .info-page) *::after { box-sizing: border-box; }
body:is(.auth-page, .profile-page, .invite-page, .invite-usage-page, .info-page) :focus-visible {
  outline: 3px solid var(--page-accent);
  outline-offset: 3px;
}
html[data-theme] .auth-page .login-container,
html[data-theme] .profile-page .container,
.invite-card, body.group-profile .group-card,
.usage-summary, .usage-item, .usage-empty, .info-page .info-card, .info-page .light-modal-card {
  background: var(--page-card);
  color: var(--page-ink);
  border: 1px solid var(--page-line);
  box-shadow: var(--page-shadow);
}
.auth-page .error { color: var(--page-error); }
.auth-page .success { color: var(--page-ok); }
.auth-language select,
.profile-page .header-lang,
.invite-lang-control select {
  background: var(--page-card) !important;
  color: var(--page-ink) !important;
  -webkit-text-fill-color: var(--page-ink);
  border: 1px solid var(--page-line);
  max-width: 100%;
  min-height: 40px;
  font: inherit;
}
.invite-lang-control option { background: var(--page-card); color: var(--page-ink); }
.invite-header, .usage-header { flex-wrap: wrap; }
.invite-head-left, .invite-heading, .usage-heading, .group-meta, .pending-meta { min-width: 0; }
.invite-head-left { flex: 1 1 220px; }
.invite-logo, .group-header img, .pending-item img { flex-shrink: 0; }
.invite-heading, .invite-info, .usage-pill, .group-meta, .usage-heading, .usage-item, .summary-code,
.profile-page .profile-identity { overflow-wrap: anywhere; }
.invite-info, .usage-pill { min-width: 0; max-width: 100%; }
.invite-logo { background: var(--page-tint); box-shadow: none; object-fit: contain; }
.invite-card canvas, body.group-profile #groupQr { width: min(100%, 260px); height: auto; aspect-ratio: 1; background: #fff; }
.invite-page .invite-shell { padding-inline: 0; }
.invite-page .invite-card { min-width: 0; }
.invite-secondary, .invite-card.missing a, .usage-back, .summary-code,
.group-actions button.secondary, .group-profile .topbar-btn, .group-profile .mobile-topbar a {
  background: var(--page-tint);
  color: var(--page-ink);
  border: 1px solid var(--page-line);
}
.invite-primary, .group-actions button.primary { background: var(--page-accent); color: var(--page-cta-ink); }
.invite-links-alt a, .invite-link-fallback { color: var(--page-accent); }
.invite-footnote, .site-footer-note { color: var(--page-muted); opacity: 1; }
.usage-pill { background: var(--page-tint); color: var(--page-ink); }
.group-profile .admin-panel, .group-profile .pending-empty, .group-profile .pending-item { background: var(--page-tint); border-color: var(--page-line); }
.group-profile .pending-item { flex-wrap: wrap; }
.group-profile .pending-actions { flex-wrap: wrap; }
.group-profile .mobile-topbar { background: var(--page-card); border-color: var(--page-line); }
.usage-summary .summary-item { min-width: 0; flex: 1 1 140px; }
.info-page .info-head { flex-wrap: wrap; }
.info-page .group-info-meta { min-width: 0; overflow-wrap: anywhere; }
.info-page .group-info-name-row { flex-wrap: wrap; }
.info-page .group-info-qr { flex-shrink: 0; }
.info-page .group-actions-section, .info-page .group-member-chip,
.info-page .badge, .info-page .self-tag {
  background: var(--page-tint); color: var(--page-ink); border-color: var(--page-line);
}
.info-page .info-head a, .info-page .control-button,
.info-page .group-actions-row .control-button, .info-page .group-info-qr,
.info-page .light-modal-card button, .info-page .light-modal-card input, .info-page .alias-input,
.info-page .group-members-more-btn {
  background: var(--page-tint); color: var(--page-ink); border-color: var(--page-line);
  font: inherit; max-width: 100%;
}
.info-page a.control-button:visited, .info-page a.control-button:hover,
.info-page a.control-button:active { color: var(--page-ink); }
.info-page .group-setting-link { color: var(--page-accent); }
.info-page .group-member-chip { max-width: 100%; overflow-wrap: anywhere; }
.info-page .qr-panel canvas { width: min(100%, 320px); height: auto; aspect-ratio: 1; background: #fff; }

/* A standalone profile keeps its real navigation visible at phone widths. */
.profile-page { padding: 20px 16px; }
html[data-theme] body.profile-page { padding: 20px 16px !important; }
.profile-page .header-bar { display: flex !important; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.profile-page .profile-header-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.profile-page .profile-identity { display: flex; gap: 12px; align-items: center; min-width: 0; max-width: 100%; }
.profile-page .profile-identity > :first-child { flex-shrink: 0; }
.profile-page .profile-identity > div { min-width: 0; }
.profile-page .friends-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.profile-page .friends-columns > div { min-width: 0; }
.profile-page .profile-link { overflow-wrap: anywhere; }
html[data-theme] .profile-page :is(.container, .conversation-list, .conversation-item) {
  background: var(--page-card) !important;
  color: var(--page-ink);
  border-color: var(--page-line) !important;
  box-shadow: none;
}
html[data-theme] .profile-page .conversation-list { max-height: none; overflow: visible; }
.profile-page .conversation-item { animation: none; }
html[data-theme] .profile-page .control-button {
  background: var(--page-tint); color: var(--page-ink); border-color: var(--page-line);
}
.profile-page .profile-link { color: var(--page-accent); }

/* Connected mini programs reuse these semantic colors, including all saved themes. */
html[data-theme] .mini-program-page {
  --mini-bg: var(--page-tint); --mini-card: var(--page-card); --mini-ink: var(--page-ink);
  --mini-muted: var(--page-muted); --mini-line: var(--page-line); --mini-accent: var(--page-accent);
  background: var(--page-bg);
  color-scheme: light;
}
html:is([data-theme="dark"], [data-theme="aurora"], [data-theme="legacy"]) .mini-program-page { color-scheme: dark; }
.mini-header, .mini-tabs { flex-wrap: wrap; }
.mini-header h1, .mini-header .mini-button { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .profile-page .friends-columns { grid-template-columns: minmax(0, 1fr) !important; }
  .profile-page .container { margin-block: 0 !important; }
  /* Legacy desktop-on-phone: allow panels and controls to shrink, never clip content. */
  .legacy-shell .tabs { display: flex; flex-wrap: wrap; gap: 6px; }
  .legacy-shell .tabs .tab-button { min-width: 0; flex: 1 1 auto; }
  .legacy-shell .friends-columns > div { min-width: 0 !important; max-width: 100%; }
  .legacy-shell .tab-content, .legacy-shell .settings-subsection { min-width: 0; }
  .legacy-shell .memory-buttons, .legacy-shell .control-buttons { flex-wrap: wrap; }
  .legacy-shell input, .legacy-shell select, .legacy-shell textarea { max-width: 100%; }
  .legacy-shell .header-right { flex-wrap: wrap; min-width: 0; }
}