/* ==========================================================================
   PersonalizedComics — app-page overrides (dashboard, create, characters,
   profile, orders). Loaded after style.css + the page's own CSS; brings the
   logged-in screens onto the same paper + ink-border system.
   ========================================================================== */

/* ---- dashboard: the old sidebar duplicates the new top nav ---- */
.dashboard-layout { display: block; }
.sidebar { display: none !important; }
.main-content { margin-left: 0 !important; max-width: var(--maxw); margin: 0 auto; padding: 2rem var(--gutter) 4rem; width: 100%; }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.greeting h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.greeting p { color: var(--text-muted); }
.create-btn { background: var(--cobalt); color: #fff; border: var(--border); border-radius: var(--pill); box-shadow: 4px 4px 0 var(--ink); font-weight: 600; padding: .8rem 1.4rem; transition: transform .15s, box-shadow .15s; }
.create-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--cobalt-deep); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-card { background: var(--paper); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; min-height: 0; }
.stat-card:first-child { background: var(--sun-tint); }
.stat-label { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.stat-value { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; margin: .3rem 0 .1rem; }
.stat-sub { font-size: .82rem; color: var(--text-muted); }
.section-card { background: var(--paper); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: 1.35rem; }
.section-link { color: var(--cobalt-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.comics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.25rem; }
.comic-cover-card { background: var(--paper); border: var(--border); border-radius: 10px; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.comic-cover-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.cover-img { border-bottom: var(--border); background: var(--newsprint); aspect-ratio: 2 / 3; }
.cover-img img { width: 100%; height: 100%; object-fit: cover; }
.cover-info { padding: .6rem .7rem; }
.cover-title { font-weight: 600; font-size: .92rem; }
.cover-meta { font-size: .78rem; color: var(--text-muted); }
.comic-cover-new { border: 2.5px dashed var(--ink); border-radius: 10px; background: var(--sun-tint); box-shadow: none; }
.comic-cover-new:hover { background: var(--sun); }
.cover-badge { background: var(--sun); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--pill); font-family: var(--font-sticker); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .quick-actions { grid-template-columns: 1fr; } }
.quick-action { background: var(--paper); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.order-track-card { border: var(--border); border-radius: var(--radius); background: var(--paper); }

/* ---- create comic ---- */
.create-wrapper { max-width: 920px; }
.page-header { align-items: center; }
.page-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.back-btn { font-weight: 500; }
.credits-badge { border: 2px solid var(--ink); background: var(--sun-tint); box-shadow: 2px 2px 0 var(--ink); font-weight: 600; }
.credits-badge .credits-icon, .credits-badge .credits-count { color: var(--ink); }
.adv-cta { border: var(--border); border-radius: var(--radius); background: var(--cobalt-tint); box-shadow: var(--shadow-sm); }
.form-card { background: var(--paper); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; margin-bottom: 1.4rem; }
.card-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: 1.35rem; display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.card-title .card-num { background: var(--sun); color: var(--ink); border: 2px solid var(--ink); width: 32px; height: 32px; font-family: var(--font-sticker); font-size: 1rem; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.form-hint { color: var(--text-muted); }
.form-label { font-weight: 600; }
.form-input, .form-textarea, .form-select { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; color: var(--ink); }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; box-shadow: 0 0 0 3px var(--cobalt-tint), 3px 3px 0 var(--ink); border-color: var(--ink); }
.tone-chip { border: 2px solid var(--ink); border-radius: var(--pill); background: var(--paper); color: var(--ink); font-weight: 500; }
.tone-option input:checked + .tone-chip { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.style-card { border: 2.5px solid var(--ink); border-radius: 10px; background: var(--paper); overflow: hidden; box-shadow: 3px 3px 0 var(--ink); }
.style-option input:checked + .style-card { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-tint), 3px 3px 0 var(--ink); }
.style-name { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: .85rem; border-top: 2px solid var(--ink); }
.style-lock { background: var(--sun); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--pill); font-weight: 600; font-size: .7rem; }
.add-char-btn, .add-char-library, .add-char-upload { border: 2px dashed var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 500; }
.add-char-btn:hover, .add-char-library:hover, .add-char-upload:hover { background: var(--sun-tint); }
.char-card { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
.char-card-name, .char-card-desc { background: var(--paper); border: 1.5px solid var(--rule); border-radius: 8px; color: var(--ink); }
.char-card-btn { border: 2px solid var(--ink); background: var(--paper); border-radius: 50%; color: var(--ink); }
.char-card-upload { background: var(--sun-tint); color: var(--ink); border: 2px dashed var(--ink); }
.page-btn-ctrl { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
.page-btn-ctrl:hover { background: var(--sun-tint); }
.page-display { font-family: var(--font-display); font-weight: 800; }
.generate-section { background: var(--sun-tint); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.generate-btn { background: var(--cobalt); color: #fff; border: var(--border); border-radius: var(--pill); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; font-size: 1.1rem; padding: 1rem 2rem; transition: transform .15s, box-shadow .15s; }
.generate-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--cobalt-deep); }
.generate-btn:disabled { opacity: .55; transform: none; }
.credit-note { color: var(--text-muted); }
.idea-btn { border: 2px solid var(--ink); border-radius: var(--pill); background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 2px 2px 0 var(--ink); }
.idea-btn:hover { background: var(--sun-tint); }
.char-library-card { background: var(--paper); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--ink); }
.char-lib-item { border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.loading-overlay { background: rgba(255,255,255,.92); color: var(--ink); }
.loading-content { color: var(--ink); }
.loading-title { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.loading-progress { background: var(--newsprint); border: 2px solid var(--ink); border-radius: var(--pill); overflow: hidden; }
.loading-progress-bar { background: var(--cobalt); }
.toast { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow-sm); }

/* ---- characters ---- */
.cs-wrapper { max-width: var(--maxw); padding-top: 2rem; }
.cs-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.cs-creator, .cs-preview-card { background: var(--paper); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.cs-panel-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.cs-mode-toggle { border: 2px solid var(--ink); border-radius: var(--pill); background: var(--paper); overflow: hidden; }
.cs-mode-btn { color: var(--ink); font-weight: 600; }
.cs-mode-btn.active { background: var(--ink); color: var(--paper); }
.cs-field input, .cs-field textarea, .cs-field select, .cs-name-input, .cs-edit-prompt { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; color: var(--ink); }
.cs-generate-btn, .cs-edit-submit, .cs-compare-accept { background: var(--cobalt); color: #fff; border: var(--border); border-radius: var(--pill); box-shadow: 3px 3px 0 var(--ink); font-weight: 600; }
.cs-generate-btn:hover { background: var(--cobalt-deep); }
.cs-photo-drop { border: 2px dashed var(--ink); background: var(--sun-tint); border-radius: 10px; color: var(--ink); }
.cs-char-card { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); overflow: hidden; }
.cs-credits { border: 2px solid var(--ink); background: var(--sun-tint); border-radius: var(--pill); font-weight: 600; padding: .35rem .8rem; color: var(--ink); }
.cs-credits-icon { color: var(--ink); }
.cs-count { background: var(--sun); color: var(--ink); border: 2px solid var(--ink); }
.cs-empty { color: var(--text-muted); border: 2px dashed var(--rule); border-radius: var(--radius); }
.cs-preview-modal { background: rgba(20,22,26,.6); }

/* ---- profile ---- */
.profile-wrapper { max-width: 900px; padding-top: 2rem; }
.profile-header { background: var(--paper); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.profile-avatar { background: var(--sun); border: 2.5px solid var(--ink); color: var(--ink); }
.profile-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.profile-badge { border: 2px solid var(--ink); border-radius: var(--pill); background: var(--paper); font-weight: 600; }
.profile-badge.is-hero { background: var(--sun); }
.profile-tabs, .tabs { border: 2px solid var(--ink); border-radius: var(--pill); background: var(--newsprint); }
.tab-btn.active, .profile-tab.active { background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---- orders / success ---- */
.success-card, .order-card, .order-summary { background: var(--paper); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.success-card h1, .order-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.success-details { background: var(--sun-tint); border: 2px solid var(--ink); border-radius: var(--radius); }
.s-btn, .order-btn { border: var(--border); border-radius: var(--pill); font-weight: 600; box-shadow: 3px 3px 0 var(--ink); background: var(--paper); color: var(--ink); }
.s-btn.primary, .order-btn { background: var(--cobalt); color: #fff; }
.s-btn.primary:hover, .order-btn:hover { background: var(--cobalt-deep); }
.order-comic-preview img, .order-cover img { border: var(--border); box-shadow: var(--shadow-sm); }

/* ---- legal ---- */
.legal-wrapper, .policy-wrapper { max-width: 800px; margin: 0 auto; padding: 2.5rem var(--gutter) 4rem; }

/* ---- shared: main content should sit under the sticky header, not a fixed one ---- */
main#main > .community-wrapper, main#main > .profile-wrapper, main#main > .cs-wrapper, main#main > .order-wrapper, main#main > .success-wrapper, main#main > .legal-wrapper, main#main > .adv-wrapper { padding-top: 2rem; }