/* 易经64卦主题配色系统 v10.0 - 完整65卦（0-64）+ 虾仁动画 */
/* 设计理念：五行属性 + 色彩心理学 + 护眼护目 + 搞笑虾仁动画 */

/* ========== 导入主题模块文件 ========== */
@import url('themes/themes-0-8.css');
@import url('themes/themes-9-20.css');
@import url('themes/themes-21-32.css');
@import url('themes/themes-33-44.css');
@import url('themes/themes-45-56.css');
@import url('themes/themes-57-64.css');

/* ========== 全局样式应用 ========== */
body {
    background: var(--bg-gradient);
    color: var(--text-color);
    transition: all 0.3s ease;
}

body::before {
    color: var(--gold) !important;
    opacity: 0.03 !important;
}

/* ========== 全局UI元素适配 ========== */

/* 时辰表当前行高亮 */
.highlight-row {
    background: var(--gold) !important;
    color: var(--button-text) !important;
    font-weight: bold !important;
    border: 1px solid var(--gold) !important;
    opacity: 0.9 !important;
}

/* 按钮 */
.btn, .btn-gold {
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 600;
}

.btn-gold:hover {
    background: var(--button-bg) !important;
    filter: brightness(1.15);
    box-shadow: 0 8px 24px var(--shadow-color);
    transform: translateY(-3px);
}

/* 输入框 */
input, select, textarea {
    background: var(--input-bg) !important;
    color: var(--input-text, var(--text-color)) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-family: inherit;
}

input::placeholder, textarea::placeholder {
    color: var(--input-text, var(--text-color)) !important;
    opacity: 0.5 !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--shadow-color) !important;
    background: var(--input-bg) !important;
    transform: scale(1.01);
}

/* 卡片 */
.result-container, .gua-display, .panel-section {
    background: var(--card-bg);
    border-color: var(--border-color);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.app {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border-color: var(--border-color);
    border-radius: 16px;
}

.gua-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    border-radius: 12px;
}

/* 标签页 */
.tab {
    color: var(--text-color);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.tab.active {
    color: var(--gold) !important;
    opacity: 1;
    text-shadow: 0 0 8px rgba(238, 187, 85, 0.4);
}

.tab.active::after {
    background: var(--gold) !important;
    box-shadow: 0 0 12px var(--gold) !important;
}

/* 工具按钮 */
.tool-btn {
    color: var(--gold) !important;
    border-color: var(--border-color) !important;
    background: var(--card-bg) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.tool-btn:hover {
    background: var(--gold) !important;
    color: var(--button-text) !important;
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* 用户信息 */
.user-name {
    color: var(--gold) !important;
    border-color: var(--border-color) !important;
    background: var(--card-bg) !important;
}

.user-name:hover {
    background: var(--gold) !important;
    color: var(--button-text) !important;
}

.btn-settings, .btn-logout {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--gold) !important;
    transition: all 0.3s ease;
}

.btn-settings:hover, .btn-logout:hover {
    background: var(--gold) !important;
    color: var(--button-text) !important;
    transform: scale(1.08);
}

/* 爻象 */
.yang {
    background: var(--gold) !important;
    box-shadow: 0 0 8px var(--gold) !important;
}

.yin::before, .yin::after {
    background: var(--gold) !important;
    box-shadow: 0 0 8px var(--gold) !important;
}

/* 卦象文字 */
.gua-text {
    color: var(--cyan) !important;
    border-left-color: var(--border-color) !important;
}

.num-label, .num-val {
    color: var(--gold) !important;
    font-weight: 600;
}

/* 标签 */
.tag-top {
    background: var(--card-bg) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* 模态框 */
.modal-box, .auth-box {
    background: var(--card-bg) !important;
    border-color: var(--gold) !important;
    color: var(--text-color) !important;
    border-radius: 16px;
    backdrop-filter: blur(15px);
}

#auth-title {
    color: var(--gold) !important;
    font-weight: 600;
}

.modal-close {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    transition: all 0.3s ease;
}

.modal-close:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    transform: rotate(90deg);
}

/* 设置界面 */
.settings-info {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    border-radius: 12px;
}

.info-item {
    border-bottom-color: var(--border-color) !important;
}

.info-label {
    color: var(--gold) !important;
    font-weight: 600;
}

#settings-username, #settings-phone {
    color: var(--cyan) !important;
}

