/* ============================================================================
 * Mira 觅画 · 印社案头 light 主题 (v3.3 ink-atelier)
 *
 * 设计血脉：朱砂 #c4493a + 桑皮纸 #faf6ee + 古铜金 #a47e3b + 思源宋体
 *
 * 加载顺序：在 style.css + redesign-evolution.css 之后
 *           （覆盖优先级最高，方便回滚 — 注释 <link> 即可）
 *
 * 设计原则：
 *   - 不动 DOM / JS / layout，只 CSS overlay
 *   - 翻转 dark theme tokens（背景 / 文字 / 卡 / 边）→ 浅色印社风
 *   - 加米点桑皮纸纹理（radial-gradient）+ hairline
 *   - 朱砂保留为 accent（CTA / active / focus）
 *   - 古铜金给数字 / 价格 / 关键数据
 *   - 微动效：朱砂 glow + 印章 scale
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

/* ============================================================================
 * 1. Token 翻转 — light 印社案头
 * ============================================================================ */
/* :root tokens deleted — see tokens.css */

/* ============================================================================
 * 2. body / 全局基底 — 桑皮纸 + 米点纸纹
 * ============================================================================ */
html, body {
    background: var(--paper) !important;
    color: var(--ink-900) !important;
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    /* 米点桑皮纸纹（覆盖原 dark body::before noise）*/
    background-image:
        radial-gradient(rgba(120,90,50,.025) 1px, transparent 1px),
        radial-gradient(rgba(196,73,58,.018) 1px, transparent 1px) !important;
    background-size: 28px 28px, 41px 41px !important;
    background-position: 0 0, 14px 22px !important;
    background-attachment: fixed !important;
}

/* 干掉 redesign-evolution 的 SVG noise filter 顶层覆盖 */
body::before, body::after {
    background: none !important;
    backdrop-filter: none !important;
}

/* ============================================================================
 * 3. header / 顶部 nav — 桑色玻璃 + 朱砂下划线
 * ============================================================================ */
.header {
    background: rgba(250,246,238, .92) !important;
    backdrop-filter: blur(14px) saturate(110%) !important;
    border-bottom: 1px solid var(--paper-edge) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 2px 12px var(--paper-shadow) !important;
}

.logo-text, .logo-text span {
    color: var(--ink-900) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
}
.logo-text span {
    background: linear-gradient(135deg, var(--seal), var(--gold-ink)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.nav-btn {
    background: transparent !important;
    color: var(--ink-700) !important;
    border: none !important;
    font-family: var(--font-display) !important;
    font-weight: 500;
    letter-spacing: .8px;
    position: relative;
    transition: color .18s;
}
.nav-btn:hover {
    color: var(--seal) !important;
    background: transparent !important;
}
.nav-btn::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 4px;
    width: 0; height: 2px;
    background: var(--seal);
    transition: width .25s ease, left .25s ease;
}
.nav-btn:hover::after {
    width: 60%;
    left: 20%;
}
.nav-btn.active {
    background: transparent !important;
    color: var(--seal) !important;
    font-weight: 600;
}
.nav-btn.active::after {
    width: 70%;
    left: 15%;
    background: var(--seal);
    box-shadow: 0 1px 6px rgba(196,73,58,.35);
}

/* ============================================================================
 * 4. panel / main 容器 — 桑皮纸卡 + hairline
 * ============================================================================ */
main, .main, .gallery-view, .gallery-grid {
    background: transparent !important;
}

.panel-left, .panel-right, .panel {
    background: var(--bg-card) !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-sm) !important;
}

