.cartoon-page {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(var(--navbar-height) + 3rem) 1.5rem 5rem;
}

/* Restoring-session spinner shown while the auth bridge is reconnecting. */
.restoring-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--accent-secondary, #ff8bd0);
    animation: cartoon-spin 0.9s linear infinite;
    margin-top: 0.75rem;
}

/* Fallback state shown when the auth bridge definitively gave up. */
.restoring-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
    align-items: center;
}
.cartoon-primary-link-button {
    appearance: none;
    border: none;
    font: inherit;
    cursor: pointer;
}
.cartoon-primary-link-button:disabled {
    cursor: progress;
    opacity: 0.7;
}
.cartoon-secondary-link {
    color: var(--text-secondary);
    text-decoration: underline;
    font-size: 0.92rem;
}
.cartoon-secondary-link:hover {
    color: var(--text-primary);
}

/* Prominent admin entry-point row. Hosts two card-style buttons
   (usage dashboard + knowledge base manager) side by side on wide
   screens, stacking vertically on narrow ones. */
.admin-cta-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.admin-usage-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 139, 208, 0.18), rgba(126, 168, 255, 0.18));
    border: 1px solid rgba(255, 139, 208, 0.35);
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
}
.admin-usage-cta.admin-kb-cta {
    background: linear-gradient(135deg, rgba(126, 168, 255, 0.18), rgba(80, 200, 120, 0.18));
    border-color: rgba(126, 168, 255, 0.42);
}
.admin-usage-cta.admin-kb-cta:hover {
    box-shadow: 0 14px 32px rgba(126, 168, 255, 0.28);
    border-color: rgba(126, 168, 255, 0.7);
}
.admin-usage-cta.admin-kb-cta .admin-usage-cta-arrow {
    color: var(--accent-tertiary, #7ea8ff);
}
.admin-usage-cta.admin-kb-cta .admin-usage-cta-text strong {
    background: linear-gradient(135deg, var(--accent-tertiary, #7ea8ff), #8fe6c0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.admin-usage-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 139, 208, 0.25);
    border-color: rgba(255, 139, 208, 0.6);
}
.admin-usage-cta-icon {
    font-size: 1.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.18));
}
.admin-usage-cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.25;
}
.admin-usage-cta-text strong {
    font-weight: 700;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--accent-secondary, #ff8bd0), var(--accent-tertiary, #7ea8ff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.admin-usage-cta-text small {
    color: var(--text-secondary);
    font-size: 0.82rem;
}
.admin-usage-cta-arrow {
    font-size: 1.4rem;
    color: var(--accent-secondary, #ff8bd0);
    transition: transform 0.18s ease;
}
.admin-usage-cta:hover .admin-usage-cta-arrow {
    transform: translateX(4px);
}

.cartoon-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
}

.cartoon-hero-copy h1 {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.05em;
    margin: 0.5rem 0 1rem;
    background: linear-gradient(135deg, var(--text-primary), var(--accent-secondary), var(--accent-tertiary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cartoon-hero-copy p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 680px;
}

.cartoon-kicker {
    display: inline-flex;
    align-items: center;
    color: var(--accent-secondary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.cartoon-example-card,
.cartoon-card {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.cartoon-example-card {
    padding: 1.5rem;
    min-height: 320px;
    overflow: hidden;
}

.cartoon-example-scene {
    position: relative;
    height: 100%;
    min-height: 280px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 25% 25%, rgba(244, 114, 182, 0.35), transparent 35%),
        radial-gradient(circle at 75% 20%, rgba(6, 182, 212, 0.35), transparent 35%),
        linear-gradient(145deg, rgba(139, 92, 246, 0.22), rgba(15, 23, 42, 0.75));
    display: grid;
    place-items: center;
}

.cartoon-bubble {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #111827;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.22);
}

.cartoon-cat,
.cartoon-bag {
    position: absolute;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.3));
}

.cartoon-cat {
    font-size: 6rem;
    left: 24%;
    bottom: 30%;
    transform: rotate(-10deg);
}

.cartoon-bag {
    font-size: 6.5rem;
    right: 22%;
    bottom: 18%;
    transform: rotate(10deg);
}

.cartoon-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.generator-card {
    display: grid;
    gap: 1.5rem;
}

.cartoon-auth-callout {
    text-align: center;
    padding: 2rem 1rem;
}

.cartoon-auth-callout h2,
.section-heading-row h2 {
    margin: 0.25rem 0;
    font-size: 1.6rem;
}

.cartoon-auth-callout p,
.empty-state {
    color: var(--text-secondary);
}

.cartoon-primary-link,
#generateBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.85rem 1.25rem;
    background: var(--gradient-primary);
    color: white;
    font-weight: 800;
    box-shadow: var(--shadow-glow);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.cartoon-primary-link:hover,
#generateBtn:hover {
    color: white;
    transform: translateY(-1px);
}

.cartoon-form label {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--text-primary);
    font-weight: 800;
}

.prompt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: stretch;
}

#cartoonPrompt {
    width: 100%;
    resize: vertical;
    min-height: 110px;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-primary);
    outline: none;
}

#cartoonPrompt:focus {
    border-color: rgba(var(--accent-secondary-rgb), 0.7);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.12);
}

#generateBtn {
    min-width: 150px;
    border: none;
}

#generateBtn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
}

.generate-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    display: none;
    animation: cartoon-spin 0.9s linear infinite;
}

#generateBtn.loading .generate-spinner {
    display: inline-block;
}

@keyframes cartoon-spin {
    to { transform: rotate(360deg); }
}

/* ── Voice input (mic) ────────────────────────────────────────────────── */
/* The textarea + mic share a relatively-positioned wrapper so the mic sits
   in the bottom-right corner of the input without disturbing the grid. */
.prompt-input-wrap {
    position: relative;
    min-width: 0;
}

/* Keep typed text clear of the mic button parked in the corner. */
.prompt-input-wrap #cartoonPrompt {
    padding-right: 3.4rem;
}

.mic-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast),
        color var(--transition-fast), box-shadow var(--transition-fast);
}

.mic-btn:hover {
    color: var(--text-primary);
    background: rgba(var(--accent-secondary-rgb), 0.18);
    transform: translateY(-1px);
}

.mic-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
}

.mic-btn .mic-spinner,
.mic-btn .mic-countdown {
    display: none;
}

/* Recording: red, gently pulsing, icon hidden, live countdown shown. */
.mic-btn.recording {
    color: #fff;
    background: #e5484d;
    border-color: #e5484d;
    box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55);
    animation: mic-pulse 1.4s ease-out infinite;
}

.mic-btn.recording .mic-icon {
    display: none;
}

.mic-btn.recording .mic-countdown {
    display: inline-block;
    font-weight: 800;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

@keyframes mic-pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

/* Transcribing: spinner replaces the icon. */
.mic-btn.transcribing {
    color: var(--text-primary);
}

.mic-btn.transcribing .mic-icon {
    display: none;
}

.mic-btn.transcribing .mic-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: cartoon-spin 0.9s linear infinite;
}

.mic-status {
    margin: 0.55rem 0 0;
    color: var(--text-tertiary);
    font-size: 0.88rem;
}

.mic-status.is-error {
    color: #ff8a8a;
}

/* ── Voice feedback survey modal ──────────────────────────────────────── */
.voice-survey {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.voice-survey-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}

