/* Ethereal Pastel Floral Theme for Zhongsheng */
.zhongsheng-root {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: "Playfair Display", "PingFang SC", "SF Pro Display", "Nunito", serif;
    color: #5c4b51; /* Soft brownish purple for elegant text */
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    /* Dreamy pastel background */
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(253, 235, 240, 0.8), transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(230, 240, 255, 0.8), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(240, 230, 255, 0.8), transparent 50%),
        linear-gradient(to bottom right, #ffffff, #fdf8f5);
}

/* Background floating particles */
.zhongsheng-root::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="rgba(200,180,200,0.3)"/></svg>');
    background-size: 40px 40px;
    z-index: 0;
}

.zs-layer-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.zs-screen {
    position: absolute;
    inset: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.zs-hidden {
    display: none !important;
}

/* Elegant Cards */
.zs-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 32px rgba(180, 160, 180, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Delicate border accents for cards */
.zs-card::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(220, 200, 210, 0.3);
    border-radius: 16px;
    pointer-events: none;
}

/* Soft Pill Buttons */
.zs-btn {
    border: 0;
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.9);
    color: #8c7a80;
    border: 1px solid rgba(230, 210, 220, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.zs-btn:active {
    transform: scale(0.96);
    background: #fdfafb;
}

.zs-btn-primary {
    background: linear-gradient(135deg, #fce3e8 0%, #f0e6f5 100%);
    color: #6b5b63;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(230, 200, 220, 0.4);
}

/* Titles and Headers */
.zs-title {
    font-size: 26px;
    letter-spacing: 4px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
    color: #6c5a61;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 2;
}

.zs-sub {
    text-align: center;
    color: #a09398;
    font-size: 13px;
    margin-bottom: 20px;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

.zs-chip {
    border-radius: 12px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(230, 220, 230, 0.5);
    font-size: 13px;
    font-weight: 600;
    color: #7d6b71;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* Lists */
.zs-preset-list,
.zs-group-list,
.zs-member-list,
.zs-log-list,
.zs-archive-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 12px 4px;
    position: relative;
    z-index: 2;
}

/* Custom Scrollbar for delicate look */
.zs-preset-list::-webkit-scrollbar,
.zs-group-list::-webkit-scrollbar,
.zs-member-list::-webkit-scrollbar,
.zs-log-list::-webkit-scrollbar,
.zs-archive-list::-webkit-scrollbar,
.zs-scroll::-webkit-scrollbar {
    width: 4px;
}
.zs-preset-list::-webkit-scrollbar-thumb,
.zs-group-list::-webkit-scrollbar-thumb,
.zs-member-list::-webkit-scrollbar-thumb,
.zs-log-list::-webkit-scrollbar-thumb,
.zs-archive-list::-webkit-scrollbar-thumb,
.zs-scroll::-webkit-scrollbar-thumb {
    background: rgba(220, 200, 210, 0.5);
    border-radius: 4px;
}

.zs-item {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    position: relative;
    z-index: 1;
}

.zs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Home Grid */
.zs-home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

.zs-home-card {
    min-height: 120px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5));
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 4px 15px rgba(200, 180, 190, 0.1);
}

.zs-home-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #6b5b63;
    font-weight: 600;
}

.zs-home-card p {
    margin: 0;
    font-size: 13px;
    color: #9a8b91;
    line-height: 1.6;
}

/* Decorative floral abstract in cards */
.zs-home-card::after {
    content: "❀";
    position: absolute;
    right: 10px;
    bottom: -10px;
    font-size: 80px;
    color: rgba(240, 220, 230, 0.4);
    pointer-events: none;
}

.zs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    flex-wrap: nowrap;
}

.zs-header .zs-chip {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zs-header .zs-actions {
    flex-shrink: 0;
}

/* Stage Layout */
.zs-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 2;
}

