/* Duovly 2026 — Midnight Social Club
   One visual world across browse, chat, voice and identity screens. */

:root {
  --ms-bg: #0c0d10;
  --ms-bg-raised: #111318;
  --ms-surface: #17191f;
  --ms-surface-2: #1d2027;
  --ms-line: rgba(243, 238, 231, .11);
  --ms-line-strong: rgba(243, 238, 231, .2);
  --ms-text: #f3eee7;
  --ms-muted: #aaa59d;
  --ms-subtle: #77746f;
  --ms-coral: #ff5d5b;
  --ms-coral-soft: #ff8a73;
  --ms-lime: #c7ff4d;
  --ms-gold: #e5bd64;
  --ms-shadow: 0 24px 70px rgba(0, 0, 0, .38);

  --warm-white: var(--ms-bg);
  --surface: var(--ms-surface);
  --surface-warm: var(--ms-surface);
  --surface-sunken: #101217;
  --surface-mute: var(--ms-surface-2);
  --border: var(--ms-line);
  --border-strong: var(--ms-line-strong);
  --ink-900: var(--ms-text);
  --ink-800: #e6e0d9;
  --ink-700: #cbc5bd;
  --ink-600: #bbb5ad;
  --ink-500: var(--ms-muted);
  --ink-400: #8f8b85;
  --ink-300: #66645f;
  --ink-200: #393a3e;
  --coral-500: var(--ms-coral);
  --coral-600: #f24a48;
  --coral-50: rgba(255, 93, 91, .12);
  --mint-500: var(--ms-lime);
  --mint-400: var(--ms-lime);
  --mint-50: rgba(199, 255, 77, .11);
  --mint-700: #d9ff87;
  --butter-500: var(--ms-gold);
  --butter-700: #f0d28b;
  --bg: var(--ms-bg);
  --action: var(--ms-coral);
  --focus-ring: rgba(255, 93, 91, .46);
  --sh-1: 0 1px 0 rgba(255,255,255,.03);
  --sh-2: 0 14px 34px rgba(0,0,0,.24);
  --sh-3: 0 22px 54px rgba(0,0,0,.34);
  --sh-card: 0 16px 42px rgba(0,0,0,.28);
}

html, body { background: #07080a; color: var(--ms-text); }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.desktop-wrap {
  background:
    radial-gradient(circle at 8% 12%, rgba(255,93,91,.13), transparent 32%),
    radial-gradient(circle at 92% 84%, rgba(199,255,77,.06), transparent 26%),
    #07080a;
}
.phone { background: var(--ms-bg); box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.screen:not(.vroom-detail) { background: var(--ms-bg) !important; color: var(--ms-text); }
.header, .wallet-header { background: transparent; color: var(--ms-text); border-color: var(--ms-line); }
.header h1, .wallet-title, .page-title { color: var(--ms-text) !important; }
.icon-btn { color: var(--ms-text); background: var(--ms-surface); border: 1px solid var(--ms-line); }
.icon-btn svg { stroke: currentColor; }

/* Bottom navigation: quiet black rail, one sharp signal color. */
.tab-bar {
  background: rgba(12,13,16,.9) !important;
  border-top: 1px solid var(--ms-line) !important;
  box-shadow: 0 -18px 48px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
.tab { color: #74716d !important; }
.tab.active { color: var(--ms-text) !important; }
.tab.active::before {
  content: "";
  position: absolute;
  top: 4px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--ms-coral);
  box-shadow: 0 0 16px rgba(255,93,91,.72);
}
.tab-label { font-size: 10px !important; font-weight: 750 !important; letter-spacing: .02em !important; }
.rd-tab-badge { background: var(--ms-coral) !important; border-color: var(--ms-bg) !important; }

/* Home */
.home-rd { background: var(--ms-bg) !important; }
.home-rd .rd-section { padding-inline: 16px; }
.rd-header { padding: 18px 18px 10px; }
.rd-brandrow { margin-top: 0; }
.rd-logo {
  color: var(--ms-text) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
}
.rd-logo .rd-heart { display: none; }
.rd-logo::after {
  content: "SOCIAL CLUB";
  display: inline-block;
  margin-left: 8px;
  color: var(--ms-coral);
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  vertical-align: middle;
}
.rd-hbtns { gap: 7px; }
.rd-iconbtn {
  width: 40px !important;
  height: 40px !important;
  color: var(--ms-text) !important;
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-line) !important;
  box-shadow: none !important;
}
.rd-iconbtn .rd-icon3d { width: 23px !important; height: 23px !important; filter: grayscale(1) brightness(2); }
.rd-greet { color: var(--ms-muted); font-size: 13px; font-weight: 600; }
.rd-greet b { color: var(--ms-text); }
.home-rd .rd-h {
  color: var(--ms-text);
  font-size: 19px;
  font-weight: 820;
  letter-spacing: -.02em;
  margin: 29px 0 13px;
}
.home-rd .rd-h .rd-more { color: var(--ms-muted); font-size: 11px; }

.rd-featured-wrap { padding: 8px 16px 4px; }
.rd-featured {
  display: grid !important;
  grid-template-columns: 1fr !important;
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: 10px 28px 10px 10px !important;
  box-shadow: var(--ms-shadow) !important;
}
.rd-feat-photo { aspect-ratio: 16 / 11 !important; border-radius: 0 26px 0 0; }
.rd-feat-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(12,13,16,.2) 72%, var(--ms-surface) 100%);
  pointer-events: none;
}
.rd-feat-photo img { object-position: center 28% !important; filter: saturate(.86) contrast(1.04); }
.rd-feat-presence {
  z-index: 2;
  background: rgba(12,13,16,.78) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: var(--ms-text) !important;
  backdrop-filter: blur(12px);
}
.rd-feat-presence .d, .rd-chip-live .d { background: var(--ms-lime) !important; }
.rd-feat-body { padding: 5px 18px 18px !important; }
.rd-shield, .rd-sparkles { display: none !important; }
.rd-pill-gold {
  align-self: flex-start;
  color: var(--ms-coral) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}