.voice-survey-box {
    position: relative;
    width: min(440px, 100%);
    background: var(--bg-card, #14182a);
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    padding: 1.6rem 1.5rem 1.3rem;
    box-shadow: var(--shadow-glow);
    animation: voice-survey-pop 0.18s ease-out;
}

@keyframes voice-survey-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.voice-survey-box h3 {
    margin: 0 0 0.6rem;
    color: var(--text-primary);
    font-size: 1.15rem;
}

.voice-survey-close {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.voice-survey-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.voice-survey-heard {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.voice-survey-heard span {
    color: var(--text-primary);
    font-weight: 700;
    font-style: italic;
}

.voice-survey-rate {
    display: flex;
    gap: 0.75rem;
}

.voice-survey-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast),
        border-color var(--transition-fast);
}

.voice-survey-btn:hover { transform: translateY(-1px); }

.voice-survey-btn.good.is-selected {
    background: rgba(46, 204, 113, 0.18);
    border-color: rgba(46, 204, 113, 0.6);
}

.voice-survey-btn.bad.is-selected {
    background: rgba(229, 72, 77, 0.18);
    border-color: rgba(229, 72, 77, 0.6);
}

.voice-survey-comment {
    width: 100%;
    margin-top: 1rem;
    min-height: 70px;
    resize: vertical;
    padding: 0.8rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-primary);
    outline: none;
}

.voice-survey-actions {
    margin-top: 0.85rem;
    display: flex;
    justify-content: flex-end;
}

.voice-survey-submit {
    padding: 0.65rem 1.2rem;
    border-radius: 999px;
    border: none;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.voice-survey-hint {
    margin: 1rem 0 0;
    color: var(--text-tertiary);
    font-size: 0.82rem;
}

.prompt-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-tertiary);
    font-size: 0.9rem;
    margin: 0.65rem 0 1rem;
}

/* ── Aspect-ratio picker ──────────────────────────────────────────────── */
.ratio-picker {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}

.ratio-picker legend {
    padding: 0;
    margin-bottom: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.ratio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ratio-option {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    user-select: none;
}

.ratio-option:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.45);
}

.ratio-option.is-active {
    color: var(--text-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.85);
    background: rgba(var(--accent-primary-rgb), 0.14);
}

/* Hide the native radio but keep it accessible/focusable (bulletproof sr-only
   so no stray glyph/bar can render in front of the label text). */
.ratio-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.ratio-option:focus-within {
    outline: 2px solid rgba(var(--accent-primary-rgb), 0.65);
    outline-offset: 2px;
}

.ratio-text {
    font-size: 0.92rem;
    white-space: nowrap;
}

.ratio-text small {
    opacity: 0.6;
    font-size: 0.78em;
    margin-left: 0.15rem;
}

.prompt-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.prompt-suggestions button,
.review-actions button {
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.055);
}

.prompt-suggestions button:hover,
.review-actions button:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.55);
}

.cartoon-result {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px solid var(--glass-border);
}

.result-image-wrap,
.gallery-image-wrap {
    overflow: hidden;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid var(--glass-border);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    color: var(--text-secondary);
}

.gallery-image-wrap.drawing-state {
    flex-direction: column;
    gap: 0.6rem;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.12) 40%,
        rgba(255, 255, 255, 0.04) 80%
    );
    background-size: 200% 100%;
    animation: cartoon-shimmer 1.6s linear infinite;
    color: var(--text-primary);
    font-weight: 500;
}

.gallery-image-wrap.drawing-state .drawing-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--accent-secondary, #ff8bd0);
    animation: cartoon-spin 0.9s linear infinite;
}

.gallery-image-wrap.empty-state.failed {
    color: var(--accent-warning, #ffb37a);
    font-weight: 500;
}

@keyframes cartoon-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes cartoon-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-image-wrap.drawing-state,
    .gallery-image-wrap.drawing-state .drawing-spinner {
        animation: none;
    }
}

/* The wrap owns the aspect ratio (square by default, or .ratio-portrait /
   .ratio-landscape). When an image is present we drop the placeholder padding
   so the picture fills the wrap edge-to-edge — that keeps the rendered <img>
   box exactly the same aspect ratio as the picture, which the read-only
   annotation overlay depends on for pixel-accurate alignment. */
.result-image-wrap.ratio-portrait,
.gallery-image-wrap.ratio-portrait {
    aspect-ratio: 3 / 4;
}

.result-image-wrap.ratio-landscape,
.gallery-image-wrap.ratio-landscape {
    aspect-ratio: 4 / 3;
}

.result-image-wrap.ratio-tall,
.gallery-image-wrap.ratio-tall {
    aspect-ratio: 9 / 16;
}

.result-image-wrap.ratio-wide,
.gallery-image-wrap.ratio-wide {
    aspect-ratio: 16 / 9;
}

.result-image-wrap:has(img),
.gallery-image-wrap:has(img) {
    padding: 0;
}

.result-image-wrap img,
.gallery-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.review-card img {
    width: 100%;
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
}

.result-label,
.gallery-card time,
.review-meta {
    color: var(--text-tertiary);
    font-size: 0.86rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.review-current-flag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.06);
}

