/* ==========================================================================
   QuizioMatch Redesign 2026 — profile layer. See qm/qm-base.css for tokens.
   Covers: #profileScreen, #quizBuilderScreen, #creditsScreen, #lwmModal,
   #notificationSettingsScreen, #privacySettingsScreen, #languageSettingsScreen,
   #termsScreen, #supportChatScreen, #withdrawalInfoModal, #deleteAccountModal,
   #cardModal, tutorial overlay (.tut-*).
   Rules are scoped to those ids; display/visibility of screens and overlays
   is never touched here.
   ========================================================================== */

/* ── Shared bits ────────────────────────────────────────────────────────── */
#profileScreen,
#quizBuilderScreen,
#creditsScreen,
#notificationSettingsScreen,
#privacySettingsScreen,
#languageSettingsScreen,
#termsScreen,
#supportChatScreen {
    background: var(--qm-bg) !important;
    font-family: var(--qm-sans) !important;
    color: var(--qm-fg);
}

/* Settings-style screen header: round back button + big headline */
#notificationSettingsScreen .profile-header,
#privacySettingsScreen .profile-header,
#languageSettingsScreen .profile-header,
#termsScreen .profile-header {
    background: var(--qm-bg);
    border-bottom: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 6px;
    color: var(--qm-fg);
}
#notificationSettingsScreen .profile-header h2,
#privacySettingsScreen .profile-header h2,
#languageSettingsScreen .profile-header h2,
#termsScreen .profile-header h2 {
    font-family: var(--qm-disp);
    font-weight: 800;
    font-size: clamp(28px, 8.4vw, 34px);
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 18px 0 0;
    color: var(--qm-fg);
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

#notificationSettingsScreen .back-btn,
#privacySettingsScreen .back-btn,
#languageSettingsScreen .back-btn,
#termsScreen .back-btn,
#supportChatScreen .back-btn,
#creditsScreen .back-btn,
#quizBuilderScreen .qb-back-link,
#profileScreen .qm-pf-ib {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--qm-s2);
    color: var(--qm-fg);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: none;
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
    -webkit-tap-highlight-color: transparent;
}
#notificationSettingsScreen .back-btn:hover,
#privacySettingsScreen .back-btn:hover,
#languageSettingsScreen .back-btn:hover,
#termsScreen .back-btn:hover,
#supportChatScreen .back-btn:hover,
#creditsScreen .back-btn:hover,
#quizBuilderScreen .qb-back-link:hover,
#profileScreen .qm-pf-ib:hover { background: var(--qm-s3); }
#notificationSettingsScreen .back-btn:active,
#privacySettingsScreen .back-btn:active,
#languageSettingsScreen .back-btn:active,
#termsScreen .back-btn:active,
#supportChatScreen .back-btn:active,
#creditsScreen .back-btn:active,
#quizBuilderScreen .qb-back-link:active,
#profileScreen .qm-pf-ib:active { transform: scale(.92); }
#notificationSettingsScreen .back-btn:focus-visible,
#privacySettingsScreen .back-btn:focus-visible,
#languageSettingsScreen .back-btn:focus-visible,
#termsScreen .back-btn:focus-visible,
#supportChatScreen .back-btn:focus-visible,
#creditsScreen .back-btn:focus-visible,
#quizBuilderScreen .qb-back-link:focus-visible,
#profileScreen .qm-pf-ib:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#notificationSettingsScreen .back-btn svg,
#privacySettingsScreen .back-btn svg,
#languageSettingsScreen .back-btn svg,
#termsScreen .back-btn svg,
#supportChatScreen .back-btn svg,
#creditsScreen .back-btn svg,
#quizBuilderScreen .qb-back-link svg { width: 22px; height: 22px; }

body.rtl #notificationSettingsScreen .back-btn svg,
body.rtl #privacySettingsScreen .back-btn svg,
body.rtl #languageSettingsScreen .back-btn svg,
body.rtl #termsScreen .back-btn svg,
body.rtl #supportChatScreen .back-btn svg,
body.rtl #creditsScreen .back-btn svg,
body.rtl #quizBuilderScreen .qb-back-link svg { transform: scaleX(-1); }

/* ==========================================================================
   PROFILE  (#profileScreen → SProfile / SProfile2)
   ========================================================================== */
#profileScreen .profile-scroll-body {
    padding-bottom: 0;
}

/* Top action row (share / edit) */
#profileScreen .qm-pf-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 20px 0;
    flex: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    box-sizing: border-box;
}
#profileScreen .qm-pf-ib svg { width: 20px; height: 20px; }

/* Avatar + identity side by side */
#profileScreen .qm-pf-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 20px 0;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    box-sizing: border-box;
    flex: none;
}

/* Hero photo → 96px squircle avatar */
#profileScreen .pv2-hero {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px;
    min-height: 96px !important;
    max-height: 96px !important;
    aspect-ratio: 1 / 1;
    flex: none;
    padding: 0 !important;
    border-radius: 36%;
    overflow: hidden;
    background: radial-gradient(120% 90% at 28% 18%, #C2185B 0%, #3A1424 75%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
    isolation: isolate;
    transition: transform .18s var(--qm-ease-spring);
}
#profileScreen .pv2-hero:hover { transform: translateY(-1px); }
#profileScreen .pv2-hero:active { transform: scale(.96); }
#profileScreen .pv2-hero-scrim { display: none; }
#profileScreen .pv2-hero-empty { gap: 0; }
#profileScreen .pv2-hero-empty-ring {
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    animation: none;
}
#profileScreen .pv2-hero-empty-ring svg { width: 22px; height: 22px; }
/* The two hint lines don't fit a 96px tile — keep them for screen readers. */
#profileScreen .pv2-hero-empty-t,
#profileScreen .pv2-hero-empty-s {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
/* "Change" pill → small camera badge in the avatar corner */
#profileScreen .pv2-hero-change {
    bottom: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 10, 15, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
#profileScreen .pv2-hero-change span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
#profileScreen .pv2-hero-change:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
body.rtl #profileScreen .pv2-hero-change { right: auto; left: 6px; }

#profileScreen .pv2-identity {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
    max-width: none;
    width: auto;
}
#profileScreen .pv2-name {
    font-family: var(--qm-disp);
    font-size: clamp(30px, 8.6vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--qm-fg);
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
#profileScreen .pv2-motto {
    margin: 6px 0 0;
    font-size: 13px;
    font-style: italic;
    line-height: 1.4;
    color: var(--qm-fg2);
    overflow-wrap: anywhere;
}
#profileScreen .pv2-motto[hidden] { display: none; }
#profileScreen .pv2-email {
    font-size: 13px;
    color: var(--qm-fg3);
    margin-top: 6px;
}
#profileScreen .pv2-autosave {
    margin-top: 8px;
    background: rgba(74, 222, 128, .14);
    color: var(--qm-green);
}

/* Content column */
#profileScreen .pv2-content {
    gap: 12px;
    padding: 20px 20px calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ── "Dein Quiz" — solid pink card ─────────────────────────────────────── */
#profileScreen #profileQuizBtn {
    gap: 14px;
    padding: 18px;
    margin: 0;
    border: 0;
    border-radius: 26px;
    background: var(--qm-pink);
    color: #fff;
    box-shadow: 0 14px 30px rgba(233, 30, 99, .22);
    transition: transform .16s var(--qm-ease-spring);
}
#profileScreen #profileQuizBtn:hover { transform: translateY(-2px); }
#profileScreen #profileQuizBtn:active { transform: scale(.98); }
#profileScreen #profileQuizBtn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring), 0 14px 30px rgba(233, 30, 99, .22); }
#profileScreen #profileQuizBtn .pv2-quiz-cta-icon {
    width: 50px;
    height: 50px;
    border-radius: 30%;
    background: rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    font-size: 26px;
    transform: rotate(-6deg);
}
#profileScreen #profileQuizBtn .pv2-menu-label {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}
#profileScreen #profileQuizBtn .pv2-menu-desc {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, .85);
}
/* chevron → cream xs round button */
#profileScreen #profileQuizBtn > svg {
    width: 36px;
    height: 36px;
    padding: 9px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--qm-cream);
    stroke: var(--qm-ink);
    stroke-width: 2.6;
    box-shadow: 0 3px 0 var(--qm-cream-edge);
}
body.rtl #profileScreen #profileQuizBtn > svg { transform: scaleX(-1); }

