/* 易经64卦主题配色系统 - 主题45-56 + 虾仁动画 */

/* ========== 主题45：萃卦·聚合 (泽地混合) ========== */
body[data-theme="45"] {
    --bg-gradient: linear-gradient(135deg, #3a5a6a 0%, #6a8a9a 100%);
    --text-color: #ffffff;
    --primary-color: #c0d0b8c8;
    --secondary-color: #5890b0;
    --button-bg: linear-gradient(135deg, #78a8c8 0%, #5890b0 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(120, 168, 200, 0.3);
    --border-color: rgba(88, 144, 176, 0.65);
    --cyan: #bce0f0;
    --gold: #acd4e8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body[data-theme="45"]::before {
    content: "🦐";
    position: fixed;
    top: 42%;
    left: 22%;
    font-size: 66px;
    opacity: 0.27;
    z-index: 1;
    pointer-events: none;
    animation: shrimp45 8s ease-in-out infinite;
    filter: hue-rotate(75deg);
}

/* ========== 主题46：升卦·上升 (地风混合) ========== */
body[data-theme="46"] {
    --bg-gradient: linear-gradient(135deg, #4a6a3a 0%, #7a9a5a 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b870;
    --secondary-color: #c8f0b050;
    --button-bg: linear-gradient(135deg, #90b070 0%, #709050 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(144, 176, 112, 0.3);
    --border-color: rgba(112, 144, 80, 0.65);
    --cyan: #ffffd8c0;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="46"]::before {
    content: "🦐";
    position: fixed;
    bottom: 38%;
    right: 28%;
    font-size: 58px;
    opacity: 0.26;
    z-index: 1;
    pointer-events: none;
    animation: shrimp46 10s ease-in-out infinite;
}

/* ========== 主题47：困卦·困境 (泽水混合) ========== */
body[data-theme="47"] {
    --bg-gradient: linear-gradient(135deg, #3a5a6a 0%, #6a8a9a 100%);
    --text-color: #ffffff;
    --primary-color: #c0d0b8c8;
    --secondary-color: #5090a8;
    --button-bg: linear-gradient(135deg, #70a8c8 0%, #5090a8 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(112, 168, 200, 0.3);
    --border-color: rgba(80, 144, 168, 0.65);
    --cyan: #f8fff8;
    --gold: #a8cfe0;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body[data-theme="47"]::before {
    content: "🦐";
    position: fixed;
    top: 28%;
    left: 48%;
    font-size: 70px;
    opacity: 0.24;
    z-index: 1;
    pointer-events: none;
    animation: shrimp47 7s ease-in-out infinite;
    filter: hue-rotate(165deg);
}

/* ========== 主题48：井卦·井源 (水风混合) ========== */
body[data-theme="48"] {
    --bg-gradient: linear-gradient(135deg, #4a6a3a 0%, #7a9a6a 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b878;
    --secondary-color: #6a9a58;
    --button-bg: linear-gradient(135deg, #88b878 0%, #6a9a58 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(136, 184, 120, 0.3);
    --border-color: rgba(106, 154, 88, 0.65);
    --cyan: #caffea;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="48"]::before {
    content: "🦐";
    position: fixed;
    bottom: 25%;
    right: 45%;
    font-size: 62px;
    opacity: 0.28;
    z-index: 1;
    pointer-events: none;
    animation: shrimp48 9s ease-in-out infinite;
}

/* ========== 主题49：革卦·变革 (泽火混合) ========== */
body[data-theme="49"] {
    --bg-gradient: linear-gradient(135deg, #7a5a2a 0%, #c88040 100%);
    --text-color: #ffffff;
    --primary-color: #e0a070;
    --secondary-color: #c87850;
    --button-bg: linear-gradient(135deg, #e0a070 0%, #c87850 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(224, 160, 112, 0.3);
    --border-color: rgba(200, 120, 80, 0.65);
    --cyan: #f0dcc8;
    --gold: #e8d0bc;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.22);
}

body[data-theme="49"]::before {
    content: "🦐";
    position: fixed;
    top: 15%;
    left: 32%;
    font-size: 54px;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
    animation: shrimp49 11s ease-in-out infinite;
    filter: hue-rotate(255deg);
}

/* ========== 主题50：鼎卦·鼎新 (火风混合) ========== */
body[data-theme="50"] {
    --bg-gradient: linear-gradient(135deg, #6a4a2a 0%, #c87a3a 100%);
    --text-color: #ffffff;
    --primary-color: #e89860;
    --secondary-color: #d85840;
    --button-bg: linear-gradient(135deg, #e89860 0%, #d85840 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(232, 152, 96, 0.3);
    --border-color: rgba(216, 88, 64, 0.65);
    --cyan: #f8dcc8;
    --gold: #f0d0bc;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="50"]::before {
    content: "🦐";
    position: fixed;
    bottom: 48%;
    right: 15%;
    font-size: 68px;
    opacity: 0.26;
    z-index: 1;
    pointer-events: none;
    animation: shrimp50 6s ease-in-out infinite;
}

/* ========== 主题51：震卦·震动 (雷属性) ========== */
body[data-theme="51"] {
    --bg-gradient: linear-gradient(135deg, #4a3a5a 0%, #6a5a8a 100%);
    --text-color: #f0ecf8;
    --primary-color: #8a78b8;
    --secondary-color: #6a5a98;
    --button-bg: linear-gradient(135deg, #8a78b8 0%, #6a5a98 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(138, 120, 184, 0.3);
    --border-color: rgba(106, 90, 152, 0.65);
    --cyan: #d0c0e8;
    --gold: #c0b0d8;
    --input-text: #f0ecf8;
    --shadow-color: rgba(0, 0, 0, 0.26);
}

body[data-theme="51"]::before {
    content: "🦐";
    position: fixed;
    top: 52%;
    left: 55%;
    font-size: 74px;
    opacity: 0.23;
    z-index: 1;
    pointer-events: none;
    animation: shrimp51 12s ease-in-out infinite;
    filter: hue-rotate(345deg);
}

/* ========== 主题52：艮卦·止静 (山属性) ========== */
body[data-theme="52"] {
    --bg-gradient: linear-gradient(135deg, #5a5a4a 0%, #8a8a78 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b888;
    --secondary-color: #e0e0c868;
    --button-bg: linear-gradient(135deg, #a0a088 0%, #808068 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(160, 160, 136, 0.3);
    --border-color: rgba(128, 128, 104, 0.65);
    --cyan: #ffffd8;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.27);
}

body[data-theme="52"]::before {
    content: "🦐";
    position: fixed;
    bottom: 32%;
    right: 55%;
    font-size: 56px;
    opacity: 0.27;
    z-index: 1;
    pointer-events: none;
    animation: shrimp52 8s ease-in-out infinite;
}

/* ========== 主题53：渐卦·渐进 (风山混合) ========== */
body[data-theme="53"] {
    --bg-gradient: linear-gradient(135deg, #5a6a4a 0%, #8a9a78 100%);
    --text-color: #ffffff;
    --primary-color: #c8c8b880;
    --secondary-color: #c8f0b060;
    --button-bg: linear-gradient(135deg, #6fddaa 0%, #4adf86 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(202, 255, 234, 0.35);
    --border-color: rgba(120, 144, 96, 0.65);
    --cyan: #caffea;
    --gold: #fff8d8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="53"]::before {
    content: "🦐";
    position: fixed;
    top: 35%;
    left: 18%;
    font-size: 64px;
    opacity: 0.24;
    z-index: 1;
    pointer-events: none;
    animation: shrimp53 10s ease-in-out infinite;
    filter: hue-rotate(105deg);
}

/* ========== 主题54：归妹卦·归妹 (雷泽混合) ========== */
body[data-theme="54"] {
    --bg-gradient: linear-gradient(135deg, #8a5a3a 0%, #d89050 100%);
    --text-color: #ffffff;
    --primary-color: #e8a878;
    --secondary-color: #d87858;
    --button-bg: linear-gradient(135deg, #e8a878 0%, #d87858 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(232, 168, 120, 0.3);
    --border-color: rgba(216, 120, 88, 0.65);
    --cyan: #f8d8cc;
    --gold: #f0ccc0;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.23);
}

body[data-theme="54"]::before {
    content: "🦐";
    position: fixed;
    bottom: 18%;
    right: 32%;
    font-size: 60px;
    opacity: 0.28;
    z-index: 1;
    pointer-events: none;
    animation: shrimp54 7s ease-in-out infinite;
}

/* ========== 主题55：丰卦·丰盛 (雷火混合) ========== */
body[data-theme="55"] {
    --bg-gradient: linear-gradient(135deg, #5a4a2a 0%, #c8703a 100%);
    --text-color: #ffffff;
    --primary-color: #e8905a;
    --secondary-color: #d85840;
    --button-bg: linear-gradient(135deg, #e8905a 0%, #d85840 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(232, 144, 90, 0.3);
    --border-color: rgba(216, 88, 64, 0.65);
    --cyan: #ffe8d8;
    --gold: #ffd8c8;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.24);
}

body[data-theme="55"]::before {
    content: "🦐";
    position: fixed;
    top: 48%;
    left: 42%;
    font-size: 72px;
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
    animation: shrimp55 9s ease-in-out infinite;
    filter: hue-rotate(195deg);
}

/* ========== 主题56：旅卦·旅途 (火山混合) ========== */
body[data-theme="56"] {
    --bg-gradient: linear-gradient(135deg, #8a6a4a 0%, #c89060 100%);
    --text-color: #ffffff;
    --primary-color: #d89870;
    --secondary-color: #c86850;
    --button-bg: linear-gradient(135deg, #d89870 0%, #c86850 100%);
    --button-text: #001a0a;
    --card-bg: rgba(255, 255, 255, 0.18);
    --input-bg: rgba(216, 152, 112, 0.3);
    --border-color: rgba(200, 104, 80, 0.65);
    --cyan: #f0d4c8;
    --gold: #e8c8bc;
    --input-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body[data-theme="56"]::before {
    content: "🦐";
    position: fixed;
    bottom: 42%;
    right: 22%;
    font-size: 58px;
    opacity: 0.26;
    z-index: 1;
    pointer-events: none;
    animation: shrimp56 11s ease-in-out infinite;
}

/* ========== 虾仁动画定义 ========== */
@keyframes shrimp45 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(24px, -24px) rotate(18deg); }
    50% { transform: translate(0px, -42px) rotate(0deg); }
    75% { transform: translate(-24px, -24px) rotate(-18deg); }
}

@keyframes shrimp46 {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-38px) scaleY(0.96); }
}

@keyframes shrimp47 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(0, 0) rotate(180deg) scale(1.16); }
    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}

@keyframes shrimp48 {
    0%, 100% { transform: rotate(-9deg); }
    25% { transform: rotate(9deg) translateX(18px); }
    50% { transform: rotate(-9deg); }
    75% { transform: rotate(9deg) translateX(-18px); }
}

@keyframes shrimp49 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(40px, -22px) rotate(26deg); }
    66% { transform: translate(-26px, 26px) rotate(-26deg); }
}

@keyframes shrimp50 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-48px) rotate(-24deg); }
    60% { transform: translateY(0px) rotate(24deg); }
}

@keyframes shrimp51 {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(36px) rotate(18deg) scaleX(-1); }
}

@keyframes shrimp52 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-26px, -24px) rotate(-18deg); }
    50% { transform: translate(0px, -46px) rotate(12deg); }
    75% { transform: translate(26px, -24px) rotate(-12deg); }
}

@keyframes shrimp53 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-32px) scale(1.16); }
}

@keyframes shrimp54 {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(22deg) translateX(26px); }
    50% { transform: rotate(0deg) translateX(0); }
    75% { transform: rotate(-22deg) translateX(-26px); }
}

@keyframes shrimp55 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(26px, 28px) rotate(-26deg) scale(0.96); }
    66% { transform: translate(-26px, -28px) rotate(26deg) scale(1.16); }
}

@keyframes shrimp56 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-34px) rotate(16deg); }
}