.panel-header {
    border-bottom: 1px solid var(--paper-edge) !important;
    background: linear-gradient(180deg, #fffaf0, transparent) !important;
}
.panel-title {
    color: var(--ink-900) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: .5px;
}
.panel-subtitle {
    color: var(--ink-500) !important;
    font-family: var(--font-body) !important;
}

/* ============================================================================
 * 5. input / textarea / select — 浅色输入框 + 朱砂 focus
 * ============================================================================ */
.story-input, .ad-input, input[type="text"], input[type="number"], textarea, select {
    background: #fffaf0 !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--paper-edge) !important;
    font-family: var(--font-body) !important;
    border-radius: 6px !important;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.story-input:focus, .ad-input:focus,
input[type="text"]:focus, input[type="number"]:focus,
textarea:focus, select:focus {
    background: #ffffff !important;
    border-color: var(--seal) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--seal-soft) !important;
}
.story-input::placeholder, .ad-input::placeholder,
input::placeholder, textarea::placeholder {
    color: var(--ink-300) !important;
}
.input-label {
    color: var(--ink-700) !important;
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    letter-spacing: .5px;
}
.input-label .badge {
    background: var(--seal-soft) !important;
    color: var(--seal) !important;
    border: 1px solid var(--seal-line) !important;
    border-radius: 3px;
    font-size: 11px;
    font-family: var(--font-display);
}

/* ============================================================================
 * 6. 按钮 — 朱砂 CTA + 古铜金阴影
 * ============================================================================ */
.btn-generate, .btn-auto {
    background: linear-gradient(180deg, var(--seal), var(--seal-deep)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 18px rgba(196,73,58,.3) !important;
    transition: transform .15s, box-shadow .2s, background .2s;
}
.btn-generate:hover, .btn-auto:hover {
    background: linear-gradient(180deg, var(--seal-deep), var(--seal)) !important;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 26px rgba(196,73,58,.4) !important;
}
.btn-generate:active, .btn-auto:active {
    transform: translateY(0);
}
.btn-generate:disabled, .btn-auto:disabled {
    background: var(--paper-edge) !important;
    color: var(--ink-300) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}
.btn-stop {
    background: transparent !important;
    color: var(--seal) !important;
    border: 1px solid var(--seal-line) !important;
}
.btn-stop:hover {
    background: var(--seal-soft) !important;
    color: var(--seal-deep) !important;
}
.btn-regen, .btn-secondary, .ad-add-btn {
    background: var(--paper-warm) !important;
    color: var(--ink-700) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 4px !important;
    font-family: var(--font-display) !important;
    transition: all .15s;
}
.btn-regen:hover, .btn-secondary:hover, .ad-add-btn:hover {
    background: var(--seal-soft) !important;
    color: var(--seal) !important;
    border-color: var(--seal-line) !important;
}

/* ============================================================================
 * 7. progress-bar / step / chapter dots — 印章感数字
 * ============================================================================ */
.progress-bar {
    background: var(--bg-card) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 10px !important;
}
.step .step-dot {
    background: var(--paper-warm) !important;
    color: var(--ink-300) !important;
    border: 1px solid var(--paper-edge) !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
}
.step.active .step-dot, .step.cur .step-dot {
    background: var(--seal) !important;
    color: #fff !important;
    border-color: var(--seal) !important;
    box-shadow: 0 0 0 4px var(--seal-soft);
}
.step.done .step-dot {
    background: var(--gold-ink) !important;
    color: #fff !important;
    border-color: var(--gold-ink) !important;
}
.step .step-label {
    color: var(--ink-500) !important;
    font-family: var(--font-display) !important;
    letter-spacing: 1px;
}
.step.active .step-label, .step.cur .step-label {
    color: var(--seal) !important;
}
.step-line {
    background: var(--paper-edge) !important;
}

/* ============================================================================
 * 8. settings 面板 / log panel / content area — 暖纸
 * ============================================================================ */
.settings-grid, .settings-section, .content-area, .log-panel,
.empty-state, .log-body, .log-header {
    background: var(--bg-card) !important;
    color: var(--ink-900) !important;
    border-color: var(--paper-edge) !important;
}
.log-panel {
    border-radius: 8px;
    background: var(--paper-warm) !important;
    border: 1px solid var(--paper-edge) !important;
}
.log-header {
    background: linear-gradient(180deg, var(--paper-cool), var(--paper-warm)) !important;
    color: var(--ink-700) !important;
    font-family: var(--font-display) !important;
    border-bottom: 1px solid var(--paper-edge) !important;
}
.log-body {
    color: var(--ink-700) !important;
    font-family: var(--font-mono) !important;
}
.empty-state {
    color: var(--ink-500) !important;
}
.empty-state .empty-icon {
    color: var(--gold-ink) !important;
    opacity: .55;
}
.empty-state .empty-title {
    color: var(--ink-900) !important;
    font-family: var(--font-display) !important;
    font-weight: 600;
}
.empty-state .empty-desc {
    color: var(--ink-500) !important;
}

/* ============================================================================
 * 9. gallery / works card — 浅色卡 + 暖灰 hover
 * ============================================================================ */
.gallery-grid, .works-grid {
    background: transparent !important;
}
.gallery-card, .work-card, .gallery-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 10px !important;
    color: var(--ink-900) !important;
    transition: border-color .18s, box-shadow .18s, transform .15s;
    overflow: hidden;
}
.gallery-card:hover, .work-card:hover, .gallery-item:hover {
    border-color: var(--seal-line) !important;
    box-shadow: 0 8px 24px rgba(196,73,58,.12) !important;
    transform: translateY(-2px);
}

/* ============================================================================
 * 10. modal / mask / overlay — 半透明桑色
 * ============================================================================ */
.modal-mask, .modal-overlay, .overlay-mask {
    background: rgba(26,23,20,.55) !important;
    backdrop-filter: blur(6px);
}
.modal, .modal-content, .modal-body {
    background: var(--bg-card) !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(80,60,40,.18) !important;
}
.modal h2, .modal-header {
    color: var(--ink-900) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
}

/* ============================================================================
 * 11. web_login.js 登录浮层 + web_user_badge — 桑色卡
 * ============================================================================ */
#webLoginMask, #webLoginModal {
    background: rgba(26,23,20,.55) !important;
    backdrop-filter: blur(8px);
}
#webLoginCard, #webLoginBox {
    background: var(--bg-card) !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(80,60,40,.2);
    font-family: var(--font-body);
}
#webLoginCard h2, #webLoginCard .title, #webLoginBox h2 {
    color: var(--ink-900) !important;
    font-family: var(--font-display) !important;
    font-weight: 600;
}
#webLoginCard input, #webLoginBox input {
    background: #fffaf0 !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 6px;
}
#webLoginCard button, #webLoginBox button {
    background: linear-gradient(180deg, var(--seal), var(--seal-deep)) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--font-display) !important;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(196,73,58,.3);
}