/* ── Edit form ─────────────────────────────────────────────────────────── */
#profileScreen .pv2-form {
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-card);
    padding: 20px 16px;
    gap: 16px;
    margin-top: 8px;
}
#profileScreen .pv2-label {
    font: 600 13px/1.3 var(--qm-sans);
    text-transform: none;
    letter-spacing: 0;
    color: var(--qm-fg2);
    padding-left: 4px;
}
#profileScreen .pv2-input {
    min-height: 58px;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--qm-r-field);
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 500 15px/1.4 var(--qm-sans);
    box-shadow: none;
    transition: box-shadow .16s ease;
}
#profileScreen .pv2-input::placeholder { color: var(--qm-fg3); }
#profileScreen .pv2-input:focus,
#profileScreen .pv2-input:focus-visible {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--qm-pink);
}
#profileScreen .pv2-input--disabled { opacity: .6; }
#profileScreen .pv2-textarea { min-height: 76px; }
#profileScreen .pv2-field [data-i18n="profileScreen.bioHint"] {
    color: var(--qm-fg3) !important;
    font-size: 12px !important;
    padding-left: 4px;
}
#profileScreen .pv2-save-btn {
    height: 56px;
    padding: 0 24px;
    margin-top: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px var(--qm-sans);
    letter-spacing: -.01em;
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease, opacity .14s ease;
}
#profileScreen .pv2-save-btn:hover { transform: translateY(-1px); }
#profileScreen .pv2-save-btn:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
#profileScreen .pv2-save-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring), var(--qm-shadow-pink-btn); }

/* ── Grouped list rows (.li) ───────────────────────────────────────────── */
#profileScreen .pv2-menu-group {
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-card);
    padding: 0 16px;
}
#profileScreen .pv2-menu-row {
    min-height: 64px;
    padding: 14px 0;
    gap: 14px;
    border-bottom: 0;
    background: transparent;
    border-radius: 0;
    transition: transform .14s var(--qm-ease-spring);
}
#profileScreen .pv2-menu-row + .pv2-menu-row { border-top: 1px solid var(--qm-line); }
#profileScreen .pv2-menu-row:hover .pv2-menu-label { color: #fff; }
#profileScreen .pv2-menu-row:hover .pv2-menu-chevron { transform: translateX(2px); }
#profileScreen .pv2-menu-row:active { background: transparent; transform: scale(.985); }
#profileScreen .pv2-menu-row:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; border-radius: 12px; }
#profileScreen .pv2-menu-icon,
#profileScreen .pv2-menu-icon--pink,
#profileScreen .pv2-menu-icon--muted {
    width: 44px;
    height: 44px;
    border-radius: var(--qm-r-icon);
    background: var(--qm-s2);
    color: var(--qm-fg);
}
#profileScreen .pv2-menu-icon svg { width: 20px; height: 20px; }
#profileScreen .pv2-menu-icon--danger {
    width: 44px;
    height: 44px;
    border-radius: var(--qm-r-icon);
    background: var(--qm-s2);
    color: var(--qm-red-soft);
}
#profileScreen .pv2-menu-label {
    font: 600 15px/1.3 var(--qm-sans);
    color: var(--qm-fg);
}
#profileScreen .pv2-menu-desc {
    font-size: 13px;
    line-height: 1.35;
    color: var(--qm-fg3);
}
#profileScreen .pv2-menu-row--danger .pv2-menu-label { color: var(--qm-red-soft); }
#profileScreen .pv2-menu-row--danger .pv2-menu-desc { color: rgba(255, 107, 97, .6); }
#profileScreen .pv2-menu-chevron {
    width: 18px;
    height: 18px;
    stroke: var(--qm-fg3);
    transition: transform .16s var(--qm-ease-spring);
}
#profileScreen .pv2-menu-row--danger .pv2-menu-chevron { stroke: rgba(255, 107, 97, .5); }
body.rtl #profileScreen .pv2-menu-row:hover .pv2-menu-chevron { transform: scaleX(-1) translateX(2px); }

/* FAQ accordion inside a group */
#profileScreen .pv2-faq-group { padding: 0 16px; }
#profileScreen .pv2-faq-group.pv2-faq-open .pv2-faq-body { border-top-color: var(--qm-line); }
#profileScreen .pv2-faq-item { border-bottom-color: var(--qm-line); }
#profileScreen .pv2-faq-q { padding: 14px 2px; border-radius: 12px; }
#profileScreen .pv2-faq-q:hover .pv2-faq-q-text { color: #fff; }
#profileScreen .pv2-faq-q:active { background: transparent; }
#profileScreen .pv2-faq-q-text { font: 600 14px/1.35 var(--qm-sans); color: var(--qm-fg); }
#profileScreen .pv2-faq-q-icon { color: var(--qm-pink-soft); }
#profileScreen .pv2-faq-a { color: var(--qm-fg2); font-size: 13.5px; line-height: 1.6; padding: 0 2px; }
#profileScreen .pv2-faq-item.pv2-faq-item-open .pv2-faq-a { padding: 0 2px 14px; }

#profileScreen .pv2-footer { padding: 12px 0 0; }
#profileScreen .pv2-footer-ver,
#profileScreen .pv2-footer-tag { font-size: 13px; color: var(--qm-fg3); }

/* ==========================================================================
   SETTINGS  (#notificationSettingsScreen → SNotif, #privacySettingsScreen → SPrivacy)
   ========================================================================== */
#notificationSettingsScreen .settings-container,
#privacySettingsScreen .settings-container {
    padding: 16px 20px calc(110px + env(safe-area-inset-bottom, 0px));
    color: var(--qm-fg);
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
}
#notificationSettingsScreen .settings-section,
#privacySettingsScreen .settings-section {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 24px;
}
#notificationSettingsScreen .settings-section h3,
#privacySettingsScreen .settings-section h3 {
    font: 600 13px/1.3 var(--qm-sans);
    color: var(--qm-fg2);
    margin: 0 4px 2px;
}
#notificationSettingsScreen .settings-hint,
#privacySettingsScreen .settings-hint {
    font-size: 13px;
    color: var(--qm-fg3);
    margin: 0 4px 10px;
}
/* items form one grouped s1 card */
#notificationSettingsScreen .setting-item,
#privacySettingsScreen .setting-item {
    background: var(--qm-s1);
    min-height: 64px;
    padding: 14px 16px;
    gap: 14px;
    border: 0;
    border-radius: 0;
    position: relative;
}
#notificationSettingsScreen .settings-hint + .setting-item,
#privacySettingsScreen .settings-hint + .setting-item { border-radius: var(--qm-r-card) var(--qm-r-card) 0 0; }
#notificationSettingsScreen .setting-item:last-child,
#privacySettingsScreen .setting-item:last-child { border-radius: 0 0 var(--qm-r-card) var(--qm-r-card); }
#notificationSettingsScreen .settings-hint + .setting-item:last-child,
#privacySettingsScreen .settings-hint + .setting-item:last-child { border-radius: var(--qm-r-card); }
#notificationSettingsScreen .setting-item + .setting-item::before,
#privacySettingsScreen .setting-item + .setting-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: var(--qm-line);
}
#notificationSettingsScreen .setting-info,
#privacySettingsScreen .setting-info { align-items: center; gap: 14px; min-width: 0; }
#notificationSettingsScreen .setting-icon,
#privacySettingsScreen .setting-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--qm-r-icon);
    background: var(--qm-s2);
    color: var(--qm-fg);
}
#notificationSettingsScreen .setting-info strong,
#privacySettingsScreen .setting-info strong {
    font: 600 15px/1.3 var(--qm-sans);
    color: var(--qm-fg);
    margin: 0 0 2px;
}
#notificationSettingsScreen .setting-info p,
#privacySettingsScreen .setting-info p {
    font-size: 13px;
    line-height: 1.35;
    color: var(--qm-fg3);
    margin: 0;
}
#notificationSettingsScreen .settings-footer-note,
#privacySettingsScreen .settings-footer-note {
    font-size: 13px;
    color: var(--qm-fg3);
    text-align: start;
    padding: 0 4px;
    margin: 0;
}