.review-current-flag.flag-good        { background: rgba(80, 200, 120, 0.18); color: #6dd28a; border-color: rgba(80, 200, 120, 0.35); }
.review-current-flag.flag-needs_improvement { background: rgba(255, 170, 70, 0.18); color: #ffc88a; border-color: rgba(255, 170, 70, 0.35); }
.review-current-flag.flag-funny       { background: rgba(255, 196, 75, 0.18); color: #ffce7a; border-color: rgba(255, 196, 75, 0.35); }
.review-current-flag.flag-training_candidate { background: rgba(126, 138, 255, 0.18); color: #a3acff; border-color: rgba(126, 138, 255, 0.35); }
.review-current-flag.flag-bad         { background: rgba(255, 120, 130, 0.18); color: #ff9aa1; border-color: rgba(255, 120, 130, 0.35); }
.review-current-flag.flag-unsafe      { background: rgba(255, 70, 70, 0.22);  color: #ff8a8a; border-color: rgba(255, 70, 70, 0.4); }
.review-current-flag.flag-unreviewed  { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }

.review-rag-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(126, 168, 255, 0.12);
    color: #a3bdff;
    border: 1px solid rgba(126, 168, 255, 0.28);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.review-rewriter-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--glass-border);
    cursor: help;
}
.review-rewriter-chip.rewriter-idiomatic { background: rgba(126, 240, 180, 0.16); color: #8fe6c0; border-color: rgba(126, 240, 180, 0.35); }
.review-rewriter-chip.rewriter-twist     { background: rgba(255, 196, 75, 0.18);  color: #ffd28a; border-color: rgba(255, 196, 75, 0.38); }
.review-rewriter-chip.rewriter-literal   { background: rgba(180, 180, 200, 0.14); color: #c8c8e0; border-color: rgba(180, 180, 200, 0.32); }
.review-rewriter-chip.rewriter-error     { background: rgba(255, 120, 130, 0.18); color: #ff9aa1; border-color: rgba(255, 120, 130, 0.38); }
.review-rewriter-chip.rewriter-unknown   { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }

/* Promote-to-KB block on the admin review card */
.promote-kb-block {
    margin-top: 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0;
    background: linear-gradient(180deg, rgba(126, 168, 255, 0.06), rgba(126, 168, 255, 0.02));
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.promote-kb-block[open] {
    border-color: rgba(255, 139, 208, 0.4);
    background: linear-gradient(180deg, rgba(255, 139, 208, 0.08), rgba(126, 168, 255, 0.02));
}
.promote-kb-block > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.86rem;
    color: var(--text-primary);
    user-select: none;
}
.promote-kb-block > summary::-webkit-details-marker { display: none; }
.promote-kb-block > summary:hover {
    background: rgba(255, 255, 255, 0.04);
}
.promote-kb-chevron {
    display: inline-block;
    color: var(--accent-secondary, #ff8bd0);
    font-size: 1rem;
    transition: transform 0.18s ease;
    width: 14px;
    text-align: center;
}
.promote-kb-block[open] .promote-kb-chevron {
    transform: rotate(90deg);
}
.promote-kb-summary-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    gap: 0.1rem;
}
.promote-kb-summary-text strong {
    font-weight: 600;
    color: var(--text-primary);
}
.promote-kb-summary-text small {
    color: var(--text-tertiary);
    font-size: 0.74rem;
}
.promote-kb-block > summary > input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.promote-kb-block > summary > input[type="checkbox"]:hover {
    border-color: var(--accent-secondary, #ff8bd0);
}
.promote-kb-block > summary > input[type="checkbox"]:checked {
    background: var(--accent-secondary, #ff8bd0);
    border-color: var(--accent-secondary, #ff8bd0);
}
.promote-kb-block > summary > input[type="checkbox"]:checked::after {
    content: "✓";
    color: #111;
    font-size: 0.8rem;
    font-weight: 800;
}
.promote-kb-form {
    display: grid;
    gap: 0.65rem;
    padding: 0.25rem 0.85rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.promote-kb-status {
    margin: 0.3rem 0 0.1rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--glass-border);
}
.promote-kb-status[data-state="loading"] { color: #ffd28a; border-color: rgba(255, 196, 75, 0.4); }
.promote-kb-status[data-state="loaded"]  { color: #8fe6c0; border-color: rgba(80, 200, 120, 0.4); background: rgba(80, 200, 120, 0.08); }
.promote-kb-status[data-state="empty"]   { color: var(--text-secondary); }
.promote-kb-status[data-state="error"]   { color: #ff9aa1; border-color: rgba(255, 120, 130, 0.45); }
.promote-kb-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.promote-kb-form input,
.promote-kb-form textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.28);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
}
.promote-kb-form textarea { min-height: 2.5rem; }
.promote-kb-hint {
    color: var(--text-tertiary);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0.25rem 0 0;
    padding: 0.4rem 0.55rem;
    border-left: 2px solid var(--accent-secondary, #ff8bd0);
    background: rgba(255, 139, 208, 0.04);
}

.promote-kb-draft-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    margin-top: -0.2rem;
}
.promote-kb-draft-btn {
    appearance: none;
    border: 1px solid rgba(126, 168, 255, 0.5);
    background: rgba(126, 168, 255, 0.12);
    color: #c2d2ff;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.promote-kb-draft-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(126, 168, 255, 0.22);
    box-shadow: 0 6px 18px rgba(126, 168, 255, 0.18);
}
.promote-kb-draft-btn:disabled {
    cursor: progress;
    opacity: 0.7;
}
.promote-kb-draft-hint {
    color: var(--text-tertiary);
    font-size: 0.76rem;
    line-height: 1.3;
}
.promote-kb-draft-hint[data-state="loading"] { color: #ffd28a; }
.promote-kb-draft-hint[data-state="ok"]      { color: #8fe6c0; }
.promote-kb-draft-hint[data-state="warn"]    { color: #ffce7a; }
.promote-kb-draft-hint[data-state="error"]   { color: #ff9aa1; }

/* User thumbs row (result panel + gallery cards) */
.user-vote-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
}
.user-vote-label {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    margin-right: 0.3rem;
}
.user-vote {
    appearance: none;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.user-vote:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
}
.user-vote.active.vote-up {
    background: rgba(80, 200, 120, 0.22);
    border-color: rgba(80, 200, 120, 0.55);
    box-shadow: 0 0 0 2px rgba(80, 200, 120, 0.18);
}
.user-vote.active.vote-down {
    background: rgba(255, 120, 130, 0.22);
    border-color: rgba(255, 120, 130, 0.55);
    box-shadow: 0 0 0 2px rgba(255, 120, 130, 0.18);
}
.user-vote:disabled { cursor: progress; opacity: 0.6; }

.result-vote-row {
    margin-top: 1rem;
}

.admin-review-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.admin-review-filter select {
    background: rgba(0, 0, 0, 0.24);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.review-actions .ghost {
    background: transparent;
    border: 1px dashed var(--glass-border);
    color: var(--text-secondary);
}

.review-actions button[aria-pressed="true"] {
    outline: 2px solid var(--accent-secondary, #ff8bd0);
    outline-offset: 1px;
}

.review-save-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.review-save {
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.review-save:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.review-save.has-changes:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-secondary, #ff8bd0), var(--accent-tertiary, #7ea8ff));
    color: #111;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(255, 139, 208, 0.25);
}

.review-save.has-changes:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(255, 139, 208, 0.32);
}

.review-save.saving {
    opacity: 0.7;
    cursor: progress;
}

.review-save-hint {
    color: var(--text-tertiary);
    font-size: 0.82rem;
    line-height: 1.3;
}

.result-copy h2 {
    margin: 0.25rem 0 0.75rem;
}

#downloadLink {
    font-weight: 800;
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cartoon-gallery,
.admin-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}

.gallery-card,
.review-card {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.18);
}

.gallery-card-body,
.review-card-body {
    padding: 0.9rem;
}

.gallery-card h3,
.review-card h3 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.review-notes-label {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 700;
}

.review-notes {
    width: 100%;
    resize: vertical;
    min-height: 76px;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    outline: none;
    font-size: 0.92rem;
}

.review-notes:focus {
    border-color: rgba(var(--accent-secondary-rgb), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.12);
}

.review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.review-actions button[data-flag="good"],
.review-actions button[data-flag="funny"],
.review-actions button[data-flag="training_candidate"] {
    color: var(--accent-success);
}

.review-actions button[data-flag="bad"],
.review-actions button[data-flag="unsafe"] {
    color: var(--accent-danger);
}

.quota-banner {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(139, 92, 246, 0.18));
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 0.35rem;
}

.quota-banner-title {
    font-size: 1.05rem;
    color: var(--text-primary);
}

.quota-banner-body {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.quota-banner-countdown {
    margin: 0;
    color: var(--accent-warning);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}

/* Entrance: the banner gently pops in when a cooldown starts. */
.quota-banner {
    position: relative;
    animation: quota-pop-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes quota-pop-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Exit: celebratory pop-and-fade when the quota refreshes. */
.quota-banner-release {
    animation: quota-pop-out 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    border-color: rgba(34, 197, 94, 0.5);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(139, 92, 246, 0.18));
}
.quota-banner-release .quota-banner-countdown {
    color: var(--accent-success, #22c55e);
}

@keyframes quota-pop-out {
    0%   { opacity: 1; transform: scale(1); }
    25%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 0; transform: scale(0.92) translateY(-10px); }
}

.quota-spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-success, #22c55e);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
    pointer-events: none;
    opacity: 0;
    animation: quota-spark-fly 0.85s ease-out var(--sd, 0s) forwards;
}

@keyframes quota-spark-fly {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0px)), -180%) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .quota-banner,
    .quota-banner-release { animation: none; }
    .quota-spark { display: none; }
}

.hidden {
    display: none !important;
}

[data-theme="light"] .cartoon-example-card,
[data-theme="light"] .cartoon-card {
    background: rgba(255, 255, 255, 0.78);
}

[data-theme="light"] #cartoonPrompt,
[data-theme="light"] .review-notes,
[data-theme="light"] .gallery-card,
[data-theme="light"] .review-card,
[data-theme="light"] .result-image-wrap,
[data-theme="light"] .gallery-image-wrap {
    background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 820px) {
    .cartoon-page {
        padding-inline: 1rem;
    }

    .cartoon-hero,
    .cartoon-result,
    .prompt-row {
        grid-template-columns: 1fr;
    }

    #generateBtn {
        width: 100%;
    }
}

/* ============================================================
   Image annotation editor
   ============================================================ */

/* Read-only marks overlay painted on top of result / gallery images. */
.annotation-overlay {
    pointer-events: none;
}

/* The result image is clickable to open the full-screen viewer. */
#resultImage {
    cursor: zoom-in;
}

/* ---- Full-screen image viewer (lightbox) ---- */
.cartoon-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 14, 0.9);
    backdrop-filter: blur(4px);
}
.lightbox-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    max-width: min(1100px, 100%);
    max-height: 94vh;
}
/* Anchored to the IMAGE wrap (not the shell) so it always sits at the actual
   top-right corner of the picture, regardless of aspect ratio. Pushed just
   outside the corner; the 14px offset stays within the lightbox's 1rem padding
   so it never clips off-screen, even for full-bleed images. */
.lightbox-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    z-index: 3;
    appearance: none;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(20, 24, 34, 0.78);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-close:hover { background: rgba(40, 46, 60, 0.92); }
.lightbox-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.lightbox-img-wrap {
    position: relative;
    line-height: 0;
}
.lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-xl, 0 30px 80px rgba(0, 0, 0, 0.6));
}
.lightbox-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1rem;
    max-width: 100%;
}
.lightbox-title {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
}
.lightbox-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
.lightbox-open {
    color: var(--text-secondary);
    text-decoration: underline;
    font-size: 0.85rem;
}
.lightbox-open:hover { color: var(--text-primary); }

/* The lightbox backdrop is always dark (both themes), so the action buttons
   below the image must stay light-on-dark. In light theme --text-primary is
   near-black, which made "Edit image / Talk to the image / Idiom Factory /
   Open original" almost invisible against the dark scrim — pin them to white
   here regardless of the active theme. */
.cartoon-lightbox .lightbox-actions .cartoon-edit-btn,
.cartoon-lightbox .lightbox-actions .cartoon-talk-btn,
.cartoon-lightbox .lightbox-actions .cartoon-recover-btn,
.cartoon-lightbox .lightbox-actions .cartoon-share-btn,
.cartoon-lightbox .lightbox-actions .cartoon-forum-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.1);
}
.cartoon-lightbox .lightbox-actions .cartoon-edit-btn:hover,
.cartoon-lightbox .lightbox-actions .cartoon-talk-btn:hover,
.cartoon-lightbox .lightbox-actions .cartoon-recover-btn:hover,
.cartoon-lightbox .lightbox-actions .cartoon-share-btn:hover,
.cartoon-lightbox .lightbox-actions .cartoon-forum-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.18);
}
.cartoon-lightbox .lightbox-open {
    color: rgba(255, 255, 255, 0.85);
}
.cartoon-lightbox .lightbox-open:hover {
    color: #fff;
}
.cartoon-lightbox .lightbox-title {
    color: rgba(255, 255, 255, 0.82);
}

