/* ══════════════════════════════════════════════════════════════════
   STORIES MODULE — Radim Branding v2.0 (Sprint A+B)
   Prefix .st-* new, .story-* / .genre-* / .theme-* legacy preserved
   ══════════════════════════════════════════════════════════════════ */

#module-stories {
    color: var(--radim-text, #2d3748);
    background: var(--radim-bg, #f8fafa);
    padding: var(--radim-space-4, 20px) var(--radim-space-3, 14px);
    min-height: 100%;
}

.stories-container,
.story-generator,
#storyReader {
    max-width: 900px;
    margin: 0 auto;
}

/* ─── Sprint A: Radim avatar card ──────────────────────────────── */
.st-avatar-card {
    display: flex;
    gap: var(--radim-space-4, 18px);
    align-items: center;
    padding: var(--radim-space-4, 18px);
    margin-bottom: var(--radim-space-3, 14px);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 6%, var(--radim-surface, #fff)) 0%,
        var(--radim-surface, #fff) 70%);
    border: 1px solid color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, var(--radim-border, #e2e8f0));
    border-radius: var(--radim-radius-xl, 18px);
    box-shadow: var(--radim-shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
}

.st-avatar-compact {
    padding: var(--radim-space-3, 12px);
    gap: var(--radim-space-3, 12px);
}

.st-avatar-compact .st-avatar-img {
    width: 68px; height: 68px; flex: 0 0 68px;
}

.st-avatar-img {
    width: 88px; height: 88px; flex: 0 0 88px;
    object-fit: cover; object-position: center 6%;
    border-radius: 50%;
    border: 3px solid var(--radim-primary, var(--radim-primary));
    background: var(--radim-surface, #fff);
    box-shadow: var(--radim-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
    transition: box-shadow var(--radim-dur-slow, 0.4s) var(--radim-ease, ease);
}

.st-avatar-speaking {
    animation: stSpeakingPulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 30%, transparent);
}

@keyframes stSpeakingPulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, transparent); }
    50%      { box-shadow: 0 0 0 10px color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 40%, transparent); }
}

.st-avatar-speech { flex: 1 1 auto; min-width: 0; }

.st-avatar-name {
    font-size: var(--radim-font-sm, 0.875rem);
    font-weight: 700;
    color: var(--radim-primary, var(--radim-primary));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.st-avatar-text {
    margin: 0 0 var(--radim-space-3, 12px);
    color: var(--radim-text, #2d3748);
    font-size: var(--radim-font-lg, 1.125rem);
    line-height: 1.5;
}

.st-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--radim-space-2, 8px);
}

.st-quick-btn {
    padding: 10px 16px;
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-2xl, 999px);
    font-size: var(--radim-font-base, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.st-quick-btn:hover { transform: translateY(-1px); border-color: var(--radim-primary, var(--radim-primary)); }

.st-quick-btn:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
}

.st-quick-btn-primary {
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
    border-color: var(--radim-primary, var(--radim-primary));
}

.st-quick-btn-primary:hover { background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 85%, #000); }

/* ─── Sprint B: Reader toolbar ─────────────────────────────────── */
.st-reader-toolbar {
    display: flex;
    gap: var(--radim-space-3, 14px);
    padding: 10px 14px;
    background: var(--radim-surface, #fff);
    border: 1px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-lg, 12px);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--radim-space-3, 14px);
    position: sticky;
    top: 8px;
    z-index: 5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: color-mix(in srgb, var(--radim-surface, #fff) 92%, transparent);
    box-shadow: 0 1px 0 var(--radim-border, #e2e8f0);
}

.st-reader.st-night .st-reader-toolbar {
    background: color-mix(in srgb, #2d3748 92%, transparent);
    border-color: #3a4558;
    box-shadow: 0 1px 0 #3a4558;
}

.st-toolbar-group {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 8px;
    border-radius: var(--radim-radius-md, 10px);
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 4%, transparent);
}

.st-reader.st-night .st-toolbar-group {
    background: rgba(255,255,255,0.04);
}

.st-toolbar-label {
    font-size: var(--radim-font-sm, 0.85rem);
    font-weight: 600;
    color: var(--radim-text-muted, #6b7b8a);
    white-space: nowrap;
}

.st-btn {
    padding: 10px 16px;
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-md, 10px);
    font: inherit;
    font-size: var(--radim-font-base, 1rem);
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                background var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.st-btn:hover { border-color: var(--radim-primary, var(--radim-primary)); }

.st-btn:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
}

.st-btn-primary {
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
    border-color: var(--radim-primary, var(--radim-primary));
}

.st-btn-primary:hover { background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 85%, #000); }

.st-btn-secondary {
    background: var(--radim-surface, #fff);
}

.st-btn-ghost { background: transparent; }

.st-btn.active,
.st-btn.st-active {
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
    border-color: var(--radim-primary, var(--radim-primary));
}

.st-rate-btn {
    padding: 6px 12px;
    background: var(--radim-surface, #fff);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-md, 10px);
    font: inherit;
    font-size: var(--radim-font-sm, 0.875rem);
    font-weight: 700;
    cursor: pointer;
    min-height: 36px;
    min-width: 50px;
}

.st-rate-btn.st-active {
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
    border-color: var(--radim-primary, var(--radim-primary));
}

.st-rate-btn:hover { border-color: var(--radim-primary, var(--radim-primary)); }

.st-font-btn {
    width: 42px;
    height: 42px;
    background: var(--radim-surface, #fff);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-md, 10px);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.st-font-btn:hover { border-color: var(--radim-primary, var(--radim-primary)); }

.st-font-current {
    font-weight: 700;
    color: var(--radim-primary, var(--radim-primary));
    min-width: 50px;
    text-align: center;
}

/* ─── Reader + content ─────────────────────────────────────────── */
.st-reader {
    --st-font-size: 20px;
    --st-line-height: 1.75;
    --st-reader-bg: #fffaf3;            /* warm paper white */
    --st-reader-fg: #2d3748;
    background: var(--st-reader-bg);
    color: var(--st-reader-fg);
    border: 1px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-xl, 18px);
    padding: var(--radim-space-5, 32px) var(--radim-space-4, 24px);
    box-shadow: var(--radim-shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
    position: relative;
}

.st-reader::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radim-radius-xl, 18px);
    background: radial-gradient(ellipse at top,
        color-mix(in srgb, var(--radim-primary) 4%, transparent) 0%, transparent 60%);
    pointer-events: none;
}

.st-reader.st-night {
    --st-reader-bg: #1a1f2e;
    --st-reader-fg: #e8ecf4;
    border-color: #2d3748;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.st-reader.st-night::before {
    background: radial-gradient(ellipse at top,
        rgba(246, 173, 85, 0.06) 0%, transparent 60%);
}

.st-reader.st-night .story-title,
.st-reader.st-night .story-meta,
.st-reader.st-night .st-content p {
    color: var(--st-reader-fg);
}

.st-reader.st-night .story-genre-badge {
    background: #2d3748;
    color: #f6ad55;
    border-color: #4a5568;
}

.st-reader.st-night .st-reader-toolbar {
    background: #2d3748;
    border-color: #4a5568;
}

.st-reader.st-night .st-btn,
.st-reader.st-night .st-rate-btn,
.st-reader.st-night .st-font-btn {
    background: #2d3748;
    color: #e2e8f0;
    border-color: #4a5568;
}

.st-reader.st-night .st-btn.st-active,
.st-reader.st-night .st-rate-btn.st-active {
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
}

.story-title {
    font-size: calc(var(--st-font-size) * 1.55);
    font-weight: 800;
    margin: var(--radim-space-3, 12px) 0 var(--radim-space-4, 18px);
    color: var(--st-reader-fg, var(--radim-text, #2d3748));
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: -0.015em;
    line-height: 1.25;
    text-align: center;
    padding: 0 var(--radim-space-2, 10px);
}

.story-title::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent, var(--radim-primary, var(--radim-primary)), transparent);
    margin: var(--radim-space-3, 12px) auto 0;
    border-radius: 2px;
}

.st-content {
    font-size: var(--st-font-size);
    line-height: var(--st-line-height);
    color: var(--st-reader-fg, var(--radim-text, #2d3748));
    max-width: 65ch;
    margin: 0 auto;
    padding: var(--radim-space-3, 14px) 0;
    font-family: Georgia, 'Times New Roman', serif;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: 0.02em;
}

.st-content p {
    margin: 0 0 var(--radim-space-3, 14px);
    text-indent: 1.5em;
}

/* First paragraph — no indent + bigger drop-cap style */
.st-content p:first-of-type {
    text-indent: 0;
    margin-top: 0;
}

.st-content p:first-of-type::first-letter {
    font-size: 3em;
    font-weight: 700;
    float: left;
    line-height: 0.9;
    margin: 0.05em 0.1em 0 0;
    color: var(--radim-primary, var(--radim-primary));
    font-family: Georgia, 'Times New Roman', serif;
}

.st-reader.st-night .st-content p:first-of-type::first-letter {
    color: #f6ad55;
}

/* Paragraphs after double-newline dividers */
.st-content p + p {
    margin-top: 0;
}

.st-content:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 4px;
}

/* ─── Story meta + rating ──────────────────────────────────────── */
.story-header {
    display: flex;
    flex-direction: column;
    gap: var(--radim-space-2, 8px);
    margin-bottom: var(--radim-space-3, 14px);
}

.story-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.story-genre-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 15%, var(--radim-surface, #fff));
    color: var(--radim-primary, var(--radim-primary));
    border: 1px solid color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 30%, var(--radim-border, #e2e8f0));
    border-radius: var(--radim-radius-2xl, 999px);
    font-weight: 700;
    font-size: var(--radim-font-sm, 0.875rem);
}

.story-favorite-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: color-mix(in srgb, #ED8936 15%, var(--radim-surface, #fff));
    color: #c2410c;
    border: 1px solid color-mix(in srgb, #ED8936 30%, var(--radim-border, #e2e8f0));
    border-radius: var(--radim-radius-2xl, 999px);
    font-weight: 700;
    font-size: var(--radim-font-sm, 0.875rem);
}

.story-footer {
    margin-top: var(--radim-space-4, 18px);
    padding-top: var(--radim-space-3, 14px);
    border-top: 1px solid var(--radim-border, #e2e8f0);
}

.story-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--radim-font-base, 1rem);
}

.star-rating {
    display: flex;
    gap: 4px;
}

.star-btn {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    filter: grayscale(0.3);
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                filter var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.star-btn.filled { filter: grayscale(0); }

.star-btn:hover {
    transform: scale(1.2) rotate(-4deg);
    filter: grayscale(0);
}

.star-btn:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .star-btn { font-size: 2rem; padding: 8px; }
}

.story-actions {
    display: flex;
    gap: var(--radim-space-2, 10px);
    flex-wrap: wrap;
    margin-top: var(--radim-space-4, 18px);
}

/* ─── Generator form (minimal restore) ─────────────────────────── */
.st-generator,
.story-generator-content {
    padding: var(--radim-space-4, 20px);
    background: var(--radim-surface, #fff);
    border: 1px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-xl, 18px);
    box-shadow: var(--radim-shadow-xs, 0 1px 3px rgba(0,0,0,0.04));
}

.st-generator h3,
.story-generator-content h3 {
    margin: 0 0 8px;
    color: var(--radim-text, #2d3748);
    font-size: var(--radim-font-xl, 1.25rem);
}

.text-muted {
    color: var(--radim-text-muted, #6b7b8a);
    margin: 0 0 var(--radim-space-3, 14px);
}

.form-group {
    margin-bottom: var(--radim-space-3, 14px);
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--radim-text, #2d3748);
}

.story-input {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: var(--radim-font-base, 1rem);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-md, 10px);
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    min-height: 48px;
}

.story-input:focus {
    outline: none;
    border-color: var(--radim-primary, var(--radim-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, transparent);
}

.genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.genre-btn {
    padding: 16px 10px;
    background: var(--radim-surface, #fff);
    border: 2px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-lg, 12px);
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 88px;
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                background var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                box-shadow var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
    color: var(--radim-text, #2d3748);
}

.genre-btn:hover {
    transform: translateY(-2px);
    border-color: var(--radim-primary, var(--radim-primary));
    box-shadow: var(--radim-shadow-sm, 0 4px 12px color-mix(in srgb, var(--radim-primary) 12%, transparent));
}

.genre-btn.selected {
    border-color: var(--radim-primary, var(--radim-primary));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 18%, var(--radim-surface, #fff)),
        color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 6%, var(--radim-surface, #fff)));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, transparent);
}

.genre-btn:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
}

.genre-icon {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

.genre-name {
    font-weight: 600;
    font-size: var(--radim-font-sm, 0.875rem);
    text-align: center;
}

.theme-chip {
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                background var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.theme-chip:hover {
    transform: translateY(-1px);
    border-color: var(--radim-primary, var(--radim-primary));
}

.theme-chip:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
}

.length-btn {
    min-height: 84px;
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                background var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.length-btn:hover {
    transform: translateY(-2px);
    border-color: var(--radim-primary, var(--radim-primary));
}

.length-btn:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
}

.length-time {
    font-size: var(--radim-font-xs, 0.75rem);
    color: var(--radim-text-muted, #6b7b8a);
    margin-top: 2px;
}

.theme-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.theme-chip {
    padding: 8px 14px;
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-2xl, 999px);
    font: inherit;
    font-size: var(--radim-font-sm, 0.875rem);
    cursor: pointer;
}

.theme-chip:hover { border-color: var(--radim-primary, var(--radim-primary)); }

.theme-chip.selected {
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
    border-color: var(--radim-primary, var(--radim-primary));
}

.length-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.length-btn {
    flex: 1 1 120px;
    padding: 12px;
    background: var(--radim-surface, #fff);
    border: 2px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-lg, 12px);
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--radim-text, #2d3748);
}

.length-btn.selected {
    border-color: var(--radim-primary, var(--radim-primary));
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 12%, var(--radim-surface, #fff));
}

.generator-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: var(--radim-space-3, 14px);
}

.generate-btn,
.generator-actions .primary {
    padding: 14px 24px;
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
    border: none;
    border-radius: var(--radim-radius-lg, 12px);
    font: inherit;
    font-size: var(--radim-font-base, 1rem);
    font-weight: 700;
    cursor: pointer;
    min-height: 48px;
}

.generate-btn:hover { background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 85%, #000); }

.generator-actions .secondary,
.generator-actions .ghost {
    padding: 12px 18px;
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-lg, 12px);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}

/* ─── Library ──────────────────────────────────────────────────── */
.stories-library {
    padding: var(--radim-space-4, 20px);
    background: var(--radim-surface, #fff);
    border: 1px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-xl, 18px);
    box-shadow: var(--radim-shadow-xs, 0 1px 3px rgba(0,0,0,0.04));
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--radim-space-3, 12px);
    margin-top: var(--radim-space-3, 12px);
}

.story-card {
    padding: var(--radim-space-3, 14px) var(--radim-space-4, 18px);
    background: var(--radim-surface, #fff);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-lg, 12px);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                box-shadow var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.story-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--radim-primary, var(--radim-primary));
    opacity: 0.5;
    transition: opacity var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                width var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.story-card:hover {
    transform: translateY(-2px);
    border-color: var(--radim-primary, var(--radim-primary));
    box-shadow: var(--radim-shadow-md, 0 6px 18px color-mix(in srgb, var(--radim-primary) 15%, transparent));
}

.story-card:hover::before {
    opacity: 1;
    width: 6px;
}

.story-card.favorite {
    border-color: color-mix(in srgb, #ED8936 40%, var(--radim-border, #e2e8f0));
    background: linear-gradient(135deg,
        color-mix(in srgb, #ED8936 8%, var(--radim-surface, #fff)),
        var(--radim-surface, #fff) 60%);
}

.story-card.favorite::before { background: #ED8936; }

.quick-stories h4,
.stories-library h3 {
    margin: 0 0 var(--radim-space-3, 12px);
    color: var(--radim-text, #2d3748);
    font-size: var(--radim-font-lg, 1.125rem);
}

.quick-stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.quick-story-btn {
    padding: 14px 10px;
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 5%, var(--radim-surface, #fff));
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-lg, 12px);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    color: var(--radim-text, #2d3748);
    min-height: 56px;
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                background var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.quick-story-btn:hover {
    transform: translateY(-2px);
    border-color: var(--radim-primary, var(--radim-primary));
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 12%, var(--radim-surface, #fff));
}

.quick-story-btn:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
}

.mt-xl { margin-top: var(--radim-space-4, 24px); }

/* ─── Loading + error ──────────────────────────────────────────── */
.story-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--radim-space-3, 14px);
    padding: var(--radim-space-5, 48px) var(--radim-space-3, 16px);
    color: var(--radim-text-muted, #6b7b8a);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 4%, var(--radim-surface, #fff)),
        var(--radim-surface, #fff));
    border-radius: var(--radim-radius-xl, 18px);
    border: 1px solid var(--radim-border, #e2e8f0);
    text-align: center;
}

.story-loading p { margin: 0; font-size: var(--radim-font-lg, 1.1rem); }

.story-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 18%, transparent);
    border-top-color: var(--radim-primary, var(--radim-primary));
    border-radius: 50%;
    animation: stSpin 0.9s linear infinite;
    position: relative;
}

.story-loading::after {
    content: '✨';
    font-size: 1.4rem;
    animation: stSparkle 1.8s ease-in-out infinite;
}

@keyframes stSparkle {
    0%, 100% { opacity: 0.3; transform: scale(0.9) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.1) rotate(180deg); }
}

@keyframes stSpin {
    to { transform: rotate(360deg); }
}

.story-error {
    padding: var(--radim-space-3, 14px);
    background: color-mix(in srgb, #d64545 10%, var(--radim-surface, #fff));
    border-left: 4px solid #d64545;
    border-radius: var(--radim-radius-md, 10px);
    color: #b91c1c;
}

.story-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    background: var(--radim-text, #2d3748);
    color: #fff;
    border-radius: var(--radim-radius-lg, 12px);
    font-weight: 600;
    z-index: 10002;
    box-shadow: var(--radim-shadow-lg, 0 10px 30px rgba(0,0,0,0.2));
}

/* ─── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    #module-stories { padding: var(--radim-space-3, 14px) var(--radim-space-2, 10px); }
    .st-avatar-card { flex-direction: column; text-align: center; }
    .st-avatar-img { width: 72px; height: 72px; flex: 0 0 72px; }
    .st-avatar-compact .st-avatar-img { width: 56px; height: 56px; flex: 0 0 56px; }
    .st-quick-picks { justify-content: center; }
    .st-reader-toolbar { position: static; flex-direction: column; align-items: stretch; }
    .st-toolbar-group { justify-content: center; }
    .genre-grid { grid-template-columns: 1fr 1fr; }
    .library-grid { grid-template-columns: 1fr; }
}

@media (prefers-contrast: more) {
    .st-avatar-card, .st-reader, .st-reader-toolbar,
    .st-btn, .st-quick-btn, .st-rate-btn, .st-font-btn,
    .story-card, .genre-btn, .length-btn {
        border-color: #000 !important;
        border-width: 2px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .st-avatar-img, .st-avatar-speaking,
    .st-quick-btn, .st-btn, .st-rate-btn, .st-font-btn,
    .story-card, .star-btn {
        animation: none;
        transition: none;
    }
    .st-quick-btn:hover, .st-btn:hover,
    .story-card:hover, .star-btn:hover { transform: none; }
}

@media print {
    .st-avatar-card, .st-reader-toolbar, .story-actions,
    .story-rating, .story-footer { display: none !important; }
    .st-reader, .story-display {
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
        color: #000 !important;
    }
    .st-content { max-width: 100%; font-size: 12pt; }
}