.change-password-section {
    background: var(--card-bg) !important;
    border-color: var(--gold) !important;
    border-radius: 12px;
}

.change-password-section h4 {
    color: var(--gold) !important;
    font-weight: 600;
}

/* 记录 */
.record-item {
    background: var(--card-bg) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.record-item:hover {
    transform: translateY(-2px);
}

.record-subject {
    color: var(--gold) !important;
    font-weight: 700;
    font-size: 16px;
    text-shadow: 0 0 8px rgba(238, 187, 85, 0.5);
}

.record-input {
    color: var(--cyan) !important;
    font-weight: 600;
}

.record-guas {
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    font-weight: 500;
}

/* 分页 */
.pagination-btn {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--gold) !important;
    transition: all 0.3s ease;
}

.pagination-btn:hover {
    background: var(--gold) !important;
    color: var(--button-text) !important;
    transform: scale(1.05);
}

.pagination-select {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--gold) !important;
}

/* 青色按钮 */
.btn-cyan {
    background: var(--cyan) !important;
    opacity: 0.85 !important;
    border: 2px solid var(--cyan) !important;
    color: #000 !important;
    transition: all 0.3s ease;
    font-weight: 600 !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8) !important;
}

.btn-cyan:hover {
    opacity: 1 !important;
    box-shadow: 0 0 12px var(--cyan), 0 6px 18px rgba(136, 255, 234, 0.6) !important;
    transform: translateY(-2px) scale(1.05);
}

/* 复制按钮 */
.btn-copy {
    border-color: var(--cyan) !important;
    color: var(--cyan) !important;
    background: var(--card-bg) !important;
    transition: all 0.3s ease;
}

.btn-copy:hover {
    background: var(--cyan) !important;
    color: var(--button-text) !important;
}

.btn-copy.ai {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

.btn-copy.ai:hover {
    background: var(--gold) !important;
    color: var(--button-text) !important;
}

/* Toast */
.toast-box {
    background: var(--card-bg) !important;
    color: var(--gold) !important;
    border-color: var(--gold) !important;
    border-radius: 12px;
}

/* Footer */
.footer {
    background: var(--card-bg);
    border-top-color: var(--border-color);
}

.footer-container-box {
    border-color: var(--border-color) !important;
    background: var(--card-bg) !important;
    border-radius: 12px;
}

.col-left {
    border-right-color: var(--border-color) !important;
}

.content-box h4 {
    color: var(--gold) !important;
    border-left-color: var(--gold) !important;
    font-weight: 600;
}

.align-line .t-right, .align-line .t-left {
    color: var(--text-color) !important;
}

.sub-line .t-right, .sub-line .t-left, .sub-line .center-dot {
    color: var(--gold) !important;
}

/* 刷新按钮 */
.btn-refresh {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--gold) !important;
    transition: all 0.3s ease;
}

.btn-refresh:hover {
    background: var(--gold) !important;
    color: var(--button-text) !important;
    transform: rotate(180deg);
}

/* 解卦内容 */
.interpretation-content {
    color: var(--text-color) !important;
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

#interpretation-text {
    color: var(--text-color) !important;
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    font-weight: 500 !important;
}

.record-interpretation {
    color: var(--text-color) !important;
    background: var(--input-bg) !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
}

textarea {
    color: var(--input-text, var(--text-color)) !important;
    font-weight: 500 !important;
}

/* 清空缓存 */
.btn-clear-cache {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--gold) !important;
    transition: all 0.3s ease;
}

.btn-clear-cache:hover {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--button-text) !important;
    transform: scale(1.2) rotate(15deg);
}