/* .tg toggle: 52×32, track s3, on = pink, white knob */
#notificationSettingsScreen .toggle-switch,
#privacySettingsScreen .toggle-switch {
    width: 52px;
    height: 32px;
    flex: none;
    display: inline-block;
}
#notificationSettingsScreen .toggle-slider,
#privacySettingsScreen .toggle-slider {
    background: var(--qm-s3);
    border-radius: 999px;
    box-shadow: none;
    transition: background-color .18s ease;
}
#notificationSettingsScreen .toggle-slider::before,
#privacySettingsScreen .toggle-slider::before {
    width: 24px;
    height: 24px;
    left: 4px;
    bottom: 4px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: transform .22s var(--qm-ease-spring);
}
#notificationSettingsScreen .toggle-switch input:checked + .toggle-slider,
#privacySettingsScreen .toggle-switch input:checked + .toggle-slider {
    background: var(--qm-pink) !important;
    box-shadow: none !important;
}
#notificationSettingsScreen .toggle-switch input:checked + .toggle-slider::before,
#privacySettingsScreen .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
#notificationSettingsScreen .toggle-switch:hover .toggle-slider::before,
#privacySettingsScreen .toggle-switch:hover .toggle-slider::before { box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
#notificationSettingsScreen .toggle-switch input:focus-visible + .toggle-slider,
#privacySettingsScreen .toggle-switch input:focus-visible + .toggle-slider { box-shadow: var(--qm-focus-ring) !important; }
#notificationSettingsScreen .toggle-switch:active .toggle-slider::before,
#privacySettingsScreen .toggle-switch:active .toggle-slider::before { transform: scale(.9); }
#notificationSettingsScreen .toggle-switch:active input:checked + .toggle-slider::before,
#privacySettingsScreen .toggle-switch:active input:checked + .toggle-slider::before { transform: translateX(20px) scale(.9); }
body.rtl #notificationSettingsScreen .toggle-switch input:checked + .toggle-slider::before,
body.rtl #privacySettingsScreen .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Privacy visibility: two cards side by side, cream when selected */
#privacySettingsScreen .radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
}
#privacySettingsScreen .radio-option {
    position: relative;
    background: var(--qm-s2);
    border: 0;
    border-radius: 26px;
    padding: 16px;
    color: var(--qm-fg);
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
}
#privacySettingsScreen .radio-option:hover { background: var(--qm-s3); transform: translateY(-1px); }
#privacySettingsScreen .radio-option:active { transform: scale(.98); }
#privacySettingsScreen .radio-option:has(input:checked) {
    background: var(--qm-cream);
    color: var(--qm-ink);
    box-shadow: 0 0 0 3px var(--qm-pink);
}
#privacySettingsScreen .radio-option:has(input:focus-visible) { box-shadow: var(--qm-focus-ring); }
#privacySettingsScreen .radio-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
#privacySettingsScreen .radio-check {
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, .24);
    background: transparent;
}
#privacySettingsScreen .radio-option input:checked ~ .radio-content .radio-check {
    border-color: var(--qm-pink);
    background: var(--qm-pink);
}
#privacySettingsScreen .radio-option input:checked ~ .radio-content .radio-check::after { width: 8px; height: 8px; }
#privacySettingsScreen .radio-content strong {
    font: 800 15px/1.3 var(--qm-sans);
    color: inherit;
    margin: 0 0 2px;
}
#privacySettingsScreen .radio-content p {
    font-size: 13px;
    line-height: 1.35;
    color: var(--qm-fg3);
}
#privacySettingsScreen .radio-option:has(input:checked) .radio-content p { color: rgba(26, 14, 20, .66); }

/* ==========================================================================
   LANGUAGE  (#languageSettingsScreen → SLang)
   ========================================================================== */
#languageSettingsScreen .lang-settings-body {
    padding: 8px 20px calc(110px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
}
#languageSettingsScreen .lang-settings-hint {
    font: 600 13px/1.3 var(--qm-sans);
    color: var(--qm-fg2);
    margin: 4px 4px 16px;
}
#languageSettingsScreen .lang-selector-list { gap: 8px; }
#languageSettingsScreen .lang-item {
    min-height: 58px;
    padding: 12px 16px;
    gap: 14px;
    border: 0;
    border-radius: 22px;
    background: var(--qm-s1);
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
}
#languageSettingsScreen .lang-item:hover { background: var(--qm-s2); transform: translateY(-1px); }
#languageSettingsScreen .lang-item:active { transform: scale(.98); }
#languageSettingsScreen .lang-item:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
#languageSettingsScreen .lang-item--active,
#languageSettingsScreen .lang-item--active:hover {
    background: var(--qm-cream);
    color: var(--qm-ink);
}
#languageSettingsScreen .lang-item__flag {
    width: auto;
    height: auto;
    background: none;
    font: 800 15px/1 var(--qm-sans);
    letter-spacing: .02em;
    min-width: 34px;
    color: var(--qm-fg2);
}
#languageSettingsScreen .lang-item--active .lang-item__flag { background: none; color: rgba(26, 14, 20, .55); }
#languageSettingsScreen .lang-item__name { font: 700 15px/1.3 var(--qm-sans); color: var(--qm-fg); }
#languageSettingsScreen .lang-item--active .lang-item__name { color: var(--qm-ink); }
#languageSettingsScreen .lang-item__code { font-size: 12px; color: var(--qm-fg3); }
#languageSettingsScreen .lang-item--active .lang-item__code { color: rgba(26, 14, 20, .55); }
#languageSettingsScreen .lang-item__check {
    width: 28px;
    height: 28px;
    background: var(--qm-pink);
    color: #fff;
}
#languageSettingsScreen .lang-item__check svg { width: 16px; height: 16px; stroke: #fff; }

/* ==========================================================================
   TERMS  (#termsScreen → STerms)
   ========================================================================== */
#termsScreen .legal-container {
    padding: 14px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
}
#termsScreen .legal-lang-switch {
    background: var(--qm-s1);
    border-radius: 999px;
    padding: 5px;
    gap: 4px;
    box-shadow: none;
    margin-bottom: 16px;
}
#termsScreen .legal-lang-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    color: var(--qm-fg2);
    font: 600 14px var(--qm-sans);
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease, color .14s ease;
}
#termsScreen .legal-lang-btn:hover { background: var(--qm-s2); color: var(--qm-fg); }
#termsScreen .legal-lang-btn:active { transform: scale(.96); }
#termsScreen .legal-lang-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#termsScreen .legal-lang-btn.is-active {
    background: var(--qm-cream);
    color: var(--qm-ink);
    box-shadow: none;
}
#termsScreen .legal-content {
    background: var(--qm-s1);
    border-radius: 26px;
    padding: 22px 20px;
    box-shadow: none;
    color: var(--qm-fg2);
    font-size: 14px;
    line-height: 1.65;
}
#termsScreen .legal-content:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
#termsScreen .legal-doc h1 {
    font-family: var(--qm-disp);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--qm-fg);
}
#termsScreen .legal-doc h2,
#termsScreen .legal-doc h3 {
    color: var(--qm-fg);
    font-weight: 800;
    letter-spacing: -.01em;
}
#termsScreen .legal-doc p,
#termsScreen .legal-doc li { color: var(--qm-fg2); }
#termsScreen .legal-doc a,
#termsScreen .legal-content a { color: var(--qm-pink-soft); }
#termsScreen .legal-doc em { color: var(--qm-pink-soft); }
#termsScreen .legal-meta {
    background: var(--qm-s2);
    color: var(--qm-fg2);
    border-radius: 16px;
}
#termsScreen .legal-meta strong { color: var(--qm-fg); }
#termsScreen .legal-callout {
    background: rgba(233, 30, 99, .12);
    border: 0;
    border-radius: 18px;
    color: var(--qm-fg);
}
#termsScreen .legal-callout strong { color: var(--qm-pink-soft); }
#termsScreen .legal-footer { border-top-color: var(--qm-line); color: var(--qm-fg3); }
#termsScreen .legal-loading { color: var(--qm-fg3); }
#termsScreen .legal-error { background: rgba(255, 59, 48, .12); color: var(--qm-red-soft); border-radius: 18px; }

/* ==========================================================================
   SUPPORT CHAT  (#supportChatScreen → SSupport)
   ========================================================================== */
#supportChatScreen .support-chat-header {
    background: var(--qm-bg);
    border-bottom: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    gap: 12px;
}
#supportChatScreen .support-chat-head-avatar {
    width: 42px;
    height: 42px;
    border-radius: 30%;
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
}
#supportChatScreen .support-chat-head-text h2 {
    font: 700 16px/1.25 var(--qm-sans);
    color: var(--qm-fg);
}
#supportChatScreen .support-chat-head-status { font-size: 13px; color: var(--qm-green); }
#supportChatScreen .support-chat-head-status::before { background: var(--qm-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
#supportChatScreen .support-chat-messages { padding: 16px; gap: 10px; }
#supportChatScreen .support-msg { max-width: 76%; }
#supportChatScreen .support-bubble {
    padding: 11px 15px;
    border-radius: 22px;
    font-size: 15px;
    line-height: 1.4;
}
#supportChatScreen .support-msg--in .support-bubble {
    background: var(--qm-s2);
    color: var(--qm-fg);
    border: 0;
    border-bottom-left-radius: 8px;
}
#supportChatScreen .support-msg--out .support-bubble {
    background: var(--qm-pink);
    color: #fff;
    border-bottom-right-radius: 8px;
}
html[dir="rtl"] #supportChatScreen .support-msg--in .support-bubble { border-bottom-left-radius: 22px; border-bottom-right-radius: 8px; }
html[dir="rtl"] #supportChatScreen .support-msg--out .support-bubble { border-bottom-right-radius: 22px; border-bottom-left-radius: 8px; }
#supportChatScreen .support-chat-input-row {
    background: var(--qm-bg);
    border-top: 0;
    gap: 10px;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
