/* Character-first public UI. See docs/design/visual-refresh-20261019/DESIGN.md. */
.user-app {
  --canvas: #17191f; --panel: #20232c; --panel-raised: #292d38;
  --muted: #b5b8c4; --accent: #c1b0e3; --stroke: #ffffff1c;
  --text: #f7f5fa; --header: #17191ff2; --message: #282b36;
  margin: 0; color: var(--text); background: var(--canvas);
  font: 14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme: dark;
}
.user-app[data-site="site-b"] {
  --canvas: #211817; --panel: #2c2221; --panel-raised: #382b2a;
  --muted: #c3b5b2; --accent: #e2b7c5; --header: #211817f2; --message: #382a29;
}
.user-app button, .user-app summary, .user-app a { -webkit-tap-highlight-color: transparent; }
.user-app button {
  font: inherit; border: 1px solid var(--stroke); border-radius: 12px;
  color: inherit; background: var(--panel); padding: 9px 14px;
  transition: background .16s ease,border-color .16s ease;
}
.user-app button:hover { background: var(--panel-raised); border-color: #ffffff45; }
.user-app button.primary { color: #201c28; background: var(--accent); border-color: var(--accent); font-weight: 650; }
.user-app button:disabled { opacity: .45; }
.user-app :is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.user-app svg { width: 21px; height: 21px; flex: none; }
.user-app a { color: var(--accent); text-underline-offset: 3px; }
.user-app :is(input,textarea,select) { background: var(--panel); color: var(--text); border: 1px solid #ffffff26; border-radius: 12px; }
.user-app :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
.user-app select option { color: var(--text); background: var(--panel); }
.user-app .muted { color: var(--muted); }
.user-app .badge { background: #ffffff0d; color: var(--muted); }
.tipsy-shell { min-height: 100dvh; padding: 96px 28px 32px; }
.site-topbar {
  position: fixed; inset: 0 0 auto; z-index: 8; height: 72px;
  display: flex; align-items: center; gap: 32px; padding: 12px 28px;
  background: var(--header); backdrop-filter: blur(20px); border-bottom: 1px solid var(--stroke);
}
.user-app .site-wordmark { display: flex; align-items: center; gap: 10px; font: 700 27px Georgia,serif; letter-spacing: -1px; padding: 0; border: 0; background: transparent; white-space: nowrap; }
.site-brand-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 7px; }
.desktop-navigation { display: flex; align-items: center; gap: 6px; }
.user-app .desktop-navigation button { background: transparent; border-color: transparent; color: var(--muted); border-radius: 24px; padding: 8px 18px; }
.user-app .desktop-navigation button.active { color: var(--text); background: #ffffff0d; }
.site-top-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.user-app .icon-button { width: 40px; height: 40px; border-radius: 50%; padding: 9px; display: inline-grid; place-items: center; background: transparent; }
.user-app .login-button, .user-app .balance-pill, .user-app .language-toggle { height: 40px; border-radius: 24px; padding: 8px 16px; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.user-app .balance-pill { color: var(--accent); font-variant-numeric: tabular-nums; }
.user-app .login-button { background: var(--accent); color: #201c28; font-weight: 650; }
.user-main { position: relative; min-width: 0; }
.user-app .body { padding: 0; }
.has-messages { padding-left: 104px; }
.message-rail { position: fixed; top: 94px; bottom: 24px; left: 24px; width: 60px; display: flex; align-items: center; flex-direction: column; gap: 12px; border: 1px solid var(--stroke); border-radius: 32px; padding: 8px 5px; overflow-y: auto; scrollbar-width: none; background: #ffffff03; }
.user-app .rail-story,.user-app .rail-all { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; padding: 0; overflow: hidden; display: grid; place-items: center; background: var(--panel-raised); }
.rail-story img { width: 100%; height: 100%; object-fit: cover; }
.user-app .rail-story.selected { border: 2px solid var(--accent); }
.discovery-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.discovery-intro h1 { font-size: clamp(22px,2vw,28px); line-height: 1.25; letter-spacing: -.7px; font-weight: 650; margin: 0 0 6px; }
.discovery-intro p { color: var(--muted); font-size: 13px; margin: 0; }
.user-app .resume-chat button { border-radius: 24px; font-size: 12px; padding: 9px 15px; color: var(--accent); background: transparent; }
.discovery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-right: 112px; min-height: 40px; }
.discovery-tabs { display: flex; gap: 6px; }
.user-app .discovery-tabs button { color: var(--muted); background: transparent; border-color: transparent; border-radius: 24px; padding: 9px 20px; }
.user-app .discovery-tabs button.active { color: var(--text); border-color: #ffffff32; background: #ffffff0a; }
.user-app .discovery-search { display: flex; gap: 6px; align-items: center; margin: 0; }
.user-app .discovery-search input { width: 210px; max-width: 28vw; height: 40px; border-radius: 24px; padding: 9px 16px; font-size: 13px; background: #ffffff05; }
.user-app .discovery-search .icon-button { display: inline-grid; }
.filter-panel { position: relative; margin: -54px 0 14px; min-height: 40px; pointer-events: none; }
.filter-panel summary { margin-left: auto; width: max-content; min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--stroke); border-radius: 24px; cursor: pointer; list-style: none; color: var(--muted); pointer-events: auto; }
.filter-panel summary::-webkit-details-marker { display: none; }
.filter-panel[open] summary { color: var(--text); background: var(--panel-raised); }
.filter-count { border-radius: 12px; padding: 0 6px; color: #201c28; background: var(--accent); font-size: 11px; }
.discovery-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; padding: 16px; margin: 12px 0 18px; border: 1px solid var(--stroke); border-radius: 16px; background: var(--panel); pointer-events: auto; }
.discovery-filters label { flex: 1 1 140px; display: grid; gap: 6px; min-width: 0; margin: 0; color: var(--muted); font-size: 12px; }
.discovery-filters select { min-width: 0; padding: 9px 10px; font-size: 13px; }
.discovery-filters button { font-size: 12px; }
.character-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(205px,1fr)); gap: 14px; }
.discovery-card { position: relative; min-width: 0; aspect-ratio: .62; overflow: hidden; border-radius: 13px; border: 1px solid var(--stroke); background: #111216; transition: border-color .18s ease,transform .18s ease; }
.discovery-card:hover { border-color: #ffffff58; transform: translateY(-3px); }
.user-app .character-open { display: block; position: absolute; inset: 0 0 38px; width: 100%; padding: 0; border: 0; border-radius: 0; overflow: hidden; text-align: left; background: transparent; }
.user-app .character-open:focus-visible { outline-offset: -4px; z-index: 2; }
.character-image,.character-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.character-placeholder { display: grid; place-items: center; color: #c3b8d77a; font: 80px Georgia,serif; background: linear-gradient(145deg,#454055,#1c1e28); }
.character-placeholder.tone-1 { background: linear-gradient(145deg,#3d4a53,#1b232b); }
.character-placeholder.tone-2 { background: linear-gradient(145deg,#55414c,#251c27); }
.card-copy { position: absolute; inset: auto 0 0; width: 100%; padding: 70px 14px 13px; background: linear-gradient(transparent,#0b0b11dc 38%,#0b0b11fc); }
.card-copy h3 { font-size: 16px; line-height: 1.25; font-weight: 650; letter-spacing: -.25px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 0 0 7px; }
.card-copy p { color: #ccc7d0; font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.card-tags { display: flex; gap: 5px; margin-top: 9px; overflow: hidden; font-size: 10px; white-space: nowrap; color: #d0c5db; }
.card-tags span { padding: 2px 7px; border-radius: 5px; background: #ffffff13; max-width: 70%; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.card-meta { position: absolute; inset: auto 0 0; height: 38px; border-top: 1px solid #ffffff0e; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px 4px 14px; font-size: 11px; color: #b9b5c2; }
.user-app .favorite-button { width: 30px; height: 30px; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; padding: 2px; background: transparent; color: #d7c9e5; }
.user-app .favorite-button[aria-pressed="true"] { color: var(--accent); }
.mobile-navigation { display: none; }
.conversation-heading { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; padding: 14px 20px; border-bottom: 1px solid var(--stroke); background: var(--panel); }
.conversation-heading h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; letter-spacing: -.25px; }
.conversation-backdrop { position: absolute; inset: 0; width: 34%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.is-conversation .user-main { max-width: 1180px; margin: 0 auto; height: calc(100dvh - 120px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--stroke); border-radius: 20px; padding-left: 0; background: var(--panel); isolation: isolate; }
.is-conversation .user-main>:is(.conversation-heading,.body,.composer,.banner) { margin-left: 34%; width: 66%; }
.is-conversation .user-main:not(:has(.conversation-backdrop))>:is(.conversation-heading,.body,.composer,.banner) { margin-left: 0; width: 100%; }
.is-conversation .user-main:not(:has(.conversation-backdrop)) { max-width: 800px; padding-left: 0; }
.is-conversation .user-main:after { content: ''; position: absolute; inset: 0 0 0 34%; background: var(--panel); z-index: 0; pointer-events: none; }
.is-conversation .user-main>.body,.is-conversation .composer,.is-conversation .banner { position: relative; z-index: 1; }
.user-app .chat-theme .body { padding: 18px 24px; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.user-app .chat-theme .messages { height: auto; flex: 1; min-height: 80px; overflow: auto; scrollbar-width: thin; scrollbar-color: #ffffff26 transparent; }
.user-app .chat-theme .bubble { background: var(--message); color: var(--text); border: 1px solid #ffffff09; border-radius: 16px; padding: 16px 18px; font-size: 15px; line-height: 1.8; max-width: 94%; margin: 16px 0; }
.user-app .chat-theme .bubble.user { margin-left: auto; background: #554653; border-color: #ffffff0a; border-bottom-right-radius: 5px; }
.user-app .chat-theme .bubble:not(.user) { border-top-left-radius: 5px; }
.user-app .chat-theme .segment.narration { color: #c1b8c8; font-style: italic; }
.user-app .chat-theme .segment.dialogue { color: #f9f7fb; }
.user-app .chat-theme .segment+.segment { margin-top: 14px; }
.user-app .chat-theme .bubble:not(.user):has(>.segment.narration):not(:has(>.segment.dialogue)) { background: var(--message); padding: 16px 18px; border-radius: 16px; }
.user-app .chat-theme .composer { background: var(--panel); border-top: 1px solid var(--stroke); padding: 12px 22px 14px; }
.user-app .chat-theme .composer textarea { resize: vertical; background: #ffffff08; border: 1px solid #ffffff26; border-radius: 18px; color: var(--text); height: 52px; min-height: 52px; max-height: 140px; padding: 13px 16px; }
.user-app .composer .actions button { background: transparent; border: 0; padding: 6px 8px; font-size: 11px; color: var(--muted); }
.user-app .composer .row.between { color: var(--muted); font-size: 11px; }
.user-app .composer .row.between button { font-size: 11px; padding: 5px 10px; border-radius: 20px; }
.user-app .chat-theme .actions button { font-size: 11px; color: var(--muted); }
.user-app .opening.bubble { max-height: none; overflow: visible; max-width: 100%; }
.user-app .card { background: var(--panel); border: 1px solid var(--stroke); border-radius: 16px; padding: 22px; }
.page-mine,.page-stories { max-width: 980px; margin: auto; }
.page-mine .body,.page-stories .body { padding: 24px 0; }
.page-mine .card h2 { font-size: 30px; margin: 14px 0; letter-spacing: -.7px; }
.page-mine .card button { margin: 4px 4px 4px 0; }
.user-app dialog { color: var(--text); background: var(--panel); border: 1px solid #ffffff26; border-radius: 22px; box-shadow: 0 24px 90px #0008; padding: 28px; line-height: 1.6; }
.user-app dialog::backdrop { background: #080a10b8; backdrop-filter: blur(8px); }
.user-app dialog h2 { font-size: 21px; letter-spacing: -.4px; }
.user-app dialog label { color: var(--muted); font-size: 13px; }
.user-app dialog .row.between { margin-bottom: 20px; }
.user-app .banner { font-size: 11px; border: 1px solid #ffffff20; border-radius: 9px; color: var(--muted); background: var(--panel); margin-bottom: 16px; }
@media(min-width:1600px) { .character-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); } }
@media(max-width:1000px) { .site-topbar { gap: 16px; } .desktop-navigation { display: none; } .is-conversation .user-main>:is(.conversation-heading,.body,.composer,.banner) { margin-left: 30%; width: 70%; } .conversation-backdrop { width: 30%; } .is-conversation .user-main:after { left: 30%; } }
@media(max-width:680px) {
  .tipsy-shell,.tipsy-shell.has-messages { padding: 82px 14px calc(82px + env(safe-area-inset-bottom)); }
  .site-topbar { height: 64px; padding: 10px 14px; gap: 8px; }
  .user-app .site-wordmark { font-size: 23px; }
  .site-brand-logo { width: 26px; height: 26px; }
  .site-top-actions { gap: 6px; }
  .site-top-actions>.icon-button:first-child { display: none; }
  .user-app .site-top-actions .icon-button { width: 34px; height: 34px; padding: 7px; }
  .user-app .login-button,.user-app .balance-pill,.user-app .language-toggle { height: 34px; padding: 6px 10px; font-size: 11px; gap: 6px; }
  .message-rail { display: none; }
  .discovery-intro { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 18px; }
  .discovery-intro h1 { font-size: 23px; }
  .discovery-intro p { font-size: 12px; }
  .user-app .resume-chat button { font-size: 11px; padding: 7px 12px; }
  .discovery-toolbar { flex-wrap: wrap; padding-right: 0; gap: 12px; margin-bottom: 12px; }
  .discovery-tabs { width: 100%; }
  .user-app .discovery-tabs button { font-size: 13px; padding: 8px 17px; }
  .user-app .discovery-search { width: calc(100% - 101px); }
  .user-app .discovery-search input { width: 100%; min-width: 0; flex: 1; max-width: none; height: 38px; font-size: 12px; }
  .filter-panel { margin-top: -50px; margin-bottom: 14px; min-height: 38px; }
  .filter-panel summary { min-height: 38px; padding: 8px 12px; font-size: 12px; }
  .filter-panel summary svg { width: 18px; height: 18px; }
  .discovery-filters { gap: 10px; padding: 12px; }
  .discovery-filters label { flex-basis: 42%; }
  .character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .discovery-card { border-radius: 11px; aspect-ratio: .61; }
  .card-copy { padding: 54px 10px 10px; }
  .card-copy h3 { font-size: 15px; margin-bottom: 5px; }
  .card-copy p { font-size: 11px; line-height: 1.5; }
  .card-tags { font-size: 9px; margin-top: 6px; }
  .card-tags span { padding: 2px 5px; }
  .card-meta { padding: 3px 5px 3px 10px; height: 34px; font-size: 10px; }
  .user-app .character-open { bottom: 34px; }
  .mobile-navigation { display: flex; position: fixed; inset: auto 0 0; z-index: 8; height: calc(64px + env(safe-area-inset-bottom)); padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); justify-content: space-around; background: var(--header); border-top: 1px solid var(--stroke); backdrop-filter: blur(20px); }
  .user-app .mobile-navigation button { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 3px; flex: 1; border: 0; color: var(--muted); padding: 0; background: transparent; }
  .mobile-navigation span { font-size: 10px; }
  .user-app .mobile-navigation button.active { color: var(--accent); }
  .is-conversation,.tipsy-shell.has-messages.is-conversation { padding: 0; }
  .is-conversation .site-topbar { display: none; }
  .is-conversation .user-main { margin: 0; width: 100%; height: calc(100dvh - 64px - env(safe-area-inset-bottom)); max-width: none; padding-left: 0; border: 0; border-radius: 0; }
  .is-conversation .user-main>:is(.conversation-heading,.body,.composer,.banner) { margin-left: 0; width: 100%; }
  .conversation-backdrop { width: 100%; opacity: .16; }
  .is-conversation .user-main:after { inset: 0; background: linear-gradient(#17191f45,var(--canvas) 80%); }
  .conversation-heading { padding: 10px 12px; background: #17191fc9; }
  .user-app .chat-theme .body { padding: 10px 14px; }
  .user-app .chat-theme .bubble { font-size: 14px; padding: 13px 15px; max-width: 95%; margin: 14px 0; }
  .user-app .chat-theme .composer { padding: 10px 12px; }
  .user-app .composer .actions { gap: 2px; margin: 7px 0 0; }
  .user-app .composer .actions button { padding: 5px 7px; }
  .user-app .composer textarea { font-size: 16px; }
  .user-app dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; border-radius: 22px 22px 0 0; max-height: 90dvh; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) { .user-app button,.discovery-card { transition: none; } .discovery-card:hover { transform: none; } }

.persona-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}.user-app .persona-pill{display:flex;align-items:center;gap:8px;border-radius:25px;padding:7px 14px;max-width:65%;font-size:13px}.persona-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-app .mode-pill{font-size:12px;border-radius:25px;padding:7px 12px}.user-app .composer button[data-action=send]{width:42px;height:42px;min-width:42px;border-radius:50%;padding:0;font-size:28px;line-height:1;background:#ffffff18;border:1px solid #ffffff80}.user-app .composer>.row:has(textarea){align-items:center;gap:8px}

.site-wordmark{display:flex;align-items:center;gap:10px}.site-brand-logo{width:34px;height:34px;object-fit:contain;border-radius:6px}

.checkin-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0}.checkin-days span{padding:10px 5px;text-align:center;border:1px solid #8a686055;border-radius:10px;font-size:12px}.checkin-days b{display:block;margin-top:6px}.checkin-days .today{border-color:#b593e8;background:#9866cc22}

.user-app .relationship-status{margin:0 0 8px;color:#ddc9c1;font-size:12px;overflow-wrap:anywhere}
.persona-avatar{width:64px;height:64px;object-fit:cover;border-radius:50%;display:inline-flex;vertical-align:middle;margin:0 12px 12px 0}.persona-avatar-default{align-items:center;justify-content:center;background:#635a69;color:#fff;font-size:32px}.persona-avatar-editor{border:1px solid #84778a;border-radius:12px;padding:14px;margin-bottom:16px}.persona-avatar-editor small,.persona-avatar-editor [role=status]{display:block;margin:8px 0}

.user-app .opening{touch-action:pan-y pinch-zoom;overflow-wrap:anywhere}.user-app .opening:focus-visible{outline:2px solid #c997e6;outline-offset:4px}

.user-app .quality-reply-preview{white-space:pre-wrap;overflow-wrap:anywhere}
.user-app .quality-share input[type=checkbox]{width:auto;margin-right:8px}

/* Wallet, account settings and recovery retain their existing forms and actions. */
.user-app.user-standalone { min-height: 100dvh; padding: 32px 20px; }
.user-app.user-standalone>main.body { max-width: 1040px; margin: auto; padding: 32px; border: 1px solid var(--stroke); border-radius: 22px; background: var(--panel); }
.user-standalone h1 { font-size: 28px; letter-spacing: -.7px; }
.user-standalone h2 { margin-top: 28px; }
.user-standalone p { color: var(--muted); }
.user-standalone form { max-width: 620px; }
.user-standalone label { color: var(--muted); font-size: 13px; }
.user-standalone :is(input,textarea,select) { background: #ffffff08; }
.user-standalone button { margin: 4px 4px 4px 0; }
.user-standalone :is(#walletGroups,#products) { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; }
.user-standalone :is(#walletGroups,#products)>.card { margin: 0; }
@media(max-width:680px) { .user-app.user-standalone { padding: 14px 10px; } .user-app.user-standalone>main.body { padding: 22px 16px; border-radius: 16px; } .user-standalone h1 { font-size: 24px; } }

/* Chat workspace: stable transcript and composer, with a portrait-led desktop stage. */
.user-app [hidden] { display: none !important; }
.chat-workspace .page-chat {
  display: grid; grid-template-columns: 34% minmax(0,1fr);
  grid-template-rows: auto auto minmax(0,1fr) auto;
  max-width: 1280px; height: calc(100dvh - 120px); padding: 0;
  border-radius: 24px; border-color: #ffffff18; background: var(--panel);
  box-shadow: 0 24px 70px #0003;
}
.chat-workspace .page-chat:after { display: none; }
.chat-workspace .page-chat>:is(.conversation-heading,.body,.composer,.banner) { margin-left: 0; width: 100%; }
.character-stage { grid-column: 1; grid-row: 2 / -1; position: relative; min-width: 0; overflow: hidden; background: #14141a; }
.character-stage:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#11111600 35%,#11111670 67%,#111116f5 100%); pointer-events: none; }
.character-stage .conversation-backdrop { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.character-stage-caption { position: absolute; inset: auto 0 0; z-index: 1; padding: 28px; }
.stage-eyebrow { display: inline-block; color: #d8cbe5; font-size: 10px; letter-spacing: 2px; font-weight: 650; margin-bottom: 12px; }
.character-stage-caption h2 { font: 500 clamp(28px,3vw,42px)/1.1 Georgia,serif; letter-spacing: -.8px; margin: 0 0 14px; }
.character-stage-caption p { color: #e0d9e3; font-size: 13px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 24px; }
.stage-note { display: block; font-size: 11px; color: #b9acbe; padding-top: 16px; border-top: 1px solid #ffffff20; }
.chat-workspace .page-chat>.banner { grid-row: 1; grid-column: 1 / -1; position: relative; margin: 0; border: 0; border-radius: 0; padding: 5px 14px; font-size: 10px; color: var(--muted); background: #0002; }
.chat-workspace .conversation-heading { grid-column: 2; grid-row: 2; gap: 12px; padding: 17px 24px; background: transparent; }
.chat-header-avatar { width: 40px; height: 40px; flex: none; object-fit: cover; object-position: center 25%; border-radius: 50%; border: 1px solid #ffffff30; }
.conversation-title { flex: 1; min-width: 0; }
.conversation-title h2 { font-size: 17px; line-height: 1.4; margin: 0; }
.conversation-title p { font-size: 11px; color: var(--muted); margin: 2px 0 0; }
.chat-workspace .page-chat>.body { grid-column: 2; grid-row: 3; padding: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.conversation-transcript { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.user-app .chat-workspace .messages { height: 100%; min-height: 0; padding: 12px 28px 24px; overscroll-behavior-y: contain; scrollbar-gutter: stable; scroll-behavior: auto; }
.user-app .chat-workspace .bubble { max-width: 92%; font-size: 15px; line-height: 1.8; margin: 18px 0 5px; border: 1px solid #ffffff08; border-radius: 18px 18px 18px 6px; background: #ffffff06; padding: 16px 19px; }
.user-app .chat-workspace .bubble.user { max-width: 82%; margin: 18px 0 18px auto; background: #61516d; color: #fff; border-radius: 18px 18px 6px 18px; }
.user-app[data-site="site-b"] .chat-workspace .bubble.user { background: #69505a; }
.user-app .chat-workspace .segment.narration { color: #cbbfd0; }
.user-app .chat-workspace .bubble:not(.user):has(>.segment.narration):not(:has(>.segment.dialogue)) { background: #ffffff04; border-radius: 18px 18px 18px 6px; }
.user-app .reply-feedback { margin: 3px 0 8px; }
.user-app .reply-feedback button { font-size: 10px; padding: 4px 6px; border: 0; background: transparent; opacity: .65; }
.user-app .reply-feedback button:hover,.user-app .reply-feedback button:focus-visible { opacity: 1; }
.typing-indicator { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; padding: 16px 2px; min-height: 48px; }
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: chat-dot 1.1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .14s; }.typing-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes chat-dot { 0%,65%,100% { opacity: .4; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-3px); } }
.pending-message { opacity: .72; }.pending-message small { display: block; font-size: 10px; margin-top: 7px; color: #efe6f5; }
.user-app .jump-latest { position: absolute; bottom: 12px; right: 24px; z-index: 2; display: flex; align-items: center; gap: 7px; border-radius: 24px; padding: 8px 13px; background: var(--panel-raised); color: var(--text); box-shadow: 0 4px 20px #0004; font-size: 12px; }
#live { min-height: 0; }#generationStatus:empty { display: none; }
.chat-workspace #rewardCard:not(:empty) { max-height: 38%; overflow: auto; padding: 0 24px; border-top: 1px solid var(--stroke); }
.user-app .chat-workspace .page-chat>.composer { grid-column: 2; grid-row: 4; padding: 12px 24px 14px; background: var(--panel); }
.chat-workspace .persona-toolbar { margin: 0 0 9px; }
.user-app .chat-workspace .persona-pill { max-width: 74%; background: transparent; font-size: 11px; padding: 4px 8px; border: 0; color: var(--muted); }
.chat-workspace .persona-pill svg { width: 16px; height: 16px; }
.user-app .chat-workspace .mode-pill { background: #ffffff08; border-color: var(--stroke); padding: 4px 10px; font-size: 11px; }
.user-app .chat-workspace .relationship-status { color: var(--muted); font-size: 10px; margin: 0 0 8px 8px; }
.user-app .chat-workspace .composer>.row.between { margin: 0 0 9px; gap: 8px; font-size: 10px; }
.user-app .chat-workspace .composer>.row.between button { padding: 3px 8px; border: 0; background: transparent; color: var(--muted); font-size: 10px; }
.chat-workspace .compose-field { background: #ffffff09; border: 1px solid #ffffff20; border-radius: 22px; padding: 4px; gap: 5px; align-items: flex-end !important; flex-wrap: nowrap; }
.chat-workspace .compose-field:focus-within { border-color: #bca4d580; box-shadow: 0 0 0 3px #bca4d50a; }
.user-app .chat-workspace .composer textarea { min-height: 48px; max-height: 144px; height: 48px; padding: 12px 14px; border: 0; outline: 0; background: transparent; border-radius: 18px; resize: none; line-height: 1.5; box-shadow: none; }
.user-app .chat-workspace .composer button[data-action="send"],.user-app .chat-workspace .composer button[data-action="stop"] { align-self: flex-end; width: 40px; height: 40px; min-width: 40px; border-radius: 50%; margin: 4px; padding: 0; display: grid; place-items: center; background: var(--accent); color: #251d2b; border: 0; font-size: 25px; line-height: 1; }
.user-app .chat-workspace .composer button[data-action="stop"] { font-size: 11px; font-weight: 650; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; min-height: 30px; }
.composer-utilities { display: flex; align-items: center; gap: 6px; }
.user-app .composer-utilities>button,.chat-tools summary { border: 0; background: transparent; color: var(--muted); font-size: 11px; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.send-key-hint { font-size: 10px; color: var(--muted); opacity: .75; }
.chat-tools { position: relative; }.chat-tools summary { list-style: none; }.chat-tools summary::-webkit-details-marker { display: none; }
.chat-tools summary:hover,.user-app .composer-utilities>button:hover { background: #ffffff09; color: var(--text); }
.chat-tools-menu { position: absolute; z-index: 5; left: 0; bottom: calc(100% + 10px); min-width: 178px; padding: 6px; background: var(--panel-raised); border: 1px solid #ffffff22; box-shadow: 0 14px 40px #0006; border-radius: 14px; }
.user-app .chat-tools-menu button { display: block; width: 100%; padding: 10px 12px; text-align: left; border: 0; background: transparent; border-radius: 8px; font-size: 12px; }
.user-app .chat-tools-menu button:hover { background: #ffffff0b; }
/* Dialog entrance and exit share one cancellable presentation controller. */
@media(max-width:1000px) { .chat-workspace .page-chat { grid-template-columns: 30% minmax(0,1fr); } .character-stage-caption { padding: 20px; } .character-stage-caption p { -webkit-line-clamp: 2; } .send-key-hint { display: none; } }
@media(max-width:680px) {
 .tipsy-shell.chat-workspace { position: fixed; top: var(--chat-viewport-top,0px); left: 0; right: 0; min-height: 0; height: var(--chat-viewport-height,100dvh); }
 .chat-workspace .page-chat,.chat-workspace .page-chat:not(:has(.conversation-backdrop)) { height: calc(var(--chat-viewport-height,100dvh) - 64px - env(safe-area-inset-bottom)); grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr) auto; border: 0; border-radius: 0; background: var(--canvas); }
 .chat-workspace .character-stage { position: absolute; inset: 0; opacity: .1; z-index: -1; pointer-events: none; }
 .character-stage-caption { display: none; }.character-stage:after { background: linear-gradient(transparent,var(--canvas)); }
 .character-stage .conversation-backdrop { opacity: 1; object-position: center 30%; }
 .chat-workspace .conversation-heading { grid-column: 1; grid-row: 2; padding: 11px 12px; gap: 9px; background: var(--header); }
 .chat-header-avatar { width: 34px; height: 34px; }.conversation-title h2 { font-size: 15px; }.conversation-title p { font-size: 10px; }
 .chat-workspace .page-chat>.body { grid-column: 1; grid-row: 3; }.chat-workspace .page-chat>.banner { grid-column: 1; }
 .user-app .chat-workspace .messages { padding: 8px 14px 20px; }
 .user-app .chat-workspace .bubble { max-width: 94%; font-size: 14px; padding: 13px 15px; line-height: 1.8; }
 .user-app .chat-workspace .bubble.user { max-width: 85%; }
 .user-app .chat-workspace .page-chat>.composer { grid-column: 1; grid-row: 4; padding: 8px 10px 9px; background: var(--header); }
 .chat-workspace .persona-toolbar { margin-bottom: 4px; }.user-app .chat-workspace .relationship-status { margin-bottom: 3px; }
 .user-app .chat-workspace .composer>.row.between { margin-bottom: 5px; }.user-app .chat-workspace .composer textarea { font-size: 16px; }
 .composer-bottom { margin-top: 4px; min-height: 30px; }.send-key-hint { display: none; }
 .chat-tools summary,.user-app .composer-utilities>button { min-height: 32px; padding: 7px 9px; }
 .chat-workspace.keyboard-open .mobile-navigation { display: none; }.chat-workspace.keyboard-open .page-chat { height: var(--chat-viewport-height,100dvh); }
 .chat-workspace.keyboard-open .relationship-status,.chat-workspace.keyboard-open .composer>.row.between { display: none; }
 .chat-workspace #rewardCard:not(:empty) { padding: 0 12px; max-height: 35%; }
 .user-app .jump-latest { right: 14px; bottom: 10px; }
}
@media(prefers-reduced-motion:reduce) { .typing-dots i { animation: none; }.user-app dialog { transition: none; } }
@media(pointer:coarse) { .send-key-hint { display: none; } }
.chat-workspace .compose-field textarea { min-width: 0; width: 0; flex: 1 1 0%; }
.user-app:has(.chat-workspace) { min-height: 100dvh; }
:root:has(.chat-workspace) { background: #17191f; }

/* Density pass: preserve readable type and actions, reduce repeated chrome. */
.user-app .card-copy p { -webkit-line-clamp: 1; }
.user-app .character-details { border: 0; background: transparent; padding: 4px 0; font-size: 11px; color: var(--muted); }
.character-stage-caption p { -webkit-line-clamp: 1; margin-bottom: 8px; }
.user-app .stage-about { padding: 4px 0; border: 0; background: transparent; color: #e0d9e3; font-size: 12px; }
.character-info-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.character-info-tags span { padding: 3px 8px; background: #ffffff0a; border-radius: 6px; font-size: 12px; }
.character-description { white-space: pre-wrap; line-height: 1.7; }
.user-app .chat-workspace .page-chat>.composer { padding: 8px 20px 12px; }
.composer-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin-bottom: 6px; }
.user-app .composer-meta .mode-price { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 8px; min-height: 32px; background: transparent; border: 0; font-size: 12px; }
.mode-price .mode-name { max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-price .reply-price { color: var(--muted); font-size: 11px; white-space: nowrap; }
.composer-meta .composer-utilities { flex: none; gap: 2px; }
.user-app .composer-meta .memory-tool { display: flex; align-items: center; gap: 5px; }
.composer-meta .memory-tool svg { width: 16px; height: 16px; }
.user-app .composer-meta .composer-balance { display: none; }
.chat-tools .tool-symbol { display: none; }
.composer-notice { font-size: 12px; line-height: 1.6; margin: 0 0 8px; }
.chat-context-details { padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--stroke); }
.chat-context-details p { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; color: var(--muted); font-size: 13px; }
.chat-context-details b { font-weight: 500; color: var(--text); }
.user-app dialog .compact-limit-field { position: relative; }
.compact-limit-field>span:first-child { display: block; padding-inline-end: 95px; }
.compact-limit-field .input-limit-compact { position: absolute; top: 0; right: 0; margin: 0; font-size: 11px; line-height: 22px; visibility: hidden; }
.compact-limit-field:focus-within .input-limit-compact,.compact-limit-field .limit-near { visibility: visible; }
.compact-limit-field .limit-near { color: var(--accent); }
.compact-limit-field .limit-error { position: static; visibility: visible; display: block; margin-top: 4px; color: #ffb6b6; line-height: 1.5; }
.compact-limit-description { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.settings-apply-note { margin: 10px 0 4px; font-size: 12px; }
.settings-help,.settings-secondary { margin: 8px 0 16px; font-size: 12px; color: var(--muted); }
.settings-help summary,.settings-secondary summary { cursor: pointer; width: fit-content; padding: 5px 0; }
.settings-primary { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.settings-danger { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stroke); }
#settingsStatus:empty { display: none; }
@media(max-width:1000px) { .character-stage-caption p { -webkit-line-clamp: 1; } }
@media(max-width:680px) {
 .user-app .chat-workspace .page-chat>.composer { padding: 6px 10px calc(9px + env(safe-area-inset-bottom)); }
 .composer-meta { gap: 4px; margin-bottom: 4px; }
 .user-app .composer-meta .mode-price { gap: 6px; padding: 5px 2px; min-height: 36px; }
 .mode-price .mode-name { max-width: 5.5em; font-size: 11px; }
 .mode-price .reply-price { font-size: 10px; }
 .user-app .composer-meta .composer-balance { display: block; padding: 5px 4px; min-height: 36px; border: 0; background: transparent; color: var(--accent); font-size: 11px; }
 .composer-meta .tool-label { display: none; }.chat-tools .tool-symbol { display: inline; font-size: 20px; line-height: 1; }
 .composer-meta .memory-tool,.composer-meta .chat-tools summary { display: grid; place-items: center; width: 34px; min-height: 36px; padding: 6px; }
 .user-app .composer-meta .memory-tool { display: grid; }
}
@media(pointer:coarse) { .user-app .composer-meta .mode-price,.user-app .composer-meta .composer-balance,.composer-meta .memory-tool,.composer-meta .chat-tools summary { min-height: 44px; } }

@media(pointer:coarse) { .composer-meta .memory-tool,.composer-meta .chat-tools summary { min-width: 44px; } .user-app .chat-workspace .composer button[data-action="send"],.user-app .chat-workspace .composer button[data-action="stop"] { width: 44px; height: 44px; min-width: 44px; } }

.user-app .message-actions { margin: 0 0 4px; min-height: 32px; }
.user-app .message-actions button { display: grid; place-items: center; width: 36px; min-height: 32px; padding: 0; font-size: 22px; line-height: 1; opacity: 1; color: var(--muted); border-radius: 8px; }
.user-app .message-actions button:hover,.user-app .message-actions button:focus-visible { background: #ffffff0b; color: var(--text); }
.user-app .user-message-actions { justify-content: flex-end; }
.message-action-menu { display: grid; gap: 8px; }
.user-app .message-action-menu button { width: 100%; text-align: left; min-height: 44px; padding: 10px 14px; }
@media(pointer:coarse) { .user-app .message-actions button { width: 44px; min-height: 44px; } }

.chat-tools-menu { left: auto; right: 0; transform-origin: bottom right; }

.home-load-status { color: var(--muted); font-size: 13px; margin: 12px 0; min-height: 22px; }
.skeleton-shape { background: #ffffff0a; border-radius: 8px; animation: skeleton-breathe 1.6s ease-in-out infinite alternate; }
.skeleton-cover { width: 100%; aspect-ratio: 3/4; border-radius: 0; }
.skeleton-line { display: block; width: 80%; max-width: 240px; height: 14px; margin: 10px 0; }.skeleton-line.short { width: 50%; }
.home-skeleton .card-copy { min-height: 80px; }.home-skeleton .card-meta { min-height: 34px; }
.load-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; margin: 12px 0; border: 1px solid var(--stroke); border-radius: 14px; color: var(--muted); }
.access-load-state { max-width: 480px; margin: 20vh auto; padding: 24px; text-align: center; }
@keyframes skeleton-breathe { from { opacity: .5; } to { opacity: 1; } }
@media(prefers-reduced-motion:reduce) { .skeleton-shape { animation: none; } }

/* Reserve the same resume slot while history arrives; do not move the heading. */
.resume-chat { min-height: 40px; display: flex; align-items: center; }
.resume-chat .home-load-status { display: flex; align-items: center; gap: 10px; }
.resume-chat .skeleton-line { width: 72px; height: 10px; margin: 0; }

/* Keep the real toolbar in place; announce loading without adding a layout row. */
.skeleton-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Give every mode the same space for its name, price, and full description. */
.user-app dialog[data-kind="switchMode"] { width: min(960px, calc(100vw - 64px)); max-width: none; max-height: min(84dvh, 900px); overflow: hidden; }
.user-app dialog[data-kind="switchMode"][open] { display: flex; flex-direction: column; }
.user-app dialog[data-kind="switchMode"] > .row { flex: 0 0 auto; }
.mode-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 3px; margin: 0; }
.mode-switch-grid .mode-option { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; min-width: 0; min-height: 144px; padding: 20px; margin: 0; text-align: left; white-space: normal; border-radius: 16px; }
.mode-option-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.mode-option-heading strong { font-size: 17px; font-weight: 600; line-height: 1.35; }
.mode-option-price { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.mode-option-description { display: block; font-size: 14px; line-height: 1.6; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.mode-switch-grid .mode-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mode-switch-grid .mode-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-switch-note { flex: 0 0 auto; margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
@media(max-width:720px) {
 .user-app dialog[data-kind="switchMode"] { width: 100%; max-height: 92dvh; }
 .mode-switch-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
 .mode-switch-grid .mode-option { min-height: 128px; padding: 18px; }
}

/* Keep navigation surfaces separate from story media; give grouped actions real gaps. */
.user-app .story-list-toolbar { margin-bottom: 16px; gap: 16px; }
.user-app .story-list-toolbar h2,.user-app .story-list-toolbar .actions { margin: 0; }
.user-app .story-summary { padding: 20px; }
.user-app .story-summary .story-name { color: var(--muted); font-size: 13px; margin: 5px 0 12px; }
.user-app .story-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.6; margin-bottom: 16px; }
.user-app .story-summary-footer { gap: 10px; }
.user-app .story-summary-footer small { color: var(--muted); }
.user-app .story-summary-footer button { margin-left: auto; min-height: 44px; }
.user-app .chat-menu-actions { gap: 10px; margin: 0; }
.user-app .chat-menu-actions button { flex: 1 1 160px; min-height: 44px; }
.user-app .account-actions .actions { gap: 12px; margin: 0; }
.user-app .account-actions button { margin: 0; min-height: 44px; }
.user-app .account-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 18px; }
@media(max-width:680px) {
 .user-app .story-list-toolbar { align-items: flex-start; }
 .user-app .story-list-toolbar .actions { gap: 8px; }
 .user-app .story-summary { padding: 16px; }
 .user-app .chat-menu-actions button { flex-basis: 120px; }
 .user-app .account-actions button { flex: 1 1 140px; }
}

.reply-preferences-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
@media(max-width:400px) { .reply-preferences-fields { grid-template-columns: 1fr; } }
/* Personal tools use one readable column and wrapping actions on small screens. */
.studio-tools{display:grid;gap:16px;min-width:0}.studio-tools label:not(.studio-check){display:grid;gap:8px}.studio-tools textarea,.studio-tools input:not([type=checkbox]){width:100%;box-sizing:border-box}.studio-tools .studio-check{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;gap:12px;line-height:1.5}.studio-tools .studio-check input[type=checkbox]{width:18px;min-width:18px;height:18px;margin:3px 0 0;padding:0}.studio-tools .actions{display:flex;gap:10px;flex-wrap:wrap}.studio-tools .card{margin:0}.studio-preview{max-height:45vh;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;padding:16px;border:1px solid #ffffff25;border-radius:12px}.highlight-preview{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:#181a21;border-radius:16px;max-height:50vh;overflow:auto}.story-choice-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.story-choice-fields label{display:grid;gap:8px}.studio-tools button{min-height:44px}.studio-tools .wide{white-space:normal;text-align:start}@media(max-width:600px){.story-choice-fields{grid-template-columns:1fr}.studio-tools .actions button{flex:1 1 140px}}

/* Four explicit locale choices; the control stays compact on narrow screens. */
.language-picker select{max-width:150px;min-height:40px;padding:8px 28px 8px 12px;border:1px solid var(--line,#45434e);border-radius:24px;background:var(--panel,#24232d);color:inherit;font:inherit;cursor:pointer}
.language-picker{display:inline-flex;align-items:center;flex:none}
@media(max-width:600px){.language-picker select{max-width:104px;font-size:13px;padding-left:8px}.site-top-actions{gap:6px}}

.user-app .language-picker{margin:0}
.user-app .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html:lang(ja) .discovery-toolbar,html:lang(ko) .discovery-toolbar{padding-right:160px}
html:lang(ja) .user-app{line-break:strict}
html:lang(ko) .user-app{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:760px){html:lang(ja) .discovery-toolbar,html:lang(ko) .discovery-toolbar{padding-right:0}html:lang(ja) .discovery-search,html:lang(ko) .discovery-search{width:calc(100% - 138px)}}
.user-standalone .page-language-toggle{width:auto;max-width:180px;min-height:40px}

.community-sorts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.user-app .community-sorts button{min-height:44px;border-radius:24px;padding:8px 18px}.user-app .community-sorts button.active{border-color:var(--accent);background:#ffffff0c}.discovery-tabs{flex-wrap:wrap}@media(max-width:600px){.discovery-tabs{gap:4px}.user-app .discovery-tabs button{padding:8px 12px}.community-sorts{margin-bottom:12px}}

/* One provider reply remains one message/charge; only its reading layout splits. */
.user-app .chat-workspace .bubble:not(.user):has(>.segment),
.user-app .chat-workspace .bubble:not(.user):has(>.segment.narration):not(:has(>.segment.dialogue)) {
 background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0;
 width: 100%; max-width: 100%; margin: 18px 0 8px;
}
.user-app .chat-workspace .segment { max-width: 100%; overflow-wrap: anywhere; }
.user-app .chat-workspace .segment+.segment { margin-top: 10px; }
.user-app .chat-workspace .segment.narration { color: #bdbac4; font-style: normal; line-height: 1.8; padding: 10px 2px; max-width: 72ch; }
.user-app .chat-workspace .segment.dialogue>.segment-text { display: block; width: fit-content; max-width: min(70ch,85%); background: var(--message,#292a34); border: 1px solid #ffffff0b; border-radius: 17px 17px 17px 5px; padding: 13px 17px; line-height: 1.65; white-space: pre-wrap; }
.user-app .chat-workspace .segment-speaker { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: #eeebf1; }
.user-app .chat-workspace .speaker-avatar { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #ffffff12; color: #d3c8e7; font-size: 12px; }
.user-app .chat-workspace .bubble.user .segment-text { white-space: pre-wrap; }
.user-app .chat-workspace .bubble.user .segment-speaker { display:none; }
@media(max-width:680px){
 .user-app .chat-workspace .segment.dialogue>.segment-text { max-width: 92%; padding: 12px 14px; }
 .user-app .chat-workspace .segment.narration { font-size: 15px; line-height: 1.75; }
 .user-app .chat-workspace .segment-speaker { margin-top: 13px; }
}
/* Preset files keep native browser-language labels out of the page. */
#replyPresetFile[hidden]{display:none}
#replyPresetFilename,#replyPresetImportPreview li{min-width:0;max-width:100%;overflow-wrap:anywhere}
#replyPresetLibrary pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* Approved user-site visual pass, phase 1. No admin selectors or business state. */
.user-app .site-topbar { background: var(--canvas); backdrop-filter: none; }
.user-app .desktop-navigation button { display: inline-flex; align-items: center; gap: 9px; }
.user-app .diamond-icon { width: 22px; height: 26px; stroke: none; }
.user-app .balance-pill,.user-app .chat-wallet { color: #d9baff; background: #ad7de90d; border-color: #b88beb55; font-variant-numeric: tabular-nums; }
.user-app .balance-pill strong { font-size: 16px; }
.user-app .rail-story { padding: 3px; border: 1px solid #b8b2c078; background: transparent; flex-shrink: 0; }
.user-app .rail-story img { border-radius: 50%; }
.user-app .rail-story.selected { padding: 2px; }
.user-app .discovery-card { aspect-ratio: .62; }
.user-app .character-open { bottom: 0; }
.user-app .card-copy { padding: 68px 14px 18px; background: linear-gradient(transparent,#0b0b11a6 35%,#0b0b11ed); }
.user-app .card-copy h3 { padding-right: 40px; font-size: 16px; }
.user-app .card-copy p { -webkit-line-clamp: 2; padding-right: 4px; }
.user-app .card-tags { display: none; }
.user-app .card-meta { inset: auto 10px 68px auto; height: auto; gap: 5px; padding: 0; border: 0; }
.user-app .card-meta :is(.character-details,.favorite-button) { display: grid; place-items: center; padding: 9px; width: 36px; height: 36px; border: 1px solid #ffffff20; border-radius: 50%; background: #17191fd9; }
.user-app .card-meta svg { width: 18px; height: 18px; }
.user-app .favorite-button[aria-pressed="true"] svg { fill: var(--accent); }
.user-app .visual-refresh .character-stage { border-radius: 20px; border: 1px solid var(--stroke); margin-right: 16px; }
.user-app .visual-refresh .character-stage:after { display: none; }
.portrait-controls { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.portrait-controls [role="tablist"] { display: flex; gap: 4px; padding: 3px; border-radius: 30px; background: #17191fe8; }
.user-app .portrait-controls [role="tab"] { padding: 7px 12px; border-radius: 24px; background: transparent; border-color: transparent; font-size: 13px; }
.user-app .portrait-controls [aria-selected="true"] { border-color: #ffffff40; background: #ffffff0a; }
.user-app .portrait-controls>.icon-button { background: #17191fd9; font-size: 23px; }
.portrait-about { position: absolute; inset: 0; overflow-y: auto; padding: 76px 22px 24px; background: var(--panel); z-index: 2; overscroll-behavior: contain; }
.portrait-about h2 { font-size: 22px; }.portrait-about p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; }
.user-app .visual-refresh .page-chat { max-width: 1600px; background: var(--canvas); border: 0; box-shadow: none; }
.user-app .visual-refresh .page-chat>:is(.conversation-heading,.body,.composer) { background-color: var(--panel); }
.user-app .visual-refresh .conversation-heading { border-radius: 20px 20px 0 0; }
.user-app .visual-refresh .page-chat>.composer { border-radius: 0 0 20px 20px; }
.user-app .visual-refresh.portrait-collapsed .page-chat { grid-template-columns: minmax(0,1fr); }
.visual-refresh.portrait-collapsed .character-stage { display: none; }
.user-app .visual-refresh.portrait-collapsed .page-chat>:is(.conversation-heading,.body,.composer,.banner) { grid-column: 1; }
.user-app .visual-refresh .profile-toggle { display: none; align-items: center; gap: 6px; font-size: 12px; }
.user-app .visual-refresh.portrait-collapsed .profile-toggle { display: inline-flex; }
.user-app .visual-refresh .chat-wallet { display: none; }
.user-app .visual-refresh .messages>.bubble { width: fit-content; max-width: 85%; margin-right: auto; }
.user-app .visual-refresh .messages>.bubble.user { margin-left: auto; margin-right: 0; max-width: 80%; }
.user-app .visual-refresh .messages>.bubble:has(.segment) { width: 100%; max-width: 100%; background: transparent; border: 0; padding: 0; }
.user-app .visual-refresh .segment.narration { padding: 12px 0; font-style: normal; color: var(--muted); }
.user-app .visual-refresh .segment.dialogue { width: fit-content; max-width: 85%; }
.user-app .visual-refresh .segment.dialogue>.segment-text { padding: 14px 18px; border-radius: 18px; background: var(--message); border: 1px solid #ffffff09; }
.user-app .visual-refresh .segment-speaker { margin-bottom: 10px; }
@media(max-width:1100px) {
 .user-app .visual-refresh .page-chat { grid-template-columns: minmax(0,1fr); }
 .user-app .visual-refresh .character-stage { display: none; }
 .user-app .visual-refresh .page-chat>:is(.conversation-heading,.body,.composer,.banner) { grid-column: 1; }
 .user-app .visual-refresh .profile-toggle { display: inline-flex; }
}
@media(max-width:680px) {
 .user-app .desktop-navigation { display: none; }
 .user-app .mobile-navigation { justify-content: space-around; }
 .user-app .mobile-navigation button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
 .user-app .mobile-navigation svg { margin: 0; }
 .user-app .visual-refresh .chat-wallet { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 24px; font-size: 12px; }
 .user-app .visual-refresh .chat-wallet .diamond-icon { width: 17px; height: 21px; }
 .user-app .visual-refresh .profile-toggle span { display: none; }
 .user-app .visual-refresh .profile-toggle { padding: 8px; border-radius: 50%; }
 .user-app .visual-refresh .conversation-heading,.user-app .visual-refresh .page-chat>.composer { border-radius: 0; }
 .user-app .card-copy { padding: 56px 12px 14px; }
 .user-app .card-copy h3 { padding-right: 0; font-size: 15px; }
 .user-app .card-copy p { font-size: 12px; }
 .user-app .card-meta { right: 8px; bottom: 84px; }
 .user-app .card-meta .character-details { display: none; }
 .user-app .visual-refresh .messages>.bubble,.user-app .visual-refresh .segment.dialogue { max-width: 94%; }
}
.portrait-placeholder { display: grid; place-items: center; position: absolute; inset: 0; color: #c3b8d777; font: 100px Georgia,serif; background: linear-gradient(145deg,#454055,#1c1e28); }

/* Field-complete catalog and studio; purchase/consent handlers remain authoritative. */
.user-app .product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px}
.user-app .product-card{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:20px;margin:0;border-color:#b486ea66;background:linear-gradient(150deg,#392c4a66,#202229)}
.user-app .product-card h3{font-size:20px;margin:0}.user-app .product-card p{margin:0;line-height:1.5}.user-app .product-card button{margin-top:auto;min-height:44px;background:#bd91f1;color:#21182c;font-weight:650}
.user-app .product-member{border-color:#d6b47777;background:linear-gradient(150deg,#61502c55,#202229)}.user-app .product-member button{background:#e4bf7e}.user-app .product-api{border-color:#73b6e877;background:linear-gradient(150deg,#23507455,#202229)}.user-app .product-api button{background:#82c6fa}
.user-app .product-symbol{font-size:36px;line-height:1;color:#dfbe7e}.user-app .product-symbol .diamond-icon{width:38px;height:44px}
.user-app .shop-tabs{display:flex;gap:8px;margin:12px 0 22px;border-bottom:1px solid var(--border);padding-bottom:12px}.user-app .shop-tabs button{flex:1}.user-app .shop-tabs .active{color:var(--accent);background:#bd91f122}
.user-app .shop-wallet{display:flex;gap:12px;align-items:center;margin-bottom:20px}.user-app .shop-wallet strong{font-size:28px;color:#d6b0ff}.user-app .shop-wallet .diamond-icon{width:28px;height:32px}.user-app .shop-wallet button{margin-left:auto}
.user-app dialog[data-kind=purchase]{width:min(1040px,calc(100vw - 32px));max-width:1040px}.user-app dialog[data-kind=studio]{width:min(960px,calc(100vw - 32px));max-width:960px}
.user-app .reply-price-visual{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.user-app .reply-price-visual .diamond-icon{width:15px;height:19px}.user-app .visual-refresh .composer-balance{display:none}
.user-app .page-studio .studio-primary-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}.user-app .studio-primary-actions button:nth-child(-n+2){min-height:48px;background:#bf93ed22;border-color:#b486ea77;font-weight:650}
.user-app .studio-character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}.user-app .studio-character{margin:0;min-width:0;overflow:hidden}.user-app .studio-cover{width:100%;aspect-ratio:.8;object-fit:cover;border-radius:12px}.user-app .studio-character h3{margin:12px 0}.user-app .studio-character>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.user-app .studio-character .actions{display:flex;flex-wrap:wrap;gap:8px}.user-app .studio-character .actions button{min-height:42px}
@media(max-width:640px){.user-app .studio-primary-actions button{flex:1 1 44%;padding:12px 8px}.user-app .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.user-app .product-member,.user-app .product-api{grid-column:1/-1}.user-app .product-card{padding:16px}.user-app .product-card h3{font-size:17px}.user-app .product-card p{font-size:13px}.user-app .studio-character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.user-app .studio-character{padding:12px}.user-app .studio-character .actions button{flex:1 1 100%;font-size:12px}.user-app dialog[data-kind=purchase],.user-app dialog[data-kind=studio]{width:calc(100vw - 16px);padding:18px}}

.user-app .studio-library-tools{margin-bottom:24px}.user-app .studio-library-tools summary{cursor:pointer;padding:12px 0}.user-app .studio-primary-actions button:first-child:before{content:'＋';margin-right:8px;font-size:22px}.user-app .studio-primary-actions button:nth-child(2):before{content:'↥';margin-right:8px;font-size:22px}.user-app .studio-character .studio-cover{display:block}.user-app .page-studio .conversation-heading{margin-bottom:18px}

.user-app #storySearch{max-width:640px;margin:6px 0 22px;padding:12px 16px;width:100%}.user-app .story-list{max-width:1200px}.user-app .story-list .story-summary{position:relative;padding:18px 18px 18px 88px;min-height:110px;margin:0;border-radius:0;background:transparent;border:0;border-bottom:1px solid var(--stroke)}.user-app .story-list-avatar{position:absolute;left:10px;top:20px;width:56px;height:56px;object-fit:cover;border-radius:50%}.user-app .story-list .story-name{margin:4px 0;font-size:13px}.user-app .story-list .story-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:6px 0;color:var(--muted)}.user-app .story-summary[hidden]{display:none}.user-app .story-summary-footer{gap:10px}.user-app .story-summary-footer button{margin-left:auto}.user-app [data-story-sentinel]{height:2px}
@media(max-width:640px){.user-app .story-list .story-summary{padding:14px 8px 14px 64px}.user-app .story-list-avatar{left:0;top:16px;width:48px;height:48px}.user-app .story-summary-footer small{font-size:10px}}
/* Opening selection is independent of the conversation's scroll area. */
.opening-selector { display:flex; align-items:center; gap:8px; min-width:0; padding:10px 16px; }
.opening-tabs { display:flex; gap:8px; overflow-x:auto; min-width:0; flex:1; scrollbar-width:thin; }
.opening-tabs button { flex:0 0 auto; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; border:1px solid var(--stroke); border-radius:20px; padding:9px 14px; background:transparent; color:var(--muted); }
.opening-tabs button[aria-selected=true] { background:#bda0ee25; color:#e2ceff; border-color:#bda0ee; }
.opening-add { flex:0 0 36px; width:36px; height:36px; }
.user-app .visual-refresh .character-stage { display:flex; flex-direction:column; }
#character-panel-portrait { position:relative; flex:1; min-height:180px; overflow:hidden; }
#character-panel-portrait[hidden] { display:none; }
.user-app .visual-refresh .character-stage .portrait-about { position:relative; inset:auto; flex:1; min-height:180px; }
.profile-openings { position:relative; z-index:3; flex:0 1 42%; min-height:170px; background:var(--panel); display:flex; flex-direction:column; padding:12px 14px; border-top:1px solid var(--stroke); overflow:hidden; }
.profile-openings h3 { font-size:14px; margin:0 0 6px; }
.profile-openings .opening-selector { padding:0 0 8px; flex-shrink:0; }
.opening-profile-preview { flex:1; overflow:auto; min-height:48px; font-size:14px; line-height:1.65; overflow-wrap:anywhere; white-space:pre-wrap; }
.opening-profile-preview .segment { margin:8px 0; }.opening-profile-preview .segment-speaker { display:flex; align-items:center; gap:6px; font-weight:600; }.opening-profile-preview .speaker-avatar { display:none; }
.profile-openings>.primary { margin-top:10px; flex-shrink:0; }
#dialog:has(.profile-openings) .portrait-about { position:static; padding:0; }
#dialog .profile-openings { min-height:280px; max-height:55dvh; border:0; padding:0; }
#dialog:has(#sceneName) { width:min(760px,calc(100vw - 24px)); }
#dialog:has(#sceneName) fieldset { border:1px solid var(--stroke); border-radius:14px; padding:14px; margin:14px 0; }
#dialog:has(#sceneName) input,#dialog:has(#sceneName) textarea,#dialog:has(#sceneName) select { width:100%; box-sizing:border-box; }
@media(max-width:1100px) { .user-app .visual-refresh .character-stage { display:none; } }
@media(max-width:680px) { .opening-selector { padding:8px 12px; }.opening-tabs button { max-width:160px; padding:8px 12px; font-size:13px; } }
/* The dialogue wrapper owns the width cap; a second percentage cap squeezes short lines. */
.user-app .visual-refresh .segment.dialogue>.segment-text { max-width:100%; box-sizing:border-box; }

/* Shared reward amounts and server-quoted future check-in schedule. */
.user-app .reward-amount{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;white-space:nowrap;color:#d6b0ff}
.user-app .reward-amount .diamond-icon{width:18px;height:22px;flex:none;stroke:none}
.user-app .checkin-days{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.user-app .checkin-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-width:0;padding:12px 4px;border:1px solid #8a686055;border-radius:12px;text-align:center;font-size:12px}
.user-app .checkin-days .checkin-day>span{border:0;padding:0;border-radius:0;font-size:inherit}
.user-app .checkin-days .reward-amount{display:inline-flex;flex-direction:row}
.user-app .checkin-day small{font-size:11px;color:var(--muted,#aaa)}
.user-app .checkin-day.today{border-color:#b593e8;background:#9866cc22}
.user-app .checkin-day.claimed:not(.today){opacity:.65}

/* The store and check-in tabs share one stable dialog frame. */
.user-app dialog:is([data-kind="purchase"],[data-kind="rewards"]){box-sizing:border-box;width:min(1040px,calc(100vw - 32px));max-width:1040px;height:min(780px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);padding:24px;overflow:hidden}
.user-app dialog:is([data-kind="purchase"],[data-kind="rewards"])[open]{display:flex;flex-direction:column}
.user-app dialog:is([data-kind="purchase"],[data-kind="rewards"])>.row{flex:none;margin:0 0 12px}
.user-app .shop-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.user-app .shop-content>.shop-tabs{position:sticky;top:0;z-index:1;margin:0 0 20px;background:var(--panel);padding:4px 0 0;gap:6px}
.user-app .shop-tabs button{background:transparent;border-color:transparent;border-radius:0;padding:12px 16px;color:var(--muted);border-bottom:2px solid transparent}
.user-app .shop-tabs button.active{color:var(--text);background:#c1b0e30b;border-bottom-color:var(--accent)}
.user-app .reward-layout{max-width:720px;margin:0 auto;padding:0 8px}
.user-app .checkin-section{padding:0 0 24px}
.user-app .checkin-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;margin-bottom:16px;background:#ffffff04;border:1px solid #ffffff09;border-radius:14px}
.user-app .checkin-summary h3{font-size:14px;margin:0;color:var(--muted);font-weight:500}
.user-app .checkin-summary>.reward-amount{font-size:28px;line-height:1.2;gap:10px;color:#dcc7ff}
.user-app .checkin-summary>.reward-amount .diamond-icon{width:26px;height:30px}
.user-app .checkin-days{gap:10px;margin:0 0 24px;grid-auto-rows:1fr}
.user-app .checkin-day{position:relative;box-sizing:border-box;height:108px;min-height:0;padding:10px 6px;gap:7px;border-color:#ffffff0c;background:#ffffff03;border-radius:14px;color:var(--muted)}
.user-app .checkin-days .checkin-day>.reward-amount{font-size:20px;color:var(--text)}
.user-app .checkin-day.today{border-color:#bca2e18c;background:#baa0ef15;color:var(--text)}
.user-app .checkin-day.today>.reward-amount{color:#dcc7ff}
.user-app .checkin-day small{font-size:10px;line-height:1.2}.user-app .checkin-day.today small{color:#ddcbff;background:#baa0ef1c;padding:3px 7px;border-radius:20px}
.user-app .checkin-claim{display:flex;justify-content:center;margin:0}
.user-app .checkin-claim>button{width:100%;min-height:48px;min-width:0;background:var(--accent);color:#201c28;border-radius:14px;font-weight:650}
.user-app .checkin-claim>.badge{padding:10px 24px;border-radius:14px;color:var(--muted)}
.user-app .welcome-reward-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:#ffffff04;border-radius:14px;margin-bottom:18px}
.user-app .welcome-reward-row>div{display:flex;align-items:center;gap:12px;font-size:13px}
.user-app .welcome-reward-row>button{font-size:12px;padding:8px 12px;background:transparent}
.user-app .checkin-rules{padding:8px 0;color:var(--muted);font-size:12px}
.user-app .checkin-rules summary{cursor:pointer}
.user-app .checkin-rules p{font-size:12px;line-height:1.7}
@media(max-width:640px){
 .user-app dialog:is([data-kind="purchase"],[data-kind="rewards"]){width:100%;max-width:100%;height:90dvh;max-height:90dvh;padding:18px 16px calc(18px + env(safe-area-inset-bottom));margin:0;inset:auto 0 0}
 .user-app .reward-layout{padding:0}
 .user-app .checkin-summary{padding:16px;margin-bottom:16px}
 .user-app .checkin-day{height:108px;min-height:0;padding:10px 3px;gap:7px}
 .user-app .checkin-days{gap:8px;margin-bottom:22px}
 .user-app .checkin-claim>button{width:100%}
 .user-app .welcome-reward-row{padding:14px 12px;flex-wrap:wrap;gap:8px}
 .user-app .welcome-reward-row>div{gap:8px}
}

.navigation-loading .site-topbar{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.navigation-loading nav{display:flex;gap:12px}.navigation-loading nav button{padding:10px 16px;border-radius:12px}.navigation-loading nav button.active{background:var(--accent);color:#201c28}.navigation-placeholder{padding:32px;max-width:1200px;width:100%;margin:auto}.navigation-placeholder h1{font-size:28px}.navigation-placeholder>p{color:var(--muted)}.loading-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}.loading-card{height:230px;border-radius:18px;background:var(--panel-raised)}@media(max-width:640px){.navigation-placeholder{padding:20px}.loading-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.loading-card{height:180px}.navigation-loading .site-topbar{padding:16px}.navigation-loading nav{gap:4px}.navigation-loading nav button{padding:8px}}

/* Approved store composition; shared by the store and chat purchase panel. */
.user-app .purchase-catalog{display:grid;gap:28px}
.user-app .purchase-group{min-width:0}
.user-app .purchase-group h2{font-size:24px;line-height:1.25;margin:0 0 10px;font-weight:600;letter-spacing:-.3px}
.user-app .purchase-group .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.user-app .purchase-catalog .product-card{min-width:0;gap:0;border:1px solid #3a3e47;border-radius:12px;background:#22252b;padding:18px 27px 12px;color:#f1f2f6;box-shadow:none}
.user-app .purchase-catalog h3{font-size:21px;line-height:1.3;letter-spacing:-.3px;overflow-wrap:anywhere}
.user-app .purchase-catalog .product-heading{border-bottom:1px solid #3a3e47;padding-bottom:12px;margin-bottom:16px}
.user-app .purchase-catalog .product-heading p{color:#bfc3cf;font-size:16px;margin-top:3px}
.user-app .purchase-catalog .product-benefit{font-size:15px;line-height:1.6;color:#d9dce5;min-height:52px;margin-bottom:18px;overflow-wrap:anywhere}
.user-app .purchase-catalog .product-eligibility{margin:0 0 12px;color:#d9dce5}
.user-app .purchase-catalog button{min-height:47px;margin: auto 0 0;padding:10px 18px;border:1px solid #c1a6e4;border-radius:7px;background:#b69add;color:#17101f;font-size:18px;line-height:24px;font-weight:600;box-shadow:none;white-space:normal;overflow-wrap:anywhere}
.user-app .purchase-catalog button:disabled{opacity:.55;cursor:not-allowed}
.user-app .purchase-catalog button:focus-visible{outline:2px solid #e5d8f8;outline-offset:4px}
.user-app .purchase-catalog .product-terms{font-size:14px;line-height:1.4;color:#bfc3cf;text-align:center;margin:11px 0 0}
.user-app .purchase-catalog .product-diamonds{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 16px 28px;min-height:80px}
.user-app .purchase-catalog .product-quantity{display:flex;align-items:center;gap:27px;min-width:0}
.user-app .purchase-catalog .product-quantity h3{min-width:0;font-size:24px}
.user-app .purchase-catalog .product-symbol{flex-shrink:0;color:#b69add}
.user-app .purchase-catalog .product-symbol .diamond-icon{width:34px;height:34px}
.user-app .purchase-catalog .product-diamonds button{margin:0;flex:0 0 auto;min-width:152px;max-width:55%}
@media(max-width:600px){
 .user-app .purchase-catalog{gap:21px}
 .user-app .purchase-group h2{font-size:20px;margin-bottom:8px}
 .user-app .purchase-group .product-grid{grid-template-columns:1fr;gap:9px}
 .user-app .purchase-catalog .product-card{padding:12px 16px 10px;border-radius:10px}
 .user-app .purchase-catalog h3{font-size:18px}
 .user-app .purchase-catalog .product-heading{padding-bottom:8px;margin-bottom:11px}
 .user-app .purchase-catalog .product-heading p{font-size:14px;margin-top:1px}
 .user-app .purchase-catalog .product-benefit{font-size:13px;min-height:40px;margin-bottom:11px}
 .user-app .purchase-catalog button{min-height:38px;font-size:16px;line-height:20px;padding:8px 12px;border-radius:5px}
 .user-app .purchase-catalog .product-terms{font-size:12px;margin-top:7px}
 .user-app .purchase-catalog .product-diamonds{padding:13px 13px 13px 23px;min-height:65px}
 .user-app .purchase-catalog .product-quantity{gap:20px}
 .user-app .purchase-catalog .product-quantity h3{font-size:20px}
 .user-app .purchase-catalog .product-symbol .diamond-icon{width:29px;height:29px}
 .user-app .purchase-catalog .product-diamonds button{min-width:100px;font-size:15px}
}
@media(max-width:360px){.user-app .purchase-catalog .product-quantity{gap:12px}.user-app .purchase-catalog .product-diamonds{padding-left:17px}}