/* 右上角 badge 修不重叠 — 提升层级 + 绝对定位独占空间 */
#webBadge, .web-badge, .web_user_badge {
    position: fixed !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 200 !important;
    background: var(--bg-card) !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 18px !important;
    padding: 6px 14px !important;
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    box-shadow: 0 4px 14px rgba(80,60,40,.12) !important;
}
#webBadgeCredits {
    color: var(--seal) !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
}

/* nav 右侧给 badge 留 90px 空间防重叠 */
.header { padding-right: 110px !important; }
.header-nav { margin-right: 0 !important; }

/* ============================================================================
 * 12. toast / notification — 桑色卡
 * ============================================================================ */
#webToast, .toast {
    background: var(--bg-card) !important;
    color: var(--ink-900) !important;
    border: 1px solid var(--paper-edge) !important;
    border-left: 3px solid var(--seal) !important;
    box-shadow: 0 8px 24px rgba(80,60,40,.15) !important;
    font-family: var(--font-body);
}

/* ============================================================================
 * 13. 选项卡 / chip / tag — 桑边
 * ============================================================================ */
.tab, .chip, .tag, .pill {
    background: var(--paper-warm) !important;
    color: var(--ink-700) !important;
    border: 1px solid var(--paper-edge) !important;
    border-radius: 4px;
    font-family: var(--font-display);
}
.tab.active, .chip.active, .tag.active {
    background: var(--seal-soft) !important;
    color: var(--seal) !important;
    border-color: var(--seal-line) !important;
}

/* ============================================================================
 * 14. 数字 / 价格 / 积分 → 古铜金等宽
 * ============================================================================ */
.credit, .price, .num, .count, .gallery-count, .progress-text,
[class*="credit"], [class*="price"] {
    font-family: var(--font-mono) !important;
    color: var(--gold-ink) !important;
    font-weight: 600;
    letter-spacing: .5px;
}

/* ============================================================================
 * 15. settings 模态 / 字段
 * ============================================================================ */
.settings-section-title, .settings-section-desc {
    color: var(--ink-900) !important;
    font-family: var(--font-display) !important;
}

/* ============================================================================
 * 16. 滚动条（可选 polish） — 暖色细条
 * ============================================================================ */
::-webkit-scrollbar {
    width: 8px; height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--paper);
}
::-webkit-scrollbar-thumb {
    background: var(--paper-edge);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold-soft);
}

/* ============================================================================
 * 17. step1-5 panel 内文本（覆盖原 dark）
 * ============================================================================ */
.step-block, .script-result, .character-list, .scene-list, .video-grid,
.frame-card, .character-card, .scene-card {
    background: var(--bg-card) !important;
    color: var(--ink-900) !important;
    border-color: var(--paper-edge) !important;
}

/* ============================================================================
 * 18. 链接
 * ============================================================================ */
a {
    color: var(--seal) !important;
    text-decoration: none;
    transition: color .15s;
}
a:hover {
    color: var(--seal-deep) !important;
    text-decoration: underline;
}

/* ============================================================================
 * 19. video / iframe / cover 容器
 * ============================================================================ */
video, .video-preview, .video-player {
    background: #1a1714 !important;  /* 视频容器保留深色（视频本身就是 dark）*/
    border-radius: 8px;
    border: 1px solid var(--paper-edge);
}

/* ============================================================================
 * 20. 信息提示 / hint / muted 文字
 * ============================================================================ */
.hint, .muted, .text-muted, .desc, small {
    color: var(--ink-500) !important;
}