.zs-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.zs-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px 16px 4px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Story Blocks - Elegance and Readability */
.zs-story-block {
    padding: 16px 20px;
    border-radius: 16px 16px 16px 4px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 15px rgba(200, 180, 190, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 1);
    white-space: pre-wrap;
    line-height: 1.8;
    font-size: 14px;
    color: #4a3f44;
    animation: zsStoryIn 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    position: relative;
}

.zs-story-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #f0c8d8, #d8d0f0);
    border-radius: 4px 0 0 4px;
}

.zs-user-block {
    background: rgba(245, 235, 245, 0.95);
    margin-left: 20%;
    border-radius: 16px 16px 4px 16px;
}

.zs-user-block::before {
    left: auto;
    right: 0;
    background: linear-gradient(to bottom, #d8c8f0, #f0c8d8);
    border-radius: 0 4px 4px 0;
}

.zs-story-block .zs-muted {
    font-size: 11px;
    color: #b0a0a6;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Input Area */
.zs-console {
    padding: 16px;
    background: rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    flex-shrink: 0;
}

.zs-console input#zs-user-input,
.zs-console textarea,
.zs-select,
.zs-item input,
.zs-item textarea {
    width: 100%;
    border: 1px solid rgba(230, 215, 225, 0.8);
    border-radius: 20px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    color: #5c4b51;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.02);
    box-sizing: border-box;
    font-family: inherit;
}

.zs-console input#zs-user-input:focus,
.zs-console textarea:focus,
.zs-item input:focus,
.zs-item textarea:focus {
    outline: none;
    border-color: #e6c8d8;
    box-shadow: 0 0 0 3px rgba(230, 200, 216, 0.4);
}

.zs-console input#zs-user-input {
    height: 44px;
}

.zs-item input,
.zs-item textarea {
    margin-top: 6px;
}

/* Envelope/Archive styling */
.zs-envelope {
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(240, 220, 230, 0.8);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 240, 245, 0.9));
    box-shadow: 0 8px 24px rgba(200, 180, 190, 0.12);
    font-size: 13px;
    color: #5c4b51;
}

.zs-muted {
    font-size: 12px;
    color: #a09398;
}

.zs-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 2;
}

.zs-actions-nowrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
}
.zs-actions-nowrap::-webkit-scrollbar {
    display: none;
}

/* Offline Scene specific styling */
.zs-offline-scene .zs-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 40px rgba(180, 160, 170, 0.15);
}

/* Background breathing animation instead of overlay */
.zs-offline-scene::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 220, 230, 0.5), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(220, 230, 255, 0.5), transparent 40%);
    animation: zsBreathe 8s ease-in-out infinite alternate;
}

/* Subtle header decoration */
.zs-offline-scene .zs-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(180deg, rgba(255,255,255,0.7), transparent);
    pointer-events: none;
    border-radius: 20px 20px 0 0;
    z-index: 1;
}

.zs-offline-actions .zs-btn {
    flex: 1 0 auto;
    padding: 10px 12px;
    font-size: 12px;
    white-space: nowrap;
}

/* Splash Screen */
.zs-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(135deg, #fffafa 0%, #fdf5f7 100%);
}

.zs-splash-logo {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: 12px;
    color: #8a737d;
    text-shadow: 0 4px 20px rgba(220, 190, 200, 0.6);
    animation: zsAppear 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.zs-splash-sub {
    margin-top: 16px;
    color: #b8a8af;
    font-size: 12px;
    letter-spacing: 4px;
    animation: zsAppear 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.zs-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.5;
    animation: zsFloat 6s ease-in-out infinite alternate;
}

.zs-glow.g1 { background: #fae6ec; top: 15%; left: 10%; }
.zs-glow.g2 { background: #e6f0fa; bottom: 15%; right: 10%; animation-delay: -3s; }

/* Animations */
@keyframes zsFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(10px, -20px) scale(1.1); }
}

@keyframes zsAppear {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zsBreathe {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.05); opacity: 1; }
}

