:root {
  --bg: #fff;
  --surface: #fff;
  --surface-2: #fff6fa;
  --ink: #27252d;
  --muted: #a5a3ad;
  --line: #f0edf2;
  --accent: #ff2f82;
  --lime: #ff2f82;
  --accent-soft: #fff0f7;
  --danger: #e65271;
}

.modal.amar-profile-modal { width: min(100%, 650px); max-width: 650px; max-height: min(92dvh, 920px); padding: 0; overflow: auto; border-radius: 24px 24px 0 0; background: #fff; }
.amar-profile-modal .modal-close { z-index: 10; top: 12px; right: 12px; border: 1px solid #fff9; background: #ffffffc9; color: #48414b; }
.amar-public-profile { min-height: 60vh; padding-bottom: calc(86px + env(safe-area-inset-bottom)); color: #26232a; }
.amar-public-cover { min-height: 240px; padding: 14px 22px 22px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg,#f7dce7,#f8cce2 56%,#a978d2); color: #fff; }
.amar-public-tools { display: flex; justify-content: space-between; align-items: center; min-height: 42px; }
.amar-public-tools .icon-btn { border: 1px solid #ffffff66; background: #ffffff40; color: white; }
.amar-public-identity { display: flex; align-items: end; gap: 14px; margin-bottom: -4px; }
.amar-public-identity .avatar.xl { width: 78px; height: 78px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 3px 16px #77345d36; }
.amar-public-identity h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; color: #fff; font-size: 23px; text-shadow: 0 1px 6px #6627466b; }
.amar-public-identity p { margin: 0; font-size: 13px; color: #fff; }
.amar-online-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #21d3a2; box-shadow: 0 0 0 3px #ffffff65; }
.amar-public-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: -1px 18px 12px; padding: 14px 10px; border-radius: 0 0 20px 20px; background: #fff; box-shadow: 0 5px 20px #3e20420e; }
.amar-public-stats div { display: grid; justify-items: center; gap: 2px; border-right: 1px solid #f0edf1; }
.amar-public-stats div:last-child { border: 0; }
.amar-public-stats b { font-size: 20px; }
.amar-public-stats span { color: #a6a2aa; font-size: 12px; }
.amar-public-shortcuts { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 6px 18px 14px; }
.amar-public-shortcuts button { display: grid; justify-items: center; gap: 5px; min-height: 68px; padding: 7px 3px; border: 0; border-radius: 14px; background: #fbf8fb; color: #67616a; font-size: 11px; }
.amar-public-shortcuts button span { font-size: 22px; }
.amar-public-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 22px; padding: 0 18px; border-bottom: 1px solid #f2edf2; background: #fff; }
.amar-public-tabs button { position: relative; min-height: 48px; padding: 0 2px; border: 0; background: transparent; color: #aaa5ae; font-size: 14px; }
.amar-public-tabs button.active { color: #27232a; font-weight: 700; }
.amar-public-tabs button.active:after { position: absolute; right: 24%; bottom: 4px; left: 24%; height: 3px; border-radius: 4px; background: #fa3986; content: ''; }
.amar-public-info,.amar-public-album,.amar-public-honor,.amar-public-moments { padding: 17px 18px 20px; }
.amar-public-info h3,.amar-public-album h3,.amar-public-honor h3,.amar-public-moments h3 { margin: 0 0 13px; font-size: 17px; }
.amar-public-info p { color: #77717a; line-height: 1.5; }
.amar-public-info dl { margin: 0; }
.amar-public-info dl div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f3eff3; }
.amar-public-info dt { color: #a6a1aa; }
.amar-public-info dd { margin: 0; text-align: right; }
.amar-verification-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.amar-verification-grid span { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px; border-radius: 12px; background: #f8f5f8; color: #98929c; font-size: 11px; }
.amar-verification-grid svg { width: 16px; color: #b5a9bb; }
.amar-relation-entry,.amar-honor-card { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 62px; padding: 11px 13px; border: 0; border-radius: 14px; background: #fff4f8; color: #6f3750; text-align: left; }
.amar-relation-entry span { margin-left: auto; }
.amar-honor-card { margin-bottom: 9px; background: #faf7fa; color: #514b55; }
.amar-honor-card>svg { width: 23px; height: 23px; color: #ee5597; }
.amar-honor-card span { display: grid; gap: 4px; }
.amar-honor-card small { color: #a19ba5; }
.amar-honor-card.muted>svg { color: #b9b3bd; }
.amar-empty { display: grid; justify-items: center; gap: 8px; padding: 38px 16px; color: #aba5af; text-align: center; }
.amar-empty>svg { width: 36px; height: 36px; color: #d4cfd6; }
.amar-empty p { margin: 0; font-size: 13px; }
.amar-profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.amar-profile-grid button { aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: 8px; background: #f5f1f5; }
.amar-profile-grid img { width: 100%; height: 100%; object-fit: cover; }
.amar-public-moments .post { padding: 14px 0; }
.amar-story-note { display: flex; gap: 8px; align-items: center; padding: 12px; color: #9e436b; }
.amar-public-actions { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; gap: 9px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #f2edf2; background: #fffffff2; backdrop-filter: blur(10px); }
.amar-public-actions .btn { flex: 1; justify-content: center; min-height: 44px; }
.amar-public-safety { display: flex; justify-content: center; gap: 20px; padding: 8px 18px 14px; }
.amar-public-safety button { display: flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #a39da6; font-size: 11px; }
.amar-public-safety svg { width: 14px; }
.amar-relationship { padding: 0 0 6px; }
.amar-relationship-hero { display: grid; justify-items: center; margin: -20px -20px 14px; padding: 36px 18px 20px; background: linear-gradient(150deg,#ffe6f1,#efc8f3 55%,#d6c5ff); text-align: center; }
.amar-relationship-hero>span { display: grid; width: 60px; height: 60px; place-items: center; border: 1px solid #fff; border-radius: 50%; background: #ffffff75; color: #ee4c96; font-size: 38px; }
.amar-relationship-hero h2 { margin: 10px 0 4px; }
.amar-relationship-hero p { margin: 0; color: #786c83; }
.amar-relation-types { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 13px; }
.amar-relation-types button { flex: 1; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 18px; background: #f5f2f6; color: #8e8792; font-size: 12px; white-space: nowrap; }
.amar-relation-types button.active { background: #fae3ef; color: #e94088; font-weight: 700; }
.amar-relation-label { margin: 4px 0 9px; color: #76707a; font-size: 12px; }
.amar-relation-offers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.amar-relation-offers button { display: grid; align-content: start; justify-items: center; gap: 5px; min-height: 112px; padding: 10px 5px; border: 1px solid #eee9ef; border-radius: 15px; background: #fff; color: #5e5661; text-align: center; }
.amar-relation-offers button.selected { border-color: #f45e9c; background: #fff6fa; box-shadow: 0 0 0 2px #f45e9c1c; }
.amar-relation-offers button span { font-size: 26px; }
.amar-relation-offers button b { font-size: 11px; line-height: 1.25; }
.amar-relation-offers button small { color: #e84188; font-size: 10px; }
.amar-low-coins { text-align: center; }
.amar-low-coins>span { display: inline-grid; width: 55px; height: 55px; place-items: center; border-radius: 50%; background: #fff2c7; color: #de9b20; }
.amar-low-coins>span svg { width: 28px; height: 28px; }
.amar-low-coins h2 { margin: 13px 0 7px; }
.amar-low-coins p { margin: 0 0 18px; color: #756f78; line-height: 1.5; }
@media (max-width: 700px) {
  .modal.amar-profile-modal { width: 100%; max-width: none; max-height: 95dvh; border-radius: 24px 24px 0 0; padding: 0 0 calc(env(safe-area-inset-bottom)); }
  .amar-profile-modal .modal-close { top: 10px; right: 10px; }
  .amar-public-cover { min-height: 225px; }
  .amar-public-actions { position: sticky; bottom: 0; margin-top: 8px; }
}

.amar-own-profile { margin: 0 auto; max-width: 900px; padding: 0 0 24px; }

/* Amar game catalogue: original artwork and animation, waiting on licensed game provider sessions. */
.amar-provider-games { min-height: calc(100dvh - 130px); margin: -12px -16px 0; padding: 8px 15px 28px; overflow: hidden; background: radial-gradient(ellipse at 78% 0%,#19467f 0,#0b2342 34%,#06152d 72%); color: #f7f5ff; }
.amar-game-header { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 44px 1fr 82px; align-items: center; min-height: 54px; margin: -8px -15px 12px; padding: 0 15px; background: #0b2342eF; backdrop-filter: blur(12px); }
.amar-game-header h1 { margin: 0; text-align: center; font-size: 19px; }
.amar-game-header .icon-btn { color: white; }
.amar-game-balance { justify-self: end; padding: 7px 9px; border-radius: 18px; background: #1764bc; font-size: 11px; font-weight: 800; white-space: nowrap; }
.amar-game-promo { position: relative; display: grid; grid-template-columns: 82px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 116px; overflow: hidden; padding: 13px; border: 1px solid #b296ff75; border-radius: 20px; background: linear-gradient(110deg,#722ce8,#4b2dcc 62%,#2253c7); box-shadow: 0 12px 32px #5025d33c; }
.amar-game-promo:after { position: absolute; inset: 0; background: linear-gradient(110deg,transparent 38%,#ffffff1b 52%,transparent 67%); content: ''; transform: translateX(-100%); animation: amar-game-sheen 6s ease-in-out infinite; pointer-events: none; }
.amar-game-wheel { display: grid; width: 78px; height: 78px; place-items: center; border: 4px solid #dac7ff; border-radius: 50%; background: repeating-conic-gradient(#f9e7ff 0 24deg,#8138e8 24deg 48deg); box-shadow: inset 0 0 0 9px #6e35c7,0 0 25px #f7d8ff75; font-size: 39px; animation: amar-game-orbit 16s linear infinite; }
.amar-game-promo>div { display: grid; gap: 3px; }
.amar-game-promo>div>b { color: #ffeb72; font-size: 11px; text-transform: uppercase; }
.amar-game-promo>div>strong { font-size: 16px; }
.amar-game-promo>div>small { color: #e2d7ff; font-size: 11px; }
.amar-game-promo>button { position: relative; z-index: 1; padding: 9px 13px; border: 0; border-radius: 12px; background: linear-gradient(180deg,#ffe77b,#ffad34); color: #502e7a; font-size: 11px; font-weight: 900; }
.amar-game-ranking { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 8px; margin: 14px 0 20px; padding: 14px 17px; border: 1px solid #e0a84c45; border-radius: 16px; background: linear-gradient(100deg,#512a25,#422b25 55%,#25223b); box-shadow: inset 0 1px #ffffff0d; }
.amar-game-ranking>b { grid-row: span 2; color: #ffd277; font-family: Georgia,serif; font-size: 22px; font-style: italic; text-shadow: 0 2px 12px #ffbd4b66; }
.amar-game-ranking>span { color: #f7e8d3; font-size: 11px; }
.amar-game-ranking>i { grid-column: 2; grid-row: 1/3; color: #f9c45a; font-size: 31px; font-style: normal; }
.amar-game-filters { position: sticky; top: 46px; z-index: 2; display: flex; gap: 25px; margin: 0 -15px 12px; padding: 9px 15px 5px; overflow-x: auto; background: #091c37f2; scrollbar-width: none; }
.amar-game-filters::-webkit-scrollbar { display:none; }
.amar-game-filters button { position: relative; flex: 0 0 auto; min-height: 38px; padding: 0 2px 7px; border: 0; background: transparent; color: #8595b4; font-size: 13px; font-weight: 650; white-space: nowrap; }
.amar-game-filters button.active { color: #fff; font-size: 15px; }
.amar-game-filters button.active:after { position: absolute; right: 35%; bottom: 0; left: 35%; height: 3px; border-radius: 4px; background: #fff; content:''; }
.amar-provider-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.amar-provider-card { position: relative; display: grid; grid-template-rows: 1fr auto; align-items: end; min-width: 0; aspect-ratio: .72; overflow: hidden; padding: 9px 8px 12px; border: 1px solid #91a9d755; border-radius: 16px; background: linear-gradient(150deg,#14518d,#12365d 45%,#101833); color: white; text-align: left; box-shadow: 0 6px 15px #0004; isolation: isolate; animation: amar-card-arrive .55s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(min(var(--game-index),12) * 35ms); transition: transform .18s ease,box-shadow .18s ease; }
.amar-provider-card:before,.amar-provider-card:after { position: absolute; z-index: -1; content:''; border-radius: 50%; filter: blur(4px); transition: transform .35s ease; }
.amar-provider-card:before { width: 125%; aspect-ratio: 1; top: -22%; left: -26%; background: radial-gradient(circle at 35% 35%,#fff8 0 2%,transparent 3% 18%,var(--game-glow,#8ee8ff) 19% 20%,transparent 46%),radial-gradient(circle at 65% 65%,var(--game-light,#fbc843),transparent 58%); opacity:.8; }
.amar-provider-card:after { width: 90%; aspect-ratio:1; right:-35%; bottom:7%; background: radial-gradient(circle,#ffffff44,transparent 65%); }
.amar-provider-card:active { transform: scale(.96); }
.amar-provider-card:hover { transform: translateY(-3px); box-shadow: 0 12px 25px #0008,0 0 14px var(--game-glow,#63bcff44); }
.amar-provider-kind { position:absolute; top:8px; left:7px; max-width:calc(100% - 14px); padding:4px 7px; overflow:hidden; border-radius:7px; background:#102d55e8; color:#fff; font-size:9px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.amar-provider-art { align-self:center; justify-self:center; font-size:clamp(40px,14vw,72px); line-height:1; filter:drop-shadow(0 6px 8px #0009); animation:amar-game-float 3.5s ease-in-out infinite; animation-delay:calc(var(--game-index) * -110ms); }
.amar-provider-card b { display:-webkit-box; min-height:30px; overflow:hidden; color:#fff4d6; font-size:11px; font-weight:900; line-height:1.15; text-shadow:0 2px 5px #000; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.theme-lion,.theme-tiger,.theme-fortune,.theme-ra { --game-glow:#ffb944; --game-light:#be321f; background:linear-gradient(150deg,#782618,#281436 62%,#0c1838); }
.theme-yummy,.theme-dog,.theme-fishing,.theme-ocean,.theme-hunt { --game-glow:#57e7ff; --game-light:#ffe45e; background:linear-gradient(150deg,#26a5e0,#1c48a2 60%,#122452); }
.theme-jewels,.theme-diamond,.theme-galaxy,.theme-jackpot,.theme-seven,.theme-lucky { --game-glow:#fd68ff; --game-light:#62e8ff; background:linear-gradient(150deg,#5f218d,#26175d 62%,#101a42); }
.theme-field,.theme-crash,.theme-rocket,.theme-dice,.theme-roulette,.theme-mahjong { --game-glow:#65ebc6; --game-light:#59a6ff; background:linear-gradient(150deg,#216d84,#1a385f 62%,#101932); }
.theme-chilli,.theme-zeus,.theme-sphinx,.theme-supergirl,.theme-tree { --game-glow:#ffd45a; --game-light:#ff653f; background:linear-gradient(150deg,#96381d,#492144 65%,#111937); }
.amar-provider-note { margin:16px 2px 0; color:#9daec8; font-size:10px; line-height:1.45; text-align:center; }
.amar-provider-modal { display:grid; justify-items:center; text-align:center; }
.amar-provider-modal>span { display:grid; width:58px; height:58px; place-items:center; border-radius:18px; background:#f4e4ff; font-size:30px; }
.amar-provider-modal h2 { margin:13px 0 7px; }
.amar-provider-modal p { color:#756d7b; line-height:1.5; }
@keyframes amar-game-sheen { 0%,65%,100%{transform:translateX(-100%)} 80%{transform:translateX(100%)} }
@keyframes amar-game-orbit { to{transform:rotate(360deg)} }
@keyframes amar-game-float { 0%,100%{transform:translateY(3px) rotate(-3deg)} 50%{transform:translateY(-5px) rotate(3deg)} }
@keyframes amar-card-arrive { from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@media(max-width:420px){.amar-provider-games{padding-right:11px;padding-left:11px}.amar-game-header{margin-right:-11px;margin-left:-11px;padding:0 11px}.amar-game-filters{margin-right:-11px;margin-left:-11px;padding-right:11px;padding-left:11px;gap:21px}.amar-provider-grid{gap:8px}.amar-provider-card{border-radius:13px;padding:7px 6px 9px}.amar-provider-kind{font-size:8px}.amar-provider-card b{font-size:10px}}
@media(prefers-reduced-motion:reduce){.amar-game-promo:after,.amar-game-wheel,.amar-provider-card,.amar-provider-art{animation:none;transition:none}}
.amar-own-cover { position: relative; min-height: 340px; padding: 14px 20px 20px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate; background: linear-gradient(180deg,#c7abb6 0%,#f5d9e5 45%,#fce6ed 61%,#b76ae0 62%,#8732d5 80%,#d2b7ef 88%,#fff 100%); }
.amar-own-cover:before,.amar-own-cover:after { position:absolute; z-index:-1; content:''; pointer-events:none; }
.amar-own-cover:before { left:-8%; right:-8%; bottom:24%; height:105px; border-radius:55% 45% 0 0/75% 62% 0 0; background:linear-gradient(176deg,#d8b5ed 0%,#b74bdf 55%,#8724d4 100%); transform:rotate(-3deg); }
.amar-own-cover:after { right:-10%; bottom:14%; left:-10%; height:75px; border-radius:48% 52% 0 0/70% 60% 0 0; background:linear-gradient(180deg,#bd83ed,#7629cb); transform:rotate(2deg); }
.amar-own-toolbar { display: flex; align-items: center; gap: 8px; }
.amar-own-toolbar>span { flex: 1; }
.amar-own-toolbar .btn { min-height: 36px; padding: 7px 11px; border-color: #ffffff7d; border-radius: 20px; background: #ffffff8c; color: #6c4d68; font-size: 12px; }
.amar-own-toolbar .icon-btn { border: 1px solid #ffffff70; border-radius: 50%; background: #ffffff5e; color: #6c4d68; }
.amar-own-limited { align-self: flex-start; margin-top: 4px; padding: 5px 9px; border: 1px solid #ffc65e; border-radius: 12px; background: #fff3b5; color: #9b6b00; font-size: 10px; }
.amar-own-identity { position:relative; display: flex; align-items: flex-start; gap: 14px; margin-top: 150px; padding: 54px 16px 12px; border: 1px solid #fff9; border-radius: 22px; background: #ffffffef; box-shadow: 0 8px 26px #74345c16; }
.amar-own-identity .avatar.xl { position:absolute; top:-44px; left:16px; width:70px; height:70px; border:4px solid #fff; border-radius:50%; font-size:25px; box-shadow:0 2px 8px #47305a22; }
.amar-own-main { width:100%; min-width:0; }
.amar-own-identity h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 22px; }
.amar-own-identity p { margin: 0 0 7px; color: #9a929c; font-size: 12px; }
.amar-self-online { color: #1dbd95; font-size: 10px; font-weight: 600; }
.amar-own-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.amar-own-badges span { padding: 3px 7px; border-radius: 12px; background: #f4f1f5; color: #817b86; font-size: 10px; }
.amar-own-stats { display: flex; align-items: center; justify-content: space-around; margin: 10px -8px 0; padding: 9px 2px 0; border-top:1px solid #eee9f0; background: transparent; }
.amar-own-stats div { display: grid; justify-items: center; gap: 2px; min-width: 62px; }
.amar-own-stats b { font-size: 19px; }
.amar-own-stats span { color: #a6a2aa; font-size: 11px; }
.amar-own-stats button { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border: 0; border-radius: 13px; background: #fff2c9; color: #bb8923; font-size: 10px; }
.amar-own-stats button svg { width: 14px; }
.amar-own-shortcuts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; margin: 0 18px 12px; padding: 12px 5px; border-radius: 18px; background: #fff; }
.amar-own-shortcuts button { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 62px; padding: 3px; border: 0; background: transparent; color: #69636d; font-size: 10px; }
.amar-own-shortcuts button span { font-size: 23px; }
.amar-own-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 22px; overflow-x: auto; padding: 0 18px; border-bottom: 1px solid #f0edf2; background: #fff; }
.amar-own-tabs button { position: relative; min-height: 48px; padding: 0 2px; border: 0; background: transparent; color: #aaa5ae; font-size: 14px; white-space: nowrap; }
.amar-own-tabs button.active { color: #27232a; font-weight: 700; }
.amar-own-tabs button.active:after { position: absolute; right: 24%; bottom: 4px; left: 24%; height: 3px; border-radius: 4px; background: #fa3986; content: ''; }
.amar-own-info,.amar-own-moments { padding: 17px 18px 20px; border-radius: 20px 20px 0 0; background: #fff; }
.amar-own-info h3,.amar-own-moments h3 { margin: 0 0 13px; font-size: 17px; }
.amar-own-info dl { margin: 0; }
.amar-own-info dl div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f3eff3; }
.amar-own-info dt { color: #a6a1aa; }
.amar-own-info dd { margin: 0; text-align: right; }
.amar-own-info>p { color: #77717a; line-height: 1.5; }
.amar-profile-tag { min-width:80px; min-height:40px; padding:7px 14px; border:1px solid #ff9dc3; border-radius:12px; background:#fff; color:#fa3986; }
.profile-drawer-backdrop { justify-content:flex-end; align-items:stretch; padding:0; }
.profile-drawer-backdrop .profile-drawer { width:min(56vw,460px); min-width:340px; max-width:100%; min-height:100dvh; max-height:none; margin:0 0 0 auto; padding:86px 16px 22px; overflow:auto; border:0; border-radius:18px 0 0 18px; box-shadow:-12px 0 40px #17101c22; animation:amar-drawer-in .22s ease-out; }
.profile-drawer .modal-close { position:fixed; z-index:2; top:14px; right:14px; background:#fff; }
.amar-profile-menu { display:flex; min-height:calc(100dvh - 110px); flex-direction:column; gap:10px; }
.amar-profile-menu-group { display:grid; padding:3px 10px; border-radius:12px; background:#fff; }
.amar-profile-menu .setting-row { min-height:58px; gap:13px; border-bottom:1px solid #f4f2f4; background:#fff; color:#333238; }
.amar-profile-menu .setting-row:last-child { border-bottom:0; }
.amar-profile-menu .setting-row svg { width:22px; height:22px; }
.amar-profile-menu .setting-row span { flex:1; }
.amar-profile-menu .setting-row b { padding:3px 9px; border:1px solid #c9c9c9; border-radius:12px; color:#8d8d91; font-size:11px; font-weight:500; }
.amar-profile-menu .setting-row i { width:7px; height:7px; border-radius:50%; background:#ff3d8b; }
.amar-profile-menu-favorites { margin-top:auto; }
.amar-profile-menu-favorites h3 { margin:0 0 12px; font-size:14px; font-weight:600; }
.amar-profile-menu-favorites>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.amar-profile-menu-favorites button { display:grid; justify-items:center; gap:6px; min-height:76px; padding:10px 3px; background:#fff; color:#55515a; font-size:11px; }
.amar-profile-menu-favorites button span { font-size:23px; }
@keyframes amar-drawer-in { from{transform:translateX(24px);opacity:.7} to{transform:translateX(0);opacity:1} }
.amar-own-info .amar-verification-grid button { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px; border: 0; border-radius: 12px; background: #f8f5f8; color: #98929c; font-size: 10px; text-align: left; }
.amar-own-info .amar-verification-grid button svg { width: 16px; }
.amar-own-account-tools { display: grid; gap: 2px; padding: 12px 18px; }
.amar-own-account-tools .setting-row { background: #fff; }
@media (max-width: 700px) {
  .amar-own-profile { margin: 0; }
  .amar-own-cover { min-height: 250px; padding: 10px 14px 18px; }
  .amar-own-toolbar { gap: 5px; }
  .amar-own-toolbar .btn { min-height: 32px; padding: 5px 8px; font-size: 10px; }
  .amar-own-toolbar .icon-btn { width: 34px; height: 34px; }
  .amar-own-identity { gap: 10px; padding: 12px; }
  .amar-own-identity .avatar.xl { width: 62px; height: 62px; }
  .amar-own-identity h1 { font-size: 18px; }
  .amar-own-stats { margin-right: 12px; margin-left: 12px; }
  .amar-own-shortcuts { margin-right: 12px; margin-left: 12px; }
  .amar-own-shortcuts button { font-size: 9px; }
  .profile-drawer-backdrop .profile-drawer { width:88vw; min-width:0; padding:72px 12px 20px; border-radius:16px 0 0 16px; }
  .profile-drawer .modal-close { top:12px; right:12px; }
}
body { background: #fff; color: var(--ink); }
.romeo-shell { background: #fff; }
.amar-star-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.amar-star-meta span { display:inline-flex; align-items:center; gap:3px; padding:4px 7px; border-radius:12px; background:#fff5dc; color:#9a6b00; font-size:10px; line-height:1.1; }
.amar-vip-modal { text-align:center; padding:8px 2px 0; }
.amar-vip-crown { display:grid; width:62px; height:62px; place-items:center; margin:0 auto 12px; border-radius:50%; background:linear-gradient(135deg,#ffe88a,#ffb52a); color:#9c5b00; }
.amar-vip-crown svg { width:30px; height:30px; }
.amar-vip-modal .notice { margin:16px 0; text-align:left; }
.room-popup { display:grid; grid-template-columns:58px minmax(0,1fr) auto 34px; gap:10px; align-items:center; padding:10px; border:1px solid #f3dce7; border-radius:20px; background:#fff; color:#29242d; box-shadow:0 12px 42px #4b153020; }
.room-popup-cover { width:58px; height:58px; border-radius:14px; object-fit:cover; }
.room-popup-copy { display:grid; min-width:0; gap:2px; }
.room-popup-copy small { color:#ff2f82; font-size:9px; font-weight:800; letter-spacing:.08em; }
.room-popup-copy b { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.room-popup-copy span { color:#8f8a95; font-size:11px; }
.room-popup .room-popup-join { min-height:38px; padding:0 12px; white-space:nowrap; }
.room-popup .icon-btn { width:32px; height:32px; background:#fff4f8; color:#8d7781!important; }
.modal-backdrop { background:rgba(44,25,38,.42); backdrop-filter:blur(3px); }
.modal { border:1px solid #f5e3eb; border-radius:24px; background:#fff; color:#302b34; box-shadow:0 22px 70px #33162b30; }
.modal h2 { color:#28232c; }
.modal .modal-close { border:0; border-radius:50%; background:#fff3f8; color:#8c7481; }
.modal .field input, .modal .field textarea, .modal .field select { border-color:#eee5eb; border-radius:14px; background:#fffafd; }
.modal .gift-option { border:1px solid #f2e4ec; border-radius:18px; background:#fffafd; }
.modal .gift-option.selected { border-color:#ff6ca5; background:#fff0f7; box-shadow:0 0 0 2px #ff2f8218; }
.amar-games { max-width:760px; margin:0 auto; }
.amar-games-note { display:flex; align-items:center; gap:12px; margin:14px 0; padding:13px 15px; border:1px solid #f7e3eb; border-radius:18px; background:#fff7fa; }
.amar-games-note>span { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; border-radius:14px; background:#ffe5f0; color:#ed4694; }
.amar-games-note p { display:grid; gap:3px; margin:0; }
.amar-games-note small { color:#918995; font-size:11px; }
.amar-games .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.amar-games .game-tile { min-height:156px; gap:8px; padding:15px; border:0; border-radius:22px; color:#30283a; box-shadow:0 6px 18px #4a24420b; }
.amar-games .game-tile:nth-child(1) { background:linear-gradient(145deg,#fff0f8,#f9d4e8); }
.amar-games .game-tile:nth-child(2) { background:linear-gradient(145deg,#f0edff,#ddd4ff); }
.amar-games .game-tile:nth-child(3) { background:linear-gradient(145deg,#eefaff,#d6f1ff); }
.amar-games .game-tile:nth-child(4) { background:linear-gradient(145deg,#fff8e8,#ffe6bc); }
.amar-games .game-tile .game-art { font-size:42px; line-height:1; }
.amar-games .game-tile>span:not(.game-art) { font-size:16px; }
.amar-games .game-tile small { color:#817987; font-size:11px; }
.romeo-shell .mobile-nav { background: rgba(255,255,255,.97); border-color: #f2eff4; box-shadow: 0 -4px 18px #31203708; }
.romeo-shell .mobile-nav button { color: #aaa8b2; }
.romeo-shell .mobile-nav button.active { color: var(--accent); }
.romeo-shell .mobile-nav .nav-symbol { background: transparent; }
.romeo-shell .mobile-nav .active .nav-symbol { color: var(--accent); }
.romeo-shell .mobile-nav .badge { background: var(--accent); }
.romeo-shell .btn.primary, .romeo-shell .person-action, .romeo-shell .icon-btn.accent { background: var(--accent); color: #fff; border-color: transparent; }
.romeo-shell .text-tabs button.active:after { background: var(--accent); }
.romeo-shell .online-label, .romeo-shell .live-label { color: #15c796; }

@media (max-width: 700px) {
  body { background: linear-gradient(180deg,#fff5fa 0,#fff 250px); }
  .romeo-shell .main { padding: 0 0 calc(98px + env(safe-area-inset-bottom)); }
  .romeo-shell .topbar { display: none; }
  .romeo-shell #page { min-height: calc(100dvh - 88px); }
  .romeo-home.amar-home { margin: 0; padding: 0 0 22px; }
  .amar-promo-strip { display: flex; gap: 12px; overflow-x: auto; padding: 10px 16px 18px; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .amar-promo-strip::-webkit-scrollbar { display: none; }
  .amar-promo { position: relative; display: flex; flex: 0 0 158px; min-height: 118px; overflow: hidden; flex-direction: column; justify-content: flex-end; gap: 3px; padding: 13px; border: 0; border-radius: 22px; color: #fff; text-align: left; scroll-snap-align: start; }
  .amar-promo.violet { background: linear-gradient(135deg,#aa63ff,#7449ee); }
  .amar-promo.pink { background: linear-gradient(135deg,#ff62cb,#f034a2); }
  .amar-promo.gold { background: linear-gradient(135deg,#ffcc28,#ff9e00); }
  .amar-promo.green { background: linear-gradient(135deg,#46dfa4,#17ba82); }
  .amar-promo-art { position: absolute; right: 8px; top: 5px; width: 67px; height: 67px; display: grid; place-items: center; border-radius: 26px; background: #ffffff24; transform: rotate(9deg); }
  .amar-promo-art svg { width: 43px; height: 43px; stroke-width: 1.6; }
  .amar-promo strong { position: relative; z-index: 1; font-size: 20px; line-height: 1.1; }
  .amar-promo strong, .amar-promo small { color: #fff; }
  .amar-promo small { position: relative; z-index: 1; font-size: 12px; }
  .amar-promo[disabled] { opacity: .88; }
  .amar-home-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 60px; padding: 0 16px; }
  .amar-home-toolbar .list-toolbar { display: flex; flex: 1; min-width: 0; margin: 0; }
  .amar-home-toolbar .text-tabs { gap: 10px; }
  .amar-home-toolbar .text-tabs button { position: relative; min-height: 54px; padding: 14px 0; color: #aaa8b2; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .amar-home-toolbar .text-tabs button.active { color: var(--accent); }
  .amar-home-toolbar .text-tabs button.active:after { left: 30%; bottom: 5px; width: 40%; height: 4px; border-radius: 8px; }
  .amar-home-actions { display: flex; gap: 2px; }
  .amar-home-actions .icon-btn { width: 36px; height: 42px; border: 0; background: transparent; color: #53515b; }
  .amar-people-list { padding: 0 16px; }
  .amar-person { display: grid; grid-template-columns: 82px minmax(0,1fr) 52px; align-items: center; gap: 12px; min-height: 124px; padding: 14px 0; border-bottom: 1px solid #f2eff4; }
  .amar-person-avatar { position: relative; width: 82px; height: 82px; padding: 0; border: 0; border-radius: 50%; background: #f4eaf2; }
  .amar-person-avatar .avatar { width: 82px; height: 82px; border-radius: 50%; font-size: 24px; }
  .amar-person-avatar .online-dot { position: absolute; right: 1px; bottom: 3px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #19d3a0; }
  .amar-person-copy { min-width: 0; }
  .amar-person-name { display: inline-flex; align-items: center; max-width: 100%; gap: 5px; overflow: hidden; padding: 0; border: 0; background: transparent; color: #222126; font-size: 19px; font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .amar-badge { display: inline-grid; flex: 0 0 auto; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: #f8d9f0; color: #dc57bf; }
  .amar-badge svg { width: 14px; height: 14px; }
  .amar-person-tags { display: flex; align-items: center; gap: 5px; margin-top: 7px; overflow: hidden; }
  .amar-person-tags span { max-width: 116px; overflow: hidden; padding: 4px 9px; border-radius: 15px; background: #f7f5f8; color: #aaa8b1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .amar-person-tags .gender-tag { width: 26px; padding: 4px 0; background: #18b6ee; color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
  .amar-person-tags .online-label { background: #e9fbf5; color: #16b98c; }
  .amar-person-copy p { display: -webkit-box; overflow: hidden; margin: 8px 0 0; color: #a6a3ad; font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .amar-person-copy .demo-label { display: inline-block; margin-top: 5px; }

/* Keep the demo safety notice readable in the Android WebView. */
.demo-banner {
  display: block;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 10px auto 4px;
  padding: 7px 12px;
  border: 1px solid #f8c3d8;
  border-radius: 999px;
  background: #fff2f7;
  color: #9c315d;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}
  .amar-person-action { display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; background: #f8edff; color: #844cf0; }
  .amar-person-action svg { width: 24px; height: 24px; }
  .amar-home .feed-end { color: #aaa8b2; }
  .amar-stories { margin: 0 -16px 8px; padding: 0 16px; overflow-x: auto; }
  .amar-stories .story-strip { gap: 13px; padding: 8px 0 12px; }
  .amar-stories .story-item { width: 66px; min-width: 66px; gap: 6px; font-size: 10px; }
  .amar-stories .story-ring { width: 58px; height: 58px; padding: 2px; }
  .amar-stories .story-ring .avatar { width: 54px; height: 54px; }
  .romeo-shell .category-tabs { gap: 9px; padding: 10px 16px 16px; }
  .romeo-shell .category-tabs button { border-radius: 18px; background: #fff; color: #888590; }
  .romeo-shell .category-tabs button.active { background: #ffe9f3; color: var(--accent); border-color: transparent; }
  .romeo-shell .romeo-rooms, .romeo-shell .romeo-moments, .romeo-shell .romeo-messages, .romeo-shell .romeo-profile { padding: 12px 16px 20px; }
  .romeo-shell .screen-heading { min-height: 48px; margin-bottom: 12px; }
  .romeo-shell .screen-heading h1 { color: var(--ink); font-size: 24px; }
  .romeo-shell .room-card { border: 1px solid #f5e6ed; border-radius: 20px; background: #fff; box-shadow: 0 5px 18px #3920420b; }
  .romeo-shell .conversation { border-bottom: 1px solid #f1eef3; }
  .romeo-shell .post { overflow: hidden; margin: 12px 0 20px; border: 0; border-bottom: 1px solid #f0edf2; border-radius: 0; background: transparent; box-shadow: none; }
  .romeo-shell .post-actions button.liked { color: var(--accent); }
  .romeo-shell .mobile-nav { min-height: 79px; padding: 7px 8px max(9px,env(safe-area-inset-bottom)); }
  .romeo-shell .mobile-nav button { min-width: 52px; min-height: 58px; gap: 4px; font-size: 10px; }
  .romeo-shell .mobile-nav .nav-symbol { width: 34px; height: 28px; }
  .romeo-shell .mobile-nav .nav-symbol svg { width: 25px; height: 25px; }
  .romeo-shell .mobile-nav .active .nav-symbol { filter: drop-shadow(0 3px 8px #ff2f8230); }
  .romeo-shell .room-mini { bottom: calc(88px + env(safe-area-inset-bottom)); }
  #toasts { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .romeo-shell .toast { border: 1px solid #ffd8e9; border-radius: 16px; background: #fff3f8; color: #7e3054; box-shadow: 0 7px 24px #70264a18; }
  .romeo-shell .room-popup { inset:auto 10px calc(91px + env(safe-area-inset-bottom)); grid-template-columns:48px minmax(0,1fr) auto 30px; gap:8px; padding:9px; border-radius:17px; }
  .romeo-shell .room-popup-cover { width:48px; height:48px; border-radius:12px; }
  .romeo-shell .room-popup-copy b { font-size:13px; }
  .romeo-shell .room-popup-copy span { font-size:10px; }
  .romeo-shell .room-popup .room-popup-join { min-height:34px; padding:0 9px; font-size:11px; }
  .amar-star-meta span { font-size:9px; }
  .amar-games { padding:8px 16px 24px; }
  .amar-games .screen-heading { padding:0; }
  .amar-games .game-tile { min-height:148px; }
  .modal-backdrop { align-items:flex-end; padding:0; }
  .modal { width:100%; max-width:none; max-height:88dvh; overflow-y:auto; border-radius:24px 24px 0 0; padding:24px 18px calc(20px + env(safe-area-inset-bottom)); }
}
/* Recent profile visits use real account activity. */
.profile-visitors>header{text-align:center;padding:10px 0 20px}.profile-visitors>header>span{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;border-radius:22px;background:linear-gradient(135deg,#fce8f3,#f0e7ff);color:#b04cac}.profile-visitors>header>span svg{width:28px;height:28px}.profile-visitors>header h2{margin-bottom:6px}.profile-visitors>header p,.profile-visitors-note{color:#88808e;font-size:12px}.profile-visitor-list{display:grid;gap:8px}.profile-visitor{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#faf7fb;border:1px solid #efe8f1;border-radius:15px;padding:12px;color:#43394b}.profile-visitor>span:not(.avatar){display:grid;gap:4px;flex:1;min-width:0}.profile-visitor strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-visitor small{font-size:11px;color:#8a7c91}.profile-visitor time{font-size:10px;color:#a292ac}.profile-visitor>svg{width:17px;color:#b29cba}.profile-visitors-empty{padding:24px 12px;text-align:center;color:#aa91b4}.profile-visitors-empty>svg{width:40px;height:40px;margin-bottom:14px;opacity:.5}.profile-visitors-empty h3{font-size:16px;color:#64516f}.profile-visitors-empty p{font-size:12px}.profile-visitors-note{text-align:center;margin:18px 0 0}