/* app.css */

/* ---------------- 统一主题角色颜色库系统 ---------------- */
:root {
    /* Anon² 系列 */
    --rinon: #661111; --rinon-rgb: 102, 17, 17;
    --soyo: #ddbb66; --soyo-rgb: 221, 187, 102;
    --tomori: #6688dd; --tomori-rgb: 102, 136, 221;
    --rinki: #bbaaee; --rinki-rgb: 187, 170, 238;

    /* 空预留 */
    --none: #999999; --none-rgb: 153, 153, 153;

    /* 全局动态指针 */
    --theme-color: var(--rinon);
    --theme-color-rgb: var(--rinon-rgb);
}

/* ---------------- 光暗主题变量映射 (扫光参数精调) ---------------- */
:root[data-theme="light"] {
    --bg-page: #f2f4f8; --bg-page-rgb: 242, 244, 248;
    --bg-gradient-center: #ffffff; --bg-gradient-edge: #e6e9f0;
    --text-main: #2a2a34; --text-sub: #6b6b7f;
    --text-cn-base: #1a1a24; 
    
    --sweep-center: var(--theme-color);
    --sweep-edge: rgba(var(--theme-color-rgb), 0.6);
    
    --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.6);
    --shadow-main: 0 25px 50px rgba(0, 0, 0, 0.08); --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --tag-bg: rgba(255, 255, 255, 0.8); --tag-border: rgba(0, 0, 0, 0.05);
    --tag-label-bg: rgba(var(--theme-color-rgb), 0.15);
    --thumb-bg: rgba(255, 255, 255, 0.8);
    --series-bg: rgba(255, 255, 255, 0.4); --series-hover: rgba(0, 0, 0, 0.03);
    --render-gradient: linear-gradient(145deg, rgba(var(--theme-color-rgb), 0.15) 0%, rgba(255,255,255,0.7) 100%);
    --glow-opacity: 0.2;
}

:root[data-theme="dark"] {
    --bg-page: #0a0a0c; --bg-page-rgb: 10, 10, 12;
    --bg-gradient-center: #1a1a24; --bg-gradient-edge: #0a0a0c;
    --text-main: #f0f0f5; --text-sub: #a0a0b0;
    --text-cn-base: #c0c0d0;
    
    --sweep-center: #ffffff;
    --sweep-edge: rgba(var(--theme-color-rgb), 0.8);
    
    --glass-bg: rgba(20, 20, 25, 0.6); --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-main: 0 30px 60px rgba(0, 0, 0, 0.6); --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tag-bg: rgba(255, 255, 255, 0.05); --tag-border: rgba(255, 255, 255, 0.1);
    --tag-label-bg: rgba(0, 0, 0, 0.4);
    --thumb-bg: rgba(255, 255, 255, 0.05);
    --series-bg: rgba(0, 0, 0, 0.25); --series-hover: rgba(255, 255, 255, 0.03);
    --render-gradient: linear-gradient(145deg, rgba(var(--theme-color-rgb), 0.15) 0%, rgba(255,255,255,0.02) 100%);
    --glow-opacity: 0.12;
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-page); color: var(--text-main);
    overflow-x: hidden; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.8s ease, color 0.8s ease;
}

/* ---------------- 基础环境光效与容器 ---------------- */
.global-bg { position: fixed; inset: 0; background: radial-gradient(circle at 50% 50%, var(--bg-gradient-center) 0%, var(--bg-gradient-edge) 100%); z-index: -3; transition: background 0.8s ease; }
.ambient-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.glow-layer {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70vw; height: 70vh; border-radius: 50%;
    background-color: var(--theme-color); filter: blur(160px);
    opacity: var(--glow-opacity); z-index: -2;
    transition: background-color 0.8s ease, opacity 0.8s ease;
}
.fx-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }

/* ---------------- 左上角导航栏 (Home 返回按钮) ---------------- */
.top-left-actions {
    position: fixed; top: 30px; left: 30px;
    z-index: 100; display: flex; align-items: center;
}