#supportChatScreen .support-chat-input {
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 500 15px var(--qm-sans);
    transition: box-shadow .16s ease;
}
#supportChatScreen .support-chat-input::placeholder { color: var(--qm-fg3); }
#supportChatScreen .support-chat-input:focus { box-shadow: 0 0 0 2px var(--qm-pink); outline: none; }
#supportChatScreen .support-chat-send {
    width: 52px;
    height: 52px;
    background: var(--qm-pink);
    box-shadow: 0 3px 0 var(--qm-pink-edge);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease;
}
#supportChatScreen .support-chat-send:hover { transform: translateY(-1px); }
#supportChatScreen .support-chat-send:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--qm-pink-edge); }
#supportChatScreen .support-chat-send:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
body.rtl #supportChatScreen .support-chat-send svg { transform: scaleX(-1); }

/* ==========================================================================
   CREDITS  (#creditsScreen → SCredits)
   ========================================================================== */
#creditsScreen .cs-wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px calc(120px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
#creditsScreen .cs-topbar {
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 0 0;
}
#creditsScreen .cs-topbar .back-btn { align-self: flex-start; }
body.rtl #creditsScreen .cs-topbar .back-btn { align-self: flex-end; }
#creditsScreen .cs-balance {
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    margin-top: 2px;
}
#creditsScreen .cs-balance-num {
    font-family: var(--qm-disp);
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--qm-fg);
    font-variant-numeric: tabular-nums;
}
#creditsScreen .cs-balance-label {
    font: 600 13px/1.3 var(--qm-sans);
    text-transform: none;
    letter-spacing: 0;
    color: var(--qm-fg2);
}

/* Offer card: pale pink, 💎 sticker poking out of the corner */
#creditsScreen .cs-card {
    margin: 30px 0 0;
    padding: 22px;
    border: 0;
    border-radius: var(--qm-r-card-lg);
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
    align-items: flex-start;
    text-align: start;
    overflow: visible;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
#creditsScreen .cs-card-glow {
    top: -16px;
    right: 18px;
    left: auto;
    transform: rotate(10deg);
    width: 70px;
    height: 70px;
    border-radius: 30%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(42, 13, 25, .18);
}
#creditsScreen .cs-card-glow::before { content: "💎"; font-size: 36px; line-height: 1; }
body.rtl #creditsScreen .cs-card-glow { right: auto; left: 18px; transform: rotate(-10deg); }
#creditsScreen .cs-brand {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    margin: 0;
    border-radius: 999px;
    background: var(--qm-ink-pale);
    color: #fff;
    font: 700 12px var(--qm-sans);
    letter-spacing: .02em;
    text-transform: none;
}
#creditsScreen .cs-amount {
    margin-top: 18px;
    font-family: var(--qm-disp);
    font-size: clamp(52px, 16vw, 64px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--qm-ink-pale);
}
#creditsScreen .cs-percredit { margin: 12px 0 0; }
#creditsScreen .cs-percredit-tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(42, 13, 25, .1);
    color: var(--qm-ink-pale);
    font: 700 12px var(--qm-sans);
}
#creditsScreen .cs-divider { width: 100%; margin: 18px 0 14px; background: rgba(42, 13, 25, .12); }
#creditsScreen .cs-price {
    font-family: var(--qm-sans);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--qm-ink-pale);
}
#creditsScreen .cs-price-sub {
    margin: 4px 0 18px;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(42, 13, 25, .7);
}
#creditsScreen .cs-buy {
    height: 56px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px var(--qm-sans);
    letter-spacing: -.01em;
    overflow: visible;
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease, opacity .14s ease;
}
#creditsScreen .cs-buy::after { display: none; }
#creditsScreen .cs-buy:hover { transform: translateY(-1px); }
#creditsScreen .cs-buy:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
#creditsScreen .cs-buy:focus-visible { outline: none; box-shadow: var(--qm-focus-ring), var(--qm-shadow-pink-btn); }
#creditsScreen .cs-buy:disabled { opacity: .55; transform: none; }
#creditsScreen .cs-buy-consent {
    width: 100%;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(42, 13, 25, .7);
}
#creditsScreen .cs-buy-consent-link {
    color: #B0124A;
    font-weight: 700;
    text-decoration: underline;
    border-radius: 4px;
}
#creditsScreen .cs-buy-consent-link:hover { color: var(--qm-pink); }
#creditsScreen .cs-buy-consent-link:active { opacity: .7; }
#creditsScreen .cs-buy-consent-link:focus-visible { outline: 2px solid var(--qm-pink); outline-offset: 2px; }
#creditsScreen .cs-trust { gap: 18px; padding: 18px 0 0; flex-wrap: wrap; }
#creditsScreen .cs-trust-item { font-size: 13px; color: var(--qm-fg3); }
#creditsScreen .cs-trust-item svg { opacity: .7; }

/* ==========================================================================
   SHEETS: withdrawal info, delete account, lucky wheel, card modal, tutorial
   ========================================================================== */

/* Withdrawal info (#withdrawalInfoModal → SWithdraw) */
#withdrawalInfoModal {
    padding: 0;
    align-items: flex-end;
    background: var(--qm-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#withdrawalInfoModal .withdraw-modal-card {
    position: relative;
    max-width: 560px;
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-sheet) var(--qm-r-sheet) 0 0;
    padding: 12px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .45);
    animation: qmSheetUp .32s var(--qm-ease-out) both;
}
#withdrawalInfoModal .withdraw-modal-card::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    margin: 0 auto 18px;
}
#withdrawalInfoModal .withdraw-modal-head { padding: 0; align-items: flex-start; gap: 12px; }
#withdrawalInfoModal .withdraw-modal-head::before {
    content: "📄";
    flex: none;
    width: 60px;
    height: 60px;
    border-radius: 30%;
    background: var(--qm-s3);
    display: grid;
    place-items: center;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 14px;
}
#withdrawalInfoModal .withdraw-modal-head { flex-wrap: wrap; }
#withdrawalInfoModal .withdraw-modal-head h3 {
    order: 3;
    flex-basis: 100%;
    font-family: var(--qm-disp);
    font-size: clamp(28px, 8.4vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    color: var(--qm-fg);
}
#withdrawalInfoModal .withdraw-modal-close {
    margin-inline-start: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font-size: 24px;
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease;
}
#withdrawalInfoModal .withdraw-modal-close:hover { background: var(--qm-s3); }
#withdrawalInfoModal .withdraw-modal-close:active { transform: scale(.92); }
#withdrawalInfoModal .withdraw-modal-close:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#withdrawalInfoModal .withdraw-modal-body { padding: 14px 0 20px; }
#withdrawalInfoModal .withdraw-modal-body p { font-size: 15px; line-height: 1.5; color: var(--qm-fg2); margin-bottom: 12px; }
#withdrawalInfoModal .withdraw-modal-body p:last-child { font-size: 13px; color: var(--qm-fg3); }
#withdrawalInfoModal .withdraw-modal-foot { padding: 0; }
#withdrawalInfoModal .withdraw-modal-btn {
    width: 100%;
    height: 56px;
    border-radius: 999px;
    background: var(--qm-cream);
    color: var(--qm-ink);
    font: 700 16px var(--qm-sans);
    box-shadow: var(--qm-shadow-cream-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease;
}
#withdrawalInfoModal .withdraw-modal-btn:hover { transform: translateY(-1px); }
#withdrawalInfoModal .withdraw-modal-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-cream-edge); }
#withdrawalInfoModal .withdraw-modal-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring), var(--qm-shadow-cream-btn); }