/* Result-panel action row (Edit / Recover / Open / Download with marks). */
.result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0;
}
.cartoon-edit-btn,
.cartoon-talk-btn,
.cartoon-recover-btn,
.gallery-edit-btn,
.gallery-recover-btn {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    transition: transform var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
}
.cartoon-edit-btn:hover,
.gallery-edit-btn:hover {
    border-color: rgba(var(--accent-secondary-rgb, 255, 139, 208), 0.7);
    transform: translateY(-1px);
}
.cartoon-talk-btn:hover {
    border-color: rgba(var(--accent-primary-rgb, 126, 168, 255), 0.7);
    transform: translateY(-1px);
}
.cartoon-recover-btn:hover,
.gallery-recover-btn:hover {
    border-color: var(--accent-warning, #ffb37a);
    color: var(--accent-warning, #ffb37a);
}

.gallery-edit-row {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.5rem;
}
.gallery-edit-btn,
.gallery-recover-btn {
    padding: 0.28rem 0.6rem;
    font-size: 0.78rem;
}
.gallery-image-wrap {
    position: relative;
}

/* ---- Full-screen editor modal ---- */
body.annotator-open {
    overflow: hidden;
}
.annotator-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.annotator-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 18, 0.78);
    backdrop-filter: blur(4px);
}
.annotator-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    max-height: 94vh;
    background: var(--bg-elevated, #131826);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--shadow-xl, 0 30px 80px rgba(0, 0, 0, 0.5));
    overflow: hidden;
}
.annotator-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--glass-border);
}
.annotator-title {
    font-size: 1rem;
    margin: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.annotator-close {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.annotator-close:hover { color: var(--text-primary); }

.annotator-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--glass-border);
}
.annotator-tools,
.annotator-widths,
.annotator-colors,
.annotator-edits {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.atool,
.awidth,
.aedit {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.35rem 0.55rem;
    min-width: 38px;
    transition: border-color var(--transition-fast, 0.15s), background var(--transition-fast, 0.15s);
}
.atool.active,
.atool[aria-pressed="true"],
.awidth.active {
    border-color: rgba(var(--accent-secondary-rgb, 255, 139, 208), 0.9);
    background: rgba(var(--accent-secondary-rgb, 255, 139, 208), 0.16);
}
.atool:hover,
.awidth:hover,
.aedit:hover {
    border-color: rgba(var(--accent-secondary-rgb, 255, 139, 208), 0.7);
}
.annotator-opacity {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}
.aopacity-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.aopacity-input {
    -webkit-appearance: none;
    appearance: none;
    width: 96px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(var(--accent-secondary-rgb, 255, 139, 208), 0.25),
        rgba(var(--accent-secondary-rgb, 255, 139, 208), 0.95));
    cursor: pointer;
    outline: none;
}
.aopacity-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(var(--accent-secondary-rgb, 255, 139, 208), 0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
.aopacity-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(var(--accent-secondary-rgb, 255, 139, 208), 0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
.aopacity-val {
    font-size: 0.78rem;
    color: var(--text-primary);
    min-width: 2.6em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.aswatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--glass-border);
    cursor: pointer;
    padding: 0;
}
.aswatch.active {
    border-color: var(--text-primary);
    transform: scale(1.1);
}
.aswatch-custom {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--glass-border);
    display: inline-flex;
    cursor: pointer;
}
.acolor-input {
    width: 200%;
    height: 200%;
    margin: -25%;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.annotator-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: auto;
    background:
        repeating-conic-gradient(rgba(255, 255, 255, 0.03) 0% 25%, transparent 0% 50%) 50% / 24px 24px;
}
.annotator-canvas-wrap {
    position: relative;
    line-height: 0;
    max-width: 100%;
}
.annotator-img {
    display: block;
    max-width: 100%;
    max-height: 64vh;
    width: auto;
    height: auto;
    border-radius: 8px;
}
.annotator-canvas {
    position: absolute;
    top: 0;
    left: 0;
    touch-action: none;
    cursor: crosshair;
}
.annotator-canvas.is-eraser {
    cursor: cell;
}

