/* Shared public appearance. Loaded only outside content/admin.
   Page-specific layouts, artwork, badge rarities and business logic remain local. */
body.lq-public {
    --public-bg: #f3f6fa;
    --public-surface: #fff;
    --public-soft: #eaf0f8;
    --public-input: #fff;
    --public-ink: #142345;
    --public-muted: #52617a;
    --public-line: #dce4f0;
    --public-link: #2451d1;
    --public-success-bg: #edf8f0;
    --public-success: #216c42;
    --public-danger-bg: #fff0f1;
    --public-danger: #a92332;
    --public-gold-bg: #fff3cf;
    --public-gold-ink: #735209;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--public-ink);
    color-scheme: light;
}
html[data-lq-appearance="dark"] body.lq-public {
    --public-bg: #09121f;
    --public-surface: #15253b;
    --public-soft: #1c2e46;
    --public-input: #0e1c30;
    --public-ink: #eaf0f8;
    --public-muted: #a8b8ce;
    --public-line: #293b53;
    --public-link: #a6c8ff;
    --public-success-bg: #1c3b32;
    --public-success: #96dfb7;
    --public-danger-bg: #412833;
    --public-danger: #ffbcc7;
    --public-gold-bg: #3b3422;
    --public-gold-ink: #ffd166;
    color-scheme: dark;
}
body.lq-public:not([data-lq-page="quiz"]) { background: var(--public-bg) !important; }
body.lq-public .lq-public-content {
    flex: 1 0 auto; min-width: 0; padding-block: 1rem 2rem;
    background: var(--public-bg); color: var(--public-ink); font-size: 1rem; line-height: 1.6;
}
body.lq-public .lq-public-content :is(h1,h2,h3,h4,h5,h6) { font-family: inherit; text-shadow: none; }
body.lq-public .lq-public-content a { color: var(--public-link); font-style: normal; }
body.lq-public .lq-public-content :is(a,button,input,select,textarea,summary):focus-visible {
    outline: 3px solid var(--public-link); outline-offset: 3px;
}
body.lq-public .lq-public-content .breadcrumb { background: transparent; }
body.lq-public .lq-public-content .breadcrumb-item,
body.lq-public .lq-public-content .breadcrumb-item::before { color: var(--public-muted); }
body.lq-public .lq-public-content .breadcrumb-item a { color: var(--public-link); }
body.lq-public .lq-public-content .card {
    --bs-card-bg: var(--public-surface); --bs-card-color: var(--public-ink);
    background-color: var(--public-surface); color: var(--public-ink); border-color: var(--public-line);
}
body.lq-public .lq-public-content .btn-primary,
body.lq-public .lq-public-content .lq-auth-submit:not(.btn-danger):not(.btn-outline-danger) {
    background: #ffd166; border-color: #ffd166; color: #142345; font-weight: 700;
}
body.lq-public .lq-public-content .btn-primary:hover,
body.lq-public .lq-public-content .lq-auth-submit:not(.btn-danger):not(.btn-outline-danger):hover {
    background: #ffe09a; border-color: #ffe09a; color: #142345;
}
body.lq-public .lq-public-content :is(.btn-outline-primary,.btn-outline-secondary,.btn-outline-dark) {
    color: var(--public-link); border-color: var(--public-line); background: transparent;
}
body.lq-public .lq-public-content :is(.btn-outline-primary,.btn-outline-secondary,.btn-outline-dark):hover {
    color: var(--public-link); border-color: var(--public-link); background: var(--public-soft);
}
body.lq-public .lq-public-content .btn-danger { color: #fff; }
body.lq-public .lq-public-content .btn-outline-danger { color: var(--public-danger); border-color: var(--public-danger); }
body.lq-public .lq-public-content .btn-outline-danger:hover { background: var(--public-danger-bg); color: var(--public-danger); }
body.lq-public .lq-public-content :is(.form-control,.form-select) {
    background-color: var(--public-input); color: var(--public-ink); border-color: var(--public-line);
}
body.lq-public .lq-public-content :is(.form-control,.form-select):focus {
    background-color: var(--public-input); color: var(--public-ink); border-color: var(--public-link);
}
body.lq-public .lq-public-content input::placeholder,
body.lq-public .lq-public-content textarea::placeholder { color: var(--public-muted); opacity: 1; }
body.lq-public .lq-public-content .form-check-input { background-color: var(--public-input); border-color: var(--public-muted); }
body.lq-public .lq-public-content .form-check-input:checked { background-color: #2451d1; border-color: #2451d1; }
body.lq-public .lq-public-content .text-muted,
body.lq-public .lq-public-content .form-text { color: var(--public-muted) !important; }
body.lq-public .lq-public-content .text-info { color: var(--public-link) !important; }
body.lq-public .lq-public-content :is(.text-dark,.text-body,.text-black) { color: var(--public-ink) !important; }
body.lq-public .lq-public-content :is(.bg-white,.bg-light,.bg-light-subtle,.bg-body,.bg-body-tertiary) { background-color: var(--public-surface) !important; }
body.lq-public .lq-public-content .border,
body.lq-public .lq-public-content :is(.card-header,.card-footer,.modal-header,.modal-footer) { border-color: var(--public-line) !important; }
body.lq-public .lq-public-content :is(.card-header,.card-footer,.list-group-item,.modal-content) { background-color: var(--public-surface); color: var(--public-ink); }
body.lq-public .lq-public-content .list-group-item { border-color: var(--public-line); }
body.lq-public .lq-public-content .list-group-item-action:hover { background: var(--public-soft); color: var(--public-ink); }
body.lq-public .lq-public-content .table {
    --bs-table-bg: transparent; --bs-table-color: var(--public-ink);
    --bs-table-striped-bg: var(--public-soft); --bs-table-striped-color: var(--public-ink);
    --bs-table-hover-bg: var(--public-soft); --bs-table-hover-color: var(--public-ink);
    --bs-table-border-color: var(--public-line); color: var(--public-ink); border-color: var(--public-line);
}
body.lq-public .lq-public-content .table :is(th,td) { color: inherit; border-color: var(--public-line); }
body.lq-public .lq-public-content .table-light { --bs-table-bg: var(--public-soft); --bs-table-color: var(--public-ink); }
body.lq-public .lq-public-content :is(.alert-info,.alert-primary,.alert-secondary) { background: var(--public-soft); border-color: var(--public-line); color: var(--public-ink); }
body.lq-public .lq-public-content .alert-success { background: var(--public-success-bg); color: var(--public-success); border-color: var(--public-line); }
body.lq-public .lq-public-content .alert-danger { background: var(--public-danger-bg); color: var(--public-danger); border-color: var(--public-line); }
body.lq-public .lq-public-content .alert-warning { background: var(--public-gold-bg); color: var(--public-gold-ink); border-color: var(--public-line); }
html[data-lq-appearance="dark"] body.lq-public .lq-public-content .text-success { color: var(--public-success) !important; }
html[data-lq-appearance="dark"] body.lq-public .lq-public-content .text-danger { color: var(--public-danger) !important; }
html[data-lq-appearance="dark"] body.lq-public .lq-public-content .text-primary { color: var(--public-link) !important; }
html[data-lq-appearance="dark"] body.lq-public .lq-public-content .btn-close { filter: invert(1) grayscale(1); }

/* Legal documents and image credits use the same readable public canvas. */
body.lq-public:is([data-lq-page="privacy"],[data-lq-page="terms"],[data-lq-page="appterms"],[data-lq-page="publicdomain"],[data-lq-page="imageinfo"]) .lq-public-content {
    width: min(960px, calc(100% - 32px)); margin-inline: auto; padding-block: 1.5rem 3rem;
    overflow-wrap: anywhere;
}
body.lq-public:is([data-lq-page="privacy"],[data-lq-page="terms"],[data-lq-page="appterms"]) .lq-public-content :is(h1,h2,h3,h4) { color: var(--public-ink); margin-block: 1.25rem .75rem; }
body.lq-public[data-lq-page="imageinfo"] .lq-public-content > .row { margin-inline: 0; }

/* Security and email forms: retain validation, CAPTCHA, inputs and destinations. */
body.lq-public .lq-public-content :is(.lq-auth-card,.lq-logout-card,.lq-card-verify,.lq-card-security,.lq-card-danger) {
    background: var(--public-surface); color: var(--public-ink);
}
body.lq-public .lq-public-content :is(.lq-recaptcha-wrapper,.lq-auth-icon-wrapper) { background: var(--public-soft); color: var(--public-link); }
body.lq-public .lq-public-content .lq-danger-note { background: var(--public-danger-bg); color: var(--public-danger); }
body.lq-public .lq-public-content :is(.lq-verify-subtitle,.lq-auth-icon,.lq-security-icon,.lq-logout-icon) { color: var(--public-muted); }
body.lq-public .lq-public-content #mydivlogin { max-width: 600px; margin: 2rem auto; padding: 1.5rem; background: var(--public-surface); border-radius: 20px; }

/* Account, public/private profile and statistics surfaces. */
body.lq-public .lq-public-content :is(.lq-profile-v2,.lq-profile-page,.lq-page,.lq-settings-wrap.container) { background: var(--public-bg); color: var(--public-ink); }
body.lq-public .lq-public-content .lq-profile-v2::before { background: var(--public-bg); }
body.lq-public .lq-public-content .lq-profile-v2 .card,
body.lq-public .lq-public-content .lq-profile-page .card { background: var(--public-surface); color: var(--public-ink); }
body.lq-public .lq-public-content :is(.lq-row,.lq-stat-tile,.lq-avatar-setting) { background: var(--public-surface); border-color: var(--public-line); color: var(--public-ink); }
body.lq-public .lq-public-content :is(.lq-stat-tile .k,.lq-stat-label,.lq-stat-detail,.lq-stat-coming,.lq-v2-section-kicker,.lq-badges-kicker) { color: var(--public-muted); }
body.lq-public .lq-public-content .lq-stat-icon { color: var(--public-link); }
body.lq-public .lq-public-content :is(.lq-stat-tile .v,.lq-stat-number,.lq-card-title,.lq-profile-page h1) { color: var(--public-ink); }
body.lq-public .lq-public-content :is(.lq-icon-btn,.lq-icon-link,.lq-avatar-choice) { background: var(--public-surface); border-color: var(--public-line); color: var(--public-link); }
body.lq-public .lq-public-content :is(.lq-icon-btn,.lq-icon-link,.lq-avatar-choice):hover { background: var(--public-soft); color: var(--public-link); }
body.lq-public .lq-public-content .lq-avatar-choice[aria-pressed="true"] { border-color: var(--public-link); box-shadow: 0 0 0 2px var(--public-link); }
body.lq-public[data-lq-page="statistics"] .lq-page {
    --lq-card: var(--public-surface); --lq-border: var(--public-line);
    --lq-text: var(--public-ink); --lq-muted: var(--public-muted); --lq-accent: var(--public-link);
}
body.lq-public[data-lq-page="statistics"] .lq-soft-card { background: var(--public-surface); border-color: var(--public-line); color: var(--public-ink); }
body.lq-public[data-lq-page="statistics"] .lq-mini { background: var(--public-soft); border-color: var(--public-line); }
body.lq-public[data-lq-page="statistics"] .lq-pill { background: var(--public-soft); border-color: var(--public-line); color: var(--public-ink); }
body.lq-public[data-lq-page="statistics"] :is(.lq-divider,.lq-progress) { background: var(--public-line); }
body.lq-public[data-lq-page="statistics"] .lq-hero a { color: #eaf0f8; }
html[data-lq-appearance="dark"] body.lq-public .lq-public-content .lq-avatar-setting img { border-color: var(--public-soft); }

/* Bootstrap modals can be moved into body by integrations. Keep their scope public. */
html[data-lq-appearance="dark"] body.lq-public[data-lq-page="account"] #avatarModal .modal-content { background: var(--public-surface); color: var(--public-ink); }

/* AI creation and play: palette tokens plus formerly hard-coded light surfaces. */
body.lq-public .lqai2-page {
    --lqai2-ink: var(--public-ink); --lqai2-muted: var(--public-muted); --lqai2-line: var(--public-line);
    --lqai2-soft: var(--public-soft); --lqai2-yellow: #ffd166; --lqai2-yellow-hover: #ffe09a;
    background: var(--public-bg); color: var(--public-ink); font-family: inherit; color-scheme: inherit;
}
body.lq-public .lqai-play {
    --lqai-ink: var(--public-ink); --lqai-muted: var(--public-muted); --lqai-line: var(--public-line);
    --lqai-yellow: #ffd166; --lqai-yellow-dark: #d4ad43; --lqai-blue-soft: var(--public-soft);
    background: var(--public-bg); color: var(--public-ink); font-family: inherit;
}
body.lq-public :is(.lqai2-page,.lqai-play) :is(h1,h2,h3) { font-family: inherit; }
body.lq-public :is(.lqai2-maker,.lqai2-history,.lqai2-side-card,.lqai2-card,.lqai-card,.lqai-result-card) { background: var(--public-surface); border-color: var(--public-line); }
body.lq-public :is(.lqai2-loading,.lqai2-loader-orb,.lqai-stat,.lqai-more-card) { background: var(--public-surface); border-color: var(--public-line); color: var(--public-ink); }
body.lq-public :is(.lqai2-cancel,.lqai2-under-btn,.lqai2-loading-meta,.lqai2-note summary,.lqai2-note-content) { color: var(--public-muted); }
body.lq-public .lqai2-tip { background: var(--public-gold-bg); color: var(--public-gold-ink); border-color: var(--public-line); }
body.lq-public .lqai-stat strong { color: var(--public-ink); }
body.lq-public .lqai-result-secondary { background: var(--public-surface); color: var(--public-link) !important; border-color: var(--public-line); }
body.lq-public .lqai-result-secondary:hover { background: var(--public-soft); }
body.lq-public .lqai-more-play { color: var(--public-link); }
body.lq-public .lqai-more { border-color: var(--public-line); }
body.lq-public .lqai2-page #topic { background: var(--public-input); border-color: var(--public-line); color: var(--public-ink); }
body.lq-public :is(.lqai2-label,.lqai2-seg label,.lqai-question-kicker,.lqai-explanation-title) { color: var(--public-link); }
body.lq-public :is(.lqai2-count,.lqai2-seg,.lqai2-library-link,.lqai2-history-play,.lqai2-history-more,.lqai-answer-letter,.lqai-explanation) { background: var(--public-soft); color: var(--public-link); border-color: var(--public-line); }
body.lq-public .lqai2-seg .btn-check:checked + label { background: #ffd166; color: #142345; border-color: #ffd166; }
body.lq-public .lqai2-seg .btn-check:focus-visible + label { outline-color: var(--public-link); }
body.lq-public :is(.lqai2-history-play,.lqai2-library-link,.lqai2-history-more):hover { background: var(--public-surface); color: var(--public-link); border-color: var(--public-link); }
body.lq-public .lqai-play .lqai-exit { background: var(--public-surface); color: var(--public-link) !important; border-color: var(--public-line); }
body.lq-public .lqai-play .lqai-answer { background: var(--public-surface); color: var(--public-ink); border-color: var(--public-line); }
body.lq-public .lqai-play .lqai-answer:not(:disabled):hover,
body.lq-public .lqai-play .lqai-answer:not(:disabled):focus-visible { background: var(--public-soft); border-color: var(--public-link); color: var(--public-ink); }
body.lq-public .lqai-play .lqai-answer.is-correct { background: var(--public-success-bg); border-color: #4e9c69; }
body.lq-public .lqai-play .lqai-answer.is-wrong { background: var(--public-danger-bg); border-color: #a84e55; }
body.lq-public .lqai-play .lqai-answer.is-correct :is(.lqai-answer-letter,.lqai-answer-icon) { background: #18864b; color: #fff; }
body.lq-public .lqai-play .lqai-answer.is-wrong :is(.lqai-answer-letter,.lqai-answer-icon) { background: #a92332; color: #fff; }
html[data-lq-appearance="dark"] body.lq-public .lqai2-page #topic::placeholder { color: var(--public-muted); }
html[data-lq-appearance="dark"] body.lq-public .lqai-play :is(.lqai-progress-track,.lqai-answer-letter) { background: var(--public-soft); }

/* Survival remains compatible with server-rendered AJAX fragments. */
body.lq-public .lqs-page { color: var(--public-ink); }
body.lq-public .lqs-page :is(h1,h2,.responsive-h,.lqs-scores strong) { color: var(--public-ink); font-family: inherit; }
body.lq-public .lqs-page :is(.lqs-topic,.lqs-toolbar a,.lqs-profile,.lqs-scores span,.lqs-records span,.lqs-site-record small,.lqs-summary .lqs-review-note) { color: var(--public-muted); }
body.lq-public .lqs-page :is(.lqs-scores,.lqs-records) { background: var(--public-soft); border-color: var(--public-line); }
body.lq-public .lqs-page :is(.lqs-milestone,.lqs-end-message) { color: var(--public-link); }
body.lq-public .lqs-page :is(.lqs-card,.lqs-question.lq-question-card) { background: var(--public-surface); color: var(--public-ink); border-color: var(--public-line); }
body.lq-public .lqs-page .lqs-primary { background: #ffd166; border-color: #ffd166; color: #142345; }
body.lq-public .lqs-page .lqs-award { background: var(--public-gold-bg); color: var(--public-gold-ink); }
body.lq-public .lqs-options .answer-btn { background: var(--public-surface); color: var(--public-ink); border-color: var(--public-line); }
body.lq-public .lqs-options .answer-btn:not(:disabled):hover,
body.lq-public .lqs-options .answer-btn:not(:disabled):focus-visible { background: var(--public-soft); color: var(--public-ink); border-color: var(--public-link); }
body.lq-public .lqs-options .answer-btn.answer-correct { background: var(--public-success-bg); color: var(--public-success); border-color: #4e9c69; }
body.lq-public .lqs-options .answer-btn.answer-wrong { background: var(--public-danger-bg); color: var(--public-danger); border-color: #a84e55; }
body.lq-public .lqs-page :is(button,a):focus-visible { outline-color: var(--public-link); }
body.lq-public .lqs-scores .lqs-site-record { border-color: var(--public-line); }
body.lq-public .lqs-theme-tools { display: flex; align-items: center; flex-shrink: 0; }
body.lq-public .lqs-theme-toggle { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; border: 1px solid var(--public-line); border-radius: 12px; background: var(--public-surface); color: var(--public-ink); font-size: 1rem; }

/* Maths uses the shared sun/moon preference while keeping its game controls. */
html[data-lq-page="quizmatematica"][data-theme="light"] {
    --lq-bg: #f3f6fa; --lq-card: #fff; --lq-card2: #eaf0f8;
    --lq-text: #142345; --lq-muted: #52617a; --lq-border: #dce4f0;
}
html[data-lq-page="quizmatematica"][data-theme="dark"] {
    --lq-bg: #09121f; --lq-card: #15253b; --lq-card2: #1c2e46;
    --lq-text: #eaf0f8; --lq-muted: #a8b8ce; --lq-border: #293b53;
}
body.lq-public[data-lq-page="quizmatematica"] .lq-shell::before { background: var(--public-bg); }
body.lq-public[data-lq-page="quizmatematica"] .lq-opt { background: var(--public-surface); color: var(--public-ink); }
body.lq-public[data-lq-page="quizmatematica"] .lq-opt:not(:disabled):hover { background: var(--public-soft); border-color: var(--public-link); }

@media (max-width: 699px) {
    body.lq-public[data-lq-page="survival"] .lqs-question.lq-question-card { background: var(--public-bg); }
}