@keyframes qmSheetUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Delete account (#deleteAccountModal → SDelete) */
#deleteAccountModal {
    padding: 0;
    align-items: flex-end;
    background: var(--qm-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#deleteAccountModal .popup-content.delete-confirm-popup {
    max-width: 560px;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: start;
    background: var(--qm-s1) !important;
    border: 0 !important;
    border-radius: var(--qm-r-sheet) var(--qm-r-sheet) 0 0;
    padding: 12px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .45) !important;
    color: var(--qm-fg);
    animation: qmSheetUp .32s var(--qm-ease-out) both;
}
#deleteAccountModal .delete-confirm-popup::before {
    content: "";
    width: 40px;
    height: 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    margin: 0 auto 4px;
    flex: none;
}
#deleteAccountModal .popup-icon.warning {
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 30%;
    background: var(--qm-s3);
    display: grid;
    place-items: center;
    flex: none;
}
#deleteAccountModal .popup-icon.warning svg { width: 34px; height: 34px; stroke: var(--qm-red-soft); }
#deleteAccountModal .delete-confirm-popup h3 {
    margin: 0;
    font-family: var(--qm-disp);
    font-size: clamp(28px, 8.4vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    color: var(--qm-fg);
}
#deleteAccountModal .delete-confirm-popup > p {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--qm-fg2);
}
#deleteAccountModal .warning-box {
    margin: 0;
    padding: 6px 16px;
    border: 0;
    border-radius: 22px;
    background: var(--qm-s2);
}
#deleteAccountModal .warning-box strong {
    margin: 8px 0 2px;
    color: var(--qm-red-soft);
    font-size: 13px;
    font-weight: 700;
}
#deleteAccountModal .warning-box ul { list-style: none; padding: 0; margin: 0; }
#deleteAccountModal .warning-box li {
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--qm-fg);
}
#deleteAccountModal .warning-box li + li { border-top: 1px solid var(--qm-line); }
#deleteAccountModal .modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}
#deleteAccountModal .btn-modal-cancel,
#deleteAccountModal .btn-modal-danger {
    flex: none;
    width: 100%;
    border: 0;
    border-radius: 999px;
    font: 700 16px var(--qm-sans);
    letter-spacing: -.01em;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease, background-color .14s ease;
}
#deleteAccountModal .btn-modal-cancel {
    height: 56px;
    background: var(--qm-cream);
    color: var(--qm-ink);
    box-shadow: var(--qm-shadow-cream-btn);
}
#deleteAccountModal .btn-modal-cancel:hover { background: var(--qm-cream); transform: translateY(-1px); }
#deleteAccountModal .btn-modal-cancel:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-cream-edge); }
#deleteAccountModal .btn-modal-danger {
    height: 48px;
    background: transparent;
    color: var(--qm-red-soft);
    font-weight: 600;
    box-shadow: none;
}
#deleteAccountModal .btn-modal-danger:hover { background: rgba(255, 59, 48, .1); }
#deleteAccountModal .btn-modal-danger:active { transform: scale(.98); }
#deleteAccountModal .btn-modal-cancel:focus-visible,
#deleteAccountModal .btn-modal-danger:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

/* Lucky wheel (#lwmModal → SWheel) — canvas + spin logic untouched */
#lwmModal { padding: 0; align-items: flex-end; }
#lwmModal .lwm-backdrop {
    background: var(--qm-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#lwmModal .lwm-panel {
    max-width: 560px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-sheet) var(--qm-r-sheet) 0 0;
    padding: 12px 22px calc(30px + env(safe-area-inset-bottom, 0px));
    gap: 16px;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .45);
    transform: translateY(60px);
}
#lwmModal.lwm-visible .lwm-panel { transform: none; }
#lwmModal .lwm-panel::before {
    position: static;
    width: 40px;
    height: 5px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
    flex: none;
}
#lwmModal .lwm-panel::after { display: none; }
#lwmModal .lwm-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--qm-s2);
    color: var(--qm-fg);
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease;
}
#lwmModal .lwm-close:hover { background: var(--qm-s3); border-color: transparent; }
#lwmModal .lwm-close:active { transform: scale(.92); }
#lwmModal .lwm-close:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
body.rtl #lwmModal .lwm-close { right: auto; left: 16px; }
#lwmModal .lwm-header { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 0; }
#lwmModal .lwm-icon { display: none; }
#lwmModal .lwm-streak {
    order: -1;
    height: 36px;
    padding: 0 14px;
    margin-bottom: 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(233, 30, 99, .16);
    color: var(--qm-pink-soft);
    font: 600 13px var(--qm-sans);
    letter-spacing: 0;
}
#lwmModal .lwm-title {
    font-family: var(--qm-disp);
    font-size: clamp(28px, 8.4vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    margin: 0 0 8px;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--qm-fg);
}
#lwmModal .lwm-subtitle { font-size: 15px; font-weight: 400; color: var(--qm-fg2); margin: 0; }
#lwmModal .lwm-wheel-wrap { filter: none; margin: 6px 0; }
#lwmModal #lwmCanvas { box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
#lwmModal .lwm-pointer { top: -12px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
#lwmModal .lwm-pointer svg path:first-child { fill: var(--qm-cream); }
#lwmModal .lwm-pointer svg path:nth-child(2) { stroke: var(--qm-cream-edge); }
#lwmModal .lwm-pointer svg circle { fill: var(--qm-pink); }
#lwmModal .lwm-spin-btn {
    height: 56px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--qm-pink);
    font: 700 16px var(--qm-sans);
    letter-spacing: -.01em;
    overflow: visible;
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease, opacity .14s ease;
}
#lwmModal .lwm-spin-btn::before { display: none; }
#lwmModal .lwm-spin-btn:hover { transform: translateY(-1px); box-shadow: var(--qm-shadow-pink-btn); }
#lwmModal .lwm-spin-btn:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
#lwmModal .lwm-spin-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring), var(--qm-shadow-pink-btn); }
#lwmModal .lwm-spin-btn:disabled { opacity: .55; transform: none; box-shadow: none; }
#lwmModal .lwm-win-badge {
    background: var(--qm-pink-pale);
    border: 0;
    border-radius: 26px;
    box-shadow: none;
}
#lwmModal .lwm-win-number {
    font-family: var(--qm-disp);
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--qm-ink-pale);
    letter-spacing: -.04em;
}
#lwmModal .lwm-win-credits-label { color: rgba(42, 13, 25, .7); letter-spacing: 0; text-transform: none; font-size: 15px; }
#lwmModal .lwm-win-msg { color: var(--qm-fg2); }
#lwmModal .lwm-countdown-wrap { background: var(--qm-s2); border: 0; border-radius: 22px; }
#lwmModal .lwm-countdown-label { font: 600 13px var(--qm-sans); text-transform: none; letter-spacing: 0; color: var(--qm-fg2); }
#lwmModal .lwm-countdown {
    font-family: var(--qm-disp);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--qm-fg);
    font-variant-numeric: tabular-nums;
}
#lwmModal .lwm-continue-btn {
    height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--qm-cream);
    color: var(--qm-ink);
    font: 700 16px var(--qm-sans);
    box-shadow: var(--qm-shadow-cream-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease;
}
#lwmModal .lwm-continue-btn:hover { background: var(--qm-cream); color: var(--qm-ink); transform: translateY(-1px); }
#lwmModal .lwm-continue-btn:active { background: var(--qm-cream); transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-cream-edge); }
#lwmModal .lwm-continue-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

/* Card categories (#cardModal, opened from the chat actions) */
#cardModal { background: var(--qm-scrim); }
#cardModal .card-modal-panel {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 560px;
    transform: translateX(-50%);
    animation: none;
    background: var(--qm-s1);
    border-radius: var(--qm-r-sheet) var(--qm-r-sheet) 0 0;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .45);
}
#cardModal .card-modal-header {
    background: var(--qm-s1);
    border-bottom: 0;
    padding: 26px 20px 12px;
    gap: 12px;
}
#cardModal .card-modal-header::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .18);
}
#cardModal .card-modal-header h3 {
    font-family: var(--qm-disp);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--qm-fg);
}
#cardModal .card-modal-header .header-sub { font-size: 13px; color: var(--qm-fg3); margin-top: 4px; }
#cardModal .card-modal-back,
#cardModal .card-modal-close {
    width: 44px;
    height: 44px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease;
}
#cardModal .card-modal-back:hover,
#cardModal .card-modal-close:hover { background: var(--qm-s3); }
#cardModal .card-modal-back:active,
#cardModal .card-modal-close:active { transform: scale(.92); }
#cardModal .card-modal-back:focus-visible,
#cardModal .card-modal-close:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#cardModal .card-modal-body { padding: 8px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
#cardModal .card-category-grid { gap: 10px; }
#cardModal .card-category-item {
    border: 0;
    border-radius: 26px;
    background: var(--qm-s2);
    padding: 20px 12px;
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
}
#cardModal .card-category-item:hover { background: var(--qm-s3); box-shadow: none; transform: translateY(-2px); }
#cardModal .card-category-item:active { transform: scale(.97); }
#cardModal .card-category-item:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#cardModal .card-category-emoji { filter: none; }
#cardModal .card-category-name { font: 700 14px var(--qm-sans); color: var(--qm-fg); }
#cardModal .card-question-item {
    border: 0;
    border-radius: 22px;
    background: var(--qm-s2);
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
}
#cardModal .card-question-item:hover { background: var(--qm-s3); box-shadow: none; transform: translateY(-1px); }
#cardModal .card-question-item:active { transform: scale(.98); }
#cardModal .card-question-number { border-radius: 30%; width: 36px; height: 36px; }
#cardModal .card-question-text { font-size: 14px; font-weight: 600; color: var(--qm-fg); }
#cardModal .truth-joker-divider span { font: 600 13px var(--qm-sans); letter-spacing: 0; text-transform: none; color: var(--qm-fg2); }
#cardModal .truth-joker-divider::before,
#cardModal .truth-joker-divider::after { background: var(--qm-line); }
#cardModal .truth-joker-card { border: 0; border-radius: 24px; background: var(--qm-s2); }
#cardModal .truth-joker-emoji { border-radius: 30%; background: var(--qm-violet); }
#cardModal .truth-joker-buy-btn,
#cardModal .truth-joker-send-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--qm-pink);
    color: #fff;
    font: 700 13px var(--qm-sans);
    box-shadow: 0 3px 0 var(--qm-pink-edge);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease;
}
#cardModal .truth-joker-send-btn { background: var(--qm-violet); box-shadow: 0 3px 0 var(--qm-violet-edge); }
#cardModal .truth-joker-buy-btn:hover,
#cardModal .truth-joker-send-btn:hover { transform: translateY(-1px); }
#cardModal .truth-joker-buy-btn:active,
#cardModal .truth-joker-send-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
#cardModal .truth-joker-buy-btn:focus-visible,
#cardModal .truth-joker-send-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