@keyframes zsStoryIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Checkbox styling */
input[type="checkbox"].zs-member-check {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #e0ccd6;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin: 0;
}

input[type="checkbox"].zs-member-check:checked {
    background: #e6c8d8;
    border-color: #e6c8d8;
}

input[type="checkbox"].zs-member-check:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Focus and hover enhancements for better UX */
.zs-item:hover {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
}

/* --- 穿梭万象特有样式 --- */
.zs-character-avatar {
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.6;
}
.zs-character-avatar.active {
    opacity: 1;
    transform: scale(1.1);
}

/* 时空穿梭动画容器 */
#zs-shuttle-anim-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;
}

#zs-shuttle-anim-container.active {
    opacity: 1;
    pointer-events: auto;
}

/* 穿梭星光效果 */
.zs-shuttle-stars {
    position: absolute;
    width: 200%;
    height: 200%;
    background: transparent;
    transform-origin: center;
    animation: zsWarpSpeed 3s ease-in-out forwards;
}

.zs-shuttle-stars::before, .zs-shuttle-stars::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: zsStarMove 1s linear infinite;
    opacity: 0;
}
.zs-shuttle-stars::after {
    background-size: 300px 300px;
    animation-delay: 0.5s;
}

.zs-shuttle-text {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 24px;
    letter-spacing: 10px;
    text-shadow: 0 0 20px rgba(255,255,255,0.8);
    opacity: 0;
    transform: scale(0.8);
    animation: zsShuttleTextAnim 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes zsWarpSpeed {
    0% { transform: scale(1) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    80% { transform: scale(3) rotate(45deg); opacity: 1; filter: blur(2px); }
    100% { transform: scale(5) rotate(90deg); opacity: 0; filter: blur(5px); }
}

@keyframes zsStarMove {
    0% { transform: translateZ(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateZ(200px) scale(1.5); opacity: 0; }
}

@keyframes zsShuttleTextAnim {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1); }
    80% { opacity: 1; transform: scale(1.2); filter: blur(0px); }
    100% { opacity: 0; transform: scale(2); filter: blur(10px); }
}

/* ========================================================
   穿梭万象 - 8种主题美化风格
   ======================================================== */
.zs-shuttle-chat-screen {
    transition: all 0.5s ease;
}

/* 1. 默认风 (Default) - 复用已有样式，无特殊覆盖 */

/* 通用的输入区域悬浮圆角优化 (除特定硬朗风格外) */
.zs-theme-console {
    border-top: none;
    background: transparent;
    padding: 0 10px 10px 10px;
}
.zs-theme-console input#zs-shuttle-user-input {
    border-radius: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(200,200,200,0.5);
    background: rgba(255,255,255,0.9);
}

