/* ===== 主题变量 ===== */

/* 黑夜模式（默认）：放映厅美学 - 深墨青底 + 暖琥珀聚光 */
[data-theme="dark"] {
    --theme-primary: #E8A547;
    --theme-primary-light: #F0C674;
    --theme-primary-gradient: linear-gradient(135deg, #E8A547 0%, #F0C674 100%);
    --theme-primary-hover: #D49536;
    --theme-secondary-gradient: linear-gradient(135deg, #C8443C 0%, #E8A547 100%);
    --theme-tertiary-gradient: linear-gradient(135deg, #2A3F5F 0%, #1E3A5F 100%);
    --theme-background: #0E1620;
    --theme-surface: #141E2E;
    --theme-card: #1A2538;
    --theme-card-gradient: linear-gradient(180deg, #141E2E 0%, #1A2538 100%);
    --theme-text: #F2EEDC;
    --theme-text-secondary: #8B9BB4;
    --theme-border: #2A3A52;
    --theme-border-strong: #3D5273;
}

/* 白天模式：暖米底 + 琥珀强调 */
[data-theme="light"] {
    --theme-primary: #C8881E;
    --theme-primary-light: #E8A547;
    --theme-primary-gradient: linear-gradient(135deg, #C8881E 0%, #E8A547 100%);
    --theme-primary-hover: #B07418;
    --theme-secondary-gradient: linear-gradient(135deg, #C8443C 0%, #E8A547 100%);
    --theme-tertiary-gradient: linear-gradient(135deg, #E8E0CC 0%, #F5F2EA 100%);
    --theme-background: #F5F2EA;
    --theme-surface: #FFFFFF;
    --theme-card: #FAF7F0;
    --theme-card-gradient: linear-gradient(180deg, #FFFFFF 0%, #FAF7F0 100%);
    --theme-text: #2A2520;
    --theme-text-secondary: #6B6557;
    --theme-border: #E0D9C8;
    --theme-border-strong: #C9BFA8;
}

/* ===== 全局基础样式 ===== */

html,
body {
    color: var(--theme-text);
    background-color: var(--theme-background) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
}

a {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

::selection {
    color: #0E1620;
    background: var(--theme-primary);
}

/* ===== 字体规则 ===== */

/* 中文衬线 display 字体（标题/海报名） */
.search-title,
.logo-name,
.hot-category-card-title,
.home-banner-name,
.latest-title,
.ranking-title {
    font-family: "Noto Serif SC", "Noto Sans SC", serif;
}

/* 等宽字体（数据/标签/编号） */
.logo-version,
.stat-value,
.hot-category-card-count,
.hot-category-rank,
.search-kicker,
.info-card-title,
.pan-type-label {
    font-family: "JetBrains Mono", "Courier New", monospace;
}

@media (max-width: 768px) {
    #app > .top-nav .top-nav-logo .logo-version {
        display: none !important;
    }
}

/* ===== Element Plus 对话框覆盖 ===== */

.el-dialog {
    border-radius: 20px !important;
    overflow: hidden;
    border: 1px solid var(--theme-border);
    box-shadow: 0 28px 80px rgba(18, 24, 38, 0.18) !important;
}

.el-overlay {
    backdrop-filter: blur(6px);
    background: rgba(16, 21, 29, 0.28) !important;
}
/* ===== 全网搜索等待：橘猫 ===== */
.search-result-loading .loading-pulse,
.search-result-loading .loading-wrapper .icon-jiazai { display: none !important; }
.search-result-loading .loading-wrapper::before {
    content: "";
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%0A%20%20%3Cpath%20d%3D%22M96%2074%20C110%2070%20116%2054%20108%2046%22%20fill%3D%22none%22%20stroke%3D%22%23F5A623%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M38%2092%20Q60%2074%2082%2092%20Q82%20112%2060%20112%20Q38%20112%2038%2092%20Z%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2256%22%20r%3D%2230%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M40%2040%20L36%2018%20L58%2030%20Z%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M80%2040%20L84%2018%20L62%2030%20Z%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M43%2035%20L41%2023%20L55%2031%20Z%22%20fill%3D%22%23F8C48A%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M77%2035%20L79%2023%20L65%2031%20Z%22%20fill%3D%22%23F8C48A%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M60%2030%20V42%20M46%2034%20V44%20M74%2034%20V44%22%20stroke%3D%22%23E88A2E%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M46%2054%20Q51%2047%2056%2054%22%20stroke%3D%22%235C3A21%22%20stroke-width%3D%223.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M64%2054%20Q69%2047%2074%2054%22%20stroke%3D%22%235C3A21%22%20stroke-width%3D%223.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M55%2063%20L65%2063%20L60%2069%20Z%22%20fill%3D%22%23F58A8A%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M60%2069%20V73%20M60%2073%20Q55%2078%2050%2073%20M60%2073%20Q65%2078%2070%2073%22%20stroke%3D%22%235C3A21%22%20stroke-width%3D%222.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M36%2060%20H20%20M36%2067%20H24%20M84%2060%20H100%20M84%2067%20H96%22%20stroke%3D%22%235C3A21%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cellipse%20cx%3D%2250%22%20cy%3D%22110%22%20rx%3D%2210%22%20ry%3D%226%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Cellipse%20cx%3D%2270%22%20cy%3D%22110%22%20rx%3D%2210%22%20ry%3D%226%22%20fill%3D%22%23F5A623%22%2F%3E%0A%3C%2Fsvg%3E") center center / contain no-repeat;
    animation: catno-wait 1.15s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.search-result-loading .loading-text { color: var(--theme-text-secondary); letter-spacing: 1px; }
.loading-spinner .spinner-ring { display: none !important; }
.loading-spinner::before {
    content: "";
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%0A%20%20%3Cpath%20d%3D%22M96%2074%20C110%2070%20116%2054%20108%2046%22%20fill%3D%22none%22%20stroke%3D%22%23F5A623%22%20stroke-width%3D%229%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M38%2092%20Q60%2074%2082%2092%20Q82%20112%2060%20112%20Q38%20112%2038%2092%20Z%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2256%22%20r%3D%2230%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M40%2040%20L36%2018%20L58%2030%20Z%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M80%2040%20L84%2018%20L62%2030%20Z%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M43%2035%20L41%2023%20L55%2031%20Z%22%20fill%3D%22%23F8C48A%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M77%2035%20L79%2023%20L65%2031%20Z%22%20fill%3D%22%23F8C48A%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M60%2030%20V42%20M46%2034%20V44%20M74%2034%20V44%22%20stroke%3D%22%23E88A2E%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M46%2054%20Q51%2047%2056%2054%22%20stroke%3D%22%235C3A21%22%20stroke-width%3D%223.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M64%2054%20Q69%2047%2074%2054%22%20stroke%3D%22%235C3A21%22%20stroke-width%3D%223.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M55%2063%20L65%2063%20L60%2069%20Z%22%20fill%3D%22%23F58A8A%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M60%2069%20V73%20M60%2073%20Q55%2078%2050%2073%20M60%2073%20Q65%2078%2070%2073%22%20stroke%3D%22%235C3A21%22%20stroke-width%3D%222.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M36%2060%20H20%20M36%2067%20H24%20M84%2060%20H100%20M84%2067%20H96%22%20stroke%3D%22%235C3A21%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%0A%20%20%3Cellipse%20cx%3D%2250%22%20cy%3D%22110%22%20rx%3D%2210%22%20ry%3D%226%22%20fill%3D%22%23F5A623%22%2F%3E%0A%20%20%3Cellipse%20cx%3D%2270%22%20cy%3D%22110%22%20rx%3D%2210%22%20ry%3D%226%22%20fill%3D%22%23F5A623%22%2F%3E%0A%3C%2Fsvg%3E") center center / contain no-repeat;
    animation: catno-wait 1.15s ease-in-out infinite;
    transform-origin: 50% 100%;
}
@keyframes catno-wait {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    30% { transform: translateY(-8px) scale(1.04, .95); }
    55% { transform: translateY(0) scale(.96, 1.04); }
    75% { transform: translateY(-3px) scale(1.01, .99); }
}