.home-btn {
    position: relative; flex-shrink: 0;
    height: 50px; padding: 0 20px 0 16px; border-radius: 25px; 
    border: 1px solid var(--glass-border);
    background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    color: var(--text-main); text-decoration: none;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 1px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
}
.home-btn:hover {
    border-color: var(--theme-color);
    box-shadow: 0 0 20px rgba(var(--theme-color-rgb), 0.3);
    color: var(--theme-color);
}
.home-btn svg {
    width: 18px; height: 18px; 
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.home-btn:hover svg {
    transform: translateX(-4px);
}

/* ---------------- 右上角操作栏 (含保存与主题切换) ---------------- */
.top-actions {
    position: fixed; top: 30px; right: 30px;
    display: flex; align-items: center; gap: 15px; z-index: 100;
}

.save-card-btn {
    position: relative; flex-shrink: 0;
    height: 50px; padding: 0 20px; border-radius: 25px; border: none;
    background: var(--theme-color); color: #fff;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 1px;
    box-shadow: 0 10px 25px rgba(var(--theme-color-rgb), 0.3);
    transition: background-color 0.5s ease, box-shadow 0.5s ease, opacity 0.3s ease, filter 0.3s ease;
}
.save-card-btn:hover { box-shadow: 0 12px 30px rgba(var(--theme-color-rgb), 0.5); }
.save-card-btn svg { width: 18px; height: 18px; }

/* 禁用状态拦截 */
.save-card-btn.disabled {
    opacity: 0.45; filter: grayscale(1);
    cursor: not-allowed; pointer-events: none;
    box-shadow: none !important;
}

.theme-toggle-btn {
    position: relative; flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 50%; border: none; background: transparent; color: var(--theme-color);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.theme-btn-bg {
    position: absolute; inset: 0; border-radius: 50%; background: var(--glass-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: border-color 0.5s ease;
}
.theme-toggle-btn:hover .theme-btn-bg { border-color: var(--theme-color); box-shadow: 0 0 20px rgba(var(--theme-color-rgb), 0.3); }

.theme-toggle-btn svg { 
    position: absolute; z-index: 2; 
    width: 24px; height: 24px; transform-origin: center;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
html[data-theme="light"] .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
html[data-theme="light"] .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
html[data-theme="dark"] .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* ---------------- 主容器结构 ---------------- */
.app-container { width: 100%; max-width: 1280px; padding: 20px; height: 100vh; display: flex; align-items: center; justify-content: center; }
.main-card { width: 100%; height: 85vh; min-height: 650px; border-radius: 24px; position: relative; display: flex; flex-direction: column; }
.card-backdrop {
    position: absolute; inset: 0; background: var(--glass-bg);
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border); border-radius: 24px;
    box-shadow: var(--shadow-main), var(--shadow-inner); overflow: hidden; z-index: 0;
    transition: background 0.8s ease, box-shadow 0.8s ease, border-color 0.8s ease;
}
.card-backdrop::before {
    content: ''; position: absolute; inset: 0; border-radius: 24px; border: 1.5px solid var(--theme-color);
    opacity: 0.3; pointer-events: none; transition: border-color 0.8s ease;
}
.card-layout { display: flex; flex: 1; min-height: 0; padding: 30px 40px; gap: 50px; position: relative; z-index: 1; }

/* ---------------- 左侧立绘区域：规范化溢出与尺寸 ---------------- */
.card-left { flex: 0 0 38%; position: relative; border-radius: 16px; }
.render-panel { position: absolute; inset: 0; border-radius: 16px; }
.render-bg {
    position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
    background: var(--render-gradient); transition: background 0.8s ease;
}
.render-light {
    position: absolute; bottom: -10%; left: 50%; transform: translateX(-50%);
    width: 120%; height: 60%; background: radial-gradient(ellipse at bottom, var(--theme-color) 0%, transparent 70%);
    filter: blur(45px); opacity: 0.5; pointer-events: none; transition: background 0.8s ease;
}

.render-character-wrap {
    position: absolute; inset: -40px -40px 0 -40px;
    pointer-events: none; z-index: 3; display: flex; align-items: flex-end; justify-content: center;
}
.art-container { position: absolute; inset: 0; display: grid; }
.art-group { grid-area: 1 / 1; position: relative; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; }
.art-group.active { opacity: 1; }
.character-art {
    position: absolute; bottom: 0; left: 50%;
    height: 92%; width: auto; max-width: none; object-fit: contain; object-position: bottom center;
    opacity: 0; filter: blur(15px); transform: translateX(-50%) scale(0.95) translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
    -webkit-filter: drop-shadow(0 -5px 20px rgba(var(--theme-color-rgb), 0.25));
            filter: drop-shadow(0 -5px 20px rgba(var(--theme-color-rgb), 0.25));
}
.character-art.active {
    opacity: 1; filter: blur(0); transform: translateX(-50%) scale(1) translateY(0);
    animation: characterFloat 6s ease-in-out infinite 0.6s;
}
@keyframes characterFloat {
    0%, 100% { transform: translateX(-50%) scale(1) translateY(0px); }
    50% { transform: translateX(-50%) scale(1) translateY(-10px); }
}
.render-front-mask {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 25%;
    background: linear-gradient(to top, rgba(var(--bg-page-rgb), 0.9), transparent);
    border-radius: 0 0 16px 16px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    -webkit-mask-image: linear-gradient(to top, black 30%, transparent 100%);
    pointer-events: none; z-index: 4;
}

/* ---------------- 右侧信息区域 ---------------- */
.card-right { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 5; }
.info-panel { display: grid; flex: 1; min-height: 0; }
.info-group { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; display: flex; flex-direction: column; height: 100%; }
.info-group.active { opacity: 1; pointer-events: auto; z-index: 2; }
.character-info { display: none; flex-direction: column; height: 100%; opacity: 0; transform: translateY(20px); }
.character-info.active { display: flex; opacity: 1; transform: translateY(0); animation: fadeUpInfo 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

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

.info-header { flex-shrink: 0; margin-bottom: 20px; }
.name-en { font-size: 1.1rem; font-weight: 300; letter-spacing: 2px; color: var(--theme-color); text-transform: uppercase; margin-bottom: 5px; transition: color 0.8s ease; }

.name-cn-wrap {
    display: inline-block; position: relative;
    filter: drop-shadow(0 0 10px rgba(var(--theme-color-rgb), 0.15));
}

.name-cn {
    font-size: 3.2rem; font-weight: 800; letter-spacing: 1px;
    background: linear-gradient(
        120deg, 
        var(--text-cn-base) 0%, 
        var(--text-cn-base) 45%, 
        var(--sweep-edge) 48%, 
        var(--sweep-center) 50%, 
        var(--sweep-edge) 52%, 
        var(--text-cn-base) 55%, 
        var(--text-cn-base) 100%
    );
    background-size: 300% auto;
    background-position: 100% 50%; 
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bio { flex: 1; overflow-y: auto; font-size: 1.05rem; line-height: 1.8; color: var(--text-sub); padding-right: 15px; margin-bottom: 20px; transition: color 0.8s ease; }
.bio::-webkit-scrollbar { width: 4px; }
.bio::-webkit-scrollbar-track { background: transparent; }
.bio::-webkit-scrollbar-thumb { background: rgba(var(--theme-color-rgb), 0.4); border-radius: 4px; }

.tags { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.tag-item {
    background: var(--tag-bg); border: 1px solid var(--tag-border); padding: 6px 14px; border-radius: 20px; font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px; cursor: pointer; position: relative; overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tag-item::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--theme-color); transition: width 0.3s ease; }
.tag-item:hover { border-color: var(--theme-color); box-shadow: 0 5px 15px rgba(var(--theme-color-rgb), 0.15); transform: translateY(-3px); background: rgba(var(--theme-color-rgb), 0.08); }
.tag-item:hover::before { width: 60%; }
.tag-label { font-size: 0.75rem; color: var(--theme-color); background: var(--tag-label-bg); padding: 2px 8px; border-radius: 10px; text-transform: uppercase; transition: color 0.8s ease, background 0.8s ease; }

/* ---- 角色切换器 ---- */
.character-switcher { flex-shrink: 0; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--glass-border); transition: border-color 0.8s ease; }
.switcher-title { font-size: 0.8rem; color: var(--text-sub); letter-spacing: 2px; margin-bottom: 12px; }
.thumb-group { display: none; flex-wrap: wrap; gap: 15px; }
.thumb-group.active { display: flex; }

.thumb-item {
    width: 65px; height: 65px; border-radius: 12px; cursor: pointer; border: 2px solid transparent; opacity: 0.5; background-color: var(--thumb-bg);
    position: relative; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center;
}
.thumb-item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 10px; transition: transform 0.4s ease; }

.thumb-fx-ring {
    position: absolute; inset: -4px; border-radius: 14px;
    border: 1px solid var(--theme-color); opacity: 0;
    transform: scale(1.1); pointer-events: none;
    transition: opacity 0.2s ease, border-color 0.8s ease;
}
.thumb-item.active .thumb-fx-ring { opacity: 0.6; animation: ringRotate 4s linear infinite; }
@keyframes ringRotate { 0% { transform: scale(1.1) rotate(0deg); } 100% { transform: scale(1.1) rotate(360deg); } }

.thumb-item:hover { opacity: 0.9; transform: translateY(-4px) scale(1.05); border-color: rgba(var(--theme-color-rgb), 0.5); box-shadow: 0 8px 20px rgba(var(--theme-color-rgb), 0.25); }
.thumb-item.active { opacity: 1; border-color: var(--theme-color); box-shadow: 0 6px 25px rgba(var(--theme-color-rgb), 0.4); transform: translateY(-4px) scale(1.08); }

/* ---------------- 底部：系列切换 ---------------- */
.series-switcher {
    flex-shrink: 0; display: flex; justify-content: center; background: var(--series-bg); border-top: 1px solid var(--glass-border);
    height: 65px; z-index: 5; position: relative; border-radius: 0 0 24px 24px; transition: background 0.8s ease, border-color 0.8s ease; overflow: hidden;
}
.series-btn {
    flex: 1; background: transparent; border: none; color: var(--text-sub); font-size: 1.1rem; font-weight: 600; cursor: pointer; position: relative; letter-spacing: 1px; transition: all 0.3s ease, color 0.8s ease;
}
.series-btn::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background-color: var(--theme-color); transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.8s ease;
}
.series-btn:hover { color: var(--text-main); background: var(--series-hover); }
.series-btn.active { color: var(--text-main); background: var(--series-hover); }
.series-btn.active::after { width: 100%; }

/* ========================================================================= */
/* 导出横向卡片定制样式 (.export-card) - 【22:11 官方横版收藏卡】 */
/* ========================================================================= */
#export-mount-point { position: fixed; top: -9999px; left: -9999px; z-index: -9999; }
.export-card {
    /* 固定 22:11 比例，横向排版 */
    width: 1760px; height: 880px; position: relative;
    background: linear-gradient(135deg, rgba(var(--bg-page-rgb), 0.98) 0%, rgba(var(--bg-page-rgb), 0.88) 100%);
    border: 2px solid rgba(var(--theme-color-rgb), 0.4); border-radius: 40px; overflow: hidden;
    color: var(--text-main); box-sizing: border-box; display: flex; flex-direction: row;
}
.export-bg-glow {
    position: absolute; top: 10%; right: -10%; width: 1000px; height: 1000px;
    background: radial-gradient(circle, rgba(var(--theme-color-rgb), 0.25) 0%, transparent 70%);
    z-index: 0; pointer-events: none;
}
.export-left {
    flex: 0 0 45%; position: relative; display: flex; justify-content: center; align-items: flex-end;
    padding-bottom: 20px; z-index: 2;
}
/* ---- 核心重构：彻底解决导出图片拉伸，保持等比缩放 ---- */
.export-left img {
    width: auto; height: auto;
    max-width: 100%; max-height: 95%; 
    object-fit: contain; object-position: bottom center;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}
.export-right {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 80px 80px 80px 40px; z-index: 3; position: relative;
}
.export-series-title {
    position: absolute; bottom: 20px; right: 40px; font-size: 160px; font-weight: 900; line-height: 1;
    color: rgba(var(--theme-color-rgb), 0.05); white-space: nowrap; pointer-events: none; text-transform: uppercase;
}
.export-en { font-size: 1.8rem; color: var(--theme-color); letter-spacing: 4px; margin-bottom: 15px; text-transform: uppercase; }
.export-cn {
    font-size: 4.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 40px;
    color: var(--text-cn-base); white-space: nowrap;
}
html[data-theme="dark"] .export-cn { color: #ffffff; }

.export-bio { font-size: 1.6rem; line-height: 1.8; color: var(--text-sub); margin-bottom: 50px; }
.export-tags { display: flex; flex-wrap: wrap; gap: 20px; }
.export-tag { background: rgba(var(--theme-color-rgb), 0.1); border: 1px solid rgba(var(--theme-color-rgb), 0.3); padding: 15px 25px; border-radius: 40px; font-size: 1.3rem; display: flex; align-items: center; gap: 15px; }
.export-tag-label { color: var(--theme-color); background: rgba(0,0,0,0.5); padding: 6px 16px; border-radius: 16px; font-size: 1.1rem; text-transform: uppercase; }
.export-watermark { position: absolute; top: 40px; left: 40px; display: flex; align-items: center; gap: 10px; opacity: 0.6; font-weight: 600; letter-spacing: 2px; font-size: 1.2rem; z-index: 10;}
.export-watermark svg { width: 30px; height: 30px; color: var(--theme-color); }

/* ========================================================================= */
/* 保存状态通用高级全屏弹窗 (阻断交互) */
/* ========================================================================= */
.save-modal-overlay {
    position: fixed; inset: 0; background: rgba(var(--bg-page-rgb), 0.85);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    z-index: 10000; display: none; align-items: center; justify-content: center;
    pointer-events: all; opacity: 0;
}
.save-modal-card {
    position: relative; width: 420px; padding: 50px 40px 40px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 30px; box-shadow: 0 40px 100px rgba(0,0,0,0.5);
    text-align: center; overflow: hidden; transform: scale(0.8);
}
.modal-glow-bg {
    position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
    width: 300px; height: 300px; background: radial-gradient(circle, rgba(var(--theme-color-rgb), 0.3) 0%, transparent 70%);
}
.modal-icon-wrapper {
    position: relative; width: 80px; height: 80px; margin: 0 auto 30px;
    border-radius: 50%; background: rgba(var(--theme-color-rgb), 0.1);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 30px rgba(var(--theme-color-rgb), 0.4);
}
.modal-icon-wrapper svg { width: 40px; height: 40px; stroke: var(--theme-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.modal-title { font-size: 1.8rem; font-weight: 800; color: var(--text-main); margin-bottom: 10px; }
.modal-subtitle { font-size: 1rem; color: var(--text-sub); margin-bottom: 40px; }
.modal-actions { display: flex; gap: 15px; }
.modal-btn {
    flex: 1; height: 48px; border-radius: 24px; font-size: 1rem; font-weight: 600;
    cursor: pointer; border: none; transition: all 0.3s ease;
}
.btn-secondary { background: rgba(var(--theme-color-rgb), 0.1); color: var(--theme-color); border: 1px solid rgba(var(--theme-color-rgb), 0.3); }
.btn-secondary:hover { background: rgba(var(--theme-color-rgb), 0.2); }
.btn-primary { background: var(--theme-color); color: #fff; box-shadow: 0 10px 20px rgba(var(--theme-color-rgb), 0.3); }
.btn-primary:hover { box-shadow: 0 15px 30px rgba(var(--theme-color-rgb), 0.5); transform: translateY(-2px); }

/* ---------------- 响应式适配 ---------------- */
@media (max-width: 900px) {
    .app-container { padding: 10px; height: auto; min-height: 100vh; align-items: stretch; }
    .main-card { height: auto; min-height: 95vh; }
    
    /* 移动端安全区域适配 */
    .top-left-actions { top: max(15px, env(safe-area-inset-top)); left: 15px; }
    .home-btn { height: 42px; padding: 0 15px 0 12px; font-size: 0.85rem; border-radius: 21px; }

    .top-actions { top: max(15px, env(safe-area-inset-top)); right: 15px; gap: 10px; }
    .save-card-btn { height: 42px; padding: 0 15px; font-size: 0.85rem; border-radius: 21px; }
    .theme-toggle-btn { width: 42px; height: 42px; }

    .card-layout { flex-direction: column; padding: 20px; gap: 30px; }
    .card-left { flex: 0 0 350px; width: 100%; }
    .render-character-wrap { inset: -20px -20px 0 -20px; }
    .character-art { height: 90%; }
    .name-cn { font-size: 2.2rem; }
    .thumb-group { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 15px; }
    .thumb-group::-webkit-scrollbar { height: 0px; }
    .thumb-item { flex: 0 0 60px; }
    .series-switcher { height: auto; flex-wrap: wrap; }
    .series-btn { flex: 1 1 33.33%; padding: 15px 0; font-size: 0.95rem; }
}