/* 2. 古风 (Gufeng) - 极致屏风花窗布景 */
.zs-theme-gufeng {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    /* 宣纸底色 + 中式木质粗边框 */
    background-color: #f7f4ed;
    background-image: 
        /* 左右主边框 */
        linear-gradient(90deg, #6c4b3a 8px, transparent 8px, transparent calc(100% - 8px), #6c4b3a calc(100% - 8px)),
        /* 上下主边框 */
        linear-gradient(180deg, #6c4b3a 8px, transparent 8px, transparent calc(100% - 8px), #6c4b3a calc(100% - 8px)),
        /* 细内框 */
        linear-gradient(90deg, transparent 14px, #a67c52 14px, #a67c52 16px, transparent 16px, transparent calc(100% - 16px), #a67c52 calc(100% - 16px), #a67c52 calc(100% - 14px), transparent calc(100% - 14px)),
        linear-gradient(180deg, transparent 14px, #a67c52 14px, #a67c52 16px, transparent 16px, transparent calc(100% - 16px), #a67c52 calc(100% - 16px), #a67c52 calc(100% - 14px), transparent calc(100% - 14px));
    font-family: "STKaiti", "Kaiti SC", "KaiTi", "PMingLiU", serif;
    position: relative;
    color: #3b2e2a;
    padding: 16px;
    z-index: 1;
}

/* 构建右上角的月洞窗、花枝与窗棂，通过精致的 SVG 叠加 */
.zs-theme-gufeng::before {
    content: '';
    position: absolute;
    top: 16px; left: 16px; right: 16px; bottom: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse"><path d="M 30 0 L 0 0 0 30" fill="none" stroke="%23c2a382" stroke-width="1"/></pattern></defs><g opacity="0.6"><circle cx="85%25" cy="20%25" r="120" fill="%23fff" stroke="%238c6b4f" stroke-width="3"/><rect x="70%25" y="0" width="30%25" height="40%25" fill="url(%23grid)" clip-path="url(%23cut)"/></g><clipPath id="cut"><circle cx="85%25" cy="20%25" r="118"/></clipPath><path d="M 60%25 0 Q 75%25 150 90%25 100 T 100%25 180" stroke="%234a3629" stroke-width="4" fill="none" stroke-linecap="round"/><circle cx="75%25" cy="140" r="5" fill="%23d87082"/><circle cx="78%25" cy="155" r="4" fill="%23d87082"/><circle cx="85%25" cy="110" r="6" fill="%23d87082"/><circle cx="89%25" cy="120" r="4" fill="%23d87082"/><circle cx="95%25" cy="160" r="6" fill="%23d87082"/></svg>');
    background-size: 100% 100%;
    pointer-events: none;
    z-index: -1;
}

/* 卡片完全透明并加入毛玻璃感，不遮挡唯美的背景 */
.zs-theme-gufeng .zs-theme-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(3px);
    border: none;
    box-shadow: none;
    z-index: 1; 
    position: relative;
    height: 100%;
}

.zs-theme-gufeng .zs-theme-header {
    border-bottom: 1px solid rgba(138, 90, 68, 0.3);
    padding-bottom: 10px;
}

.zs-theme-gufeng .zs-theme-chip {
    background: transparent;
    border: none;
    color: #6c4b3a;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: bold;
    box-shadow: none;
}

/* 对话气泡：图里的效果是淡雅且古典的矩形块，带有细边框和一点纸纹感 */
.zs-theme-gufeng .zs-story-block {
    background: rgba(250, 245, 235, 0.9);
    border: 1px solid #d2b48c;
    border-radius: 4px; /* 屏风不需要大圆角 */
    box-shadow: 2px 2px 8px rgba(108, 75, 58, 0.1);
    padding: 12px 18px;
    line-height: 1.8;
    font-size: 15px;
    color: #4a3c31;
    margin-bottom: 8px;
}
.zs-theme-gufeng .zs-story-block::before { display: none; }
.zs-theme-gufeng .zs-user-block {
    background: rgba(235, 240, 235, 0.9); /* 用户带有淡淡的青玉色 */
    border-color: #a3b19b;
}

/* 古风底部输入区悬浮化 */
.zs-theme-gufeng .zs-theme-console {
    background: rgba(247, 244, 237, 0.85);
    border-top: 1px solid rgba(138, 90, 68, 0.3);
}
.zs-theme-gufeng .zs-theme-console input#zs-shuttle-user-input {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #c2a382;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    color: #4a3c31;
}
.zs-theme-gufeng .zs-theme-btn {
    border-radius: 4px;
    border: 1px solid #8a5a44;
    color: #8a5a44;
    background: transparent;
    font-family: inherit;
}
.zs-theme-gufeng .zs-theme-btn-primary {
    background: #8a5a44;
    color: #fff;
}


/* 3. 梦幻风 (Dream) */
.zs-theme-dream {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    position: relative; height: 100%;
}
.zs-theme-dream::before {
    content: "✨"; position: absolute; font-size: 80px; color: rgba(255,255,255,0.4); 
    top: 5%; right: 10%; z-index: 0; pointer-events: none;
}
.zs-theme-dream::after {
    content: "🌙"; position: absolute; font-size: 120px; color: rgba(255,255,255,0.2); 
    bottom: 10%; left: 5%; z-index: 0; pointer-events: none;
}
.zs-theme-dream .zs-theme-card {
    background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 30px; z-index: 1; height: 100%;
}
.zs-theme-dream .zs-story-block {
    background: rgba(255, 255, 255, 0.7); border-radius: 20px; box-shadow: 0 8px 32px rgba(142, 197, 252, 0.2);
}
.zs-theme-dream .zs-story-block::before { display: none; }
.zs-theme-dream .zs-theme-btn-primary { background: linear-gradient(90deg, #e0c3fc, #8ec5fc); color: #fff; border: none; }


/* 4. 科技风 (Tech) */
.zs-theme-tech {
    background: #0a0f18; font-family: monospace; color: #8ab4f8;
}
.zs-theme-tech .zs-theme-card {
    background: rgba(10, 15, 24, 0.8);
    border: 1px solid #1a365d;
    box-shadow: 0 0 20px rgba(26, 115, 232, 0.2);
    border-radius: 0;
}
.zs-theme-tech .zs-theme-chip {
    background: #1a365d; border: 1px solid #4285f4; color: #8ab4f8; border-radius: 0;
}
.zs-theme-tech .zs-story-block {
    background: rgba(26, 115, 232, 0.05); border: 1px solid #1a365d; border-radius: 0; color: #e8eaed;
}
.zs-theme-tech .zs-story-block::before { background: #4285f4; }
.zs-theme-tech .zs-user-block { background: rgba(52, 168, 83, 0.05); border: 1px solid #134226; }
.zs-theme-tech .zs-user-block::before { background: #34a853; }
.zs-theme-tech .zs-theme-console {
    background: #0a0f18; border-top: 1px solid #1a365d; border-radius: 0;
}
.zs-theme-tech input, .zs-theme-tech textarea {
    background: #111827; border: 1px solid #1a365d; color: #8ab4f8; border-radius: 0;
}
.zs-theme-tech .zs-theme-btn {
    background: transparent; border: 1px solid #4285f4; color: #8ab4f8; border-radius: 0; text-transform: uppercase;
}
.zs-theme-tech .zs-theme-btn-primary {
    background: rgba(66, 133, 244, 0.2); box-shadow: 0 0 10px rgba(66, 133, 244, 0.5);
}

/* 5. 可爱风 (Cute) */
.zs-theme-cute {
    background: #fff0f5; font-family: "Comic Sans MS", "Popon", "PingFang SC", sans-serif;
}
.zs-theme-cute .zs-theme-card {
    background: #fff; border: 4px solid #ffb6c1; border-radius: 40px;
    box-shadow: 0 10px 0 #ffe4e1;
}
.zs-theme-cute .zs-theme-chip {
    background: #ffb6c1; color: #fff; border: none; font-size: 16px; font-weight: bold;
}
.zs-theme-cute .zs-story-block {
    background: #fff; border: 3px solid #ffb6c1; border-radius: 24px; color: #555;
    box-shadow: 4px 4px 0 #ffe4e1;
}
.zs-theme-cute .zs-story-block::before { display: none; }
.zs-theme-cute .zs-user-block { border-color: #87ceeb; box-shadow: 4px 4px 0 #e0f7fa; }
.zs-theme-cute .zs-theme-btn {
    border: 2px solid #ffb6c1; background: #fff; color: #ff69b4; font-weight: bold; border-radius: 20px;
}
.zs-theme-cute .zs-theme-btn-primary {
    background: #ffb6c1; color: #fff; box-shadow: 0 4px 0 #ff69b4;
}

/* 6. 信件风 (Letter) */
.zs-theme-letter {
    background: #e8e2d2; /* 羊皮纸底色 */
}
.zs-theme-letter .zs-theme-card {
    background: #fdfaf6; border: 1px solid #dcd3b6; border-radius: 0;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    background-image: repeating-linear-gradient(transparent, transparent 31px, #e8e2d2 31px, #e8e2d2 32px);
    background-attachment: local;
    background-position: 0 10px;
}
.zs-theme-letter .zs-theme-chip {
    background: transparent; border: none; font-family: "STKaiti", serif; font-size: 18px; color: #5c4b51;
}
.zs-theme-letter .zs-story-block {
    background: transparent; border: none; box-shadow: none; font-family: "STKaiti", serif; font-size: 16px;
    padding: 0 20px; line-height: 32px;
}
.zs-theme-letter .zs-story-block::before { display: none; }
.zs-theme-letter .zs-user-block { margin-left: 0; color: #2c3e50; }
.zs-theme-letter .zs-ai-block { color: #5c4b51; }
.zs-theme-letter .zs-theme-console {
    background: #fdfaf6; border-top: 2px dashed #dcd3b6; border-radius: 0;
}
.zs-theme-letter .zs-theme-btn {
    background: #f4eee1; border: 1px solid #dcd3b6; border-radius: 4px; font-family: "STKaiti", serif;
}
.zs-theme-letter .zs-theme-btn-primary { background: #8a3a3a; color: #fff; border: none; }

/* 7. 赛博朋克 (Cyberpunk) */
.zs-theme-cyber {
    background: #0f0f1b; font-family: "Impact", monospace;
}
.zs-theme-cyber .zs-theme-card {
    background: #121212; border: 2px solid #ff0055; border-radius: 0;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
}
.zs-theme-cyber .zs-theme-chip {
    background: #ff0055; color: #fff; text-transform: uppercase; letter-spacing: 2px; border: none; border-radius: 0;
}
.zs-theme-cyber .zs-story-block {
    background: #1a1a24; border-left: 4px solid #00f0ff; color: #ddd; border-radius: 0; box-shadow: none;
}
.zs-theme-cyber .zs-story-block::before { display: none; }
.zs-theme-cyber .zs-user-block { border-left: none; border-right: 4px solid #ff0055; }
.zs-theme-cyber .zs-theme-console { background: #121212; border-top: 1px solid #333; border-radius: 0; }
.zs-theme-cyber input, .zs-theme-cyber textarea {
    background: #222; color: #00f0ff; border: 1px solid #555; border-radius: 0;
}
.zs-theme-cyber .zs-theme-btn {
    background: #222; border: 1px solid #00f0ff; color: #00f0ff; border-radius: 0; text-transform: uppercase;
}
.zs-theme-cyber .zs-theme-btn-primary { background: #ff0055; border-color: #ff0055; color: #fff; }

/* 8. 蒸汽朋克 (Steampunk) */
.zs-theme-steam {
    background: #3e3328; font-family: "Georgia", serif;
}
.zs-theme-steam .zs-theme-card {
    background: #5c4a3d; border: 4px solid #b87333; border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.5);
}
.zs-theme-steam .zs-theme-chip {
    background: #b87333; color: #2c221a; border: 2px solid #d4af37; border-radius: 4px; font-weight: bold;
}
.zs-theme-steam .zs-story-block {
    background: #d1bfae; border: 2px solid #8c6239; border-radius: 4px; color: #2c221a; box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.zs-theme-steam .zs-story-block::before { display: none; }
.zs-theme-steam .zs-theme-console {
    background: #4a3a2f; border-top: 4px solid #b87333; border-radius: 0 0 4px 4px;
}
.zs-theme-steam input, .zs-theme-steam textarea {
    background: #d1bfae; color: #2c221a; border: 2px inset #8c6239; border-radius: 0;
}
.zs-theme-steam .zs-theme-btn {
    background: linear-gradient(180deg, #d4af37, #b87333); border: 1px solid #8c6239; color: #2c221a; font-weight: bold; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.zs-theme-steam .zs-theme-btn:active { background: #8c6239; color: #d1bfae; }