/* Tutorial / guided tour — light restyle with the system */
.tut-overlay {
    background: var(--qm-scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tut-overlay .tut-sheet {
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-sheet);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    font-family: var(--qm-sans);
}
.tut-overlay .tut-x {
    width: 44px;
    height: 44px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease;
}
.tut-overlay .tut-x:hover { background: var(--qm-s3); }
.tut-overlay .tut-x:active { transform: scale(.92); }
.tut-overlay .tut-x:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
.tut-overlay .tut-dot--on { background: var(--qm-pink); }
.tut-overlay .tut-icn {
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 30%;
    background: var(--qm-s3);
    box-shadow: none;
    transform: rotate(-6deg);
}
.tut-overlay .tut-step { font: 600 13px var(--qm-sans); letter-spacing: 0; text-transform: none; color: var(--qm-fg2); }
.tut-overlay .tut-t,
.tut-overlay .tut-ov-t {
    font-family: var(--qm-disp);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
    color: var(--qm-fg);
    text-wrap: balance;
}
.tut-overlay .tut-b { font-size: 15px; line-height: 1.55; color: var(--qm-fg2); }
.tut-overlay .tut-ov-s { font-size: 14px; color: var(--qm-fg2); }
.tut-overlay .tut-btn--primary {
    height: 56px;
    padding: 0 24px;
    background: var(--qm-pink);
    font: 700 16px var(--qm-sans);
    box-shadow: var(--qm-shadow-pink-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease;
}
.tut-overlay .tut-btn--primary:hover { filter: none; transform: translateY(-1px); }
.tut-overlay .tut-btn--primary:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
.tut-overlay .tut-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring), var(--qm-shadow-pink-btn); }
.tut-overlay .tut-link { font-size: 13px; color: var(--qm-fg3); border-radius: 8px; }
.tut-overlay .tut-link:hover { color: var(--qm-fg); }
.tut-overlay .tut-link:active { opacity: .7; }
.tut-overlay .tut-link:focus-visible { outline: 2px solid var(--qm-pink-soft); outline-offset: 2px; }
.tut-overlay .tut-card {
    border: 0;
    border-radius: 22px;
    background: var(--qm-s2);
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
}
.tut-overlay .tut-card:hover { background: var(--qm-s3); border-color: transparent; transform: translateY(-2px); }
.tut-overlay .tut-card:active { transform: scale(.97); }
.tut-overlay .tut-card:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
.tut-overlay .tut-card-icn { border-radius: 30%; background: var(--qm-s1); width: 40px; height: 40px; font-size: 20px; }
.tut-overlay .tut-card-t { font: 700 13px/1.3 var(--qm-sans); color: var(--qm-fg); }

/* ==========================================================================
   QUIZ BUILDER  (#quizBuilderScreen → SBuilder)
   ========================================================================== */
#quizBuilderScreen .qb-header {
    height: 56px;
    padding: 0 16px;
    border-bottom: 0;
    background: var(--qm-bg);
    gap: 12px;
}
#quizBuilderScreen .qb-header h2 {
    text-align: center;
    font: 700 16px var(--qm-sans);
    letter-spacing: 0;
    color: var(--qm-fg);
    margin-inline-end: 44px;
}
#quizBuilderScreen #quizBuilderContent {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
}
/* Headlines inside every builder step */
#quizBuilderScreen .qb-welcome-title,
#quizBuilderScreen .qb-overview-title,
#quizBuilderScreen .qb-diff-title,
#quizBuilderScreen .qb-presets-title {
    font-family: var(--qm-disp);
    font-size: clamp(28px, 8.4vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
    color: var(--qm-fg);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-wrap: balance;
}
#quizBuilderScreen .qb-welcome-subtitle,
#quizBuilderScreen .qb-overview-subtitle,
#quizBuilderScreen .qb-diff-subtitle,
#quizBuilderScreen .qb-presets-subtitle {
    font-size: 15px;
    line-height: 1.45;
    color: var(--qm-fg2);
}
#quizBuilderScreen .qb-welcome-hint,
#quizBuilderScreen .qb-max-hint { font-size: 13px; color: var(--qm-fg3); }
#quizBuilderScreen .qb-welcome-icon,
#quizBuilderScreen .qb-diff-icon-wrap {
    background: var(--qm-s2);
    border: 0;
    border-radius: 30%;
    box-shadow: none;
    transform: rotate(-6deg);
}
#quizBuilderScreen .qb-welcome-icon-inner { background: none; box-shadow: none; }
#quizBuilderScreen .qb-feature-pill {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 600 13px var(--qm-sans);
}
/* Primary pills (3D) */
#quizBuilderScreen .qb-cta-primary,
#quizBuilderScreen .qb-btn--primary,
#quizBuilderScreen .qb-btn--save {
    height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--qm-pink);
    color: #fff;
    font: 700 16px var(--qm-sans);
    letter-spacing: -.01em;
    box-shadow: var(--qm-shadow-pink-btn);
    animation: none;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease, opacity .14s ease;
}
#quizBuilderScreen .qb-cta-primary::before,
#quizBuilderScreen .qb-cta-primary::after { display: none; }
#quizBuilderScreen .qb-cta-primary:hover,
#quizBuilderScreen .qb-btn--primary:hover,
#quizBuilderScreen .qb-btn--save:hover { transform: translateY(-1px); }
#quizBuilderScreen .qb-cta-primary:active,
#quizBuilderScreen .qb-btn--primary:active,
#quizBuilderScreen .qb-btn--save:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
#quizBuilderScreen .qb-btn {
    border-radius: 999px;
    min-height: 56px;
    font-family: var(--qm-sans);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease, background-color .14s ease;
}
#quizBuilderScreen .qb-btn--ghost {
    background: var(--qm-s3);
    color: var(--qm-fg);
    box-shadow: var(--qm-shadow-dark-btn);
}
#quizBuilderScreen .qb-btn--ghost:hover { transform: translateY(-1px); }
#quizBuilderScreen .qb-btn--ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-dark-edge); }
#quizBuilderScreen .qb-btn--danger-ghost {
    min-height: 48px;
    border: 0;
    background: transparent;
    color: var(--qm-red-soft);
    font: 600 14px var(--qm-sans);
}
#quizBuilderScreen .qb-btn--danger-ghost:hover { background: rgba(255, 59, 48, .1); }
#quizBuilderScreen .qb-btn--danger-ghost:active { transform: scale(.98); }
#quizBuilderScreen .qb-btn:focus-visible,
#quizBuilderScreen .qb-cta-primary:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#quizBuilderScreen .qb-step-actions,
#quizBuilderScreen .qb-overview-actions {
    background: linear-gradient(to top, var(--qm-bg) 72%, transparent);
}
#quizBuilderScreen .qb-step-actions { padding: 16px 20px max(20px, env(safe-area-inset-bottom)); }