.rd-pill-gold .rd-pill-star { color: inherit !important; }
.rd-feat-name b { color: var(--ms-text) !important; font-size: 30px !important; letter-spacing: -.035em; }
.rd-chip-live { color: #dcff95 !important; background: rgba(199,255,77,.1) !important; }
.rd-chip-soft, .rd-svc-chip {
  background: rgba(255,255,255,.05) !important;
  color: var(--ms-muted) !important;
  border-color: var(--ms-line) !important;
}
.rd-rating, .rd-price { color: var(--ms-text) !important; }
.rd-rating .c, .rd-price small { color: var(--ms-muted) !important; }
.rd-feat-cta { padding: 0 18px 18px !important; }
.rd-btn { min-height: 47px; border-radius: 6px 16px 6px 6px !important; }
.rd-btn-ghost { background: transparent !important; color: var(--ms-text) !important; border-color: var(--ms-line-strong) !important; box-shadow: none !important; }
.rd-btn-primary { background: var(--ms-coral) !important; color: #0c0d10 !important; box-shadow: 0 12px 28px rgba(255,93,91,.25) !important; }
.rd-btn-primary::after { display: none !important; }

.rd-trust {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ms-line) !important;
  border-bottom: 1px solid var(--ms-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.rd-trust-col { padding: 14px 7px !important; }
.rd-trust-col + .rd-trust-col { border-left-color: var(--ms-line) !important; }
.rd-trust-ic { filter: grayscale(.6) contrast(1.15); opacity: .82; }
.rd-trust-t { color: var(--ms-text) !important; font-size: 11px !important; }
.rd-trust-d { color: var(--ms-subtle) !important; font-size: 9px !important; }
.rd-rank {
  background: #111318 !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: 8px 24px 8px 8px !important;
}
.rd-rank::before { background: linear-gradient(90deg, transparent, rgba(255,93,91,.28), transparent) !important; }

/* Image-led service shelves */
.rd-svc-grid--editorial {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 9px !important;
}
.rd-service-art {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  border: 1px solid var(--ms-line);
  border-radius: 5px 18px 5px 5px;
  color: var(--ms-text);
  text-align: left;
  cursor: pointer;
  background-image: linear-gradient(180deg, rgba(8,9,11,.04), rgba(8,9,11,.88)), var(--service-cover);
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  transition: transform .22s var(--ease-out), border-color .22s ease;
}
.rd-service-art:active { transform: scale(.975); }
.rd-service-copy { position: absolute; left: 13px; right: 34px; bottom: 13px; display: flex; flex-direction: column; gap: 2px; }
.rd-service-copy b { font-size: 15px; font-weight: 850; }
.rd-service-copy small { color: rgba(243,238,231,.66); font-size: 10px; font-weight: 650; }
.rd-service-arrow { position: absolute; right: 12px; bottom: 14px; color: var(--ms-coral); font-size: 16px; }

.rd-connect { gap: 9px !important; }
.rd-cc {
  background: var(--ms-surface) !important;
  border-color: var(--ms-line) !important;
  border-radius: 6px 20px 6px 6px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.24) !important;
}
.rd-cc-photo { background: #090a0c !important; }
.rd-cc-photo::after { content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(transparent,rgba(12,13,16,.72)); pointer-events:none; }
.rd-cc-heart { z-index: 2; background: rgba(12,13,16,.76) !important; color: var(--ms-text) !important; box-shadow: none !important; }
.rd-cc-name b, .rd-cc-price { color: var(--ms-text) !important; }
.rd-cc-meta, .rd-cc-price small { color: var(--ms-muted) !important; }

/* Discover */
.dsc-top { background: var(--ms-bg) !important; border-bottom-color: var(--ms-line) !important; }
.dsc-title, .dsc-title small, .dsc-count { color: var(--ms-text) !important; }
.dsc-title small, .dsc-count { color: var(--ms-muted) !important; }
.dsc-search { background: var(--ms-surface) !important; border-color: var(--ms-line) !important; color: var(--ms-muted) !important; box-shadow: none !important; }
.dsc-search-ph { color: var(--ms-subtle) !important; }
.dsc-icbtn { background: var(--ms-surface) !important; color: var(--ms-text) !important; border-color: var(--ms-line) !important; }
.dsc-cover-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 8px; overflow-x: auto; margin: 15px -16px 6px; padding: 0 16px 5px; scrollbar-width: none; }
.dsc-cover-rail::-webkit-scrollbar { display: none; }
.dsc-cover {
  position: relative;
  height: 154px;
  overflow: hidden;
  border: 1px solid var(--ms-line);
  border-radius: 5px 18px 5px 5px;
  color: var(--ms-text);
  text-align: left;
  padding: 104px 10px 10px;
  background-image: linear-gradient(180deg, transparent 36%, rgba(7,8,10,.9) 100%), var(--dsc-cover);
  background-size: cover;
  background-position: center;
}
.dsc-cover b, .dsc-cover small { display: block; }
.dsc-cover b { font-size: 13px; }
.dsc-cover small { margin-top: 2px; color: var(--ms-muted); font-size: 9px; }
.dsc-chips { padding-top: 9px !important; }
.dsc-chip { color: var(--ms-muted) !important; background: var(--ms-surface) !important; border-color: var(--ms-line) !important; }
.dsc-chip.on { color: #0c0d10 !important; background: var(--ms-coral) !important; border-color: var(--ms-coral) !important; }
.dsc-sortbar { background: var(--ms-bg) !important; border-color: var(--ms-line) !important; }
.dsc-sort { color: var(--ms-muted) !important; }
.dsc-list { background: var(--ms-bg) !important; }
.dlc {
  background: var(--ms-surface) !important;
  border-color: var(--ms-line) !important;
  border-radius: 6px 20px 6px 6px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}
.dlc-nm-t, .dlc-amt { color: var(--ms-text) !important; }
.dlc-tier, .dlc-tag, .dlc-gchip { color: var(--ms-muted) !important; background: rgba(255,255,255,.05) !important; border-color: var(--ms-line) !important; }
.dlc-stats, .dlc-unit, .dlc-resp, .dlc-new-meta, .dlc-re { color: var(--ms-muted) !important; }
.dlc-bar { border-top-color: var(--ms-line) !important; }
.dlc-cta { color: #0c0d10 !important; background: var(--ms-coral) !important; border-radius: 4px 12px 4px 4px !important; }
.dlc-cta.ghost { color: var(--ms-text) !important; background: transparent !important; border: 1px solid var(--ms-line-strong) !important; }
.dlc-ring { border-color: var(--ms-lime) !important; box-shadow: 0 0 0 2px rgba(199,255,77,.08) !important; }
.dlc-dot { background: var(--ms-lime) !important; border-color: var(--ms-surface) !important; }

/* Voice rooms */
.game-filter { background: transparent !important; }
.all-pill { color: var(--ms-muted) !important; background: var(--ms-surface) !important; border-color: var(--ms-line) !important; }
.all-pill.active { color: #0c0d10 !important; background: var(--ms-coral) !important; border-color: var(--ms-coral) !important; }
.vroom-grid { gap: 10px !important; }
.ms-vroom-card {
  background-image: linear-gradient(180deg, rgba(8,9,11,.06), rgba(8,9,11,.9)), var(--room-cover) !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: 6px 22px 6px 6px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.28) !important;
  min-height: 220px;
}
.ms-vroom-scrim { position:absolute; inset:0; z-index:0; pointer-events:none; background:linear-gradient(90deg,rgba(5,6,8,.38),transparent 58%); }
.vroom-card-title { font-size: 20px !important; font-weight: 850 !important; letter-spacing: -.025em !important; }
.vroom-tag-w { background: rgba(12,13,16,.5) !important; border: 1px solid rgba(255,255,255,.16); }
.vroom-detail::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(5,6,8,.34),rgba(5,6,8,.08) 42%,rgba(5,6,8,.44)); }
.vroom-detail > * { position: relative; z-index: 1; }

/* Chat */
.chat-inbox-screen, .chat-room-screen { background: var(--ms-bg) !important; }
.chat-inbox-header, .cr-header { background: rgba(12,13,16,.91) !important; border-color: var(--ms-line) !important; }
.chat-inbox-title, .cr-name, .citem__name b { color: var(--ms-text) !important; }
.chat-inbox-eyebrow { color: var(--ms-coral) !important; letter-spacing: .14em !important; font-size: 9px !important; }
.chat-filter-row { background: transparent !important; }
.chat-filter-row button { background: var(--ms-surface) !important; color: var(--ms-muted) !important; border-color: var(--ms-line) !important; }
.chat-filter-row button.active { color: #0c0d10 !important; background: var(--ms-coral) !important; }
.citem { background: transparent !important; border-color: var(--ms-line) !important; }
.citem:hover { background: rgba(255,255,255,.025) !important; }
.citem__msg, .citem__time { color: var(--ms-muted) !important; }
.cr-messages { background: var(--ms-bg) !important; }
.bubble.them { background: var(--ms-surface-2) !important; color: var(--ms-text) !important; }
.bubble.me { background: var(--ms-coral) !important; color: #0c0d10 !important; }
.msg-time { color: var(--ms-subtle) !important; }
.cr-inbar { background: rgba(12,13,16,.94) !important; border-color: var(--ms-line) !important; }
.cr-in-field { background: var(--ms-surface) !important; color: var(--ms-text) !important; border-color: var(--ms-line) !important; }
.cr-in-send { background: var(--ms-coral) !important; color: #0c0d10 !important; }
.cr-actions { background: var(--ms-bg) !important; border-color: var(--ms-line) !important; }
.cr-action-btn--ghost { background: var(--ms-surface) !important; color: var(--ms-text) !important; border-color: var(--ms-line) !important; }
.cr-action-btn--primary { background: var(--ms-coral) !important; color: #0c0d10 !important; }

/* Stories */
.story-screen { background: var(--ms-bg) !important; }
.story-header { background: var(--ms-bg) !important; border-color: var(--ms-line) !important; }
.story-header-eyebrow { color: var(--ms-coral) !important; letter-spacing: .14em !important; }
.story-header-title, .story-section-title { color: var(--ms-text) !important; }
.story-section-sub, .story-circle-name { color: var(--ms-muted) !important; }
.story-post { background: var(--ms-surface) !important; border: 1px solid var(--ms-line) !important; border-radius: 6px 22px 6px 6px !important; overflow: hidden; box-shadow: 0 18px 42px rgba(0,0,0,.26) !important; }
.story-post-header { background: var(--ms-surface) !important; }
.story-text { color: var(--ms-text) !important; }
.story-image { max-height: 520px; object-fit: cover; filter: saturate(.86) contrast(1.03); }
.story-image--editorial { aspect-ratio: 4/5; width: 100%; }
.story-actions { border-color: var(--ms-line) !important; }
.story-action { color: var(--ms-muted) !important; }
.ms-story-prompt {
  background-image: linear-gradient(90deg, rgba(10,11,14,.94) 0%, rgba(10,11,14,.68) 54%, rgba(10,11,14,.15)), url('../../assets/duovly/midnight-social/stories/story-01-tournament-night.webp') !important;
  background-size: cover !important;
  background-position: center 42% !important;
  border-color: var(--ms-line) !important;
  color: var(--ms-text) !important;
}
.story-prompt-title, .story-prompt-sub { color: var(--ms-text) !important; }
.story-prompt-kicker { color: var(--ms-coral) !important; }
.story-prompt-art { opacity: .18; }

/* Identity, wallet, forms and shared sheets */
.my-page, .profile-screen, .wallet-screen { background: var(--ms-bg) !important; }
.my-hero, .wallet-hero, .wallet-card, .menu-group, .settings-group, .profile-card,
.duo-premium-surface, .order-card, .notification-item, .safety-card {
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border-color: var(--ms-line) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}
.menu-item, .setting-row { border-color: var(--ms-line) !important; color: var(--ms-text) !important; }
.menu-label, .setting-section-title { color: var(--ms-text) !important; }
.menu-arrow, .menu-icon, .wallet-sub, .profile-sub { color: var(--ms-muted) !important; }
input, textarea, select, .pe-input, .compose-textarea, .comment-input {
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border-color: var(--ms-line) !important;
}
input::placeholder, textarea::placeholder { color: var(--ms-subtle) !important; }
.sheet, .bottom-sheet, .modal-card, .dialog-card {
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border-color: var(--ms-line) !important;
}

/* Legacy inline-style bridge: the beta has many white surfaces embedded in
   template strings. Keep their layout, but pull them into the new system. */
.screen:not(.vroom-detail) [style*="color:#102033"],
.screen:not(.vroom-detail) [style*="color: #102033"] { color: var(--ms-text) !important; }
.screen:not(.vroom-detail) [style*="color:#61708A"],
.screen:not(.vroom-detail) [style*="color: #61708A"],
.screen:not(.vroom-detail) [style*="color:#8A94A6"] { color: var(--ms-muted) !important; }
.screen:not(.vroom-detail) div[style*="background:#fff"],
.screen:not(.vroom-detail) div[style*="background: #fff"],
.screen:not(.vroom-detail) div[style*="background:#FFFFFF"],
.screen:not(.vroom-detail) button[style*="background:#fff"],
.screen:not(.vroom-detail) button[style*="background: #fff"],
.screen:not(.vroom-detail) button[style*="background:#FFFFFF"] {
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
}
.screen:not(.vroom-detail) [style*="border:1px solid #E9E2DA"],
.screen:not(.vroom-detail) [style*="border:1px solid #ECEEF3"],
.screen:not(.vroom-detail) [style*="border-top:1px solid #F1F2F6"] { border-color: var(--ms-line) !important; }

.ms-empty-art, .cr-empty__art img, .dsc-empty .ms-empty-art {
  display: block;
  width: min(220px, 72%);
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 auto 18px;
  border-radius: 6px 24px 6px 6px;
  border: 1px solid var(--ms-line);
  box-shadow: 0 20px 50px rgba(0,0,0,.34);
}
.cr-empty__art { width: auto !important; height: auto !important; }
.cr-empty__title, .dsc-empty-title, .empty-title { color: var(--ms-text) !important; }
.cr-empty__sub, .dsc-empty-sub, .empty-sub { color: var(--ms-muted) !important; }
.cr-empty__cta, .empty-cta, .onb-btn, .compose-submit {
  background: var(--ms-coral) !important;
  color: #0c0d10 !important;
  border-radius: 5px 14px 5px 5px !important;
  box-shadow: none !important;
}

button, [onclick] { transition: transform .18s var(--ease-out), background-color .18s ease, border-color .18s ease, opacity .18s ease; }
button:active, [onclick]:active { transform: scale(.985); }
@media (min-width: 721px) {
  .phone { border: 1px solid rgba(255,255,255,.08); }
}

/* =========================================================================
   THEME REPAIR — light-theme leftovers that survived the dark migration.
   These surfaces were authored for the old ivory/white app and render as
   white or beige blocks on the midnight background. Colour only: no
   display/opacity changes (brand visual layers must stay visible).
   ========================================================================= */

/* 1. Status bar — was rgba(255,255,255,.94) sitting on top of every screen. */
.status-bar,
.status-bar.dark {
  background: rgba(12, 13, 16, .82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ms-text) !important;
  border-bottom: 1px solid rgba(243, 238, 231, .06);
}
.sb-presence {
  background: rgba(243, 238, 231, .08) !important;
  color: var(--ms-muted) !important;
}
.sb-presence:hover  { background: rgba(243, 238, 231, .14) !important; }
.sb-presence:active { background: rgba(243, 238, 231, .18) !important; }

/* 2. Premium surface — ivory/gold gradient card. Kept as a *warm dark*
      surface so the "premium" read survives without the beige block. */
.duo-premium-surface {
  border-color: var(--ms-line) !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(199, 255, 77, .07), transparent 30%),
    radial-gradient(circle at 12% 16%, rgba(229, 189, 100, .09), transparent 28%),
    linear-gradient(160deg, #191b21 0%, #14161b 52%, #101217 100%) !important;
  box-shadow: var(--ms-shadow) !important;
}
.duo-premium-surface::before {
  background: linear-gradient(120deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 42%) !important;
}

/* 3. Story empty panel — white card + coral-to-mint gradient button. */
.story-empty-panel {
  background: var(--ms-surface) !important;
  border: 1px solid var(--ms-line) !important;
  box-shadow: var(--ms-shadow) !important;
  padding: 18px 16px !important;
}
.story-empty-kicker { color: var(--ms-coral-soft) !important; }
.story-empty-title  { color: var(--ms-text) !important; }
.story-empty-head   { align-items: center !important; }
.story-empty-head button {
  background: var(--ms-coral) !important;
  color: #0c0d10 !important;
  border-radius: 5px 14px 5px 5px !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  white-space: nowrap;
}
.story-empty-card {
  background: var(--ms-bg-raised) !important;
  border: 1px solid var(--ms-line) !important;
}
.story-empty-card b    { color: var(--ms-text) !important; }
.story-empty-card span { color: var(--ms-muted) !important; }

/* 4. Bottom tab bar was overlapping the last rows of scrolling screens. */
.screen-container > .screen,
.screen-scroll,
.mypage, .story-feed, .chat-list, .home-scroll {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* 5. "메이트로 활동해보세요" promo — the light theme's mint gradient maps to
      --ms-lime here, so it rendered as a full-bleed neon slab with white text
      on it (unreadable, and it fought the coral CTAs). Keep lime as an accent,
      not as the surface. */
.mp-promo {
  background: linear-gradient(120deg, #1b1f18 0%, #181b20 60%, #14161b 100%) !important;
  border: 1px solid rgba(199, 255, 77, .3);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3) !important;
  color: var(--ms-text) !important;
}
.mp-promo:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, .36) !important; }
.mp-promo__t { color: var(--ms-lime) !important; display: block; }
.mp-promo__d { color: var(--ms-muted) !important; display: block; margin-top: 4px; }

/* 6. Earnings cell used butter-100→300 with white value text on top. */
.mp-wcell--charge {
  background: linear-gradient(135deg, rgba(229, 189, 100, .18), rgba(229, 189, 100, .07)) !important;
  border-color: rgba(229, 189, 100, .34) !important;
}
.mp-wcell--charge .mp-wcell__v { color: var(--ms-gold) !important; }
.mp-wcell--charge .mp-wcell__l { color: rgba(229, 189, 100, .78) !important; }

/* 7. 3D icon set is a 400x400 render with generous internal padding; at 34px
      it read as a tiny blob inside a big empty box. */
.mp-wcell__ic { width: 40px; height: 40px; }

/* 8. inventory-effects.css still carries light-theme rules that win on
      specificity: `.tab.active svg { color:#272039 }` turned the active tab
      icon into a dark navy blob, and `.screen { background:#FFFDFB }` is a
      white page behind every screen. */
.tab.active svg { color: var(--ms-coral) !important; fill: currentColor !important; }
.tab.active     { color: var(--ms-text) !important; }
.screen         { background-color: var(--ms-bg) !important; }

/* 9. Story empty panel: the 3D art is absolutely positioned at right:6px and
      the panel was overflow:visible inline, so the art spilled outside the
      card and the "올리기" button landed on top of it. Clip the art to the
      card and drop the button below the copy. */
.story-empty-panel { overflow: hidden !important; }
.story-empty-panel > [aria-hidden="true"] {
  top: -6px !important;
  right: -10px !important;
}
.story-empty-head {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 14px !important;
}
.story-empty-head > div { max-width: 78% !important; }
.story-empty-head button { align-self: flex-start; padding: 11px 20px !important; }

/* 10. Search affordance was a light-grey disc on Story but a dark disc
       elsewhere. One treatment. */
.story-screen .icon-btn,
.story-screen .rd-icon-btn,
.story-head .icon-btn {
  background: rgba(243, 238, 231, .07) !important;
  border: 1px solid var(--ms-line) !important;
  color: var(--ms-text) !important;
}

/* 11. Chat empty state: the gradient's midpoint (#FFF6E8) is an opaque cream,
       so the card rendered as a beige slab with unreadable white copy on it. */
.cr-empty {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 93, 91, .10), transparent 46%),
    linear-gradient(160deg, #191b21 0%, #14161b 60%, #101217 100%) !important;
  border: 1px solid var(--ms-line) !important;
  box-shadow: var(--ms-shadow) !important;
}

/* 12. The presence dot was hard-coded lime regardless of state, so an offline
       mate showed a green dot next to the word "오프라인". */
.rd-feat-presence.is-offline .d { background: #6f6c68 !important; box-shadow: none !important; }
.rd-feat-presence.is-busy    .d { background: #ff7ab0 !important; }
.rd-feat-presence.is-online  .d { background: var(--ms-lime) !important; }
.rd-feat-presence.is-offline    { color: var(--ms-muted) !important; }

/* 13. Header actions now use line icons (the 3D webp set is lit for a light
       background and disappears here). Match the other screens' head buttons. */
.rd-iconline { width: 21px; height: 21px; display: block; color: var(--ms-text); }
.rd-iconbtn {
  background: rgba(243, 238, 231, .07) !important;
  border: 1px solid var(--ms-line) !important;
  color: var(--ms-text) !important;
}

/* 14. Trust strip read as a spreadsheet: hard vertical rules between columns
       and two of the three "icons" were product renders. */
.rd-trust-col + .rd-trust-col { border-left: none !important; }
.rd-trust { gap: 4px; }
.rd-trust-ic { margin-bottom: 8px; }

/* =========================================================================
   메이트 가입 — 정산율 단계 안내 (domain/activity.js PAYOUT_TIERS)
   ========================================================================= */
.mr-payout-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 6px 22px 6px 6px;
  background: linear-gradient(160deg, #191b21 0%, #14161b 58%, #101217 100%);
  border: 1px solid rgba(199, 255, 77, .26);
  box-shadow: var(--ms-shadow);
}
.mr-payout-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.mr-payout-kicker {
  font-size: 10.5px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ms-lime);
}
.mr-payout-head b { font-size: 17px; font-weight: 900; color: var(--ms-text); letter-spacing: -.01em; }
.mr-tier-list { display: flex; flex-direction: column; gap: 2px; }
.mr-tier-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: 4px 12px 4px 4px;
  background: rgba(243, 238, 231, .035);
  border: 1px solid transparent;
}
.mr-tier-row.is-base { border-color: rgba(199, 255, 77, .22); background: rgba(199, 255, 77, .06); }
.mr-tier-rate {
  flex: 0 0 auto; min-width: 56px;
  font-size: 25px; font-weight: 900; line-height: 1;
  color: var(--ms-lime); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.mr-tier-rate span { font-size: 13px; font-weight: 800; margin-left: 1px; }
.mr-tier-row:not(.is-base) .mr-tier-rate { color: var(--ms-text); }
.mr-tier-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mr-tier-copy b { font-size: 13px; font-weight: 850; color: var(--ms-text); }
.mr-tier-copy span { font-size: 11.5px; font-weight: 600; color: var(--ms-muted); line-height: 1.45; }
.mr-payout-foot {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--ms-line);
  font-size: 11px; font-weight: 600; color: var(--ms-subtle); line-height: 1.5;
}

/* 가입 화면 정리: tier 행이 좁은 폭에서 줄바꿈되던 것 + 인트로 카드/하단 바가
   라이트 테마 잔재라 새 정산율 카드와 한 화면에서 부딪히던 것. */
.mr-tier-row { flex-wrap: nowrap !important; }
.mr-tier-copy { flex: 1 1 auto; }

.onb-card {
  background: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-line) !important;
  border-radius: 6px 20px 6px 6px !important;
  box-shadow: none !important;
}
.onb-card-title { color: var(--ms-text) !important; }
.onb-card-desc  { color: var(--ms-muted) !important; }

.mr-bottom, .mr-footer, .onb-footer, .mr-actions {
  background: linear-gradient(180deg, rgba(12,13,16,0) 0%, rgba(12,13,16,.94) 30%, var(--ms-bg) 100%) !important;
  border-top: none !important;
  box-shadow: none !important;
}
/* CTA was a sky-blue→mint gradient with no relation to the coral/lime brand. */
.mr-btn.primary {
  background: var(--ms-coral) !important;
  color: #0c0d10 !important;
  border-radius: 5px 16px 5px 5px !important;
  box-shadow: none !important;
}
.mr-btn.primary:disabled { background: rgba(243,238,231,.12) !important; color: var(--ms-subtle) !important; }

/* 가입 화면은 has-tab이 아니라 하단 CTA(.mr-bottom)가 떠 있는 구조 — 스크롤 끝에서
   마지막 행(85% 랭커)이 버튼 뒤로 가려지던 것. */
.screen:has(> .mr-bottom) .mr-body,
.mr-body { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

/* 15. Mate detail bottom CTA — hard-coded white bar with hairline text on it,
       plus four controls fighting for a 390px row ("채팅 시작" wrapped to two
       lines). Dark bar, one primary action, secondary actions demoted. */
.mp-cta {
  background: rgba(12, 13, 16, .95) !important;
  border-top: 1px solid var(--ms-line) !important;
  gap: 8px !important;
}
.mp-cta__price-l { color: var(--ms-muted) !important; }
.mp-cta__price-v { color: var(--ms-text) !important; }
.mp-cta__price-u { color: var(--ms-muted) !important; }
.mp-cta__heart {
  background: rgba(243, 238, 231, .06) !important;
  border-color: var(--ms-line) !important;
  width: 44px !important; height: 44px !important;
}
.mp-cta__main {
  height: 44px !important;
  background: var(--ms-coral) !important;
  color: #0c0d10 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  white-space: nowrap;
  padding: 0 14px;
  max-width: none !important;
}
.mp-cta__main--ghost {
  background: rgba(243, 238, 231, .06) !important;
  color: var(--ms-text) !important;
  border: 1px solid var(--ms-line) !important;
  flex: 0 1 auto !important;
}

/* 16. Glass buttons over the hero photo were near-white discs; every other
       screen uses a dark disc. */
.mp-gbtn {
  background: rgba(12, 13, 16, .52) !important;
  border: 1px solid rgba(243, 238, 231, .16) !important;
  color: var(--ms-text) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.mp-gbtn.on { background: rgba(255, 93, 91, .85) !important; }

/* 17. The stats card deliberately rides -28px up onto the hero photo, but the
       hero's own bottom row (presence + avg response) was not cleared for it,
       so the card ate that line. Give the hero copy the same clearance. */
.mp-hero__info { padding-bottom: 44px !important; }

/* 18. The CTA row totalled 430px inside a 390px viewport, so "의뢰하기" was
       cut off screen. The heart duplicates the one in the hero header, and the
       price label repeats the price card directly above it. */
.mp-cta__heart { display: none !important; }
.mp-cta__price-l { display: none !important; }
.mp-cta__price { min-width: 0; }
.mp-cta__main { flex: 1 1 0 !important; min-width: 0; }
.mp-cta__main--ghost { flex: 0 1 auto !important; }

/* 19. The quick-menu art (gifts/*.png) is product photography on a light plate,
       not a transparent icon, so each one showed as a bright square inside its
       round holder. Fill the circle instead of letterboxing the photo in it.
       Proper icon art for these four slots is a design-system item. */
.profile-quick-action .duo-obj {
  /* holder is a 34px circle with 6px padding, so 100% resolves to 22px —
     cancel the padding so the art actually fills the circle */
  width: 34px !important;
  height: 34px !important;
  margin: -6px !important;
}
.profile-quick-action .duo-obj img {
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* =========================================================================
   냥이 마스코트 (blnyangi)
   다크 배경에서 밝은 파스텔 스티커가 "붕 떠" 보이던 원인은 글로우 폭이
   132px로 고정돼 실제 크기(24~150px)와 어긋난 것 + 접지 그림자와 확산
   글로우가 한 겹에 섞여 바닥에 닿은 느낌이 없던 것. 크기 연동 + 3레이어로 분리.
   ⚠️ 정적 PNG 유지 — 등장/바운스 애니메이션 금지. reduced-motion 블록에
   .blnyangi를 넣으면 오너 화면에서 냥이가 굳는다 (OPUS-HANDOFF 지뢰 #15).
   ========================================================================= */
.blnyangi {
  --cat-size: 128px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  /* 확산 앰비언트 + 좁고 진한 컨택트 섀도 */
  filter:
    saturate(.90) brightness(.97)
    drop-shadow(0 calc(var(--cat-size) * .10) calc(var(--cat-size) * .13) rgba(0, 0, 0, .55))
    drop-shadow(0 calc(var(--cat-size) * .02) calc(var(--cat-size) * .03) rgba(0, 0, 0, .40));
}

.empty-art,
.ms-empty-art--cat,
.cr-empty__art {
  position: relative;
  display: grid;
  place-items: center;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  margin: 0 auto 14px !important;
  padding: 10px 0 6px;
}
/* 바닥 앰비언트 — 스티커 폭에 비례. */
.empty-art::before,
.ms-empty-art--cat::before,
.cr-empty__art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 78%;
  min-width: 90px;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 93, 91, .26), transparent 72%);
  filter: blur(9px);
  pointer-events: none;
}

/* 냥이는 미드나잇 일러스트 액자 규칙(.cr-empty__art img)을 물려받으면 안 된다.
   테두리·정사각 비율·220px 강제가 스티커를 늘려버린다. */
.cr-empty__art img.blnyangi,
.ms-empty-art img.blnyangi,
.empty-art img.blnyangi {
  width: auto !important;
  aspect-ratio: auto !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 auto !important;
}
/* 빈 화면 카드는 위에 붙지 말고 스크롤 영역 가운데로. */
.chat-inbox-screen .chat-list-wrap > .cr-empty { margin-block: auto !important; }

/* 17. 한국어 줄바꿈 — 기본값(word-break:normal)은 한글을 어절 중간에서 끊는다.
       "가볍 / 게 공유해요", "코인이 안전 / 하게 보호돼요" 같은 깨진 줄바꿈이
       앱 전반에 있었다. keep-all로 어절 단위로 끊고, 끊을 곳이 없는 긴
       토큰(URL·계좌번호)만 anywhere로 흘려보낸다. */
body, button, input, textarea, select {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 18. "내 스토리" 링이 코랄→보라 그라데이션이라 브랜드(코랄/골드/라임) 밖이었다. */
.story-ring.my-story {
  background: linear-gradient(135deg, var(--ms-coral) 0%, var(--ms-gold) 52%, var(--ms-lime) 100%) !important;
}