/* Pingo: white surfaces, slate text and a berry accent. Load last.
   Deliberately scoped to the everyday shell; game scenes retain their own art. */
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) {
  --pg-paper:#ffffff; --pg-white:#ffffff; --pg-ink:#37394d;
  --pg-muted:#858a99; --pg-berry:#ff3483; --pg-berry-hover:#e72d74;
  --pg-petal:#fff0f6; --pg-apricot:#fff0e4; --pg-line:#efedf1;
  --pg-focus:#ff6c9f; --pg-green:#20c878;
  --bg:var(--pg-paper); --surface:var(--pg-white); --surface-2:var(--pg-petal);
  --ink:var(--pg-ink); --muted:var(--pg-muted); --line:var(--pg-line);
  --accent:var(--pg-berry); --accent-soft:var(--pg-petal); --lime:var(--pg-berry);
  background:var(--pg-paper); color:var(--pg-ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
body:has(.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"])) { background:#ffffff; }
:is(.romeo-shell[data-screen="home"],.romeo-shell[data-screen="rooms"],.romeo-shell[data-screen="profile"]) .main { background:var(--pg-paper); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) :is(button,a,[role="button"]):focus-visible { outline:3px solid var(--pg-focus); outline-offset:3px; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .sidebar { background:var(--pg-paper); border-color:var(--pg-line); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .sidebar .nav-item { color:var(--pg-muted); border-radius:12px; font-weight:550; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .sidebar .nav-item.active { background:var(--pg-petal); color:var(--pg-berry); box-shadow:inset 3px 0 var(--pg-berry); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .topbar { border-color:var(--pg-line); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .connection-label { color:var(--pg-muted); font-size:12px; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .coin-pill { border-color:var(--pg-line); color:var(--pg-ink); background:var(--pg-white); border-radius:999px; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .btn.primary { background:var(--pg-berry); color:#fff; border-color:var(--pg-berry); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .btn.primary:hover { background:var(--pg-berry-hover); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .btn.secondary { color:var(--pg-ink); background:var(--pg-white); border-color:var(--pg-line); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .btn { border-radius:999px; font-weight:650; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .mobile-nav { background:var(--pg-white); border-top-color:var(--pg-line); box-shadow:0 -3px 16px #29212e07; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .mobile-nav button { color:var(--pg-muted); font-weight:550; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .mobile-nav button.active { color:var(--pg-berry); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .mobile-nav button.active .nav-symbol { background:var(--pg-petal); border-radius:12px; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) :is(.empty,.amar-empty) { color:var(--pg-muted); border-style:solid; border-color:var(--pg-line); border-radius:18px; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .empty h3 { color:var(--pg-ink); }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .verification-banner {
  margin-bottom:18px;
  border: 1px solid #e8d2ad;
  border-radius: 14px;
  background: linear-gradient(110deg, #fff8e9, #fffdf8);
  color: #514337;
  font-size: 12px;
  line-height: 1.5;
}
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .verification-banner > svg { flex:none; color:#8a5e18; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .verification-banner .btn { color:var(--pg-berry); font-weight:750; }

/* Android safe-area alignment and shared reading sizes for the everyday shell. */
@media(max-width:700px) {
  .romeo-shell[data-screen="preferences"] .main {
    padding-bottom:calc(170px + env(safe-area-inset-bottom));
  }
  .romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .mobile-nav {
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    box-sizing:border-box;
    min-height:78px;
    padding:7px 8px max(9px,env(safe-area-inset-bottom));
    border-width:1px 0 0;
    border-radius:0;
    transform:none;
  }
  .android-native-insets .romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .mobile-nav {
    padding-bottom:9px;
  }
  .romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .mobile-nav button {
    min-height:56px;
    font-size:11px;
  }
}
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .room-label,
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .room-count {
  font-size:11px;
  font-weight:700;
  line-height:1.3;
}
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .story-item {
  color:var(--pg-muted);
  font-size:11px;
}
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .post-text {
  color:#514650;
  font-size:14px;
  line-height:1.65;
}
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .post-actions button {
  color:#665963;
}
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .post-actions button.liked {
  color:var(--pg-berry);
}
.romeo-shell[data-screen="profile"] .amar-own-badges :is(.coins,.gifts) {
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.romeo-shell[data-screen="profile"] .amar-own-badges :is(.coins,.gifts) svg {
  width:12px;
  height:12px;
  flex:none;
  stroke-width:1.9;
}
.romeo-shell[data-screen="chat"] .chat-log {
  border:1px solid var(--pg-line);
  border-radius:18px;
  background:linear-gradient(180deg,#fffdfa,#faf6f3);
}
.romeo-shell[data-screen="chat"] .message {
  border:1px solid var(--pg-line);
  border-radius:18px 18px 18px 5px;
  background:#fff;
  color:var(--pg-ink);
  box-shadow:0 3px 10px #29212e08;
}
.romeo-shell[data-screen="chat"] .message.mine {
  border:1px solid #e9c5d0;
  border-radius:18px 18px 5px 18px;
  background:linear-gradient(145deg,#f9e8ed,#f7e5eb);
  color:#34252f;
}
.romeo-shell[data-screen="chat"] .message-meta,
.romeo-shell[data-screen="chat"] .message-meta time,
.romeo-shell[data-screen="chat"] .message-meta .read-state {
  color:#655861;
  font-size:11px;
}
.romeo-shell[data-screen="chat"] .message-tools button { color:#655861; }
.romeo-shell[data-screen="chat"] .message-tools svg { color:inherit; }
.romeo-shell[data-screen="chat"] .message.queued {
  border-style:dashed;
  border-color:#c9b6a0;
  background:#fffaf1;
}
.romeo-shell[data-screen="chat"] .message.queued.failed {
  border-color:#d28b98;
  background:#fff5f5;
}
.romeo-shell[data-screen="chat"] .message.queued .message-meta { flex-wrap:wrap; }
.romeo-shell[data-screen="chat"] .message.queued .queue-error {
  display:block;
  margin-top:8px;
  padding:8px 9px;
  border-radius:9px;
  background:#fde8eb;
  color:#852d43;
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.romeo-shell[data-screen="chat"] .message.queued .queue-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.romeo-shell[data-screen="chat"] .message.queued .queue-actions button {
  min-height:38px;
  padding:7px 11px;
  border:1px solid #dfcfd5;
  border-radius:11px;
  background:#fff;
  color:var(--pg-ink);
  font-size:12px;
  font-weight:650;
}
.romeo-shell[data-screen="chat"] .message.queued .queue-actions button:first-child {
  border-color:var(--pg-berry);
  background:var(--pg-berry);
  color:#fff;
}
.romeo-shell[data-screen="chat"] .composer .send,
.romeo-shell[data-screen="room"] .composer .send {
  border:1px solid var(--pg-berry);
  background:var(--pg-berry);
  color:#fff;
}
.romeo-shell[data-screen="room"] .main {
  background:radial-gradient(ellipse at 55% -12%,#28443f 0,#1a292b 38%,#14191e 80%);
  color:#f8f1e7;
}
.romeo-shell[data-screen="room"] .topbar { border-color:#ffffff1a; }
.romeo-shell[data-screen="room"] .connection-label { color:#d4c9c2; }
.romeo-shell[data-screen="room"] .top-actions .icon-btn,
.romeo-shell[data-screen="room"] .chat-head .icon-btn,
.romeo-shell[data-screen="room"] .room-controls .icon-btn:not(.mic-on) {
  border-color:#ffffff2b;
  background:#ffffff0c;
  color:#f3e8d8;
}
.romeo-shell[data-screen="room"] .chat-head { border-color:#ffffff20; }
.romeo-shell[data-screen="room"] .chat-head h2,
.romeo-shell[data-screen="room"] .room-feed h3 { color:#fff5e8; }
.romeo-shell[data-screen="room"] .chat-head p,
.romeo-shell[data-screen="room"] .seat strong,
.romeo-shell[data-screen="room"] .seat small,
.romeo-shell[data-screen="room"] .empty-seat,
.romeo-shell[data-screen="room"] .status-strip { color:#d4c9c2; }
.romeo-shell[data-screen="room"] .seat strong { color:#fff5e8; }
.romeo-shell[data-screen="room"] .room-banner {
  border:1px solid #ffffff20;
  border-radius:14px;
  background:#ffffff0c;
}
.romeo-shell[data-screen="room"] .banner-caption {
  border-radius:12px;
  background:#141c1ed6;
  color:#fff2e3;
}
.romeo-shell[data-screen="room"] .room-controls,
.romeo-shell[data-screen="room"] .room-feed { border-color:#ffffff20; }
.romeo-shell[data-screen="room"] .room-controls .mic-on {
  border-color:#e6b7c6;
  background:var(--pg-petal);
  color:var(--pg-berry);
}
.romeo-shell[data-screen="room"] .room-chat-log {
  border-radius:14px;
  background:#10141980;
  color:#f3e8e0;
}
.romeo-shell[data-screen="room"] .room-chat-line strong { color:#ffc3cf; }
.romeo-shell[data-screen="room"] .room-feed .composer input {
  border-color:#ffffff2b;
  background:#fffaf4;
  color:#29212e;
}
.romeo-shell[data-screen="room"] .room-feed .composer input::placeholder { color:#625760; }
.romeo-shell[data-screen="wallet"] .balance.diamonds .amount,
.romeo-shell[data-screen="wallet"] .balance.diamonds .label svg { color:#216e64; }
@media(max-width:700px) {
  .romeo-shell[data-screen="wallet"] .wallet-totals { grid-template-columns:minmax(0,1fr); gap:12px; }
  .romeo-shell[data-screen="wallet"] .wallet-totals .balance.game-balance { grid-column:auto; }
  .romeo-shell[data-screen="wallet"] .wallet-totals .balance {
    min-width:0;
    padding:18px;
    border:1px solid var(--pg-line);
    border-radius:18px;
    background:var(--pg-white);
    box-shadow:0 4px 15px #29212e06;
  }
  .romeo-shell[data-screen="wallet"] .wallet-totals .balance .amount { margin:10px 0; }
  .romeo-shell[data-screen="wallet"] .wallet-totals .balance p { max-width:42ch; line-height:1.5; }
  .romeo-shell[data-screen="wallet"] .wallet-totals .balance .btn { min-height:44px; }
}
.romeo-shell[data-screen="preferences"] .preference-section {
  border-color:var(--pg-line);
  border-radius:18px;
  background:var(--pg-white);
}
.romeo-shell[data-screen="preferences"] .preference-section legend { color:var(--pg-ink); }
.romeo-shell[data-screen="preferences"] .preference-section legend svg,
.romeo-shell[data-screen="preferences"] .preference-symbol { color:var(--pg-berry); }
.romeo-shell[data-screen="preferences"] .interest-option > span {
  min-height:44px;
  border-color:var(--pg-line);
  background:#fff;
  color:var(--pg-muted);
}
.romeo-shell[data-screen="preferences"] .interest-option input:checked + span {
  border-color:#e6b7c6;
  background:var(--pg-petal);
  color:var(--pg-berry);
  font-weight:650;
}
.romeo-shell[data-screen="preferences"] .interest-option input:focus-visible + span { outline-color:var(--pg-focus); }
.romeo-shell[data-screen="preferences"] .preference-label { color:#514650; font-size:14px; }
.romeo-shell[data-screen="preferences"] .switch-track { border-color:#d7cfd4; background:#e9e3e7; }
.romeo-shell[data-screen="preferences"] .switch-track:after { background:#fff; }
.romeo-shell[data-screen="preferences"] .preference-toggle input:checked + .switch-track { background:var(--pg-berry); }
.romeo-shell[data-screen="preferences"] .preference-toggle input:checked + .switch-track:after { background:#fff; }
.romeo-shell[data-screen="preferences"] .preference-toggle input { z-index:2; cursor:pointer; }
.romeo-shell[data-screen="preferences"] .preference-toggle .switch-track { z-index:1; pointer-events:none; }
.romeo-shell[data-screen="preferences"] .timezone-label { color:var(--pg-muted); }
.romeo-shell[data-screen="preferences"] .preferences-intro {
  margin:-12px 0 16px;
  color:var(--pg-muted);
  font-size:.9rem;
  line-height:1.55;
}
.romeo-shell[data-screen="preferences"] .preference-link {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 18px;
  align-items:center;
  gap:12px;
  min-height:72px;
  margin:8px 0;
  padding:10px 12px;
  border:1px solid var(--pg-line);
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#fffdfb);
  color:var(--pg-ink);
  box-shadow:0 5px 15px #38242d08,inset 0 1px #fff;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.romeo-shell[data-screen="preferences"] .preference-link:hover {
  transform:translateY(-1px);
  border-color:#ddb5c1;
  box-shadow:0 9px 20px #38242d12,inset 0 1px #fff;
}
.romeo-shell[data-screen="preferences"] .preference-link:active { transform:scale(.99); }
.romeo-shell[data-screen="preferences"] .preference-link:focus-visible {
  outline:2px solid var(--pg-focus);
  outline-offset:3px;
}
.romeo-shell[data-screen="preferences"] .preference-link-icon {
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border:1px solid #f0d7df;
  border-radius:13px;
  background:linear-gradient(145deg,#fff5f7,var(--pg-petal));
  color:var(--pg-berry);
}
.romeo-shell[data-screen="preferences"] .preference-link-icon svg { width:19px; height:19px; }
.romeo-shell[data-screen="preferences"] .preference-link-copy {
  display:grid;
  min-width:0;
  gap:3px;
  text-align:left;
}
.romeo-shell[data-screen="preferences"] .preference-link-copy strong { color:var(--pg-ink); font-size:.9rem; font-weight:700; line-height:1.35; }
.romeo-shell[data-screen="preferences"] .preference-link-copy small { color:#625760; font-size:.76rem; font-weight:450; line-height:1.4; }
.romeo-shell[data-screen="preferences"] .preference-link > svg:last-child { width:17px; height:17px; color:#786671; }
.romeo-shell[data-screen="events"] .event-row {
  border-color:var(--pg-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px #38242d08;
}
.romeo-shell[data-screen="events"] .event-date {
  border-color:#efd7df;
  background:var(--pg-petal);
  color:var(--pg-berry);
}
.romeo-shell[data-screen="events"] .event-date strong { color:var(--pg-berry); }
.romeo-shell[data-screen="events"] .event-date span { color:#6c616a; font-size:11px; font-weight:650; }
.romeo-shell[data-screen="events"] .event-meta { align-items:center; gap:8px; margin-bottom:8px; font-size:12px; line-height:1.4; }
.romeo-shell[data-screen="events"] .event-topic { color:#59414c; font-weight:700; }
.romeo-shell[data-screen="events"] .event-time { font-size:12px; line-height:1.5; }
.romeo-shell[data-screen="events"] .event-description { font-size:14px; line-height:1.6; }
.romeo-shell[data-screen="events"] .event-meta,
.romeo-shell[data-screen="events"] .event-time,
.romeo-shell[data-screen="events"] .event-description,
.romeo-shell[data-screen="events"] .event-host > button,
.romeo-shell[data-screen="events"] .event-attendees { color:var(--pg-muted); }
.romeo-shell[data-screen="events"] .event-status {
  padding:4px 8px;
  border-radius:999px;
  background:#f2eef0;
  color:#5e535c;
  font-size:11px;
  font-weight:650;
}
.romeo-shell[data-screen="events"] .event-status.is-attending { background:#e8f2eb; color:#22624d; }
.romeo-shell[data-screen="events"] .event-host .demo-label { color:#5d4a30; }
.romeo-shell[data-screen="events"] .event-host > button { min-height:44px; }
.romeo-shell[data-screen="events"] .event-attendees { font-size:11px; }
.romeo-shell[data-screen="events"] .event-actions .event-rsvp {
  min-height:46px;
  border:1px solid var(--pg-berry);
  border-radius:14px;
  background:var(--pg-berry);
  color:#fff;
  font-size:.84rem;
  font-weight:750;
  box-shadow:0 7px 17px #ac244c24;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.romeo-shell[data-screen="events"] .event-actions .event-rsvp:hover {
  border-color:var(--pg-berry-hover);
  background:var(--pg-berry-hover);
  box-shadow:0 10px 22px #ac244c33;
}
.romeo-shell[data-screen="events"] .event-actions .event-rsvp:active { transform:scale(.98); }
.romeo-shell[data-screen="creator"] .creator-title { color:var(--pg-berry); }
.romeo-shell[data-screen="creator"] .creator-progress {
  border-color:var(--pg-line);
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#fbf7f9);
}
.romeo-shell[data-screen="creator"] .level-emblem {
  border-color:#e6b7c6;
  background:var(--pg-petal);
  color:var(--pg-berry);
  box-shadow:none;
}
.romeo-shell[data-screen="creator"] .creator-level .hero-eyebrow { color:#765c68; }
.romeo-shell[data-screen="creator"] .creator-level strong { color:var(--pg-ink); }
.romeo-shell[data-screen="creator"] .creator-level p,
.romeo-shell[data-screen="creator"] .xp-total small,
.romeo-shell[data-screen="creator"] .level-progress-label,
.romeo-shell[data-screen="creator"] .progress-note { color:var(--pg-muted); }
.romeo-shell[data-screen="creator"] .xp-total,
.romeo-shell[data-screen="creator"] .level-progress-label strong { color:var(--pg-berry); }
.romeo-shell[data-screen="creator"] .creator-metric.teal svg { color:#216e64; }
.romeo-shell[data-screen="creator"] .creator-metric.yellow svg { color:#79591d; }
.romeo-shell[data-screen="creator"] .achievement-row {
  border-color:var(--pg-line);
  background:#fff;
  color:var(--pg-ink);
}
.romeo-shell[data-screen="creator"] .achievement-symbol { background:#f3e9ee; color:var(--pg-berry); }
.romeo-shell[data-screen="creator"] .achievement-row.earned { border-color:#e6b7c6; background:#fff9fb; }
.romeo-shell[data-screen="creator"] .achievement-row.earned .achievement-symbol { background:var(--pg-berry); color:#fff; }
.romeo-shell[data-screen="creator"] .achievement-status { color:var(--pg-muted); }
.romeo-shell[data-screen="creator"] .achievement-row.earned .achievement-status { color:#22624d; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .person-tags span {
  color:#5e535c;
  font-size:11px;
}
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .room-stories strong,
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .host-line,
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .room-body>.demo-label,
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]):not([data-screen="chat"]) .message time,
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .post-author small,
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .conversation aside {
  color:#625760;
  font-size:11px;
  line-height:1.45;
}
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .host-line .live-label { color:#22624d; font-size:10px; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .quick-destinations span { font-size:11px; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .person-details p,
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .room-description { color:#625760; }
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) .demo-label { color:#5d4a30; font-size:11px; }

/* A compact service directory, followed by an editorial people list. */
.romeo-shell[data-screen="home"] .amar-home .product-heading { align-items:flex-start; margin-bottom:24px; }
.romeo-shell[data-screen="home"] .amar-home .product-heading h1 { font-size:clamp(28px,3vw,36px); font-weight:760; letter-spacing:-.045em; color:var(--pg-ink); }
.romeo-shell[data-screen="home"] .amar-home .product-heading p { color:var(--pg-muted); font-size:14px; max-width:360px; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo-strip { gap:0; border:1px solid var(--pg-line); border-radius:20px; background:var(--pg-white); overflow:hidden; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo { padding:19px; border:0; border-right:1px solid var(--pg-line); border-radius:0; background:transparent; gap:6px; min-height:128px; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo:last-child { border-right:0; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo-art { background:var(--pg-petal); color:var(--pg-berry); border-radius:50% 50% 50% 14%; width:38px; height:38px; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo.pink .amar-promo-art { background:var(--pg-apricot); color:#754223; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo.gold .amar-promo-art { background:#f0ecd9; color:#655328; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo.green .amar-promo-art { background:#e8efe8; color:#345a46; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo strong { font-size:14px; color:var(--pg-ink); font-weight:700; }
.romeo-shell[data-screen="home"] .amar-home .amar-promo small { font-size:12px; color:var(--pg-muted); line-height:1.5; }
.romeo-shell[data-screen="home"] .amar-home .romeo-shell[data-screen="home"] .amar-home-toolbar { padding-top:4px; }
.romeo-shell[data-screen="home"] .amar-home .text-tabs button { color:var(--pg-muted); }
.romeo-shell[data-screen="home"] .amar-home .text-tabs button.active { color:var(--pg-berry); }
.romeo-shell[data-screen="home"] .amar-home .text-tabs button.active:after { background:var(--pg-berry); }
.romeo-shell[data-screen="home"] .amar-home .amar-people-list { border-top:1px solid var(--pg-line); }
.romeo-shell[data-screen="home"] .amar-home .amar-person { gap:18px; padding:24px 0; border-color:var(--pg-line); }
.romeo-shell[data-screen="home"] .amar-home .amar-person-name { color:var(--pg-ink); font-weight:700; letter-spacing:-.015em; }
.romeo-shell[data-screen="home"] .amar-home .amar-person-copy p { color:var(--pg-muted); font-size:14px; }
.romeo-shell[data-screen="home"] .amar-home .amar-person-tags { color:var(--pg-muted); font-size:12px; }
.romeo-shell[data-screen="home"] .amar-home .amar-person-tags span { color:#625760; font-size:11px; }
.romeo-shell[data-screen="home"] .amar-home .amar-person-tags .gender-tag {
  border-color:#e6d8de;
  background:#f4e9ee;
  color:#59414c;
}
.romeo-shell[data-screen="home"] .amar-home .amar-person-tags .online-label {
  background:#e8f2eb;
  color:#22624d;
  font-weight:650;
}
.romeo-shell[data-screen="home"] .amar-home .amar-person-avatar .avatar { border-radius:22px 22px 22px 7px; border:1px solid var(--pg-line); }
.romeo-shell[data-screen="home"] .amar-home .amar-person-action { background:var(--pg-petal); color:var(--pg-berry); border:1px solid #e6b7c6; border-radius:999px; font-weight:700; }

/* Rooms use photography as the visual lead; no glow or moving decoration. */
.romeo-shell[data-screen="rooms"] .romeo-rooms .screen-heading h1 { font-size:clamp(28px,3vw,36px); letter-spacing:-.045em; }
.romeo-shell[data-screen="rooms"] .romeo-rooms .category-tabs { gap:8px; }
.romeo-shell[data-screen="rooms"] .romeo-rooms .category-tabs button { background:var(--pg-white); color:var(--pg-muted); border:1px solid var(--pg-line); border-radius:999px; }
.romeo-shell[data-screen="rooms"] .romeo-rooms .category-tabs button.active { background:var(--pg-ink); color:#fff; border-color:var(--pg-ink); }
.romeo-shell[data-screen="rooms"] .romeo-rooms .room-card { border-radius:20px; border-color:var(--pg-line); background:var(--pg-white); box-shadow:0 3px 0 #29212e04; }
.romeo-shell[data-screen="rooms"] .romeo-rooms .room-body { padding:17px; }
.romeo-shell[data-screen="rooms"] .romeo-rooms .room-body h3 { font-weight:700; letter-spacing:-.025em; }
.romeo-shell[data-screen="rooms"] .romeo-rooms .room-description { color:var(--pg-muted); line-height:1.6; }
.romeo-shell[data-screen="rooms"] .romeo-rooms .host-line { color:var(--pg-muted); }
.romeo-shell[data-screen="rooms"] .romeo-rooms .live-label { color:var(--pg-green); background:#e8f2eb; border-radius:999px; padding:4px 8px; }
.romeo-shell[data-screen="rooms"] .romeo-rooms .section-title>span { color:var(--pg-muted); }

/* Matching pairs a clear preference panel with a large, welcoming profile card. */
.romeo-shell[data-screen="match"] .main { background:var(--pg-paper); }
.romeo-shell[data-screen="match"] .page-heading h1 { color:var(--pg-ink); letter-spacing:-.04em; }
.romeo-shell[data-screen="match"] .page-heading p { color:var(--pg-muted); line-height:1.6; }
.romeo-shell[data-screen="match"] .page-heading .eyebrow { color:var(--pg-berry); }
.romeo-shell[data-screen="match"] .match-filter-form {
  padding:16px;
  border:1px solid var(--pg-line);
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#fcf6f7);
  box-shadow:0 8px 24px #29212e08;
}
.romeo-shell[data-screen="match"] .match-filter-form label { color:var(--pg-muted); font-size:.8rem; }
.romeo-shell[data-screen="match"] .match-filter-form :is(input,select) {
  color:var(--pg-ink);
  border:1px solid #ddd1d8;
  border-radius:12px;
  background:#fff;
}
.romeo-shell[data-screen="match"] .match-filter-form :is(input,select):focus-visible {
  border-color:var(--pg-berry);
  outline:3px solid #ac244c24;
  outline-offset:1px;
}
.romeo-shell[data-screen="match"] .match-shortcuts .btn { border-color:var(--pg-line); box-shadow:0 2px 0 #29212e05; }
.romeo-shell[data-screen="match"] .match-deck { min-height:470px; }
.romeo-shell[data-screen="match"] .match-card {
  display:grid;
  grid-template-rows:auto 1fr;
  border:1px solid var(--pg-line);
  border-radius:24px;
  background:var(--pg-white);
  box-shadow:0 16px 38px #29212e12;
}
.romeo-shell[data-screen="match"] .match-card > img.match-photo {
  display:block;
  width:100%;
  height:clamp(184px,34vw,260px);
  object-fit:cover;
  background:linear-gradient(135deg,#f9e4cd,#f9e8ed 58%,#ece7f4);
}
.romeo-shell[data-screen="match"] .match-card > .match-photo.match-monogram {
  display:grid;
  min-height:184px;
  max-height:240px;
  align-content:center;
  justify-items:center;
  gap:12px;
  background:
    radial-gradient(circle at 50% 40%,#fff8f0 0 18%,transparent 18.5%),
    radial-gradient(ellipse at 50% 115%,#f4d8dc 0 48%,transparent 49%),
    linear-gradient(140deg,#fae6d1,#f8e9ef 58%,#ece7f4);
}
.romeo-shell[data-screen="match"] .match-monogram .avatar {
  width:78px;
  height:78px;
  border:3px solid #fff;
  border-radius:27px 27px 27px 9px;
  background:#432b50;
  color:#fff;
  box-shadow:0 8px 24px #432b502c;
  font-size:1.8rem;
}
.romeo-shell[data-screen="match"] .match-monogram > span { color:#584a55; font-size:.9rem; font-weight:650; }
.romeo-shell[data-screen="match"] .match-card .match-body { padding:18px 20px 20px; }
.romeo-shell[data-screen="match"] .match-card .match-body h2 { margin:0 0 4px; color:var(--pg-ink); font-size:1.35rem; letter-spacing:-.025em; }
.romeo-shell[data-screen="match"] .match-card .match-body > p { color:var(--pg-muted); line-height:1.55; }
.romeo-shell[data-screen="match"] .match-actions { gap:10px; margin-top:16px; }
.romeo-shell[data-screen="match"] .match-actions .btn { min-height:48px; border-radius:14px; font-size:.95rem; font-weight:700; }
.romeo-shell[data-screen="match"] .match-actions .btn.pass { border:1px solid #e6cbd4; background:#fff7f8; color:#7b485c; }
.romeo-shell[data-screen="match"] .match-actions .btn.like { border:1px solid var(--pg-berry); background:var(--pg-berry); color:#fff; }
.romeo-shell[data-screen="match"] .match-actions .btn { min-width:0; white-space:nowrap; }
.romeo-shell[data-screen="match"] .mutual-matches { color:var(--pg-ink); }

/* Personal profile: warm cover and a clear white identity card. */
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-cover { background:var(--pg-apricot); border:1px solid #ead6c3; border-radius:22px; }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-toolbar .btn { color:var(--pg-ink); background:#fffaf4; }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-toolbar .icon-btn { color:var(--pg-ink); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-identity { background:var(--pg-white); border:1px solid var(--pg-line); border-radius:18px; }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-identity h1 { color:var(--pg-ink); font-weight:750; }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-identity p,.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-stats :is(span,button) { color:var(--pg-muted); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-stats button { background:var(--pg-petal); color:var(--pg-berry); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-shortcuts { background:var(--pg-white); border-radius:18px; border-color:var(--pg-line); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-shortcuts button { color:var(--pg-ink); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-shortcuts button>span { color:var(--pg-berry); background:var(--pg-petal); border-radius:12px; }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-tabs { background:var(--pg-paper); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-tabs button { color:var(--pg-muted); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-tabs button.active { color:var(--pg-berry); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-tabs button.active:after { background:var(--pg-berry); }
.romeo-shell[data-screen="profile"] .romeo-profile :is(.amar-own-info,.amar-own-moments,.amar-own-account-tools) { background:var(--pg-white); border-color:var(--pg-line); border-radius:18px; }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-info :is(dt,small) { color:var(--pg-muted); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-own-info .amar-verification-grid button { background:var(--pg-paper); color:var(--pg-muted); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-verification-grid button {
  min-height: 58px;
  border: 1px solid #e7dce1;
  border-radius: 14px;
  background: #faf7f5;
  color: #584b54;
  font-weight: 650;
  line-height: 1.4;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.romeo-shell[data-screen="profile"] .romeo-profile .amar-verification-grid button svg { color:var(--pg-berry); opacity:1; }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-verification-grid button:hover { border-color:#d7aeba; background:#fff; }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-verification-grid button:active { transform:scale(.985); }
.romeo-shell[data-screen="profile"] .romeo-profile .amar-empty {
  box-sizing: border-box;
  min-height: 188px;
  padding: 24px 16px;
  gap: 12px;
  border: 1px solid #eadde1;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff9f7, #fff 74%);
  color: #584b54;
}
.romeo-shell[data-screen="profile"] .romeo-profile .amar-empty > svg {
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 16px;
  background: var(--pg-petal);
  color: var(--pg-berry);
}
.romeo-shell[data-screen="profile"] .romeo-profile .amar-empty p { color:#584b54; font-size:14px; line-height:1.5; }
.romeo-shell[data-screen="profile"] .romeo-profile .setting-row { color:var(--pg-ink); border-color:var(--pg-line); }
.romeo-shell[data-screen="profile"] .romeo-profile .setting-row.negative { color:#a72547; }

@media(max-width:700px) {
  .romeo-shell[data-screen="chat"] .topbar,
  .romeo-shell[data-screen="room"] .topbar { display:none; }
  .romeo-shell[data-screen="chat"] .main {
    height:100dvh;
    min-height:0;
    padding:10px 16px max(10px,env(safe-area-inset-bottom));
  }
  .romeo-shell[data-screen="room"] .main {
    min-height:100dvh;
    padding:12px 18px max(14px,env(safe-area-inset-bottom));
  }
  .romeo-shell[data-screen="home"] .amar-home .amar-promo-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .romeo-shell[data-screen="home"] .amar-home .amar-promo { padding:14px; min-height:118px; }
  .romeo-shell[data-screen="home"] .amar-home .amar-promo:nth-child(2) { border-right:0; }
  .romeo-shell[data-screen="home"] .amar-home .amar-promo:nth-child(-n+2) { border-bottom:1px solid var(--pg-line); }
  .romeo-shell[data-screen="home"] .amar-home .amar-person { gap:12px; padding-block:21px; }
  .romeo-shell[data-screen="home"] .amar-home .product-heading p { font-size:13px; }
  .romeo-shell[data-screen="home"] .amar-home .amar-person-copy p { font-size:13px; }
  .romeo-shell[data-screen="profile"] .romeo-profile .amar-own-cover { border-radius:18px; }
  .romeo-shell[data-screen="profile"] .romeo-profile .amar-own-shortcuts button { min-height:74px; }
  .romeo-shell[data-screen="profile"] .romeo-profile .amar-own-tabs button { min-height:48px; }
  .romeo-shell[data-screen="profile"] .romeo-profile .setting-row { min-height:54px; }
  .romeo-shell[data-screen="events"] .event-row {
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:start;
    gap:12px;
    padding:14px;
  }
  .romeo-shell[data-screen="events"] .event-date { width:48px; min-width:48px; }
  .romeo-shell[data-screen="events"] .event-details h2 { overflow-wrap:normal; word-break:normal; }
  .romeo-shell[data-screen="events"] .event-actions { grid-column:2; margin:0; justify-self:start; }
  .romeo-shell[data-screen="events"] .event-actions .btn,
  .romeo-shell[data-screen="events"] .screen-heading > .btn { min-height:44px; }
}
@media(max-width:700px) and (max-height:700px) {
  .romeo-shell[data-screen="room"] #page { min-height:calc(100dvh - 26px); }
  .romeo-shell[data-screen="room"] .room-layout { gap:10px; }
  .romeo-shell[data-screen="room"] .room-banner { margin-bottom:14px; }
  .romeo-shell[data-screen="room"] .seats { gap:12px 8px; min-height:0; }
  .romeo-shell[data-screen="room"] .seat .avatar.lg,
  .romeo-shell[data-screen="room"] .seat.empty-seat .seat-circle { width:48px; height:48px; }
  .romeo-shell[data-screen="room"] .room-controls { gap:11px; margin-top:9px; padding-top:11px; }
  .romeo-shell[data-screen="room"] .status-strip { margin-top:8px; }
  .romeo-shell[data-screen="room"] .room-feed { min-height:130px; padding-top:10px; }
  .romeo-shell[data-screen="room"] .room-chat-log { height:70px; min-height:48px; }
}

/* Keep discovery filters and their two shortcuts on one calm row on narrow phones. */
@media(max-width:380px) {
  .romeo-shell[data-screen="home"] .amar-home .amar-home-toolbar { flex-wrap:nowrap; gap:4px; }
  .romeo-shell[data-screen="home"] .amar-home .list-toolbar { flex:1 1 0; width:0; }
  .romeo-shell[data-screen="home"] .amar-home .amar-home-toolbar .text-tabs { flex-wrap:nowrap; gap:clamp(6px,2.2vw,9px); }
  .romeo-shell[data-screen="home"] .amar-home .amar-home-toolbar .text-tabs button { min-width:0; padding-inline:2px; font-size:12px; white-space:nowrap; }
  .romeo-shell[data-screen="home"] .amar-home .amar-home-actions { gap:0; }
  .romeo-shell[data-screen="home"] .amar-home .amar-home-actions .icon-btn { width:44px; min-width:44px; min-height:44px; padding:0; }
}
@media(max-width:1024px) {
  .romeo-shell[data-screen="chat"] .message-tools button {
    display:inline-grid;
    min-width:44px;
    min-height:44px;
    place-items:center;
    padding:12px;
    border-radius:12px;
    color:#55454e;
    touch-action:manipulation;
  }
  .romeo-shell[data-screen="chat"] .message-tools button:active { background:#f4e8ec; }
  .romeo-shell[data-screen="chat"] .message-tools button:focus-visible { outline:2px solid #ac244c; outline-offset:1px; }
}
.romeo-shell[data-screen="messages"] .romeo-messages .conversation aside {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  min-width:48px;
}
.romeo-shell[data-screen="messages"] .romeo-messages .conversation aside time {
  display:block;
  max-width:100%;
  overflow:hidden;
  font-variant-numeric:tabular-nums;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(min-width:701px) {
  .romeo-shell[data-screen="chat"] .main,
  .romeo-shell[data-screen="room"] .main {
    height:100dvh;
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:0 38px 20px;
  }
  .romeo-shell[data-screen="chat"] #page,
  .romeo-shell[data-screen="room"] #page {
    display:flex;
    flex:1;
    flex-direction:column;
    min-height:0;
    width:100%;
  }
  .romeo-shell[data-screen="chat"] .chat-log {
    height:auto;
    flex:1;
    min-height:0;
  }
  .romeo-shell[data-screen="room"] .room-layout { flex:1; min-height:0; }
  .romeo-shell[data-screen="room"] .room-feed { display:flex; flex-direction:column; min-height:0; }
  .romeo-shell[data-screen="room"] .room-chat-log { height:auto; flex:1; min-height:0; }
}
.romeo-shell[data-screen="moments"] .amar-stories {
  margin: 2px 0 12px;
  padding: 10px 12px 2px;
  overflow: hidden;
  border: 1px solid #eadde1;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #fff9f6 62%, #fdf1f3 100%);
  box-shadow: 0 5px 18px #3c27300a;
}
.romeo-shell[data-screen="moments"] .amar-stories .story-strip { padding-bottom: 10px; }
.romeo-shell[data-screen="moments"] .romeo-moments .post {
  margin: 14px 0 16px;
  padding: 16px;
  border: 1px solid #e9dfe2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px #33232a0a;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.romeo-shell[data-screen="moments"] .romeo-moments .post:hover {
  border-color: #d8c3ca;
  box-shadow: 0 12px 28px #33232a12;
}
.romeo-shell[data-screen="moments"] .romeo-moments .post-author small {
  color: #786b73;
  font-size: 11px;
}
.romeo-shell[data-screen="moments"] .romeo-moments .post-actions button {
  min-height: 44px;
  border-radius: 12px;
}
.modal:has(.story-composer) {
  width: min(100%, 500px);
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  border-color: #ead9df;
  background:
    radial-gradient(ellipse at 92% 0%, #f9e8ed 0, transparent 40%),
    #fffdfa;
  box-shadow: 0 28px 88px #35212b38;
}
.story-composer { display: grid; gap: 10px; color: #29212e; }
.story-composer-mark {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  padding: 7px 10px;
  border: 1px solid #f0d7df;
  border-radius: 999px;
  background: #fff5f7;
  color: #9b2448;
}
.story-composer-mark svg { width: 17px; height: 17px; }
.story-composer-mark span { font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.story-composer h2 { margin: 0; color: #29212e; font-size: clamp(1.35rem, 5vw, 1.65rem); letter-spacing: -.035em; }
.story-composer-intro { max-width: 38ch; margin: 0 0 7px; color: #6c616a; font-size: .92rem; line-height: 1.55; }
.story-composer-form { display: grid; gap: 9px; }
.story-composer-form label { color: #40343c; font-size: .86rem; font-weight: 700; }
.story-composer-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 142px;
  resize: vertical;
  padding: 14px 15px;
  border: 1px solid #d9cbd1;
  border-radius: 16px;
  background: #fff;
  color: #29212e;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.story-composer-form textarea::placeholder { color: #81737b; opacity: 1; }
.story-composer-form textarea:focus { border-color: #ac244c; outline: 0; box-shadow: 0 0 0 3px #ac244c20; }
.story-composer-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6c616a; font-size: .76rem; }
.story-composer-meta output { color: #6c616a; font-variant-numeric: tabular-nums; }
.story-composer-meta output.near-limit { color: #9b2448; font-weight: 750; }
.story-composer-form .btn { min-height: 48px; margin-top: 6px; }
.story-composer-form .btn.primary { border-color: #ac244c; background: #ac244c; color: #fff; }
.story-composer-form .btn.primary:hover { border-color: #8e1c3e; background: #8e1c3e; }
.modal-backdrop:has(.notifications-panel),
.modal-backdrop:has(.comments-panel) {
  background: #21152278;
  backdrop-filter: blur(10px) saturate(.9);
}
.modal:has(.notifications-panel),
.modal:has(.comments-panel) {
  width: min(100%, 520px);
  max-height: 88%;
  max-height: 88vh;
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  padding: 30px 24px 24px;
  border: 1px solid #ead9df;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 96% 0%, #f9e8ed 0, transparent 38%),
    #fffdfa;
  box-shadow: 0 28px 88px #35212b38;
}
body:has(.notifications-panel) #toasts,
body:has(.comments-panel) #toasts { z-index: 49; }
.notifications-panel { color: #29212e; }
.notifications-panel h2,
.comments-panel h2 {
  margin: 0 40px 5px 0;
  color: #29212e;
  font-size: 1.55rem;
  letter-spacing: -.035em;
}
.notifications-panel .notifications-order {
  margin: 0 0 15px;
  color: #6c616a;
  font-size: .86rem;
  line-height: 1.5;
}
.notifications-list {
  display: grid;
  max-height: min(42dvh, 440px);
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #d9c4cc transparent;
  scrollbar-width: thin;
}
.notifications-panel .notification-row {
  min-height: 78px;
  padding: 12px;
  border: 1px solid #ece3e6;
  border-radius: 16px;
  background: #fff;
  color: #29212e;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.notifications-panel .notification-row.unread {
  border-color: #efd4dd;
  background: linear-gradient(110deg, #fff2f5, #fffdfa 78%);
}
.notifications-panel .notification-row:hover {
  border-color: #d9b5c1;
  background-color: #fff8fa;
}
.notifications-panel .notification-row:active { transform: scale(.99); }
.notifications-panel .notification-row:focus-visible { outline: 3px solid #ac244c; outline-offset: 2px; }
.notifications-panel .notification-row > .avatar { width: 44px; height: 44px; flex: none; }
.notifications-panel .notification-row strong { color: #332631; font-size: .9rem; }
.notifications-panel .notification-row p { margin: 4px 0; color: #5e5269; font-size: .82rem; line-height: 1.45; }
.notifications-panel .notification-row small { color: #786c74; font-size: .72rem; }
.notifications-panel .notifications-empty {
  margin: 0;
  padding: 24px 18px;
  border: 1px dashed #dfccd3;
  border-radius: 17px;
  background: linear-gradient(140deg, #fff8f8, #fffdfa 70%);
  color: #625660;
  text-align: center;
}
.notifications-panel .notifications-status { min-height: 1.5em; margin: 10px 0 0; color: #5e5269; }
.notifications-panel .notifications-status:empty { display:none; }
.notifications-panel .form-error:focus { outline-color: #ac244c; }
.notifications-panel .btn { min-height: 48px; margin-top: 10px; border-radius: 14px; }
.comments-panel { color: #29212e; }
.modal:has(.comments-panel) > .modal-close { width:44px; height:44px; min-width:44px; min-height:44px; }
.comments-panel h2 { margin-bottom: 12px; }
.comments-panel .comments-history-status { color: #6c616a; }
.comments-panel .comments-history-error { margin: 7px 0; }
.comments-panel .comments-log {
  max-height: min(38dvh, 360px);
  margin: 12px 0 16px;
  padding: 0 2px;
  overscroll-behavior: contain;
  scrollbar-color: #d9c4cc transparent;
  scrollbar-width: thin;
}
.comments-panel .comment-row {
  gap: 11px;
  padding: 13px 2px;
  border-color: #ece3e6;
}
.comments-panel .comment-row > .avatar { width: 38px; height: 38px; flex: none; }
.comments-panel .comment-row b { color: #332631; font-size: .88rem; }
.comments-panel .comment-row p { margin: 5px 0; color: #514650; font-size: .87rem; line-height: 1.55; }
.comments-panel .comment-row small { color: #786c74; font-size: .72rem; }
.comments-panel .comments-empty {
  margin: 0;
  padding: 21px 16px;
  border: 1px dashed #dfccd3;
  border-radius: 16px;
  background: linear-gradient(140deg, #fff8f8, #fffdfa 70%);
  color: #625660;
  text-align: center;
}
.comments-panel form { display: grid; gap: 8px; }
.comments-panel .field { display: grid; gap: 7px; }
.comments-panel .field label { color: #40343c; font-size: .86rem; font-weight: 700; }
.comments-panel textarea {
  box-sizing: border-box;
  min-height: 106px;
  padding: 13px 14px;
  border: 1px solid #d9cbd1;
  border-radius: 15px;
  background: #fff;
  color: #29212e;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.comments-panel textarea::placeholder { color: #81737b; opacity: 1; }
.comments-panel textarea:focus { border-color: #ac244c; outline: 0; box-shadow: 0 0 0 3px #ac244c20; }
.comments-panel textarea[readonly] { border-color: #e3d8dd; background: #f8f4f5; color: #514650; }
.comments-panel .comment-pending {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #ead6dd;
  border-radius: 13px;
  background: #fff6f8;
  color: #66565f;
  font-size: .82rem;
  line-height: 1.55;
}
.comments-panel .comment-status { min-height: 1.5em; margin: 0; color: #5e5269; }
.comments-panel .form-error:focus,
.comments-panel .comments-log:focus-visible,
.comments-panel .comments-history-error:focus,
.comments-panel .comments-history-status:focus { outline: 2px solid #ac244c; outline-offset: 3px; }
.comments-panel .btn.primary { border-color: #ac244c; background: #ac244c; color: #fff; }
.comments-panel .btn.primary:hover { border-color: #8e1c3e; background: #8e1c3e; }
.comments-panel .btn.secondary { border-color: #d9cbd1; background: #fff; color: #433741; }
.comments-panel .btn { min-height: 48px; border-radius: 14px; transition: transform .16s ease, background-color .16s ease; }
.comments-panel .btn:active { transform: scale(.99); }
@media (max-width: 700px) {
  .modal-backdrop:has(.notifications-panel),
  .modal-backdrop:has(.comments-panel) { padding: 0; align-items: flex-end; }
  .modal:has(.notifications-panel),
  .modal:has(.comments-panel) {
    width: 100%;
    max-width: none;
    max-height: 88%;
    max-height: 88vh;
    max-height: min(88dvh, 760px);
    padding: 30px 16px max(18px, env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 26px 26px 0 0;
  }
  .modal:has(.comments-panel) > .modal-close {
    position:sticky;
    z-index:3;
    top:0;
    margin:0 0 12px auto;
  }
  .modal:has(.comments-panel) .comments-panel h2 {
    margin:0 56px 12px 0;
    padding-right:56px;
  }
  .notifications-list,
  .comments-panel .comments-log { max-height: min(38dvh, 360px); }
}
.romeo-shell[data-screen="agencies"] .agency-directory { width:min(100%,960px); margin-inline:auto; }
.romeo-shell[data-screen="agencies"] .agency-create { min-height:50px; margin:2px 0 25px; border-radius:15px; box-shadow:0 8px 18px #8b23431c; }
.romeo-shell[data-screen="agencies"] .agency-eligibility { display:flex; align-items:center; gap:12px; margin:2px 0 25px; padding:13px 15px; border:1px solid #e6d8bb; border-radius:15px; background:linear-gradient(110deg,#fff8e8,#fffdfa); color:#5d4c39; }
.romeo-shell[data-screen="agencies"] .agency-eligibility>span { display:grid; width:36px; height:36px; flex:none; place-items:center; border-radius:12px; background:#f2e6cf; color:#805c26; }
.romeo-shell[data-screen="agencies"] .agency-eligibility p { margin:0; font-size:13px; line-height:1.5; }
.romeo-shell[data-screen="agencies"] .agency-group { margin-top:24px; }
.romeo-shell[data-screen="agencies"] .agency-group>.section-title { margin-bottom:12px; }
.romeo-shell[data-screen="agencies"] .agency-group>.section-title h2 { color:var(--pg-ink); font-size:18px; letter-spacing:-.025em; }
.romeo-shell[data-screen="agencies"] .agency-group>.section-title>span { color:var(--pg-muted); font-size:12px; }
.romeo-shell[data-screen="agencies"] .agency-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:12px; }
.romeo-shell[data-screen="agencies"] .agency-card { display:grid; width:100%; max-width:620px; box-sizing:border-box; min-width:0; grid-template-columns:48px minmax(0,1fr); grid-template-rows:1fr auto; gap:12px; padding:16px; border:1px solid var(--pg-line); border-radius:19px; background:linear-gradient(145deg,#fff,#fffaf9); box-shadow:0 6px 20px #29212e08; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.romeo-shell[data-screen="agencies"] .agency-card:hover { transform:translateY(-2px); border-color:#e3bdca; box-shadow:0 12px 27px #29212e12; }
.romeo-shell[data-screen="agencies"] .agency-card.is-member { border-color:#d8e7dc; background:linear-gradient(145deg,#fff,#f8fbf8); }
.romeo-shell[data-screen="agencies"] .agency-mark { display:grid; width:46px; height:46px; place-items:center; padding:0; border:1px solid #eacbd5; border-radius:16px 16px 16px 6px; background:linear-gradient(145deg,#fbedf1,#f9e6ec); color:var(--pg-berry); cursor:pointer; }
.romeo-shell[data-screen="agencies"] .agency-mark svg { width:21px; height:21px; }
.romeo-shell[data-screen="agencies"] .agency-mark{overflow:hidden;padding:0}.romeo-shell[data-screen="agencies"] .agency-mark img{width:100%;height:100%;object-fit:cover}
.romeo-shell[data-screen="agencies"] .agency-card-copy { min-width:0; }
.romeo-shell[data-screen="agencies"] .agency-card-title { display:flex; min-width:0; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--pg-ink); text-align:left; cursor:pointer; }
.romeo-shell[data-screen="agencies"] .agency-card-title h3 { overflow:hidden; margin:1px 0 0; font-size:15px; font-weight:760; letter-spacing:-.02em; text-overflow:ellipsis; white-space:nowrap; }
.romeo-shell[data-screen="agencies"] .agency-lock { display:flex; flex:none; color:#9a7785; }
.romeo-shell[data-screen="agencies"] .agency-lock svg { width:14px; height:14px; }
.romeo-shell[data-screen="agencies"] .agency-card-copy>p { display:-webkit-box; min-height:3em; overflow:hidden; margin:7px 0 9px; color:#625760; font-size:13px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.romeo-shell[data-screen="agencies"] .agency-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; color:var(--pg-muted); font-size:12px; }
.romeo-shell[data-screen="agencies"] .agency-card-meta>span { display:inline-flex; align-items:center; gap:5px; }
.romeo-shell[data-screen="agencies"] .agency-card-meta svg { width:14px; height:14px; }
.romeo-shell[data-screen="agencies"] .agency-card-meta .agency-member-pill { padding:4px 8px; border:1px solid #d6e8dc; border-radius:999px; background:#f0f8f2; color:#286044; font-weight:700; }
.romeo-shell[data-screen="agencies"] .agency-card-action { grid-column:1/-1; }
.romeo-shell[data-screen="agencies"] .agency-card-action .btn { display:flex; width:100%; min-height:46px; align-items:center; justify-content:center; gap:8px; border-radius:13px; }
.romeo-shell[data-screen="agencies"] .agency-card-action .btn svg { width:16px; height:16px; }
.romeo-shell[data-screen="agencies"] .agency-card-title:focus-visible,
.romeo-shell[data-screen="agencies"] .agency-mark:focus-visible { border-radius:7px; outline:3px solid #ad3155; outline-offset:3px; }
@media(max-width:800px) { .romeo-shell[data-screen="agencies"] .agency-grid { grid-template-columns:1fr; } }
@media(max-width:380px) {
  .romeo-shell[data-screen="agencies"] .agency-card { grid-template-columns:42px minmax(0,1fr); gap:10px; padding:13px; }
  .romeo-shell[data-screen="agencies"] .agency-mark { width:40px; height:40px; border-radius:14px 14px 14px 5px; }
  .romeo-shell[data-screen="agencies"] .agency-card-title h3 { font-size:14px; }
  .romeo-shell[data-screen="agencies"] .agency-card-copy>p { font-size:12px; }
}

@media(prefers-reduced-motion:reduce) {
  .romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) *,
.romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) *:before,
  .romeo-shell:not([data-screen="games"]):not([data-screen="arcade"]) *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Compact room discovery header without changing room navigation or categories. */
.romeo-shell[data-screen="rooms"] .romeo-rooms .room-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.romeo-shell[data-screen="rooms"] .romeo-rooms .room-card:active { transform: scale(.99); }
.romeo-shell[data-screen="rooms"] .romeo-rooms .room-card:focus-visible {
  outline: 3px solid var(--pg-focus);
  outline-offset: 3px;
}
@media (hover:hover) and (min-width:701px) {
  .romeo-shell[data-screen="rooms"] .romeo-rooms .room-card:hover {
    transform: translateY(-2px);
    border-color: #d5bdc8;
    box-shadow: 0 10px 24px #29212e12;
  }
}
@media (max-width:420px) {
  .romeo-shell[data-screen="rooms"] .romeo-rooms .screen-heading {
    min-height: 46px;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
  }
  .romeo-shell[data-screen="rooms"] .romeo-rooms .screen-heading h1 {
    flex: 0 1 auto;
    font-size: clamp(22px, 7vw, 25px);
    line-height: 1.12;
    white-space: nowrap;
  }
  .romeo-shell[data-screen="rooms"] .romeo-rooms .screen-heading .inline-actions {
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
  }
  .romeo-shell[data-screen="rooms"] .romeo-rooms .screen-heading .room-host-action {
    min-height: 44px;
    gap: 5px;
    padding: 9px 10px;
    white-space: nowrap;
  }
  .romeo-shell[data-screen="rooms"] .romeo-rooms .screen-heading .room-host-action span { font-size: 11px; }
  .romeo-shell[data-screen="rooms"] .romeo-rooms .category-tabs {
    gap: 6px;
    flex-wrap: wrap;
    overflow: visible;
    padding: 2px 0 0;
    scroll-snap-type: none;
  }
  .romeo-shell[data-screen="rooms"] .romeo-rooms .category-tabs button {
    min-height: 44px;
    flex: 0 0 auto;
  }
}

/* The Moments filters name the feed they actually show. */
.romeo-shell[data-screen="moments"] .romeo-moments > .text-tabs {
  flex-wrap: nowrap;
  gap: 16px;
}
.romeo-shell[data-screen="moments"] .romeo-moments > .text-tabs button {
  min-width: 0;
  white-space: nowrap;
}
.romeo-shell[data-screen="moments"] .romeo-moments .post-actions button {
  transition: transform .16s ease, color .16s ease, background-color .16s ease;
}
.romeo-shell[data-screen="moments"] .romeo-moments .post-actions button:active {
  transform: scale(.94);
}
#modal-root:has(#post-form) .modal .btn.primary {
  border-color: #ac244c;
  background: #ac244c;
  color: #fff;
}
#modal-root:has(#post-form) .modal .btn.primary:hover {
  border-color: #8e1c3e;
  background: #8e1c3e;
}
#modal-root:has(#post-form) .modal #post-body:focus {
  border-color: #ac244c;
  outline: 2px solid #ac244c;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #ac244c20;
}
#modal-root:has(#post-form) .modal :is(button,input,textarea):focus-visible {
  outline: 3px solid #ac244c;
  outline-offset: 3px;
}
#modal-root:has(#store-products) .modal #store-products .notice {
  margin: 8px 0 15px;
  padding: 13px 14px;
  border: 1px solid #e5d0a8;
  border-left: 3px solid #94652a;
  border-radius: 13px;
  background: #fff8e9;
  color: #514337;
  font-size: .86rem;
  line-height: 1.6;
}
@media (max-width:380px) {
  .romeo-shell[data-screen="moments"] .romeo-moments > .text-tabs { gap: 12px; }
  .romeo-shell[data-screen="moments"] .romeo-moments > .text-tabs button { font-size: 13px; }
}

/* Story viewing: keep the photo calm and the short text easy to scan. */
.modal-backdrop:has(.story-panel) {
  background: #241923a6;
  -webkit-backdrop-filter: blur(10px) saturate(.92);
  backdrop-filter: blur(10px) saturate(.92);
}
.modal:has(.story-panel) {
  width: min(100%, 520px);
  max-height: min(92vh, 860px);
  max-height: min(92dvh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px;
  border: 1px solid #ead9df;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 94% 0, #f9e8ed 0, transparent 42%),
    #fffdfa;
  box-shadow: 0 28px 88px #35212b45;
}
.story-panel {
  display: grid;
  gap: 12px;
  color: #29212e;
}
.story-panel h2 {
  padding-right: 42px;
  color: #29212e;
  font-size: 21px;
  letter-spacing: -.025em;
}
.story-panel .story-viewer {
  min-width: 0;
  margin: 0 34px 0 0;
  gap: 11px;
}
.story-panel .story-viewer .avatar {
  flex: none;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #e8c2ce, 0 5px 15px #4326351a;
}
.story-panel .story-viewer strong {
  color: #342a33;
  font-size: .92rem;
  line-height: 1.35;
}
.story-panel .story-viewer small {
  color: #6c616a;
  font-size: .76rem;
  line-height: 1.45;
}
.story-panel > [role="status"],
.story-panel .story-media-status {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin: 0;
  padding: 17px 14px;
  border: 1px solid #eadde0;
  border-radius: 16px;
  background: #faf6f3;
  color: #6c616a;
  font-size: .85rem;
  line-height: 1.45;
  text-align: center;
}
.story-panel > [role="status"]::before,
.story-panel .story-media-status::before {
  width: 22px;
  height: 22px;
  border: 2px solid #e8c8d2;
  border-top-color: #ac244c;
  border-radius: 50%;
  content: "";
  animation: story-viewer-spin .9s linear infinite;
}
.story-panel .story-photo {
  width: 100%;
  max-width: 100%;
  max-height: min(58vh, 560px);
  margin: 0 auto;
  border: 1px solid #eadde0;
  border-radius: 18px;
  background: #f2eae6;
  box-shadow: 0 10px 26px #39293116, inset 0 0 0 1px #fff8;
}
.story-panel .story-media-status {
  min-height: 86px;
  align-content: center;
}
.story-panel .story-media-status[hidden] { display:none; }
.story-panel .story-copy {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #eee4e5;
  border-radius: 14px;
  background: #fff;
  color: #514650;
  font-size: .9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.story-panel .form-error {
  margin: 0;
  padding: 12px 13px;
  border: 1px solid #e6bac8;
  border-radius: 14px;
  background: #fff1f4;
  color: #82203f;
  font-size: .88rem;
  line-height: 1.5;
}
.story-panel .form-error:focus-visible { outline: 3px solid #ac244c; outline-offset: 3px; }
.story-panel .btn { min-height: 48px; margin-top: 0; }
.story-panel .btn.primary { border-color: #ac244c; background: #ac244c; color: #fff; }
.story-panel .btn.primary:hover { border-color: #8e1c3e; background: #8e1c3e; }
.modal:has(.story-panel) :is(button, a):focus-visible {
  outline: 3px solid #ac244c;
  outline-offset: 3px;
}
@media (max-width:700px) {
  .modal:has(.story-panel) {
    width: 100%;
    max-height: 94%;
    max-height: min(94dvh, 860px);
    padding: 30px 16px max(20px, env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 26px 26px 0 0;
  }
}
@media (max-width:360px) and (max-height:680px) {
  .story-panel .story-photo { max-height: 48vh; }
}
@media (prefers-reduced-motion:reduce) {
  .story-panel .story-photo,
  .story-panel .btn { transition: none; }
  .story-panel > [role="status"]::before,
  .story-panel .story-media-status::before { animation:none; }
}
@keyframes story-viewer-spin { to { transform:rotate(1turn); } }

/* Album photo viewer: a quiet portrait frame with actions tied to the selected post. */
.modal-backdrop:has(.album-viewer) {
  background:#241923a6;
  -webkit-backdrop-filter:blur(10px) saturate(.92);
  backdrop-filter:blur(10px) saturate(.92);
}
.modal:has(.album-viewer) {
  width:min(100%, 540px);
  max-height:min(92vh, 860px);
  max-height:min(92dvh, 860px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:22px;
  border:1px solid #ead9df;
  border-radius:26px;
  background:radial-gradient(ellipse at 94% 0, #f9e8ed 0, transparent 42%), #fffdfa;
  box-shadow:0 28px 88px #35212b45;
}
.album-viewer {
  display:grid;
  gap:10px;
  color:#29212e;
}
.album-viewer h2 {
  padding-right:42px;
  color:#29212e;
  font-size:21px;
  letter-spacing:-.025em;
}
.album-viewer > p:not(.form-error):not(.album-post-body):not([role="status"]) {
  margin:0;
  color:#6c616a;
  font-size:.86rem;
  line-height:1.45;
}
.album-viewer .album-image-frame {
  box-sizing:border-box;
  width:100%;
  min-height:200px;
  max-height:min(56vh, 520px);
  aspect-ratio:4 / 5;
  padding:10px;
  border:1px solid #eadde0;
  border-radius:19px;
  background:
    radial-gradient(ellipse at 50% 0, #f9e8ed, transparent 68%),
    #f5efeb;
  box-shadow:0 10px 26px #39293116, inset 0 0 0 1px #fff8;
}
.album-viewer .album-full-image {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  border:1px solid #fff;
  border-radius:13px;
  background:#eee6e2;
  object-fit:contain;
  box-shadow:0 8px 22px #33252a26;
}
.album-viewer .album-full-image[hidden],
.album-viewer #album-image-status[hidden],
.album-viewer #album-view-error[hidden] { display:none; }
.album-viewer #album-image-status,
.album-viewer > [role="status"] {
  display:grid;
  justify-items:center;
  gap:9px;
  margin:0;
  color:#6c616a;
  font-size:.85rem;
  line-height:1.45;
  text-align:center;
}
.album-viewer #album-image-status::before,
.album-viewer > [role="status"]::before {
  width:22px;
  height:22px;
  border:2px solid #e8c8d2;
  border-top-color:#ac244c;
  border-radius:50%;
  content:"";
  animation:story-viewer-spin .9s linear infinite;
}
.album-viewer .album-post-body {
  margin:0;
  padding:12px 14px;
  border:1px solid #eee4e5;
  border-radius:14px;
  background:#fff;
  color:#514650;
  font-size:.9rem;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.album-viewer .form-error {
  margin:0;
  padding:12px 13px;
  border:1px solid #e6bac8;
  border-radius:14px;
  background:#fff1f4;
  color:#82203f;
  font-size:.88rem;
  line-height:1.5;
}
.album-viewer .form-error:focus-visible { outline:3px solid #ac244c; outline-offset:3px; }
.album-viewer .btn { min-height:48px; margin-top:0; }
.album-viewer .btn.primary { border-color:#ac244c; background:#ac244c; color:#fff; }
.album-viewer .btn.primary:hover { border-color:#8e1c3e; background:#8e1c3e; }
.album-viewer .btn.secondary { border-color:#8d7b86; background:#fff; color:#29212e; }
.modal:has(.album-viewer) :is(button,a):focus-visible { outline:3px solid #ac244c; outline-offset:3px; }
@media (max-width:700px) {
  .modal:has(.album-viewer) {
    width:100%;
    max-height:94%;
    max-height:min(94dvh, 860px);
    padding:30px 16px max(20px, env(safe-area-inset-bottom));
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:26px 26px 0 0;
  }
}
@media (max-width:380px) and (max-height:680px) {
  .album-viewer .album-image-frame { max-height:46vh; }
}
@media (prefers-reduced-motion:reduce) {
  .album-viewer #album-image-status::before,
  .album-viewer > [role="status"]::before { animation:none; }
}
@media (max-width:380px) {
  .romeo-shell[data-screen="match"] .match-actions .btn { padding-inline:7px; font-size:.84rem; letter-spacing:-.015em; }
}

.romeo-shell[data-screen="moments"] .moments-empty {
  min-height: 244px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 11px;
  margin: 20px 0 28px;
  padding: 28px 22px;
  border: 1px solid #eadde2;
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 0%, #fff3f4, transparent 57%), linear-gradient(150deg, #fff, #fffaf9 72%, #fdf5f6);
  box-shadow: 0 12px 30px #3d22300a, inset 0 1px #ffffff;
  text-align: center;
  animation: moments-empty-in .32s cubic-bezier(.2,.75,.25,1) both;
}
.romeo-shell[data-screen="moments"] .moments-empty > svg {
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid #f0dce3;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #fcf0f4);
  color: #ac244c;
  box-shadow: 0 5px 14px #762b4212;
}
.romeo-shell[data-screen="moments"] .moments-empty > h3 {
  margin: 2px 0 0;
  color: #30252e;
  font-size: 1.04rem;
  letter-spacing: -.015em;
}
.romeo-shell[data-screen="moments"] .moments-empty > p {
  max-width: 38ch;
  margin: 0;
  color: #70646d;
  font-size: .9rem;
  line-height: 1.6;
}
.romeo-shell[data-screen="moments"] .moments-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 5px;
}
.romeo-shell[data-screen="moments"] .moments-empty-actions .btn {
  min-height: 44px;
  border-radius: 13px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.romeo-shell[data-screen="moments"] .moments-empty-actions .btn.primary {
  border-color: #ac244c;
  background: linear-gradient(110deg, #b62b55, #982344);
  color: #fff;
  box-shadow: 0 7px 18px #ac244c22;
}
.romeo-shell[data-screen="moments"] .moments-empty-actions .btn.primary:hover {
  background: linear-gradient(110deg, #a52149, #891b3c);
  box-shadow: 0 10px 22px #ac244c2c;
  transform: translateY(-1px);
}
.romeo-shell[data-screen="moments"] .moments-empty-actions .btn:active { transform: scale(.97); }
.romeo-shell[data-screen="moments"] .moments-empty-actions .btn:focus-visible {
  outline: 3px solid #ac244c;
  outline-offset: 3px;
}
@keyframes moments-empty-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 380px) {
  .romeo-shell[data-screen="moments"] .moments-empty { min-height: 226px; padding: 24px 17px; border-radius: 20px; }
  .romeo-shell[data-screen="moments"] .moments-empty > p { font-size: .86rem; }
  .romeo-shell[data-screen="moments"] .moments-empty-actions { width: 100%; }
  .romeo-shell[data-screen="moments"] .moments-empty-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .romeo-shell[data-screen="moments"] .moments-empty,
  .romeo-shell[data-screen="moments"] .moments-empty-actions .btn { animation: none; transition: none; }
}

/* Give an empty discovery result a clear next step. */
.romeo-shell[data-screen="home"] .home-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  width: min(100%, 420px);
  margin: 12px auto 0;
  animation: home-empty-rise .28s ease-out both;
}
.romeo-shell[data-screen="home"] .home-empty-actions .btn {
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 13px;
  font-size: .86rem;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.romeo-shell[data-screen="home"] .home-empty-actions .btn:active { transform: scale(.97); }
.romeo-shell[data-screen="home"] .home-empty-actions .btn:focus-visible { outline: 3px solid var(--pg-focus); outline-offset: 3px; }
@keyframes home-empty-rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 360px) {
  .romeo-shell[data-screen="home"] .home-empty-actions { flex-direction: column; }
  .romeo-shell[data-screen="home"] .home-empty-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .romeo-shell[data-screen="home"] .home-empty-actions,
  .romeo-shell[data-screen="home"] .home-empty-actions .btn { animation: none; transition: none; }
}

.romeo-shell[data-screen="people"] .people-empty-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 9px;
  animation: people-empty-rise .28s ease-out both;
}
.romeo-shell[data-screen="people"] .people-empty-actions .btn {
  min-height: 44px;
  margin: 0;
  padding: 10px 15px;
  border-radius: 13px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.romeo-shell[data-screen="people"] .people-empty-actions .btn.primary {
  border-color: #ac244c;
  background: linear-gradient(110deg, #b62b55, #982344);
  color: #fff;
  box-shadow: 0 7px 18px #ac244c22;
}
.romeo-shell[data-screen="people"] .people-empty-actions .btn:active { transform: scale(.97); }
.romeo-shell[data-screen="people"] .people-empty-actions .btn:focus-visible { outline: 3px solid var(--pg-focus); outline-offset: 3px; }
@keyframes people-empty-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 360px) {
  .romeo-shell[data-screen="people"] .people-empty-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .romeo-shell[data-screen="people"] .people-empty-actions,
  .romeo-shell[data-screen="people"] .people-empty-actions .btn { animation: none; transition: none; }
}