/* Overview: status chip, difficulty badge, question cards, slots */
#quizBuilderScreen .qb-overview-status {
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    font: 700 12px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
}
#quizBuilderScreen .qb-overview-status--draft { background: rgba(233, 30, 99, .16); color: var(--qm-pink-soft); }
#quizBuilderScreen .qb-overview-status--ready { background: rgba(74, 222, 128, .14); color: var(--qm-green); }
#quizBuilderScreen .qb-diff-badge {
    min-height: 44px;
    padding: 6px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 600 14px var(--qm-sans);
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease;
}
#quizBuilderScreen .qb-diff-badge:hover { background: var(--qm-s3); }
#quizBuilderScreen .qb-diff-badge:active { transform: scale(.97); }
#quizBuilderScreen .qb-diff-badge:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#quizBuilderScreen .qb-diff-badge-hint { color: var(--qm-fg3); }
#quizBuilderScreen .qb-question-list { gap: 10px; }
#quizBuilderScreen .qb-question-card {
    min-height: 68px;
    padding: 12px;
    gap: 12px;
    border: 0;
    border-radius: 22px;
    background: var(--qm-s1);
    box-shadow: none;
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
}
#quizBuilderScreen .qb-question-card:hover { background: var(--qm-s2); transform: translateY(-1px); }
#quizBuilderScreen .qb-question-card:active { transform: scale(.98); }
#quizBuilderScreen .qb-question-card--issue { box-shadow: inset 0 0 0 1.5px rgba(255, 107, 97, .45); }
#quizBuilderScreen .qb-question-card-num {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 30%;
    background: var(--qm-s3);
    color: var(--qm-fg);
    font: 800 17px var(--qm-sans);
    box-shadow: none;
}
#quizBuilderScreen .qb-question-card-text { font: 600 14px/1.3 var(--qm-sans); color: var(--qm-fg); }
#quizBuilderScreen .qb-question-card-meta { font-size: 12px; color: var(--qm-fg3); }
#quizBuilderScreen .qb-question-card-arrow { color: var(--qm-fg3); }
body.rtl #quizBuilderScreen .qb-question-card-arrow svg { transform: scaleX(-1); }
#quizBuilderScreen .qb-question-slot {
    min-height: 68px;
    padding: 12px;
    gap: 12px;
    border: 2px dashed var(--qm-line);
    border-radius: 22px;
    background: transparent;
    color: var(--qm-fg3);
}
#quizBuilderScreen .qb-question-slot-num {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 30%;
    background: var(--qm-s1);
    color: var(--qm-fg3);
    font: 700 16px var(--qm-sans);
}
#quizBuilderScreen .qb-question-slot-label { font: 600 14px var(--qm-sans); color: var(--qm-fg3); }
#quizBuilderScreen .qb-add-btn {
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--qm-s3);
    color: var(--qm-fg);
    font: 700 16px var(--qm-sans);
    box-shadow: var(--qm-shadow-dark-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease;
}
#quizBuilderScreen .qb-add-btn--primary { background: var(--qm-cream); color: var(--qm-ink); box-shadow: var(--qm-shadow-cream-btn); }
#quizBuilderScreen .qb-add-btn:hover { transform: translateY(-1px); }
#quizBuilderScreen .qb-add-btn:active,
#quizBuilderScreen .qb-add-btn--primary:active { transform: translateY(3px); background: var(--qm-cream); box-shadow: 0 1px 0 var(--qm-cream-edge); }
#quizBuilderScreen .qb-add-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#quizBuilderScreen .qb-add-btn-icon { background: none; color: inherit; }

/* Difficulty: segmented cards */
#quizBuilderScreen .qb-diff-card {
    border: 0;
    border-radius: 24px;
    background: var(--qm-s1);
    box-shadow: none;
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
}
#quizBuilderScreen .qb-diff-card:hover { background: var(--qm-s2); transform: translateY(-1px); }
#quizBuilderScreen .qb-diff-card:active { transform: scale(.98); }
#quizBuilderScreen .qb-diff-card:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#quizBuilderScreen .qb-diff-card--active,
#quizBuilderScreen .qb-diff-card--active:hover { background: var(--qm-cream); box-shadow: 0 0 0 3px var(--qm-pink); }
#quizBuilderScreen .qb-diff-card--active .qb-diff-card-label { color: var(--qm-ink); }
#quizBuilderScreen .qb-diff-card--active .qb-diff-card-desc { color: rgba(26, 14, 20, .66); }
#quizBuilderScreen .qb-diff-card-label { font: 800 16px var(--qm-sans); color: var(--qm-fg); }
#quizBuilderScreen .qb-diff-card-desc { font-size: 13px; color: var(--qm-fg3); }
#quizBuilderScreen .qb-diff-card-icon { background: var(--qm-s3); border-radius: 30%; }
#quizBuilderScreen .qb-diff-card--active .qb-diff-card-icon { background: #fff; }
#quizBuilderScreen .qb-diff-card-check { background: var(--qm-pink); color: #fff; box-shadow: none; }

/* Editor */
#quizBuilderScreen .qb-progress-dot { background: rgba(255, 255, 255, .12); box-shadow: none; }
#quizBuilderScreen .qb-progress-dot--active { background: var(--qm-pink); box-shadow: none; }
#quizBuilderScreen .qb-progress-dot--done { background: var(--qm-pink-soft); box-shadow: none; }
#quizBuilderScreen .qb-editor-step-label { font: 600 13px var(--qm-sans); letter-spacing: 0; text-transform: none; color: var(--qm-fg2); }
#quizBuilderScreen .qb-editor-card {
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-card);
    box-shadow: none;
}
#quizBuilderScreen .qb-field-label,
#quizBuilderScreen .qb-field-label > span:first-child {
    font: 600 13px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--qm-fg2);
}
#quizBuilderScreen .qb-field-hint,
#quizBuilderScreen .qb-field-counter,
#quizBuilderScreen .qb-answers-count { color: var(--qm-fg3); }
#quizBuilderScreen .qb-textarea,
#quizBuilderScreen .qb-choice-input {
    border: 0;
    border-radius: var(--qm-r-field);
    background: var(--qm-s2);
    color: var(--qm-fg);
    font-family: var(--qm-sans);
    box-shadow: none;
    transition: box-shadow .16s ease;
}
#quizBuilderScreen .qb-choice-input { min-height: 52px; }
#quizBuilderScreen .qb-textarea:focus,
#quizBuilderScreen .qb-choice-input:focus { outline: none; box-shadow: 0 0 0 2px var(--qm-pink); }
#quizBuilderScreen .qb-textarea::placeholder,
#quizBuilderScreen .qb-choice-input::placeholder { color: var(--qm-fg3); }
#quizBuilderScreen .qb-choice-check {
    border: 2px solid rgba(255, 255, 255, .2);
    background: transparent;
    border-radius: 50%;
}
#quizBuilderScreen .qb-choice-check--on { background: var(--qm-green); border-color: var(--qm-green); color: #0D0A0F; box-shadow: none; }
#quizBuilderScreen .qb-choice-check:focus-visible,
#quizBuilderScreen .qb-choice-remove:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#quizBuilderScreen .qb-template-pill,
#quizBuilderScreen .qb-suggestions-chip {
    border: 0;
    border-radius: 999px;
    background: rgba(233, 30, 99, .16);
    color: var(--qm-pink-soft);
    font: 600 13px var(--qm-sans);
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease;
}
#quizBuilderScreen .qb-template-pill:hover,
#quizBuilderScreen .qb-suggestions-chip:hover { background: rgba(233, 30, 99, .26); }
#quizBuilderScreen .qb-template-pill:active,
#quizBuilderScreen .qb-suggestions-chip:active { transform: scale(.96); }
#quizBuilderScreen .qb-template-pill:focus-visible,
#quizBuilderScreen .qb-suggestions-chip:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#quizBuilderScreen .qb-add-choice {
    border: 2px dashed var(--qm-line);
    border-radius: var(--qm-r-field);
    background: transparent;
    color: var(--qm-fg2);
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease;
}
#quizBuilderScreen .qb-add-choice:hover { background: var(--qm-s2); }
#quizBuilderScreen .qb-add-choice:active { transform: scale(.98); }
#quizBuilderScreen .qb-add-choice:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#quizBuilderScreen .qb-delete-question { color: var(--qm-red-soft); border-radius: 999px; }

/* Presets */
#quizBuilderScreen .qb-preset-cat-label { font: 600 13px var(--qm-sans); letter-spacing: 0; text-transform: none; color: var(--qm-fg2); }
#quizBuilderScreen .qb-preset-item {
    border: 0;
    border-radius: 22px;
    background: var(--qm-s1);
    color: var(--qm-fg);
    transition: transform .16s var(--qm-ease-spring), background-color .16s ease;
}
#quizBuilderScreen .qb-preset-item:hover:not(:disabled) { background: var(--qm-s2); }
#quizBuilderScreen .qb-preset-item:active:not(:disabled) { transform: scale(.98); }
#quizBuilderScreen .qb-preset-item:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#quizBuilderScreen .qb-preset-badge--add { background: var(--qm-cream); color: var(--qm-ink); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
    #withdrawalInfoModal .withdraw-modal-card,
    #deleteAccountModal .popup-content.delete-confirm-popup { animation: none; }
}

/* ==========================================================================
   PROFILE v3 — tidy order
   header → [Profil bearbeiten | Profil teilen] → (form) → 3 equal stat
   tiles → quiz → one list (help & app) → account list.
   Every tile that looks tappable is tappable; nothing else looks like it.
   ========================================================================== */
#profileScreen .qm-pf-head {
    padding-top: calc(28px + env(safe-area-inset-top, 0px));
}
#profileScreen .pv2-autosave { display: none !important; }

