/* ==========================================================================
   LoveToRead — app-page overrides ("Bedtime, bound")         rebrand 2026-09-02
   Loaded after each legacy page's own CSS and before tokens.css on every
   non-rewritten page (dashboard, create, characters, orders, admin…). The reader
   has its own stylesheet (reader.css) and takes nothing from here.
   Structural restyling only; the pages' JavaScript hooks are untouched.
   ========================================================================== */

body { background: var(--paper); }

/* ---- locks are gone: every style, text mode and reference is open ---- */
.lock-overlay, .locked-badge, .tab-lock-icon, .unlock-banner, #unlockBanner, .unlock-platform-banner,
.locked-section .lock-overlay, .art-style-card .lock-overlay, .option-card .lock-overlay { display: none !important; }
.locked-option, .locked-style, .locked-tab, .locked-toggle, .locked-section { opacity: 1 !important; pointer-events: auto !important; filter: none !important; cursor: pointer !important; }
.locked-tab[disabled], .locked-option input[disabled], .locked-style input[disabled] { pointer-events: auto; }

/* ---- surfaces: rounder, softer, on paper ---- */
[class*="-card"], [class$="card"], .card, .panel, .section-card, .stat-card, .content-card, .form-section, .step-section, .tabs-container, .profile-header-card, .book-order-banner, .order-card, .story-card, .character-card, .videobook-card {
    border-radius: var(--radius-lg) !important; border-color: var(--rule) !important;
}
.profile-header-card, .tabs-container, .form-section, .step-section, .stat-card, .content-card { background: var(--card); box-shadow: var(--shadow-soft) !important; }
.stat-number, .credit-value, .stat-value { font-family: var(--display) !important; font-weight: 400 !important; color: var(--ink) !important; letter-spacing: -.01em; }

/* ---- the old purple accents ---- */
.badge-purple, .tag-purple, .btn-purple, .videobook-badge, .premium-badge { background: var(--lagoon) !important; color: #fff !important; }
.stories-section .eyebrow, .section-eyebrow, .section-label { color: var(--lagoon) !important; }

/* ---- buttons that the legacy CSS painted green get the lagoon + pill ---- */
.btn-primary, .primary-btn, .cta-button, .create-btn, .generate-btn, .submit-btn, .purchase-btn, .checkout-btn, .btn-create, .login-btn, .btn-large, .order-button {
    border-radius: var(--pill) !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none !important;
    box-shadow: 0 6px 16px -8px rgba(14,124,134,.55) !important;
}
.btn-secondary, .secondary-btn, .btn-outline, .outline-btn { border-radius: var(--pill) !important; font-weight: 700 !important; }

/* ---- inputs ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
    border-radius: 12px; border-color: var(--rule);
}
input:focus, select:focus, textarea:focus { border-color: var(--lagoon) !important; box-shadow: 0 0 0 3px var(--lagoon-tint) !important; outline: none; }

/* ---- generic page headers ---- */
.page-header h1, .page-title, .section-title { font-family: var(--display); font-weight: 400 !important; letter-spacing: -.01em; }
.page-subtitle, .section-subtitle { color: var(--ink-soft); }

/* ---- the simpler gift builder (create-story.php) ---- */
.length-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.length-pill { display: grid; gap: 3px; padding: 12px 14px; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); text-align: left; cursor: pointer; font-family: inherit; color: var(--ink); }
.length-pill b { font-size: 1rem; }
.length-pill span { font-size: .8rem; color: var(--muted); }
.length-pill.active { border-color: var(--lagoon); background: var(--lagoon-tint); }
.length-pill.active span { color: var(--lagoon-deep); }
@media (max-width: 560px) { .length-pills { grid-template-columns: 1fr; } }
.option-grid--compact .option-card { padding: 12px 14px !important; }
.option-grid--compact .option-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
.option-grid--compact .option-description { display: none; }
.source-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.source-tab { display: grid !important; justify-items: center; gap: 6px; padding: 12px 8px !important; border: 2px solid var(--rule) !important; border-radius: 14px !important; background: var(--card) !important; color: var(--ink-soft) !important; font: 700 .8rem var(--body) !important; text-align: center; }
.source-tab i { font-size: 1.15rem; color: var(--lagoon); }
.source-tab.active { border-color: var(--lagoon) !important; background: var(--lagoon-tint) !important; color: var(--ink) !important; }
.add-character-btn { border: 2px dashed var(--rule) !important; border-radius: 16px !important; background: var(--card) !important; color: var(--ink-soft) !important; }
.add-character-btn:hover { border-color: var(--lagoon) !important; color: var(--lagoon-deep) !important; }
.add-character-btn small { color: var(--muted) !important; }
.step-number { background: var(--marigold) !important; color: var(--ink) !important; font-family: var(--display) !important; }
.form-step { border-radius: var(--radius-xl) !important; }

/* ---- gradients and greens that survived the alias pass ---- */
.hero-background-animation, .auth-left, .left-panel { background: var(--night) !important; }
.auth-hero { background: var(--night) !important; color: var(--on-night); position: relative; }
.auth-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 12% 18%, rgba(255,255,255,.10) 1px, transparent 1.6px), radial-gradient(circle at 72% 62%, rgba(255,255,255,.08) 1px, transparent 1.6px), radial-gradient(circle at 38% 84%, rgba(255,255,255,.08) 1px, transparent 1.6px), radial-gradient(circle at 88% 22%, rgba(255,177,0,.35) 1.2px, transparent 2px); background-size: 220px 220px, 260px 260px, 300px 300px, 520px 520px; }
.auth-hero .hero-content { position: relative; }
.auth-hero .hero-title { font-family: var(--display); font-weight: 400 !important; color: #F4F1EA !important; font-size: clamp(2rem, 3.4vw, 2.8rem) !important; }
.auth-hero .hero-subtitle, .auth-hero .feature-item, .auth-hero .hero-footer-text { color: #B7BDD6 !important; }
.auth-hero .feature-item i { color: var(--marigold) !important; }
.auth-hero .hero-bg-decoration { display: none; }
.auth-title { font-family: var(--display); font-weight: 400 !important; }
.auth-button.primary-button { background: var(--lagoon) !important; border-radius: var(--pill) !important; }
.google-button { border-radius: var(--pill) !important; }
.gradient-bg, .header-gradient, .banner-gradient { background: linear-gradient(135deg, var(--lagoon), var(--lagoon-deep)) !important; }

/* ---- spacing rhythm on app pages ---- */
.profile-wrapper, .create-wrapper, .characters-wrapper, .orders-wrapper, .page-wrapper { padding-top: clamp(20px, 4vw, 40px); padding-bottom: clamp(40px, 6vw, 80px); }