/* 主题选择器 */
.theme-item {
    cursor: pointer;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.theme-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.theme-item.active {
    border-color: #4CAF50;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
}

.theme-preview {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
    background: var(--bg-gradient);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 主题预览虾仁图标 */
.theme-preview::before {
    content: "🦐";
    position: absolute;
    font-size: 50px;
    opacity: 0.5;
    animation: shrimpPreview 3s ease-in-out infinite;
}

/* 主题1-64默认显示八卦☯图标，下载后才显示gif */
.theme-preview[data-theme="1"]::before,
.theme-preview[data-theme="2"]::before,
.theme-preview[data-theme="3"]::before,
.theme-preview[data-theme="4"]::before,
.theme-preview[data-theme="5"]::before,
.theme-preview[data-theme="6"]::before,
.theme-preview[data-theme="7"]::before,
.theme-preview[data-theme="8"]::before,
.theme-preview[data-theme="9"]::before,
.theme-preview[data-theme="10"]::before,
.theme-preview[data-theme="11"]::before,
.theme-preview[data-theme="12"]::before,
.theme-preview[data-theme="13"]::before,
.theme-preview[data-theme="14"]::before,
.theme-preview[data-theme="15"]::before,
.theme-preview[data-theme="16"]::before,
.theme-preview[data-theme="17"]::before,
.theme-preview[data-theme="18"]::before,
.theme-preview[data-theme="19"]::before,
.theme-preview[data-theme="20"]::before,
.theme-preview[data-theme="21"]::before,
.theme-preview[data-theme="22"]::before,
.theme-preview[data-theme="23"]::before,
.theme-preview[data-theme="24"]::before,
.theme-preview[data-theme="25"]::before,
.theme-preview[data-theme="26"]::before,
.theme-preview[data-theme="27"]::before,
.theme-preview[data-theme="28"]::before,
.theme-preview[data-theme="29"]::before,
.theme-preview[data-theme="30"]::before,
.theme-preview[data-theme="31"]::before,
.theme-preview[data-theme="32"]::before,
.theme-preview[data-theme="33"]::before,
.theme-preview[data-theme="34"]::before,
.theme-preview[data-theme="35"]::before,
.theme-preview[data-theme="36"]::before,
.theme-preview[data-theme="37"]::before,
.theme-preview[data-theme="38"]::before,
.theme-preview[data-theme="39"]::before,
.theme-preview[data-theme="40"]::before,
.theme-preview[data-theme="41"]::before,
.theme-preview[data-theme="42"]::before,
.theme-preview[data-theme="43"]::before,
.theme-preview[data-theme="44"]::before,
.theme-preview[data-theme="45"]::before,
.theme-preview[data-theme="46"]::before,
.theme-preview[data-theme="47"]::before,
.theme-preview[data-theme="48"]::before,
.theme-preview[data-theme="49"]::before,
.theme-preview[data-theme="50"]::before,
.theme-preview[data-theme="51"]::before,
.theme-preview[data-theme="52"]::before,
.theme-preview[data-theme="53"]::before,
.theme-preview[data-theme="54"]::before,
.theme-preview[data-theme="55"]::before,
.theme-preview[data-theme="56"]::before,
.theme-preview[data-theme="57"]::before,
.theme-preview[data-theme="58"]::before,
.theme-preview[data-theme="59"]::before,
.theme-preview[data-theme="60"]::before,
.theme-preview[data-theme="61"]::before,
.theme-preview[data-theme="62"]::before,
.theme-preview[data-theme="63"]::before,
.theme-preview[data-theme="64"]::before {
    content: "☯";
    font-size: 50px;
    opacity: 0.5;
    animation: shrimpPreview 3s ease-in-out infinite;
}

/* 已下载主题的GIF样式 - 通过JavaScript动态添加 .downloaded class 和 style标签 */
/* JavaScript会动态注入带有background-image的样式 */

@keyframes shrimpPreview {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(15deg); }
}

/* 主题切换爆炸特效动画 */
@keyframes shrimpExplode {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    20% {
        opacity: 1;
    }
    60% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.5) rotate(360deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5) rotate(720deg);
    }
}

/* 主题序号标签 */
.theme-number {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #eebb55;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1.5px solid rgba(238, 187, 85, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 6px rgba(238, 187, 85, 0.8);
    backdrop-filter: blur(4px);
}

.theme-item:hover .theme-preview {
    transform: scale(1.08);
}