.annotator-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    border-top: 1px solid var(--glass-border);
}
.annotator-hint {
    font-size: 0.82rem;
    color: var(--text-tertiary, var(--text-secondary));
}
.annotator-foot-actions {
    display: flex;
    gap: 0.6rem;
}
.annotator-cancel,
.annotator-save {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
}
.annotator-cancel {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}
.annotator-save {
    border: none;
    background: var(--gradient-primary, linear-gradient(135deg, #ff8bd0, #7ea8ff));
    color: #fff;
    box-shadow: var(--shadow-glow, 0 8px 24px rgba(126, 168, 255, 0.4));
}
.annotator-save.saving {
    opacity: 0.7;
    cursor: progress;
}
.annotator-guess {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 226, 130, 0.5);
    background: rgba(255, 213, 74, 0.14);
    color: var(--text-primary);
    margin-right: auto;
}
.annotator-guess:hover {
    background: rgba(255, 213, 74, 0.24);
}
.annotator-guess.saving {
    opacity: 0.7;
    cursor: progress;
}

/* ---- "Guess what you drew" dialog ---- */
.guess-dialog {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.guess-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 18, 0.72);
}
.guess-box {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    background: var(--bg-elevated, #131826);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--shadow-xl, 0 30px 80px rgba(0, 0, 0, 0.5));
    padding: 1.4rem;
}
.guess-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent-warning, #ffd54a);
}
.guess-headline {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    color: var(--text-primary);
}
.guess-sub {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.guess-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}
.guess-chip {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    text-transform: capitalize;
}
.guess-chip.active {
    border-color: transparent;
    background: var(--gradient-primary, linear-gradient(135deg, #ff8bd0, #7ea8ff));
    color: #fff;
}
.guess-input-wrap {
    margin: 0 0 1.2rem;
}
.guess-input-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.guess-input {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    font: inherit;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}
.guess-input:focus {
    outline: none;
    border-color: #7ea8ff;
    box-shadow: 0 0 0 3px rgba(126, 168, 255, 0.25);
}
textarea.guess-textarea {
    resize: vertical;
    min-height: 2.6rem;
    line-height: 1.4;
}
.guess-counter {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-tertiary, var(--text-secondary));
    text-align: right;
}
.guess-counter.low {
    color: var(--accent-warning, #ffb37a);
}
.guess-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}
.guess-cancel,
.guess-ok {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
}
.guess-cancel {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}
.guess-ok {
    border: none;
    background: var(--gradient-primary, linear-gradient(135deg, #ff8bd0, #7ea8ff));
    color: #fff;
    box-shadow: var(--shadow-glow, 0 8px 24px rgba(126, 168, 255, 0.4));
}

/* ---- Shared confirmation dialog ---- */
.confirm-dialog {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 18, 0.7);
}
.confirm-box {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: var(--bg-elevated, #131826);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-xl, 0 30px 80px rgba(0, 0, 0, 0.5));
    padding: 1.3rem;
}
.confirm-msg {
    margin: 0 0 1.1rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.45;
}
.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}
.confirm-cancel,
.confirm-ok {
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
}
.confirm-cancel {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}
.confirm-ok {
    border: none;
    background: var(--gradient-primary, linear-gradient(135deg, #ff8bd0, #7ea8ff));
    color: #fff;
}
.confirm-ok.danger {
    background: var(--accent-warning, #ffb37a);
    color: #2a1a08;
}

@media (max-width: 640px) {
    .annotator-toolbar {
        gap: 0.5rem 0.75rem;
    }
    .annotator-foot {
        flex-direction: column;
        align-items: stretch;
    }
    .annotator-foot-actions {
        justify-content: flex-end;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   External (social) sharing — trigger button + popover.
   This styles the THIRD-PARTY share control only. A future "share to forum"
   control will get its own class so the two affordances stay visually
   distinct.
   ─────────────────────────────────────────────────────────────────────── */
.cartoon-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    transition: transform var(--transition-fast, 0.15s) ease,
                border-color var(--transition-fast, 0.15s) ease,
                background var(--transition-fast, 0.15s) ease;
}
.cartoon-share-btn svg { display: block; }
.cartoon-share-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-tertiary-rgb, 126, 168, 255), 0.7);
    background: rgba(var(--accent-tertiary-rgb, 126, 168, 255), 0.12);
}
.cartoon-share-btn:focus-visible {
    outline: 2px solid rgba(var(--accent-primary-rgb, 126, 168, 255), 0.65);
    outline-offset: 2px;
}

/* Compact icon-only variant for gallery thumbnails. */
.gallery-share-btn {
    padding: 0.28rem 0.45rem;
}
.gallery-share-btn .cartoon-share-btn-label { display: none; }

/* The result-panel button keeps its "Share" label. */
.cartoon-share-btn-label { font-size: 0.85rem; }

/* ---- Internal share to the Idiom Factory forum ---- */
.cartoon-forum-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-primary-rgb, 126, 168, 255), 0.45);
    background: rgba(var(--accent-primary-rgb, 126, 168, 255), 0.12);
    color: var(--text-primary);
    transition: transform var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s), background var(--transition-fast, 0.15s);
}
.cartoon-forum-btn svg { display: block; }
.cartoon-forum-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-primary-rgb, 126, 168, 255), 0.9);
    background: rgba(var(--accent-primary-rgb, 126, 168, 255), 0.2);
}
.cartoon-forum-btn:focus-visible {
    outline: 2px solid rgba(var(--accent-primary-rgb, 126, 168, 255), 0.65);
    outline-offset: 2px;
}
/* Icon-only on gallery thumbnails. */
.gallery-forum-btn {
    padding: 0.28rem 0.45rem;
}
.gallery-forum-btn .cartoon-forum-btn-label { display: none; }