/* Two equal actions under the name */
#profileScreen .qm-pf-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#profileScreen .qm-pf-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 700 14px/1 var(--qm-sans);
    letter-spacing: -.01em;
    cursor: pointer;
    min-width: 0;
    transition: transform .14s var(--qm-ease-spring), background-color .14s ease;
}
#profileScreen .qm-pf-act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profileScreen .qm-pf-act svg { flex: none; width: 17px; height: 17px; }
#profileScreen .qm-pf-act:hover { background: var(--qm-s3); }
#profileScreen .qm-pf-act:active { transform: scale(.97); }
#profileScreen .qm-pf-act:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#profileScreen.qm-pf-editing #profileEditToggle {
    background: rgba(233, 30, 99, .16);
    color: var(--qm-pink-soft);
}

/* Edit form: closed until "Profil bearbeiten"; email is already in the header */
#profileScreen:not(.qm-pf-editing) #profileForm { display: none; }
#profileScreen .pv2-form { margin-top: 0; }
#profileScreen.qm-pf-editing #profileForm { animation: qmPfFormIn .26s var(--qm-ease-spring, ease-out) both; }
@keyframes qmPfFormIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
#profileScreen .pv2-field:has(#profileEmail) { display: none; }
/* The country field's wrapper shares the class name .cs-wrap with the
   credits store, which adds 100px bottom padding: a hole above Save. */
#profileScreen .pv2-field .cs-wrap { min-height: 0; padding-bottom: 0; }

/* One continuous list per section: groups touch, only the ends are round */
#profileScreen .qm-pf-list {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    border-radius: var(--qm-r-card);
    overflow: hidden;
    background: var(--qm-s1);
}
#profileScreen .qm-pf-list > .pv2-menu-group {
    margin: 0 !important;
    border-radius: 0;
    background: transparent;
}
#profileScreen .qm-pf-list > .pv2-menu-group:not(:first-of-type) > .pv2-menu-row:first-child {
    border-top: 1px solid var(--qm-line);
}
#profileScreen .qm-pf-list .pv2-menu-row { min-height: 56px; padding: 8px 0; }
#profileScreen .qm-pf-list .pv2-menu-icon { width: 38px; height: 38px; border-radius: 12px; }
#profileScreen .qm-pf-list .pv2-menu-icon svg { width: 18px; height: 18px; }
#profileScreen .qm-pf-list .pv2-menu-row > .pv2-menu-text .pv2-menu-desc { display: none; }
#profileScreen .qm-pf-list--account { margin-top: 6px; }
#profileScreen .pv2-footer { padding-top: 6px; }

/* ── Profile v5 (Simon's pick "C"): balance · quiz/game card ──────────────
   One anatomy everywhere: dark s1 card, 40px tinted tile, title + short sub,
   pill on the right. Symbols: blue diamond Credits, red diamond
   Notfall-Credits, gold key Schlüssel (inline SVG, no emoji).
   game-hub.js's own block (#gameProfileStats) only feeds data. */
#profileScreen #gameProfileStats.qm-pf-ghsrc { display: none !important; }

/* Balance card */
#profileScreen .qm-wallet {
    position: relative;
    margin-top: 4px;
    padding: 16px 18px 16px;
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(80, 150, 255, .15), transparent 55%),
        var(--qm-s1);
}
#profileScreen .qm-wallet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#profileScreen .qm-wallet-title { font: 700 13px/1.2 var(--qm-sans); color: var(--qm-fg2); }
#profileScreen .qm-wallet-add {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--qm-pink);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--qm-pink-edge), 0 8px 18px rgba(233, 30, 99, .3);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s ease;
}
#profileScreen .qm-wallet-add:hover { transform: translateY(-1px); }
#profileScreen .qm-wallet-add:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--qm-pink-edge); }
#profileScreen .qm-wallet-add:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

#profileScreen .qm-wallet-big {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--qm-fg);
    font-family: inherit;
    cursor: pointer;
    text-align: start;
}
#profileScreen .qm-wallet-big .qm-gem { flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(59, 139, 246, .35)); }
#profileScreen .qm-wallet-num {
    font: 900 42px/1 var(--qm-disp);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
#profileScreen .qm-wallet-num:empty::before { content: "–"; }
#profileScreen .qm-wallet-unit {
    align-self: flex-end;
    padding-bottom: 5px;
    font: 700 14px/1 var(--qm-sans);
    color: var(--qm-fg2);
}
#profileScreen .qm-wallet-big:focus-visible { outline: none; border-radius: 12px; box-shadow: var(--qm-focus-ring); }

#profileScreen .qm-wallet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#profileScreen .qm-wallet-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px 0 9px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: var(--qm-fg2);
    font: 700 13px/1 var(--qm-sans);
    cursor: pointer;
    transition: background-color .16s ease, transform .16s var(--qm-ease-spring);
}
#profileScreen .qm-wallet-chip[hidden] { display: none; }
#profileScreen .qm-wallet-chip b { color: var(--qm-fg); font-weight: 900; font-variant-numeric: tabular-nums; }
#profileScreen .qm-wallet-chip:hover { background: rgba(255, 255, 255, .09); }
#profileScreen .qm-wallet-chip:active { transform: scale(.97); }
#profileScreen .qm-wallet-chip:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

/* Quiz + Game Level: one card, two rows */
#profileScreen .qm-pf-play {
    border-radius: 24px;
    background: var(--qm-s1);
    overflow: hidden;
}
html:root body #profileScreen .qm-pf-play .qm-pf-row,
html:root body #profileScreen .qm-pf-play #profileQuizBtn.qm-pf-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 66px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--qm-fg);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transform: none;
    transition: background-color .16s ease;
}
html:root body #profileScreen .qm-pf-play .qm-pf-row[hidden] { display: none !important; }
html:root body #profileScreen .qm-pf-play .qm-pf-row + .qm-pf-row { border-top: 1px solid var(--qm-line); }
html:root body #profileScreen .qm-pf-play .qm-pf-row:hover,
html:root body #profileScreen .qm-pf-play #profileQuizBtn.qm-pf-row:hover { background: rgba(255, 255, 255, .025); transform: none; }
html:root body #profileScreen .qm-pf-play .qm-pf-row:active,
html:root body #profileScreen .qm-pf-play #profileQuizBtn.qm-pf-row:active { background: rgba(255, 255, 255, .05); transform: none; }
html:root body #profileScreen .qm-pf-play .qm-pf-row:focus-visible,
html:root body #profileScreen .qm-pf-play #profileQuizBtn.qm-pf-row:focus-visible { outline: none; box-shadow: inset var(--qm-focus-ring); }

#profileScreen .qm-pf-tile {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
}
#profileScreen .qm-pf-tile--pink { background: rgba(233, 30, 99, .16); color: var(--qm-pink-soft); }
#profileScreen .qm-pf-tile--violet { background: rgba(124, 77, 255, .18); color: #B39DFF; }

#profileScreen #profileQuizBtn .pv2-quiz-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#profileScreen #profileQuizBtn .pv2-menu-label,
#profileScreen #profileQuizBtn .pv2-menu-desc { display: none !important; }
#profileScreen .qm-pf-row-title { display: block; font: 700 14.5px/1.25 var(--qm-sans); color: var(--qm-fg); }
#profileScreen .qm-pf-row-sub { display: block; margin-top: 2px; font: 500 12px/1.3 var(--qm-sans); color: var(--qm-fg3); }

#profileScreen .qm-pf-game-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#profileScreen .qm-pf-game-bar {
    display: block;
    height: 5px;
    margin-top: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
#profileScreen .qm-pf-game-fill {
    display: block;
    height: 100%;
    width: 4%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--qm-violet), #B39DFF);
}
#profileScreen .qm-pf-game .qm-pf-row-sub { margin-top: 5px; }

#profileScreen .qm-pf-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 800 12.5px/1 var(--qm-sans);
    white-space: nowrap;
}
#profileScreen .qm-pf-pill--pink { background: var(--qm-pink); color: #fff; box-shadow: 0 2px 0 var(--qm-pink-edge); }

/* Quiz + Game rows: same height even when the quiz sub-line is short. */
html:root body #profileScreen .qm-pf-play .qm-pf-row,
html:root body #profileScreen .qm-pf-play #profileQuizBtn.qm-pf-row { min-height: 74px; }

/* == B: photo missing hint == */
/* The setup photo never reached Storage (script.js _markProfilePhotoMissing).
   Sits under the name; tapping it opens the photo picker. */
#profileScreen .pv2-photo-missing {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 8px;
    min-height: 32px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 107, 97, .14);
    color: var(--qm-red-soft);
    font: 700 13px/1.25 var(--qm-sans);
    text-align: start;
    cursor: pointer;
}
#profileScreen .pv2-photo-missing[hidden] { display: none; }
#profileScreen .pv2-photo-missing:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
/* == /B: photo missing hint == */