/* 为所有主题预览分配对应的背景渐变 */
.theme-preview[data-theme="0"] { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); }
.theme-preview[data-theme="1"] { background: linear-gradient(135deg, #d4b896 0%, #f5e8d8 40%, #c9a96e 100%); }
.theme-preview[data-theme="2"] { background: linear-gradient(135deg, #8b7661 0%, #c9b5a0 50%, #6b5545 100%); }
.theme-preview[data-theme="3"] { background: linear-gradient(135deg, #2d5a3d 0%, #5a8f6f 100%); }
.theme-preview[data-theme="4"] { background: linear-gradient(135deg, #5a5a4a 0%, #7a7a6a 100%); }
.theme-preview[data-theme="5"] { background: linear-gradient(135deg, #3a5a7a 0%, #6a8aaa 100%); }
.theme-preview[data-theme="6"] { background: linear-gradient(135deg, #4a6a8a 0%, #7a9abc 100%); }
.theme-preview[data-theme="7"] { background: linear-gradient(135deg, #4a5a6a 0%, #6a7a8a 100%); }
.theme-preview[data-theme="8"] { background: linear-gradient(135deg, #2a4a5a 0%, #5a7a8a 100%); }
.theme-preview[data-theme="9"] { background: linear-gradient(135deg, #5a6a4a 0%, #8a9a7a 100%); }
.theme-preview[data-theme="10"] { background: linear-gradient(135deg, #7a8a6a 0%, #aabaa0 100%); }
.theme-preview[data-theme="11"] { background: linear-gradient(135deg, #6a7a5a 0%, #9aaaa8 100%); }
.theme-preview[data-theme="12"] { background: linear-gradient(135deg, #5a5a4a 0%, #8a8a78 100%); }
.theme-preview[data-theme="13"] { background: linear-gradient(135deg, #7a5a3a 0%, #b88850 100%); }
.theme-preview[data-theme="14"] { background: linear-gradient(135deg, #8a6a3a 0%, #c89060 100%); }
.theme-preview[data-theme="15"] { background: linear-gradient(135deg, #6a6a5a 0%, #9a9a88 100%); }
.theme-preview[data-theme="16"] { background: linear-gradient(135deg, #5a5a4a 0%, #8a8a7a 100%); }
.theme-preview[data-theme="17"] { background: linear-gradient(135deg, #4a6a7a 0%, #7a9aaa 100%); }
.theme-preview[data-theme="18"] { background: linear-gradient(135deg, #5a6a4a 0%, #8a9a7a 100%); }
.theme-preview[data-theme="19"] { background: linear-gradient(135deg, #6a7a6a 0%, #9aaaa0 100%); }
.theme-preview[data-theme="20"] { background: linear-gradient(135deg, #5a6a5a 0%, #8a9a8a 100%); }
.theme-preview[data-theme="21"] { background: linear-gradient(135deg, #7a4a2a 0%, #c87840 100%); }
.theme-preview[data-theme="22"] { background: linear-gradient(135deg, #8b4513 0%, #d97534 100%); }
.theme-preview[data-theme="23"] { background: linear-gradient(135deg, #5a4a3a 0%, #8a7a6a 100%); }
.theme-preview[data-theme="24"] { background: linear-gradient(135deg, #1a3d2a 0%, #3d7a5f 100%); }
.theme-preview[data-theme="25"] { background: linear-gradient(135deg, #6b3f1f 0%, #c85828 100%); }
.theme-preview[data-theme="26"] { background: linear-gradient(135deg, #6a5a4a 0%, #9a8a7a 100%); }
.theme-preview[data-theme="27"] { background: linear-gradient(135deg, #5a6a3a 0%, #8a9a5a 100%); }
.theme-preview[data-theme="28"] { background: linear-gradient(135deg, #2d5a4a 0%, #5a8a7a 100%); }
.theme-preview[data-theme="29"] { background: linear-gradient(135deg, #1a4a6a 0%, #3a7a9a 100%); }
.theme-preview[data-theme="30"] { background: linear-gradient(135deg, #9a3a1a 0%, #d85828 100%); }
.theme-preview[data-theme="31"] { background: linear-gradient(135deg, #4a7a8a 0%, #7aaabc 100%); }
.theme-preview[data-theme="32"] { background: linear-gradient(135deg, #5a6a3a 0%, #8a9a6a 100%); }
.theme-preview[data-theme="33"] { background: linear-gradient(135deg, #6a5a4a 0%, #9a8a78 100%); }
.theme-preview[data-theme="34"] { background: linear-gradient(135deg, #5a3a1a 0%, #c85020 100%); }
.theme-preview[data-theme="35"] { background: linear-gradient(135deg, #6b4520 0%, #d87030 100%); }
.theme-preview[data-theme="36"] { background: linear-gradient(135deg, #7a5a3a 0%, #b8805a 100%); }
.theme-preview[data-theme="37"] { background: linear-gradient(135deg, #5a4a2a 0%, #b89050 100%); }
.theme-preview[data-theme="38"] { background: linear-gradient(135deg, #6a4a2a 0%, #c87a3a 100%); }
.theme-preview[data-theme="39"] { background: linear-gradient(135deg, #3a5a6a 0%, #6a8a9a 100%); }
.theme-preview[data-theme="40"] { background: linear-gradient(135deg, #2a5a6a 0%, #5a9aaa 100%); }
.theme-preview[data-theme="41"] { background: linear-gradient(135deg, #6a6a5a 0%, #9a9a88 100%); }
.theme-preview[data-theme="42"] { background: linear-gradient(135deg, #4a6a3a 0%, #7a9a6a 100%); }
.theme-preview[data-theme="43"] { background: linear-gradient(135deg, #5a5a4a 0%, #8a8a78 100%); }
.theme-preview[data-theme="44"] { background: linear-gradient(135deg, #6a6a4a 0%, #9a9a68 100%); }
.theme-preview[data-theme="45"] { background: linear-gradient(135deg, #3a5a6a 0%, #6a8a9a 100%); }
.theme-preview[data-theme="46"] { background: linear-gradient(135deg, #4a6a3a 0%, #7a9a5a 100%); }
.theme-preview[data-theme="47"] { background: linear-gradient(135deg, #3a5a6a 0%, #6a8a9a 100%); }
.theme-preview[data-theme="48"] { background: linear-gradient(135deg, #4a6a3a 0%, #7a9a6a 100%); }
.theme-preview[data-theme="49"] { background: linear-gradient(135deg, #7a5a2a 0%, #c88040 100%); }
.theme-preview[data-theme="50"] { background: linear-gradient(135deg, #6a4a2a 0%, #c87a3a 100%); }
.theme-preview[data-theme="51"] { background: linear-gradient(135deg, #4a3a5a 0%, #6a5a8a 100%); }
.theme-preview[data-theme="52"] { background: linear-gradient(135deg, #5a5a4a 0%, #8a8a78 100%); }
.theme-preview[data-theme="53"] { background: linear-gradient(135deg, #5a6a4a 0%, #8a9a78 100%); }
.theme-preview[data-theme="54"] { background: linear-gradient(135deg, #8a5a3a 0%, #d89050 100%); }
.theme-preview[data-theme="55"] { background: linear-gradient(135deg, #5a4a2a 0%, #c8703a 100%); }
.theme-preview[data-theme="56"] { background: linear-gradient(135deg, #8a6a4a 0%, #c89060 100%); }
.theme-preview[data-theme="57"] { background: linear-gradient(135deg, #5a7a4a 0%, #8aaa7a 100%); }
.theme-preview[data-theme="58"] { background: linear-gradient(135deg, #4a8a9a 0%, #7abacc 100%); }
.theme-preview[data-theme="59"] { background: linear-gradient(135deg, #3a7a8a 0%, #6aaa9a 100%); }
.theme-preview[data-theme="60"] { background: linear-gradient(135deg, #4a7a8a 0%, #7aaaaa 100%); }
.theme-preview[data-theme="61"] { background: linear-gradient(135deg, #6a7a5a 0%, #9aaa8a 100%); }
.theme-preview[data-theme="62"] { background: linear-gradient(135deg, #5a6a4a 0%, #8a9a7a 100%); }
.theme-preview[data-theme="63"] { background: linear-gradient(135deg, #6a5a3a 0%, #c88050 100%); }
.theme-preview[data-theme="64"] { background: linear-gradient(135deg, #5a4a3a 0%, #b8704a 100%); }

.theme-name {
    font-size: 14px;
    color: var(--text-color);
    margin-top: 8px;
    font-weight: 500;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}