/* Forum share dialog (reuses .guess-* dialog chrome). */
.forum-share-box .forum-share-preview {
    margin: 0 0 1rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.24);
    max-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.forum-share-box .forum-share-preview img {
    max-width: 100%;
    max-height: 220px;
    display: block;
    object-fit: contain;
}
.forum-share-box .guess-input-wrap { margin-bottom: 0.9rem; }
.guess-ok[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---- Popover menu ---- */
.cartoon-share-pop {
    position: fixed;
    /* Must sit above the full-screen lightbox (z-index 1900); otherwise the
       share menu opens behind the image and is unclickable. */
    z-index: 2300;
    width: 296px;
    max-width: calc(100vw - 16px);
    padding: 0.65rem;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: var(--bg-elevated, #131826);
    box-shadow: var(--shadow-xl, 0 24px 60px rgba(0, 0, 0, 0.5));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: cartoon-share-pop-in 0.14s ease-out;
}
@keyframes cartoon-share-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cartoon-share-pop[data-placement="above"] {
    animation-name: cartoon-share-pop-in-up;
}
@keyframes cartoon-share-pop-in-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cartoon-share-pop-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #8b93a7);
    padding: 0.15rem 0.35rem 0.5rem;
}
.cartoon-share-pop-grid {
    display: grid;
    /* minmax(0, 1fr) lets columns shrink below the min-content width of a
       long single-word label (e.g. "WhatsApp", "Instagram") instead of
       forcing the whole grid wider than the popover — which previously made
       the rightmost icon spill past the popover's right edge. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
}
.cartoon-share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    appearance: none;
    cursor: pointer;
    font: inherit;
    padding: 0.55rem 0.2rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    transition: background var(--transition-fast, 0.15s) ease,
                border-color var(--transition-fast, 0.15s) ease,
                color var(--transition-fast, 0.15s) ease,
                transform var(--transition-fast, 0.15s) ease;
}
.cartoon-share-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-border);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.cartoon-share-item:focus-visible {
    outline: 2px solid rgba(var(--accent-primary-rgb, 126, 168, 255), 0.65);
    outline-offset: 1px;
}
.cartoon-share-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
.cartoon-share-ic svg { display: block; }
.cartoon-share-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Per-brand accent colors on hover so the menu reads at a glance. */
.cartoon-share-ic-native    { background: rgba(126, 168, 255, 0.16); color: #7ea8ff; }
.cartoon-share-ic-x         { background: rgba(255, 255, 255, 0.08); color: #f5f5f5; }
.cartoon-share-ic-facebook  { background: rgba(24, 119, 242, 0.16); color: #4d90ff; }
.cartoon-share-ic-whatsapp  { background: rgba(37, 211, 102, 0.16); color: #25d366; }
.cartoon-share-ic-telegram  { background: rgba(42, 171, 238, 0.16); color: #2aabee; }
.cartoon-share-ic-instagram { background: rgba(225, 48, 108, 0.16); color: #e1306c; }
.cartoon-share-ic-pinterest { background: rgba(230, 0, 35, 0.16); color: #e60023; }
.cartoon-share-ic-linkedin  { background: rgba(10, 102, 194, 0.16); color: #4d90ff; }
.cartoon-share-ic-tiktok    { background: rgba(255, 255, 255, 0.08); color: #f5f5f5; }
.cartoon-share-ic-copy      { background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }

[data-theme="light"] .cartoon-share-ic-x { color: #0f1419; }
[data-theme="light"] .cartoon-share-ic-tiktok { color: #0f1419; }

@media (max-width: 380px) {
    .cartoon-share-pop-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Fill the idiom — warm-up game card
   ============================================================ */
.idiom-puzzle-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 1.1rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 139, 208, 0.16), transparent 45%),
        radial-gradient(circle at 92% 8%, rgba(126, 168, 255, 0.16), transparent 42%),
        rgba(255, 255, 255, 0.055);
    border-color: rgba(var(--accent-secondary-rgb), 0.35);
}

.idiom-puzzle-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.idiom-puzzle-intro h2 {
    margin: 0.2rem 0 0.4rem;
    font-size: 1.55rem;
}

.idiom-sparkle {
    display: inline-block;
    animation: idiom-twinkle 2.4s ease-in-out infinite;
}

@keyframes idiom-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
    50% { transform: scale(1.25) rotate(12deg); opacity: 1; }
}

.idiom-puzzle-intro .cartoon-hint {
    margin: 0;
    max-width: 560px;
}

/* Shuffle button */
.idiom-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition-fast), background var(--transition-fast),
        border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.idiom-refresh-btn:hover {
    transform: translateY(-1px);
    background: rgba(var(--accent-secondary-rgb), 0.16);
    border-color: rgba(var(--accent-secondary-rgb), 0.55);
}

.idiom-refresh-btn .idiom-refresh-icon {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.idiom-refresh-btn:hover .idiom-refresh-icon,
.idiom-refresh-btn.spinning .idiom-refresh-icon {
    transform: rotate(180deg);
}

/* The stage that holds the idiom line + meaning */
.idiom-stage {
    border-radius: 22px;
    padding: 1.6rem 1.4rem;
    background:
        linear-gradient(145deg, rgba(139, 92, 246, 0.14), rgba(15, 23, 42, 0.4));
    border: 1px solid var(--glass-border);
}

.idiom-phrase {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    font-size: clamp(1.4rem, 3.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.idiom-word {
    display: inline-block;
}

/* The fill-in input rendered inline inside the phrase */
.idiom-blank-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.idiom-blank-input {
    font: inherit;
    font-weight: 800;
    text-align: center;
    color: #fff;
    width: 6ch;
    min-width: 4ch;
    max-width: 100%;
    padding: 0.1em 0.55em 0.18em;
    border: none;
    border-bottom: 3px dashed rgba(var(--accent-secondary-rgb), 0.85);
    border-radius: 12px 12px 6px 6px;
    background: rgba(var(--accent-secondary-rgb), 0.14);
    outline: none;
    caret-color: var(--accent-secondary);
    transition: background var(--transition-fast), border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.idiom-blank-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.idiom-blank-input:focus {
    border-bottom-color: var(--accent-secondary);
    background: rgba(var(--accent-secondary-rgb), 0.22);
    box-shadow: 0 6px 20px rgba(var(--accent-secondary-rgb), 0.25);
}

.idiom-blank-input.is-filled {
    border-bottom-style: solid;
    border-bottom-color: var(--accent-tertiary, #7ea8ff);
    background: rgba(126, 168, 255, 0.18);
}

/* Light theme: the tinted input background is pale, so white text washes out.
   Force a dark, readable ink color for the typed/spoken word here. */
[data-theme="light"] .idiom-blank-input {
    color: #16213e;
}

[data-theme="light"] .idiom-blank-input::placeholder {
    color: rgba(22, 33, 62, 0.45);
}

/* Mic button parked inside the blank (reuses the .mic-btn visual states) */
.idiom-mic-btn {
    position: static;
    margin-left: 0.4rem;
    width: 34px;
    height: 34px;
    flex: none;
}

.idiom-mic-btn .mic-icon svg {
    width: 17px;
    height: 17px;
}

.idiom-meaning {
    margin: 1rem 0 0;
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.5;
}

.idiom-meaning::before {
    content: "Meaning · ";
    color: var(--accent-secondary);
    font-weight: 700;
}

.idiom-answer {
    margin: 0.55rem 0 0;
    font-size: 0.95rem;
    color: var(--text-tertiary);
}

.idiom-answer strong {
    color: var(--accent-tertiary, #7ea8ff);
}

.idiom-mic-status {
    margin: 0;
}

/* The crossword card lays its rows out on a grid gap, so drop the picker's
   default bottom margin to avoid double spacing. */
.idiom-ratio-picker {
    margin: 0;
}

/* ============================================================
   Crossword customizable background + snapshot
   ============================================================ */
/* Two stacked layers live behind the card content: the chosen background
   (color / gradient / image) and a legibility scrim. Everything else in the
   card is lifted above them. */
/* Allow the background picker popover to spill outside the card. The bg
   layers below round themselves via `border-radius: inherit`, so we no longer
   need the card's own `overflow: hidden` clip. */
.idiom-puzzle-card { position: relative; overflow: visible; }
.idiom-puzzle-card > *:not(.idiom-bg-layer):not(.idiom-bg-scrim) {
    position: relative;
    z-index: 1;
}
.idiom-bg-layer,
.idiom-bg-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}
.idiom-bg-layer {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 0.35s ease;
}
.idiom-bg-scrim { opacity: 0; transition: opacity 0.35s ease; }

/* When any custom background (image OR color) is active, lay a readable scrim
   over it and switch text to white with a soft shadow. This keeps the idiom
   legible on photos and on both light and dark gradients, in either theme. */
.idiom-puzzle-card.has-bg-image .idiom-bg-scrim,
.idiom-puzzle-card.has-bg-color .idiom-bg-scrim {
    opacity: 1;
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(8, 10, 22, 0.3), transparent 55%),
        linear-gradient(180deg, rgba(8, 10, 22, 0.42), rgba(8, 10, 22, 0.62));
}
.idiom-puzzle-card.has-bg-image .idiom-puzzle-intro h2,
.idiom-puzzle-card.has-bg-image .idiom-phrase,
.idiom-puzzle-card.has-bg-image .idiom-word,
.idiom-puzzle-card.has-bg-color .idiom-puzzle-intro h2,
.idiom-puzzle-card.has-bg-color .idiom-phrase,
.idiom-puzzle-card.has-bg-color .idiom-word {
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.idiom-puzzle-card.has-bg-image .idiom-puzzle-intro .cartoon-hint,
.idiom-puzzle-card.has-bg-image .idiom-meaning,
.idiom-puzzle-card.has-bg-image .idiom-answer,
.idiom-puzzle-card.has-bg-color .idiom-puzzle-intro .cartoon-hint,
.idiom-puzzle-card.has-bg-color .idiom-meaning,
.idiom-puzzle-card.has-bg-color .idiom-answer {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.idiom-puzzle-card.has-bg-image .idiom-stage,
.idiom-puzzle-card.has-bg-color .idiom-stage {
    background: rgba(10, 12, 24, 0.34);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(2px);
}
.idiom-puzzle-card.has-bg-image .idiom-meaning::before,
.idiom-puzzle-card.has-bg-color .idiom-meaning::before { color: #ffd9f1; }

/* Keep the fill-in input readable on top of a custom background regardless of
   the page theme (the light-theme dark-ink rule would vanish on a dark scrim). */
.idiom-puzzle-card.has-bg-image .idiom-blank-input,
.idiom-puzzle-card.has-bg-color .idiom-blank-input {
    color: #fff;
}
.idiom-puzzle-card.has-bg-image .idiom-blank-input::placeholder,
.idiom-puzzle-card.has-bg-color .idiom-blank-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* (1) Image-shape pills inside the crossword card. The shared .ratio-option
   uses muted grey text that all but vanishes once a colorful/photo background
   sits behind it. Give every pill its own glassy, faintly-aurora chip so both
   the selected and unselected labels stay readable on any background. */
.idiom-ratio-picker .ratio-option {
    color: #fff;
    background: rgba(8, 10, 22, 0.55);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(3px);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.idiom-ratio-picker .ratio-option:not(.is-active) {
    color: rgba(255, 255, 255, 0.88);
}
.idiom-ratio-picker .ratio-option:hover {
    color: #fff;
    background: rgba(8, 10, 22, 0.72);
    border-color: rgba(var(--accent-primary-rgb), 0.6);
}
.idiom-ratio-picker .ratio-option.is-active {
    color: #fff;
    border-color: rgba(var(--accent-secondary-rgb), 0.9);
    background:
        linear-gradient(135deg, rgba(255, 139, 208, 0.34), rgba(126, 168, 255, 0.34)),
        rgba(8, 10, 22, 0.55);
    box-shadow:
        0 0 0 1px rgba(var(--accent-secondary-rgb), 0.45),
        0 6px 18px rgba(var(--accent-secondary-rgb), 0.3);
}
.idiom-puzzle-card.has-bg-image .idiom-ratio-picker legend,
.idiom-puzzle-card.has-bg-color .idiom-ratio-picker legend {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* ── Header tools row (Background + Snapshot + New idiom) ─────────────── */
.idiom-head-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.idiom-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.28);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition-fast), background var(--transition-fast),
        border-color var(--transition-fast);
}
.idiom-tool-btn:hover {
    transform: translateY(-1px);
    background: rgba(var(--accent-secondary-rgb), 0.16);
    border-color: rgba(var(--accent-secondary-rgb), 0.55);
}
.idiom-puzzle-card.has-bg-image .idiom-tool-btn,
.idiom-puzzle-card.has-bg-image .idiom-refresh-btn,
.idiom-puzzle-card.has-bg-color .idiom-tool-btn,
.idiom-puzzle-card.has-bg-color .idiom-refresh-btn {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* The "Peek answer / Hide answer" toggle uses a near-transparent fill + theme
   text color, which disappears on a colorful/photo background. Give it the same
   readable glass chip treatment whenever a custom background is active. */
.idiom-puzzle-card.has-bg-image .idiom-reveal-btn,
.idiom-puzzle-card.has-bg-color .idiom-reveal-btn {
    background: rgba(8, 10, 22, 0.55);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
}
.idiom-puzzle-card.has-bg-image .idiom-reveal-btn:hover,
.idiom-puzzle-card.has-bg-color .idiom-reveal-btn:hover {
    background: rgba(8, 10, 22, 0.72);
    border-color: rgba(var(--accent-secondary-rgb), 0.6);
}

/* ── Background picker popover ─────────────────────────────────────────── */
.idiom-bg-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, 92vw);
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    background: var(--bg-card, #14182a);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    animation: voice-survey-pop 0.16s ease-out;
}
.idiom-bg-popover-wrap { position: relative; }

/* (2) While the picker is open, lift the header (which contains the popover)
   above the idiom stage. Every direct card child shares z-index:1, and the
   stage comes later in the DOM, so without this it would paint on top of the
   popover and swallow its clicks. */
.idiom-puzzle-card.cw-bg-open .idiom-puzzle-head { z-index: 50; }

/* Each .cartoon-card uses backdrop-filter, which makes it its own stacking
   context. The next card ("Your phrase") therefore paints over this card's
   overflowing popover, clipping the bottom (admin section). Lift the whole
   idiom card above following cards while the picker is open. */
.idiom-puzzle-card.cw-bg-open { z-index: 70; }

/* (3) The popover defaults to right-anchored under its trigger. On a narrow
   viewport the trigger can sit near the left edge, so a right-anchored popover
   would spill past the left side of the screen and get clipped. positionPopover()
   in crossword-background.js measures on open/resize and rewrites left/right
   inline so it always stays inside the viewport at any width. */

.idiom-bg-section-label {
    margin: 0.25rem 0 0.55rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.idiom-bg-section-label:not(:first-child) { margin-top: 1rem; }
.idiom-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 0.6rem;
}
.idiom-swatch {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background-size: cover;
    background-position: center;
    padding: 0;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.idiom-swatch:hover { transform: scale(1.08); }
.idiom-swatch.is-selected {
    border-color: var(--accent-secondary, #ff8bd0);
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.35);
}
.idiom-swatch.is-selected::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.1rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.25);
}
.idiom-swatch-default {
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 139, 208, 0.6), transparent 60%),
        radial-gradient(circle at 80% 30%, rgba(126, 168, 255, 0.6), transparent 55%),
        linear-gradient(145deg, #2a2350, #141a2e);
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
    display: grid;
    place-items: center;
}
.idiom-bg-empty-note {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}
.idiom-bg-admin {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--glass-border);
}
.idiom-bg-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.idiom-bg-admin-btn {
    flex: 1;
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}
.idiom-bg-admin-btn:hover { background: rgba(255, 255, 255, 0.1); }
.idiom-bg-admin-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-tertiary, #7ea8ff);
    border: 1px solid rgba(126, 168, 255, 0.5);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}
.idiom-bg-admin-label { display: flex; align-items: center; }

/* Prominent admin upload control — full-width dashed "drop zone" so it can't be
   missed at the bottom of the picker, and high-contrast in either theme. */
.idiom-bg-upload-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    border: 1.5px dashed rgba(126, 168, 255, 0.75);
    background: linear-gradient(135deg,
        rgba(var(--accent-secondary-rgb), 0.18),
        rgba(var(--accent-primary-rgb), 0.14));
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.idiom-bg-upload-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-secondary-rgb), 0.95);
    background: linear-gradient(135deg,
        rgba(var(--accent-secondary-rgb), 0.28),
        rgba(var(--accent-primary-rgb), 0.22));
}
.idiom-bg-upload-icon {
    font-size: 1.35rem;
    line-height: 1;
    flex: none;
}
.idiom-bg-upload-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.idiom-bg-upload-text strong { font-size: 0.9rem; font-weight: 800; }
.idiom-bg-upload-text small { font-size: 0.74rem; color: var(--text-tertiary); }

/* ── Generic rectangular cropper modal (admin custom background) ───────── */
.cw-crop-modal,
.cw-snap-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.cw-crop-backdrop,
.cw-snap-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(4px);
}
.cw-crop-box,
.cw-snap-box {
    position: relative;
    z-index: 1;
    width: min(560px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    background: #14182a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    padding: 1.1rem;
    color: #fff;
}
.cw-crop-box h3,
.cw-snap-box h3 { margin: 0 0 0.85rem; font-size: 1.1rem; }
.cw-crop-stage {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}
.cw-crop-stage:active { cursor: grabbing; }
.cw-crop-canvas { display: block; width: 100%; height: 100%; }
.cw-crop-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 6px;
}
.cw-crop-controls {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.9rem;
}
.cw-crop-controls input[type="range"] { flex: 1; }
.cw-crop-actions,
.cw-snap-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
}
.cw-btn {
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.cw-btn-primary {
    border: none;
    background: var(--gradient-primary);
}
.cw-btn:hover { transform: translateY(-1px); }

/* ── Snapshot modal ───────────────────────────────────────────────────── */
.cw-snap-preview {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #0b0d18;
    display: block;
}
.cw-snap-frames {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.9rem 0 0.2rem;
}
.cw-frame-btn {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
}
.cw-frame-btn.is-active {
    border-color: var(--accent-secondary, #ff8bd0);
    background: rgba(var(--accent-secondary-rgb), 0.22);
}
.cw-snap-hint { margin: 0.6rem 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.6); }

/* Toast confirmations (e.g. "Image copied") must float above the snapshot /
   cropper modals (z-index 11000), otherwise they pop on the page underneath
   and get hidden behind the dark capture backdrop. */
.toast-container { z-index: 12000; }

/* Background Selected / None toggle */
.cw-snap-opt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.9rem 0 0.2rem;
}
.cw-snap-opt-label,
.cw-snap-share-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.cw-snap-toggle {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.cw-toggle-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cw-toggle-btn.is-active {
    background: var(--gradient-primary, linear-gradient(135deg, #ff8bd0, #7ea8ff));
    color: #fff;
}

/* Share row */
.cw-snap-share { margin: 0.9rem 0 0.2rem; }
.cw-snap-share-label { display: block; margin-bottom: 0.5rem; }
.cw-snap-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.cw-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.cw-share-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.12);
}
.cw-share-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 1rem;
    line-height: 1;
}
.cw-share-btn.is-native { background: rgba(126, 168, 255, 0.22); border-color: rgba(126, 168, 255, 0.5); }
.cw-share-btn.is-x:hover { background: #000; border-color: #000; }
.cw-share-btn.is-fb:hover { background: #1877f2; border-color: #1877f2; }
.cw-share-btn.is-wa:hover { background: #25d366; border-color: #25d366; color: #062e15; }
.cw-share-btn.is-ig:hover {
    background: linear-gradient(45deg, #f09433, #e6683c 30%, #dc2743 55%, #cc2366 75%, #bc1888);
    border-color: transparent;
}
.cw-share-btn.is-tt:hover { background: #010101; border-color: #25f4ee; }
.cw-share-btn.is-pin:hover { background: #e60023; border-color: #e60023; }
.cw-share-btn.is-li:hover { background: #0a66c2; border-color: #0a66c2; }
@media (max-width: 480px) {
    .cw-share-name { display: none; }
    .cw-share-btn { padding: 0.55rem; }
}

/* Hide interactive chrome while capturing a clean promo snapshot. */
.idiom-puzzle-card.cw-capturing .idiom-head-tools,
.idiom-puzzle-card.cw-capturing .idiom-ratio-picker,
.idiom-puzzle-card.cw-capturing .idiom-controls,
.idiom-puzzle-card.cw-capturing .idiom-mic-status,
.idiom-puzzle-card.cw-capturing .idiom-mic-btn {
    display: none !important;
}

/* html2canvas (esp. on iOS Safari) can hang or blank out when it hits
   backdrop-filter / filter layers. Strip them only for the capture pass — the
   snapshot paints its own background, so the frosted-glass look isn't needed. */
.idiom-puzzle-card.cw-capturing,
.idiom-puzzle-card.cw-capturing * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}
.idiom-puzzle-card.cw-capturing .idiom-blank-input {
    border-bottom-style: solid;
}

/* Second snapshot pass: hide the chosen background so the modal can offer a
   clean "no background" version of the card. */
.idiom-puzzle-card.cw-capturing-nobg .idiom-bg-layer,
.idiom-puzzle-card.cw-capturing-nobg .idiom-bg-scrim {
    display: none !important;
}

/* Static stand-in for the blank input used only during snapshot capture, so the
   word/"?????" renders as full, un-clipped text (html2canvas clips live inputs).
   Inherits the dashed-blank look via the shared .idiom-blank-input class. */
.idiom-blank-capture {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom-style: solid;
    line-height: 1.15;
    white-space: nowrap;
    vertical-align: middle;
}
.idiom-blank-capture.is-placeholder {
    color: rgba(255, 255, 255, 0.85);
}

/* Controls row */
.idiom-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.idiom-reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.idiom-reveal-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
}

.idiom-generate-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 190px;
    padding: 0.8rem 1.3rem;
    border: none;
    border-radius: 999px;
    background: var(--gradient-primary);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: transform var(--transition-fast), opacity var(--transition-fast),
        filter var(--transition-fast);
}

.idiom-generate-btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.idiom-generate-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(0.4);
    transform: none;
    box-shadow: none;
}

/* Pulse a hint when the button is ready but not yet hovered */
.idiom-generate-btn.is-ready {
    animation: idiom-ready-pulse 1.8s ease-in-out infinite;
}

@keyframes idiom-ready-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-secondary-rgb), 0.45); }
    50% { box-shadow: 0 0 0 8px rgba(var(--accent-secondary-rgb), 0); }
}

.idiom-generate-btn.loading .generate-spinner {
    display: inline-block;
}

@media (max-width: 560px) {
    .idiom-generate-btn {
        margin-left: 0;
        width: 100%;
    }
    .idiom-reveal-btn {
        flex: 1;
    }
}

/* ==========================================================================
   "I Draw, You Guess!" entry CTA (in the hero "cat out of the bag" card)
   ========================================================================== */
.draw-cta-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.85rem 1.1rem;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 10px 28px rgba(var(--accent-primary-rgb), 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.draw-cta-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(var(--accent-primary-rgb), 0.5);
}
.draw-cta-emoji {
    font-size: 1.8rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.draw-cta-text { display: flex; flex-direction: column; line-height: 1.25; }
.draw-cta-text strong { font-size: 1.02rem; font-weight: 800; }
.draw-cta-text small { font-size: 0.8rem; opacity: 0.92; }
.draw-cta-arrow {
    margin-left: auto;
    font-size: 1.3rem;
    font-weight: 700;
    transition: transform 0.18s ease;
}
.draw-cta-link:hover .draw-cta-arrow { transform: translateX(4px); }