:root {
  --berry: #f0448f;
  --berry-strong: #d92f7d;
  --berry-soft: #fff0f6;
  --grape: #271b2b;
  --grape-2: #4a3c4d;
  --muted: #8f858f;
  --line: #efe8ee;
  --paper: #ffffff;
  --mist: #fbf8fb;
  --mint: #22bd8a;
  --amber: #f0a63b;
  --blue: #4c96ef;
  --shadow: 0 24px 70px rgba(63, 35, 58, .16);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color: var(--grape);
  font-family: "PingFang SC", "SF Pro Display", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 14%, rgba(240,68,143,.10), transparent 26%),
    radial-gradient(circle at 86% 76%, rgba(129,95,224,.09), transparent 28%),
    #f3eff4;
}
button { color: inherit; border: 0; font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid rgba(77,110,255,.38); outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.review-stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(310px, 430px) 404px;
  place-content: center;
  align-items: center;
  gap: clamp(36px, 7vw, 108px);
  padding: 34px;
}
.prototype-intro { display: grid; gap: 34px; }
.prototype-kicker { color: var(--berry); font: 800 11px/1.2 ui-rounded, "SF Pro Rounded", sans-serif; letter-spacing: 2.4px; }
.prototype-intro h1 { margin: 15px 0 14px; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -3px; }
.prototype-intro > div:first-child p { max-width: 420px; margin: 0; color: #776b76; font-size: 14px; line-height: 1.85; }
.review-role-switch { width: max-content; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(61,39,61,.08); border-radius: 15px; background: rgba(255,255,255,.72); box-shadow: 0 12px 32px rgba(68,44,65,.08); backdrop-filter: blur(18px); }
.review-role-switch > span { padding: 0 10px; color: #9d939c; font-size: 11px; }
.review-role-switch button { min-width: 88px; padding: 10px 14px; border-radius: 11px; background: transparent; color: #766b75; font-size: 12px; font-weight: 700; }
.review-role-switch button.is-active { color: white; background: var(--grape); box-shadow: 0 7px 16px rgba(39,27,43,.2); }
.review-role-hint { width: max-content; max-width: 360px; margin: -3px 0 0; padding: 7px 11px; border-radius: 10px; color: #8d7e89; background: rgba(255,255,255,.58); font-size: 10px; line-height: 1.45; }
.review-role-hint.is-preview { color: #9a5d08; background: rgba(255,240,201,.8); }
.scope-note { display: flex; align-items: center; gap: 12px; }
.scope-note p { margin: 0; color: #8e848c; font-size: 11px; line-height: 1.55; }
.scope-note strong { color: var(--grape); font-size: 12px; }
.scope-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 7px rgba(34,189,138,.11); }
.review-reset-button { width: max-content; display: flex; align-items: center; gap: 11px; padding: 9px 13px 9px 9px; border: 1px solid rgba(218,74,117,.15); border-radius: 14px; color: #7d5262; background: rgba(255,255,255,.56); box-shadow: 0 9px 28px rgba(79,43,65,.06); backdrop-filter: blur(14px); text-align: left; }
.review-reset-button > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #c9436f; background: #fff0f5; font: 750 20px/1 ui-rounded, sans-serif; transition: transform .2s ease; }
.review-reset-button > span:last-child { display: grid; gap: 2px; }
.review-reset-button strong { color: var(--grape); font-size: 11px; }
.review-reset-button small { color: #9b8d96; font-size: 9px; }
.review-reset-button:hover > span:first-child { transform: rotate(-28deg); }
.review-tool-links { display: flex; flex-wrap: wrap; gap: 9px; }
.review-admin-link { width: max-content; display: flex; align-items: center; gap: 11px; padding: 9px 13px 9px 9px; border: 1px solid rgba(79,45,86,.12); border-radius: 14px; color: #634665; background: rgba(255,255,255,.62); box-shadow: 0 9px 28px rgba(79,43,65,.06); backdrop-filter: blur(14px); text-decoration: none; }
.review-admin-link > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(140deg,#38213d,#7a3d70); font-size: 12px; font-weight: 900; }
.review-admin-link > span:last-child { display: grid; gap: 2px; }
.review-admin-link strong { color: var(--grape); font-size: 11px; }
.review-admin-link small { color: #9b8d96; font-size: 9px; }
.is-static-preview .review-admin-link { display: none; }

.reset-dialog { width: min(390px, calc(100vw - 34px)); padding: 25px; border: 1px solid rgba(55,33,53,.09); border-radius: 24px; color: var(--grape); background: rgba(255,255,255,.98); box-shadow: 0 28px 90px rgba(48,27,45,.3); }
.reset-dialog::backdrop { background: rgba(28,18,29,.42); backdrop-filter: blur(5px); }
.reset-dialog-mark { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 15px; color: #c9436f; background: #fff0f5; font: 800 27px/1 ui-rounded, sans-serif; }
.reset-dialog-kicker { color: var(--berry-strong); font: 800 9px/1.2 ui-rounded, sans-serif; letter-spacing: 1.4px; }
.reset-dialog h2 { margin: 7px 0 9px; font-size: 22px; letter-spacing: -.7px; }
.reset-dialog > p { margin: 0; color: #857782; font-size: 12px; line-height: 1.7; }
.reset-dialog .reset-dialog-error { min-height: 18px; margin-top: 8px; color: #c7375f; font-size: 10px; }
.reset-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.reset-dialog-actions button { padding: 12px 13px; border-radius: 12px; background: #f4eff3; font-size: 11px; font-weight: 800; }
.reset-dialog-actions button:last-child { color: white; background: #c9436f; box-shadow: 0 9px 22px rgba(201,67,111,.22); }
.reset-dialog-actions button:disabled { opacity: .55; cursor: wait; }

.phone {
  position: relative;
  width: 404px;
  height: min(874px, calc(100vh - 42px));
  min-height: 690px;
  overflow: hidden;
  border: 7px solid #171219;
  border-radius: 46px;
  background: var(--paper);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.status-bar { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 8px 23px 0; background: var(--paper); font: 750 13px/1 ui-rounded, "SF Pro Rounded", sans-serif; }
.status-bar > div { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.signal { letter-spacing: -2px; }
.battery { padding: 3px 5px; border-radius: 5px; color: white; background: var(--mint); font-size: 9px; }
.app-shell { position: absolute; inset: 42px 0 calc(72px + var(--safe-bottom)); overflow: hidden; background: var(--paper); }
.app-page { position: absolute; inset: 0; display: none; min-height: 0; background: var(--paper); }
.app-page.is-active { display: flex; flex-direction: column; animation: page-enter .22s ease both; }
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.page-scroll::-webkit-scrollbar { display: none; }

.app-header { flex: 0 0 58px; display: flex; align-items: center; justify-content: space-between; padding: 6px 17px; background: rgba(255,255,255,.96); }
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-lockup > strong { color: var(--berry); font-size: 29px; font-weight: 950; letter-spacing: -2.6px; }
.local-service-status { margin-left: -4px; padding: 3px 5px; border-radius: 999px; color: #8a7f88; background: #f1edf0; font-size: 7px; font-weight: 800; white-space: nowrap; }
.local-service-status.is-ready { color: #087b58; background: #e4f7ef; }
.local-service-status.is-offline { color: #a66b16; background: #fff2d9; }
.header-actions { display: flex; gap: 5px; }
.header-actions button, .simple-header > button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #f8f4f7; }
.header-actions button:last-child { color: var(--berry-strong); background: var(--berry-soft); }
.header-actions svg, .simple-header > button svg { width: 20px; height: 20px; }
.header-actions .ranking-entry-button { width: auto; min-width: 67px; grid-auto-flow: column; gap: 3px; padding: 0 9px; border-radius: 999px; color: #5d3c1b; background: linear-gradient(135deg,#fff9e9,#fff1c5); box-shadow: inset 0 0 0 1px rgba(212,160,54,.16), 0 5px 14px rgba(125,82,30,.08); }
.ranking-entry-button span { font-size: 15px; line-height: 1; }
.ranking-entry-button b { font-size: 10px; font-weight: 900; white-space: nowrap; }

.plaza-tabs { flex: 0 0 48px; display: flex; align-items: stretch; justify-content: space-between; gap: 0; padding: 0 18px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--paper); scrollbar-width: none; }
.plaza-tabs::-webkit-scrollbar { display: none; }
.plaza-tabs button { position: relative; flex: 0 0 auto; padding: 0 1px; background: transparent; color: #918890; font-size: 15px; font-weight: 650; }
.plaza-tabs.is-host { justify-content: center; gap: 42px; }
.plaza-tabs.is-host button { min-width: 48px; text-align: center; }
.plaza-tabs button.is-active { color: var(--grape); font-weight: 850; }
.plaza-tabs button.is-active::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 17px; height: 3px; transform: translateX(-50%); border-radius: 999px; background: var(--berry); }
.plaza-scroll { background: var(--mist); }
.plaza-content { padding: 12px 12px 24px; }
.section-lead { display: flex; align-items: flex-end; justify-content: space-between; padding: 1px 3px 12px; }
.section-lead div { display: grid; gap: 3px; }
.section-lead small { color: var(--berry-strong); font-size: 9px; font-weight: 850; letter-spacing: 1.2px; }
.section-lead strong { font-size: 16px; letter-spacing: -.35px; }
.section-lead > span { color: #9b929a; font-size: 10px; }

.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.person-card { position: relative; aspect-ratio: .77; overflow: hidden; border-radius: 18px; background: #ddd; box-shadow: 0 7px 18px rgba(56,36,54,.09); isolation: isolate; }
.person-card::after { content: ""; position: absolute; inset: 37% 0 0; z-index: 1; background: linear-gradient(to bottom, transparent, rgba(16,10,17,.88)); pointer-events: none; }
.person-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .25s ease; }
.person-card:active .person-photo { transform: scale(1.025); }
.card-top { position: absolute; z-index: 2; top: 9px; left: 9px; right: 9px; display: flex; align-items: center; justify-content: space-between; }
.card-status-group { min-width: 0; display: flex; align-items: center; gap: 4px; }
.status-pill, .distance-pill { padding: 5px 7px; border-radius: 999px; color: white; background: rgba(25,18,28,.58); backdrop-filter: blur(7px); font-size: 9px; font-style: normal; font-weight: 750; }
.status-pill.is-online { background: rgba(16,154,101,.82); }
.status-pill.is-busy { background: rgba(191,126,31,.86); }
.photo-proof-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: white; background: rgba(48,103,172,.82); box-shadow: 0 4px 12px rgba(22,45,87,.18); backdrop-filter: blur(7px); font-size: 8px; font-weight: 800; line-height: 1; }
.photo-proof-pill svg { width: 10px; height: 10px; stroke-width: 2.1; }
.card-bottom { position: absolute; z-index: 2; left: 11px; right: 11px; bottom: 10px; display: grid; gap: 6px; color: white; }
.card-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.card-name strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.gender-pill { flex: 0 0 auto; padding: 3px 5px; border-radius: 999px; background: var(--berry); font-size: 8px; font-style: normal; font-weight: 800; }
.person-card.is-user .gender-pill { background: var(--blue); }
.card-subline { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 18px; }
.person-tags { min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.person-tags i { flex: 0 0 auto; padding: 2px 4px; border: 1px solid rgba(255,255,255,.17); border-radius: 5px; color: rgba(255,255,255,.9); background: rgba(28,18,30,.32); backdrop-filter: blur(5px); font-size: 7px; font-style: normal; font-weight: 750; white-space: nowrap; }
.price-pill { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 1px; padding: 2px 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; color: rgba(255,255,255,.88); background: rgba(28,18,30,.4); backdrop-filter: blur(5px); font-size: 7px; font-weight: 700; white-space: nowrap; }
.price-pill b { color: white; font-size: 8px; font-weight: 850; }
.user-tag { color: rgba(255,255,255,.8); font-size: 10px; }
.message-fab { position: absolute; z-index: 3; right: 9px; bottom: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--berry); box-shadow: 0 8px 17px rgba(220,45,126,.34); }
.message-fab svg { width: 18px; height: 18px; }
.person-card.is-host .card-bottom { right: 52px; }

.ranking-page { position: absolute; z-index: 18; inset: 42px 0 0; display: flex; flex-direction: column; overflow: hidden; color: var(--grape); background: #f8f1fa; animation: ranking-page-in .28s cubic-bezier(.2,.75,.22,1) both; }
.ranking-page-header { flex: 0 0 60px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 0 12px; color: white; background: linear-gradient(112deg,#6f55ce,#a95fce 55%,#ec72ad); }
.ranking-page-header button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(255,255,255,.13); font: 400 34px/1 sans-serif; }
.ranking-page-header > div { display: grid; justify-items: center; gap: 1px; }
.ranking-page-header small { color: rgba(255,255,255,.65); font: 800 7px/1.2 ui-rounded,sans-serif; letter-spacing: 1.2px; }
.ranking-page-header h2 { margin: 0; font-size: 17px; letter-spacing: -.4px; }
.ranking-page-header > span { text-align: center; color: #ffe5a9; font-size: 18px; }
.ranking-page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: calc(22px + var(--safe-bottom)); scrollbar-width: none; overscroll-behavior: contain; }
.ranking-page-scroll::-webkit-scrollbar { display: none; }
.ranking-spotlight { position: relative; min-height: 390px; overflow: hidden; padding: 14px 14px 0; color: white; background: radial-gradient(circle at 50% 32%,rgba(255,239,197,.38),transparent 25%), linear-gradient(155deg,#7759d6 0%,#b169d0 48%,#f394c7 100%); }
.ranking-spotlight::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px); background-size: 33px 33px; mask-image: linear-gradient(to bottom,#000,transparent 76%); }
.ranking-orbit { position: absolute; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; }
.orbit-one { width: 250px; height: 250px; left: -115px; top: 112px; }
.orbit-two { width: 310px; height: 310px; right: -175px; top: 38px; }
.ranking-page-tabs { position: relative; z-index: 2; width: 228px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 auto; padding: 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(51,26,88,.18); backdrop-filter: blur(12px); }
.ranking-page-tabs button { padding: 8px; border-radius: 999px; color: rgba(255,255,255,.65); background: transparent; font-size: 11px; font-weight: 800; }
.ranking-page-tabs button.is-active { color: #7846a9; background: white; box-shadow: 0 7px 17px rgba(75,36,107,.18); }
.ranking-headline { position: relative; z-index: 1; display: grid; justify-items: center; margin-top: 14px; text-align: center; }
.ranking-headline small { color: #ffe8a6; font-size: 8px; font-weight: 850; letter-spacing: 1px; }
.ranking-headline h3 { margin: 4px 0 3px; font-size: 19px; letter-spacing: -.7px; }
.ranking-headline p { margin: 0; color: rgba(255,255,255,.72); font-size: 9px; }
.ranking-podium { position: absolute; z-index: 2; left: 13px; right: 13px; bottom: 0; height: 238px; display: flex; align-items: flex-end; justify-content: center; gap: 7px; }
.ranking-empty { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 72px; display: grid; justify-items: center; gap: 6px; padding: 24px; border: 1px solid rgba(255,255,255,.28); border-radius: 20px; background: rgba(74,37,108,.2); text-align: center; backdrop-filter: blur(12px); }
.ranking-empty strong { font-size: 14px; }
.ranking-empty small { color: rgba(255,255,255,.72); font-size: 9px; }
.podium-person { position: relative; width: 31%; height: 178px; display: flex; flex-direction: column; align-items: center; padding: 0 5px 12px; color: white; background: transparent; }
.podium-person::after { content: ""; position: absolute; z-index: -1; inset: 61px 0 0; border: 1px solid rgba(255,255,255,.35); border-radius: 17px 17px 0 0; background: linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1)); box-shadow: 0 15px 28px rgba(67,35,103,.15); backdrop-filter: blur(8px); }
.podium-person.is-first { width: 36%; height: 217px; }
.podium-person.is-first::after { background: linear-gradient(180deg,rgba(255,225,134,.48),rgba(255,255,255,.12)); }
.podium-avatar { width: 70px; height: 70px; padding: 4px; border-radius: 50%; background: linear-gradient(145deg,#fff7cf,#e8ac39); box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 8px 20px rgba(74,31,95,.25); }
.podium-person.is-first .podium-avatar { width: 88px; height: 88px; }
.podium-person.is-second .podium-avatar { background: linear-gradient(145deg,#fff,#aeb9d7); }
.podium-person.is-third .podium-avatar { background: linear-gradient(145deg,#ffe3d6,#c87c6b); }
.podium-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.podium-crown { height: 24px; display: grid; place-items: end center; color: #ffe382; font: 900 21px/1 ui-rounded,sans-serif; }
.podium-person:not(.is-first) .podium-crown { font-size: 13px; }
.podium-person strong { max-width: 100%; overflow: hidden; margin-top: 8px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.podium-person small { max-width: 100%; overflow: hidden; margin-top: 3px; color: rgba(255,255,255,.76); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.podium-person i { position: absolute; bottom: 0; width: 46px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.2); filter: blur(2px); }
.ranking-rest { position: relative; z-index: 3; margin-top: -1px; padding: 18px 13px 6px; border-radius: 22px 22px 0 0; background: linear-gradient(180deg,#f9edfb,#f8f5f8); }
.ranking-rest > header { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 3px 12px; }
.ranking-rest > header div { display: grid; gap: 2px; }
.ranking-rest > header small { color: #a55ab8; font-size: 7px; font-weight: 900; letter-spacing: 1px; }
.ranking-rest > header h3 { margin: 0; font-size: 15px; }
.ranking-rest > header > span { color: #a298a2; font-size: 8px; }
.ranking-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rank-row { width: 100%; display: grid; grid-template-columns: 24px 45px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 69px; padding: 10px; border: 1px solid #f0e9ef; border-radius: 16px; color: var(--grape); background: rgba(255,255,255,.92); text-align: left; box-shadow: 0 7px 20px rgba(81,51,82,.045); }
.rank-no { text-align: center; color: #9f959e; font: 850 12px/1 ui-rounded, sans-serif; }
.rank-avatar { width: 45px; height: 45px; object-fit: cover; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 2px #ead7ec; }
.rank-person { min-width: 0; display: grid; gap: 4px; }
.rank-person strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rank-person small { color: var(--berry-strong); font-size: 10px; font-weight: 750; }
.rank-action { padding: 7px 9px; border-radius: 999px; color: var(--berry-strong); background: var(--berry-soft); font-size: 9px; font-weight: 800; }
@keyframes ranking-page-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.empty-state { min-height: 390px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.empty-state span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; color: var(--berry); background: var(--berry-soft); font-size: 26px; }
.empty-state strong { color: var(--grape); font-size: 15px; }
.empty-state small { max-width: 210px; line-height: 1.55; }
.empty-state button { margin-top: 5px; padding: 9px 15px; border-radius: 999px; color: white; background: var(--berry); font-size: 10px; font-weight: 800; }
.compact-empty { min-height: 430px; padding: 20px; }
.local-message-mark { margin-left: 6px; padding: 2px 4px; border-radius: 5px; color: #087b58; background: #e4f7ef; font-size: 7px; font-style: normal; vertical-align: middle; }

.simple-header { flex-basis: 72px; padding-top: 10px; border-bottom: 1px solid var(--line); }
.simple-header > div { display: grid; gap: 2px; }
.simple-header small { color: var(--berry); font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.simple-header h2 { margin: 0; font-size: 25px; letter-spacing: -1px; }
.notification-dot { position: absolute; right: 8px; top: 7px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--berry); }
.feed-scroll, .messages-scroll, .profile-scroll { background: var(--mist); }
.feed-page { position: absolute; }
.feed-header { flex-basis: 62px; padding-top: 7px; border-bottom: 0; }
.feed-header .feed-publish-button { width: auto; height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 12px; border-radius: 999px; color: white; background: var(--grape); box-shadow: 0 7px 16px rgba(39,27,43,.16); font-size: 10px; font-weight: 800; }
.feed-header .feed-publish-button svg { width: 15px; height: 15px; }
.feed-tabs { flex: 0 0 42px; display: grid; grid-template-columns: repeat(3,1fr); align-items: stretch; padding: 0 12px; border-bottom: 1px solid var(--line); background: white; }
.feed-tabs button { position: relative; color: #9b929a; background: transparent; font-size: 12px; font-weight: 750; }
.feed-tabs button::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 20px; height: 3px; border-radius: 999px; background: var(--berry); opacity: 0; transform: translateX(-50%); }
.feed-tabs button.is-active { color: var(--grape); }
.feed-tabs button.is-active::after { opacity: 1; }
.feed-scroll { padding: 10px 11px 84px; }
.feed-card { padding: 13px; border: 1px solid #f1eaf0; border-radius: 17px; background: white; box-shadow: 0 6px 16px rgba(60,37,56,.05); }
.feed-card + .feed-card { margin-top: 10px; }
.feed-author { width: 100%; display: flex; align-items: center; gap: 9px; color: inherit; background: transparent; text-align: left; }
.feed-author img { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; }
.feed-author > span { display: grid; gap: 3px; }
.feed-author strong { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.feed-author strong i { padding: 2px 5px; border-radius: 999px; color: var(--berry-strong); background: var(--berry-soft); font-size: 7px; font-style: normal; font-weight: 800; }
.feed-author small { color: var(--muted); font-size: 9px; }
.feed-card p { margin: 11px 0; font-size: 12px; line-height: 1.6; }
.feed-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; overflow: hidden; border-radius: 13px; }
.feed-media-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.feed-media-grid.has-one { grid-template-columns: 1fr; }
.feed-media-grid.has-one img { aspect-ratio: 1.65; }
.feed-media-grid.has-many img:first-child { grid-row: span 2; height: 100%; }
.feed-video { position: relative; overflow: hidden; border-radius: 13px; background: #171219; }
.feed-video video { width: 100%; aspect-ratio: 16/10; display: block; object-fit: cover; background: #171219; }
.feed-video > span { position: absolute; left: 9px; top: 9px; display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; color: white; background: rgba(24,16,25,.7); backdrop-filter: blur(7px); font-size: 8px; font-weight: 800; pointer-events: none; }
.feed-video > span svg { width: 12px; height: 12px; }
.feed-actions { display: flex; align-items: center; gap: 18px; margin-top: 11px; color: var(--muted); font-size: 10px; }
.feed-actions button, .feed-actions span { display: flex; align-items: center; gap: 4px; color: inherit; background: transparent; font-size: inherit; }
.feed-actions span:last-child { margin-left: auto; }
.feed-actions svg { width: 15px; height: 15px; }

.call-page { background: linear-gradient(180deg,#fff 0,#fff8fb 50%,#fff 100%); }
.call-stage { flex: 1; display: grid; place-content: center; justify-items: center; padding: 28px; text-align: center; }
.voice-orbit { position: relative; width: 145px; height: 145px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 50%; background: rgba(240,68,143,.06); box-shadow: 0 0 0 18px rgba(240,68,143,.035),0 0 0 36px rgba(240,68,143,.018); }
.voice-orbit::before, .voice-orbit::after { content: ""; position: absolute; width: 5px; border-radius: 9px; background: var(--berry); box-shadow: 13px 0 var(--berry),26px 0 var(--berry),39px 0 var(--berry),52px 0 var(--berry); }
.voice-orbit::before { left: 40px; height: 26px; transform: translateY(3px); }
.voice-orbit::after { left: 46px; height: 42px; opacity: .28; transform: translateY(3px) scaleX(1.25); }
.call-stage h2 { margin: 0; font-size: 23px; letter-spacing: -1px; }
.call-stage p { max-width: 250px; margin: 10px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.primary-action { min-width: 174px; padding: 13px 22px; border-radius: 999px; color: white; background: var(--grape); font-size: 12px; font-weight: 800; box-shadow: 0 10px 23px rgba(39,27,43,.18); }
.availability-card { width: 100%; padding: 18px; border: 1px solid #f0e7ee; border-radius: 20px; background: white; box-shadow: 0 8px 24px rgba(57,37,54,.06); text-align: left; }
.availability-card > div { display: flex; align-items: center; justify-content: space-between; }
.availability-card strong { font-size: 13px; }
.availability-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.switch { position: relative; width: 48px; height: 28px; border-radius: 999px; background: #ddd4dc; transition: .2s ease; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(0,0,0,.16); transition: .2s ease; }
.switch.is-on { background: var(--mint); }
.switch.is-on::after { transform: translateX(20px); }
.availability-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.availability-stats span { padding: 11px; border-radius: 13px; background: var(--mist); }
.availability-stats b { display: block; font: 800 18px/1.2 ui-rounded, sans-serif; }
.availability-stats em { color: var(--muted); font-size: 9px; font-style: normal; }

.messages-scroll { padding: 10px 14px 24px; }
.message-list-caption { display: flex; align-items: center; justify-content: space-between; margin: 13px 2px 3px; color: #a1969f; font-size: 8px; }
.message-list-caption strong { color: #746873; font-size: 9px; }
.service-center-row { margin-bottom: 2px; padding: 13px 12px; border: 1px solid rgba(240,68,143,.13); border-radius: 19px; background: linear-gradient(125deg,#fff 10%,#fff4f9 64%,#f9f3ff); box-shadow: 0 10px 28px rgba(72,44,68,.07); }
.service-center-row .message-copy strong { display: flex; align-items: center; gap: 6px; }
.service-center-row .message-copy strong em { padding: 2px 5px; border-radius: 999px; color: #c53778; background: #ffe2ef; font-size: 7px; font-style: normal; }
.service-center-row time { color: #bf789a; }
.service-center-avatar { position: relative; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 17px; color: white; background: linear-gradient(145deg,#f0448f,#a955d1); box-shadow: 0 9px 19px rgba(222,62,145,.22); }
.service-center-avatar::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; }
.service-center-avatar svg { position: relative; z-index: 1; width: 23px; height: 23px; }
.service-center-avatar i { position: absolute; z-index: 2; right: -4px; top: -5px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid white; border-radius: 999px; color: white; background: #ef3f57; font-size: 8px; font-style: normal; }
.message-empty-note { display: grid; justify-items: center; gap: 4px; padding: 29px 16px 20px; color: #a59aa3; text-align: center; }
.message-empty-note strong { color: #6f626d; font-size: 11px; }
.message-empty-note small { max-width: 230px; font-size: 9px; line-height: 1.65; }
.message-row { width: 100%; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.message-avatar { position: relative; }
.message-avatar img { width: 50px; height: 50px; object-fit: cover; border-radius: 17px; }
.message-avatar i { position: absolute; right: -2px; top: -3px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--mist); border-radius: 99px; color: white; background: var(--berry); font-size: 8px; font-style: normal; }
.message-copy { min-width: 0; display: grid; gap: 5px; }
.message-copy strong, .message-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-copy strong { font-size: 12px; }
.message-copy p { margin: 0; color: var(--muted); font-size: 10px; }
.message-row time { align-self: start; padding-top: 4px; color: #aaa1a9; font-size: 8px; }

.service-center-screen { position: absolute; z-index: 54; inset: 42px 0 0; display: flex; flex-direction: column; overflow: hidden; color: var(--grape); background: linear-gradient(180deg,#fff 0,#fbf6fa 19%,#f6f3f7 100%); animation: profile-editor-in .22s ease both; }
.service-center-header { flex: 0 0 62px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; padding: 0 11px; border-bottom: 1px solid rgba(74,50,71,.07); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); }
.service-center-header > button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #f8f3f7; font: 400 34px/1 sans-serif; }
.service-center-header > div { display: grid; justify-items: center; gap: 2px; }
.service-center-header small { color: #b27098; font: 800 6px/1 ui-rounded,sans-serif; letter-spacing: 1.25px; }
.service-center-header h2 { margin: 0; font-size: 16px; letter-spacing: -.4px; }
.service-center-header > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 13px; color: #d6387f; background: #fff0f6; }
.service-center-header svg { width: 19px; height: 19px; }
.service-center-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 14px 14px 98px; scrollbar-width: none; overscroll-behavior: contain; }
.service-center-scroll::-webkit-scrollbar { display: none; }
.service-center-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 68px; align-items: center; gap: 12px; margin-bottom: 13px; padding: 18px; border-radius: 22px; color: white; background: linear-gradient(127deg,#35213b,#8d3d80 63%,#ec4e99); box-shadow: 0 15px 34px rgba(97,47,91,.18); }
.service-center-hero::before { content: ""; position: absolute; right: -38px; top: -66px; width: 140px; height: 140px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,255,255,.045),0 0 0 42px rgba(255,255,255,.025); }
.service-center-hero > div { position: relative; z-index: 1; display: grid; gap: 6px; }
.service-center-hero small { color: #ffb6d7; font: 800 7px/1.2 ui-rounded,sans-serif; letter-spacing: 1px; }
.service-center-hero strong { font-size: 17px; letter-spacing: -.5px; }
.service-center-hero p { max-width: 235px; margin: 0; color: rgba(255,255,255,.7); font-size: 8px; line-height: 1.65; }
.service-center-hero > span { position: relative; z-index: 1; width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 20px; background: rgba(255,255,255,.12); transform: rotate(3deg); }
.service-center-hero svg { width: 28px; height: 28px; }
.service-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 4px; margin-bottom: 14px; padding: 12px 10px; border: 1px solid #eee5ec; border-radius: 17px; background: rgba(255,255,255,.86); }
.service-flow span { display: grid; justify-items: center; gap: 4px; color: #9a8e98; font-size: 7px; }
.service-flow span i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9px; color: #c83d7a; background: #fff0f6; font-size: 9px; font-style: normal; font-weight: 850; }
.service-flow > b { color: #c9bec7; font-size: 12px; }
.service-thread-title { display: flex; align-items: end; justify-content: space-between; margin: 0 2px 9px; }
.service-thread-title strong { font-size: 12px; }
.service-thread-title small { color: #9c9099; font-size: 8px; }
.service-timeline { position: relative; display: grid; gap: 11px; }
.service-timeline::before { content: ""; position: absolute; left: 20px; top: 26px; bottom: 28px; width: 1px; background: linear-gradient(#f1a4c6,#ddd1dc); }
.service-message-card { position: relative; display: grid; grid-template-columns: 41px minmax(0,1fr); gap: 10px; padding: 13px; border: 1px solid #eee5ec; border-radius: 19px; background: white; box-shadow: 0 9px 25px rgba(64,42,62,.055); }
.service-message-icon { position: relative; z-index: 1; width: 41px; height: 41px; display: grid; place-items: center; border-radius: 14px; color: #c83b7b; background: #fff0f6; }
.service-message-icon svg { width: 19px; height: 19px; }
.service-message-card.is-approved .service-message-icon { color: #168b69; background: #e9faf4; }
.service-message-card.is-rejected .service-message-icon { color: #8a7d87; background: #f1eef1; }
.service-message-copy { min-width: 0; display: grid; gap: 5px; }
.service-message-copy header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.service-message-copy header strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.service-message-copy header time { flex: 0 0 auto; color: #a79ca5; font-size: 7px; }
.service-message-copy p { margin: 0; color: #766a74; font-size: 9px; line-height: 1.65; }
.service-message-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 3px; color: #a2979f; font-size: 7px; }
.service-message-meta b { padding: 3px 6px; border-radius: 999px; color: #ba3e74; background: #fff0f5; font-size: 7px; }
.service-message-card.is-approved .service-message-meta b { color: #16805f; background: #e8f8f2; }
.service-message-card.is-rejected .service-message-meta b { color: #766a73; background: #f1eef1; }
.service-settlement { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 3px; }
.service-settlement span { display: grid; gap: 2px; padding: 8px 9px; border-radius: 11px; background: #f7f4f7; }
.service-settlement small { color: #948892; font-size: 7px; }
.service-settlement strong { color: #16805f; font-size: 11px; }
.service-center-empty { display: grid; justify-items: center; gap: 8px; padding: 24px 18px; border: 1px dashed #e5d7e2; border-radius: 19px; color: #9a8e98; background: rgba(255,255,255,.55); text-align: center; }
.service-center-empty span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 15px; color: #c83d7a; background: #fff0f6; }
.service-center-empty svg { width: 22px; height: 22px; }
.service-center-empty strong { color: #665a64; font-size: 11px; }
.service-center-empty p { max-width: 250px; margin: 0; font-size: 8px; line-height: 1.7; }
.service-center-footer { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; padding: 11px 16px calc(12px + var(--safe-bottom)); border-top: 1px solid #eee5ec; background: rgba(255,255,255,.96); box-shadow: 0 -8px 24px rgba(54,36,52,.06); backdrop-filter: blur(17px); }
.service-center-footer > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; color: #c63e7a; background: #fff0f6; }
.service-center-footer svg { width: 18px; height: 18px; }
.service-center-footer p { display: grid; gap: 3px; margin: 0; }
.service-center-footer strong { font-size: 9px; }
.service-center-footer small { color: #988c95; font-size: 7px; }

.profile-cover { position: relative; padding: 29px 18px 21px; color: white; background: linear-gradient(135deg,#2d1d31,#51304b 57%,#9c3d71); }
.profile-cover::after { content: ""; position: absolute; right: -30px; top: -55px; width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.035),0 0 0 47px rgba(255,255,255,.025); }
.profile-identity { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.profile-identity img { width: 62px; height: 62px; object-fit: cover; border: 3px solid rgba(255,255,255,.85); border-radius: 21px; }
.profile-identity div { display: grid; gap: 4px; }
.profile-identity h2 { margin: 0; font-size: 20px; }
.profile-identity p { margin: 0; color: rgba(255,255,255,.68); font-size: 9px; }
.profile-role { width: max-content; padding: 4px 7px; border-radius: 6px; color: #ffe3ef; background: rgba(240,68,143,.25); font-size: 8px; font-weight: 800; }
.profile-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 22px; }
.profile-stats span { display: grid; gap: 3px; text-align: center; }
.profile-stats b { font: 800 16px/1.2 ui-rounded, sans-serif; }
.profile-stats small { color: rgba(255,255,255,.62); font-size: 8px; }
.profile-menu { padding: 12px; }
.profile-wallet { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 18px; background: linear-gradient(105deg,#fff5e2,#fff0c7); }
.profile-wallet div { display: grid; gap: 4px; }
.profile-wallet small { color: #9b7838; font-size: 9px; }
.profile-wallet strong { color: #604618; font: 850 20px/1.1 ui-rounded, sans-serif; }
.profile-wallet button { padding: 8px 13px; border-radius: 999px; color: #fff; background: #ae7b23; font-size: 9px; font-weight: 800; }
.profile-wallet strong em { font-size: 9px; font-style: normal; }
.guest-profile-cover { background: linear-gradient(135deg,#302336,#59425a 58%,#9d6180); }
.guest-wallet { border: 1px solid #efd49c; }
.guest-account-note { margin: 10px 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.guest-account-note strong { color: var(--grape); font-size: 11px; }
.guest-account-note p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.menu-card { margin-top: 10px; padding: 2px 14px; border: 1px solid #f1e9f0; border-radius: 18px; background: white; }
.menu-card button { width: 100%; display: grid; grid-template-columns: 32px 1fr 16px; align-items: center; gap: 9px; padding: 13px 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.menu-card button:last-child { border-bottom: 0; }
.menu-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: var(--berry); background: var(--berry-soft); font-size: 13px; }
.menu-card strong { font-size: 11px; }
.menu-card svg { width: 15px; height: 15px; color: #b2a9b1; }

.member-profile-head { padding: 27px 24px 20px; background: white; }
.member-profile-person { min-height: 90px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.member-profile-copy { min-width: 0; padding-top: 5px; }
.member-profile-copy h2 { margin: 0 0 6px; overflow: hidden; color: #171419; font-size: 24px; line-height: 1.1; letter-spacing: -.8px; text-overflow: ellipsis; white-space: nowrap; }
.member-profile-copy p { display: flex; align-items: center; gap: 7px; margin: 0; color: #aaa4ab; font: 500 11px/1.3 ui-rounded,"SF Pro Rounded",sans-serif; }
.member-profile-copy p i { padding: 3px 5px; border-radius: 4px; color: #ff54a0; background: #ffe7f2; font-size: 8px; font-style: normal; font-weight: 850; }
.member-profile-copy > span { display: block; margin-top: 7px; color: #aaa4ab; font-size: 10px; }
.member-avatar { position: relative; width: 74px; height: 74px; flex: 0 0 auto; }
.member-avatar img { width: 74px; height: 74px; object-fit: cover; border-radius: 50%; box-shadow: 0 7px 18px rgba(38,30,40,.12); }
.member-avatar button { position: absolute; right: -3px; bottom: -4px; width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 2px solid white; border-radius: 50%; color: #39343a; background: white; box-shadow: 0 5px 13px rgba(42,35,43,.15); }
.member-avatar button svg { width: 13px; height: 13px; stroke-width: 2.2; }
.member-social-stats { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 17px; }
.member-social-stats button { display: grid; justify-items: center; gap: 3px; padding: 3px 0; background: transparent; }
.member-social-stats b { color: #171419; font: 780 20px/1 ui-rounded,"SF Pro Rounded",sans-serif; }
.member-social-stats small { color: #8f8991; font-size: 10px; }
.member-profile-body { min-height: 430px; display: grid; align-content: start; gap: 12px; padding: 15px 16px 28px; background: #f8f7fa; }
.host-application-entry { min-height: 128px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid #f0dbe7; border-radius: 19px; color: #2c202a; background: radial-gradient(circle at 93% 8%,rgba(241,81,158,.16),transparent 30%),linear-gradient(135deg,#fffafd,#fff2f8); box-shadow: 0 9px 24px rgba(126,51,93,.08); text-align: left; }
.host-application-entry.is-pending_review { border-color: #e4daf3; background: radial-gradient(circle at 92% 5%,rgba(125,82,211,.15),transparent 33%),linear-gradient(135deg,#fdfbff,#f5f0ff); }
.host-application-entry.is-rejected { border-color: #f0d7c9; background: linear-gradient(135deg,#fffaf5,#fff1eb); }
.host-application-emblem { width: 48px; height: 48px; display: grid; place-items: center; align-self: start; border-radius: 16px; color: white; background: linear-gradient(145deg,#f14a98,#9f55d0); box-shadow: 0 8px 18px rgba(210,69,157,.22); }
.host-application-emblem svg { width: 24px; height: 24px; }
.host-application-copy { min-width: 0; display: grid; gap: 4px; }
.host-application-copy > small { color: #e13d85; font-size: 8px; font-weight: 850; letter-spacing: 1px; }
.host-application-copy > strong { font-size: 14px; }
.host-application-copy > p { margin: 0; color: #8c7f88; font-size: 8px; line-height: 1.55; }
.host-application-copy > i { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: #9c9299; font-size: 7px; font-style: normal; white-space: nowrap; }
.host-application-copy > i b { width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; color: #9c9299; background: #eee8ec; font-size: 7px; }
.host-application-copy > i b.is-current { color: white; background: #9160d8; }
.host-application-copy > i b.is-done { color: white; background: #ef498f; }
.host-application-copy > i em { width: 9px; height: 1px; background: #ded5db; }
.host-application-action { display: flex; align-items: center; gap: 2px; align-self: start; padding: 7px 8px; border-radius: 999px; color: #d8347d; background: rgba(255,255,255,.78); font-size: 8px; font-weight: 850; white-space: nowrap; }
.host-application-action svg { width: 12px; height: 12px; }
.member-wallet-card { min-height: 96px; display: flex; align-items: center; justify-content: space-between; padding: 18px 19px; border-radius: 18px; background: white; box-shadow: 0 7px 22px rgba(61,45,63,.035); }
.member-wallet-card > div { display: grid; gap: 6px; }
.member-wallet-card small { color: #969097; font-size: 11px; }
.member-wallet-card strong { color: #171419; font: 820 29px/1 ui-rounded,"SF Pro Rounded",sans-serif; letter-spacing: -.8px; }
.member-wallet-card strong em { color: #8e8790; font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: 0; }
.member-wallet-card > button { min-width: 66px; padding: 11px 16px; border-radius: 999px; color: white; background: linear-gradient(115deg,#f14ca0,#ca67ef); box-shadow: 0 8px 18px rgba(220,73,176,.2); font-size: 12px; font-weight: 850; }
.member-shortcuts { min-height: 115px; display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; padding: 16px 9px 12px; border-radius: 18px; background: white; box-shadow: 0 7px 22px rgba(61,45,63,.035); }
.member-shortcuts button { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 9px; padding: 0 2px; background: transparent; }
.member-shortcuts button > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: #ff62ad; background: #fff0f7; }
.member-shortcuts svg { width: 24px; height: 24px; stroke-width: 1.9; }
.member-shortcuts strong { color: #272228; font-size: 10px; white-space: nowrap; }
.member-menu-list { padding: 7px 18px; border-radius: 18px; background: white; box-shadow: 0 7px 22px rgba(61,45,63,.035); }
.member-menu-list button { width: 100%; min-height: 56px; display: grid; grid-template-columns: 28px minmax(0,1fr) 18px; align-items: center; gap: 12px; padding: 0; border-bottom: 1px solid #f3eff3; background: transparent; text-align: left; }
.member-menu-list button:last-child { border-bottom: 0; }
.member-menu-list .member-menu-icon { width: 23px; height: 23px; color: #242025; stroke-width: 1.9; }
.member-menu-list strong { overflow: hidden; color: #272228; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.member-menu-list .member-menu-arrow { width: 15px; height: 15px; color: #bab5ba; }
.member-menu-list .member-menu-meta { color: #aaa4ab; font-size: 9px; white-space: nowrap; }
.member-menu-list button:has(.member-menu-meta) { grid-template-columns: 28px minmax(0,1fr) auto 18px; }

.host-profile-head { padding: 26px 22px 16px; background: white; }
.host-profile-head .member-profile-person { min-height: 82px; }
.host-profile-head .member-profile-copy > span { margin-top: 6px; }
.host-profile-head .member-social-stats { margin-top: 13px; }
.host-profile-reward-entry { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 11px; border: 1px solid #ffe0a4; border-radius: 15px; color: #3b2a23; background: linear-gradient(103deg,#fff9e9,#fff2d2 58%,#ffecbf); box-shadow: 0 8px 20px rgba(173,115,28,.08); text-align: left; }
.host-profile-reward-entry .reward-progress-ring { --profile-progress: 0; position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#f0a63b calc(var(--profile-progress) * 1%),#f2e6d2 0); }
.host-profile-reward-entry .reward-progress-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fffaf0; }
.host-profile-reward-entry .reward-progress-ring b { position: relative; z-index: 1; color: #b27113; font: 850 9px/1 ui-rounded,sans-serif; }
.host-profile-reward-entry > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.host-profile-reward-entry strong { font-size: 11px; }
.host-profile-reward-entry small { overflow: hidden; color: #a27639; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.host-profile-reward-entry > em { padding: 7px 10px; border-radius: 999px; color: white; background: #e99a2b; font-size: 9px; font-style: normal; font-weight: 850; white-space: nowrap; }
.host-profile-reward-entry.is-complete { border-color: #cfeee3; background: linear-gradient(103deg,#f1fcf8,#e4f8f1); }
.host-profile-reward-entry.is-complete .reward-progress-ring { background: var(--mint); }
.host-profile-reward-entry.is-complete .reward-progress-ring::after { background: #f3fcf9; }
.host-profile-reward-entry.is-complete .reward-progress-ring b, .host-profile-reward-entry.is-complete small { color: #16845f; }
.host-profile-reward-entry.is-complete > em { background: #22aa7d; }
.host-center-body { min-height: 460px; display: grid; align-content: start; gap: 11px; padding: 14px 15px 30px; background: #f8f7fa; }
.host-reception-card { padding: 15px 14px 13px; border-radius: 17px; background: white; box-shadow: 0 7px 22px rgba(61,45,63,.04); }
.host-reception-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.host-reception-card > header > span { display: flex; align-items: center; gap: 7px; }
.host-reception-card > header svg { width: 17px; height: 17px; color: #ef4e9b; stroke-width: 2; }
.host-reception-card > header strong { color: #262127; font-size: 11px; }
.host-reception-card > header b { color: #f15ba2; font-size: 9px; }
.host-reception-options { display: grid; grid-template-columns: 1.18fr .82fr .82fr; gap: 7px; margin-top: 12px; }
.host-reception-options button { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 4px; border: 1px solid transparent; border-radius: 9px; color: #7f7880; background: #f8f7f9; font-size: 9px; font-weight: 750; }
.host-reception-options button i { width: 5px; height: 5px; border-radius: 50%; background: #b7b1b7; }
.host-reception-options .is-online i { background: #28bf8b; }
.host-reception-options .is-busy i { background: #eea044; }
.host-reception-options .is-active { color: #1c9d73; border-color: #83dec1; background: #edfbf6; box-shadow: 0 4px 12px rgba(34,189,138,.09); }
.host-reception-options .is-busy.is-active { color: #ad6d18; border-color: #f0c078; background: #fff8ec; }
.host-reception-options .is-offline.is-active { color: #676168; border-color: #b9b3ba; background: #f2f0f3; }
.host-reception-stats { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 13px; padding-top: 12px; border-top: 1px solid #f3eff3; }
.host-reception-stats span { min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 0 4px; border-right: 1px solid #f3eff3; }
.host-reception-stats span:last-child { border-right: 0; }
.host-reception-stats b { color: #272228; font: 780 11px/1.1 ui-rounded,"SF Pro Rounded",sans-serif; white-space: nowrap; }
.host-reception-stats b em { margin-left: 2px; color: #8f8991; font-size: 7px; font-style: normal; font-weight: 600; }
.host-reception-stats span:nth-child(3) b { color: #ef4e9b; }
.host-reception-stats small { color: #a19aa1; font-size: 8px; white-space: nowrap; }
.host-invite-campaign { position: relative; width: 100%; min-height: 82px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; overflow: hidden; padding: 12px 13px; border: 1px solid rgba(222,85,155,.14); border-radius: 17px; color: #3b2036; background: linear-gradient(120deg,#fff1f8 0%,#f9ebff 58%,#f1e8ff 100%); box-shadow: 0 8px 24px rgba(130,60,123,.08); text-align: left; }
.host-invite-campaign::after { content: ""; position: absolute; width: 82px; height: 82px; right: -31px; top: -42px; border: 15px solid rgba(255,255,255,.38); border-radius: 50%; pointer-events: none; }
.host-invite-campaign-icon { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(135deg,#ff5a9f,#a85be8); box-shadow: 0 8px 18px rgba(203,74,161,.22); }
.host-invite-campaign-icon svg { width: 23px; height: 23px; stroke-width: 1.9; }
.host-invite-campaign-copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 3px; }
.host-invite-campaign-copy small { color: #c14582; font-size: 8px; font-weight: 800; letter-spacing: .4px; }
.host-invite-campaign-copy strong { font-size: 13px; letter-spacing: -.2px; }
.host-invite-campaign-copy p { overflow: hidden; margin: 0; color: #8c6c86; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.host-invite-campaign > em { position: relative; z-index: 1; padding: 8px 10px; border-radius: 999px; color: white; background: #2e1c31; font-size: 9px; font-style: normal; font-weight: 850; white-space: nowrap; }
.host-center-list { padding: 0 15px; border-radius: 17px; background: white; box-shadow: 0 7px 22px rgba(61,45,63,.04); }
.host-center-list button { width: 100%; min-height: 65px; display: grid; grid-template-columns: 38px minmax(0,1fr) 16px; align-items: center; gap: 11px; padding: 0; border-bottom: 1px solid #f1edf1; background: transparent; text-align: left; }
.host-center-list button:last-child { border-bottom: 0; }
.host-menu-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #f05aa3; background: #fff0f7; }
.host-menu-icon svg { width: 19px; height: 19px; stroke-width: 1.9; }
.host-center-list button > span:nth-child(2) { min-width: 0; display: grid; gap: 5px; }
.host-center-list strong { color: #272228; font-size: 12px; }
.host-center-list small { overflow: hidden; color: #9a939a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.host-menu-arrow { width: 14px; height: 14px; color: #b8b2b8; }
.host-balance-card { min-height: 73px; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 17px; background: white; box-shadow: 0 7px 22px rgba(61,45,63,.04); }
.host-balance-card > span { display: grid; gap: 4px; }
.host-balance-card small { color: #969097; font-size: 9px; }
.host-balance-card strong { color: #252026; font: 800 20px/1 ui-rounded,"SF Pro Rounded",sans-serif; }
.host-balance-card strong em { color: #8e8790; font-size: 8px; font-style: normal; font-weight: 600; }
.host-balance-card button { padding: 9px 15px; border-radius: 999px; color: white; background: linear-gradient(115deg,#f14ca0,#ca67ef); box-shadow: 0 7px 17px rgba(220,73,176,.18); font-size: 10px; font-weight: 850; }
.host-common-shortcuts { min-height: 104px; padding-top: 13px; padding-bottom: 10px; }
.host-common-shortcuts button > span { width: 41px; height: 41px; border-radius: 14px; }
.host-common-shortcuts svg { width: 21px; height: 21px; }
.host-common-menu { padding-top: 4px; padding-bottom: 4px; }
.host-common-menu button { min-height: 50px; }

.invite-page { position: absolute; z-index: 47; inset: 42px 0 0; display: flex; flex-direction: column; overflow: hidden; background: #f8f5fa; animation: profile-editor-in .22s ease both; }
.invite-page-header { flex: 0 0 58px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 0 10px; border-bottom: 1px solid rgba(78,45,75,.07); background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.invite-page-header > button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: transparent; }
.invite-page-header > button:first-child { font: 400 35px/1 sans-serif; }
.invite-page-header > button:last-child { color: var(--berry-strong); font-size: 9px; font-weight: 800; }
.invite-page-header > div { display: grid; justify-items: center; gap: 1px; }
.invite-page-header small { color: #a56c96; font: 800 6px/1 ui-rounded,sans-serif; letter-spacing: 1.3px; }
.invite-page-header h2 { margin: 0; font-size: 16px; letter-spacing: -.4px; }
.invite-page-scroll { min-height: 0; flex: 1; display: grid; align-content: start; gap: 11px; overflow-y: auto; padding: 12px 13px 104px; scrollbar-width: none; }
.invite-page-scroll::-webkit-scrollbar { display: none; }
.invite-hero { position: relative; min-height: 185px; overflow: hidden; padding: 21px 18px; border-radius: 23px; color: white; background: linear-gradient(135deg,#f04792 0%,#c44cc1 50%,#6655dc 100%); box-shadow: 0 16px 34px rgba(158,54,145,.21); isolation: isolate; }
.invite-hero::before { content: ""; position: absolute; z-index: -1; width: 190px; height: 190px; right: -84px; top: -72px; border: 25px solid rgba(255,255,255,.12); border-radius: 50%; }
.invite-hero::after { content: ""; position: absolute; z-index: -1; width: 95px; height: 95px; left: -52px; bottom: -54px; border: 18px solid rgba(255,255,255,.08); border-radius: 50%; }
.invite-hero-copy { max-width: 245px; display: grid; gap: 7px; }
.invite-hero-copy > span { color: rgba(255,255,255,.78); font-size: 8px; font-weight: 800; letter-spacing: .5px; }
.invite-hero-copy h1 { margin: 0; font-size: 24px; line-height: 1.18; letter-spacing: -1px; }
.invite-hero-copy h1 b { color: #fff3ac; font: 900 30px/1 ui-rounded,"SF Pro Rounded",sans-serif; }
.invite-hero-copy p { width: 215px; margin: 0; color: rgba(255,255,255,.72); font-size: 8px; line-height: 1.6; }
.invite-ticket { position: absolute; right: 16px; bottom: 15px; min-width: 132px; min-height: 53px; display: grid; grid-template-columns: 43px 1fr; align-items: center; gap: 9px; padding: 7px 11px 7px 7px; border: 1px solid rgba(255,255,255,.55); border-radius: 16px; background: rgba(255,255,255,.18); box-shadow: 0 9px 22px rgba(70,33,99,.16); backdrop-filter: blur(11px); transform: rotate(-2deg); }
.invite-ticket::before, .invite-ticket::after { content: ""; position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #a34bbb; transform: translateY(-50%); }
.invite-ticket::before { left: -7px; }
.invite-ticket::after { right: -7px; }
.invite-ticket > i { width: 40px; height: 40px; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,.72); border-radius: 13px; color: #fff6ba; font-size: 17px; font-style: normal; font-weight: 950; }
.invite-ticket > span { display: grid; gap: 3px; }
.invite-ticket small { color: rgba(255,255,255,.75); font-size: 7px; }
.invite-ticket strong { font: 900 18px/1 ui-rounded,"SF Pro Rounded",sans-serif; }
.invite-progress-card, .invite-share-card, .invite-record-card, .invite-rule-card { border: 1px solid rgba(69,46,67,.055); border-radius: 19px; background: white; box-shadow: 0 8px 24px rgba(61,39,59,.045); }
.invite-progress-card { padding: 15px 14px 13px; }
.invite-progress-card > header, .invite-record-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invite-progress-card > header > div, .invite-record-card > header > div { display: grid; gap: 4px; }
.invite-progress-card header span, .invite-record-card header span, .invite-rule-card > span { color: #9b9099; font-size: 8px; font-weight: 750; }
.invite-progress-card header strong, .invite-record-card header strong { font-size: 12px; }
.invite-progress-card header > b { padding: 6px 8px; border-radius: 999px; color: #b87016; background: #fff3d8; font-size: 8px; white-space: nowrap; }
.invite-stamp-track { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 14px; }
.invite-stamp-track::before { content: ""; position: absolute; left: 14%; right: 14%; top: 17px; height: 2px; background: #eee7ed; }
.invite-stamp { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; }
.invite-stamp > i { width: 35px; height: 35px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; color: #9f959e; background: #eee9ed; box-shadow: 0 0 0 1px #e7dfe5; font: 850 11px/1 ui-rounded,sans-serif; }
.invite-stamp small { color: #a39aa2; font-size: 7px; }
.invite-stamp strong { color: #827880; font-size: 8px; }
.invite-stamp.is-complete > i { color: white; background: linear-gradient(135deg,#f04792,#a958dd); box-shadow: 0 0 0 1px #e48ac0,0 6px 14px rgba(196,76,170,.18); }
.invite-stamp.is-complete strong { color: var(--berry-strong); }
.invite-progress-card > p { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #f3eef2; color: #9a9098; font-size: 8px; line-height: 1.55; }
.invite-share-card { padding: 13px; }
.invite-code-block { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px dashed #e6c8dc; border-radius: 14px; background: #fff8fc; }
.invite-code-block > span { display: grid; gap: 3px; }
.invite-code-block small { color: #a7849b; font-size: 7px; }
.invite-code-block strong { color: #4e2945; font: 900 17px/1 ui-rounded,"SF Pro Rounded",sans-serif; letter-spacing: 1.4px; }
.invite-code-block button { padding: 7px 10px; border-radius: 999px; color: var(--berry-strong); background: #ffe8f3; font-size: 8px; font-weight: 850; }
.invite-share-primary { width: 100%; min-height: 56px; display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 13px; border-radius: 15px; color: white; background: var(--grape); box-shadow: 0 10px 22px rgba(39,27,43,.16); text-align: left; }
.invite-share-primary svg { width: 22px; height: 22px; }
.invite-share-primary > span { display: grid; gap: 4px; }
.invite-share-primary strong { font-size: 11px; }
.invite-share-primary small { color: rgba(255,255,255,.62); font-size: 7px; }
.invite-copy-link { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 9px; border-radius: 12px; color: #76586d; background: #f7f1f5; font-size: 9px; font-weight: 800; }
.invite-copy-link svg { width: 15px; height: 15px; }
.invite-share-status { min-height: 13px; margin: 8px 3px 0; color: #8a7e87; font-size: 7px; line-height: 1.5; }
.invite-share-status.is-warning { color: #b56f18; }
.invite-record-card { padding: 14px; }
.invite-record-card header button { padding: 6px 8px; border-radius: 999px; color: #8b6d82; background: #f7f1f5; font-size: 8px; font-weight: 750; }
.invite-record-card header button:disabled { opacity: .55; cursor: wait; }
.invite-record-list { display: grid; margin-top: 10px; }
.invite-record-row { min-height: 55px; display: grid; grid-template-columns: 37px minmax(0,1fr) auto; align-items: center; gap: 9px; border-top: 1px solid #f3eef2; }
.invite-record-avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(135deg,#ef6aa4,#875fdf); font-size: 12px; font-weight: 850; }
.invite-record-row > div { min-width: 0; display: grid; gap: 4px; }
.invite-record-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.invite-record-row small { color: #a198a0; font-size: 7px; }
.invite-record-row em { color: #9a8f98; font-size: 7px; font-style: normal; text-align: right; }
.invite-record-row em.is-rewarded { color: #16845f; font-weight: 800; }
.invite-record-empty { display: grid; justify-items: center; gap: 5px; padding: 19px 10px 9px; border-top: 1px solid #f3eef2; text-align: center; }
.invite-record-empty > span { color: #df83b0; font-size: 25px; line-height: 1; }
.invite-record-empty strong { font-size: 10px; }
.invite-record-empty p { margin: 0; color: #a0979f; font-size: 7px; }
.invite-rule-card { scroll-margin-top: 12px; padding: 15px 15px 13px; }
.invite-rule-card ol { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 17px; color: #766b74; font-size: 8px; line-height: 1.6; }
.invite-page-footer { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 11px 15px calc(11px + var(--safe-bottom)); border-top: 1px solid #eee7ed; background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(45,31,44,.07); backdrop-filter: blur(16px); }
.invite-page-footer button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 14px; color: white; background: linear-gradient(105deg,#f0448f,#a451d1); box-shadow: 0 9px 20px rgba(193,66,160,.22); font-size: 11px; font-weight: 850; }
.invite-page-footer svg { width: 18px; height: 18px; }
.registration-invite-note { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; margin: -5px 0 13px; padding: 10px 11px; border: 1px solid #e6d9fb; border-radius: 14px; color: #4d356b; background: linear-gradient(110deg,#faf5ff,#f4efff); }
.registration-invite-note > svg { width: 22px; height: 22px; justify-self: center; color: #8552ce; }
.registration-invite-note > span { display: grid; gap: 3px; }
.registration-invite-note strong { font-size: 9px; }
.registration-invite-note small { color: #8b77a2; font-size: 7px; }

.host-profile-editor { position: absolute; z-index: 45; inset: 42px 0 0; display: flex; flex-direction: column; background: #f7f7f9; animation: profile-editor-in .22s ease both; }
.host-profile-editor-header { flex: 0 0 58px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; padding: 0 10px; border-bottom: 1px solid #f0edf0; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.host-profile-editor-header button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: transparent; font: 400 35px/1 sans-serif; }
.host-profile-editor-header h2 { margin: 0; text-align: center; font-size: 16px; letter-spacing: -.3px; }
.host-profile-editor-scroll { min-height: 0; flex: 1; display: grid; align-content: start; gap: 11px; overflow-y: auto; padding: 12px 13px 102px; scrollbar-width: none; }
.host-profile-editor-scroll::-webkit-scrollbar { display: none; }
.host-editor-avatar-card, .host-editor-task-card { border: 1px solid #f0edf0; border-radius: 18px; background: white; box-shadow: 0 7px 20px rgba(55,38,52,.035); }
.host-editor-avatar-card { min-height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; }
.host-editor-avatar-card > div { display: grid; gap: 5px; }
.host-editor-avatar-card strong, .host-editor-task-card > header strong { font-size: 13px; }
.host-editor-avatar-card small, .host-editor-task-card > header small { color: #999299; font-size: 8px; }
.host-editor-avatar-card button { position: relative; width: 58px; height: 58px; padding: 0; border-radius: 18px; background: #f1edf1; }
.host-editor-avatar-card img { width: 58px; height: 58px; object-fit: cover; border-radius: 18px; }
.host-editor-avatar-card button svg { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; padding: 5px; border: 2px solid white; border-radius: 50%; color: #4e454d; background: white; box-shadow: 0 4px 10px rgba(38,30,38,.14); }
.host-editor-task-card { position: relative; padding: 14px; }
.host-editor-task-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.host-editor-task-card > header > div { display: grid; gap: 5px; }
.host-editor-task-card > header > span { padding: 5px 8px; border-radius: 999px; color: #9a640c; background: #fff0b6; font-size: 8px; font-weight: 750; white-space: nowrap; }
.host-editor-task-card > header > span b { font-size: 10px; }
.host-editor-task-card.is-claimed > header > span { color: #12805b; background: #e4f7ef; }
.host-editor-task-card.is-claimed > header > span::after { content: " · 已领取"; }
.host-album-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.host-album-item { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 12px; color: #968f96; background: linear-gradient(145deg,#ece9ed,#f7f5f7); font-size: 8px; }
.host-album-item img { width: 100%; height: 100%; object-fit: cover; }
.host-album-item i { position: absolute; right: 5px; top: 5px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--mint); font-size: 8px; font-style: normal; }
.host-media-add { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 9px; border: 1px dashed #e4dce2; border-radius: 11px; color: #7b7078; background: #faf8fa; font-size: 9px; font-weight: 750; }
.host-media-add i { font-size: 17px; font-style: normal; font-weight: 400; line-height: 1; }
.host-video-preview { width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 13px; background: linear-gradient(130deg,#f2eef4,#faf8fb); text-align: left; }
.host-video-preview > span { width: 49px; height: 62px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #aea6ae; background: #e2dee4; font-size: 28px; font-weight: 300; }
.host-video-preview > span.is-ready { color: white; background: linear-gradient(150deg,#6f55e7,#f0448f); }
.host-video-preview > div { min-width: 0; display: grid; gap: 6px; }
.host-video-preview strong { font-size: 11px; }
.host-video-preview small { color: #918991; font-size: 8px; }
.host-basic-profile-card { padding-bottom: 3px; }
.host-basic-profile-card label, .host-readonly-field, .host-gender-field { min-height: 50px; display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; gap: 10px; border-top: 1px solid #f1edf1; }
.host-basic-profile-card label > span, .host-readonly-field > span, .host-gender-field > span { color: #3a343a; font-size: 11px; font-weight: 750; }
.host-basic-profile-card input { min-width: 0; width: 100%; padding: 10px 0; border: 0; outline: 0; color: #5f575f; background: transparent; font: inherit; font-size: 11px; text-align: right; }
.host-basic-profile-card input::placeholder { color: #bbb5bb; }
.host-readonly-field strong { color: #9b949b; font-size: 11px; text-align: right; }
.host-gender-field > div { display: flex; justify-content: flex-end; gap: 7px; }
.host-gender-field button { min-width: 56px; padding: 8px 10px; border: 1px solid #ebe3e9; border-radius: 999px; color: #8f858d; background: #faf8fa; font-size: 9px; font-weight: 800; }
.host-gender-field button.is-selected { border-color: #ed4b93; color: #d8327d; background: #fff0f7; box-shadow: inset 0 0 0 1px rgba(237,75,147,.08); }
.host-showcase-card > header { align-items: center; }
.host-showcase-card > header > .host-tag-count { color: #d43f83; background: #fff0f7; }
.host-tag-fieldset { margin: 0; padding: 0 0 14px; border: 0; }
.host-tag-fieldset legend { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #3a343a; font-size: 11px; font-weight: 800; }
.host-tag-fieldset legend small { color: #aaa2a9; font-size: 8px; font-weight: 500; }
.host-tag-picker { display: flex; flex-wrap: wrap; gap: 8px 7px; }
.host-tag-picker button { min-height: 31px; padding: 0 12px; border: 1px solid #ece5eb; border-radius: 999px; color: #665d64; background: #faf8fa; font-size: 9px; font-weight: 700; }
.host-tag-picker button.is-selected { border-color: #f0448f; color: #d92e78; background: #fff0f7; box-shadow: inset 0 0 0 1px rgba(240,68,143,.08); }
.host-tag-picker button:focus-visible, .host-bio-field textarea:focus-visible { outline: 2px solid rgba(240,68,143,.35); outline-offset: 2px; }
.host-bio-field { position: relative; display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid #f1edf1; }
.host-bio-field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.host-bio-field > span strong { color: #3a343a; font-size: 11px; }
.host-bio-field > span small { color: #aaa2a9; font-size: 8px; }
.host-bio-field textarea { width: 100%; min-height: 88px; resize: none; padding: 11px 12px 23px; border: 1px solid #ece6ec; border-radius: 13px; outline: 0; color: #4e464d; background: #faf8fa; font: inherit; font-size: 10px; line-height: 1.6; }
.host-bio-field textarea::placeholder { color: #b8b1b7; }
.host-bio-field > em { position: absolute; right: 10px; bottom: 8px; color: #aaa1a9; font-size: 8px; font-style: normal; }
.host-profile-editor-footer { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; min-height: 82px; display: grid; grid-template-columns: minmax(0,1fr) 132px; align-items: center; gap: 12px; padding: 11px 15px calc(11px + var(--safe-bottom)); border-top: 1px solid #eee8ed; background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(45,31,44,.07); backdrop-filter: blur(16px); }
.host-profile-editor-footer > div { min-width: 0; display: grid; gap: 4px; }
.host-profile-editor-footer strong { color: #cb7d14; font-size: 12px; }
.host-profile-editor-footer small { overflow: hidden; color: #9b939a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.host-profile-editor-footer small.is-error { color: #d8235d; font-size: 9px; font-weight: 750; white-space: normal; }
.host-profile-editor-footer button { padding: 12px 13px; border-radius: 13px; color: white; background: linear-gradient(120deg,#e99a2b,#f0448f); box-shadow: 0 8px 20px rgba(232,81,133,.2); font-size: 11px; font-weight: 850; }
.host-profile-editor-footer button:disabled { opacity: .58; cursor: wait; }
.host-profile-editor .is-validation-error { outline: 2px solid rgba(225,35,91,.62); outline-offset: 3px; border-radius: 10px; animation: profile-validation-shake .24s ease both; }
@keyframes profile-validation-shake { 0%,100% { transform: translateX(0); } 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }

.feed-composer { position: absolute; z-index: 46; inset: 42px 0 0; display: flex; flex-direction: column; overflow: hidden; background: #f8f7f9; animation: profile-editor-in .22s ease both; }
.feed-composer-header { flex: 0 0 58px; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 0 11px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(16px); }
.feed-composer-header h2 { margin: 0; text-align: center; font-size: 16px; }
.feed-composer-header button { padding: 9px 6px; border-radius: 10px; color: #766c75; background: transparent; font-size: 11px; font-weight: 750; }
.feed-composer-header button:last-child { color: white; background: var(--berry); }
.feed-composer-header button:disabled { color: #b7aeb6; background: #eee9ed; cursor: default; }
.feed-composer-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 14px 14px calc(28px + var(--safe-bottom)); scrollbar-width: none; }
.feed-composer-scroll::-webkit-scrollbar { display: none; }
.feed-composer-identity { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.feed-composer-identity img { width: 44px; height: 44px; object-fit: cover; border-radius: 15px; background: #f1edf1; }
.feed-composer-identity span { display: grid; gap: 4px; }
.feed-composer-identity strong { font-size: 12px; }
.feed-composer-identity small { color: var(--berry-strong); font-size: 9px; font-weight: 750; }
.feed-composer-copy { display: block; padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 6px 18px rgba(61,42,58,.04); }
.feed-composer-copy textarea { width: 100%; min-height: 154px; padding: 0; resize: none; border: 0; outline: 0; color: var(--grape); background: transparent; font: 500 13px/1.7 inherit; }
.feed-composer-copy textarea::placeholder { color: #aca3ab; }
.feed-composer-copy > span { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-top: 9px; border-top: 1px solid #f4eff3; }
.feed-composer-copy small { color: #a39aa2; font-size: 8px; }
.feed-composer-copy em { flex: 0 0 auto; color: #9c929b; font-size: 8px; font-style: normal; }
.feed-composer-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.feed-composer-preview.has-video { grid-template-columns: 1fr; }
.feed-composer-preview > span { position: relative; overflow: hidden; border-radius: 13px; background: #171219; }
.feed-composer-preview img, .feed-composer-preview video { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; }
.feed-composer-preview.has-video video { aspect-ratio: 16/10; }
.feed-composer-preview button { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(27,18,28,.78); font: 500 17px/1 sans-serif; }
.feed-composer-media { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.feed-composer-media > button { min-width: 0; display: grid; grid-template-columns: 37px 1fr; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 15px; color: var(--grape); background: white; text-align: left; }
.feed-composer-media svg { width: 22px; height: 22px; color: var(--berry); }
.feed-composer-media span { min-width: 0; display: grid; gap: 3px; }
.feed-composer-media strong { font-size: 10px; }
.feed-composer-media small { color: var(--muted); font-size: 8px; }
.feed-composer-status { min-height: 16px; margin: 10px 2px 0; color: #958b94; font-size: 9px; }
.feed-composer-status.is-error { color: #d13c67; }

@keyframes profile-editor-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }

.bottom-nav { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: calc(72px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(5,1fr); align-items: start; padding: 7px 6px var(--safe-bottom); border-top: 1px solid var(--line); background: rgba(255,255,255,.965); box-shadow: 0 -6px 19px rgba(64,44,62,.035); backdrop-filter: blur(18px); }
.nav-item { height: 57px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #aaa1a9; background: transparent; font-size: 9px; }
.nav-item svg { width: 21px; height: 21px; }
.nav-item.is-active { color: var(--berry-strong); font-weight: 800; }
.nav-icon-wrap { position: relative; display: grid; place-items: center; }
.nav-badge { position: absolute; right: -8px; top: -6px; min-width: 16px; height: 16px; display: grid; place-items: center; border: 2px solid white; border-radius: 999px; color: white; background: var(--berry); font-size: 7px; font-style: normal; }
.nav-call { position: relative; justify-content: flex-end; padding-bottom: 3px; }
.call-gem { position: absolute; top: -23px; width: 58px; height: 58px; display: grid; place-items: center; border: 5px solid white; border-radius: 22px; color: white; background: linear-gradient(145deg,#ff5da2,#df367f); box-shadow: 0 8px 20px rgba(219,45,124,.28); transform: rotate(45deg); }
.call-gem::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; }
.call-gem i { position: absolute; inset: -9px; z-index: -1; border: 1px solid rgba(240,68,143,.16); border-radius: 25px; animation: gem-pulse 2.4s ease-out infinite; }
.call-gem svg { position: relative; z-index: 1; width: 24px; height: 24px; transform: rotate(-45deg); stroke-width: 2; }
.nav-call > span:last-child { margin-top: 37px; }
.nav-call.is-active .call-gem { background: linear-gradient(145deg,#ef3a87,#bd2568); }

.scrim { position: absolute; z-index: 20; inset: 0; background: rgba(30,20,31,.34); backdrop-filter: blur(2px); }
.bottom-sheet { position: absolute; z-index: 21; left: 0; right: 0; bottom: 0; padding: 8px 18px calc(19px + var(--safe-bottom)); border-radius: 25px 25px 0 0; background: white; box-shadow: 0 -24px 60px rgba(37,25,38,.18); animation: sheet-up .25s ease both; }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 14px; border-radius: 99px; background: #ded6dd; }
.bottom-sheet header { display: flex; align-items: flex-end; justify-content: space-between; }
.bottom-sheet header small { color: var(--berry); font-size: 9px; font-weight: 800; }
.bottom-sheet h2 { margin: 4px 0 0; font-size: 19px; }
.bottom-sheet header button { padding: 6px; color: var(--muted); background: transparent; font-size: 10px; }
.bottom-sheet label { display: block; margin: 18px 0 8px; color: var(--grape-2); font-size: 11px; font-weight: 750; }
.filter-options { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-options button { min-width: 66px; padding: 9px 12px; border-radius: 10px; color: #766c75; background: #f6f2f5; font-size: 10px; }
.filter-options button.is-active { color: var(--berry-strong); background: var(--berry-soft); box-shadow: inset 0 0 0 1px #f6b7d2; font-weight: 800; }
.sheet-primary { width: 100%; margin-top: 20px; padding: 13px; border-radius: 13px; color: white; background: var(--grape); font-size: 11px; font-weight: 800; }
.profile-sheet { position: absolute; z-index: 21; inset: 42px 0 0; overflow: hidden; color: white; background: #120a1d; animation: profile-enter .32s cubic-bezier(.2,.72,.22,1) both; }
.profile-sheet-scroll { height: 100%; overflow-y: auto; padding-bottom: calc(92px + var(--safe-bottom)); background: #120a1d; scrollbar-width: none; overscroll-behavior: contain; }
.profile-sheet-scroll::-webkit-scrollbar { display: none; }
.profile-sheet-photo { position: relative; height: clamp(368px,53vh,470px); overflow: hidden; background-position: center 24%; background-size: cover; }
.profile-sheet-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(14,8,23,.18) 0%,transparent 42%,rgba(18,10,29,.48) 72%,#120a1d 100%); }
.profile-sheet-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 86px; background: linear-gradient(180deg,transparent,#120a1d); pointer-events: none; }
.profile-detail-topbar { position: absolute; z-index: 3; left: 13px; right: 13px; top: 13px; display: flex; align-items: center; justify-content: space-between; }
.profile-detail-topbar > div { display: flex; gap: 8px; }
.profile-detail-topbar button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; color: white; background: rgba(20,12,27,.46); box-shadow: inset 0 1px rgba(255,255,255,.1); backdrop-filter: blur(13px); }
.profile-detail-topbar button svg { width: 17px; height: 17px; }
.profile-detail-topbar .profile-back { font: 300 30px/1 "SF Pro Display", sans-serif; padding: 0 2px 3px 0; }
.profile-live-state { position: absolute; z-index: 3; left: 16px; top: 158px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: rgba(255,255,255,.9); background: rgba(20,12,27,.46); backdrop-filter: blur(13px); font-size: 9px; font-weight: 800; }
.profile-live-state i { width: 7px; height: 7px; border-radius: 50%; background: #43d7a2; box-shadow: 0 0 0 4px rgba(67,215,162,.13); }
.profile-live-state.is-busy { border-color: rgba(255,207,129,.34); background: rgba(169,102,19,.86); box-shadow: 0 7px 18px rgba(71,40,8,.2); }
.profile-live-state.is-busy i { background: #ffd287; box-shadow: 0 0 0 4px rgba(255,210,135,.16); }
.profile-live-state.is-offline { border-color: rgba(255,255,255,.18); background: rgba(60,52,64,.88); box-shadow: 0 7px 18px rgba(20,15,23,.25); }
.profile-live-state.is-offline i { background: #c5bdc9; box-shadow: 0 0 0 4px rgba(197,189,201,.12); }
.profile-hero-copy { position: absolute; z-index: 3; left: 19px; right: 19px; bottom: 18px; }
.profile-hero-copy > span { display: inline-flex; align-items: center; margin-bottom: 7px; color: #ff83ba; font-size: 9px; font-weight: 850; letter-spacing: .5px; }
.profile-hero-copy h2 { margin: 0; font-size: 28px; line-height: 1.05; letter-spacing: -1.1px; text-shadow: 0 3px 18px rgba(0,0,0,.26); }
.profile-hero-copy p { margin: 8px 0 0; color: rgba(255,255,255,.64); font-size: 10px; }
.profile-sheet-body { padding: 5px 18px 28px; background: #120a1d; }
.profile-sheet.has-call-notice .profile-sheet-scroll { padding-bottom: calc(145px + var(--safe-bottom)); }
.profile-facts { display: grid; grid-template-columns: repeat(3,1fr); padding: 13px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.profile-facts span { min-width: 0; display: grid; gap: 5px; padding: 0 11px; border-right: 1px solid rgba(255,255,255,.08); }
.profile-facts span:first-child { padding-left: 0; }
.profile-facts span:last-child { padding-right: 0; border-right: 0; }
.profile-facts small, .profile-topic-section > small, .profile-about-section > small { color: rgba(255,255,255,.42); font-size: 8px; }
.profile-facts strong { overflow: hidden; color: #fff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-topic-section, .profile-about-section { margin-top: 19px; }
.profile-topic-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.profile-topic-list span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.045); font-size: 9px; }
.profile-about-section p { margin: 8px 0 0; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.75; }
.profile-billing-promise { margin: 20px 0 0 !important; padding: 10px 12px; border-radius: 11px; color: rgba(255,255,255,.48) !important; background: rgba(255,255,255,.045); font-size: 8px !important; text-align: center; }
.profile-action-dock { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: stretch; gap: 8px; padding: 10px 13px calc(10px + var(--safe-bottom)); border-top: 1px solid rgba(255,255,255,.08); background: rgba(18,10,29,.9); box-shadow: 0 -13px 30px rgba(12,6,20,.38); backdrop-filter: blur(18px); }
.profile-call-notice { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 8px 10px; border: 1px solid rgba(255,115,144,.2); border-radius: 13px; color: #ffdbe5; background: rgba(210,64,101,.13); }
.profile-call-notice > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #ff7899; box-shadow: 0 0 0 5px rgba(255,120,153,.1); }
.profile-call-notice > span { display: grid; gap: 2px; }
.profile-call-notice strong { font-size: 9px; }
.profile-call-notice small { color: rgba(255,235,241,.62); font-size: 7px; }
.profile-sheet.is-busy-profile .profile-call-notice { border-color: rgba(255,194,92,.22); color: #ffe6b7; background: rgba(205,137,31,.14); }
.profile-sheet.is-busy-profile .profile-call-notice > i { background: #ffc666; box-shadow: 0 0 0 5px rgba(255,198,102,.1); }
.profile-sheet.is-busy-profile .profile-call-notice small { color: rgba(255,236,199,.64); }
.profile-message-action { min-height: 55px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; color: rgba(255,255,255,.84); background: rgba(255,255,255,.06); }
.profile-message-action svg { width: 19px; height: 19px; }
.profile-message-action span { font-size: 8px; font-weight: 750; }
.profile-call-actions { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile-call-actions button { min-width: 0; min-height: 55px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 17px; color: white; background: linear-gradient(125deg,#58a9ff,#8268ee); box-shadow: 0 9px 24px rgba(81,125,235,.23); text-align: left; }
.profile-call-actions button:last-child { background: linear-gradient(125deg,#ff4f9e,#e95be2); box-shadow: 0 9px 24px rgba(239,67,151,.26); }
.profile-call-actions button:disabled { color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.08); background: #37303e; box-shadow: none; cursor: not-allowed; opacity: 1; }
.profile-sheet.is-busy-profile .profile-call-actions button:disabled { color: rgba(255,232,192,.7); border-color: rgba(255,194,92,.12); background: #40352f; }
.profile-call-actions svg { flex: 0 0 auto; width: 19px; height: 19px; }
.profile-call-actions span { min-width: 0; display: grid; gap: 2px; }
.profile-call-actions strong { font-size: 10px; }
.profile-call-actions small { overflow: hidden; color: rgba(255,255,255,.72); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.profile-sheet.is-user-profile .profile-action-dock { grid-template-columns: 1fr; }
.profile-sheet.is-user-profile .profile-message-action { display: flex; flex-direction: row; }

.call-confirm-sheet { position: absolute; z-index: 22; left: 0; right: 0; bottom: 0; padding: 8px 18px calc(18px + var(--safe-bottom)); border-radius: 25px 25px 0 0; background: white; box-shadow: 0 -24px 60px rgba(37,25,38,.18); animation: sheet-up .25s ease both; }
.guide-step { color: var(--berry); font-size: 9px; font-weight: 850; letter-spacing: .8px; }
.call-confirm-sheet h2 { margin: 6px 0 5px; font-size: 19px; letter-spacing: -.5px; }
.call-confirm-sheet > p { margin: 0; color: var(--muted); font-size: 10px; }
.call-confirm-person { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 11px; border-radius: 15px; background: var(--mist); }
.call-confirm-person img { width: 46px; height: 46px; object-fit: cover; border-radius: 14px; }
.call-confirm-person div { display: grid; gap: 4px; }
.call-confirm-person strong { font-size: 12px; }
.call-confirm-person small { color: var(--mint); font-size: 9px; font-weight: 750; }
.call-confirm-bill { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.call-confirm-bill span { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.call-confirm-bill small { color: var(--muted); font-size: 8px; }
.call-confirm-bill strong { color: var(--grape); font-size: 11px; }
.call-confirm-bill b { color: var(--berry); font: 850 15px/1 ui-rounded, sans-serif; }
.billing-note { display: block; margin-top: 9px; color: #9a9199; font-size: 8px; text-align: center; }
.call-confirm-actions { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8px; margin-top: 13px; }
.call-confirm-actions button { padding: 12px; border-radius: 13px; background: #f3eef2; font-size: 10px; font-weight: 800; }
.call-confirm-actions button:last-child { color: white; background: var(--berry); }
.call-confirm-actions button:disabled { opacity: .55; cursor: wait; }

.active-call-screen { position: absolute; z-index: 60; inset: 0; overflow: hidden; color: white; background: #1f1521; }
.active-call-backdrop { position: absolute; inset: -18px; background-position: center; background-size: cover; filter: blur(16px) brightness(.34) saturate(.72); transform: scale(1.12); }
.active-call-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(18,11,19,.28),rgba(18,11,19,.1) 40%,rgba(18,11,19,.76)); pointer-events: none; }
.active-call-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: calc(24px + var(--safe-top)) 20px 0; }
.active-call-header span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); font-size: 8px; font-weight: 800; }
.active-call-header i { width: 6px; height: 6px; border-radius: 50%; background: #54d6a8; box-shadow: 0 0 0 4px rgba(84,214,168,.13); }
.active-call-header small { color: rgba(255,255,255,.62); font-size: 8px; }
.active-call-person { position: relative; z-index: 2; height: calc(100% - 185px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 28px; }
.active-call-person img { width: 112px; height: 112px; object-fit: cover; border: 3px solid rgba(255,255,255,.85); border-radius: 36px; box-shadow: 0 18px 48px rgba(0,0,0,.32); }
.active-call-person h2 { margin: 18px 0 5px; font-size: 26px; letter-spacing: -1px; }
.active-call-person p { margin: 0; color: rgba(255,255,255,.68); font-size: 9px; }
.active-call-person > strong { margin-top: 17px; font: 800 22px/1 ui-rounded,sans-serif; letter-spacing: 1px; }
.active-call-person > small { margin-top: 7px; color: rgba(255,255,255,.64); font-size: 9px; }
.active-call-screen.is-video .active-call-person img { opacity: 0; }
.active-call-screen.is-video .active-call-person h2 { margin-top: -78px; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
#local-video { position: absolute; z-index: 3; right: 15px; top: calc(61px + var(--safe-top)); width: 92px; height: 128px; object-fit: cover; border: 2px solid rgba(255,255,255,.76); border-radius: 18px; background: #312733; box-shadow: 0 15px 36px rgba(0,0,0,.3); transform: scaleX(-1); }
.active-call-controls { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(29px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(3,68px); justify-content: center; gap: 25px; }
.active-call-screen:not(.is-video) .active-call-controls { grid-template-columns: repeat(2,68px); }
.active-call-controls button { display: grid; justify-items: center; gap: 8px; color: rgba(255,255,255,.78); background: transparent; }
.active-call-controls button > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.active-call-controls svg { width: 22px; height: 22px; }
.active-call-controls small { font-size: 8px; }
.active-call-controls .end-call > span { border-color: transparent; background: #f04468; box-shadow: 0 10px 28px rgba(240,68,104,.32); transform: rotate(135deg); }
.active-call-controls button.is-off > span { color: #a69ca5; background: rgba(31,22,32,.78); }

.call-rating-screen { position: absolute; z-index: 61; inset: 0; display: flex; flex-direction: column; overflow: hidden; color: white; background: #0d0317; }
.call-rating-backdrop { display: none; }
.call-rating-screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 12%,rgba(191,44,224,.25),transparent 20%),radial-gradient(circle at 55% 98%,rgba(239,57,152,.07),transparent 26%),linear-gradient(180deg,#10031d 0%,#0d0317 54%,#0a0212 100%); pointer-events: none; }
.call-rating-header { position: relative; z-index: 3; flex: 0 0 calc(58px + var(--safe-top)); padding: 0; }
.call-rating-header > button { position: absolute; left: 17px; top: calc(13px + var(--safe-top)); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: white; background: rgba(255,255,255,.07); font-size: 23px; font-weight: 300; line-height: 1; }
.call-rating-header > #call-rating-report { left: auto; right: 17px; width: auto; grid-auto-flow: column; gap: 5px; padding: 0 11px; border-color: rgba(255,139,183,.22); border-radius: 999px; color: rgba(255,218,232,.72); background: rgba(255,91,153,.07); font-size: 9px; font-weight: 760; }
.call-rating-header > #call-rating-report svg { width: 14px; height: 14px; }
.call-rating-header > #call-rating-report.is-submitted { color: rgba(255,255,255,.48); border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.045); }
.call-rating-header > span,
.call-rating-header > small { display: none; }
.call-rating-scroll { position: relative; z-index: 2; flex: 1; min-height: 0; overflow-y: auto; padding: 9px 22px 118px; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.call-rating-scroll::-webkit-scrollbar { display: none; }
.call-rating-person { display: flex; flex-direction: column; align-items: center; padding: 0 0 17px; text-align: center; }
.call-rating-person > img { width: 78px; height: 78px; object-fit: cover; border: 3px solid #cf4be7; border-radius: 50%; box-shadow: 0 0 0 7px rgba(204,68,230,.12),0 14px 34px rgba(172,48,199,.22); }
.call-rating-person > div:nth-child(2) { min-width: 0; display: grid; justify-items: center; gap: 5px; }
.call-rating-person small { display: none; }
.call-rating-person h2 { overflow: hidden; max-width: 250px; margin: 15px 0 0; font-size: 24px; letter-spacing: -.8px; text-overflow: ellipsis; white-space: nowrap; }
.call-rating-person p { overflow: hidden; max-width: 290px; margin: 0; color: rgba(255,255,255,.56); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.call-rating-relationship { display: flex; justify-content: center; gap: 10px; margin-top: 13px; }
.call-rating-relationship button { width: 105px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.065); font-size: 9px; font-weight: 750; }
.call-rating-relationship button svg { width: 18px; height: 18px; }
.call-rating-relationship button.is-active { color: #ff72ae; border-color: rgba(255,114,174,.42); background: rgba(240,68,143,.13); }
.call-rating-metrics { display: grid; grid-template-columns: repeat(3,1fr); padding: 18px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.065); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.call-rating-metrics span { display: grid; justify-items: center; gap: 7px; padding: 0 7px; border-right: 1px solid rgba(255,255,255,.11); }
.call-rating-metrics span:last-child { border-right: 0; }
.call-rating-metrics small { order: 2; color: rgba(255,255,255,.48); font-size: 8px; }
.call-rating-metrics strong { order: 1; font: 850 16px/1 ui-rounded,sans-serif; }
.call-rating-card { margin-top: 14px; padding: 20px 16px 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.035); text-align: center; }
.call-rating-kicker { color: rgba(255,255,255,.48); font: 800 8px/1 ui-rounded,sans-serif; letter-spacing: 1.2px; }
.call-rating-title { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 7px; }
.call-rating-title h3 { margin: 0; font-size: 15px; letter-spacing: -.35px; }
.call-rating-title strong { color: #ffc24b; font-size: 11px; }
.call-rating-stars { display: flex; justify-content: center; gap: 7px; margin-top: 15px; }
.call-rating-stars button { width: 47px; height: 47px; padding: 0; color: rgba(255,255,255,.21); background: transparent; font: 900 30px/1 ui-rounded,sans-serif; transition: color .16s ease,transform .16s ease; }
.call-rating-stars button.is-active { color: #ffc24b; background: transparent; text-shadow: 0 5px 15px rgba(255,183,42,.24); transform: translateY(-1px); }
.call-rating-divider,
.call-rating-tag-head { display: none; }
.call-rating-tags { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 14px; }
.call-rating-tags button { min-width: 0; padding: 9px 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.035); font-size: 8px; }
.call-rating-tags button.is-active { color: #ff8cbd; border-color: rgba(255,112,171,.42); background: rgba(240,68,143,.14); }
.call-rating-status { min-height: 10px; margin: 0; padding-top: 8px; color: #ffb2cf !important; font-size: 7px; text-align: center; }
.call-rating-screen.is-submitted .call-rating-stars button,
.call-rating-screen.is-submitted .call-rating-tags button { cursor: default; }
.call-rating-actions { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 13px 22px calc(18px + var(--safe-bottom)); border-top: 1px solid rgba(255,255,255,.07); background: rgba(10,2,18,.96); }
.call-rating-actions button { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.065); font-size: 10px; font-weight: 850; }
.call-rating-actions button:last-child { color: white; border-color: transparent; background: linear-gradient(90deg,#f0448f,#ca52df); box-shadow: 0 12px 28px rgba(240,68,143,.25); }
.call-rating-actions svg { width: 17px; height: 17px; }
.call-rating-actions button:disabled { opacity: .48; cursor: wait; }
.call-report-scrim { position: absolute; z-index: 5; inset: 0; background: rgba(7,2,12,.66); backdrop-filter: blur(5px); animation: fade-in .18s ease both; }
.call-report-sheet { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; max-height: calc(100% - 68px - var(--safe-top)); overflow-y: auto; padding: 8px 18px calc(18px + var(--safe-bottom)); border-radius: 25px 25px 0 0; color: var(--grape); background: #fff; box-shadow: 0 -28px 70px rgba(5,0,11,.45); scrollbar-width: none; animation: sheet-up .22s ease both; }
.call-report-sheet::-webkit-scrollbar { display: none; }
.call-report-sheet > .sheet-handle { width: 36px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: #e8e0e7; }
.call-report-sheet > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.call-report-sheet > header > div { display: grid; gap: 5px; }
.call-report-sheet > header span { color: var(--berry); font: 800 8px/1 ui-rounded,sans-serif; letter-spacing: 1.1px; }
.call-report-sheet h2 { margin: 0; font-size: 19px; letter-spacing: -.5px; }
.call-report-sheet > header > button { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #5f5261; background: #f6f2f6; font-size: 22px; line-height: 1; }
.call-report-intro { margin: 10px 0 0; color: #887c88; font-size: 9px; line-height: 1.65; }
.call-report-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.call-report-reasons button { min-height: 40px; padding: 9px 8px; border: 1px solid #ece4eb; border-radius: 13px; color: #625562; background: #fbf9fb; font-size: 9px; font-weight: 720; }
.call-report-reasons button.is-active { color: var(--berry-strong); border-color: rgba(240,68,143,.42); background: var(--berry-soft); box-shadow: 0 0 0 2px rgba(240,68,143,.07); }
.call-report-reasons button:disabled { cursor: default; opacity: .62; }
.call-report-details { display: grid; gap: 7px; margin-top: 14px; }
.call-report-details > span { color: var(--grape); font-size: 9px; font-weight: 780; }
.call-report-details small { color: #aaa0aa; font-size: 8px; font-weight: 500; }
.call-report-details textarea { width: 100%; resize: none; padding: 11px 12px; border: 1px solid #ece5eb; border-radius: 13px; color: var(--grape); background: #fbf9fb; font: inherit; font-size: 10px; line-height: 1.55; outline: none; }
.call-report-details textarea:focus { border-color: rgba(240,68,143,.46); box-shadow: 0 0 0 3px rgba(240,68,143,.08); }
.call-report-details textarea:disabled { color: #8d838d; background: #f6f3f6; }
.call-report-protection { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 11px 12px; border: 1px solid #f5dfbc; border-radius: 15px; background: linear-gradient(115deg,#fff9eb,#fff4de); }
.call-report-protection > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #c78417; background: rgba(240,166,59,.14); }
.call-report-protection svg { width: 18px; height: 18px; }
.call-report-protection div { display: grid; gap: 3px; }
.call-report-protection small { color: #a36a10; font-size: 7px; font-weight: 760; }
.call-report-protection strong { color: #5c4319; font-size: 11px; }
.call-report-protection b { color: #d07c05; }
.call-report-protection p { margin: 0; color: #9a8053; font-size: 7px; }
.call-report-status { min-height: 13px; margin: 8px 0 0; color: var(--berry-strong); font-size: 8px; text-align: center; }
.call-report-sheet > footer { display: grid; grid-template-columns: 1fr 1.7fr; gap: 9px; margin-top: 3px; }
.call-report-sheet > footer button { min-height: 46px; border-radius: 14px; color: #5f5360; background: #f5f1f5; font-size: 10px; font-weight: 820; }
.call-report-sheet > footer button:last-child { color: white; background: linear-gradient(90deg,#f0448f,#cf50dc); box-shadow: 0 10px 24px rgba(240,68,143,.2); }
.call-report-sheet > footer button:disabled { color: #aba1aa; background: #eee9ee; box-shadow: none; cursor: not-allowed; }

.private-chat-screen { position: absolute; z-index: 52; inset: 0; display: flex; flex-direction: column; color: var(--grape); background: linear-gradient(180deg,#fff 0,#faf7fa 22%,#f4f0f5 100%); }
.private-chat-header { flex: 0 0 auto; display: grid; grid-template-columns: 35px 40px minmax(0,1fr) 35px; align-items: center; gap: 8px; padding: calc(12px + var(--safe-top)) 14px 11px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); }
.private-chat-header > button { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: var(--grape); background: #f7f3f6; font-size: 26px; line-height: 1; }
.private-chat-header > button:last-child { font-size: 12px; }
.private-chat-header > button svg { width: 18px; height: 18px; }
.private-chat-header img { width: 40px; height: 40px; object-fit: cover; border-radius: 13px; }
.private-chat-header div { min-width: 0; display: grid; gap: 3px; }
.private-chat-header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.private-chat-header small { display: inline-flex; align-items: center; gap: 5px; color: var(--mint); font-size: 8px; }
.private-chat-header small i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.private-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px; scrollbar-width: none; }
.private-chat-scroll::-webkit-scrollbar { display: none; }
.private-chat-time { display: block; margin-bottom: 15px; color: #aaa1a8; font-size: 8px; text-align: center; }
.private-chat-call-event { width: min(270px,82%); display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 10px; margin: 0 auto; padding: 12px; border: 1px solid rgba(240,68,143,.14); border-radius: 17px; background: white; box-shadow: 0 10px 28px rgba(64,42,62,.08); }
.private-chat-call-event > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(135deg,#f0448f,#d24bd2); }
.private-chat-call-event svg { width: 19px; height: 19px; }
.private-chat-call-event div { display: grid; gap: 4px; }
.private-chat-call-event strong { font-size: 10px; }
.private-chat-call-event small { color: #9c929a; font-size: 8px; }
.private-chat-review-event { width: max-content; max-width: 80%; display: flex; align-items: center; gap: 6px; margin: 12px auto 0; padding: 7px 10px; border-radius: 999px; color: #a66c15; background: #fff4dc; }
.private-chat-review-event span { color: #f2b238; }
.private-chat-review-event p { margin: 0; font-size: 8px; }
.private-chat-hint { margin: 19px 0 0; color: #aaa1a8; font-size: 8px; text-align: center; }
.private-chat-bubble { max-width: 76%; margin: 11px 0 0 auto; padding: 10px 12px; border-radius: 15px 15px 4px 15px; color: white; background: linear-gradient(135deg,#ef4b91,#d356d4); font-size: 10px; line-height: 1.5; }
.private-chat-composer { flex: 0 0 auto; display: grid; grid-template-columns: 34px minmax(0,1fr) 49px; align-items: center; gap: 7px; padding: 10px 13px calc(14px + var(--safe-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); }
.private-chat-composer button { height: 36px; border-radius: 11px; color: #8f858d; background: #f2eef1; font-size: 20px; }
.private-chat-composer button:last-child { color: white; background: var(--berry); font-size: 9px; font-weight: 850; }
.private-chat-composer input { min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: var(--grape); background: #f8f5f7; font: 500 10px/1 inherit; }
.private-chat-composer input:focus { border-color: #ef9fc3; background: white; box-shadow: 0 0 0 3px rgba(240,68,143,.08); }

.newcomer-welcome { position: absolute; z-index: 72; inset: 0; display: grid; place-items: center; padding: calc(54px + var(--safe-top)) 17px calc(26px + var(--safe-bottom)); background: rgba(25,13,27,.56); backdrop-filter: blur(8px); animation: fade-in .2s ease both; }
.newcomer-welcome-card { position: relative; width: 100%; max-height: 100%; overflow-y: auto; padding: 22px 18px 17px; border: 1px solid rgba(255,255,255,.7); border-radius: 27px; color: var(--grape); background: linear-gradient(165deg,#fff 0,#fff9fc 52%,#f8effb 100%); box-shadow: 0 30px 80px rgba(34,16,36,.34); scrollbar-width: none; animation: welcome-card-in .32s cubic-bezier(.2,.8,.2,1) both; }
.newcomer-welcome-card::-webkit-scrollbar { display: none; }
.newcomer-welcome-close { position: absolute; z-index: 2; right: 13px; top: 13px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #756775; background: rgba(245,238,244,.9); font-size: 22px; line-height: 1; }
.newcomer-welcome-hero { display: grid; justify-items: center; text-align: center; }
.newcomer-welcome-kicker { color: var(--berry-strong); font: 850 8px/1.2 ui-rounded,sans-serif; letter-spacing: 1.35px; }
.newcomer-gift-mark { position: relative; width: 65px; height: 65px; display: grid; place-items: center; margin: 13px 0 7px; border-radius: 21px; color: white; background: linear-gradient(145deg,#ff6aa7,#b256dd); box-shadow: 0 13px 28px rgba(213,54,135,.25), inset 0 1px rgba(255,255,255,.48); transform: rotate(-3deg); }
.newcomer-gift-mark::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(255,255,255,.43); border-radius: 15px; }
.newcomer-gift-mark svg { width: 30px; height: 30px; }
.newcomer-gift-mark i { position: absolute; right: -20px; bottom: 2px; padding: 5px 8px; border: 2px solid white; border-radius: 999px; color: #8d5510; background: #ffe9a8; box-shadow: 0 6px 13px rgba(111,68,10,.15); font-size: 8px; font-style: normal; font-weight: 900; transform: rotate(5deg); }
.newcomer-welcome-hero h2 { margin: 2px 0 3px; font-size: 19px; letter-spacing: -.6px; }
.newcomer-welcome-hero h2 b { color: var(--berry); font: 950 38px/1 ui-rounded,sans-serif; letter-spacing: -2px; }
.newcomer-welcome-hero p { margin: 0; color: #887b86; font-size: 9px; }
.newcomer-account-pass { position: relative; margin-top: 17px; padding: 15px; overflow: hidden; border: 1px solid rgba(132,82,136,.13); border-radius: 20px; background: linear-gradient(135deg,#2f1c35 0,#533253 58%,#713b67 100%); box-shadow: 0 12px 27px rgba(63,34,66,.16); }
.newcomer-account-pass::after { content: "TH"; position: absolute; right: -10px; top: -24px; color: rgba(255,255,255,.055); font: 950 84px/1 ui-rounded,sans-serif; letter-spacing: -8px; transform: rotate(-8deg); }
.newcomer-pass-label { position: relative; z-index: 1; color: rgba(255,255,255,.56); font-size: 8px; font-weight: 800; letter-spacing: .7px; }
.newcomer-pass-person { position: relative; z-index: 1; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 11px; margin-top: 10px; }
.newcomer-pass-person img { width: 52px; height: 52px; object-fit: cover; border: 2px solid rgba(255,255,255,.88); border-radius: 17px; background: #eee6ef; }
.newcomer-pass-person > span { min-width: 0; display: grid; gap: 2px; color: white; }
.newcomer-pass-person strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.newcomer-pass-person small { margin-top: 3px; color: rgba(255,255,255,.5); font-size: 7px; }
.newcomer-pass-person b { font: 850 11px/1.2 ui-rounded,sans-serif; letter-spacing: .7px; }
.newcomer-pass-person em { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; border-radius: 999px; color: #e8fff6; background: rgba(28,190,134,.19); font-size: 7px; font-style: normal; font-weight: 850; }
.newcomer-pass-person em svg { width: 10px; height: 10px; }
.newcomer-account-pass > footer { position: relative; z-index: 1; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; margin: 13px -3px -3px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.07); }
.newcomer-account-pass > footer > svg { width: 18px; height: 18px; color: #ffcae4; }
.newcomer-account-pass > footer span { display: grid; gap: 2px; color: white; }
.newcomer-account-pass > footer strong { font-size: 8px; }
.newcomer-account-pass > footer small { color: rgba(255,255,255,.55); font-size: 7px; line-height: 1.45; }
.newcomer-security-note { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px; margin-top: 11px; padding: 10px 11px; border: 1px solid rgba(203,142,35,.17); border-radius: 13px; background: #fff8e8; }
.newcomer-security-note strong { padding: 3px 5px; border-radius: 6px; color: #9f6713; background: #ffe9b7; font-size: 7px; white-space: nowrap; }
.newcomer-security-note p { margin: 0; color: #806d61; font-size: 7px; line-height: 1.6; }
.newcomer-welcome-status { min-height: 15px; margin: 4px 2px 0; color: #b23b69; font-size: 8px; text-align: center; }
.newcomer-welcome-actions { display: grid; grid-template-columns: .92fr 1.35fr; gap: 8px; }
.newcomer-welcome-actions button { min-height: 43px; border: 1px solid rgba(82,53,82,.1); border-radius: 13px; color: #594657; background: #f2ebf1; font-size: 10px; font-weight: 850; }
.newcomer-welcome-actions button:first-child { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.newcomer-welcome-actions button:first-child svg { width: 15px; height: 15px; }
.newcomer-welcome-actions button:last-child { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; color: white; background: linear-gradient(105deg,#ef3e8d,#b64cda); box-shadow: 0 10px 22px rgba(208,54,138,.22); }
.newcomer-welcome-actions button:last-child svg { width: 15px; height: 15px; }
.newcomer-welcome-actions button:disabled, .newcomer-welcome-close:disabled { opacity: .56; cursor: wait; }
@keyframes welcome-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.guest-welcome { position: absolute; z-index: 15; left: 12px; right: 12px; bottom: calc(83px + var(--safe-bottom)); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 11px 10px 12px; border: 1px solid rgba(240,68,143,.2); border-radius: 18px; color: var(--grape); background: linear-gradient(105deg,rgba(255,255,255,.98),rgba(255,244,249,.98)); box-shadow: 0 13px 35px rgba(45,30,44,.16); backdrop-filter: blur(16px); animation: coach-in .3s ease both; }
.guest-offer-close { position: absolute; left: -8px; top: -8px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(240,68,143,.18); border-radius: 50%; color: #a1959e; background: rgba(255,255,255,.98); box-shadow: 0 5px 14px rgba(51,31,49,.14); font-size: 15px; line-height: 1; }
.guest-offer-close:hover { color: var(--grape); background: white; }
.guest-offer-copy { min-width: 0; display: grid; gap: 2px; }
.guest-offer-copy > span { color: var(--berry); font-size: 8px; font-weight: 850; letter-spacing: .7px; }
.guest-offer-copy > strong { font-size: 11px; }
.guest-offer-copy > strong b { color: var(--berry-strong); font: 900 12px/1 ui-rounded,"SF Pro Rounded",sans-serif; }
.guest-offer-copy > small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.guest-offer-actions { display: grid; }
.guest-offer-actions button { min-width: 96px; padding: 12px 13px; border-radius: 12px; font-size: 9px; font-weight: 850; }
.guest-offer-actions button:first-child { color: white; background: var(--grape); box-shadow: 0 7px 16px rgba(39,27,43,.17); }
.interaction-coach { position: absolute; z-index: 16; left: 12px; right: 12px; bottom: calc(83px + var(--safe-bottom)); display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; color: white; background: rgba(39,27,43,.94); box-shadow: 0 12px 30px rgba(39,27,43,.26); backdrop-filter: blur(14px); animation: coach-in .3s ease both; }
.interaction-coach > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--berry); font: 850 12px/1 ui-rounded, sans-serif; }
.interaction-coach div { min-width: 0; display: grid; gap: 2px; }
.interaction-coach strong { font-size: 10px; }
.interaction-coach small { overflow: hidden; color: rgba(255,255,255,.68); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.interaction-coach button { padding: 8px 9px; border-radius: 9px; color: var(--grape); background: white; font-size: 8px; font-weight: 850; }

.host-greet-overlay { position: absolute; inset: 0; z-index: 42; display: grid; place-items: center; padding: 16px; background: rgba(31,21,32,.48); backdrop-filter: blur(5px); animation: host-greet-fade .22s ease both; }
.host-greet-modal { position: relative; width: 100%; max-height: calc(100% - 16px); overflow-y: auto; padding: 25px 17px 16px; border: 1px solid rgba(255,255,255,.62); border-radius: 28px; background: linear-gradient(158deg,#fffaff,#f5dbff 56%,#ffdced); box-shadow: 0 24px 62px rgba(51,25,53,.32), inset 0 1px rgba(255,255,255,.8); scrollbar-width: none; }
.host-greet-modal::-webkit-scrollbar { display: none; }
.host-greet-modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 88px; border-radius: inherit; background: radial-gradient(circle at 22% 10%,rgba(255,255,255,.9),transparent 36%),radial-gradient(circle at 77% 16%,rgba(240,68,143,.18),transparent 38%); pointer-events: none; }
.host-greet-close { position: absolute; z-index: 2; right: 12px; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #7b6579; background: rgba(255,255,255,.62); font-size: 21px; line-height: 1; }
.host-greet-signature { position: absolute; right: 52px; top: 16px; display: flex; gap: 2px; color: rgba(240,68,143,.25); transform: rotate(-8deg); }
.host-greet-signature i { font: 800 18px/1 ui-rounded,sans-serif; font-style: normal; }
.host-greet-signature i:nth-child(2) { margin-top: -8px; color: rgba(240,68,143,.43); font-size: 25px; }
.host-greet-kicker { position: relative; color: var(--berry-strong); font-size: 8px; font-weight: 900; letter-spacing: 1.1px; }
.host-greet-modal h2 { position: relative; margin: 5px 0 3px; font-size: 22px; letter-spacing: -.9px; }
.host-greet-modal > p { position: relative; margin: 0; color: #826f80; font-size: 9px; }
.host-greet-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px 7px; margin: 17px 0 15px; }
.host-greet-person { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 0; color: var(--grape); background: transparent; }
.host-greet-person > span { position: relative; width: 100%; aspect-ratio: .92; overflow: hidden; border: 2px solid transparent; border-radius: 14px; background: #eadde9; transition: border-color .18s ease,transform .18s ease; }
.host-greet-person img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.host-greet-person b { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 4px 5px; color: white; background: linear-gradient(transparent,rgba(22,15,23,.76)); font-size: 7px; font-weight: 800; text-align: center; }
.host-greet-person i { position: absolute; right: 5px; top: 5px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: #8f7a8d; background: rgba(255,255,255,.88); box-shadow: 0 3px 8px rgba(41,27,41,.14); font-size: 10px; font-style: normal; font-weight: 900; }
.host-greet-person.is-selected > span { border-color: var(--berry); transform: translateY(-1px); }
.host-greet-person.is-selected i { color: white; background: var(--berry); }
.host-greet-person strong { max-width: 100%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.host-greet-person small { max-width: 100%; overflow: hidden; color: #8c7989; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.host-greet-actions { display: grid; grid-template-columns: 46px 1fr; gap: 8px; }
.host-greet-actions button { min-height: 47px; border-radius: 15px; font-weight: 900; }
.host-greet-actions button:first-child { color: #8c7589; background: rgba(255,255,255,.7); font-size: 24px; }
.host-greet-actions button:last-child { color: white; background: linear-gradient(90deg,#7738f3,#f02ca3); box-shadow: 0 12px 24px rgba(199,49,164,.24); font-size: 11px; }
.host-greet-actions button:disabled { opacity: .5; cursor: default; }
.host-greet-note { display: block; margin-top: 9px; color: #9a8797; font-size: 7px; text-align: center; }

.onboarding-flow { position: absolute; z-index: 23; left: 8px; right: 8px; bottom: 0; height: min(690px, calc(100% - 58px)); overflow: hidden; border-radius: 28px 28px 0 0; background: white; box-shadow: 0 -25px 65px rgba(37,25,38,.24); animation: sheet-up .25s ease both; }
.onboarding-step { position: absolute; inset: 0; display: none; overflow-y: auto; padding: 22px 22px calc(23px + var(--safe-bottom)); background: white; scrollbar-width: none; }
.onboarding-step::-webkit-scrollbar { display: none; }
.onboarding-step.is-active { display: flex; flex-direction: column; animation: onboarding-in .3s ease both; }
.onboarding-brand { display: flex; align-items: center; gap: 8px; }
.onboarding-brand span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--berry); box-shadow: 0 7px 16px rgba(240,68,143,.23); font-size: 17px; font-weight: 950; }
.onboarding-brand strong { font-size: 18px; letter-spacing: -1px; }
.coin-hero { position: relative; width: 178px; height: 178px; display: grid; place-content: center; justify-items: center; align-self: center; margin: 30px 0 24px; border-radius: 50%; color: white; background: linear-gradient(145deg,#ff6cab,#db337d); box-shadow: 0 24px 45px rgba(211,50,120,.25),inset 0 1px rgba(255,255,255,.45); isolation: isolate; }
.coin-hero::before { content: ""; position: absolute; inset: 12px; z-index: -1; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.coin-hero::after { content: "甜呼"; position: absolute; bottom: 29px; color: rgba(255,255,255,.64); font-size: 9px; font-weight: 800; letter-spacing: 2px; }
.coin-hero strong { font: 900 57px/.9 ui-rounded,"SF Pro Rounded",sans-serif; letter-spacing: -4px; }
.coin-hero small { margin-top: 7px; font-size: 12px; font-weight: 850; }
.coin-orbit { position: absolute; inset: -17px; z-index: -2; border: 1px solid rgba(240,68,143,.19); border-radius: 50%; box-shadow: 0 0 0 13px rgba(240,68,143,.035); animation: coin-pulse 2.7s ease-out infinite; }
.onboarding-kicker { color: var(--berry); font-size: 9px; font-weight: 850; letter-spacing: 1.3px; }
.onboarding-step h1 { margin: 7px 0 9px; color: var(--grape); font-size: 30px; line-height: 1.12; letter-spacing: -1.5px; }
.onboarding-step > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.welcome-call-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 17px; }
.welcome-call-types span { display: flex; align-items: center; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--grape-2); background: var(--mist); }
.welcome-call-types svg { width: 18px; height: 18px; color: var(--berry); }
.welcome-call-types strong { font-size: 10px; }
.onboarding-primary { width: 100%; padding: 14px 18px; border-radius: 14px; color: white; background: var(--grape); box-shadow: 0 11px 25px rgba(39,27,43,.18); font-size: 11px; font-weight: 850; }
.onboarding-primary:disabled { opacity: .58; cursor: wait; }
.onboarding-link { align-self: center; margin-top: 12px; padding: 6px; color: var(--muted); background: transparent; font-size: 9px; }
.onboarding-topbar { display: grid; grid-template-columns: 40px 1fr 54px; align-items: center; margin: -4px 0 18px; }
.onboarding-topbar button { width: 34px; height: 34px; border-radius: 50%; background: var(--mist); font-size: 25px; line-height: 1; }
.onboarding-topbar span { text-align: center; font-size: 11px; font-weight: 800; }
.onboarding-topbar small { color: var(--muted); text-align: right; font-size: 9px; }
.guest-register-hero { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: var(--mist); }
.guest-register-avatar { position: relative; width: 58px; height: 58px; flex: 0 0 auto; }
.guest-register-avatar img { width: 58px; height: 58px; object-fit: cover; border: 2px solid white; border-radius: 17px; box-shadow: 0 5px 13px rgba(55,34,53,.12); }
.guest-register-avatar > button { position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 2px solid white; border-radius: 50%; color: white; background: var(--berry); box-shadow: 0 5px 12px rgba(217,47,125,.26); }
.guest-register-avatar > button svg { width: 12px; height: 12px; stroke-width: 2.2; }
.guest-register-copy { min-width: 0; display: grid; gap: 3px; }
.guest-register-copy > span { color: var(--berry); font-size: 8px; font-weight: 850; }
.guest-register-copy h2 { margin: 0; color: var(--grape); font-size: 15px; }
.guest-register-copy p { margin: 0; color: var(--muted); font-size: 8px; }
.guest-register-copy > button { width: max-content; padding: 2px 0; color: var(--berry-strong); background: transparent; font-size: 8px; font-weight: 750; }
.registration-copy { margin: 18px 0 14px; }
.registration-copy p { margin: 0; color: var(--muted); font-size: 10px; }
.register-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.register-benefits span { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; min-height: 50px; padding: 9px; border-radius: 14px; background: #fff7e7; }
.register-benefits span:last-child { background: #edf9f4; }
.register-benefits b { color: #ad7420; font: 900 19px/1 ui-rounded,sans-serif; text-align: center; }
.register-benefits span:last-child b { color: var(--mint); }
.register-benefits small { color: var(--grape-2); font-size: 8px; line-height: 1.4; }
.registration-gender { margin: -2px 0 14px; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: var(--mist); }
.registration-gender > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.registration-gender > header strong { color: var(--grape); font-size: 10px; }
.registration-gender-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.registration-gender-options button { min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border: 1px solid #e9e1e8; border-radius: 12px; background: white; transition: border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.registration-gender-options button svg { width: 23px; height: 23px; stroke-width: 2; }
.registration-gender-options button:first-child svg { color: var(--blue); }
.registration-gender-options button:last-child svg { color: var(--berry); }
.registration-gender-options button strong { color: var(--grape); font-size: 11px; }
.registration-gender-options button.is-selected { border-color: #f4a5c7; background: #fff5f9; box-shadow: 0 0 0 2px rgba(240,68,143,.08); }
.registration-gender-options button:first-child.is-selected { border-color: #9fc9f7; background: #f3f8ff; box-shadow: 0 0 0 2px rgba(76,150,239,.08); }
.registration-form { display: grid; gap: 16px; }
.registration-form > label > span { display: block; margin-bottom: 7px; color: var(--grape-2); font-size: 10px; font-weight: 750; }
.phone-field, .code-field { display: flex; align-items: center; min-height: 49px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--mist); transition: .18s ease; }
.phone-field:focus-within, .code-field:focus-within { border-color: #f3a3c5; box-shadow: 0 0 0 3px var(--berry-soft); background: white; }
.phone-field b { padding-right: 11px; border-right: 1px solid var(--line); font-size: 11px; }
.phone-field input, .code-field input { flex: 1; min-width: 0; padding: 0 11px; border: 0; outline: 0; color: var(--grape); background: transparent; font: 700 12px/1 inherit; }
.phone-field input::placeholder, .code-field input::placeholder { color: #b1a8b0; font-weight: 500; }
.code-field { padding-right: 6px; }
.code-field input { padding-left: 0; }
.code-field button { flex: 0 0 auto; padding: 9px 10px; border-radius: 9px; color: var(--berry-strong); background: var(--berry-soft); font-size: 9px; font-weight: 800; }
.code-field button:disabled { color: #a39aa2; background: #eee9ed; cursor: default; }
.agreement-field { display: grid !important; grid-template-columns: 17px 1fr; gap: 7px; align-items: start; margin-top: -2px; cursor: pointer; }
.agreement-field input { position: absolute; opacity: 0; pointer-events: none; }
.agreement-field i { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #d9d0d8; border-radius: 5px; color: transparent; background: white; }
.agreement-field i svg { width: 12px; height: 12px; stroke-width: 2.6; }
.agreement-field input:checked + i { color: white; border-color: var(--berry); background: var(--berry); }
.agreement-field > span { margin: 0 !important; color: var(--muted) !important; font-size: 8px !important; font-weight: 500 !important; line-height: 1.6; }
.agreement-field button { padding: 0; color: var(--berry-strong); background: transparent; font-size: inherit; }
.registration-error { min-height: 16px; margin: -6px 0 -8px !important; color: #d83c62 !important; font-size: 9px !important; }
.registration-footnote { margin-top: 16px; color: #aaa1a9; font-size: 8px; line-height: 1.55; text-align: center; }
.success-check { width: 49px; height: 49px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 16px; color: white; background: var(--mint); box-shadow: 0 9px 20px rgba(34,189,138,.24); }
.success-check svg { width: 25px; height: 25px; stroke-width: 2.6; }
.reward-receipt { display: flex; align-items: center; justify-content: space-between; margin: 17px 0 12px; padding: 15px; border: 1px solid #f1d7a2; border-radius: 16px; background: linear-gradient(105deg,#fff9ec,#fff1c9); }
.reward-receipt > span { display: grid; gap: 5px; }
.reward-receipt small { color: #99733d; font-size: 8px; }
.reward-receipt strong { color: #654516; font: 850 24px/1 ui-rounded,sans-serif; }
.reward-receipt em { font-size: 9px; font-style: normal; }
.reward-receipt > i { padding: 7px 9px; border-radius: 999px; color: white; background: #c58b28; font-size: 10px; font-style: normal; font-weight: 850; }
.first-call-guide { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--mist); }
.first-call-guide header { display: flex; align-items: center; justify-content: space-between; }
.first-call-guide header span { color: var(--grape); font-size: 11px; font-weight: 850; }
.first-call-guide header small { color: var(--muted); font-size: 8px; }
.guide-host { width: 100%; display: flex; align-items: center; gap: 9px; margin: 13px 0 10px; padding: 0; border-radius: 13px; background: transparent; text-align: left; transition: background .18s ease, transform .18s ease; }
.guide-host:hover { background: rgba(240,68,143,.045); }
.guide-host:active { transform: scale(.985); }
.guide-host img { width: 42px; height: 42px; object-fit: cover; border-radius: 13px; }
.guide-host > span { flex: 1; display: grid; gap: 3px; }
.guide-host strong { font-size: 11px; }
.guide-host strong i { margin-left: 4px; color: var(--mint); font-size: 8px; font-style: normal; }
.guide-host strong i.is-unavailable { color: var(--muted); }
.guide-host small { color: var(--muted); font-size: 8px; }
.guide-host > em { color: var(--berry-strong); font-size: 8px; font-style: normal; font-weight: 800; }
.guide-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.guide-prices button { display: grid; grid-template-columns: 19px 1fr; align-items: center; column-gap: 5px; padding: 9px; border: 1px solid transparent; border-radius: 11px; background: white; text-align: left; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.guide-prices button:hover { border-color: #f5b3d0; box-shadow: 0 6px 16px rgba(188,58,117,.08); }
.guide-prices button:active { transform: scale(.975); }
.guide-prices button:disabled { opacity: .48; box-shadow: none; cursor: not-allowed; }
.guide-prices svg { grid-row: 1/3; width: 18px; height: 18px; color: var(--berry); }
.guide-prices b { font-size: 8px; }
.guide-prices strong { color: var(--berry-strong); font-size: 8px; }
.first-call-guide > p { margin: 10px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
[data-onboarding-step="success"] .onboarding-primary { margin-top: 14px; }
.price-footnote { margin-top: 10px; color: #aaa1a9; font-size: 8px; text-align: center; }
.toast { position: absolute; z-index: 80; left: 50%; bottom: calc(88px + var(--safe-bottom)); max-width: 84%; padding: 10px 15px; border-radius: 999px; color: white; background: rgba(39,27,43,.92); box-shadow: 0 8px 23px rgba(39,27,43,.19); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%,10px); transition: .2s ease; white-space: nowrap; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

[hidden] { display: none !important; }
@keyframes page-enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes profile-enter { from { opacity: 0; transform: translateX(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes gem-pulse { 0% { opacity: .8; transform: scale(.82); } 75%,100% { opacity: 0; transform: scale(1.35); } }
@keyframes onboarding-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes coin-pulse { 0% { opacity: .8; transform: scale(.84); } 75%,100% { opacity: 0; transform: scale(1.18); } }
@keyframes coach-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes host-greet-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 800px) {
  body { background: var(--paper); }
  .review-stage { display: block; min-height: 100vh; padding: 0; }
  .prototype-intro { display: none; }
  .phone { width: 100%; height: 100dvh; min-height: 620px; border: 0; border-radius: 0; box-shadow: none; }
}