/* --- 棣冨碍 瀵偓鐏炲繐濮╅悽缁樼壉锟?(Splash Screen) --- */
        #splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('shouye/12.jpg') center center / cover no-repeat;
            background-color: #ffcbd7;
            z-index: 99998;
            /* 濮ｆ梹绺哄ú璇茶剨缁愭ぞ缍嗘稉鈧悙?*/
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding-top: 18%;
            transition: opacity 0.8s ease, visibility 0.8s ease;
            overflow: hidden;
        }

        #splash-fw-canvas {
            display: none;
        }

        #splash-screen.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .splash-logo-text {
            font-family: 'Fredoka', -apple-system, sans-serif;
            font-size: 80px;
            font-weight: 600;
            color: #FFFFFF;
            letter-spacing: 5px;
            text-shadow:
                4px 4px 0px rgba(135, 206, 250, 0.74),
                8px 8px 15px rgba(100, 180, 255, 0.5);
            animation: splashFloat 3s ease-in-out infinite;
        }

        .splash-decoration {
            font-size: 40px;
            color: #fff;
            margin-bottom: -10px;
            text-shadow: 2px 2px 0px rgba(135, 206, 250, 0.8);
            animation: splashFloat 3s ease-in-out infinite reverse;
        }

        .splash-loading-dots {
            margin-top: 10px;
            display: flex;
            gap: 12px;
        }

        .splash-dot {
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 2px 2px 0px rgba(135, 206, 250, 0.8);
            animation: splashBounce 1.4s infinite ease-in-out both;
        }

        .splash-dot:nth-child(1) {
            animation-delay: -0.32s;
        }

        .splash-dot:nth-child(2) {
            animation-delay: -0.16s;
        }

        .splash-dot:nth-child(3) {
            animation-delay: 0s;
        }

        @keyframes splashFloat {

            0%,
            100% {
                transform: scale(1) translateY(0);
            }

            50% {
                transform: scale(1.05) translateY(-10px);
            }
        }

        @keyframes splashBounce {

            0%,
            80%,
            100% {
                transform: scale(0);
                opacity: 0.5;
            }

            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* --- 0. 閸忋劌鐪拋鍓х枂 --- */
        :root {
            --input-bg: #fbf1ec;
            --input-border: #4c200c;
            --text-brown: #59474a;
            --main-pink: #FF9A9E;
            --btn-gradient: linear-gradient(90deg, #fd5392 0%, #ff6b81 100%);

            /* 棣冨腹 閸忋劌鐪稉濠氼暯閼规彃褰夐柌?*/
            --theme-primary: #fd5392;
            --theme-primary-dark: #ff6b81;
            --theme-btn-gradient: var(--theme-primary-dark);
            --theme-btn-shadow: transparent;
            --theme-card-bg: #ffffff;
            --theme-card-border: #FFDEE9;
            --theme-input-bg: #fffbfc;
            --theme-input-border: #ffdee9;
            --theme-title-color: #59474a;
            --theme-accent-color: #ff6b81;
            --theme-sub-text: #aaa;
            --theme-page-bg: #FFF0F5;

            /* 鐎瑰鍙忛崠鍝勭厵閸欐﹢锟?*/
            --safe-area-inset-top: env(safe-area-inset-top, 0px);
            --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
            --safe-area-inset-left: env(safe-area-inset-left, 0px);
            --safe-area-inset-right: env(safe-area-inset-right, 0px);
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

        html,
        body {
            width: 100%;
            min-height: 100vh;
            /* 閹垹顦查懛顏嗗姧妤傛ê锟?*/
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            /* 閸欘亪妲诲锕€褰稿Ο顏囩儲 */
            /* 缁夊锟?position: fixed/overflow: hidden閿涘矁顔€濞村繗顫嶉崳銊ㄥ厴閹扮喓鐓″姘З */

            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            touch-action: manipulation;
        }

        /* --- 閸楁洜瀚惃鍕剹閺咁垰锟?(閻掑﹥顒撮崷銊︽付鎼存洑锟? --- */
        #bg-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -999;
            /* 閺€鎯ф躬閹碘偓閺堝鍞寸€圭懓鎮楅敓?*/
            background-color: var(--theme-page-bg);
            background-image: url('./__har_external/i.postimg.cc/28Fj5nBt/04.jpg');
            background-size: cover;
            background-position: center;
            pointer-events: none;
            /* 鐠佲晝鍋ｉ崙鑽も敍锟?*/
        }

        /* --- 妞ょ敻娼伴崚鍥ㄥ床閹貉冨煑 --- */
        .page-view {
            display: none;
            width: 100%;
            /* 缁夊锟?position: absolute/height: 100% */

            /* 鎼存洟鍎撮悾娆戞 */
            padding-bottom: calc(100px + env(safe-area-inset-bottom));
            animation: fadeIn 0.3s ease;
        }

        .page-view.active {
            display: block;
        }

        /* 妫ｆ牠銆夐悧瑙勭暕閺嶅嘲绱￠敍姘祼鐎规矮绗夊姘З */
        #home-layer {
            position: relative;
            height: 100vh;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* 浮生绘梦 - 一级页面固定视口 */
        #reverie-layer {
            position: relative;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* 浮生绘梦 - 二级详情页固定视口 */
        #reverie-detail-layer {
            position: relative;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* 浮生绘梦 - 三级梦境页固定视口 */
        #reverie-dream-layer {
            position: relative;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* 演绎设定 - 列表页固定视口 */
        #reverie-preset-layer {
            position: relative;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* 演绎设定 - 编辑页固定视口 */
        #reverie-preset-edit-layer {
            position: relative;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* 浮生绘梦 - 角色设置页固定视口 */
        #reverie-char-settings-layer {
            position: relative;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* 浮生绘梦 - USER 身份管理页固定视口 */
        #reverie-user-identity-layer {
            position: relative;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* 鐏忓繒娲伴弽鍥€夐悧瑙勭暕閺嶅嘲锟?*/
        #app-layer {
            height: 100vh;
            overflow: hidden;
            /* 婢舵牕鐪版稉宥嗙泊閸旑煉绱濋悽鍗炲敶闁劌灏崺鐔哥泊锟?*/
        }

        /* 鐏忓繒娲伴弽鍥€夊┑鈧ú缁樻娴ｈ法鏁lex鐢啫锟?*/
        #app-layer.active {
            display: flex;
            flex-direction: column;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* --- 1. 妫ｆ牠锟?(Home) 閺嶅嘲锟?--- */
        .home-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            /* 閺€閫涜礋娴犲酣銆婇柈銊ョ磻锟?*/
            height: 100vh;
            /* 閸ュ搫鐣炬稉楦款潒閸欙綁鐝惔?*/
            overflow: hidden;
            /* 缁備焦顒涘姘З */
            padding: 20px;
            padding-bottom: 0;
            /* 閸樼粯甯€鎼存洟鍎磒adding */
        }

        .home-title {
            font-size: 32px;
            color: var(--text-brown);
            margin-bottom: 50px;
            text-shadow: 2px 2px 0 #fff;
            font-weight: bold;
        }

        .home-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            width: 100%;
            max-width: 400px;
        }

        .home-card {
            background: rgba(255, 255, 255, 0.9);
            border: 3px solid #FFB7C5;
            border-radius: 20px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 5px 15px rgba(255, 183, 197, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 150px;
            user-select: none;
            -webkit-user-select: none;
        }

        .home-card:active {
            transform: scale(0.95);
            background: #fff0f5;
        }

        .home-card-emoji {
            font-size: 48px;
            margin-bottom: 10px;
            pointer-events: none;
        }

        .home-card span {
            color: var(--text-brown);
            font-size: 16px;
            font-weight: bold;
            pointer-events: none;
        }

        /* 鐏忓繒娲伴弽鍥€夐崶鍝勭暰婢舵挳鍎寸€圭懓锟?*/
        .app-sticky-header {
            flex-shrink: 0;
            /* 娑撳秶缂夌亸蹇ョ礉娣囨繃瀵旈崶鍝勭暰婢堆冪毈 */
            z-index: 50;
            background: transparent;
            /* 闁繑妲戦懗灞炬珯 */
            padding-top: var(--safe-area-inset-top);
            /* iOS 鐎瑰鍙忛崠鍝勭厵闁倿锟?*/
        }

        /* 棣冩晩 閸忋劌鐪潻鏂挎礀閹稿鎸崇€圭懓锟?- 閸╄櫣顢呴弽宄扮础 */
        .back-btn-container {
            position: absolute;
            top: 8px;
            left: 8px;
            z-index: 999;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        /* 闂団偓鐟曚礁鐣ㄩ崗銊ュ隘閸╃喎浜哥粔鑽ゆ畱妞ょ敻娼版担璺ㄦ暏濮濄倓鎱ㄦ鎵儊 */
        .back-btn-container.with-safe-area {
            top: calc(8px + env(safe-area-inset-top, 0px));
        }

        .back-btn-container>span,
        .back-btn-container>.back-arrow {
            font-size: 35px;
            color: #59474a;
            font-weight: bold;
            pointer-events: none;
        }

        .sticky-header-content {
            padding: 0 20px;
            padding-top: var(--safe-area-inset-top);
            max-width: 600px;
            margin: 10px auto 0 auto;
        }

        /* 娣囶喖顦叉径鏉戞禈閺嶅嘲锟?*/
        .header-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 1125 / 354;
            background: url('https://i.postimg.cc/52zsWZmJ/01.png') no-repeat top center;
            background-size: 100% auto;
            z-index: 10;
            margin-top: 20px;
        }

        /* --- 2. API 鐠佸墽鐤嗘い鍨壉锟?--- */
        .api-container {
            padding: 20px;
            padding-top: calc(20px + env(safe-area-inset-top));
            max-width: 600px;
            margin: 0 auto;
            padding-bottom: 50px;
        }

        .nav-header {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: 20px;
            padding: 10px 0;
            padding-top: calc(10px + env(safe-area-inset-top));
        }

        .nav-header .back-btn {
            display: none !important;
        }

        .nav-header h2 {
            margin: 0;
            flex: 1;
            text-align: center;
        }

        .back-btn,
        .letter-list-back,
        .letter-detail-back-btn {
            font-size: 32px;
            font-weight: bold;
            color: var(--text-brown);
            cursor: pointer;
            background: transparent;
            border: none;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .section-card {
            background: var(--theme-card-bg);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            border: 2px solid var(--theme-card-border);
            box-shadow: 0 4px 10px rgba(255, 222, 233, 0.3);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            color: var(--theme-sub-text);
            font-size: 14px;
            margin-bottom: 5px;
        }

        .api-input,
        .api-select {
            width: 100%;
            padding: 12px;
            background: var(--theme-input-bg);
            border: 2px solid var(--theme-input-border);
            border-radius: 12px;
            color: var(--text-brown);
            font-family: inherit;
            font-size: 14px;
        }

        /* 🔍 模型搜索下拉面板 */
        .model-dropdown-panel {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            max-height: 260px;
            overflow-y: auto;
            background: var(--theme-input-bg, #fff);
            border: 2px solid var(--theme-input-border, #f3c5d4);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            z-index: 9999;
            -webkit-overflow-scrolling: touch;
        }

        .model-dropdown-panel .model-dropdown-item {
            padding: 10px 14px;
            font-size: 14px;
            color: var(--text-brown, #6b4f4f);
            cursor: pointer;
            border-bottom: 1px dashed rgba(243, 197, 212, 0.45);
            white-space: normal;
            word-break: break-all;
            line-height: 1.4;
        }

        .model-dropdown-panel .model-dropdown-item:last-child {
            border-bottom: none;
        }

        .model-dropdown-panel .model-dropdown-item:hover,
        .model-dropdown-panel .model-dropdown-item.active {
            background: var(--theme-primary, #f3a6c0);
            color: #fff;
        }

        .model-dropdown-panel .model-dropdown-empty {
            padding: 14px;
            text-align: center;
            color: var(--theme-sub-text, #b08aa0);
            font-size: 13px;
        }

        .model-dropdown-panel .model-dropdown-item mark {
            background: rgba(255, 235, 59, 0.55);
            color: inherit;
            padding: 0 1px;
            border-radius: 2px;
        }

        .save-btn {
            width: 100%;
            padding: 12px;
            background: var(--theme-btn-gradient);
            color: var(--theme-btn-text, #fff);
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 10px var(--theme-btn-shadow);
        }

        .save-btn:active {
            transform: scale(0.98);
        }

        /* 娣囨繂鐡ㄩ惃鍕灙鐞涖劌顔愰崳?- 濞ｈ濮炲姘З */
        #saved-config-list {
            max-height: 270px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 5px;
        }

        /* 閼奉亜鐣炬稊澶嬬泊閸斻劍娼弽宄扮础 */
        #saved-config-list::-webkit-scrollbar {
            width: 6px;
        }

        #saved-config-list::-webkit-scrollbar-track {
            background: var(--theme-page-bg);
            border-radius: 10px;
        }

        #saved-config-list::-webkit-scrollbar-thumb {
            background: var(--theme-primary);
            border-radius: 10px;
        }

        #saved-config-list::-webkit-scrollbar-thumb:hover {
            background: var(--theme-primary-dark);
        }

        /* 娣囨繂鐡ㄩ惃鍕灙锟?*/
        .saved-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--theme-input-bg);
            border: 1px solid var(--theme-card-border);
            padding: 15px;
            border-radius: 12px;
            margin-bottom: 10px;
        }

        .saved-info {
            display: flex;
            flex-direction: column;
        }

        .saved-name {
            font-weight: bold;
            color: var(--text-brown);
        }

        .saved-detail {
            font-size: 12px;
            color: var(--theme-sub-text);
            margin-top: 2px;
        }

        .icon-btn {
            cursor: pointer;
            padding: 4px;
            font-size: 14px;
            color: var(--theme-primary);
            border-radius: 4px;
            transition: opacity 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .icon-btn:hover {
            opacity: 0.6;
        }

        .current-badge {
            background: var(--theme-primary);
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 5px;
        }

        /* --- 3. 鐏忓繒娲伴弽鍥€夐弽宄扮础 (娣囨繄鏆€閸樼喐鐗遍敓? --- */

        .apple-counter {
            position: absolute;
            top: 15%;
            right: 15%;
            width: 10vw;
            text-align: center;
            font-size: 8vw;
            color: white;
            font-weight: 900;
            text-shadow: 1.5px 0 0 #43200b, -1.5px 0 0 #43200b, 0 1.5px 0 #43200b, 0 -1.5px 0 #43200b;
            transform: rotate(10deg);
            z-index: 20;
            pointer-events: none;
        }

        .input-area {
            position: absolute;
            left: 28%;
            bottom: 24%;
            width: 52%;
            height: 23%;
            z-index: 50;
        }

        .custom-input {
            width: 100%;
            height: 100%;
            background-color: var(--input-bg);
            border: 2px solid var(--input-border);
            border-radius: 50px;
            padding: 0 10px 0 30px;
            color: var(--text-brown);
            font-family: inherit;
            font-size: 14px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2359474a'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 15px;
            background-position: 12px center;
        }

        .paw-btn {
            position: absolute;
            width: 10vw;
            height: 10vw;
            max-width: 28px;
            max-height: 28px;
            right: 10%;
            bottom: 23%;
            background: url('https://i.postimg.cc/ZnkrHq1n/02.png') no-repeat center;
            background-size: contain;
            border: none;
            cursor: pointer;
            z-index: 60;
            transition: transform 0.1s;
        }

        .paw-btn:active {
            transform: scale(0.8);
        }

        .main-content {
            flex: 1;
            /* 婵夘偄鍘栭崜鈺€缍戠粚娲？ */
            overflow-y: auto;
            /* 閸︺劍顒濋崠鍝勭厵閸愬懏绮撮崝?*/
            overflow-x: hidden;
            padding: 20px;
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            z-index: 5;
            padding-bottom: 120px;
        }

        .goal-title-custom {
            text-align: center;
            color: #dd4b6d;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            margin-top: -15px;
            display: none;
            text-shadow: 1px 1px 0 #fff;
        }

        .star-decor {
            margin: 0 10px;
        }

        .glass-progress-container {
            width: 100%;
            height: 24px;
            background-color: #F8F0F2;
            border-radius: 50px;
            position: relative;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 2px solid #FFB7C5;
            margin-bottom: 40px;
            display: none;
        }

        .glass-progress-fill {
            height: 100%;
            width: 0%;
            background-color: #FF69B4;
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            background-size: 15px 15px;
            border-radius: 50px;
            transition: width 0.5s ease;
        }

        .progress-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            font-size: 16px;
            /* 缁嬪秴浜曢崝鐘层亣娑撯偓锟?*/
            color: #FF5EAA;
            /* 鐎涙ぞ缍嬮崘鍛村劥妫版粏锟?*/
            font-weight: 900;
            /* 閺嶇绺炬穱顔芥暭閿涙矮濞囬悽銊х厺闁插繑寮挎潏瑙勬禌娴狅綁妲鹃敓?*/
            -webkit-text-stroke: 3px white;
            paint-order: stroke fill;
            /* 鐠佲晜寮挎潏鐟版躬鐎涙ぞ缍嬫稉瀣桨閿涘奔绗夐柆顔藉皡閺傚洤锟?*/
            text-shadow: none;
            /* 濞撳懘娅庨弮褏娈戦梼鏉戝 */
        }

        .category-card {
            background: #FFF;
            border: 2px solid #e48d99;
            border-radius: 20px;
            /* 棣冩啚 娴兼ê瀵查敍姘躲€婇柈銊ュ敶鏉堢绐涢弨鐟般亣锟?40px閿涘瞼绮伴弽鍥暯閼宠泛娉悾娆庣秴锟?*/
            padding: 40px 15px 15px 15px;
            margin-bottom: 40px;
            position: relative;
            box-shadow: 0 6px 0 #ffbac6;
            animation: popIn 0.4s ease-out;
        }

        @keyframes popIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .card-header-pill {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            background: #ff6b81;
            padding: 8px 40px;
            border-radius: 50px;
            border: 2px solid white;
            color: white;
            font-size: 18px;
            white-space: nowrap;
            z-index: 10;
            box-shadow: 0 3px 8px rgba(255, 107, 129, 0.4);
        }

        /* 閸掔娀娅庢禍鍡氼棅妤楃増鈧湯moji */

        .card-controls-left {
            position: absolute;
            top: 5px;
            left: 10px;
            display: flex;
            gap: 8px;
            z-index: 20;
        }

        .card-controls-right {
            position: absolute;
            top: 5px;
            right: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 20;
        }

        .ctrl-btn {
            font-size: 13px !important;
            cursor: pointer;
            opacity: 0.6;
            transition: all 0.2s;
            user-select: none;
        }

        .ctrl-btn:hover {
            opacity: 1;
            transform: scale(1.2);
        }

        .task-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 15px;
            margin-bottom: 8px;
            border-radius: 12px;
            background: #FFF5F7;
            transition: all 0.2s;
            width: 100%;
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
        }

        .task-item.completed {
            background: #e9f3e8;
        }

        .check-box {
            width: 22px;
            height: 22px;
            border: 2px solid #FFC0CB;
            border-radius: 50%;
            background: white;
            flex-shrink: 0;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        /* 閺嶅洨锟?Chip 閺嶅嘲锟?*/
        .folder-chip {
            padding: 5px 12px;
            background: #f0f0f0;
            border-radius: 15px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
            display: flex;
            align-items: center;
        }

        .folder-chip:hover {
            background: #e0e0e0;
        }

        .folder-chip.active {
            background: #fce4ec;
            color: #d81b60;
            border: 1px solid #f8bbd0;
            font-weight: bold;
        }

        .task-item.completed .check-box {
            border-color: #81C784;
            background: #81C784;
            color: white;
        }

        .task-item.completed .check-box::after {
            content: "";
            font-size: 14px;
        }

        .task-item.completed .task-text {
            text-decoration: line-through;
            color: #999;
        }

        .task-text {
            flex: 1;
            width: 0;
            min-width: 0;
            font-size: 16px;
            border: none;
            background: transparent;
            font-family: inherit;
            color: var(--text-brown);
        }

        .task-del {
            color: #ffb7c5;
            padding: 5px;
            cursor: pointer;
            font-size: 18px;
            flex-shrink: 0;
            margin-left: 5px;
        }

        .add-project-btn {
            width: 50%;
            margin: -15px auto 80px auto;
            display: block;
            padding: 10px;
            background: var(--btn-gradient);
            border: 2px solid #fff;
            border-radius: 50px;
            color: white;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(255, 154, 158, 0.4);
            user-select: none;
        }

        /* 鎼存洟鍎寸€佃壈鍩呴敓?*/
        .bottom-nav-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 90px;
            z-index: 100;
            pointer-events: none;
        }

        .center-bump {
            position: absolute;
            bottom: 35px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 70px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.02);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            z-index: 101;
        }

        .add-btn-circle {
            width: 50px;
            height: 50px;
            background: linear-gradient(180deg, #ffe0e0 0%, #ffc0cb 100%);
            border-radius: 50%;
            border: 2px solid #59474a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #59474a;
            cursor: pointer;
            border: none;
        }

        .nav-bg {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 70px;
            background: #fff;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-around;
            align-items: center;
            pointer-events: auto;
        }

        .nav-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: none;
            background: none;
            cursor: pointer;
            padding: 0 20px;
            width: 30%;
        }

        .nav-icon-img {
            width: 25px;
            height: 25px;
            object-fit: contain;
        }

        .nav-text {
            font-size: 12px;
            color: #888;
        }

        /* 瀵湱鐛ユ稉搴ｅ锟?*/
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: white;
            width: 85%;
            max-width: 320px;
            border-radius: 25px;
            padding: 20px;
            text-align: center;
        }

        /* 鏉烆剝澶勫鍦崶閺嶅嘲锟?*/
        .transfer-dialog {
            max-width: 320px;
            padding: 25px;
            text-align: left;
        }

        .transfer-dialog h3 {
            text-align: center;
            color: var(--text-brown);
            margin-bottom: 20px;
            margin-top: 0;
        }

        .transfer-dialog .form-group {
            margin-bottom: 15px;
        }

        .transfer-dialog label {
            display: block;
            font-size: 14px;
            color: #888;
            margin-bottom: 5px;
        }

        .transfer-dialog input {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--theme-card-border);
            border-radius: 8px;
            font-size: 14px;
            box-sizing: border-box;
        }

        .transfer-dialog .error-hint {
            display: none;
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
        }

        .transfer-dialog .error-hint.show {
            display: block;
        }

        .dialog-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .dialog-buttons button {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .dialog-buttons button:active {
            transform: scale(0.95);
        }

        .btn-cancel {
            background: #f0f0f0;
            color: #666;
        }

        .btn-confirm {
            background: var(--theme-btn-gradient);
            color: white;
        }

        .win-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.5s;
        }

        .win-img {
            width: 80%;
            max-width: 300px;
            margin-bottom: 20px;
            animation: popIn 0.5s;
        }

        .win-btn-row {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }

        .overlay-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            border: 3px solid #e8718d;
            color: #e8718d;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s;
        }

        .overlay-btn:active {
            transform: scale(0.9);
        }

        /* Loading */
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 3000;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .loading-img {
            width: 80%;
            max-width: 300px;
            animation: breathe 1.5s infinite ease-in-out;
        }

        @keyframes breathe {
            0% {
                transform: scale(0.95);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(0.95);
            }
        }

        .empty-hint {
            text-align: center;
            margin-top: 50px;
            color: #ccc;
        }

        /* 闂€鎸庡瘻濮樻梹鍦洪懣婊冨礋閺嶅嘲锟?*/
        .task-context-menu {
            position: fixed;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 183, 197, 0.3);
            padding: 8px 0;
            min-width: 140px;
            animation: menuPopIn 0.2s ease-out;
            backdrop-filter: blur(10px);
        }

        @keyframes menuPopIn {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(-10px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .context-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 18px;
            font-size: 15px;
            color: var(--text-brown);
            cursor: pointer;
            transition: background 0.15s;
        }

        .context-menu-item:hover,
        .context-menu-item:active {
            background: #FFF0F5;
        }

        .context-menu-item .menu-icon {
            font-size: 16px;
            width: 20px;
            text-align: center;
        }

        .context-menu-item.danger {
            color: #e74c3c;
        }

        .context-menu-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, #FFD0D8, transparent);
            margin: 6px 0;
        }

        .context-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            /* 娴ｈ法鏁ら弸浣风秵闁繑妲戞惔锔炬畱閼冲本娅欓懝璇х礉绾喕绻氱粔璇插З缁旑垰褰叉禒銉︻劀绾喗宕熼懢鐤曢幗闀愮皑锟?*/
            background: rgba(0, 0, 0, 0.01);
            /* 绾喕绻氱憴锔芥嚋娴滃娆㈤崣顖欎簰鐞氼偅顒滅涵顔碱槱锟?*/
            touch-action: auto;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
        }

        /* 娴犺濮熼梹鎸庡瘻妤傛ü瀵掗弫鍫熺亯 */
        .task-item.long-press-active {
            background: #FFE8EE !important;
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(255, 154, 158, 0.3);
        }

        /* --- 2.5 鐠佸墽鐤嗘い鐢告桨閺嶅嘲锟?--- */
        .settings-btn {
            position: absolute;
            top: calc(20px + var(--safe-area-inset-top));
            right: 20px;
            font-size: 30px;
            cursor: pointer;
            z-index: 100;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .settings-btn:active {
            transform: scale(0.9);
        }

        .avatar-upload-container {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid #ffb7c5;
            margin: 0 auto 15px auto;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .avatar-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 10px;
            padding: 2px 0;
            text-align: center;
            opacity: 0.8;
        }

        /* --- 2.6 鐟欐帟澹婃禍鎺戝З锟?& 娴犺濮熼崚妤勩€冮崡鍥╅獓 --- */
        .char-area {
            display: flex;
            align-items: center;
            /* 閸ㄥ倻娲跨仦鍛厬 */
            margin-bottom: 20px;
            padding: 0 10px;
            gap: 15px;
            animation: fadeIn 0.5s;
        }

        .char-avatar {
            width: 45px;
            /* 缂傗晛鐨径鏉戝剼 */
            height: 45px;
            border-radius: 50%;
            border: 3px solid #FFB7C5;
            object-fit: cover;
            background: white;
            flex-shrink: 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .char-bubble {
            background: #fff;
            /* 閺€鐟版礀缁绢垳娅ч懗灞炬珯 */
            padding: 12px 18px;
            border-radius: 18px;
            border-top-left-radius: 4px;
            border: 2px solid #FFDEE9;
            /* 濞ｏ紕鐭囬懝鑼剁珶锟?*/
            box-shadow: 0 4px 10px rgba(255, 183, 197, 0.2);
            color: #59474a;
            /* 濞ｈ精澹婄€涙ぞ锟?*/
            font-size: 14px;
            line-height: 1.4;
            position: relative;
            max-width: 70%;
            transition: opacity 0.3s;
        }

        .char-bubble::before {
            content: '';
            position: absolute;
            top: 15px;
            left: -8px;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 12px solid #fff;
            /* 閸栧綊鍘ら惂鍊熷閼冲本锟?*/
        }

        .task-text-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            margin-left: 5px;
            /* 缁嬪秴浜曠紒娆戝仯闂傜锟?*/
        }

        /* --- 閺傚洣娆㈡径鐟板瀻缁粯鐗遍敓?--- */
        .folder-scroll {
            display: flex;
            overflow-x: auto;
            gap: 10px;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px dashed #eee;
            -ms-overflow-style: none;
            /* 闂呮劘妫屽姘З锟?*/
            scrollbar-width: none;
        }

        .folder-scroll::-webkit-scrollbar {
            display: none;
        }

        .folder-chip {
            padding: 6px 15px;
            background: #f0f0f0;
            border-radius: 20px;
            font-size: 13px;
            color: #888;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.2s;
            user-select: none;
            flex-shrink: 0;
        }

        .folder-chip.active {
            background: #FF9A9E;
            color: white;
            font-weight: bold;
            box-shadow: 0 2px 6px rgba(255, 154, 158, 0.4);
        }

        .saved-item-row {
            padding: 12px;
            border-bottom: 1px solid #fff0f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            border-radius: 8px;
            margin-bottom: 8px;
        }

        .task-title {
            font-size: 16px;
            color: var(--text-brown);
        }

        .task-subtitle {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }

        /* ================= 閺冦儱锟?(Calendar) 閺嶅嘲锟?================= */
        :root {
            /* 閺冦儱宸绘稉鎾舵暏闁板秷锟?*/
            --theme-black: #4b4b4b;
            --theme-pink-text: #ff9cb7;
            --theme-weekend: #f06e8e;
            --today-red: #ff3333;
            --prio-high: #ffb7c5;
            --prio-mid: #baffc9;
            --prio-low: #bae1ff;
            --cal-bg-pink: #FFF0F5;
        }

        /* 妞ゅ爼鍎撮張鍫滃敜鐎佃壈锟?*/
        .calendar-header {
            padding: 30px 20px 10px;
            padding-top: calc(30px + env(safe-area-inset-top));
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            /* Increased gap for diamonds */
            background: transparent;
            margin-top: 10px;
        }

        /* Stacked Date Styles */
        .month-title {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1;
            color: var(--theme-black);
            font-weight: bold;
        }

        .month-year {
            font-size: 28px;
            color: #555;
            font-weight: 800;
            margin-bottom: 5px;
            letter-spacing: 1px;
        }

        .month-num {
            font-size: 40px;
            font-weight: 900;
            letter-spacing: 1px;
            color: var(--theme-black);
        }

        /* Custom Navigation Button */
        .cal-nav-btn {
            background: none;
            border: none;
            color: var(--theme-black);
            font-size: 18px;
            /* Diamond size */
            cursor: pointer;
            padding: 8px;
            transition: transform 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cal-nav-btn:active {
            transform: scale(0.8);
        }

        /* 閺冦儱宸绘稉璁崇秼 */
        .calendar-container {
            padding: 10px 12px;
            padding-bottom: 200px;
        }

        .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            margin-bottom: 15px;
            margin-left: -10px;
            margin-right: -10px;
            padding: 10px 10px;
            font-size: 15px;
            font-weight: bold;
            background: var(--theme-black);
            border-radius: 25px;
            color: var(--theme-pink-text);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            font-family: "Arial Rounded MT Bold", "Helvetica Rounded", sans-serif;
        }

        .days-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            row-gap: 2px;
        }

        .day-cell {
            background: transparent;
            border-radius: 14px;
            height: 56px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 4px;
            cursor: pointer;
            position: relative;
            transition: all 0.2s;
            z-index: 2;
        }

        .day-number {
            font-size: 17px;
            font-weight: bold;
            z-index: 3;
            position: relative;
            margin-top: 12px;
            color: var(--theme-black);
        }

        .day-cell.weekend .day-number {
            color: var(--theme-weekend);
        }

        .day-cell.selected::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--theme-black);
            border-radius: 12px;
            z-index: -1;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .day-cell.selected .day-number {
            color: white !important;
        }

        .day-cell.today .day-number {
            color: var(--today-red);
        }

        /* 閺嶅洩顔囬敓?*/
        .day-heart {
            position: absolute;
            top: 2px;
            font-size: 11px;
            z-index: 3;
        }

        .event-dots {
            display: flex;
            gap: 3px;
            position: absolute;
            bottom: 7px;
            z-index: 3;
        }

        .dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #FFB7C5;
        }

        /* 娑撳鏌熼弮銉р柤閸掓锟?(瀵湱鐛ラ敓? */
        .schedule-area {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40vh;
            background: rgba(255, 255, 255, 0.98);
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            padding: 20px;
            box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
            transform: translateY(110%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2000;
            /* 鐏炲倻楠囩憰渚€锟?*/
            display: flex;
            flex-direction: column;
        }

        .schedule-area.show {
            transform: translateY(0);
        }

        .schedule-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 10px;
            flex-shrink: 0;
        }

        .selected-date-info {
            font-size: 18px;
            font-weight: bold;
            color: var(--theme-black);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .heart-selector {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .heart-btn {
            cursor: pointer;
            opacity: 0.4;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
            border-radius: 50%;
        }

        .heart-btn:hover {
            opacity: 0.7;
            background: rgba(255, 183, 197, 0.1);
        }

        .heart-btn:active {
            transform: scale(0.9);
        }

        .heart-btn.active {
            opacity: 1;
            transform: scale(1.15);
            background: rgba(255, 183, 197, 0.15);
        }

        .heart-btn svg {
            display: block;
            transition: all 0.2s;
        }

        .heart-btn.active svg {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        /* 娴犺濮熼崚妤勩€冩稉搴″幢锟?*/
        #scheduleList {
            overflow-y: auto;
            flex: 1;
            padding-bottom: 20px;
            scrollbar-width: none;
        }

        #scheduleList::-webkit-scrollbar {
            display: none;
        }

        .task-card {
            display: flex;
            align-items: stretch;
            background: white;
            border-radius: 12px;
            margin-bottom: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            min-height: 50px;
        }

        .task-time {
            font-size: 15px;
            font-weight: bold;
            width: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            background: transparent;
        }

        .task-content {
            flex: 1;
            font-size: 15px;
            color: var(--theme-black);
            display: flex;
            align-items: center;
            padding-left: 15px;
        }

        .task-icon {
            margin-right: 10px;
            font-size: 18px;
        }

        .task-card.prio-high {
            background: #FFF0F5;
            color: #fd5392;
        }

        .task-card.prio-high .task-time {
            color: #fd5392;
        }

        .task-card.prio-mid {
            background: #f0fff4;
            color: #2d6a40;
        }

        .task-card.prio-mid .task-time {
            color: #2d6a40;
        }

        .task-card.prio-low {
            background: #f0f8ff;
            color: #2d5a88;
        }

        .task-card.prio-low .task-time {
            color: #2d5a88;
        }

        /* 濞搭喖濮╅幐澶愭尦锟?*/
        .fab-group {
            position: absolute;
            top: -20px;
            right: 20px;
            display: flex;
            gap: 10px;
            z-index: 2100;
        }

        .mini-fab {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            font-weight: bold;
            transition: transform 0.2s;
        }

        .btn-add {
            background: #fd5392;
            color: white;
            font-size: 24px;
        }

        .btn-close {
            background: white;
            color: #999;
            font-size: 18px;
        }

        /* 瀵湱鐛ョ悰銊ュ礋 (Modal Box) */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 3000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
            /* 棣冩晙 iOS濠婃艾濮╃粚鍧椻偓蹇庢叏婢跺稄绱伴梼缁橆剾鐟欙附鎳滄禍瀣╂缁屽潡鈧繐鍩屾稉瀣湴 */
            overscroll-behavior: contain;
        }

        .modal-box {
            background: white;
            width: 85%;
            max-width: 320px;
            border-radius: 20px;
            padding: 25px;
            animation: popIn 0.3s;
        }

        .form-row {
            margin-bottom: 15px;
        }

        .label-text {
            display: block;
            color: #888;
            font-size: 12px;
            margin-bottom: 6px;
        }

        .form-input {
            width: 100%;
            height: 42px;
            padding: 0 10px;
            border-radius: 10px;
            border: 1px solid #FFDEE9;
            background: #FFF0F5;
            color: #333;
            outline: none;
            font-size: 14px;
        }

        .prio-selector {
            display: flex;
            gap: 8px;
        }

        .prio-opt {
            flex: 1;
            padding: 8px;
            text-align: center;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
            font-weight: bold;
        }

        .prio-opt.high {
            background: #ffeef2;
            color: #ff8fa3;
        }

        .prio-opt.high.selected {
            background: var(--prio-high);
            border-color: #fd5392;
            color: #fd5392;
        }

        .prio-opt.mid {
            background: #e8f5e9;
            color: #81c784;
        }

        .prio-opt.mid.selected {
            background: var(--prio-mid);
            border-color: #4caf50;
            color: #2e7d32;
        }

        .prio-opt.low {
            background: #e3f2fd;
            color: #64b5f6;
        }

        .prio-opt.low.selected {
            background: var(--prio-low);
            border-color: #2196f3;
            color: #1565c0;
        }



        /* 鐞涖劍鍎忕拹瀵哥剨闁锟?*/
        .sticker-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
            overflow-x: auto;
            padding-bottom: 2px;
        }

        .sticker-tab {
            font-size: 16px;
            padding: 4px 10px;
            background: #f2f2f2;
            border-radius: 12px;
            cursor: pointer;
            white-space: nowrap;
        }

        .sticker-tab.active {
            background: #FFB7C5;
            color: white;
        }

        .sticker-grid {
            display: flex;
            flex-wrap: nowrap;
            /* 棣冩暋 娣囶喖顦查敍姘扁€樻穱婕瀖oji濡亜鎮滈幒鎺戝灙閿涘奔绗夐幑銏ｎ攽 */
            gap: 10px;
            overflow-x: auto;
            overflow-y: hidden;
            /* 棣冩暋 娣囶喖顦查敍姘舵閽樺繒鏃遍崥鎴炵泊锟?*/
            padding: 5px;
            /* 棣冩暋 娣囶喖顦查敍姘櫤鐏忓繐鍞存潏纭呯獩閿涘矁顔€emoji閺堝娲挎径姘▔缁€铏光敄锟?*/
            background: #fafafa;
            border-radius: 10px;
            scrollbar-width: none;
            min-height: 46px;
            /* 棣冩暋 娣囶喖顦查敍姘崇殶閺佸瓨娓剁亸蹇涚彯鎼达箓鈧倸绨查弬鎵畱padding */
            max-height: 46px;
            /* 棣冩暋 娣囶喖顦查敍姘崇殶閺佸瓨娓舵径褔鐝惔锕傗偓鍌氱安閺傛壆娈憄adding */
        }

        .sticker-item {
            flex-shrink: 0;
            width: 36px !important;
            /* 棣冩暋 娣囶喖顦查敍姘繁閸掓儼顔曠純顔碱啍鎼达缚锟?6px */
            height: 36px !important;
            /* 棣冩暋 娣囶喖顦查敍姘繁閸掓儼顔曠純顕€鐝惔锔胯礋36px */
            min-width: 36px !important;
            /* 棣冩暋 娣囶喖顦查敍姘舵Щ濮濄垼顫﹂崢瀣級 */
            max-width: 36px !important;
            /* 棣冩暋 娣囶喖顦查敍姘舵Щ濮濄垼顫﹂幏澶夊嚑 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            /* 棣冩暋 娣囶喖顦查敍姘櫤鐏忓坏moji鐎涙ぞ缍嬫径褍锟?*/
            border-radius: 8px;
            cursor: pointer;
            line-height: 1;
            /* 棣冩暋 娣囶喖顦查敍姘愁啎缂冾喛顢戞妯硅礋1閿涘矂妲诲顣媘oji閹炬垿鐝€圭懓锟?*/
            padding: 0 !important;
            /* 棣冩暋 娣囶喖顦查敍姘繁閸掕埖绔婚梽顦朼dding */
            margin: 0 !important;
            /* 棣冩暋 娣囶喖顦查敍姘繁閸掕埖绔婚梽顦揳rgin */
        }

        .sticker-item.selected {
            background: #ffe4e8;
            border: 1px solid #FFB7C5;
        }

        .btn-block-confirm {
            width: 100%;
            background: #fd5392;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 25px;
            font-size: 16px;
            margin-top: 15px;
            cursor: pointer;
        }

        .menu-item.danger {
            color: #ff4757;
        }

        /* === 瀵搫鍩楁穱顔碱槻閺冦儱宸绘い鍫曞劥閹烘帞锟?(Fix Calendar Header) === */
        .calendar-header {
            display: flex !important;
            /* 瀵搫鍩楀瑙勨偓褍绔风仦锟?*/
            flex-direction: row !important;
            /* 瀵搫鍩楀Ο顏勬倻閹烘帒鍨敍灞肩瑝閸戝棙宕查敓?*/
            justify-content: center !important;
            /* 鐏炲懍鑵戠€靛綊锟?*/
            align-items: center !important;
            /* 閸ㄥ倻娲跨仦鍛厬 */
            gap: 15px !important;
            /* 閹稿鎸抽崪灞炬瀮鐎涙娈戦梻纾嬬獩 */
            white-space: nowrap !important;
            /* 缁備焦顒涢崘鍛啇閹广垼锟?*/
            width: 100% !important;
            padding-top: calc(50px + var(--safe-area-inset-top)) !important;
            /* 妞ゅ爼鍎撮悾娆忓毉鐡掑啿顧勭粚娲？閿涘矁鈧啳妾荤€瑰鍙忛崠鍝勭厵 */
            margin-top: 0 !important;
        }

        .month-title {
            font-size: 32px !important;
            /* 娣囨繃瀵旈崢鐔哄婢堆冪摟锟?*/
            font-weight: bold !important;
            color: #4b4b4b !important;
            /* 绾喕绻氭０婊嗗濮濓絿锟?*/
            letter-spacing: 2px !important;
            line-height: 1 !important;
            /* 閸樺缍嗙悰宀勭彯 */
            margin: 0 !important;
            /* 閸樼粯甯€婢舵矮缍戞潏纭呯獩 */
            display: inline-block !important;
            /* 绾喕绻氶崷銊ユ倱娑撯偓锟?*/
        }

        .nav-btn {
            font-size: 24px !important;
            background: transparent !important;
            border: none !important;
            padding: 0 5px !important;
            cursor: pointer !important;
            display: inline-block !important;
            color: #4b4b4b !important;
            /* Update diamond color */
        }

        /* 娣囶喖顦叉潻鏂挎礀閹稿鎸抽惃鍕秴缂冾噯绱濋梼鍙夘剾鐎瑰啯灏嬮崢瀣垼锟?*/
        .calendar-header .back-btn {
            top: calc(5px + var(--safe-area-inset-top)) !important;
            /* 鐠嬪啯鏆ｉ崹鍌滄纯娴ｅ秶鐤嗛敍宀冣偓鍐鐎瑰鍙忛崠鍝勭厵 */
            left: 10px !important;
        }

        /* 閺冦儱宸绘い鐢告桨娑撴挾鏁ら懗灞炬珯 */
        #calendar-layer {
            background-image: none !important;
            background-size: cover !important;
            background-position: center !important;
            background-attachment: fixed !important;
            min-height: 100vh !important;
            overflow-y: auto !important;
        }

        /* --- AI Schedule Assistant (Post-it Style) --- */
        /* --- AI Schedule AssistantRefined (Round 3) --- */
        /* 鐎圭懓锟?*/
        #ai-schedule-wrapper {
            position: relative;
            width: 95%;
            /* 娴ｈ法锟?aspect-ratio 閺囧じ锟?padding-bottom 閹垛偓瀹秆嶇礉閺囨潙銈介惃?iOS 閸忕厧顔愰幀?*/
            aspect-ratio: 4 / 3;
            /* 閸ョ偤鈧偓閿涙矮绗夐弨顖涘瘮 aspect-ratio 閻ㄥ嫭绁荤憴鍫濇珤娴ｈ法锟?min-height */
            min-height: 200px;
            margin: -190px auto 40px auto;
            background: url('https://i.postimg.cc/VNJWk2Pc/011.png') no-repeat center center;
            background-size: 100% 100%;
            transform: rotate(-1deg);
            box-shadow: none;
            z-index: 10;
        }

        /* 1. 瀹革缚绗傜憴鎺戙仈锟?(閹峰秶鐝涘妤咁棑锟? - 閸氭垵涔忛敓?*/
        .polaroid-avatar {
            position: absolute;
            top: -5px;
            left: 15px;
            background: white;
            padding: 4px 4px 15px 4px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
            transform: rotate(-8deg);
            z-index: 10;
        }

        #ai-char-avatar {
            width: 50px;
            height: 50px;
            object-fit: cover;
            display: block;
        }

        /* 2. 閻劍鍩涢弽鍥暯閼宠泛锟?(濞ｈ精澹婇懗灞炬珯) */
        #user-schedule-pill {
            position: absolute;
            /* 娓氬灝鍩勭拹鏉戞躬妞ょ敻娼版稉顓㈡？閿涘奔绗夐棁鈧憰浣哥暔閸忋劌灏崺鐔蜂焊锟?*/
            top: 25px;
            left: 85px;
            background: #59474a;
            color: #ffb8cc;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: bold;
            z-index: 5;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transform: none;
        }

        /* 3. 閸欏厖绗傜憴鎺撳瘻闁筋喚锟?*/
        .ai-btn-group {
            position: absolute;
            /* 娓氬灝鍩勭拹鏉戞躬妞ょ敻娼版稉顓㈡？閿涘奔绗夐棁鈧憰浣哥暔閸忋劌灏崺鐔蜂焊锟?*/
            top: 23px;
            right: 60px;
            display: flex;
            gap: 8px;
            z-index: 10;
        }

        .circle-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.1s;
        }

        .circle-btn:active {
            transform: scale(0.9);
        }

        #btn-ai-gen {
            background: #FFDEE9;
        }

        /* 缁锟?*/
        #btn-ai-play {
            background: #E0F2F1;
        }

        /* 濞村懐锟?*/

        /* 4. 濠婃艾濮╅弬鍥х摟锟?(娑撳﹦些 + 鐎瑰€燁攽锟? */
        #ai-text-scroll-area {
            position: absolute;
            top: 26%;
            left: 12%;
            /* 瀵扳偓瀹革妇些锟?*/
            width: 75%;
            height: 60%;
            /* 鎼存洟鍎撮悾娆戔敄 */
            overflow-y: auto;
            /* 闂呮劘妫屽姘З锟?*/
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        #ai-text-scroll-area::-webkit-scrollbar {
            display: none;
        }

        #ai-reply-text {
            margin: 0;
            font-size: 14px;
            /* 鐎涙ぞ缍嬬粙宥呬簳婢堆傜锟?*/
            line-height: 1.8;
            /* 鐎硅姤婢楃悰宀勭彯 */
            color: #59474a;
            text-align: justify;
            /* 娑撱倗顏€靛綊锟?*/
            font-weight: 500;
        }

        /* 妤傛ü瀵掗弽宄扮础閻ㄥ嫬娓剧憴鎺嶇喘锟?*/
        .highlight-pill {
            padding: 2px 6px;
            border-radius: 12px !important;
            /* 閺囨潙娓鹃敓?*/
            font-weight: bold;
            font-size: 12px;
            margin: 0 2px;
        }

        /* ================= 閻ｎ亣瀵楅柦鐔剁瑩鐏炵偞鐗遍敓?================= */

        /* 閺傛澘顤冮敍姘辨殬閼煎嫰鎸撴稉顓㈡？閻ㄥ嚈I濮樻梹鍦洪敓?*/
        .pomo-ai-interaction {
            display: flex;
            align-items: center;
            /* 閸ㄥ倻娲跨仦鍛厬 */
            gap: 10px;
            /* 娴ｈ法鏁ょ紒婵嗩嚠鐎规矮缍呴敍灞肩瑝瑜板崬鎼锋稉瀣桨閻¤泛鐡欓惃鍕鐏炩偓 */
            position: absolute;
            top: calc(171px + var(--safe-area-inset-top));
            /* 閸︺劑銆婇柈銊ュ幢閻楀洣绗呴敓?閼板啳妾荤€瑰鍙忛崠鍝勭厵 */
            left: 15px;
            /* 瀵扳偓瀹革箓锟?*/
            z-index: 80;
            /* 娣囨繆鐦夐崷銊ф懕鐎涙劒绗傞敓?*/
            animation: fadeIn 0.5s;
        }

        .pomo-ai-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid #FFB7C5;
            background: #fff;
            object-fit: cover;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .pomo-ai-bubble {
            background: #fff;
            padding: 8px 12px;
            border-radius: 20px;
            border-top-left-radius: 4px;
            /* 濮樻梹鍦虹亸鏍潡閸︺劌涔忛敓?*/
            border: 2px solid #FFDEE9;
            color: #59474a;
            font-size: 13px;
            box-shadow: 0 4px 10px rgba(255, 183, 197, 0.2);
            position: relative;
            white-space: nowrap;
            /* 瀵搫鍩楅崡鏇☆攽娑撳秵宕查敓?*/
        }

        /* 缂佹瑦鐨靛▔鈥冲娑擃亜鐨亸鏍潡 */
        .pomo-ai-bubble::before {
            content: '';
            position: absolute;
            top: 10px;
            left: -8px;
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 10px solid #FFDEE9;
        }

        .pomo-ai-bubble::after {
            content: '';
            position: absolute;
            top: 10px;
            left: -5px;
            /* 閻╂牔缍囨潏瑙勵攱妫版粏锟?*/
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 10px solid #fff;
        }

        /* 閺傜増瀵滈柦顔界壉瀵骏绱伴崨濠呯様鐟欐帟澹婇獮璺虹磻锟?*/
        .btn-confirm-ai {
            flex: 1;
            padding: 10px 8px;
            border: none;
            border-radius: 25px;
            font-size: 13px;
            cursor: pointer;
            font-weight: bold;
            background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
            /* 缁鳖偆鐭囧〒鎰綁閿涘苯灏崚顐＄艾閺咁噣鈧艾绱戦敓?*/
            color: white;
            box-shadow: 0 4px 10px rgba(161, 140, 209, 0.3);
            white-space: nowrap;
        }

        /* 1. 鐎圭懓娅掔拫鍐╂殻 */
        .pomo-wrapper {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: calc(30px + env(safe-area-inset-top));
            /* 妞ゅ爼鍎撮梻纾嬬獩閿涘矁鈧啳妾荤€瑰鍙忛崠鍝勭厵 */
            height: 100vh;
            overflow-y: auto;
            position: relative;
        }

        /* 1. 妞ゅ爼鍎寸紒鐔活吀閸楋紕锟?*/
        .stats-card {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            /* 鐠佲晛鐡欓崗鍐婵夘偅寮ф妯哄 */
            background-color: rgba(255, 255, 255, 0.56);
            border: 2px solid rgba(255, 255, 255, 0.8);
            border-radius: 25px;
            padding: 2px 15px;
            width: 95%;
            height: 130px;
            box-shadow: 0 2px 5px rgba(255, 150, 170, 0.3),
                inset 0 0 10px rgba(255, 230, 240, 0.3);
            position: relative;
            flex-shrink: 0;
            z-index: 50;
            margin-bottom: 10px;
            overflow: visible;
            /* 瀹革缚鏅剁憴鎺曞闂団偓鐟曚焦瀛╅敓?*/
        }

        /* 3. 瀹革缚鏅堕敍姘愁潡閼硅弓绗屽鏃€鍦洪敓?*/
        .pomo-char-container {
            position: relative;
            width: 140px;
            /* 闂勬劕鍩楀锔挎櫠鐎硅棄锟?*/
            height: 100%;
            flex-shrink: 0;
        }

        /* 2. 瀹革缚鏅剁憴鎺曞閸ュ墽锟?*/
        .pomo-char-img {
            position: absolute;
            bottom: -2px;
            left: -10px;
            /* 瀵扳偓閸欒櫕瀵稉鈧敓?*/
            width: 150px;
            /* 缂傗晛鐨敓?50px */
            height: 150px;
            object-fit: contain;
            z-index: 60;
        }

        /* 3. 濮樻梹鍦洪弬鍥х摟鐎规矮锟?*/
        .pomo-bubble-text {
            position: absolute;
            top: -26px;
            left: 5px;
            display: flex;
            align-items: center;
            gap: 6px;
            transform: rotate(0);
            /* 娑撳秵妫嗛敓?*/
            z-index: 70;
            background: transparent;
            /* 闁繑妲戦懗灞炬珯 */
            padding: 5px 12px;
            border-radius: 15px;
            box-shadow: none;
            /* 閸樼粯甯€闂冩潙锟?*/
        }

        /* "娴犲﹥妫╅崝顏勫" 缁旀牗甯撶亸蹇撶摟閿涙矮绗傞棃鈶┾偓婊€绮栭弮銉⑩偓婵撶礉娑撳娼伴垾婊冨Й閸旀冻锟?*/
        .pomo-label-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
        }

        .pomo-label-small {
            font-size: 11px;
            color: #ff8b8b;
            font-weight: 800;
            letter-spacing: 1px;
        }

        /* 閺冨爼妫挎径褍锟?00:00 */
        .pomo-time-big {
            font-size: 24px;
            color: #6d5c56;
            font-weight: 900;
            font-family: "Arial Rounded MT Bold", sans-serif;
            letter-spacing: 1px;
            line-height: 1;
            text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
            /* 缁嬪秴浜曢崝鐘电煐閺佸牊锟?*/
        }

        /* 4. 閸欏厖鏅堕敍姘崇碃娴ｇ姵妫╅崢鍡楀隘 */
        .pomo-calendar-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* 閸ㄥ倻娲跨仦鍛厬 */
            align-items: stretch;
            padding-left: 10px;
            padding-right: 5px;
            overflow: hidden;
            /* 闂冨弶顒涘┃銏犲毉 */
        }

        /* 閺冦儱宸荤悰銊ャ仈 */
        .mini-cal-header {
            background-color: #ff97bc;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            padding: 3px 5px;
            margin-bottom: 9px;
            flex-shrink: 0;
        }

        .mini-cal-weekday {
            color: white;
            font-size: 9px;
            font-weight: bold;
            width: 14.28%;
            /* 7缁涘锟?*/
            text-align: center;
        }

        /* 閺冦儱宸婚弽鐓庣摍闂傜锟?*/
        .mini-cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            row-gap: 3px;
            column-gap: 0;
        }

        /* 閺冦儱宸婚崷鍡楁箑 */
        .mini-day-cell {
            height: 14px;
            width: 14px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #6d5c56;
            font-weight: bold;
            border-radius: 50%;
            position: relative;
        }

        /* 閹垫挸宕遍幋鎰閻ㄥ嫭鐗遍敓?(閽冩繆澹婇崷鍡楁箑+閻у€熷锟? */
        .mini-day-cell.checked {
            background-color: #8FD3FE;
            color: white;
            width: 14px;
            height: 14px;
            border: 1.5px solid white;
        }

        .mini-day-cell.checked::after {
            content: "";
            font-size: 7px;
            position: absolute;
            color: white;
        }

        /* 娴犲﹤銇夐惃鍕壉锟?(缁嬪秴浜曢崝鐘遍嚋缁俱垺锟? */
        .mini-day-cell.is-today {
            border: 1px solid #ff8b8b;
            color: #ff8b8b;
        }

        /* --- 閻椻晝鎮婇悾顏囧瘲闁界喎顔愰敓?(娣囶喗顒滈敓? --- */
        .pomodoro-section {
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            /* 閺€閫涜礋妞ゅ爼鍎寸€靛綊缍堥敍灞炬煙娓氳法锟?margin 閹貉冨煑娴ｅ秶锟?*/
            position: relative;
            padding-top: 10px;
            /* 缁嬪秴浜曞鈧稉瀣€婃稉鈧敓?*/
            overflow: hidden;
            /* 闂冨弶顒涢悺璺虹摍鐡掑懎锟?*/
        }

        /* 閻¤泛鐡欑€圭懓娅掗敍姘垛偓姘崇箖 height 锟?scaleY 閺夈儱甯囬敓?*/
        .physics-container {
            width: 423px;
            height: 520px;
            /* 妤傛ê瀹抽崙蹇撶毈閿涘苯锟?39 */
            position: relative;
            transform-origin: center top;
            transform: scale(0.85);
            /* 閺佺繝缍嬬紓鈺傛杹 */
            margin-top: 45px;
            /* 瀵扳偓娑撳灏愰敍宀€绮扮€电鐦藉鏃€鍦洪悾娆忓毉缁屾椽锟?*/
        }

        /* 閻¤泛鐡欓懗灞炬珯 */
        .jar-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://i.postimg.cc/yYncJzxQ/013.png');
            background-size: 100% 100%;
            z-index: 1;
        }

        /* 閻㈣锟?*/
        #matter-canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            background: transparent;
            /* 閺冦垻鍔ч悺璺虹摍閸樺澧庢禍鍡礉閻㈣绔锋稉宥夋付鐟曚礁褰夐敍瀛tterJS闁插本鍨滄禒顑跨窗鐠嬪啯鏆ｆ潏鍦櫕锟?*/
        }

        /* 閻滆崵鎷戦崣宥呭帨 (娴ｅ秶鐤嗗顔跨殶) */
        .glass-shine {
            position: absolute;
            top: 20%;
            left: 5%;
            width: 90%;
            height: 60%;
            border-radius: 40px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 50%);
            pointer-events: none;
            z-index: 3;
        }

        .shine-stripe {
            position: absolute;
            top: 22%;
            left: 12%;
            width: 15px;
            height: 180px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            transform: rotate(5deg);
            filter: blur(2px);
            z-index: 4;
            pointer-events: none;
        }

        /* --- 閺傚洤鐡ч敓?(濡亝甯撴穱顔筋劀) --- */
        .timer-overlay {
            position: absolute;
            top: 55%;
            /* 閸ㄥ倻娲跨仦鍛厬閸嬪繋锟?*/
            left: 0;
            width: 100%;
            display: flex;
            /* 娴ｈ法鏁lex鐢啫锟?*/
            flex-direction: column;
            /* 閸ㄥ倻娲块幒鎺戝灙閿涙矮绗傞弮鍫曟？閿涘奔绗呮禒璇插 */
            align-items: center;
            /* 濮樻潙閽╃仦鍛厬 */
            justify-content: center;
            z-index: 10;
            pointer-events: none;
        }

        .pomo-wrapper .timer-text {
            font-size: 70px;
            /* 缁嬪秴浜曠拫鍐ㄧ毈娑撯偓閻愮櫢绱濋梼鍙夘剾婢额亜锟?*/
            color: white;
            font-weight: 900;
            line-height: 1;
            /* 閾忔艾瀵查弫锝呯磻閻ㄥ嫬顦跨仦鍌炴Ь瑜版唻绱濇０婊嗗濞ｅ崬瀹虫稉宥呭綁娴ｅ棙娲块弻鏂挎嫲 */
            text-shadow:
                0 0 8px rgba(221, 108, 130, 0.9),
                0 0 15px rgba(221, 108, 130, 0.7),
                0 0 25px rgba(221, 108, 130, 0.5),
                0 0 35px rgba(221, 108, 130, 0.3);
            font-family: "Arial Rounded MT Bold", sans-serif;
            letter-spacing: 2px;
        }

        .pomo-wrapper .task-text {
            font-size: 28px;
            color: white;
            font-weight: 800;
            margin-top: 5px;
            /* 閾忔艾瀵查弫锝呯磻閻ㄥ嫬顦跨仦鍌炴Ь锟?*/
            text-shadow:
                0 0 6px rgba(221, 108, 130, 0.9),
                0 0 12px rgba(221, 108, 130, 0.7),
                0 0 20px rgba(221, 108, 130, 0.5);
            /* 瀵搫鍩楀Ο顏呭笓 */
            writing-mode: horizontal-tb;
            width: 80%;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- 閻ｎ亣瀵楅柦鐔活啎缂冾喖鑴婄粣妤佺壉锟?--- */
        .pomo-setup-modal {
            display: none;
            /* 姒涙顓婚梾鎰 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(3px);
        }

        .pomo-setup-box {
            background: #fff;
            width: 85%;
            max-width: 320px;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            animation: popIn 0.3s;
        }

        .pomo-setup-box h3 {
            text-align: center;
            color: #dd6c82;
            margin-top: 0;
            margin-bottom: 20px;
        }

        .setup-row {
            margin-bottom: 15px;
        }

        .setup-row label {
            display: block;
            color: #59474a;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .setup-input {
            width: 100%;
            padding: 10px;
            border: 2px solid #FFDEE9;
            border-radius: 10px;
            font-size: 14px;
            color: #333;
            background: #FFF0F5;
        }

        .setup-input:focus {
            border-color: #dd6c82;
        }

        /* 濡€崇础閸掑洦宕插鈧敓?*/
        .mode-switch {
            display: flex;
            background: #f0f0f0;
            border-radius: 10px;
            padding: 3px;
        }

        .mode-opt {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            font-size: 13px;
            cursor: pointer;
            border-radius: 8px;
            color: #888;
            transition: all 0.2s;
        }

        .mode-opt.active {
            background: #fff;
            color: #dd6c82;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .setup-actions {
            display: flex;
            gap: 8px;
            margin-top: 25px;
        }

        .btn-cancel,
        .btn-confirm {
            flex: 1;
            padding: 10px 8px;
            border: none;
            border-radius: 25px;
            font-size: 13px;
            cursor: pointer;
            font-weight: bold;
            white-space: nowrap;
        }

        .btn-cancel {
            background: #f0f0f0;
            color: #888;
        }

        .btn-confirm {
            background: linear-gradient(90deg, #fd5392 0%, #ff6b81 100%);
            color: white;
        }

        /* --- 鎼存洟鍎撮幒褍鍩楅弽蹇旂壉锟?(V3 閸欐鐛庨敓? --- */
        .pomo-controls {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 320px;
            height: 55px;

            /* 閻滆崵鎷戞惔鏇燁攱 */
            background: rgba(255, 255, 255, 0.57);
            border: 2px solid #fff;
            border-radius: 40px;

            box-shadow: 0 10px 20px rgba(221, 108, 130, 0.3);

            display: flex;
            justify-content: space-evenly;
            align-items: center;
            z-index: 100;
            padding: 0 5px;
        }

        /* 闁氨鏁ら幐澶愭尦 */
        .pomo-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.1s;
            color: #dd6c82;
            /* 缂佺喍绔存０婊嗗 */
            padding: 0;
            /* 閸樺娅庨崘鍛扮珶鐠烘繂鍏遍敓?*/
        }

        .pomo-btn:active {
            transform: scale(0.9);
        }

        /* 1,2,4閸欓攱瀵滈柦顕嗙窗閸欘亝婀侀崶鐐垼閿涘本妫ら懗灞炬珯锟?*/
        .icon-btn {
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .icon-btn svg {
            fill: #dd6c82;
        }

        /* 閸氬嫬娴橀弽鍥╁缁斿鏄傞敓?*/
        .asmr-icon svg {
            width: 38px;
            height: 38px;
        }

        .volume-icon svg {
            width: 38px;
            height: 38px;
        }

        .chat-icon svg {
            width: 32px;
            height: 32px;
        }

        /* 3閸欓攱瀵滈柦顕嗙窗閹绢厽鏂侀敓?(缂傗晛鐨敓? */
        .play-btn {
            width: 44px;
            height: 44px;
            background-color: #dd6c82;
            border-radius: 50%;
            color: white;
            border: none;
            box-shadow: none;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 閹绢厽鏂侀柨顔煎敶闁劎娈戞稉澶庮潡锟?*/
        .play-btn svg {
            width: 26px;
            height: 26px;
        }

        /* 5閸欓攱瀵滈柦顕嗙窗閸忔娊妫撮敓?*/
        .close-btn {
            width: 32px;
            /* 閸滃苯涔忔潏鐟版禈閺嶅洩顫嬬憴澶婇挬锟?*/
            height: 32px;
            background-color: #dd6c82;
            border-radius: 50%;
            color: white;
        }

        .close-btn svg {
            width: 18px;
            height: 18px;
        }

        /* 閻ｎ亣瀵楅柦鐔肩叾闁插繐鑴婄粣妤€顔愰敓?*/
        .pomo-vol-wrap {
            position: relative;
        }

        /* 閻ｎ亣瀵楅柦鐔肩叾闁插繐鑴婇敓?*/
        .pomo-vol-popup {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            width: 130px;
            height: 40px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s ease;
            touch-action: none;
        }

        .pomo-vol-popup.show {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) scale(1);
        }

        #pomo-asmr-volume {
            width: 100%;
            height: 6px;
            background: rgba(221, 108, 130, 0.25);
            border-radius: 3px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            touch-action: none;
        }

        #pomo-asmr-volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: #dd6c82;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        /* ================= ASMR 瀵湱鐛ラ弽宄扮础 ================= */
        .asmr-modal-layer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 350px;
            background: rgba(228, 202, 203, 0.35);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
            z-index: 2000;
            display: flex;
            flex-direction: column;
            align-items: center;
            transform: translateY(120%);
            transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .asmr-modal-layer.show {
            transform: translateY(0);
        }

        /* 妞ゅ爼鍎撮幎濠冨 */
        .modal-handle {
            width: 40px;
            height: 5px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 10px;
            margin-top: 15px;
            cursor: pointer;
        }

        /* 閹貉冨煑锟?*/
        .asmr-controls-area {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            width: 100%;
            margin-top: 20px;
            margin-bottom: 15px;
        }

        /* 閹绢厽鏂侀幐澶愭尦 */
        .asmr-btn-play {
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 50%;
            border: none;
            color: #dd6c82;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(221, 108, 130, 0.2);
            cursor: pointer;
            transition: transform 0.2s;
        }

        .asmr-btn-play:active {
            transform: scale(0.9);
        }

        .asmr-btn-play svg {
            width: 26px;
            height: 26px;
        }

        /* 閸掑洦锟?闂婃娊鍣洪幐澶愭尦 */
        .asmr-btn-small {
            width: 44px;
            height: 44px;
            background: transparent;
            border: none;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
        }

        .asmr-btn-small:active {
            transform: scale(0.85);
        }

        .asmr-btn-small svg {
            width: 32px;
            height: 32px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
        }

        /* 闂婃娊鍣洪幐澶愭尦鐎圭懓锟?*/
        .asmr-vol-wrap {
            position: relative;
        }

        /* 闂婃娊鍣哄鍦崶 - 濡亜鎮滃鎴濇健 */
        .asmr-vol-popup {
            position: absolute;
            bottom: 55px;
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            width: 130px;
            height: 40px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s ease;
            touch-action: none;
        }

        .asmr-vol-popup.show {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) scale(1);
        }

        #asmr-volume {
            width: 100%;
            height: 6px;
            background: rgba(221, 108, 130, 0.25);
            border-radius: 3px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            touch-action: none;
        }

        #asmr-volume::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: #dd6c82;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        /* --- 3D 閸楋紕澧栧鎴濆З锟?--- */
        .interactive-section {
            width: 100%;
            height: 220px;
            perspective: 1000px;
            overflow: visible;
        }

        .card-slider {
            display: flex;
            overflow-x: auto;
            overflow-y: visible;
            scroll-snap-type: x mandatory;
            gap: 12px;
            padding: 15px 0;
            scrollbar-width: none;
            height: 100%;
            align-items: center;
        }

        .card-slider::-webkit-scrollbar {
            display: none;
        }

        .asmr-spacer {
            min-width: 50vw;
            margin-left: -70px;
        }

        /* 閸楃姳缍呴敍灞肩箽鐠囦胶顑囨稉鈧鐘茬湷锟?*/

        .asmr-card {
            flex-shrink: 0;
            width: 140px;
            height: 200px;
            background: #fff;
            border-radius: 15px;
            scroll-snap-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            opacity: 0.6;
            transform: scale(0.9);
        }

        .asmr-card.active {
            opacity: 1;
            transform: scale(1.1);
            /* 閺€鎯с亣 */
            box-shadow: 0 15px 30px rgba(221, 108, 130, 0.25);
            border: 2px solid #fff;
            z-index: 10;
        }

        .asmr-img {
            width: 100%;
            height: 72%;
            object-fit: cover;
            border-bottom: 1px solid #f0f0f0;
        }

        .asmr-info {
            padding: 10px;
            text-align: center;
        }

        .asmr-title {
            font-size: 14px;
            font-weight: bold;
            color: #59474a;
        }

        .asmr-tag {
            font-size: 10px;
            color: #999;
            margin-top: 3px;
        }

        /* ================= 閻ｎ亣瀵楅柦鐔风毈閹靛婧€閼卞﹤锟?================= */
        .phone-modal-layer {
            display: none;
            /* 姒涙顓婚梾鎰 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            /* 閼冲本娅欓崢瀣 */
            z-index: 2500;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
            animation: fadeIn 0.3s;
        }

        .phone-case {
            width: 320px;
            height: 600px;
            max-height: 85vh;
            background: linear-gradient(145deg, #fff5f8 0%, #fff0f5 50%, #ffe8ee 100%);
            border: 8px solid #ffb7c5;
            border-radius: 40px;
            position: relative;
            display: flex;
            flex-direction: column;
            /* 婢舵艾鐪伴梼鏉戝婢х偛濮炵粩瀣╃秼锟?*/
            box-shadow:
                0 20px 50px rgba(0, 0, 0, 0.25),
                0 0 0 2px rgba(255, 255, 255, 0.8) inset,
                0 -3px 10px rgba(255, 183, 197, 0.3) inset,
                0 3px 10px rgba(255, 255, 255, 0.5) inset;
            overflow: hidden;
            animation: slideUpPhone 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes slideUpPhone {
            from {
                transform: translateY(100px) scale(0.9);
                opacity: 0;
            }

            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        /* 鐏忓繒灏楅幐鍌炪偘 (閹稿倸婀幍瀣簚婢舵牠锟? */
        .phone-charm {
            position: absolute;
            top: calc(50% - 301px);
            /* 娑撳孩澧滈張娲€婇柈銊ヮ嚠姒绘劧绱濇妯哄毉1px */
            left: calc(50% - 165px);
            /* 閻╃顕禍搴㈠閺堝搫涔忛敓?*/
            width: 50px;
            height: auto;
            z-index: 100;
            transform-origin: top center;
            animation: swingCharm 2.5s ease-in-out infinite;
            pointer-events: none;
            filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.2));
        }

        @keyframes swingCharm {

            0%,
            100% {
                transform: rotate(-12deg);
            }

            50% {
                transform: rotate(12deg);
            }
        }

        /* 妞ゅ爼鍎撮崚妯绘崳閸滃苯鍙ч梻顓㈡暛 */
        .phone-header {
            height: 40px;
            padding-top: var(--safe-area-inset-top);
            background: #fff0f5;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            flex-shrink: 0;
            border-bottom: 1px solid #ffeef2;
        }

        .phone-notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 22px;
            background: linear-gradient(180deg, #ffb7c5 0%, #ffc4d0 100%);
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            box-shadow: 0 2px 4px rgba(255, 183, 197, 0.3);
        }

        .phone-close-btn {
            color: #ff8a9b;
            font-size: 22px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10;
        }

        /* 閼卞﹤銇夌仦蹇撶 */
        /* 閼卞﹤銇夌仦蹇撶 */
        .phone-screen {
            flex: 1;
            background: #fff;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            /* 閸愬懘妲捐ぐ杈唨鐏炲繐绠烽張澶婄サ閸忋儲锟?*/
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        /* 濞戝牊浼呭鏃€鍦洪柅姘辨暏 */
        .chat-msg {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            max-width: 100%;
        }

        .chat-msg.ai {
            align-self: flex-start;
            /* AI闂堢姴锟?*/
        }

        .chat-msg.user {
            align-self: flex-end;
            /* 閻劍鍩涢棃鐘插礁 */
            flex-direction: row-reverse;
            /* 婢舵潙鍎氶崷銊ュ礁锟?*/
        }

        .chat-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid #ffb7c5;
            object-fit: cover;
            flex-shrink: 0;
        }

        .msg-bubble {
            padding: 10px 14px;
            border-radius: 18px;
            font-size: 14px;
            line-height: 1.4;
            word-break: break-all;
            max-width: 220px;
            position: relative;
        }

        /* 1. AI 濮樻梹鍦洪敍姘ガ閽冩繆澹婇懗灞炬珯 + 濞ｈ京浼嗛敓?*/
        .msg-bubble.ai {
            background: #E1F5FE;
            /* 濞村懓锟?*/
            color: #59474a;
            /* 濞ｈ京浼嗛敓?*/
            border-bottom-left-radius: 4px;
            border: 1px solid #B3E5FC;
            /* 瀵邦喖浜曟稉鈧悙瑙勭箒閽冩繆绔熷鍡楊杻閸旂姾宸濋敓?*/
        }

        /* 2. 閻劍鍩涘鏃€鍦洪敍姘窗缁澹婇懗灞炬珯 + 濞ｈ京浼嗛敓?*/
        .msg-bubble.user {
            background: #FFDEE9;
            /* 濞ｏ紕锟?*/
            color: #59474a;
            /* 濞ｈ京浼嗛敓?*/
            border-bottom-right-radius: 4px;
            border: 1px solid #FFB7C5;
        }

        /* 鎼存洟鍎存潏鎾冲弳锟?*/
        .phone-input-bar {
            height: 60px;
            background: #fff0f5;
            display: flex;
            align-items: center;
            padding: 0 12px 0 10px;
            gap: 6px;
            border-top: 2px solid #ffeef2;
            flex-shrink: 0;
        }

        .phone-input {
            flex: 1;
            min-width: 0;
            max-width: calc(100% - 80px);
            height: 40px;
            border-radius: 20px;
            border: 2px solid #ffb7c5;
            padding: 0 15px;
            outline: none;
            font-size: 14px;
            color: #59474a;
        }

        .chat-tool-btn {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: transform 0.1s;
            color: white;
            flex-shrink: 0;
        }

        .chat-tool-btn:active {
            transform: scale(0.9);
        }

        /* 3. 閸欘剙鏁淎I閹稿鎸抽敍姘▏閻劌娴橀敓?(閺囨潙鍙挎担鎾舵畱闁瀚ㄩ崳銊洬閻╂牕鍙忕仦鈧弽宄扮础) */
        .phone-input-bar .paw-btn {
            position: static !important;
            background: transparent url('https://i.postimg.cc/ZnkrHq1n/02.png') no-repeat center center !important;
            background-size: contain !important;
            border: none !important;
            width: 32px !important;
            height: 32px !important;
            max-width: none !important;
            max-height: none !important;
            right: auto !important;
            bottom: auto !important;
            transition: transform 0.2s;
        }

        .phone-input-bar .paw-btn:active {
            transform: scale(0.8) rotate(-10deg);
        }

        .send-btn {
            background: linear-gradient(90deg, #fd5392 0%, #ff6b81 100%);
            pointer-events: auto;
            z-index: 10;
            position: relative;
        }

        .send-btn:hover {
            opacity: 0.9;
        }

        .send-btn:active {
            transform: scale(0.85);
            opacity: 0.8;
        }

        /* ================= 閺冦儴顔囬張顒佺壉锟?(Diary Notebook) ================= */

        /* --- 閺冦儴顔囬張顒€顔愰敓?(闁倿鍘ら幍鈧張澶嬪锟? --- */
        .diary-notebook-container {
            width: 100vw;
            height: calc(100dvh - 60px - var(--safe-area-inset-top));
            height: calc(100vh - 60px - var(--safe-area-inset-top));
            margin-top: calc(60px + var(--safe-area-inset-top));
            margin-bottom: 10px;
            position: relative;
            perspective: 1500px;
            padding-bottom: var(--safe-area-inset-bottom);
        }

        @supports (height: 100dvh) {
            .diary-notebook-container {
                height: calc(100dvh - 60px);
            }
        }

        /* 缁楁棁顔囬張顑垮瘜锟?*/
        .diary-notebook {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .diary-notebook.closed {
            transform: rotateY(0deg) rotateX(0deg);
        }

        .diary-notebook.open {
            transform: rotateY(0deg) rotateX(0deg);
        }

        /* --- 妞ゅ爼鍎撮弽鍥╊劮 (Tabs) --- */
        .diary-tabs-top {
            position: absolute;
            top: -39px;
            right: 10px;
            display: flex;
            gap: 3px;
            z-index: 20;
        }

        .diary-tab {
            width: 90px;
            height: 52px;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            position: relative;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .diary-tab-calendar {
            background-image: url('diary/RJ07.png');
        }

        .diary-tab-write {
            background-image: url('diary/RJ08.png');
        }

        .diary-tab-settings {
            background-image: url('diary/RJ09.png');
        }

        /* --- 鐏忎線锟?(Front Cover) --- */
        .diary-cover {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url('diary/RJ01.jpg');
            background-size: cover;
            background-position: center;
            border-radius: 0;
            box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.1), 5px 10px 20px rgba(0, 0, 0, 0.2);
            z-index: 10;
            transform-origin: left center;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            backface-visibility: hidden;
        }

        .diary-cover-content {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
        }

        .diary-notebook.open .diary-cover {
            transform: rotateY(-180deg);
        }

        /* --- 鐏忎礁锟?閸愬懘銆夌€圭懓锟?--- */
        .diary-back-cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 0;
            box-shadow: inset 10px 0 20px rgba(0, 0, 0, 0.05), 5px 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 5;
            overflow: hidden;
        }

        /* 缁剧绱剁痪鍦倞 - 閸╄櫣顢呴弽宄扮础 */
        .diary-paper-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 0;
        }

        /* 缁惧湱鎮婄憰鍡欐磰锟?- 娴犲孩妫╅張鐔哥埉娑撳鏌熷鈧慨瀣剁礉娑撳﹣绗呯紓鈺佸櫤閿涘矂绮拋銈夋閽樺骏绱滼S閹貉冨煑閺勫墽锟?*/
        .diary-texture-layer {
            position: absolute;
            top: 95px;
            left: 10px;
            right: 20px;
            bottom: 80px;
            z-index: 1;
            pointer-events: none;
            display: none;
        }

        /* 缁惧湱鎮婄仦鍌涙▔缁€铏瑰Ц锟?- 閻㈢洕S濞ｈ濮瀞how锟?*/
        .diary-texture-layer.show {
            display: block;
        }

        /* 閺嶇厧鐡欑痪鍦倞 */
        .diary-texture-layer.texture-grid {
            background-image:
                linear-gradient(#f0f0f0 1px, transparent 1px),
                linear-gradient(90deg, #f0f0f0 1px, transparent 1px);
            background-size: 25px 25px;
        }

        /* 閻愬綊妯€缁惧湱锟?*/
        .diary-texture-layer.texture-dots {
            background-image: radial-gradient(circle, #d8d8d8 2px, transparent 2px);
            background-size: 22px 22px;
        }

        /* 濡亞鍤庣痪鍦倞 - 閸栧綊锟?8px鐞涘矂锟?*/
        .diary-texture-layer.texture-lines {
            background-image: linear-gradient(transparent 27px, #f0f0f0 1px);
            background-size: 100% 28px;
        }

        /* 缁岃櫣娅х痪鍦倞 */
        .diary-texture-layer.texture-blank {
            background: transparent;
        }

        /* --- 閸愬懎顔愰崠鍝勭厵 --- */
        .diary-content-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            padding: 15px;
            overflow-y: auto;
            display: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .diary-content-layer.active {
            display: block;
            opacity: 1;
        }

        /* 閺冦儱宸绘い闈涘箵閹哄「adding楠炲爼鏀ｆ担蹇旂泊锟?*/
        #diary-page-calendar {
            padding: 0;
            overflow: hidden;
        }

        /* 閸愭瑦妫╃拋浼达拷?- 娴ｈ法锟?RJ10.jpg 娴ｆ粈璐熺痪绋跨炊閼冲本娅欓敍灞芥祼鐎规俺鍎楅弲顖欑瑝濠婃艾锟?*/
        #diary-page-write {
            background: url('diary/RJ10.jpg') no-repeat center center;
            background-size: 100% 100%;
            padding-bottom: 30px;
            overflow: hidden;
        }

        /* 閸愭瑦妫╃拋浼淬€夐崘鍛村劥閻ㄥ嫮姹楅悶鍡楃湴 */
        .diary-write-texture-layer {
            position: absolute;
            top: 90px;
            left: 10px;
            right: 20px;
            bottom: 80px;
            z-index: 1;
            pointer-events: none;
        }

        /* 閺嶇厧鐡欑痪鍦倞 */
        .diary-write-texture-layer.texture-grid {
            background-image:
                linear-gradient(#e0e0e0 1px, transparent 1px),
                linear-gradient(90deg, #e0e0e0 1px, transparent 1px);
            background-size: 25px 25px;
        }

        /* 閻愬綊妯€缁惧湱锟?*/
        .diary-write-texture-layer.texture-dots {
            background-image: radial-gradient(circle, #e8e8e8 1.5px, transparent 1.5px);
            background-size: 20px 20px;
        }

        /* 濡亞鍤庣痪鍦倞 - 閸栧綊锟?8px鐞涘矂锟?*/
        .diary-write-texture-layer.texture-lines {
            background-image: linear-gradient(transparent 27px, #e0e0e0 1px);
            background-size: 100% 28px;
        }

        /* 缁岃櫣娅х痪鍦倞 */
        .diary-write-texture-layer.texture-blank {
            background: transparent;
        }

        /* --- 1. 閺冦儱宸绘い鍨壉锟?--- */
        .diary-calendar-page {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* RJ10閼冲本娅欓崶鎯х湴 */
        .diary-calendar-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .diary-calendar-bg img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

        .diary-calendar-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: calc(100% - 60px);
            display: flex;
            flex-direction: column;
            padding: 15px 20px 10px 10px;
            overflow: hidden;
        }

        .diary-calendar-header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px 0;
            padding-top: calc(15px + env(safe-area-inset-top));
            font-size: 1.5rem;
            color: #333;
            font-weight: bold;
            letter-spacing: 2px;
            background: transparent;
        }

        .diary-nav-btn {
            cursor: pointer;
            font-size: 1.5rem;
            color: #555;
            padding: 0 25px;
            user-select: none;
            transition: transform 0.2s, color 0.2s;
        }

        .diary-nav-btn:hover {
            transform: scale(1.2);
            color: #000;
        }

        .diary-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            background-color: #444;
            color: #ff9cb7;
        }

        .diary-weekday {
            text-align: center;
            padding: 8px 0;
            font-weight: 600;
            border-right: 1px solid #555;
        }

        .diary-weekday:last-child {
            border-right: none;
        }

        .diary-calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            border-left: 1px solid #000;
            border-top: 1px solid #000;
            flex: 1;
            overflow: hidden;
        }

        .diary-day-cell {
            min-height: 60px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            position: relative;
            background-color: transparent;
            display: flex;
            flex-direction: column;
        }

        .diary-day-cell.empty {
            background-color: rgba(255, 192, 203, 0.3);
        }

        .diary-date-number {
            position: absolute;
            top: 5px;
            left: 8px;
            font-size: 12px;
            font-weight: bold;
            color: #333;
            pointer-events: none;
        }

        .diary-day-cell.today .diary-date-number {
            color: #fff;
            background-color: #ff618c;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
        }

        /* 鏉╂柨娲栫亸渚€娼伴幐澶愭尦 */
        .diary-back-to-cover-btn {
            position: absolute;
            bottom: 25px;
            right: 20px;
            width: 35px;
            height: 35px;
            background: url('diary/RJ11.png') no-repeat center center;
            background-size: contain;
            cursor: pointer;
            z-index: 10;
            transition: transform 0.2s;
        }

        .diary-back-to-cover-btn:hover {
            transform: scale(1.1);
        }

        /* --- 2. 閸愭瑦妫╃拋鐗堢壉锟?(閺嶇绺炬稊锕€鍟撻敓? --- */
        .diary-wrapper {
            position: relative;
            width: 100%;
            max-height: calc(100% - 130px);
            overflow-y: auto;
            font-family: 'ZCOOL KuaiLe', cursive;
            line-height: 28px;
            font-size: 16px;
            cursor: text;
            color: #5a4a3a;
            padding-right: 5px;
        }

        #diary-hidden-input {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 600px;
            opacity: 1;
            z-index: 2;
            font-family: 'ZCOOL KuaiLe', cursive;
            font-size: 16px;
            line-height: 28px;
            border: none;
            outline: none;
            resize: none;
            overflow-y: auto;
            padding: 0;
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            background: transparent;
            color: #5a4a3a;
            letter-spacing: 1px;
            caret-color: #ff6b8a;
        }

        #diary-display-text {
            display: none;
        }

        #diary-cursor-marker {
            display: none;
        }

        /* 闁惧懐锟?- 閺€閫涜礋鐠虹喖娈㈤崗澶嬬垼娴ｅ秶鐤嗛敍鍫濆讲闁娈ｉ挊蹇ョ礆*/
        #diary-pencil {
            display: none;
            width: 0;
            height: 20px;
        }

        /* 闁惧懐锟?*/
        #diary-pencil {
            position: absolute;
            top: 0;
            left: 0;
            width: 13px;
            height: 13px;
            pointer-events: none;
            z-index: 10;
            transition: top 0.05s linear, left 0.05s linear;
            font-size: 13px;
            transform: translate(2px, -2px);
        }

        /* 娑旓箑鍟撻弮鍓佺應閻ㄥ嫬濮╅敓?*/
        .diary-writing-anim {
            animation: diary-writing-motion 0.12s ease-in-out infinite;
        }

        @keyframes diary-writing-motion {
            0% {
                transform: translate(2px, -2px) rotate(0deg) scale(1);
            }

            25% {
                transform: translate(3px, -1px) rotate(-3deg) scale(0.98);
            }

            50% {
                transform: translate(1px, -2px) rotate(-5deg) scale(1);
            }

            75% {
                transform: translate(3px, -2px) rotate(-2deg) scale(0.99);
            }

            100% {
                transform: translate(2px, -2px) rotate(0deg) scale(1);
            }
        }

        /* 娣囨繂鐡ㄩ幐澶愭尦閸栧搫锟?*/
        .diary-save-area {
            position: fixed;
            bottom: calc(33px + var(--safe-area-inset-bottom));
            right: 20px;
            margin: 0;
            z-index: 100;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .diary-btn-save {
            width: 30px;
            height: 30px;
            background: url('diary/RJ13.png') no-repeat center center;
            background-size: contain;
            border-radius: 0;
            border: none;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .diary-btn-save img {
            display: none;
        }

        .diary-btn-save:active {
            transform: scale(0.9);
        }

        /* 閸忓厖鍔熼幐澶愭尦 - 閸欏倻锟?diary-back-to-cover-btn */
        .diary-btn-close-book {
            width: 30px;
            height: 30px;
            background: url('diary/RJ11.png') no-repeat center center;
            background-size: contain;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .diary-btn-close-book:hover {
            transform: scale(1.1);
        }

        .diary-btn-close-book:active {
            transform: scale(0.9);
        }

        /* --- AI 閸ョ偛顦查崠鍝勭厵 --- */
        .diary-ai-trigger {
            position: fixed;
            bottom: calc(33px + var(--safe-area-inset-bottom));
            left: 20px;
            width: 33px;
            height: 33px;
            background: url('diary/RJ12.png') no-repeat center center;
            background-size: contain;
            border-radius: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0;
            cursor: pointer;
            z-index: 100;
            transition: transform 0.2s;
        }

        .diary-ai-trigger:hover {
            transform: scale(1.1);
        }

        @keyframes diary-float-gentle {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        /* AI 娓氳法顒峰鍦崶 - 闁喚鍍甸敓?*/
        .diary-ai-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 200;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .diary-ai-modal-overlay.show {
            display: flex;
            opacity: 1;
        }

        /* 閸栧懓锛欓敓?- 閸栧懎鎯堥幏宥囩彌瀵版銇旈敓?娓氳法锟?*/
        .diary-ai-note-wrapper {
            position: relative;
            width: 90%;
            max-width: 360px;
            padding-top: 50px;
            /* 缂佹瑦濯跨粩瀣繁婢舵潙鍎氶悾娆戔敄锟?*/
            animation: diary-note-float 0.3s ease-out;
        }

        @keyframes diary-note-float {
            from {
                transform: translateY(20px) scale(0.9);
                opacity: 0;
            }

            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        /* 閹峰秶鐝涘妤€銇旈敓?- 閸欏倻鍙庨弮銉р柤锟?polaroid-avatar */
        .diary-polaroid-avatar {
            position: absolute;
            /* 棣冩暋 iOS/鐎瑰宕滈崗鐓庮啇閿涙艾娴愮€规艾锟?5px閿涘奔绗夐崝鐖廰fe-area-inset闁灝鍘OS鏉╁洤瀹抽崑蹇曪拷?*/
            top: 35px;
            left: 15px;
            background: white;
            padding: 4px 4px 15px 4px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
            transform: rotate(-8deg);
            z-index: 20;
        }

        .diary-polaroid-avatar img {
            width: 50px;
            height: 50px;
            object-fit: cover;
            display: block;
        }

        /* 娓氳法顒锋稉璁崇秼 - 娴ｈ法鏁ら崶鍓у閼冲本锟?*/
        .diary-ai-note {
            width: 100%;
            min-height: 280px;
            padding: 20px 20px 25px 20px;
            position: relative;
            background-image: url('https://i.postimg.cc/VNJWk2Pc/011.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-family: 'ZCOOL KuaiLe', sans-serif;
            z-index: 1;
        }

        .diary-ai-modal-overlay.show .diary-ai-note {
            animation: diary-note-float 0.3s ease-out 0.1s both;
        }

        /* 閺嶅洭顣介懗璺烘抄 - 閸欏倻鍙庨弮銉р柤锟?user-schedule-pill */
        .diary-ai-title-pill {
            position: absolute;
            /* 棣冩暋 iOS 娣囶喖顦查敍姘剨缁愭婀い鐢告桨娑擃參妫块敍灞肩瑝闂団偓鐟曚礁鐣ㄩ崗銊ュ隘閸╃喎浜哥粔浼欑礉閸欏倽鈧啯妫╅崢鍡涳拷?user-schedule-pill */
            top: 25px;
            left: 85px;
            background: #59474a;
            color: #ffb8cc;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: normal;
            z-index: 100;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
            pointer-events: auto;
        }

        /* 閹稿鎸抽敓?- 閸欏倻鍙庨弮銉р柤锟?ai-btn-group */
        .diary-ai-btn-group {
            position: absolute;
            /* 棣冩暋 iOS 娣囶喖顦查敍姘剨缁愭婀い鐢告桨娑擃參妫块敍灞肩瑝闂団偓鐟曚礁鐣ㄩ崗銊ュ隘閸╃喎浜哥粔浼欑礉閸欏倽鈧啯妫╅崢鍡涳拷?ai-btn-group */
            top: 23px;
            right: 40px;
            display: flex;
            gap: 4px;
            z-index: 100;
            pointer-events: auto;
        }

        .diary-ai-circle-btn {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            cursor: pointer;
            transition: transform 0.1s;
        }

        .diary-ai-circle-btn:active {
            transform: scale(0.9);
        }

        /* 閸ョ偛顦查幐澶愭尦 - 缁锟?*/
        #diary-btn-ai-gen {
            background: #FFDEE9;
        }

        /* 鐠囶參鐓堕幐澶愭尦 - 濞村懐锟?*/
        #diary-btn-ai-play {
            background: #E0F2F1;
        }

        /* AI 閸愬懎顔愬姘З锟?*/
        .diary-ai-text-scroll-area {
            max-height: 180px;
            overflow-y: auto;
            padding: 8px 15px 10px 20px;
            margin-top: 45px;
            /* 缂佹瑦鐖ｆ０妯垮厡閸ュ﹦鏆€缁屾椽锟?*/
            position: relative;
            z-index: 1;
        }

        .diary-ai-text-scroll-area::-webkit-scrollbar {
            width: 4px;
        }

        .diary-ai-text-scroll-area::-webkit-scrollbar-track {
            background: transparent;
        }

        .diary-ai-text-scroll-area::-webkit-scrollbar-thumb {
            background: rgba(139, 69, 19, 0.3);
            border-radius: 2px;
        }

        .diary-ai-text-scroll-area p {
            margin: 0;
            font-size: 14px;
            color: #5d4037;
            line-height: 1.8;
            text-align: left;
        }

        /* 閸忔娊妫撮幐澶愭尦 - 闂呮劘妫岄敍灞炬暭閻劎鍋ｉ崙鑽も敄閻ц棄顦╅崗鎶芥４ */
        .diary-ai-note-close {
            display: none;
        }

        /* --- 3. 鐠佸墽鐤嗛敓?- 鐏忎線娼伴柅澶嬪瀵湱锟?--- */
        .diary-settings-hint {
            text-align: center;
            padding: 60px 20px;
            color: #888;
            font-size: 16px;
        }

        .diary-settings-hint-icon {
            font-size: 60px;
            margin-bottom: 20px;
            opacity: 0.6;
        }

        .diary-settings-hint-text {
            line-height: 1.8;
        }

        /* 鐏忎線娼伴柅澶嬪瀵湱锟?*/
        .diary-cover-picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 300;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .diary-cover-picker-overlay.show {
            display: flex;
            opacity: 1;
        }

        .diary-cover-picker-title {
            color: #fff;
            font-size: 18px;
            margin-bottom: 25px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .diary-cover-carousel {
            width: 100%;
            height: 320px;
            display: flex;
            align-items: center;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 20px 0;
            scroll-behavior: smooth;
        }

        .diary-cover-carousel::-webkit-scrollbar {
            display: none;
        }

        .diary-cover-carousel-inner {
            display: flex;
            padding: 0 calc(50vw - 90px);
            gap: 20px;
        }

        .diary-cover-card {
            flex: 0 0 180px;
            height: 260px;
            border-radius: 12px;
            background-size: cover;
            background-position: center;
            scroll-snap-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            position: relative;
            cursor: pointer;
        }

        .diary-cover-card.active {
            transform: scale(1.15);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

        .diary-cover-picker-actions {
            margin-top: 30px;
            display: flex;
            gap: 15px;
        }

        .diary-btn-cover-action {
            padding: 10px 25px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: transform 0.2s;
            border: none;
        }

        .diary-btn-cover-action:active {
            transform: scale(0.95);
        }

        .diary-btn-save-cover {
            background: #fbc2eb;
            color: #fff;
        }

        .diary-btn-cancel-cover {
            background: #fff;
            color: #888;
        }

        /* 濠婃垵濮╅幐鍥┿仛锟?*/
        .diary-carousel-dots {
            display: flex;
            gap: 8px;
            margin-top: 20px;
        }

        .diary-carousel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            transition: background 0.3s, transform 0.3s;
        }

        .diary-carousel-dot.active {
            background: #fbc2eb;
            transform: scale(1.3);
        }

        /* 閺冦儲婀￠柅澶嬪瀵湱锟?*/
        .diary-date-picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 400;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .diary-date-picker-overlay.show {
            display: flex;
            opacity: 1;
        }

        .diary-date-picker-modal {
            background: #fff;
            border-radius: 15px;
            padding: 25px;
            width: 280px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transform: scale(0.9);
            transition: transform 0.3s;
        }

        .diary-date-picker-overlay.show .diary-date-picker-modal {
            transform: scale(1);
        }

        .diary-date-picker-title {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }

        .diary-date-picker-row {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 20px;
        }

        .diary-date-picker-select {
            padding: 8px 5px;
            border: 2px solid #fbc2eb;
            border-radius: 8px;
            font-size: 13px;
            outline: none;
            background: #fff;
            color: #333;
            cursor: pointer;
            width: 75px;
        }

        .diary-date-picker-select:focus {
            border-color: #ff9cb7;
        }

        .diary-date-picker-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .diary-btn-date-action {
            padding: 10px 25px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: transform 0.2s;
        }

        .diary-btn-date-action:active {
            transform: scale(0.95);
        }

        .diary-btn-date-confirm {
            background: #fbc2eb;
            color: #fff;
        }

        .diary-btn-date-cancel {
            background: #f0f0f0;
            color: #666;
        }

        /* 閺冦儴顔囬弮銉︽埂閺嶅繑鐗遍敓?*/
        .diary-date-bar {
            margin-bottom: 12px;
            border-bottom: 2px dashed #e0d4c8;
            padding-top: 10px;
            padding-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .diary-date-text {
            font-weight: bold;
            color: #8d7b6a;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background 0.2s;
        }

        .diary-date-text:hover {
            background: rgba(251, 194, 235, 0.2);
        }

        /* 婢垛晜鐨甸崶鐐垼 */
        .diary-weather-icon {
            font-size: 1.6em;
            cursor: pointer;
            padding: 5px;
            border-radius: 5px;
            transition: background 0.2s;
        }

        .diary-weather-icon:hover {
            background: rgba(251, 194, 235, 0.2);
        }

        /* 婢垛晜鐨甸柅澶嬪瀵湱锟?*/
        .diary-weather-picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 400;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .diary-weather-picker-overlay.show {
            display: flex;
            opacity: 1;
        }

        .diary-weather-picker-modal {
            background: #fff;
            border-radius: 15px;
            padding: 20px;
            width: 320px;
            max-width: 90vw;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transform: scale(0.9);
            transition: transform 0.3s;
            overflow: hidden;
        }

        .diary-weather-picker-overlay.show .diary-weather-picker-modal {
            transform: scale(1);
        }

        .diary-weather-picker-title {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }

        .diary-weather-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 8px;
            margin-bottom: 15px;
            width: 100%;
        }

        .diary-weather-option {
            font-size: 22px;
            text-align: center;
            padding: 8px 4px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
        }

        .diary-weather-option:hover {
            background: rgba(251, 194, 235, 0.3);
            transform: scale(1.1);
        }

        .diary-weather-option.selected {
            background: #fbc2eb;
        }

        /* --- 缁惧湱鎮婇柅澶嬪閹稿锟?(閻栧崬锟? --- */
        .diary-texture-btn {
            font-size: 1.2em;
            cursor: pointer;
            padding: 3px 8px;
            border-radius: 5px;
            transition: transform 0.2s, background 0.2s;
            color: #ff6b8a;
        }

        .diary-texture-btn:hover {
            background: rgba(255, 183, 197, 0.2);
            transform: scale(1.1);
        }

        /* --- 缁惧湱鎮婇柅澶嬪瀵湱锟?--- */
        .diary-texture-picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 400;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .diary-texture-picker-overlay.show {
            display: flex;
            opacity: 1;
        }

        .diary-texture-picker-modal {
            background: #fff;
            border-radius: 15px;
            padding: 20px;
            width: 280px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            transform: scale(0.9);
            transition: transform 0.3s;
        }

        .diary-texture-picker-overlay.show .diary-texture-picker-modal {
            transform: scale(1);
        }

        .diary-texture-picker-title {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }

        .diary-texture-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 15px;
        }

        .diary-texture-option {
            height: 70px;
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            border: 2px solid #eee;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #666;
            gap: 5px;
        }

        .diary-texture-option:hover {
            transform: scale(1.02);
            border-color: #ffb7c5;
        }

        .diary-texture-option.selected {
            border-color: #fbc2eb;
            box-shadow: 0 0 0 2px rgba(251, 194, 235, 0.4);
        }

        .diary-texture-option .texture-icon {
            font-size: 24px;
        }

        /* 缁惧湱鎮婃０鍕潔 */
        .diary-texture-option.opt-grid {
            background-image:
                linear-gradient(#e8e8e8 1px, transparent 1px),
                linear-gradient(90deg, #e8e8e8 1px, transparent 1px);
            background-size: 12px 12px;
        }

        .diary-texture-option.opt-dots {
            background-image: radial-gradient(circle, #ddd 1px, transparent 1px);
            background-size: 8px 8px;
        }

        .diary-texture-option.opt-lines {
            background-image: linear-gradient(transparent 11px, #e8e8e8 1px);
            background-size: 100% 12px;
        }

        .diary-texture-option.opt-blank {
            background: #fcfcfc;
        }

        /* ========================================
           韫囧啯鍎忕拹瀵哥剨闁瀚ㄥ鍦崶 (Mood Sticker Picker)
        ======================================== */
        .diary-mood-picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 500;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .diary-mood-picker-overlay.show {
            display: flex;
            opacity: 1;
        }

        .diary-mood-picker-modal {
            background: #fff;
            border-radius: 20px;
            padding: 25px 20px;
            width: 320px;
            max-width: 90vw;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
            transform: scale(0.9);
            transition: transform 0.3s;
        }

        .diary-mood-picker-overlay.show .diary-mood-picker-modal {
            transform: scale(1);
        }

        .diary-mood-picker-title {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #ff6b8a;
            margin-bottom: 20px;
        }

        .diary-mood-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .diary-mood-item {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 12px;
            border: 3px solid transparent;
            cursor: pointer;
            transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
            overflow: hidden;
            background: #fef6f8;
        }

        .diary-mood-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .diary-mood-item:hover {
            transform: scale(1.08);
            border-color: #fbc2eb;
        }

        .diary-mood-item.selected {
            border-color: #ff6b8a;
            box-shadow: 0 3px 12px rgba(255, 107, 138, 0.4);
        }

        .diary-mood-picker-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .diary-btn-mood-skip {
            padding: 10px 25px;
            border-radius: 10px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            background: #f0f0f0;
            color: #888;
            transition: transform 0.2s;
        }

        .diary-btn-mood-confirm {
            padding: 10px 30px;
            border-radius: 10px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
            color: #fff;
            font-weight: bold;
            transition: transform 0.2s;
        }

        .diary-btn-mood-skip:active,
        .diary-btn-mood-confirm:active {
            transform: scale(0.95);
        }

        /* ========================================
           闁喗鍩戠粩鐘烩偓澶嬪瀵湱锟?(Stamp Picker)
        ======================================== */
        .diary-stamp-picker-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 500;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .diary-stamp-picker-overlay.show {
            display: flex;
            opacity: 1;
        }

        .diary-stamp-picker-modal {
            background: #fff;
            border-radius: 20px;
            padding: 25px 20px;
            width: 300px;
            max-width: 90vw;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
            transform: scale(0.9);
            transition: transform 0.3s;
            text-align: center;
        }

        .diary-stamp-picker-overlay.show .diary-stamp-picker-modal {
            transform: scale(1);
        }

        .diary-stamp-picker-title {
            font-size: 18px;
            font-weight: bold;
            color: #ff6b8a;
            margin-bottom: 15px;
        }

        .diary-stamp-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 15px;
        }

        .diary-stamp-item {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 10px;
            border: 3px solid transparent;
            cursor: pointer;
            transition: transform 0.2s, border-color 0.2s;
            overflow: hidden;
            background: #fef6f8;
        }

        .diary-stamp-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .diary-stamp-item:hover {
            transform: scale(1.08);
            border-color: #ffb7c5;
        }

        .diary-stamp-item.selected {
            border-color: #ff6b8a;
            box-shadow: 0 3px 12px rgba(255, 107, 138, 0.4);
        }

        .diary-stamp-picker-hint {
            font-size: 12px;
            color: #999;
            margin-bottom: 15px;
        }

        .diary-btn-stamp-confirm {
            padding: 10px 40px;
            border-radius: 10px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
            color: #fff;
            font-weight: bold;
            transition: transform 0.2s;
        }

        .diary-btn-stamp-confirm:active {
            transform: scale(0.95);
        }

        /* ========================================
           闁喗鍩戠粩鐘烩偓澶嬪閹稿锟?(瀹革缚绗呴敓?
        ======================================== */
        .diary-stamp-selector-btn {
            position: absolute;
            bottom: 30px;
            left: 15px;
            width: 36px;
            height: 36px;
            cursor: pointer;
            z-index: 50;
            transition: transform 0.2s;
            opacity: 0.85;
        }

        .diary-stamp-selector-btn:hover {
            transform: scale(1.1);
            opacity: 1;
        }

        .diary-stamp-selector-btn img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* ========================================
           閺冦儱宸婚弽鐓庣摍娑擃厾娈戠拹瀵哥剨閸滃矂鍋栭幋宕囩彿
        ======================================== */
        .diary-cell-mood {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            pointer-events: none;
            z-index: 5;
        }

        .diary-cell-mood img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .diary-cell-stamp {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 30px;
            height: 30px;
            pointer-events: none;
            z-index: 6;
            opacity: 0.9;
        }

        .diary-cell-stamp img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* ================= 閺冦儴顔嘇I閻㈢喎锟?- 閹峰秶鐝涘妤佸絻閻㈢粯鐗遍敓?================= */
        .diary-polaroid-frame {
            background: #fff;
            border: 3px solid #f5e6e8;
            border-radius: 4px;
            padding: 8px 8px 25px 8px;
            margin: 0 auto 15px auto;
            max-width: 200px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 182, 193, 0.3);
            position: relative;
            transform: rotate(-2deg);
            transition: all 0.3s ease;
        }

        .diary-polaroid-frame:hover {
            transform: rotate(0deg) scale(1.02);
        }

        .polaroid-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px 10px;
            background: linear-gradient(135deg, #ffeef2 0%, #fff5f7 100%);
            border-radius: 2px;
            min-height: 120px;
        }

        .polaroid-loading-icon {
            font-size: 32px;
            animation: paintBounce 1s ease-in-out infinite;
        }

        @keyframes paintBounce {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-8px) rotate(10deg);
            }
        }

        .polaroid-loading-text {
            font-size: 12px;
            color: #e8758f;
            margin-top: 8px;
            font-weight: 500;
        }

        .polaroid-loading-text::after {
            content: '';
            animation: loadingDots 1.5s infinite;
        }

        @keyframes loadingDots {
            0% {
                content: '\2728';
            }

            33% {
                content: '..';
            }

            66% {
                content: '...';
            }

            100% {
                content: '\2728';
            }
        }

        .polaroid-image {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 2px;
            display: none;
            background: #fdf5f7;
        }

        .polaroid-image.loaded {
            display: block;
        }

        .polaroid-caption {
            position: absolute;
            bottom: 5px;
            left: 8px;
            right: -4px;
            font-size: 10px;
            color: #b08a8e;
            text-align: center;
            font-family: 'ZCOOL KuaiLe', cursive, sans-serif;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ================= 4. 閺傛澘顤冮敍姘）鐠佺増褰冮悽璁虫唉娴滄帗鐗遍敓?================= */

        /* 1. 閸忋劌鐫嗛惇瀣禈瀵湱锟?(闁喚鍍甸敓? - 閺€閫涜礋閹剚璇為崷銊ょ┒缁涙儳锟?*/
        .diary-image-modal-overlay {
            display: none;
            /* 姒涙顓婚梾鎰 */
            position: absolute;
            /* 閺€閫涜礋 absolute */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            /* 闁繑妲戦懗灞炬珯 */
            z-index: 10;
            justify-content: center;
            align-items: center;
            /* backdrop-filter: blur(5px); 缁夊娅庡Ο锛勭ˇ */
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: 12px;
        }

        .diary-image-modal-overlay.show {
            display: flex;
            opacity: 1;
            justify-content: flex-end;
            /* 閸嬪繐锟?*/
            align-items: center;
            /* 閸ㄥ倻娲跨仦鍛厬 */
            padding-right: 15px;
            /* 閸欏疇绔熼敓?*/
        }

        /* 2. 婢堆冩槀鐎靛憡濯跨粩瀣繁閻╁憡锟?*/
        .diary-image-polaroid {
            background: #fff;
            width: 70%;
            max-width: 350px;
            padding: 15px 15px 50px 15px;
            /* 鎼存洟鍎撮悾娆戞缂佹瑦鏋冮敓?*/
            box-shadow: 6px 7px 5px 0px rgb(0 0 0 / 17%);
            transform: rotate(0deg) scale(0.9);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-radius: 2px;
            position: relative;
            margin-top: 150px;
        }

        .diary-image-modal-overlay.show .diary-image-polaroid {
            transform: rotate(0deg) scale(1);
            /* 瀵湱鐛ラ崙铏瑰箛閺冨墎娈戦崝銊ф暰 */
        }

        /* 閸ュ墽澧栭張顑跨秼 */
        .diary-image-main {
            width: 100%;
            aspect-ratio: 1;
            /* 瀵搫鍩楀锝嗘煙锟?*/
            object-fit: cover;
            background: #f0f0f0;
            border: 1px solid #eee;
            display: block;
        }

        /* 鎼存洟鍎撮幍瀣晸婢跺洦锟?*/
        .diary-image-caption {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 100%;
            text-align: center;
            font-family: 'ZCOOL KuaiLe', cursive;
            font-size: 18px;
            color: #444;
            transform: rotate(1deg);
        }

        /* 閸ュ墽澧栧鍦崶閻ㄥ嫬濮炴潪鑺ュ絹锟?*/
        .diary-image-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 1;
            background: linear-gradient(135deg, #ffeef2 0%, #fff5f7 100%);
        }

        .diary-image-loading-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .diary-image-loading-text {
            font-size: 14px;
            color: #e8758f;
        }

        /* 閸ュ墽澧栧鍦崶閸忔娊妫撮幐澶愭尦 */
        .diary-image-close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #666;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s;
        }

        .diary-image-close-btn:hover {
            transform: scale(1.1);
        }

        /* 3. 婢舵潙锟?Loading 閻楄锟?(閻㈢喎娴橀弮鑸垫▔锟? */
        .diary-avatar-loading {
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border-radius: 50%;
            border: 3px solid #ffb7c5;
            border-top-color: transparent;
            animation: avatarSpin 1s linear infinite;
            box-shadow: 0 0 10px rgba(255, 183, 197, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar-loading-spinner {
            width: 100%;
            height: 100%;
        }

        @keyframes avatarSpin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 婢舵潙鍎氱亸杈╁崕閸ョ偓锟?*/
        .diary-avatar-ready {
            position: absolute;
            bottom: -5px;
            right: -5px;
            width: 22px;
            height: 22px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            animation: readyPulse 2s infinite;
        }

        @keyframes readyPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }
        }

        /* 4. 妞ゅ爼鍎存潪缁樺絹锟?(Toast) - 閻㈣銈介崥搴¤剨锟?*/
        .diary-toast {
            position: fixed;
            top: calc(20px + var(--safe-area-inset-top));
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            background: rgba(255, 255, 255, 0.95);
            padding: 10px 20px;
            border-radius: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 10000;
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            border: 1px solid #ffdeeb;
            color: #59474a;
            font-size: 14px;
            font-weight: bold;
            pointer-events: none;
        }

        .diary-toast.show {
            transform: translateX(-50%) translateY(0);
            /* 濠婃垳绗呴敓?*/
            opacity: 1;
        }

        /* ================= 7. 娑旓缚淇婇敓?(Letter Layer) 閺嶅嘲锟?================= */

        /* 娑旓缚淇婃い鍨殻娴ｆ捁鍎楅敓?- 娴ｈ法锟?2.jpg閼冲本娅欓敓?*/
        #letter-layer {
            background-image: url('shuxin/02.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        /* 濮樻稑娲块崗澶愪紕锟?- 閸忓磭浼呴弮璺哄涧鐎电鍎楅弲顖氬綁閺嗘绱濇穱婵堟殌閻忣垰鍘滈崠鍝勭厵 */
        .letter-ambient-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle 200px at calc(100% - 60px) 120px,
                    transparent 0%,
                    transparent 20%,
                    rgba(255, 200, 120, 0.1) 35%,
                    rgba(255, 180, 100, 0.06) 45%,
                    rgba(15, 10, 8, 0.75) 65%,
                    rgba(15, 10, 8, 0.85) 100%);
            z-index: 100;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.8s ease;
        }

        .letter-ambient-overlay.lamp-off {
            opacity: 1;
        }

        /* 閺嗘牞澹婇崗澶嬫閺佸牊锟?- 娴犲海浼呭▔鈥茬秴缂冾喖褰傞敓?*/
        .letter-warm-glow {
            position: absolute;
            top: 130px;
            right: 40px;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle at 50% 0%,
                    rgba(255, 220, 150, 0.5) 0%,
                    rgba(255, 200, 120, 0.35) 15%,
                    rgba(255, 180, 100, 0.2) 30%,
                    rgba(255, 160, 80, 0.1) 50%,
                    rgba(255, 140, 60, 0.03) 70%,
                    transparent 100%);
            filter: blur(25px);
            animation: glowPulse 3s ease-in-out infinite;
            transform-origin: top center;
        }

        @keyframes glowPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.9;
            }

            50% {
                transform: scale(1.08);
                opacity: 1;
            }
        }

        /* 妞ゅ爼鍎撮崝鐔诲厴閹稿鎸抽敓?- 閻忣垳娈戝锔挎櫠 */
        .letter-top-btns {
            position: absolute;
            top: calc(13px + env(safe-area-inset-top, 0px));
            right: 145px;
            z-index: 150;
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: flex-start;
        }

        .letter-top-btn {
            width: 50px;
            height: 50px;
            cursor: pointer;
            transition: transform 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .letter-top-btn:active {
            transform: scale(0.9);
        }

        .letter-top-btn img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 閸氬﹦浼呯€圭懓锟?- 閸欏厖绗傜憴鎺撳亾锟?*/
        .letter-lamp-btn {
            position: absolute;
            top: 0;
            right: 20px;
            z-index: 1100;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* 閻忣垳鍍甸崶鍓у - 妞ゅ爼鍎寸槐褑鍒涚仦蹇撶妞ゅ爼锟?*/
        .lamp-shade {
            width: 100px;
            height: auto;
            position: relative;
            z-index: 3;
            transition: transform 0.3s ease;
            margin-top: -5px;
        }

        .lamp-shade:active {
            transform: scale(0.95);
        }

        /* 閻忣垱锟?- 閸婃帞鐤嗛幃顒佸瘯閸︺劎浼呯純鈺€绗呴敓?*/
        .lamp-bulb {
            width: 50px;
            height: 55px;
            position: relative;
            margin-top: -30px;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .lamp-bulb-svg {
            width: 100%;
            height: 100%;
        }

        /* 閻忣垱鍦洪悳鑽ゆ嫅 - 姒涙顓绘禍顔炬絻 */
        .bulb-glass {
            fill: #fff8e8;
            stroke: #e8d8a0;
            stroke-width: 1.5;
            transition: all 0.5s ease;
        }

        /* 娴滎喚浼呴悩璁规嫹?*/
        .lamp-bulb.lamp-on .bulb-glass {
            fill: #fff4d0;
        }

        /* 閻忣厾浼呴悩璁规嫹?*/
        .lamp-bulb.lamp-off .bulb-glass {
            fill: #d8c8b8;
            stroke: #b8a898;
            filter: none;
        }

        /* 閻忣垱鍦烘惔鏇為獓 */
        .bulb-base {
            fill: #c0a070;
            stroke: #a08860;
            stroke-width: 0.5;
        }

        /* 閻忣垯锟?*/
        .bulb-filament {
            stroke: #ffb040;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            transition: all 0.5s ease;
        }

        .lamp-bulb.lamp-on .bulb-filament {
            stroke: #ffdd66;
            animation: filamentGlow 1.5s ease-in-out infinite;
        }

        .lamp-bulb.lamp-off .bulb-filament {
            stroke: #8a7a70;
            filter: none;
        }

        @keyframes filamentGlow {

            0%,
            100% {
                opacity: 0.85;
            }

            50% {
                opacity: 1;
            }
        }

        /* 閻忣垱鍦烘稉瀣煙閻ㄥ嫬鍘滈敓?*/
        .lamp-glow-ring {
            position: absolute;
            bottom: -30px;
            left: 50%;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: radial-gradient(circle,
                    rgba(255, 220, 150, 0.6) 0%,
                    rgba(255, 200, 120, 0.3) 40%,
                    transparent 70%);
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 1;
        }

        .lamp-bulb.lamp-on .lamp-glow-ring {
            opacity: 1;
            animation: glowRingPulse 2s ease-in-out infinite;
        }

        @keyframes glowRingPulse {

            0%,
            100% {
                transform: translateX(-50%) scale(1);
            }

            50% {
                transform: translateX(-50%) scale(1.15);
            }
        }

        /* 閻忣垱鍦洪弽鍥╊劮 - 閸︺劍鏆ｆ稉顏嗕紖娑撳锟?*/
        .lamp-label {
            margin-top: 8px;
            font-size: 12px;
            color: #c08878;
            font-weight: bold;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
            z-index: 4;
        }

        .letter-lamp-btn:hover .lamp-label {
            color: #a06858;
        }

        .lamp-bulb.lamp-off~.lamp-label {
            color: #ffcc88;
            text-shadow: 0 0 10px rgba(255, 200, 120, 0.8);
        }

        /* ================= 8. 閺傛壆澧楁稊锔夸繆閸旂喕鍏橀弽宄扮础 ================= */

        /* 娑旓缚淇婇崘鍛啇鐎圭懓锟?- 閸忋劌鐫嗙憰鍡欐磰 */
        .letter-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 300;
            display: flex;
            flex-direction: column;
        }

        /* 娣囷紕鐒婇懗灞炬珯锟?*/
        .letter-paper-bg {
            position: absolute;
            top: 120px;
            left: 0;
            width: 100%;
            height: auto;
            min-height: 70%;
            object-fit: cover;
            object-position: top center;
            z-index: 1;
            pointer-events: none;
        }

        /* 1. 娣囷紕鐒婇柅澶嬪瀵湱锟?*/
        .stationery-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .stationery-modal-overlay.show {
            opacity: 1;
        }

        .stationery-modal {
            background: #fff;
            width: 85%;
            max-width: 320px;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .stationery-modal-overlay.show .stationery-modal {
            transform: scale(1);
        }

        .stationery-title {
            font-size: 18px;
            font-weight: bold;
            color: #59474a;
            margin-bottom: 20px;
        }

        .stationery-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .stationery-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            gap: 8px;
            transition: transform 0.2s;
        }

        .stationery-option:active {
            transform: scale(0.95);
        }

        /* 娣囷紕鐒婃０鍕潔锟?(娴ｈ法鏁mg) */
        .stationery-preview-img {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid #eee;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: border-color 0.2s, transform 0.2s;
        }

        .stationery-option:hover .stationery-preview-img {
            border-color: #ff9a9e;
            transform: scale(1.02);
        }

        .stationery-option span {
            font-size: 14px;
            color: #666;
        }

        .stationery-close {
            color: #999;
            font-size: 14px;
            cursor: pointer;
            margin-top: 10px;
        }

        /* 2. 娑旓箑鍟撻敓?- 閸欘垱绮撮敓?*/
        .letter-paper-area {
            position: relative;
            z-index: 2;
            flex: 1;
            overflow-y: auto;
            padding: 220px 60px 100px 70px;
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .letter-paper-content {
            position: relative;
            width: 100%;
            min-height: 100%;
        }

        /* 鏉堟挸鍙嗛敓?& 闂€婊冨剼锟?*/
        .letter-write-textarea,
        .letter-write-mirror {
            width: 100%;
            height: 220px;
            min-height: 330px;
            background: transparent;
            border: none;
            outline: none;
            font-size: 14px;
            line-height: 1.8;
            color: #777;
            font-family: 'ZCOOL KuaiLe', cursive, sans-serif;
            resize: none;
            padding: 0;
            margin: 0;
            word-wrap: break-word;
            white-space: pre-wrap;
            overflow-wrap: break-word;
        }

        .letter-write-textarea {
            position: relative;
            z-index: 2;
            color: #777;
        }

        .letter-write-mirror {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1;
            visibility: hidden;
            pointer-events: none;
        }

        /* 3. 缂囪姤鐦虹粭鏂垮З锟?*/
        .feather-pen-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            min-height: 330px;
            pointer-events: none;
            z-index: 10;
            overflow: visible;
        }

        .letter-feather-pen {
            position: absolute;
            width: 30px;
            height: auto;
            top: 0;
            left: 0;
            transform-origin: 100% 100%;
            transition: top 0.1s ease-out, left 0.1s ease-out;
            pointer-events: none;
        }

        /* 娑旓箑鍟撻崝銊ф暰 */
        .letter-feather-pen.writing {
            animation: writeShake 0.2s infinite;
        }

        @keyframes writeShake {
            0% {
                transform: rotate(0deg) translateY(0);
            }

            25% {
                transform: rotate(-2deg) translateY(-2px);
            }

            50% {
                transform: rotate(0deg) translateY(0);
            }

            75% {
                transform: rotate(2deg) translateY(-1px);
            }

            100% {
                transform: rotate(0deg) translateY(0);
            }
        }

        /* 閹稿鎸抽敓?- 閸ュ搫鐣炬惔鏇㈠劥 */
        .letter-write-actions {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            display: flex;
            justify-content: center;
            gap: 15px;
            z-index: 10;
            background: transparent;
        }

        .letter-action-btn {
            padding: 10px 24px;
            border: none;
            border-radius: 20px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .letter-action-btn:active {
            transform: scale(0.95);
        }

        .btn-send {
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
            color: #fff;
        }

        .btn-clear {
            background: linear-gradient(135deg, #ffcccc 0%, #ffa3bd 100%);
            color: #fff;
        }

        .btn-close {
            background: #fff;
            color: #999;
        }

        /* 娣囷紕鐒婃鐐惰泲閸斻劎锟?- 閸欘亜顕穱锛勭剨闁劌鍨庨悽鐔告櫏 */
        @keyframes letterFlyAway {
            0% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }

            40% {
                transform: scale(0.9) translateY(-20px);
                opacity: 1;
            }

            100% {
                transform: scale(0.3) translate(100px, -250px) rotate(15deg);
                opacity: 0;
            }
        }

        .letter-container.sending .letter-paper-bg,
        .letter-container.sending .letter-paper-area {
            animation: letterFlyAway 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .letter-container.sending .letter-write-actions {
            opacity: 0;
            transition: opacity 0.3s;
        }

        .letter-container.sending {
            pointer-events: none;
        }

        /* 缁涘绶熼崶鐐颁繆鐟曞棛娲婇敓?*/
        .letter-waiting-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .waiting-content {
            text-align: center;
            color: #fff;
        }

        .waiting-icon {
            font-size: 60px;
            margin-bottom: 20px;
            animation: floatIcon 2s ease-in-out infinite;
        }

        @keyframes floatIcon {

            0%,
            100% {
                transform: translateY(0) rotate(-5deg);
            }

            50% {
                transform: translateY(-15px) rotate(5deg);
            }
        }

        .waiting-text {
            font-size: 18px;
            color: #ffeedd;
            letter-spacing: 2px;
        }

        .waiting-dots {
            animation: dotsAnimation 1.5s infinite;
        }

        @keyframes dotsAnimation {
            0% {
                content: '\2728';
            }

            33% {
                opacity: 0.5;
            }

            66% {
                opacity: 0.8;
            }

            100% {
                opacity: 1;
            }
        }

        /* ================= 8. 娣囷紕鐒婇柅澶嬪濠婃垵娼″鍦崶 ================= */

        .stationery-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .stationery-modal-overlay.show {
            opacity: 1;
        }

        .stationery-modal-title {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 25px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .stationery-slider-container {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 0;
            /* 绾喕绻氱€圭懓娅掗懗鑺ヮ劀绾喛顓哥粻妤佺泊閸斻劌顔旀惔?*/
            position: relative;
        }

        .stationery-slider-container::-webkit-scrollbar {
            display: none;
        }

        .stationery-slider {
            display: flex;
            padding-left: calc(50vw - 70px);
            padding-right: 0;
            gap: 15px;
            min-height: 280px;
            align-items: center;
        }

        .stationery-item {
            flex: 0 0 140px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            scroll-snap-align: center;
            transition: transform 0.3s ease;
        }

        /* 閺堚偓閸氬簼绔存稉鐚em闂団偓鐟曚浇鍐绘径鐔烘畱閸欏疇绔熺捄婵囧閼宠姤绮﹂崚棰佽厬锟?*/
        .stationery-item:last-child {
            margin-right: 50vw;
        }

        .stationery-item.active {
            transform: scale(1.15);
        }

        .stationery-item:not(.active) {
            transform: scale(0.85);
            opacity: 0.7;
        }

        .stationery-img {
            width: 130px;
            height: 180px;
            border-radius: 8px;
            object-fit: cover;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            transition: box-shadow 0.3s ease;
        }

        .stationery-item.active .stationery-img {
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        }

        .stationery-name {
            font-size: 14px;
            color: #fff;
            text-align: center;
        }

        /* ================= 9. 鐟欐帟澹婇柅澶嬪瀵湱锟?================= */


        /* 閺€鏈典繆娴滅儤褰佺粈鐑樻蒋 */
        .letter-recipient-bar {
            position: absolute;
            top: calc(75px + env(safe-area-inset-top, 0px));
            left: 55px;
            z-index: 150;
            font-size: 14px;
            color: #8b7355;
            white-space: nowrap;
            background: #FFE6EA;
            padding: 8px 16px;
            border-radius: 25px;
            border: 2px solid #ebb5be;
        }

        .letter-recipient-bar strong {
            color: #6b5344;
            font-weight: bold;
        }

        /* 鐟欐帟澹婂鍦崶闁喚锟?*/
        .character-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .character-modal-overlay.show {
            opacity: 1;
        }

        /* 鐟欐帟澹婂鍦崶 */
        .character-modal {
            background: #fff;
            width: 85%;
            max-width: 340px;
            max-height: 70vh;
            border-radius: 16px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .character-modal-overlay.show .character-modal {
            transform: scale(1);
        }

        .character-modal-title {
            font-size: 18px;
            font-weight: bold;
            color: #59474a;
            text-align: center;
            margin-bottom: 15px;
        }

        /* 鐟欐帟澹婇崚妤勶拷?*/
        .character-list {
            flex: 1;
            overflow-y: auto;
            max-height: 300px;
            margin-bottom: 15px;
        }

        .character-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 8px;
            background: #fef8f8;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid transparent;
        }

        .character-item:hover {
            background: #fff0f5;
            border-color: #ffc0cb;
        }

        .character-item.selected {
            background: #fff0f5;
            border-color: #ff9a9e;
        }

        .char-main {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
        }

        .char-actions {
            display: flex;
            gap: 8px;
            margin-left: 10px;
            flex-shrink: 0;
        }

        .char-action-btn {
            font-size: 16px;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s, transform 0.2s;
        }

        .char-action-btn:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        .char-avatar-placeholder {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .char-info {
            flex: 1;
            overflow: hidden;
        }

        .char-name {
            font-size: 15px;
            font-weight: bold;
            color: #59474a;
            margin-bottom: 2px;
        }

        .char-desc {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 濞ｈ濮炵憴鎺曞鐞涖劌锟?*/
        .add-character-form {
            background: #fef8f8;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
        }

        .char-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ffe0e6;
            border-radius: 8px;
            font-size: 14px;
            margin-bottom: 10px;
            outline: none;
            transition: border-color 0.2s;
        }

        .char-input:focus {
            border-color: #ffb6c1;
        }

        .char-form-btns {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .char-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 15px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-cancel {
            background: #f0f0f0;
            color: #666;
        }

        .btn-confirm {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            color: #fff;
        }

        /* 瀵湱鐛ユ惔鏇㈠劥閹垮秳锟?*/
        .character-modal-actions {
            display: flex;
            justify-content: space-between;
            gap: 8px;
        }

        .add-char-btn {
            flex: 1;
            text-align: center;
            padding: 12px 8px;
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
            color: #fff;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .add-char-btn.compact {
            padding: 10px 6px;
            font-size: 13px;
        }

        .add-char-btn:active {
            transform: scale(0.95);
        }

        .close-char-btn {
            flex: 1;
            text-align: center;
            padding: 12px 8px;
            background: #f0f0f0;
            color: #666;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .close-char-btn.compact {
            padding: 10px 6px;
            font-size: 13px;
        }

        .close-char-btn:active {
            transform: scale(0.95);
        }

        .empty-char-hint {
            text-align: center;
            color: #ccc;
            padding: 30px;
            font-size: 14px;
        }

        /* 閼辨梻閮存禍娲偓澶嬪瀵湱锟?*/
        .contact-selector-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1100;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .contact-selector-overlay.show {
            display: flex;
            opacity: 1;
        }

        .contact-selector-modal {
            background: #fff;
            width: 90%;
            max-width: 400px;
            max-height: 80vh;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .contact-selector-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }

        .contact-selector-back {
            font-size: 28px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .contact-selector-title {
            font-size: 18px;
            font-weight: bold;
        }

        .contact-selector-content {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }

        .contact-selector-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 10px;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid transparent;
        }

        .contact-selector-item:hover {
            background: #e9ecef;
            border-color: #667eea;
        }

        .contact-selector-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .contact-selector-info {
            flex: 1;
            min-width: 0;
        }

        .contact-selector-name {
            font-size: 15px;
            font-weight: bold;
            color: #333;
            margin-bottom: 3px;
        }

        .contact-selector-persona {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .contact-selector-empty {
            text-align: center;
            color: #999;
            padding: 40px 20px;
            font-size: 14px;
        }

        .contact-selector-empty-icon {
            font-size: 48px;
            margin-bottom: 10px;
            opacity: 0.3;
        }

        /* 娣団€崇殱瀵湱鐛ラ柆顔惧兊 - 閸忋劌鐫嗛柅蹇旀 */
        .envelope-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .envelope-modal-overlay.show {
            opacity: 1;
        }

        /* 閺嶅洭锟?*/
        .envelope-modal-title {
            color: #fff;
            font-size: 18px;
            margin-bottom: 25px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        /* 娣団€崇殱濠婃垵娼＄€圭懓锟?- 娴犳寧妫╃拋鐗堟拱鐏忎線娼伴柅澶嬪 */
        .envelope-slider-container {
            width: 100%;
            height: 180px;
            display: flex;
            align-items: center;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 20px 0;
            scroll-behavior: smooth;
        }

        .envelope-slider-container::-webkit-scrollbar {
            display: none;
        }

        .envelope-slider {
            display: flex;
            padding: 0 calc(50% - 55px);
            gap: 10px;
            min-height: 160px;
            align-items: center;
        }

        /* 閸楁洑閲滄穱鈥崇殱 */
        .envelope-item {
            flex: 0 0 110px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            scroll-snap-align: center;
            transition: transform 0.3s ease;
        }

        .envelope-item:active {
            transform: scale(0.92);
        }

        .envelope-item.active {
            transform: scale(1.25);
        }

        .envelope-item:not(.active) {
            transform: scale(0.85);
            opacity: 0.7;
        }

        .envelope-icon {
            width: 100px;
            height: 75px;
            border-radius: 8px;
            position: relative;
            margin-bottom: 10px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
        }

        .envelope-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .envelope-item.active .envelope-icon {
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
        }

        /* ===== 娣団€崇殱闁瀚ㄩ崳銊︾壉锟?===== */

        .envelope-selector {
            margin: 15px 0;
        }

        .envelope-selector-label {
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
        }

        .envelope-options {
            display: flex;
            gap: 8px;
            justify-content: space-between;
        }

        .envelope-option {
            flex: 1;
            aspect-ratio: 4/3;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #eee;
            transition: all 0.2s;
        }

        .envelope-option img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .envelope-option.selected {
            border-color: #ff9a9e;
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(255, 154, 158, 0.3);
        }

        .envelope-option:active {
            transform: scale(0.95);
        }




        .envelope-name {
            font-size: 13px;
            color: #59474a;
            text-align: center;
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .envelope-hint {
            text-align: center;
            color: #bbb;
            font-size: 12px;
            margin-top: 10px;
        }

        .envelope-close {
            text-align: center;
            color: #999;
            font-size: 14px;
            cursor: pointer;
            margin-top: 15px;
        }

        .empty-envelope-hint {
            text-align: center;
            color: #ccc;
            padding: 40px 20px;
            font-size: 14px;
        }

        /* 娣団€叉閸掓銆冨鍦崶 */
        .letter-list-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            z-index: 1001;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .letter-list-modal-overlay.show {
            opacity: 1;
        }

        .letter-list-modal {
            background: #fff;
            width: 90%;
            max-width: 360px;
            max-height: 70vh;
            border-radius: 16px;
            overflow: hidden;
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
        }

        .letter-list-modal-overlay.show .letter-list-modal {
            transform: scale(1);
        }

        .letter-list-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            padding-top: calc(15px + env(safe-area-inset-top));
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        }

        .letter-list-back {
            font-size: 28px;
            color: #fff;
            cursor: pointer;
            width: 30px;
            text-align: center;
        }

        .letter-list-title {
            font-size: 16px;
            font-weight: bold;
            color: #fff;
        }

        .letter-list-content {
            padding: 15px;
            max-height: calc(70vh - 60px);
            overflow-y: auto;
        }

        /* 閸楁洖鐨濇穱鈥叉閺夛紕锟?*/
        .letter-item {
            background: #fef8f8;
            border-radius: 10px;
            padding: 12px 15px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid #ffe4e4;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .letter-item-content {
            flex: 1;
            overflow: hidden;
        }

        .letter-item-delete {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #ffebee;
            color: #ff6b81;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s;
        }

        .letter-item-delete:hover {
            background: #ff6b81;
            color: #fff;
        }

        .letter-item:hover {
            background: #fff0f5;
            border-color: #ffc0cb;
        }

        .letter-item-date {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }

        .letter-item-preview {
            font-size: 14px;
            color: #59474a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 娣団€叉鐠囷附鍎忓鍦崶 - 閸忋劌鐫嗘穱锛勭剨閺嶅嘲锟?*/
        .letter-detail-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 1002;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .letter-detail-modal-overlay.show {
            opacity: 1;
        }

        /* 鎼存洟鍎撮幐澶愭尦缂佸嫬顔愰崳?- 娴ｈ法鏁ixed鐎规矮缍呴敍灞芥祼鐎规艾婀仦蹇撶鎼存洟锟?*/
        .letter-detail-bottom-btns {
            position: fixed;
            bottom: calc(20px + env(safe-area-inset-bottom));
            left: 50%;
            transform: translateX(-50%);
            z-index: 1010;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 12px;
            justify-content: center;
            align-items: center;
        }

        /* 鎼存洟鍎撮幐澶愭尦闁氨鏁ら弽宄扮础 */
        .letter-detail-btn {
            padding: 10px 22px;
            border: none;
            border-radius: 20px;
            font-size: 13px;
            font-weight: bold;
            color: #fff;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s, box-shadow 0.2s;
            /* 绾喕绻氶弬鍥х摟濮樻潙閽╅弰鍓с仛娑撳秵宕茬悰宀嬬礉闂冨弶顒涢幐澶愭尦鐞氼偄甯囩紓?*/
            white-space: nowrap;
            writing-mode: horizontal-tb;
            flex-shrink: 0;
        }

        .letter-detail-btn:active {
            transform: scale(0.95);
        }

        /* 鏉╂柨娲栭幐澶愭尦閺嶅嘲锟?*/
        .letter-back-btn {
            background: linear-gradient(135deg, #ffb6c1 0%, #ffc0cb 100%);
        }

        /* 閺冦儲婀￠弰鍓с仛 - 閹剚璇炴い鍫曞劥 */
        .letter-detail-date-bar {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #ffb6c1 0%, #ffc0cb 100%);
            padding: 8px 20px;
            border-radius: 20px;
            box-shadow: 0 4px 15px rgba(255, 182, 193, 0.4);
            font-size: 14px;
            color: #fff;
            z-index: 10;
        }

        /* 閸忋劌鐫嗘穱锛勭剨鐎圭懓锟?*/
        .letter-detail-paper-container {
            position: relative;
            width: 92%;
            max-width: 400px;
            height: 85vh;
            max-height: 700px;
            border-radius: 8px;
            overflow: hidden;
            background: transparent;
            animation: letterPaperSlideIn 0.4s ease-out;
        }

        @keyframes letterPaperSlideIn {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* 娣囷紕鐒婇懗灞炬珯锟?*/
        .letter-detail-paper-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        /* 閸愬懎顔愬姘З锟?- 闂勬劕鍩楅崷銊や繆缁剧褰茬憴浣稿隘閸╃喎鍞撮敍灞艰礋鎼存洟鍎撮幐澶愭尦閻ｆ瑥鍤粚娲？ */
        .letter-detail-paper-area {
            position: absolute;
            top: 100px;
            left: 45px;
            right: 45px;
            bottom: 90px;
            z-index: 2;
            overflow-y: auto;
            padding: 10px 5px 10px 5px;
        }

        /* 娣団€叉閺傚洤鐡ч崘鍛啇 */
        .letter-detail-content {
            font-size: 14px;
            line-height: 1.8;
            color: #777;
            font-family: 'ZCOOL KuaiLe', cursive, sans-serif;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        /* 閸ョ偘淇婇崘鍛啇閸栧搫鍣虹亸鎴犫敄鐞涘矂妫块敓?*/
        #letterReplyContent {
            white-space: pre-wrap;
            line-height: 1.5;
        }

        /* 閺€鏈电瑓閸ョ偘淇婇幐澶愭尦 */
        .letter-reply-close-btn {
            position: fixed;
            bottom: calc(15px + var(--safe-area-inset-bottom));
            left: 50%;
            transform: translateX(-50%);
            z-index: 600;
            padding: 12px 30px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border: none;
            border-radius: 25px;
            font-size: 15px;
            font-weight: bold;
            color: #fff;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(255, 154, 158, 0.4);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .letter-reply-close-btn:active {
            transform: translateX(-50%) scale(0.95);
        }

        /* 閺屻儳婀呴崶鐐颁繆閹稿锟?(娣団€叉鐠囷附鍎忔惔鏇㈠劥) - 鐠嬪啯鏆ｆ稉鍝勬躬閹稿鎸崇紒鍕厬閺勫墽锟?*/
        .view-reply-btn {
            padding: 10px 22px;
            background: linear-gradient(135deg, #ffd89b 0%, #fecfef 100%);
            border: none;
            border-radius: 20px;
            font-size: 13px;
            font-weight: bold;
            color: #fff;
            cursor: pointer;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s, box-shadow 0.2s;
            /* 绾喕绻氶弬鍥х摟濮樻潙閽╅弰鍓с仛娑撳秵宕茬悰宀嬬礉闂冨弶顒涢幐澶愭尦鐞氼偄甯囩紓?*/
            white-space: nowrap;
            writing-mode: horizontal-tb;
            flex-shrink: 0;
        }

        .view-reply-btn:active {
            transform: scale(0.95);
        }

        /* ================= 缁変焦鏆€妞ゅ灚鐗遍敓?================= */

        /* 鐠佸墽鐤嗛幐澶愭尦 */
        .coach-settings-btn {
            position: absolute;
            top: calc(10px + var(--safe-area-inset-top));
            right: 15px;
            z-index: 100;
            cursor: pointer;
            padding: 5px;
            transition: transform 0.2s;
        }

        .coach-settings-btn img {
            width: 30px;
            height: 30px;
            object-fit: contain;
        }

        .coach-settings-btn:active {
            transform: scale(0.9);
        }

        /* 閸涖劍澧﹂崡鈥冲隘锟?*/
        .coach-week-checkin {
            display: flex;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 15px 10px;
            margin-top: 30px;
        }

        .week-day-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }

        .week-day-label {
            font-size: 12px;
            color: #b0a0a0;
            font-weight: 500;
        }

        .week-day-circle {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 2px solid #f0e0e0;
            background: rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .week-day-circle.checked {
            background: #fff0f3;
            border-color: #ffb7c5;
        }

        .week-day-circle.checked .week-heart {
            display: block;
            color: #ffb7c5;
            font-size: 18px;
        }

        .week-day-circle.today {
            border-color: #8FD3FE;
            background: #f0f8ff;
        }

        .week-day-circle.today .week-heart {
            display: block;
            color: #8FD3FE;
            font-size: 18px;
        }

        .week-heart {
            display: none;
        }

        /* 鐠佸墽鐤嗗鍦崶 */
        .coach-settings-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 3000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(3px);
        }

        .coach-settings-box {
            width: 90%;
            max-width: 400px;
            max-height: 85vh;
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            animation: popIn 0.3s;
        }

        .coach-settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: linear-gradient(90deg, #fd5392 0%, #ff6b81 100%);
            color: white;
        }

        .coach-settings-header h3 {
            margin: 0;
            font-size: 18px;
        }

        .coach-settings-close {
            font-size: 28px;
            cursor: pointer;
            line-height: 1;
        }

        .coach-settings-content {
            padding: 15px 20px;
            overflow-y: auto;
            flex: 1;
        }

        .coach-section-title {
            font-size: 14px;
            font-weight: bold;
            color: #59474a;
            margin: 15px 0 10px 0;
            padding-bottom: 5px;
            border-bottom: 1px dashed #FFDEE9;
        }

        .coach-section-title:first-child {
            margin-top: 0;
        }

        .coach-form-row {
            margin-bottom: 12px;
        }

        .coach-form-row label {
            display: block;
            font-size: 13px;
            color: #888;
            margin-bottom: 5px;
        }

        .coach-form-row-inline {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }

        .coach-form-col {
            flex: 1;
        }

        .coach-form-col label {
            display: block;
            font-size: 13px;
            color: #888;
            margin-bottom: 5px;
        }

        .coach-input,
        .coach-select,
        .coach-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #FFDEE9;
            border-radius: 10px;
            font-size: 14px;
            background: #FFFAFA;
            /* Lighter background */
            color: #59474a;
        }

        .coach-input:focus,
        .coach-select:focus,
        .coach-textarea:focus {
            border-color: #ff6b81;
            outline: none;
            background: #fff;
        }

        .coach-textarea {
            resize: vertical;
            min-height: 60px;
        }

        .coach-bmi-display {
            padding: 10px 12px;
            background: linear-gradient(90deg, #e8f5e9 0%, #c8e6c9 100%);
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            color: #4caf50;
            text-align: center;
        }

        .coach-save-btn {
            width: calc(100% - 40px);
            margin: 15px 20px 10px 20px;
            padding: 12px;
            background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
            /* Light pink gradient */
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(255, 154, 158, 0.3);
        }

        .coach-contract-btn {
            width: calc(100% - 40px);
            margin: 0 20px 20px 20px;
            padding: 12px;
            background: linear-gradient(90deg, #ff758c 0%, #ff7eb3 100%);
            /* Slightly darker pink gradient */
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(255, 117, 140, 0.3);
        }

        .coach-save-btn:active,
        .coach-contract-btn:active {
            transform: scale(0.98);
        }

        /* 娴ｆ捇鍣告潻娑樺閸楋紕锟?*/
        .coach-progress-card {
            width: 90%;
            max-width: 350px;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #FFDEE9;
            border-radius: 20px;
            padding: 0;
            /* 婵″倹鐏夐張澶婂敶鏉堢绐涙导姘閸濆尝eader鐠愮绔熼敍灞炬暭锟? */
            margin-top: 15px;
            box-shadow: 0 2px 5px rgb(243 135 156 / 25%);
            overflow: hidden;
            /* 绾喕绻歨eader閸﹀棜顫楁稉宥嗗锟?*/
            flex-shrink: 0;
            /* 闂冨弶顒涚悮顐㈠竾锟?*/
        }

        /* 妞ゅ爼鍎寸划澶庡濡亝锟?*/
        .coach-card-header {
            background: #ffeef4;
            /* 濞村懐鐭囬懝鑼跺剹锟?*/
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            color: #59474a;
        }

        .header-item {
            font-size: 13px;
            color: #59474a;
        }

        .header-item strong {
            color: #ff6b81;
            font-weight: bold;
        }

        .header-title {
            color: #59474a;
            /* 娑擃參妫块弽鍥暯濞村懓锟?*/
            font-size: 13px;
        }


        /* 娑撳宕愰柈銊ュ瀻閸愬懎锟?*/
        .coach-card-body {
            padding: 15px 20px 20px 20px;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .progress-current-value-row {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 5px;
            margin-bottom: 15px;
            /* 娑撳簼绗呴弬纭呯箻鎼达附娼惃鍕？锟?*/
        }

        .current-weight-big {
            font-size: 42px;
            /* 缁嬪秴浜曢崝鐘层亣閺佹澘锟?*/
            font-weight: bold;
            color: #ff6b81;
            line-height: 1;
        }

        .progress-current-value-row .unit {
            font-size: 16px;
            color: #ff6b81;
            font-weight: 500;
        }

        .weight-edit-btn {
            background: none;
            border: none;
            font-size: 14px;
            /* 缂傗晛鐨柧鍛應 */
            cursor: pointer;
            padding: 5px;
            margin-left: 8px;
            opacity: 0.6;
            transition: opacity 0.3s;
        }

        .weight-edit-btn:hover {
            opacity: 1;
            transform: scale(1.1);
        }

        /* 鏉╂稑瀹抽弶鈥愁啇閸ｃ劏鐨熼敓?*/
        .progress-bar-container {
            position: relative;
            width: 100%;
            height: 20px;
            /* 娑旂喎褰叉禒銉┾偓鍌氱秼鐠嬪啫锟?*/
            display: flex;
            align-items: center;
        }

        .progress-bar-track {
            width: 100%;
            height: 12px;
            background: #f0f0f0;
            border-radius: 6px;
            position: relative;
            margin: 0;
            /* 閸樼粯甯€婢舵矮缍憁argin */
        }

        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            border-radius: 6px;
            transition: width 0.5s ease;
            position: relative;
            z-index: 1;
        }

        /* 闂冭埖顔岄懞鍌滃仯鐎圭懓锟?*/
        .progress-nodes-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }

        /* 閸楁洑閲滈懞鍌滃仯 */
        .progress-node {
            position: absolute;
            top: 50%;
            width: 8px;
            height: 8px;
            background: #fff;
            border: 2px solid #ff9a9e;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .progress-node.reached {
            background: #ff9a9e;
            border-color: #fff;
        }

        /* 15婢垛晙缍嬮柌宥堢Ъ閸斿灝宕遍敓?*/
        .coach-trend-card {
            width: 90%;
            max-width: 350px;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #FFDEE9;
            border-radius: 20px;
            padding: 0;
            margin-top: 15px;
            box-shadow: 0 2px 5px rgb(243 135 156 / 25%);
            overflow: hidden;
            flex-shrink: 0;
            /* 闂冨弶顒涚悮顐㈠竾锟?*/
        }

        .trend-chart-container {
            width: 100%;
            height: 120px;
            position: relative;
        }

        #coach-trend-canvas {
            width: 100%;
            height: 100%;
        }

        .trend-label {
            text-align: center;
            font-size: 13px;
            color: #aaa;
            margin-top: 8px;
        }

        /* 鐠佲晛顔愰崳銊ュ讲娴犮儲铆閸氭垶绮撮崝顭掔礉闂呮劘妫屽姘З閺夆€茬稻閼宠姤锟?*/
        .chart-scroll-wrapper {
            width: 100%;
            min-height: 150px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            /* iOS妞ょ儤绮﹀姘З */
            padding-bottom: 5px;
        }

        #weight-svg {
            display: block;
            min-height: 150px;
        }

        /* 闂呮劘妫屽姘З閺夆剝鐗遍敓?*/
        .chart-scroll-wrapper::-webkit-scrollbar {
            display: none;
        }

        /* SVG 闁插瞼娈戦弽宄扮础 */
        .chart-line {
            fill: none;
            stroke: #ff7b9c;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .chart-area {
            fill: url(#gradientPink);
            stroke: none;
        }

        .chart-dot {
            fill: white;
            stroke: #ff7b9c;
            stroke-width: 2;
        }

        .chart-text {
            font-size: 10px;
            fill: #ff7b9c;
            font-weight: bold;
            text-anchor: middle;
        }

        .chart-date-text {
            font-size: 10px;
            fill: #ccc;
            text-anchor: middle;
        }

        /* 閻㈢喐鍨氭禒濠冩）鐠佲€冲灊閹稿锟?*/
        .daily-plan-btn {
            width: 40%;
            margin: 15px auto;
            /* 鐏炲懍鑵戞稉鏂款杻閸旂姳绗傞梻纾嬬獩 */
            display: block;
            padding: 10px 0;
            background: linear-gradient(135deg, #ff6b81 0%, #ff9a9e 100%);
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(255, 107, 129, 0.4);
            transition: all 0.3s;
        }

        .daily-plan-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 129, 0.5);
        }

        .daily-plan-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* 娴犲﹥妫╃拋鈥冲灊閸楋紕锟?*/
        .daily-plan-card {
            width: 90%;
            max-width: 350px;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 248, 250, 0.9) 100%);
            border: 1px solid rgba(255, 183, 197, 0.4);
            border-radius: 20px;
            padding: 20px;
            margin-top: 15px;
            box-shadow: 0 8px 32px rgba(255, 107, 129, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            flex-shrink: 0;
            /* 闂冨弶顒涚悮顐㈠竾锟?*/
        }

        .plan-character-msg {
            background: linear-gradient(135deg, #fff0f3 0%, #ffe4ec 100%);
            padding: 15px;
            border-radius: 15px;
            font-size: 14px;
            line-height: 1.6;
            color: #59474a;
            margin-bottom: 15px;
            border-left: 4px solid #ff6b81;
        }

        .plan-section {
            margin-bottom: 15px;
        }

        .plan-section-title {
            font-size: 15px;
            font-weight: bold;
            color: #59474a;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 1px dashed #ffdee9;
        }

        .plan-meal {
            display: flex;
            padding: 8px 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .plan-meal:last-child {
            border-bottom: none;
        }

        .meal-label {
            width: 50px;
            font-weight: bold;
            color: #ff6b81;
            font-size: 13px;
        }

        .meal-content {
            flex: 1;
            font-size: 13px;
            color: #666;
        }

        .plan-workout-focus {
            font-size: 16px;
            font-weight: bold;
            color: #ff6b81;
            text-align: center;
            padding: 10px;
            background: #fff5f7;
            border-radius: 10px;
            margin-bottom: 8px;
        }

        .plan-workout-duration {
            text-align: center;
            font-size: 12px;
            color: #aaa;
            margin-bottom: 10px;
        }

        .plan-moves-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .plan-move-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            background: #fafafa;
            border-radius: 8px;
            font-size: 13px;
            gap: 10px;
        }

        .plan-move-item .move-name {
            color: #59474a;
            flex: 1;
            line-height: 1.4;
        }

        .plan-move-item .move-sets {
            background: linear-gradient(135deg, #ff9a9e 0%, #ff758c 100%);
            color: white;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* 婵傛垹瀹抽幐澶愭尦锟?- 閸掔娀娅庨柌宥咁槻鐎规矮绠熼敍灞煎▏閻劋绗傞棃銏㈡畱缂佺喍绔撮幐澶愭尦閺嶅嘲锟?*/

        .coach-view-contract-btn {
            width: calc(100% - 40px);
            margin: 0 20px 20px 20px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #ff6b81;
            border-radius: 25px;
            color: #ff6b81;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }

        /* 婵傛垹瀹冲鍦崶 */
        .contract-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 4000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .contract-modal-box {
            width: 92%;
            max-width: 400px;
            max-height: 85vh;
            background: linear-gradient(180deg, #fff8f0 0%, #fff 100%);
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            animation: popIn 0.3s;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }

        .contract-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: linear-gradient(135deg, #ff6b81 0%, #fd5392 100%);
            color: white;
        }

        .contract-modal-header h3 {
            margin: 0;
            font-size: 18px;
        }

        .contract-modal-close {
            font-size: 28px;
            cursor: pointer;
            line-height: 1;
        }

        .contract-modal-content {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }

        /* 婵傛垹瀹抽崘鍛啇閺嶅嘲锟?*/
        .contract-overview {
            position: relative;
            background: #fff;
            padding: 18px 20px;
            border-radius: 16px;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.8;
            color: #59474a;
            border: 1px solid #ffe0e8;
            box-shadow: 0 2px 8px rgba(255, 183, 197, 0.15);
        }

        .contract-overview::before {
            content: '想对 TA说：';
            display: block;
            font-size: 12px;
            color: #ff6b81;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .contract-summary {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            padding: 10px;
            background: #fff0f5;
            border-radius: 12px;
        }

        .contract-summary-item {
            text-align: center;
        }

        .contract-summary-item .label {
            font-size: 12px;
            color: #888;
        }

        .contract-summary-item .value {
            font-size: 20px;
            font-weight: bold;
            color: #ff6b81;
        }

        .contract-phase {
            background: #fff;
            border: 2px solid #ffdee9;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 12px;
            position: relative;
        }

        .contract-phase-num {
            position: absolute;
            top: -10px;
            left: 15px;
            background: linear-gradient(135deg, #ff6b81 0%, #fd5392 100%);
            color: white;
            font-size: 12px;
            font-weight: bold;
            padding: 3px 10px;
            border-radius: 10px;
        }

        .contract-phase-name {
            font-size: 16px;
            font-weight: bold;
            color: #59474a;
            margin-top: 5px;
            margin-bottom: 10px;
        }

        .contract-phase-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            font-size: 13px;
        }

        .contract-phase-info .item {
            background: #f8f8f8;
            padding: 8px 10px;
            border-radius: 8px;
        }

        .contract-phase-info .item .label {
            color: #888;
            font-size: 11px;
        }

        .contract-phase-info .item .value {
            color: #59474a;
            font-weight: 500;
        }

        .contract-intensity {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 10px;
        }

        .intensity-bar {
            flex: 1;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }

        .intensity-fill {
            height: 100%;
            background: linear-gradient(90deg, #81c784 0%, #ffb74d 50%, #e57373 100%);
            border-radius: 4px;
        }

        .intensity-label {
            font-size: 12px;
            color: #888;
            min-width: 50px;
        }

        .contract-regen-btn {
            width: calc(100% - 40px);
            margin: 15px 20px;
            padding: 12px;
            background: #f0f0f0;
            border: none;
            border-radius: 25px;
            color: #666;
            font-size: 14px;
            cursor: pointer;
        }

        /* 閸旂姾娴囬悩璁规嫹?*/
        .contract-loading {
            text-align: center;
            padding: 40px 20px;
        }

        .contract-loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* 鐎瑰本鍨氶幍鎾冲幢閹稿锟?*/
        .coach-checkin-btn {
            width: 100%;
            padding: 14px;
            margin-top: 20px;
            background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
            transition: all 0.3s;
        }

        .coach-checkin-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.5);
        }

        .coach-checkin-btn:active {
            transform: scale(0.98);
        }

        /* ==================== 娑撴牜鏅稊锔界壉锟?==================== */

        /* 娑撴牜鏅稊锕€鍨悰銊ヮ啇锟?*/
        .wb-container-scroll {
            max-height: 40vh;
            overflow-y: auto;
            margin-bottom: 20px;
            padding: 10px;
            background: var(--theme-card-bg);
            border-radius: 15px;
            border: 2px solid var(--theme-card-border);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
        }

        /* 閸掑棛绮嶉弽宄扮础 */
        .wb-group {
            margin-bottom: 15px;
            background: var(--theme-card-bg);
            border-radius: 12px;
            border: 1px solid var(--theme-card-border);
            overflow: hidden;
        }

        .wb-group-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background: var(--theme-input-bg);
            cursor: pointer;
            user-select: none;
        }

        .wb-group-header.ungrouped {
            background: var(--theme-input-bg);
        }

        .wb-group-title {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-brown);
            font-weight: bold;
        }

        .wb-group-arrow {
            font-size: 12px;
            transition: transform 0.2s;
        }

        .wb-group-arrow.collapsed {
            transform: rotate(-90deg);
        }

        .wb-group-count {
            font-size: 12px;
            color: var(--theme-sub-text);
            font-weight: normal;
        }

        .wb-group-actions {
            display: flex;
            gap: 8px;
        }

        .wb-group-btn {
            font-size: 14px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .wb-group-btn:hover {
            opacity: 1;
        }

        .wb-group-content {
            padding: 10px;
        }

        .wb-group-content.collapsed {
            display: none;
        }

        /* 閺夛紕娲伴弽宄扮础 */
        .wb-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            margin-bottom: 8px;
            background: var(--theme-input-bg);
            border-radius: 10px;
            border: 1px solid var(--theme-card-border);
            transition: all 0.2s;
        }

        .wb-item:hover {
            border-color: var(--theme-primary);
            box-shadow: 0 2px 8px rgba(255, 183, 197, 0.3);
        }

        .wb-item-main {
            flex: 1;
            cursor: pointer;
            overflow: hidden;
        }

        .wb-item-title {
            font-weight: bold;
            color: var(--text-brown);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .wb-item-position {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            color: white;
        }

        .wb-item-content {
            font-size: 12px;
            color: var(--theme-sub-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .wb-item-del {
            padding: 5px 10px;
            font-size: 16px;
            cursor: pointer;
            background: none;
            border: none;
            transition: transform 0.2s;
        }

        .wb-item-del:hover {
            transform: scale(1.2);
        }

        /* 鏉堟挸鍙嗛崠鍝勭厵閺嶅嘲锟?*/
        .wb-input-section {
            margin-top: 15px;
        }

        .wb-options-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 15px 0;
            flex-wrap: wrap;
        }

        .wb-position-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .wb-option-label {
            font-size: 13px;
            color: #888;
        }

        .wb-radio-label {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 13px;
            color: var(--text-brown);
            cursor: pointer;
        }

        .wb-group-selector {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .wb-group-dropdown {
            flex: 1;
            min-width: 150px;
        }

        .wb-new-group-input {
            flex: 1;
            min-width: 150px;
        }

        .wb-btn-row {
            display: flex;
            gap: 10px;
        }

        .wb-primary-btn {
            flex: 1;
        }

        .wb-cancel-btn {
            flex: 0.5;
            background: #94a3b8 !important;
        }

        /* ==================== 閼卞﹤銇夌€广倖鐗遍敓?==================== */

        /* 閼卞﹤銇夋い鐢告桨鐢啫锟?*/
        #chat-layer.active {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            padding-bottom: 0 !important;
            /* 缁夊娅庨崶鍝勭暰閼冲本娅欓敍灞藉帒鐠佺S閸斻劍鈧浇顔曠純?*/
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            /* 棣冩晙 闂冨弶顒涢弫缈犻嚋閼卞﹤銇夋い鐢告桨鐞氼偅绮撮崝顭掔礄閸欘亜鍘戠拋鍛婄Х閹垰灏崺鐔峰敶闁劍绮撮崝顭掔礆 */
            overflow: hidden;
            /* 棣冩晙 iOS闂冩彃鑴婇幀褎绮撮崝銊р敍锟?*/
            overscroll-behavior: none;
        }

        /* 閼卞﹤銇夌€佃壈鍩呴弽?*/
        .chat-nav-header {
            display: flex;
            align-items: center;
            justify-content: center;
            /* 棣冩暋 閺€鍦暏 fixed 鐎规矮缍呴敍宀勪缉閸忓秶浼€閻欐劒锟?sticky 锟?overflow:hidden 閻栬泛顔愰崳銊よ厬婢惰鲸鏅ョ€佃壈鍤ф稉瀣濞戝牆锟?*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1002;
            padding: 9.5px 15px;
            padding-top: calc(9.5px + env(safe-area-inset-top));
            background: #ffe9eb;
            border-bottom: 1px solid #FFDEE9;
            flex-shrink: 0;
            /* 移除毛玻璃模糊 + 改用纯色背景：
               1. 部分华为/低端浏览器在 fixed + backdrop-filter 组合下会偶发整层不渲染（只剩背景）
               2. 半透明 + 没有 blur 时消息会从顶栏透上来，看着像覆盖到顶部
               改成纯色后两个问题一起解决，视觉与原毛玻璃效果几乎一致。 */
        }

        .chat-nav-header .back-btn {
            display: none !important;
        }

        .chat-title-area {
            text-align: center;
        }

        #chat-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--text-brown);
        }

        .chat-settings-btn {
            position: absolute;
            right: 15px;
            font-size: 20px;
            cursor: pointer;
            padding: 5px;
        }

        /* 濞戝牊浼呴崠鍝勭厵 */
        .chat-msg-area {
            flex: 1;
            overflow-y: auto;
            padding: 15px 10px;
            padding-bottom: 15px;
            background: transparent;
            /* 用 margin-top 让消息滚动区物理上从顶栏下方开始，
               避免消息滚到半透明顶栏后面被透出来 */
            margin-top: calc(62px + env(safe-area-inset-top));
            margin-bottom: 0;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        .chat-empty-hint {
            text-align: center;
            padding-top: 80px;
        }

        /* 濞戝牊浼呯悰灞剧壉锟?*/
        .chat-msg-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
            gap: 10px;
        }

        .chat-msg-row.me {
            flex-direction: row-reverse;
        }

        /* 婢舵潙鍎氶弽宄扮础 */
        .chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
            border: none;
        }

        /* 濮樻梹鍦洪弽宄扮础 */
        .chat-bubble {
            max-width: 70%;
            padding: 6px 12px;
            /* 閸ㄥ倻娲块崘鍛扮珶鐠烘繂鍣虹亸蹇撳煂6px */
            border-radius: 15px;
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
        }

        /* 棣冨 缂堟槒鐦у鏃€鍦洪弽宄扮础 */
        .chat-translation-bubble {
            background: rgba(255, 255, 255, 0.85); /* 閸楀﹪鈧繑妲戦惂鍊熷 */
            color: #333 !important; /* 姒涙垼澹婏拷?*/
            padding: 8px 12px;
            border-radius: 8px; /* 閸ユ稖顫楅柈鑺ユЦ鐏忓繐娓剧憴?*/
            font-size: 13px;
            margin-top: 8px;
            margin-bottom: 2px;
            display: block;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            border: 1px solid rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            word-break: break-word;
            line-height: 1.4;
            position: relative;
        }

        /* 閺嗘绮﹀Ο鈥崇础闁倿锟?*/
        body[data-theme="dark"] .chat-translation-bubble,
        .mibudark .chat-translation-bubble {
            background: rgba(40, 40, 40, 0.85);
            color: #eee !important;
            border: 1px solid rgba(60, 60, 60, 0.5);
        }

        .chat-msg-row.ai .chat-bubble {
            background: #e5f7ff;
            /* 缁鎽戦懝鑼跺剹锟?*/
            color: #325881;
            border: 2px solid #8bb1d0;
            border-radius: 15px 15px 15px 4px;
            /* 18px -> 15px */
        }

        .chat-msg-row.me .chat-bubble {
            background: #ffe5eb;
            /* 缁瀛╅懝鑼跺剹锟?*/
            color: #b76683;
            border: 2px solid #d5aab4;
            border-radius: 15px 15px 4px 15px;
            /* 18px -> 15px */
        }

        #chat-layer {
            background: #fff;
            /* 缁夊锟?!important閿涘苯鍘戠拋绐睸閸斻劍鈧浇顔曠純顔垮剹锟?*/
            min-height: 100vh;
            /* 棣冩晙 iOS閿涙岸妲诲銏ゆ姜active閻樿埖鈧椒绗呯悮顐ｅ珛锟?*/
            overscroll-behavior: none;
        }

        /* 鏉堟挸鍙嗛敓?*/
        .chat-input-bar {
            display: flex;
            align-items: center;
            padding: 6px 12px;
            padding-bottom: calc(6px + env(safe-area-inset-bottom));
            background: rgba(255, 233, 235, 0.8);
            border-top: 1px solid #FFDEE9;
            gap: 8px;
            z-index: 100;
        }

        .chat-ai-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: linear-gradient(135deg, #FFB7C5 0%, #FF9A9E 100%);
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            flex-shrink: 0;
            transition: transform 0.2s;
        }

        .chat-ai-btn:active {
            transform: scale(0.95);
        }

        .chat-input {
            flex: 1;
            padding: 7px 14px;
            border: 2px solid #b7a2a9;
            border-radius: 25px;
            font-size: 14px;
            background: #faeaeb;
            color: var(--text-brown);
            font-family: inherit;
            min-height: 16px;
            max-height: 80px;
            overflow-y: auto;
            word-break: break-all;
            white-space: pre-wrap;
            -webkit-user-select: text;
            user-select: text;
        }

        .chat-input:empty::before {
            content: attr(data-placeholder);
            color: #b7a2a9;
            pointer-events: none;
        }

        .chat-input:focus {
            border-color: #a08a8f;
            outline: none;
        }

        .chat-send-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: var(--btn-gradient);
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            flex-shrink: 0;
            transition: transform 0.2s;
        }

        .chat-send-btn:active {
            transform: scale(0.95);
        }

        /* 鎼存洟鍎寸€圭懓锟?- flex-shrink:0 娣囨繃瀵旈懛顏嗗姧妤傛ê瀹抽敍宀勬暛閻╂ê鑴婇崙鐑樻锟?flex 鐢啫鐪懛顏勫З閹恒劋绗傞崢?*/
        .chat-bottom-container {
            flex-shrink: 0;
        }

        /* 棣冩暋 缁備焦顒汦dge/Chrome鐎靛棛鐖滅粻锛勬倞閸ｃ劌鑴婇崙?*/
        .chat-input::-ms-reveal,
        .chat-input::-ms-clear {
            display: none;
        }

        /* 棣冩暋 缁備焦顒涘ù蹇氼潔閸ｃ劏鍤滈崝銊ワ綖閸忓懏鐗卞蹇氼洬锟?*/
        .chat-input:-webkit-autofill,
        .chat-input:-webkit-autofill:hover,
        .chat-input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px #faeaeb inset !important;
            -webkit-text-fill-color: var(--text-brown) !important;
        }

        /* ==================== 濞戝牊浼呴崚妤勩€冩い鍨壉锟?==================== */

        /* 濞戝牊浼呴崚妤勩€冩い闈涚鐏炩偓 - 閸欘亜婀猘ctive閺冭埖妯夐敓?*/
        #chatlist-layer.active {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            /* 瑕嗙洊 .page-view 鐨?padding-bottom锛岄伩鍏?chat-list-container 搴曢儴涓?tab-bar 涔嬮棿闇插嚭涓嬪眰鑳屾櫙 */
            padding-bottom: 0;
        }

        /* 妞ゅ爼鍎寸€佃壈锟?*/
        .chatlist-nav-header {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 12px 15px;
            padding-top: calc(12px + env(safe-area-inset-top));
            background: rgba(255, 255, 255, 0.95);
            border-bottom: 1px solid #FFDEE9;
            flex-shrink: 0;
        }

        .chatlist-nav-header .back-btn {
            display: none !important;
        }

        #chatlist-title {
            font-size: 18px;
            font-weight: bold;
            color: var(--text-brown);
        }

        .chatlist-add-btn {
            position: absolute;
            right: 15px;
            font-size: 24px;
            color: var(--text-brown);
            cursor: pointer;
            padding: 5px 10px;
        }

        /* 閸愬懐鐤嗙亸蹇撳И閹靛瀵滈柦?*/
        .chatlist-assistant-btn {
            position: absolute;
            right: 55px;
            font-size: 20px;
            cursor: pointer;
            padding: 5px 10px;
            transition: transform 0.2s;
        }

        .chatlist-assistant-btn:active {
            transform: scale(0.85);
        }

        /* 鐏忓繐濮幍瀣綅閸楁洖鐣炬担?*/
        .assistant-menu {
            right: 50px !important;
        }

        /* 閺傛澘缂撻懣婊冨礋 */
        .chat-add-menu {
            position: absolute;
            top: 50px;
            right: 15px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            z-index: 200;
            overflow: hidden;
        }

        .chat-add-menu-item {
            padding: 12px 20px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-brown);
            transition: background 0.2s;
        }

        .chat-add-menu-item:hover {
            background: #FFF5F7;
        }

        /* 閼卞﹤銇夐崚妤勩€冪€圭懓锟?*/
        .chatlist-scroll {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 70px;
            background: transparent;
        }

        /* 閸掓銆冮敓?*/
        .chatlist-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.6);
            border-bottom: 1px solid #FFF5F7;
            cursor: pointer;
            transition: background 0.2s;
            position: relative;
            /* 娴兼ê瀵茬憴锔芥嚋娴ｆ捇锟?*/
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        .chatlist-item:active {
            background: #FFF0F5;
        }

        .chatlist-item.pinned {
            background: #fff0f5c9;
            /* 缂冾噣銆婃い纭呭剹閺咁垵锟?*/
            border-left: 4px solid #ffa4c2;
        }

        .chatlist-avatar {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            /* 閺€閫涜礋閸﹀棜顫楅弬鐟拌埌 */
            object-fit: cover;
            margin-right: 12px;
            /* 缁夊娅庨幓蹇氱珶 */
            flex-shrink: 0;
        }

        .chatlist-unread-dot {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 12px;
            height: 12px;
            background: #ff4757;
            border-radius: 50%;
            border: 2px solid #fff;
            z-index: 2;
        }

        .chatlist-info {
            flex: 1;
            min-width: 0;
        }

        .chatlist-name {
            font-size: 16px;
            font-weight: bold;
            color: var(--text-brown);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chatlist-status {
            font-size: 12px;
            color: #9ca3af;
            margin-top: 4px;
        }

        /* 閹峰绮﹂弽鍥槕 */
        .chatlist-blocked-badge {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #e74c3c;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-left: 8px;
        }

        /* 閼卞﹤銇夊鏃€鍦洪幏澶愮拨閹扮喎寰嗛崣?*/
        .chat-bubble-row {
            display: flex;
            align-items: center;
            gap: 6px;
            max-width: 100%;
        }

        .chat-blocked-badge {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #e74c3c;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* 闂€鎸庡瘻濮樻梹鍦洪懣婊冨礋 */
        .chat-context-menu {
            position: fixed;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            padding: 5px 0;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            min-width: 120px;
            animation: menuPopIn 0.2s ease-out;
            /* 闂冨弶顒涢懣婊冨礋鐞氼偅鍓版径鏍敍闁繒鍋ｉ崙?*/
            pointer-events: auto;
            touch-action: manipulation;
        }

        @keyframes menuPopIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(-5px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .chat-menu-option {
            padding: 10px 20px;
            font-size: 14px;
            color: var(--text-brown);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background 0.15s ease;
            /* 婢х偛濮炵憴锔芥嚋閸栧搫锟?*/
            min-height: 44px;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .chat-menu-option:hover,
        .chat-menu-option:active {
            background: #FFF5F7;
        }

        .chat-menu-option.delete {
            color: #ff6b81;
        }

        .chat-menu-option.delete:hover,
        .chat-menu-option.delete:active {
            background: #ffe5e9;
        }

        /* 鎼存洟鍎碩ab锟?*/
        .chatlist-tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: #fff;
            border-top: 1px solid #FFDEE9;
            padding-bottom: var(--safe-area-inset-bottom);
            z-index: 100;
        }

        .tab-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            color: #9ca3af;
            cursor: pointer;
            transition: color 0.2s;
        }

        .tab-item.active {
            font-weight: bold;
        }

        /* 閻劍鍩涚挧鍕灐锟?*/
        .profile-page {
            padding: 20px;
            padding-bottom: 100px;
            overflow-y: auto;
            max-height: calc(100vh - 120px);
        }

        .profile-avatar-large {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            border: 3px solid #FFB7C5;
            cursor: pointer;
        }

        /* ==================== 閸掓稑缂撶憴鎺曞瀵湱鐛ラ弽宄扮础 ==================== */

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3001;
        }

        .modal-box {
            background: #fff;
            border-radius: 20px;
            padding: 25px;
            width: 90%;
            max-width: 400px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            text-align: center;
            color: var(--text-brown);
            margin-bottom: 20px;
            font-size: 18px;
        }

        .avatar-upload-row {
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }

        .char-avatar-preview {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #FFF5F7 0%, #FFDEE9 100%);
            border: 3px dashed #FFB7C5;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background-size: cover;
            background-position: center;
            transition: all 0.3s;
        }

        .char-avatar-preview:hover {
            border-color: #FF9A9E;
        }

        .char-avatar-preview span {
            font-size: 28px;
            color: #FFB7C5;
        }

        .cancel-btn {
            text-align: center;
            color: #9ca3af;
            margin-top: 10px;
            cursor: pointer;
            font-size: 14px;
        }

        .cancel-btn:hover {
            color: #666;
        }

        /* ================= 娑撴牜鏅稊锕傗偓澶嬪閸ｃ劍鐗遍敓?================= */
        .wb-select-group {
            border-bottom: 1px solid #f0f0f0;
        }

        .wb-select-group:last-child {
            border-bottom: none;
        }

        .wb-select-group-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            background: #fef8f9;
            cursor: pointer;
            font-size: 13px;
            color: #59474a;
        }

        .wb-select-group-header:hover {
            background: #fff0f5;
        }

        .wb-select-group-header.ungrouped {
            background: #f8f8f8;
        }

        .wb-select-group-name {
            font-weight: 500;
        }

        .wb-select-group-count {
            color: #9ca3af;
            font-size: 12px;
        }

        .wb-select-item {
            display: flex;
            align-items: center;
            padding: 6px 10px 6px 20px;
            cursor: pointer;
            font-size: 13px;
            color: #59474a;
            transition: background 0.2s;
        }

        .wb-select-item:hover {
            background: #fff5f7;
        }

        .wb-select-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            accent-color: #ff6b81;
        }

        .wb-select-item label {
            flex: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .wb-select-position {
            font-size: 10px;
            padding: 1px 4px;
            border-radius: 3px;
            background: #60a5fa;
            color: white;
        }

        /* ================= 閸忋劌鐫嗙紓鏍帆瀵湱鐛ユ导妯哄閺嶅嘲锟?================= */
        #modal-fullscreen-edit {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff !important;
            z-index: 9999;
            flex-direction: column;
            animation: slideUp 0.3s ease-out;
            border-radius: 0 !important;
            box-shadow: none !important;
        }

        /* 閸忋劌鐫嗙紓鏍帆閹稿锟?*/
        .fullscreen-edit-btn {
            position: absolute;
            right: -4px;
            bottom: 8px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 4px 10px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 6px rgba(255, 107, 129, 0.3);
            z-index: 10;
        }

        .fullscreen-edit-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(255, 107, 129, 0.4);
        }

        .fullscreen-edit-btn:active {
            transform: translateY(0);
            box-shadow: 0 1px 4px rgba(255, 107, 129, 0.3);
        }

        @keyframes slideUp {
            from {
                transform: translateY(100%);
            }

            to {
                transform: translateY(0);
            }
        }

        .fullscreen-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 56px;
            padding: 0 16px;
            padding-top: var(--safe-area-inset-top);
            background: #ffffff;
            border-bottom: 1px solid #f0f0f0;
            flex-shrink: 0;
        }

        .fullscreen-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-brown);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .fullscreen-btn {
            border: none;
            background: none;
            font-size: 15px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            transition: opacity 0.2s;
        }

        .fullscreen-btn:active {
            opacity: 0.7;
        }

        .fullscreen-btn.cancel {
            color: #9ca3af;
            font-weight: 500;
            margin-left: -12px;
            /* Visual alignment */
        }

        .fullscreen-btn.save {
            background: var(--btn-gradient);
            color: white;
            font-weight: bold;
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(255, 107, 129, 0.3);
        }

        .fullscreen-textarea {
            flex: 1;
            width: 100%;
            border: none;
            padding: 20px;
            font-size: 16px;
            line-height: 1.6;
            resize: none;
            background: #ffffff;
            color: var(--text-brown);
            font-family: inherit;
        }

        .fullscreen-textarea:focus {
            background: #fff;
        }

        /* ================= 閸掓稑缂撶憴鎺曞瀵湱鐛ラ崗銊ョ潌锟?(Modal Add Fullscreen) ================= */
        #modal-add-char {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            /* 缁绢垳娅ч懗灞炬珯 */
            z-index: 9000;
            /* 濮ｆ柨鍙忕仦蹇曠椽鏉堟垵娅掓担搴礉娴ｅ棙鐦崗鏈电铂锟?*/
            flex-direction: column;
            animation: slideUp 0.3s ease-out;
        }

        .add-char-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 56px;
            padding: 0 16px;
            padding-top: var(--safe-area-inset-top);
            background: #ffffff;
            border-bottom: 1px solid #f0f0f0;
            flex-shrink: 0;
        }

        .add-char-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-brown);
        }

        .add-char-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            padding-bottom: 80px;
            /* 鎼存洟鍎撮悾娆戞 */
        }

        /* ================= 閻劍鍩涚挧鍕灐妞ゅ吀绱敓?(Profile Page) ================= */
        #profile-page {
            /* 鐟曞棛锟?script.js 锟?display: block, 瀵搫鍩楁担璺ㄦ暏 flex */
            display: none;
            flex-direction: column;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            overflow: hidden;
        }

        #profile-page[style*="display: block"] {
            display: flex !important;
        }

        /* 鐠佲晙閲滄禍杞扮矙缂佸秶娈戠€圭懓锟?锟?娑擃亜鍘撻敓?閼奉亜濮╅幘鎴濈磻 */
        #profile-page .form-group:nth-child(3) {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            margin-bottom: 20px;
        }

        #profile-intro {
            flex: 1;
            height: 100%;
            resize: none;
        }

        /* ================= 閼卞﹤銇夐崚鍡欑矋閺嶅嘲锟?(Chat Groups) ================= */
        .chat-group-container {
            margin-bottom: 4px;
            /* 缂傗晛鐨潻娆庨嚋缂傛繈锟?*/
        }

        .chat-group-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: #fff7ef;
            /* 閻劍鍩涢幐鍥х暰閻ㄥ嫰顤侀敓?*/
            /* border-radius: 8px; */
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
            border-bottom: 1px solid #f0f0f0;
        }

        .chat-group-header:active {
            background: #ffead0;
            /* 閻愮懓鍤弮鍓佲棦瀵邦喗绻佹稉鈧敓?*/
        }

        .chat-group-title-area {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 600;
            color: #555;
        }

        .chat-group-arrow {
            font-size: 10px;
            color: #ccc;
            transition: transform 0.2s;
            width: 14px;
            text-align: center;
        }

        .chat-group-count {
            font-weight: normal;
            font-size: 12px;
            color: #999;
        }

        .chat-group-actions {
            display: flex;
            gap: 10px;
            opacity: 0.3;
            transition: opacity 0.2s;
        }

        .chat-group-header:hover .chat-group-actions {
            opacity: 1;
        }

        .chat-group-btn {
            cursor: pointer;
            font-size: 12px;
        }

        .chat-group-btn:hover {
            transform: scale(1.1);
        }

        .chat-group-content {
            padding-left: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .chat-group-content.collapsed {
            display: none;
        }

        /* 闁鑵戠純顕€銆婃い鍦畱閺嶅嘲锟?*/
        .chatlist-item.pinned-item {
            background-color: #fff0f5c9;
            border-left: 4px solid #ffa4c2;
        }

        /* 婢х偛濮濵ove to Group閻ㄥ嫯褰嶉崡鏇€嶉弽宄扮础 */
        .chat-menu-option span {
            margin-right: 5px;
        }

        /* ================= 瀵湱鐛ョ憴锝囩拨閼奉亜鐣炬稊澶岀法锟?================= */
        /* 閸掓稑缂撶憴鎺曞瀵湱锟?& 閼卞﹤銇夌拋鍓х枂瀵湱锟?婵绮撴担璺ㄦ暏姒涙顓婚懝鎻掆偓纭风礉娑撳秴褰堢紘搴″瀹搞儱娼戣ぐ鍗炴惙 */
        #modal-add-char,
        #modal-chat-settings {
            --text-brown: #59474a;
            --theme-primary: #fd5392;
            --theme-primary-dark: #ff6b81;
            --theme-card-bg: #ffffff;
            --theme-card-border: #FFDEE9;
            --theme-input-bg: #fffbfc;
            --theme-input-border: #ffdee9;
            --theme-title-color: #59474a;
            --theme-sub-text: #aaaaaa;
            --theme-btn-gradient: #ff6b81;
            --theme-btn-shadow: transparent;
        }

        /* ================= 閼卞﹤銇夌拋鍓х枂瀵湱鐛ラ弽宄扮础 ================= */
        .chat-settings-modal {
            width: 90%;
            max-width: 400px;
            background: #fff;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-height: 85vh;
        }

        .chat-settings-header {
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border-bottom: 1px solid #eee;
            background: #fff;
            flex-shrink: 0;
        }


        .chat-settings-header h3 {
            margin: 0;
            color: #374151;
            font-size: 18px;
            flex: 1;
            text-align: center;
        }

        .chat-settings-content {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }

        .settings-divider {
            height: 1px;
            background: #eee;
            margin: 20px 0;
            width: 100%;
            border: none;
        }

        /* 閼卞﹤銇夌拋鍓х枂瀵湱鐛ラ崘鍛存閽樺繑澧嶉張澶婂瀻闂呮梻鍤庨敍灞肩箽閹镐礁鍏遍崙锟?*/
        #modal-chat-settings .settings-divider,
        #modal-chat-settings .settings-item-divider {
            display: none;
        }

        .wb-select-list {
            border: 1px solid #f0f0f0;
            border-radius: 10px;
            background: #fafafa;
            max-height: 150px;
            overflow-y: auto;
            padding: 5px;
        }

        .wb-select-item {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .wb-select-item:hover {
            background: #fff0f5;
        }

        .wb-select-item input {
            margin-right: 10px;
            width: 16px;
            height: 16px;
            accent-color: #ff6b81;
        }

        .wb-select-item span {
            font-size: 14px;
            color: #555;
        }

        .settings-action-btn {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 12px;
            color: white;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
            transition: transform 0.2s, opacity 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .settings-action-btn:active {
            transform: scale(0.98);
        }

        /* ================= 閼卞﹤銇夌拋鍓х枂閸忋劌鐫嗙憰鍡欐磰 ================= */
        #modal-chat-settings {
            background: #fff;
            backdrop-filter: none;
        }

        #modal-chat-settings .chat-settings-modal {
            width: 100%;
            max-width: 100%;
            height: 100%;
            max-height: 100%;
            border-radius: 0;
            box-shadow: none;
            animation: none;
        }

        #modal-chat-settings .chat-settings-header {
            padding-top: calc(15px + env(safe-area-inset-top, 0px));
        }

        #modal-chat-settings .chat-settings-content {
            padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
        }

        /* ================= 閼卞﹤銇夌拋鍓х枂閺傚洤鐡х紒鐔剁鐟欏嫯锟?================= */
        /* 閹碘偓閺堝瀵岄弽鍥╊劮閺傚洤鐡ч敍姘辩埠娑撯偓 13px锟?444 濞ｈ京浼嗛妴?00 閸楀﹦锟?*/
        #modal-chat-settings .form-group > label {
            font-size: 13px;
            color: #444;
            font-weight: 600;
            margin-bottom: 6px;
        }

        #modal-chat-settings .form-group-row > label:not(.toggle-switch) {
            font-size: 13px;
            color: #444;
            font-weight: 600;
            flex: 1;
            margin: 0;
        }

        /* 鐎涙劖寮挎潻?濞夈劑鍣撮弬鍥х摟閿涙氨绮烘稉锟?11px锟?999 */
        #modal-chat-settings .settings-hint {
            font-size: 11px;
            color: #999;
            font-weight: normal;
            margin-top: 4px;
            line-height: 1.5;
        }

        /* ================= 濠婃垵濮╁鈧崗?Toggle Switch ================= */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
            flex-shrink: 0;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ddd;
            transition: 0.3s ease;
            border-radius: 26px;
        }

        .toggle-slider::before {
            content: "";
            position: absolute;
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s ease;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

        .toggle-switch input:checked+.toggle-slider {
            background-color: #ffb6c1;
        }

        .toggle-switch input:checked+.toggle-slider::before {
            transform: translateX(22px);
        }

        /* ================= 鐠佸墽鐤嗘い鐟板瀻闂呮梻锟?================= */
        .settings-item-divider {
            height: 1px;
            background: #eee;
            margin: 12px 0;
            width: 100%;
        }

        /* ================= 鐠佸墽鐤嗙悰灞界鐏炩偓娴兼ê锟?(濠婃垵濮╁鈧崗? ================= */
        #modal-chat-settings .form-group-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        #modal-chat-settings .form-group-row:has(.toggle-switch) {
            justify-content: space-between;
        }


        /* 缂佺喍绔存径鏉戝剼娑撳﹣绱堕弽宄扮础婢跺秶锟?adjustment if needed */
        .avatar-upload-container {
            width: 80px;
            height: 80px;
            margin: 0 auto;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            border: 3px solid #fff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .avatar-preview {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 10px;
            padding: 2px 0;
            text-align: center;
        }

        /* ==================== 娴溿倓绨伴崡锛勫閺嶅嘲锟?==================== */

        /* 瑜版挻绉烽幁顖氬敶鐎圭懓瀵橀崥?App Card 閺冭绱濈粔濠氭珟姒涙顓婚崘鍛啇閼冲本娅欓崪灞藉敶鏉堢锟?*/
        .chat-msg-row.ai .chat-msg-content.has-app-card {
            background: transparent !important;
            padding: 0 !important;
            box-shadow: none !important;
            border: none !important;
            max-width: 100%;
        }

        /* 閸楋紕澧栭崺铏诡攨閺嶅嘲锟?(娣囨繄鏆€閸忕厧锟? */
        .app-card {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: #333;
            background: #fff;
            overflow: hidden;
            width: 240px;
            max-width: 85vw;
        }

        /* 閸栧懎鎯堥崡锛勫閺嶅嘲绱″〒鍛存珟 - 缁夊娅庨崘鍛啇閸栧懓锟?*/
        .chat-bubble.has-app-card {
            background: transparent !important;
            padding: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            border: none !important;
            max-width: 85vw !important;
            width: auto;
        }

        .chat-bubble.has-app-card .app-card {
            width: 100%;
            max-width: 240px;
        }

        /* 棣冨箣 娴溿倓绨伴崡锛勫妫板嫯顫嶉崡?*/
        .app-card-preview {
            width: 220px;
            max-width: 75vw;
            border-radius: 16px;
            overflow: hidden;
            background: linear-gradient(145deg, #fff9fb 0%, #fff0f5 50%, #fce4f0 100%);
            box-shadow: 0 2px 16px rgba(230, 120, 160, 0.12), 0 0 0 1px rgba(230, 120, 160, 0.08);
            cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
            position: relative;
        }

        .app-card-preview::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #f9a8c9, #f472b6, #ec4899);
            border-radius: 16px 16px 0 0;
        }

        .app-card-preview:active {
            transform: scale(0.96);
            box-shadow: 0 1px 8px rgba(230, 120, 160, 0.08);
        }

        .app-card-preview-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 14px 4px;
        }

        .app-card-preview-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, #fce7f3, #fdf2f8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 1;
            flex-shrink: 0;
        }

        .app-card-preview-title {
            font-size: 14px;
            font-weight: 600;
            color: #831843;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            line-height: 1.3;
        }

        .app-card-preview-body {
            padding: 6px 14px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .app-card-preview-hint {
            font-size: 11.5px;
            color: #c77da2;
            display: flex;
            align-items: center;
            gap: 4px;
            letter-spacing: 0.3px;
        }

        .app-card-preview-hint::before {
            content: '';
            font-size: 10px;
        }

        .app-card-preview-hint::after {
            content: '\2713';
            font-size: 16px;
            color: #d4a0bc;
            margin-left: 2px;
            font-weight: 300;
        }

        /* 娴溿倓绨扮紒鎾寸亯閺勫墽锟?*/
        .app-card-result {
            padding: 9px 14px 11px;
            font-size: 12px;
            color: #9d174d;
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.04), rgba(244, 114, 182, 0.07));
            border-top: 1px solid rgba(236, 72, 153, 0.1);
            line-height: 1.4;
            letter-spacing: 0.2px;
        }

        .app-card-result::before {
            content: '回复 ';
        }

        /* 棣冩崙 閸斺晜澧滃Ο鈥崇础閿涙矮绻氱€涙ü璐熷Ο鈩冩緲閹稿锟?*/
        .app-card-save-tpl-btn {
            padding: 8px 14px;
            font-size: 12px;
            color: #1e40af;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(96, 165, 250, 0.1));
            border-top: 1px solid rgba(59, 130, 246, 0.12);
            text-align: center;
            cursor: pointer;
            font-weight: 500;
            letter-spacing: 0.3px;
            transition: background 0.2s;
        }

        .app-card-save-tpl-btn:active {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(96, 165, 250, 0.18));
        }

        /* 棣冿拷?閻溾晛鍙跨粻鍙樼箽鐎涙ɑ瀵滈柦?*/
        .toybox-save-btn {
            padding: 8px 14px;
            font-size: 12px;
            color: #92400e;
            background: linear-gradient(135deg, rgba(217, 119, 6, 0.06), rgba(245, 158, 11, 0.1));
            border-top: 1px solid rgba(217, 119, 6, 0.12);
            text-align: center;
            cursor: pointer;
            font-weight: 500;
            letter-spacing: 0.3px;
            transition: background 0.2s;
        }

        .toybox-save-btn:active {
            background: linear-gradient(135deg, rgba(217, 119, 6, 0.12), rgba(245, 158, 11, 0.18));
        }

        /* 棣冩憠 娑撴牜鏅稊锕傤暕鐟欏牆宕遍悧?*/
        .wb-preview-card {
            width: 240px;
            max-width: 75vw;
            background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(66, 103, 178, 0.12);
            cursor: default;
            position: relative;
            border: 1px solid rgba(66, 103, 178, 0.15);
        }

        .wb-preview-header {
            display: flex;
            align-items: center;
            padding: 12px 14px 8px;
            gap: 8px;
        }

        .wb-preview-icon {
            font-size: 22px;
            flex-shrink: 0;
        }

        .wb-preview-title {
            font-size: 14px;
            font-weight: 600;
            color: #1e3a5f;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .wb-preview-badge {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            background: #60a5fa;
            color: white;
            font-weight: 500;
            flex-shrink: 0;
        }

        .wb-preview-body {
            padding: 4px 14px 12px;
            font-size: 12px;
            color: #475569;
            line-height: 1.5;
            max-height: 120px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .wb-preview-save-btn {
            padding: 10px 14px;
            font-size: 13px;
            color: #1e40af;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(96, 165, 250, 0.12));
            border-top: 1px solid rgba(59, 130, 246, 0.15);
            text-align: center;
            cursor: pointer;
            font-weight: 600;
            letter-spacing: 0.3px;
            transition: background 0.2s;
        }

        .wb-preview-save-btn:active {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.22));
        }

        .wb-preview-hint {
            padding: 4px 14px 8px;
            font-size: 11.5px;
            color: #6b8cbe;
            display: flex;
            align-items: center;
            gap: 4px;
            letter-spacing: 0.3px;
        }

        .wb-preview-hint::after {
            content: '\2713';
            font-size: 16px;
            color: #93b5e0;
            margin-left: 2px;
            font-weight: 300;
        }

        /* 棣冨箣 娴溿倓绨伴崡锛勫瀵湱锟?*/
        .interactive-card-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        .interactive-card-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        .interactive-card-backdrop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .interactive-card-container {
            position: relative;
            z-index: 1;
            width: 90vw;
            max-width: 360px;
            max-height: calc(85vh - env(safe-area-inset-top, 20px) - env(safe-area-inset-bottom, 20px));
            border-radius: 20px;
            overflow: hidden;
            background: transparent;
            transform: scale(0.9);
            transition: transform 0.25s ease;
        }

        .interactive-card-overlay.show .interactive-card-container {
            transform: scale(1);
        }

        .interactive-card-frame {
            width: 100%;
            height: 80vh;
            max-height: calc(85vh - env(safe-area-inset-top, 20px) - env(safe-area-inset-bottom, 20px));
            border: none;
            background: transparent;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* 鎼存洟鍎撮崗鎶芥４閹稿锟?*/
        .interactive-card-close-bottom {
            position: relative;
            z-index: 1;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1.5px solid rgba(255, 255, 255, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            margin-top: 16px;
            transition: background 0.15s, transform 0.15s;
            flex-shrink: 0;
        }

        .interactive-card-close-bottom:active {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(0.9);
        }


        /* ==================== 缂囥倛浜板☉鍫熶紖閺嶅嘲锟?==================== */

        /* AI 濞戝牊浼呯悰宀嬬窗绾喕绻氭径鏉戝剼閸︺劑銆婇柈銊ヮ嚠锟?*/
        .chat-msg-row.ai {
            align-items: flex-start !important;
        }

        /* 濞戝牊浼呴崚妤€顔愰崳顭掔窗閸栧懓锛欓崥宥呯摟閸滃本鐨甸敓?*/
        .msg-col {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            max-width: 75%;
            min-width: 0;
            /* 闂勬劕鍩楅弫缈犵秼閺堚偓婢堆冾啍鎼达讣绱濋柆鍨帳濮樻梹鍦烘径顏勵啍 */
        }

        /* 鐠佲晜鐨靛▔鈥虫躬鐎圭懓娅掗崘鍛板殰閻掕埖鎷哄鈧敍宀冣偓灞肩瑝閺勵垰褰堥懛顏囬煩閻ф儳鍨庡В鏃堟锟?*/
        .chat-bubble {
            max-width: 100% !important;
            width: -moz-fit-content;
            width: fit-content;
        }

        /* 閸欐垿鈧浇鈧懎鎮曠€涙绱板顔讳繆缂囥倛浜版搴㈢壐 */
        .msg-name {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
            margin-left: 2px;
            line-height: 1.2;
        }

        /* 棣冩櫜 濞戝牊浼呴弮鍫曟？锟?*/
        .chat-msg-time {
            font-size: 10px;
            color: #9ca3af;
            margin-top: 3px;
            opacity: 0.7;
            padding-left: 2px;
        }

        .chat-msg-row.me .msg-col {
            align-items: flex-end;
        }

        /* 閻劍鍩涚拠顓㈢叾閼宠泛娉崣鍐差嚠锟?*/
        .chat-msg-row.me .voice-msg-container {
            align-items: flex-end;
            max-width: 100%;
        }

        /* 閻劍鍩涚拠顓㈢叾閺傚洤鐡у鏃€鍦洪敍姘毞婢跺瓨婀為崣?+ 闂勬劕鍩楃€硅棄锟?*/
        .chat-msg-row.me .voice-text-bubble {
            border-radius: 12px;
            border-top-right-radius: 2px;
            border-top-left-radius: 12px;
            max-width: 80%;
        }

        .chat-msg-row.me .chat-msg-time {
            text-align: right;
            padding-right: 2px;
            padding-left: 0;
        }

        /* 绾喕绻氭径鏉戝剼閸滃本绉烽幁顖欑闂傚瓨婀侀崥鍫モ偓鍌滄畱闂傜锟?*/
        .chat-msg-row .chat-avatar {
            flex-shrink: 0;
            /* 闂冨弶顒涙径鏉戝剼鐞氼偄甯囬敓?*/
        }

        /* 缂囥倛浜板鏃€鍦洪敍姘扁€樻穱婵呯瑝娴兼艾銇婇敓?*/
        .chat-msg-row.ai .msg-col .chat-bubble {
            max-width: 100%;
        }

        /* ========================================
   棣冨赋 鐠囶參鐓跺☉鍫熶紖濮樻梹鍦洪弽宄扮础
   ======================================== */

        /* --- 鐠囶參鐓跺☉鍫熶紖鐎圭懓锟?(閸ㄥ倻娲块幒鎺戝灙) --- */
        .voice-msg-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            /* 瀹革箑顕敓?*/
            gap: 8px;
            /* 娑撳﹣绗呴梻纾嬬獩 */
            max-width: 80%;
        }

        /* --- 娑撳﹤宕愰柈銊ュ瀻閿涙俺顕㈤棅瀹犲厡锟?--- */
        .voice-pill {
            display: flex;
            align-items: center;
            background: #ffffff;
            /* 閻у€熷锟?*/
            padding: 8px 16px;
            border-radius: 50px;
            /* 閼宠泛娉ぐ銏㈠Ц */
            cursor: pointer;
            min-width: 120px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            transition: background 0.2s;
            user-select: none;
        }

        .voice-pill:active {
            filter: brightness(0.95);
        }

        /* 閹绢厽鏂侀崶鐐垼 */
        .voice-icon {
            width: 14px;
            height: 14px;
            fill: #59474a;
            /* 濞ｈ鲸顥氶懝鎻掓禈锟?*/
            margin-right: 12px;
            flex-shrink: 0;
        }

        .voice-icon svg {
            width: 100%;
            height: 100%;
        }

        /* 婢圭増灏濋敓?(闂堟瑦鈧焦膩锟? */
        .voice-wave {
            display: flex;
            align-items: center;
            gap: 3px;
            height: 16px;
            margin-right: 12px;
            flex: 1;
            /* 閹炬垵绱戞稉顓㈡？ */
        }

        .voice-bar {
            width: 3px;
            background-color: #aebbc7;
            /* 姒涙顓婚悘鎷屽 */
            border-radius: 2px;
            animation: none;
        }

        /* 鐎规矮绠熼崙鐘崇壌闂€璺ㄧ叚娑撳秳绔撮惃鍕殠 */
        .voice-bar:nth-child(1) {
            height: 8px;
        }

        .voice-bar:nth-child(2) {
            height: 14px;
        }

        .voice-bar:nth-child(3) {
            height: 10px;
        }

        .voice-bar:nth-child(4) {
            height: 12px;
        }

        .voice-bar:nth-child(5) {
            height: 6px;
        }

        /* 閹绢厽鏂侀弮鍓佹畱閸斻劎锟?*/
        .voice-pill.playing .voice-icon {
            fill: #59474a;
            /* 閹绢厽鏂侀弮璺烘禈閺嶅洣绻氶幐浣圭箒濡洝锟?*/
        }

        .voice-pill.playing .voice-bar {
            background-color: #aebbc7;
            /* 閹绢厽鏂侀弮鑸靛皾缁鹃€涚箽閹镐胶浼嗛懝?*/
            animation: waveJump 0.8s infinite ease-in-out;
        }

        .voice-pill.playing .voice-bar:nth-child(2) {
            animation-delay: 0.1s;
        }

        .voice-pill.playing .voice-bar:nth-child(3) {
            animation-delay: 0.2s;
        }

        .voice-pill.playing .voice-bar:nth-child(4) {
            animation-delay: 0.3s;
        }

        .voice-pill.playing .voice-bar:nth-child(5) {
            animation-delay: 0.4s;
        }

        @keyframes waveJump {

            0%,
            100% {
                transform: scaleY(1);
            }

            50% {
                transform: scaleY(1.5);
            }
        }

        /* 閺冨爼鏆遍弬鍥х摟 */
        .voice-duration {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
        }

        /* --- 娑撳宕愰柈銊ュ瀻閿涙碍鏋冪€涙鐨甸敓?--- */
        .voice-text-bubble {
            background: #fff;
            padding: 10px 14px;
            border-radius: 12px;
            border-top-left-radius: 2px;
            /* 鏉╂瑧顫掗崷鍡氼潡閺囧瓨婀佺€电鐦介敓?*/
            font-size: 14px;
            color: #333;
            line-height: 1.5;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
            word-break: break-word;
        }

        /* 閸旂姾娴囬悩璁规嫹?*/
        .voice-pill.loading .voice-icon {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* ================= 鐠囶參鐓堕柅姘崇樈閻ｅ矂娼伴弽宄扮础 (Voice Call Layer) ================= */

        /* ================= 鐠囶參鐓堕弶銉ф暩闁偓鐠囬鏅敓?(Voice Invite Layer) ================= */
        #voice-invite-layer,
        #video-invite-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99999;
            /* 濮ｆ棃鈧俺鐦界仦鍌涙纯锟?*/
            display: none;
        }

        #voice-invite-layer.active,
        #video-invite-layer.active {
            display: block;
        }

        .voice-invite-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            background-size: cover;
            background-position: center;
            filter: blur(30px) brightness(0.2);
            transform: scale(1.5);
        }

        .voice-invite-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 80px 40px 60px 40px;
            padding-top: calc(80px + var(--safe-area-inset-top));
            padding-bottom: calc(60px + var(--safe-area-inset-bottom));
            color: white;
        }

        .voice-invite-info {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .voice-invite-avatar-wrapper {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
            animation: invitePulse 2s infinite;
        }

        @keyframes invitePulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
            }

            70% {
                box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            }
        }

        .voice-invite-avatar-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .voice-invite-name {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .voice-invite-status {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.7);
        }

        .voice-invite-actions {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }

        .voice-invite-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .voice-invite-btn svg {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            padding: 15px;
            transition: transform 0.2s;
        }

        .voice-invite-btn:active svg {
            transform: scale(0.9);
        }

        .voice-invite-btn.decline svg {
            background: #ff4757;
        }

        .voice-invite-btn.accept svg {
            background: #2ed573;
            animation: shakeBtn 2s infinite;
        }

        @keyframes shakeBtn {

            0%,
            100% {
                transform: rotate(0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: rotate(-5deg);
            }

            20%,
            40%,
            60%,
            80% {
                transform: rotate(5deg);
            }
        }

        .voice-invite-btn span {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }

        /* ================= 閸欏秵鐓￠幍瀣簚瀵湱鐛ラ弽宄扮础 (Phone Check Layer) ================= */
        #phone-check-layer {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        #phone-check-layer.active {
            display: flex;
        }
        .phone-check-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .phone-check-card {
            position: relative;
            z-index: 1;
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px 28px 22px;
            width: 280px;
            text-align: center;
            box-shadow: 0 12px 40px rgba(0,0,0,0.25);
            animation: phoneCheckSlideIn 0.35s ease-out;
        }
        @keyframes phoneCheckSlideIn {
            from { opacity: 0; transform: translateY(30px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .phone-check-avatar-wrapper {
            width: 72px; height: 72px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 14px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }
        .phone-check-avatar-wrapper img {
            width: 100%; height: 100%;
            object-fit: cover;
        }
        .phone-check-title {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 6px;
        }
        .phone-check-desc {
            font-size: 13px;
            color: #888;
            margin-bottom: 22px;
        }
        .phone-check-actions {
            display: flex;
            gap: 12px;
        }
        .phone-check-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.15s, opacity 0.15s;
            user-select: none;
        }
        .phone-check-btn:active {
            transform: scale(0.95);
        }
        .phone-check-btn.decline {
            background: #f0f0f0;
            color: #666;
        }
        .phone-check-btn.accept {
            background: linear-gradient(135deg, #ff6b9d, #c44dff);
            color: #fff;
        }

        /* ================= 棣冩懌 缁惧じ绗呭Ο鈥崇础 iOS妞嬪孩鐗搁柨浣哥潌鐟欙綁鏀ｅ鍦崶 (Phone Unlock Layer) ================= */
        #phone-unlock-layer {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        #phone-unlock-layer.active {
            display: flex;
        }
        .phone-unlock-bg {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.75);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
        }
        .phone-unlock-content {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 60px 0 40px;
            padding-top: calc(60px + env(safe-area-inset-top, 0px));
            padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
        }
        .phone-unlock-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        #phone-unlock-layer .phone-unlock-title {
            font-size: 18px;
            font-weight: 500;
            color: #fff;
            text-align: center;
            margin-bottom: 2px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .phone-unlock-subtitle {
            font-size: 14px;
            color: rgba(255,255,255,0.7);
            margin-bottom: 18px;
        }
        .phone-unlock-dots {
            display: flex;
            gap: 16px;
            margin-bottom: 8px;
        }
        .pin-dot {
            width: 14px; height: 14px;
            border-radius: 50%;
            border: 1.5px solid rgba(255,255,255,0.8);
            background: transparent;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .pin-dot.filled {
            background: #fff;
            border-color: #fff;
        }
        .pin-dot.error {
            border-color: #ff4757;
            background: #ff4757;
        }
        .phone-unlock-dots.shake .pin-dot {
            animation: pinShake 0.5s ease;
        }
        @keyframes pinShake {
            0%, 100% { transform: translateX(0); }
            15% { transform: translateX(-10px); }
            30% { transform: translateX(10px); }
            45% { transform: translateX(-7px); }
            60% { transform: translateX(7px); }
            75% { transform: translateX(-3px); }
            90% { transform: translateX(3px); }
        }
        #phone-unlock-layer .phone-unlock-hint {
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            margin-top: 4px;
        }
        /* 閺佹澘鐡ч柨顔炬磸 */
        .phone-unlock-numpad {
            display: flex;
            flex-direction: column;
            gap: 14px;
            align-items: center;
        }
        .numpad-row {
            display: flex;
            gap: 24px;
        }
        .numpad-key {
            width: 75px; height: 75px;
            border-radius: 50%;
            background: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.15);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.1s ease;
        }
        .numpad-key:active {
            background: rgba(255,255,255,0.35);
        }
        .numpad-num {
            font-size: 32px;
            font-weight: 300;
            color: #fff;
            line-height: 1;
            font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
        }
        .numpad-letters {
            font-size: 9px;
            font-weight: 600;
            color: rgba(255,255,255,0.7);
            letter-spacing: 2px;
            margin-top: 2px;
            text-transform: uppercase;
        }
        .numpad-func {
            background: transparent;
            border: none;
        }
        .numpad-func:active {
            background: rgba(255,255,255,0.1);
        }
        .numpad-func-text {
            font-size: 16px;
            color: rgba(255,255,255,0.8);
            font-weight: 400;
        }
        .numpad-delete .numpad-func-text {
            font-size: 24px;
        }

        /* ================= 棣冩懌 AI閸欐垶绉烽幁顖涘閺堥缚浜版径鈺佽剨缁愭鐗卞?(Phone Chat Layer) ================= */
        #phone-chat-layer {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 99999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        #phone-chat-layer.active {
            display: flex;
        }
        .phone-chat-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .phone-chat-phone {
            position: relative;
            z-index: 1;
            width: 320px;
            max-width: 88vw;
            height: 580px;
            max-height: 85vh;
            background: #f5f5f5;
            border-radius: 36px;
            border: 3px solid #e0e0e0;
            box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: phoneChatSlideIn 0.4s ease-out;
        }
        @keyframes phoneChatSlideIn {
            from { opacity: 0; transform: translateY(40px) scale(0.92); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        /* 閸掓ɑ锟?*/
        .phone-chat-notch {
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 120px; height: 22px;
            background: #333;
            border-radius: 0 0 16px 16px;
            z-index: 2;
        }
        /* 妞ゅ爼鍎撮弽?*/
        .phone-chat-header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px 16px 10px;
            background: #ededed;
            border-bottom: 1px solid #d9d9d9;
            flex-shrink: 0;
        }
        .phone-chat-header-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            text-align: center;
        }
        /* 濞戝牊浼呴崠?*/
        .phone-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 14px 12px 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            -webkit-overflow-scrolling: touch;
            background: #f5f5f5;
        }
        /* 濞戝牊浼呯悰?*/
        .pc-msg-row {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            max-width: 88%;
        }
        .pc-msg-row.pc-left {
            align-self: flex-start;
        }
        .pc-msg-row.pc-right {
            align-self: flex-end;
            flex-direction: row-reverse;
        }
        .pc-msg-avatar {
            width: 30px; height: 30px;
            border-radius: 4px;
            object-fit: cover;
            flex-shrink: 0;
        }
        .pc-msg-bubble {
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
            max-width: 100%;
        }
        .pc-left .pc-msg-bubble {
            background: #fff;
            color: #333;
        }
        .pc-right .pc-msg-bubble {
            background: #95ec69;
            color: #000;
        }
        /* 缁崵绮洪幓鎰仛 */
        .pc-msg-system {
            text-align: center;
            font-size: 11px;
            color: #bbb;
            padding: 4px 0;
        }
        /* 閹靛婧€閼卞﹤銇夐崡锛勫妫板嫯顫嶉敍鍫濇躬閼卞﹤銇夊鏃€鍦烘稉顓ㄧ礆 */
        .phone-chat-card-preview {
            background: linear-gradient(135deg, #fff5f7, #ffe8ef);
            border: 1.5px solid #ffcdd9;
            border-radius: 14px;
            padding: 12px 14px;
            cursor: pointer;
            transition: transform 0.15s;
            max-width: 240px;
        }
        .phone-chat-card-preview:active {
            transform: scale(0.97);
        }
        .phone-chat-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .phone-chat-card-icon {
            font-size: 18px;
        }
        .phone-chat-card-title {
            font-size: 13px;
            font-weight: 600;
            color: #d63384;
        }
        .phone-chat-card-snippet {
            font-size: 12px;
            color: #888;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            overflow: hidden;
        }
        .phone-chat-card-footer {
            margin-top: 8px;
            font-size: 11px;
            color: #ffb6c1;
            text-align: right;
        }
        /* 閸旂姾娴囬崡鐘辩秴閸斻劎锟?*/
        .phone-chat-loading .phone-chat-card-title {
            animation: phoneChatPulse 1.5s ease-in-out infinite;
        }
        @keyframes phoneChatPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .phone-chat-loading-dots {
            display: flex;
            gap: 6px;
            padding: 8px 0 2px;
            justify-content: center;
        }
        .phone-chat-loading-dots span {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #ffb6c1;
            animation: phoneChatDot 1.2s ease-in-out infinite;
        }
        .phone-chat-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
        .phone-chat-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes phoneChatDot {
            0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
            40% { opacity: 1; transform: scale(1.1); }
        }

        /* ================= 鐠囶參鐓堕柅姘崇樈閻ｅ矂娼伴弽宄扮础 ================= */
        /* 闁俺鐦界仦鍌氼啇锟?- 閸忋劌鐫嗙憰鍡欐磰 */
        #voice-call-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99998;
            display: none;
            /* 姒涙顓婚梾鎰 */
        }

        #voice-call-layer.active {
            display: block;
        }

        /* 濡紕纭﹂懗灞炬珯锟?*/
        .voice-call-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2c3e50;
            background-size: cover;
            background-position: center;
            filter: blur(40px) brightness(0.2);
            transform: scale(1.5);
        }

        /* 闁俺鐦介崘鍛啇锟?*/
        .voice-call-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            z-index: 1;
        }

        /* 妞ゅ爼鍎存穱鈩冧紖锟?*/
        .voice-call-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 60px;
            padding-top: calc(60px + var(--safe-area-inset-top));
            padding-bottom: 20px;
        }

        /* 婢舵潙鍎氱€圭懓锟?*/
        .voice-call-avatar-wrapper {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            margin-bottom: 15px;
        }

        .voice-call-avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 鐎佃鏌熼崥宥呯摟 */
        .voice-call-name {
            font-size: 22px;
            font-weight: bold;
            color: white;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            margin-bottom: 6px;
        }

        /* 闁俺鐦介悩璁规嫹?*/
        .voice-call-status {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 4px;
        }

        /* 鐠佲剝妞傞敓?*/
        .voice-call-timer {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.9);
            font-family: 'SF Mono', 'Monaco', monospace;
            letter-spacing: 2px;
        }

        /* 閸欏厖绗傜憴鎺撳婢规澘娅掗幐澶愭尦 */
        .voice-call-speaker {
            position: absolute;
            top: 50px;
            right: 20px;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 10;
        }

        .voice-call-speaker:active {
            transform: scale(0.9);
            background: rgba(255, 255, 255, 0.25);
        }

        .voice-call-speaker.muted {
            opacity: 0.5;
        }

        /* 閻劍鍩涢幗鍕剼婢舵潙鐨粣?*/
        .video-call-self-cam {
            position: absolute;
            top: 10px;
            top: calc(10px + var(--safe-area-inset-top));
            right: 14px;
            width: 100px;
            height: 140px;
            border-radius: 12px;
            overflow: hidden;
            z-index: 15;
            background: #000;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.25);
        }

        .video-call-self-cam video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scaleX(-1);
        }

        .video-call-self-cam-off {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            background: #1a1a2e;
            color: rgba(255, 255, 255, 0.4);
        }

        .video-call-self-cam-off.hidden {
            display: none;
        }

        /* 娑擃參妫垮☉鍫熶紖閸栧搫锟?*/
        .voice-call-bubbles {
            flex: 1;
            padding: 20px 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* 闁俺鐦藉鏃€鍦洪崺铏诡攨閺嶅嘲锟?*/
        .voice-call-bubble {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 18px;
            font-size: 15px;
            line-height: 1.5;
            word-break: break-word;
            animation: bubbleFadeIn 0.3s ease-out;
        }

        @keyframes bubbleFadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 閻劍鍩涘鏃€锟?- 闂堢姴褰搁敍灞剧箒閼规彃宕愰柅蹇旀 */
        .voice-call-bubble.user {
            align-self: flex-end;
            background: rgba(30, 30, 30, 0.6);
            backdrop-filter: blur(12px);
            color: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom-right-radius: 6px;
        }

        /* AI濮樻梹锟?- 闂堢姴涔忛敍宀€鈼㈠顔诲瘨娑撯偓閻愬湱娈戦崡濠団偓蹇旀 */
        .voice-call-bubble.ai {
            align-self: flex-start;
            background: rgba(60, 60, 60, 0.5);
            backdrop-filter: blur(12px);
            color: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-bottom-left-radius: 6px;
        }

        /* 棣冨 闁俺锟?鐟欏棝锟?缂囥倛顕㈤棅宕囩倳鐠囨垶鐨靛▔?*/
        .call-translation-bubble {
            background: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.75);
            padding: 6px 10px;
            border-radius: 8px;
            font-size: 12px;
            margin-top: 6px;
            line-height: 1.4;
            word-break: break-word;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* 鎼存洟鍎撮幒褍鍩楅敓?*/
        .voice-call-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 20px 40px 20px;
            padding-bottom: calc(40px + var(--safe-area-inset-bottom));
            gap: 20px;
        }

        /* 闂呮劘妫屾潏鎾冲弳锟?- 闁繑妲戞担鍡楀讲锟?*/
        .voice-call-input {
            width: 100%;
            max-width: 350px;
            padding: 14px 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            color: white;
            font-size: 15px;
            outline: none;
            transition: all 0.3s ease;
        }

        .voice-call-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .voice-call-input:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* 閹稿倹鏌囬幐澶愭尦 */
        .voice-call-hangup {
            width: 70px;
            height: 70px;
            background: linear-gradient(145deg, #ff4757, #e84141);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(232, 65, 65, 0.5);
            transition: transform 0.2s ease;
            animation: hangupBreathing 2s ease-in-out infinite;
        }

        .voice-call-hangup:active {
            transform: scale(0.9);
        }

        /* 閹稿倹鏌囬幐澶愭尦閸涚厧鎯涢悘顖氬З锟?*/
        @keyframes hangupBreathing {

            0%,
            100% {
                box-shadow: 0 6px 20px rgba(232, 65, 65, 0.5);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 8px 30px rgba(232, 65, 65, 0.7), 0 0 40px rgba(232, 65, 65, 0.3);
                transform: scale(1.02);
            }
        }

        /* 閹稿倹鏌囬幐澶愭尦閸愬懐娈戦崶鐐垼閺冨娴嗘稉鈧稉瀣箙鐠ч攱娼甸崓蹇斿瘯锟?*/
        .voice-call-hangup svg {
            transform: rotate(135deg);
        }

        /* 闁俺鐦介弮鍓佹畱閹垫挸鐡ч悩鑸碘偓浣瑰瘹锟?*/
        .voice-call-bubble.ai.typing::after {
            content: '...';
            animation: typingDots 1.2s infinite;
        }

        @keyframes typingDots {
            0% {
                content: '\2728';
            }

            33% {
                content: '..';
            }

            66% {
                content: '...';
            }
        }

        /* 鐠囶參鐓堕柅姘崇樈鏉堟挸鍙嗛敓?*/
        .voice-call-input-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: 380px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            padding: 6px 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* AI 閸ョ偛顦查幐澶愭尦 */
        .voice-call-ai-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(145deg, #ff6b81, #ff4757);
            color: white;
            font-size: 18px;
            cursor: pointer;
            flex-shrink: 0;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .voice-call-ai-btn:active {
            transform: scale(0.9);
        }

        /* 鏉堟挸鍙嗛敓?*/
        .voice-call-input {
            flex: 1;
            background: transparent;
            border: none;
            color: white;
            font-size: 15px;
            outline: none;
            padding: 8px 0;
        }

        .voice-call-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        /* 閸欐垿鈧焦瀵滈敓?*/
        .voice-call-send-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(145deg, #60a5fa, #3b82f6);
            color: white;
            font-size: 16px;
            cursor: pointer;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .voice-call-send-btn:active {
            transform: scale(0.9);
        }

        /* 棣冨赋 妤癸箑鍘犳?+ 閹稿倹锟?楠炶埖甯撶悰?*/
        .voice-call-bottom-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
        }

        /* 婢堆呮閸﹀棝瀹抽崗瀣棑閹稿锟?*/
        .asr-big-mic {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(245, 245, 245, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        .asr-big-mic:active {
            transform: scale(0.95);
        }

        /* 鐟欏棝顣堕柅姘崇樈闁插瞼娈戠亸蹇撴槀鐎靛摜澧楅張?*/
        .asr-big-mic.video-size {
            width: 52px;
            height: 52px;
        }

        .asr-big-mic.recording {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.25), 0 0 24px rgba(239, 68, 68, 0.3);
            animation: big-mic-pulse 1.2s ease-in-out infinite;
        }

        .asr-big-mic.recording svg {
            stroke: #ef4444;
        }

        @keyframes big-mic-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.2), 0 0 20px rgba(239, 68, 68, 0.2);
            }

            50% {
                box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.1), 0 0 32px rgba(239, 68, 68, 0.35);
            }
        }

        .asr-big-mic.transcribing {
            animation: none;
            opacity: 0.6;
        }

        .asr-big-mic.transcribing svg {
            stroke: #999;
        }

        /* 棣冩杸 闁俺鐦介悾宀勬桨閹舵ê锟?鐏炴洖绱戞稉澶庮潡閹稿锟?*/
        .call-section-wrapper {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }

        .call-section-wrapper.input-wrapper {
            flex: 0 0 auto;
            width: 100%;
            max-width: 380px;
        }

        .call-collapse-toggle {
            display: flex;
            justify-content: center;
            padding: 2px 0;
            z-index: 2;
            flex-shrink: 0;
        }

        .call-collapse-toggle.video-collapse {
            position: absolute;
            top: calc(145px + var(--safe-area-inset-top));
            left: 0;
            right: 0;
            z-index: 5;
        }

        .call-collapse-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 18px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.35);
            cursor: pointer;
            transition: transform 0.3s ease, color 0.2s ease;
            -webkit-user-select: none;
            user-select: none;
        }

        .call-collapse-arrow:active {
            color: rgba(255, 255, 255, 0.7);
        }

        .call-collapse-toggle.collapsed .call-collapse-arrow {
            transform: rotate(180deg);
        }

        /* 閸欘垱濮岄崣鐘插敶鐎瑰湱娈戞潻鍥ㄦ诞 */
        .call-collapsible {
            transition: visibility 0.2s, opacity 0.2s ease;
        }

        /* 鐠囶參鐓堕柅姘崇樈濮濓絽婀潏鎾冲弳閹稿洨銇氶敓?*/
        .voice-call-typing {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 12px 18px;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            animation: typingBounce 1.4s ease-in-out infinite;
        }

        .typing-dot:nth-child(1) {
            animation-delay: 0s;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typingBounce {

            0%,
            60%,
            100% {
                transform: translateY(0);
                opacity: 0.5;
            }

            30% {
                transform: translateY(-6px);
                opacity: 1;
            }
        }

        /* ================= 缂囥倛浜扮拠顓㈢叾闁俺鐦介悾宀勬桨閺嶅嘲锟?================= */
        #group-voice-call-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99998;
            display: none;
        }

        #group-voice-call-layer.active {
            display: block;
        }

        .gvc-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #2c3e50;
            background-size: cover;
            background-position: center;
            filter: blur(40px) brightness(0.2);
            transform: scale(1.5);
        }

        .gvc-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            z-index: 1;
        }

        /* 婢舵潙鍎氱純鎴炵壐锟?- 瀵邦喕淇婄紘銈夆偓姘崇樈妞嬪孩鐗搁弬鐟版健闁剧儤锟?*/
        .gvc-avatar-grid {
            display: grid;
            width: 100%;
            gap: 2px;
            background: #000;
            overflow: hidden;
        }

        /* 2娴滅尨绱板锕€褰搁崥鍕磹 */
        .gvc-avatar-grid[data-count="2"] {
            grid-template-columns: 1fr 1fr;
        }

        /* 3娴滅尨绱版稉鈧幒? */
        .gvc-avatar-grid[data-count="3"] {
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* 4娴滅尨绱伴悽鏉跨摟锟?2x2 */
        .gvc-avatar-grid[data-count="4"] {
            grid-template-columns: 1fr 1fr;
        }

        /* 5娴滅尨绱版稉?锟?鐏炲懍鑵戦敍宀€锟?閸掓缍夐弽?*/
        .gvc-avatar-grid[data-count="5"] {
            grid-template-columns: repeat(6, 1fr);
        }

        .gvc-avatar-grid[data-count="5"] .gvc-avatar-item:nth-child(1) {
            grid-column: 1 / 3;
        }

        .gvc-avatar-grid[data-count="5"] .gvc-avatar-item:nth-child(2) {
            grid-column: 3 / 5;
        }

        .gvc-avatar-grid[data-count="5"] .gvc-avatar-item:nth-child(3) {
            grid-column: 5 / 7;
        }

        .gvc-avatar-grid[data-count="5"] .gvc-avatar-item:nth-child(4) {
            grid-column: 2 / 4;
        }

        .gvc-avatar-grid[data-count="5"] .gvc-avatar-item:nth-child(5) {
            grid-column: 4 / 6;
        }

        /* 6娴滅尨锟?x2 */
        .gvc-avatar-grid[data-count="6"] {
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* 7娴滅尨绱版稉?锟?锟?鐏炲懍鑵戦敍宀€锟?閸掓缍夐弽?*/
        .gvc-avatar-grid[data-count="7"] {
            grid-template-columns: repeat(6, 1fr);
        }

        .gvc-avatar-grid[data-count="7"] .gvc-avatar-item:nth-child(1) {
            grid-column: 1 / 3;
        }

        .gvc-avatar-grid[data-count="7"] .gvc-avatar-item:nth-child(2) {
            grid-column: 3 / 5;
        }

        .gvc-avatar-grid[data-count="7"] .gvc-avatar-item:nth-child(3) {
            grid-column: 5 / 7;
        }

        .gvc-avatar-grid[data-count="7"] .gvc-avatar-item:nth-child(4) {
            grid-column: 1 / 3;
        }

        .gvc-avatar-grid[data-count="7"] .gvc-avatar-item:nth-child(5) {
            grid-column: 3 / 5;
        }

        .gvc-avatar-grid[data-count="7"] .gvc-avatar-item:nth-child(6) {
            grid-column: 5 / 7;
        }

        .gvc-avatar-grid[data-count="7"] .gvc-avatar-item:nth-child(7) {
            grid-column: 3 / 5;
        }

        /* 8娴滅尨锟?x2 */
        .gvc-avatar-grid[data-count="8"] {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }

        /* 9娴滅尨锟?x3 */
        .gvc-avatar-grid[data-count="9"] {
            grid-template-columns: 1fr 1fr 1fr;
        }

        .gvc-avatar-item {
            position: relative;
            aspect-ratio: 1;
            overflow: hidden;
            transition: opacity 0.4s ease;
            opacity: 0.35;
        }

        .gvc-avatar-item.speaking {
            opacity: 1;
        }

        .gvc-avatar-item.is-user {
            opacity: 0.8;
        }

        .gvc-avatar-img-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .gvc-avatar-item.speaking .gvc-avatar-img-wrap {
            box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.7);
        }

        .gvc-avatar-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .gvc-avatar-name {
            position: absolute;
            bottom: 6px;
            left: 0;
            right: 0;
            font-size: 12px;
            color: #fff;
            text-align: center;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
            pointer-events: none;
            z-index: 2;
        }

        /* 鐠囩鐦芥稉澶屽仯鐠哄啿濮╅幐鍥┿仛锟?- 婢舵潙鍎氭惔鏇㈠劥鐏炲懍锟?*/
        .gvc-speaking-dots {
            display: none;
            position: absolute;
            bottom: 26px;
            left: 50%;
            transform: translateX(-50%);
            gap: 4px;
            align-items: flex-end;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            padding: 4px 8px;
            z-index: 3;
        }

        .gvc-avatar-item.speaking .gvc-speaking-dots {
            display: flex;
        }

        .gvc-speaking-dots span {
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
            animation: gvcDotBounce 1s ease-in-out infinite;
        }

        .gvc-speaking-dots span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .gvc-speaking-dots span:nth-child(3) {
            animation-delay: 0.3s;
        }

        @keyframes gvcDotBounce {

            0%,
            60%,
            100% {
                transform: translateY(0);
                opacity: 0.5;
            }

            30% {
                transform: translateY(-6px);
                opacity: 1;
            }
        }

        /* 濮樻梹鍦洪崠鍝勭厵閻ㄥ嫮鐡戝鍖扞閸ョ偛顦叉稉澶屽仯鐠哄啿锟?*/
        .gvc-typing-indicator {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            animation: bubbleFadeIn 0.3s ease-out;
            padding: 4px 0;
        }

        .gvc-typing-indicator .gvc-typing-body {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 10px 16px;
            border-radius: 14px;
            background: rgba(60, 60, 60, 0.5);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom-left-radius: 4px;
        }

        .gvc-typing-indicator .gvc-typing-dot {
            width: 7px;
            height: 7px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            animation: gvcDotBounce 1s ease-in-out infinite;
        }

        .gvc-typing-indicator .gvc-typing-dot:nth-child(2) {
            animation-delay: 0.15s;
        }

        .gvc-typing-indicator .gvc-typing-dot:nth-child(3) {
            animation-delay: 0.3s;
        }

        /* 濮樻梹鍦哄☉鍫熶紖锟?*/
        .gvc-bubbles {
            flex: 1;
            padding: 10px 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .gvc-bubble {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            animation: bubbleFadeIn 0.3s ease-out;
        }

        .gvc-bubble.user {
            flex-direction: row-reverse;
        }

        .gvc-bubble-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .gvc-bubble-body {
            max-width: 70%;
        }

        .gvc-bubble-name {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 2px;
        }

        .gvc-bubble.user .gvc-bubble-name {
            text-align: right;
        }

        .gvc-bubble-text {
            padding: 8px 12px;
            border-radius: 14px;
            font-size: 14px;
            line-height: 1.4;
            word-break: break-word;
            color: rgba(255, 255, 255, 0.95);
        }

        .gvc-bubble:not(.user) .gvc-bubble-text {
            background: rgba(60, 60, 60, 0.5);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom-left-radius: 4px;
        }

        .gvc-bubble.user .gvc-bubble-text {
            background: rgba(30, 30, 30, 0.6);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom-right-radius: 4px;
        }

        /* 鎼存洟鍎撮幒褍鍩楅崠?*/
        .gvc-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 20px 30px;
            padding-bottom: calc(30px + var(--safe-area-inset-bottom));
            gap: 14px;
        }

        .gvc-timer {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            font-family: 'SF Mono', 'Monaco', monospace;
            letter-spacing: 1px;
        }

        /* ================= 鐟欏棝顣堕柅姘崇樈閹稿鎸抽弽宄扮础 ================= */
        .video-call-btn {
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: background-color 0.2s, transform 0.2s;
        }

        .video-call-btn:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .video-call-btn:active {
            transform: scale(0.95);
        }

        .icon-camera {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        /* ================= 鐟欏棝顣堕柅姘崇樈閻ｅ矂娼伴弽宄扮础 (Video Call Layer) ================= */

        /* 鐟欏棝顣堕柅姘崇樈鐎圭懓锟?- 閸忋劌鐫嗙憰鍡欐磰 */
        #video-call-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99999;
            display: none;
        }

        #video-call-layer.active {
            display: block;
        }

        /* 濡剝瀚欑憴鍡涱暥閼冲本锟?- 姒涙顓绘径鏉戝剼閸旂姾浜ゅ顔界樅閻滆崵鎷戦弫鍫熺亯 */
        .video-call-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #1a1a2e;
            background-size: cover;
            background-position: center;
            /* 姒涙顓绘潪璇蹭簳濮ｆ稓骞撻悹鍐跨窗閺屾柨瀵查崢瀣級婢舵潙鍎氶惃鍕剼缁辩姵锟?*/
            filter: blur(6px) saturate(1.2) brightness(0.7);
            transform: scale(1.15);
            transition: filter 0.3s ease, transform 0.3s ease;
        }

        /* 閺堝鍤滅€规矮绠熼懗灞炬珯閺冭绱濋崣鏍ㄧХ濡紕纭﹂敍灞剧閺呯増妯夌粈?*/
        .video-call-bg.has-custom-bg {
            filter: none;
            transform: none;
        }

        /* 濞村懓澹婇拏娆忕湴 - 婢х偛濮為弬鍥х摟閸欘垵顕伴敓?*/
        .video-call-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.15);
            pointer-events: none;
        }

        /* 鐟欏棝顣堕柅姘崇樈閸愬懎顔愰敓?*/
        .video-call-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            z-index: 1;
        }

        /* 妞ゅ爼鍎存潻铚傜稑娣団剝浼呴弽?*/
        .video-call-header-mini {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 15px 20px 15px 20px;
            padding-top: calc(15px + var(--safe-area-inset-top));
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            z-index: 10;
        }

        .video-call-header-mini .video-call-name {
            font-size: 18px;
            font-weight: bold;
            color: white;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        }

        .video-call-header-mini .video-call-timer {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            font-family: 'SF Mono', 'Monaco', monospace;
            letter-spacing: 1px;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
        }

        /* 鐟欏棝顣堕柅姘崇樈濞戝牊浼呴崠鍝勭厵 - 娴犲孩鎲氶崓蹇撱仈鐏忓繒鐛ユ稉瀣煙瀵偓锟?*/
        .video-call-bubbles {
            position: absolute;
            top: calc(165px + var(--safe-area-inset-top));
            left: 0;
            right: 0;
            bottom: 150px;
            bottom: calc(150px + var(--safe-area-inset-bottom));
            padding: 10px 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* 鐟欏棝顣堕柅姘崇樈濮樻梹锟?- 婢跺秶鏁ょ拠顓㈢叾闁俺鐦藉鏃€鍦洪弽宄扮础 */
        .video-call-bubble {
            max-width: 75%;
            padding: 12px 16px;
            border-radius: 18px;
            font-size: 15px;
            line-height: 1.5;
            word-break: break-word;
            animation: bubbleFadeIn 0.3s ease-out;
        }

        /* 閻劍鍩涘鏃€锟?*/
        .video-call-bubble.user {
            align-self: flex-end;
            background: rgba(30, 30, 30, 0.6);
            backdrop-filter: blur(12px);
            color: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom-right-radius: 6px;
        }

        /* AI濮樻梹锟?*/
        .video-call-bubble.ai {
            align-self: flex-start;
            background: rgba(60, 60, 60, 0.5);
            backdrop-filter: blur(12px);
            color: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-bottom-left-radius: 6px;
        }

        /* 閵嗘劙鍣搁悙骞库偓鎴濆З娴ｆ粍寮挎潻鐗堫攱閺嶅嘲锟?- 閺勫墽銇氶崷銊ヮ嚠鐠囨繃鐨靛▔鈥茬瑐锟?*/
        .action-bubble {
            align-self: flex-start;
            max-width: 80%;
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            border-radius: 10px;
            font-size: 12px;
            color: #888;
            line-height: 1.4;
            margin-bottom: 2px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
            animation: actionFadeIn 0.3s ease-out;
        }

        @keyframes actionFadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ==================== 閼奉亜鐣炬稊澶嬬毜濞夆€茬瑓閹峰鈧瀚ㄩ崳?(CBS Dropdown) ==================== */

        .cbs-dropdown {
            position: relative;
            margin-top: 6px;
        }

        .cbs-dropdown-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            background: #fffbfc;
            border: 1.5px solid #FFDEE9;
            border-radius: 10px;
            cursor: pointer;
            font-size: 13px;
            color: #666;
            transition: border-color 0.2s, box-shadow 0.2s;
            user-select: none;
        }

        .cbs-dropdown-trigger:hover {
            border-color: #FFB7C5;
            box-shadow: 0 2px 8px rgba(255, 183, 197, 0.25);
        }

        .cbs-dropdown.open .cbs-dropdown-trigger {
            border-color: #FFB7C5;
            box-shadow: 0 2px 12px rgba(255, 183, 197, 0.35);
        }

        .cbs-dropdown-text {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cbs-dropdown-arrow {
            font-size: 12px;
            color: #bbb;
            transition: transform 0.25s;
            margin-left: 8px;
        }

        .cbs-dropdown.open .cbs-dropdown-arrow {
            transform: rotate(180deg);
        }

        .cbs-dropdown-menu {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            max-height: 260px;
            overflow-y: auto;
            background: #fff;
            border: 1.5px solid #FFDEE9;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(255, 183, 197, 0.25);
            z-index: 100;
            padding: 4px 0;
            animation: cbsSlideDown 0.2s ease-out;
        }

        @keyframes cbsSlideDown {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .cbs-dropdown-menu::-webkit-scrollbar {
            width: 4px;
        }

        .cbs-dropdown-menu::-webkit-scrollbar-thumb {
            background: #FFDEE9;
            border-radius: 2px;
        }

        .cbs-option {
            padding: 9px 14px;
            font-size: 13px;
            color: #555;
            cursor: pointer;
            transition: background 0.15s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cbs-option:hover {
            background: #fff0f3;
        }

        .cbs-option.active {
            background: #ffe5eb;
            color: #d63384;
            font-weight: 600;
        }

        /* --- CBS Group (collapsible) --- */
        .cbs-group {
            border-top: 1px solid #fef0f3;
        }

        .cbs-group:first-child {
            border-top: none;
        }

        .cbs-group-header {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s;
            gap: 6px;
        }

        .cbs-group-header:hover {
            background: #fef8f9;
        }

        .cbs-group-arrow {
            display: inline-block;
            font-size: 14px;
            color: #ccc;
            transition: transform 0.25s;
            transform: rotate(0deg);
            width: 14px;
            text-align: center;
            flex-shrink: 0;
        }

        .cbs-group-arrow.open {
            transform: rotate(90deg);
        }

        .cbs-group-name {
            font-size: 12px;
            font-weight: 600;
            color: #b07d8e;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cbs-group-count {
            font-size: 11px;
            color: #ccc;
            background: #fef0f3;
            padding: 1px 7px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .cbs-group-body .cbs-option {
            padding-left: 32px;
        }

        /* ================= 妫ｆ牠銆夐柌宥嗙€弽宄扮础 (Home Refactor V3 - Pixel Perfect) ================= */

        /* 鐟欏棝顣堕柅姘崇樈鎼存洟鍎撮幒褍鍩楅崠?*/
        .video-call-bottom-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
            padding: 15px 20px 12px 20px;
            padding-bottom: calc(12px + var(--safe-area-inset-bottom));
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        /* 鐟欏棝顣堕柅姘崇樈鎼存洟鍎存潏鎾冲弳锟?*/
        .video-call-bottom-controls .voice-call-input-bar {
            width: 100%;
        }

        /* 娴滄梹瀵滈柦顔艰嫙閹烘帟锟?*/
        .video-call-btn-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        /* 鐏忓繐娓鹃幐澶愭尦閿涘牊澹冩竟鏉挎珤閵嗕胶鐐曟潪顒婄礆 */
        .video-call-bottom-btn {
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .video-call-bottom-btn:active {
            transform: scale(0.9);
            background: rgba(255, 255, 255, 0.25);
        }

        .video-call-bottom-btn.muted {
            opacity: 0.5;
        }

        /* 鐏忓繑瀵曢弬顓熷瘻锟?*/
        .video-call-bottom-hangup {
            width: 52px;
            height: 52px;
            background: linear-gradient(145deg, #ff4757, #e84141);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(232, 65, 65, 0.5);
            transition: transform 0.2s ease;
        }

        .video-call-bottom-hangup:active {
            transform: scale(0.9);
        }

        .video-call-bottom-hangup svg {
            transform: rotate(135deg);
        }

        /* 棣冩懘 鐟欏棝顣堕柅姘崇樈閹垫挸鐡ч幐鍥┿仛閸ｎ煉绱欐稉澶夐嚋鐠哄啿濮╅惃鍕仯锟?*/
        .video-call-bubble.video-call-typing {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 14px 20px;
            min-width: 60px;
        }

        .video-call-typing .typing-dot {
            width: 8px;
            height: 8px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            animation: videoTypingBounce 1.4s ease-in-out infinite;
        }

        .video-call-typing .typing-dot:nth-child(1) {
            animation-delay: 0s;
        }

        .video-call-typing .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .video-call-typing .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes videoTypingBounce {

            0%,
            60%,
            100% {
                transform: translateY(0);
                opacity: 0.5;
            }

            30% {
                transform: translateY(-8px);
                opacity: 1;
            }
        }

        /* ==================== 娑撳顣藉鏃€鍦洪柅澶嬪閺嶅嘲锟?==================== */

        /* 娑撳顣介柅澶嬪閸ｃ劌顔愰敓?*/
        .theme-selector {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
            background: #fef8f9;
            border-radius: 12px;
            border: 1px solid #FFDEE9;
        }

        /* 娑撳顣介柅澶愶拷?*/
        .theme-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 8px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 2px solid transparent;
        }

        .theme-option:hover {
            background: rgba(255, 183, 197, 0.2);
        }

        .theme-option.selected {
            background: rgba(255, 183, 197, 0.3);
            border-color: #FFB7C5;
        }

        .theme-option span {
            font-size: 11px;
            color: var(--text-brown);
            text-align: center;
        }

        /* 娑撳顣芥０鍕潔閼规彃锟?*/
        .theme-preview {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* 妫板嫯顫嶉懝鎻掓健閺嶅嘲锟?- 閺傛粌鎮滅€电懓宕愰敓?娑撳鍨庨弰鍓с仛 */
        .theme-preview::before,
        .theme-preview::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
        }

        /* 姒涙顓绘稉濠氼暯妫板嫯锟?(缁锟?缁锟? */
        .default-preview {
            background: linear-gradient(135deg, #e5f7ff 50%, #ffe5eb 50%);
            border: 2px solid #8bb1d0;
        }

        /* 閼藉甯楅懞顓濈妫板嫯锟?*/
        .berry-preview {
            background: linear-gradient(135deg, #ffffff 50%, #ffe5eb 50%);
            border: 2px solid #FFDEE9;
        }

        /* 閽栧嫯宓庨悽鐔烽榾妫板嫯锟?*/
        .mint-preview {
            background: linear-gradient(135deg, #8e867b 50%, #C2E5D3 50%);
            border: 2px solid #a4cbbf;
        }

        /* 閽伮ゆ倗閸愭澘銈舵０鍕潔 */
        .grape-preview {
            background: linear-gradient(135deg, #FFFBF0 50%, #f3e5ff 50%);
            border: 2px solid #d2b1f1;
        }

        /* 濞撮娲傞懟蹇斿ⅵ妫板嫯锟?*/
        .ocean-preview {
            background: linear-gradient(135deg, #FFFFFF 50%, #e5f7ff 50%);
            border: 2px solid #D6E4FF;
        }

        /* 閼煎甯€闂堟帗褰佹０鍕潔 */
        .jasmine-preview {
            background: linear-gradient(135deg, #F9FFF9 50%, #e6f9e9 50%);
            border: 2px solid #D8F3DC;
        }

        /* ==================== 5婵傛ぞ瀵屾０妤S閸欐﹢锟?==================== */

        /* 閼藉甯楅懞顓濈 */
        .theme-berry {
            --ai-bg: #ffffff;
            --ai-text: #5e5e5e;
            --ai-border-color: #FFDEE9;
            --ai-border-width: 2px;
            --me-bg: #ffe5eb;
            --me-text: #b76683;
            --me-border-color: #d5aab4;
            --me-border-width: 2px;
            --card-bg: #FFDEE9;
            --card-text: #ec6a8a;
            --card-icon-color: #FF9A9E;
            --card-footer-bg: #FF85A2;
            --card-footer-text: #FFFFFF;
        }

        /* 閽栧嫯宓庨悽鐔烽榾 */
        .theme-mint {
            --ai-bg: #8e867b;
            --ai-text: #d6ffec;
            --ai-border-color: #a4cbbf;
            --ai-border-width: 2px;
            --me-bg: #C2E5D3;
            --me-text: #624e37;
            --me-border-color: #A8D8B9;
            --me-border-width: 2px;
            --card-bg: #C2E5D3;
            --card-text: #5E4B35;
            --card-icon-color: #C2E5D3;
            --card-footer-bg: #95856f;
            --card-footer-text: #FFFFFF;
        }

        /* 閽伮ゆ倗閸愭澘锟?*/
        .theme-grape {
            --ai-bg: #FFFBF0;
            --ai-text: #705496;
            --ai-border-color: #d2b1f1;
            --ai-border-width: 2px;
            --me-bg: #f3e5ff;
            --me-text: #815889;
            --me-border-color: #af9cd3;
            --me-border-width: 2px;
            --card-bg: #EAE4FF;
            --card-text: #543E7A;
            --card-icon-color: #9F86C0;
            --card-footer-bg: #fff4d6;
            --card-footer-text: #6A4C93;
        }

        /* 濞撮娲傞懟蹇斿ⅵ */
        .theme-ocean {
            --ai-bg: #FFFFFF;
            --ai-text: #004E89;
            --ai-border-color: #D6E4FF;
            --ai-border-width: 2px;
            --me-bg: #e5f7ff;
            --me-text: #325881;
            --me-border-color: #8bb1d0;
            --me-border-width: 2px;
            --card-bg: #E3F2FD;
            --card-text: #235ba4;
            --card-icon-color: #48CAE4;
            --card-footer-bg: #77bee4;
            --card-footer-text: #FFFFFF;
        }

        /* 閼煎甯€闂堟帗锟?*/
        .theme-jasmine {
            --ai-bg: #F9FFF9;
            --ai-text: #2D6A4F;
            --ai-border-color: #D8F3DC;
            --ai-border-width: 2px;
            --me-bg: #e6f9e9;
            --me-text: #1B4332;
            --me-border-color: #95D5B2;
            --me-border-width: 2px;
            --card-bg: #E8F7EE;
            --card-text: #2D6A4F;
            --card-icon-color: #52B788;
            --card-footer-bg: #74C69D;
            --card-footer-text: #FFFFFF;
        }

        /* ==================== 娑撳顣芥惔鏃傛暏閸掔増鐨靛▔鈩冪壉锟?==================== */

        /* AI濮樻梹鍦烘稉濠氼暯閺嶅嘲锟?*/
        [class*="theme-"] .chat-msg-row.ai .chat-bubble {
            background: var(--ai-bg);
            color: var(--ai-text);
            border: var(--ai-border-width) solid var(--ai-border-color);
        }

        /* 閻劍鍩涘鏃€鍦烘稉濠氼暯閺嶅嘲锟?*/
        [class*="theme-"] .chat-msg-row.me .chat-bubble {
            background: var(--me-bg);
            color: var(--me-text);
            border: var(--me-border-width) solid var(--me-border-color);
        }

        /* 鏉烆剝澶勯崡锛勫娑撳顣介弽宄扮础 */
        [class*="theme-"] .transfer-card {
            background: var(--card-bg);
            color: var(--card-text);
        }

        [class*="theme-"] .transfer-icon {
            color: var(--card-icon-color);
        }

        [class*="theme-"] .transfer-footer {
            background: var(--card-footer-bg);
            color: var(--card-footer-text);
        }

        [class*="theme-"] .transfer-note,
        [class*="theme-"] .transfer-amount {
            color: var(--card-text);
        }


        /* ================= 妫ｆ牠銆夐柌宥嗙€弽宄扮础 (Home Refactor V3 - Pixel Perfect) ================= */

        /* 1. 妞ゅ爼鍎撮崠鍝勭厵鐎圭懓锟?*/
        .home-header-section {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            width: 100%;
            padding: 10px 0px;
            padding-top: calc(10px + env(safe-area-inset-top));
            margin-bottom: 20px;
            margin-top: 5px;
            /* 閺佺繝缍嬫稉瀣降娑撯偓锟?*/
            position: relative;
        }

        /* 2. 瀹革缚鏅堕敍姘闂傜繝绗屾径鈺傜毜 */
        .header-info-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            margin-top: 40px;
            margin-left: -10px;
        }

        .home-time-big {
            font-size: 65px;
            /* 鐠嬪啯鏆ｉ敓?65px */
            font-weight: bold;
            color: #746164;
            /* 閺備即顤侀敓?*/
            line-height: 0.9;
            font-family: 'Times New Roman', serif;
            margin-bottom: 5px;
            letter-spacing: 1px;
        }

        /* 婢垛晜鐨电€圭懓锟?*/
        .home-weather-container {
            display: flex;
            align-items: flex-start;
            /* 妞ゅ爼鍎寸€靛綊缍堥敍宀勬Щ濮濄垹娴橀弽鍥﹁础锟?*/
            gap: 12px;
            margin-left: 10px;
            /* 鐠虹喐妞傞梻鎾晩瀵偓娑撯偓锟?*/
        }

        .home-weather-text-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 鐠佲晞鍏岄崶濠傛嫲濞撯晛瀹崇仦鍛厬鐎靛綊锟?*/
            gap: 0px;
            /* 缁毖冨櫨 */
        }

        .home-location-pill {
            background: #e67f93;
            /* 閺備即顤侀敓?*/
            color: white;
            padding: 3px 10px;
            border-radius: 15px;
            /* 閸﹀棜顫楅敓?15px */
            font-size: 13px;
            font-weight: bold;
            text-shadow: none;
            /* 閸樼粯甯€閹舵洖锟?*/
            letter-spacing: 1px;
            /* 鐎涙妫跨捄婵嗩啍娑撯偓锟?*/
            margin-bottom: 2px;
        }

        .home-temp-text {
            font-size: 46px;
            /* 娑撶粯鏆熺€涙銇囬敓?*/
            color: #e67f93;
            /* 閺備即顤侀敓?*/
            font-weight: bold;
            font-family: 'Times New Roman', serif;
            line-height: 1;
            display: flex;
            /* 娑撹桨绨￠弴鏉戙偨閹貉冨煑 锟?閻ㄥ嫪缍呴敓?*/
            align-items: flex-start;
        }

        /* 婢垛晜鐨甸崶鐐垼 */
        .home-weather-icon {
            width: 65px;
            /* 鐠嬪啯鏆ｉ敓?65px */
            height: auto;
            object-fit: contain;
            filter: none;
            /* 娑撳秷顩﹂崝鐘冲锟?*/
            margin-top: 5px;
        }

        /* 3. 閸欏厖鏅堕敍姘辩焽閼瑰弶妫╅敓?*/
        .home-calendar-card {
            background: rgba(255, 255, 255, 0.7);
            /* 70% 闁繑妲戦敓?*/
            border-radius: 16px;
            overflow: hidden;
            width: 180px;
            /* 鐠嬪啯鏆ｉ敓?180px */
            margin-top: 35px;
            /* 缁嬪秴浜曟稉瀣╃捄鐔蜂箯鏉堢懓顕敓?*/
            padding: 6px;
            margin-right: -10px;
            transform: scale(0.95);
            /* 閺佺繝缍嬬紓鈺佺毈锟?5% */
        }

        /* 閼宠泛娉悰銊ャ仈 */
        .home-cal-header {
            background: #ffa3b5;
            /* 缁澹婄悰銊ャ仈 */
            border-radius: 20px;
            /* 閸﹀棙锟?*/
            color: white;
            font-size: 11px;
            padding: 4px 0;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .home-cal-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            padding: 0 2px;
            gap: 0px;
        }

        .home-cal-day {
            font-size: 11px;
            /* 鐎涙ぞ缍嬮敓?11px */
            text-align: center;
            padding: 3px 0;
            color: #7a5b5b;
            /* 濡洝澹婇弫鏉跨摟 */
            position: relative;
            font-weight: bold;
            cursor: default;
            border-radius: 4px;
        }

        /* 閸涖劍婀弮銉︽埂閸欐ɑ鍨氱划澶庡 */
        .home-cal-day.is-weekend {
            color: var(--home-cal-weekend-color, #f59aac);
        }

        /* 娴犲﹤銇夐敍姘虫憫閼硅尙鍩嶉敓?*/
        .home-cal-day.is-today {
            position: relative;
            color: white !important;
            z-index: 1;
        }

        .home-cal-day.is-today::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 22px;
            height: 22px;
            background-color: var(--home-cal-today-heart-color, #8FD3FE);
            border-radius: 50%;
            z-index: -1;
        }

        /* 4. 閸欏厖绗傜憴鎺炵窗閾︾婢忛敓?*/
        .home-api-btn {
            position: absolute;
            top: calc(-5px + env(safe-area-inset-top));
            /* 鐠嬪啯锟?top閿涘矁鈧啳妾荤€瑰鍙忛崠鍝勭厵 */
            right: -10px;
            /* 瀵扳偓閸欏厖绔撮敓?*/
            width: 50px;
            /* 鐎硅棄锟?50px */
            height: auto;
            cursor: pointer;
            z-index: 50;
            transition: transform 0.2s;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
        }

        .home-api-btn:active {
            transform: scale(0.9);
        }

        /* 5. 鎼存洟鍎撮崶鐐垼闂冮潧锟?(娣囨繃瀵旀稉宥呭綁) */
        .home-app-grid-new {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            width: 100%;
            margin-top: 15px;
            padding-bottom: 20px;
        }

        .home-app-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .home-app-icon:active {
            transform: scale(0.9);
        }

        .app-icon-box {
            width: 60px;
            height: 60px;
            background: transparent;
            /* 閺€閫涜礋闁繑锟?*/
            border: none;
            /* 閸樼粯甯€閸樼喐娼甸惃鍕珶锟?*/
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            box-shadow: none;
            /* 閸樼粯甯€閹舵洖锟?*/
            overflow: hidden;
            /* 鐟佷礁澹€鐡掑懎鍤惃鍕禈锟?*/
        }

        /* 閸ョ偓鐖ｉ崶鍓у閺嶅嘲锟?*/
        .app-icon-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 閺€閫涜礋cover鐠佲晛娴橀悧鍥э綖濠娾剝锟?*/
        }

        /* 娑撶儤鐦℃稉顏勬禈閺嶅洦鍧婇崝鐘靛鐎规氨娈戦幓蹇氱珶妫版粏锟?*/
        .home-app-icon:nth-child(1) .app-icon-box {
            border: 2px solid #fcb7b7;
            /* 閼卞﹤锟?*/
        }

        .home-app-icon:nth-child(2) .app-icon-box {
            border: 2px solid #416086;
            /* 娑撴牜鏅稊?*/
        }

        .home-app-icon:nth-child(3) .app-icon-box {
            border: 2px solid #e77a94;
            /* 鐏忓繒娲伴弽?*/
        }

        .home-app-icon:nth-child(4) .app-icon-box {
            border: 2px solid #a58cbb;
            /* 閺冦儴锟?*/
        }

        .home-app-icon:nth-child(5) .app-icon-box {
            border: 2px solid #75b9bd;
            /* 閺冦儳鈻奸張?*/
        }

        .home-app-icon:nth-child(6) .app-icon-box {
            border: 2px solid #8e75a3;
            /* 娑旓缚锟?*/
        }

        .home-app-icon:nth-child(7) .app-icon-box {
            border: 2px solid #e0ae53;
            /* 閻ｎ亣瀵楅柦?*/
        }

        .home-app-icon:nth-child(8) .app-icon-box {
            border: 2px solid #b3cb98;
            /* 缁変焦鏆€ */
        }

        .app-icon-label {
            font-size: 12px;
            color: #888;
            font-weight: bold;
        }




        /* ================= 棣冨箚 娴狀亣銆冮惄妯荤壉锟?- 閺佹潙鎮庡〒鍛倞锟?================= */

        /* 1. 鐎圭懓娅掗敍姘弿鐏炲繗鍒涙潏鐟扮鐏炩偓 */
        .home-dashboard-container {
            position: relative;
            width: 100vw !important;
            left: 0 !important;
            margin-left: calc(-1 * (100vw - 100%) / 2) !important;
            margin-right: calc(-1 * (100vw - 100%) / 2) !important;
            margin-top: -15px !important;
            /* 閺佺繝缍嬪鈧稉濠勶拷?5px */
            aspect-ratio: 375 / 280;
            background-image: url('shouye/11.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: block !important;
            padding: 0 !important;
            overflow: hidden;
            z-index: 1;
        }

        /* 2. 闁氨鏁ら弽鐓庣摍鐎规矮缍呴崳?*/
        .dash-item {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 3. 閸忣厺閲滃Ο鈥虫健閻ㄥ嫬娼楅弽?*/
        .pos-1 {
            top: 19%;
            left: 8%;
            width: 26%;
            height: 34%;
        }

        /* 姒涙垼锟?- 閺€鎯с亣楠炶泛涔忕粔?*/
        .pos-2 {
            top: 16%;
            left: 37%;
            width: 26.6%;
            height: 35.7%;
        }

        /* 缁変焦鏆€ */
        .pos-3 {
            top: 17%;
            left: 66.5%;
            width: 26.6%;
            height: 50%;
        }

        /* 鐏忓繒娲伴弽?*/
        .pos-4 {
            top: 57%;
            left: 9%;
            width: 26.6%;
            height: 42.8%;
        }

        /* 瀵板懎锟?*/
        .pos-5 {
            top: 55.3%;
            left: 37%;
            width: 26.6%;
            height: 38.5%;
        }

        /* 閻ｎ亣瀵楅柦?*/
        .pos-6 {
            top: 60%;
            left: 68%;
            width: 24%;
            height: 32.1%;
        }

        /* 鏉烆喗锟?*/

        /* 4. 鐎涙ぞ缍嬬拋鍓х枂 */
        .home-dashboard-container,
        .home-dashboard-container * {
            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif !important;
            font-weight: 500 !important;
        }

        /* 閺佹澘鐡ф担璺ㄦ暏 Times New Roman */
        .coach-num,
        .goal-num,
        .tomato-num {
            font-family: 'Times New Roman', serif !important;
            font-weight: 600 !important;
        }

        /* 5. 姒涙垼鍏岄崬杈╁ */
        .module-vinyl {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .vinyl-disc-bg {
            width: 95%;
            height: 95%;
            object-fit: contain;
        }

        .be-manager-css-btn {
            background: #f3e5f5;
            color: #7b1fa2;
        }

        /* ===== Bubble Group Management Styles ===== */

        .be-mgr-new-group-bar {
            display: flex;
            gap: 8px;
            padding: 8px 12px;
            background: linear-gradient(135deg, #f0ebff, #e8e2f8);
            border-bottom: 1px solid #d4c8ed;
            align-items: center;
        }

        .be-mgr-group {
            margin-bottom: 4px;
        }

        .be-mgr-group-header {
            display: flex;
            align-items: center;
            padding: 8px 10px;
            background: linear-gradient(135deg, #f5f2ff, #ede8ff);
            border-radius: 8px;
            cursor: pointer;
            gap: 6px;
            margin-bottom: 2px;
            transition: background 0.2s;
            user-select: none;
        }

        .be-mgr-group-header:active {
            background: linear-gradient(135deg, #ece6ff, #ddd5f5);
        }

        .be-mgr-group-arrow {
            font-size: 16px;
            font-weight: bold;
            color: #8b6fc0;
            transition: transform 0.25s ease;
            display: inline-block;
            width: 16px;
            text-align: center;
            flex-shrink: 0;
        }

        .be-mgr-group-arrow.open {
            transform: rotate(90deg);
        }

        .be-mgr-group-name {
            font-size: 13px;
            font-weight: bold;
            color: #6b4fa0;
            flex: 1;
        }

        .be-mgr-group-count {
            font-size: 11px;
            color: #fff;
            background: #c4a8e8;
            border-radius: 10px;
            padding: 1px 7px;
            min-width: 16px;
            text-align: center;
            flex-shrink: 0;
        }

        .be-mgr-group-actions {
            display: flex;
            gap: 2px;
            flex-shrink: 0;
            margin-left: 4px;
        }

        .be-mgr-grp-btn {
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 14px;
            padding: 2px 4px;
            border-radius: 6px;
            transition: background 0.15s;
            line-height: 1;
        }

        .be-mgr-grp-btn:active {
            background: rgba(0,0,0,0.08);
            transform: scale(0.9);
        }

        .be-mgr-group-body {
            padding-left: 4px;
        }

        .be-mgr-move-btn {
            background: #e8f5e9;
            color: #2e7d32;
        }

        /* ===== Move-to-Group Overlay ===== */

        .be-move-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.45);
            z-index: 20001;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: beMoveFadeIn 0.2s ease;
        }

        @keyframes beMoveFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .be-move-panel {
            width: 85%;
            max-width: 340px;
            background: var(--theme-card-bg, #fff);
            border-radius: 18px;
            padding: 20px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
            animation: beMovePopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes beMovePopIn {
            from { opacity: 0; transform: scale(0.9) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .be-move-panel-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--text-brown, #59474a);
            text-align: center;
            margin-bottom: 15px;
        }

        .be-move-panel-list {
            max-height: 220px;
            overflow-y: auto;
            margin-bottom: 12px;
        }

        .be-move-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            margin-bottom: 6px;
            background: var(--theme-input-bg, #fafafa);
            border: 1.5px solid transparent;
            border-radius: 10px;
            cursor: pointer;
            font-size: 13px;
            color: var(--text-brown, #333);
            transition: all 0.15s;
        }

        .be-move-option:active {
            transform: scale(0.97);
        }

        .be-move-option:hover {
            border-color: #c4a8e8;
            background: #f5f0ff;
        }

        .be-move-option.current {
            border-color: #c4a8e8;
            background: linear-gradient(135deg, #f5f0ff, #ede8ff);
        }

        .be-move-current {
            font-size: 10px;
            color: #fff;
            background: #c4a8e8;
            border-radius: 8px;
            padding: 2px 8px;
            font-weight: bold;
        }

        .be-move-new-group {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-bottom: 12px;
        }

        .be-move-cancel {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 25px;
            background: #ffcdd2;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
        }

        .be-move-cancel:active {
            transform: scale(0.96);
        }

        .vinyl-center-spin {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 55%;
            height: 0;
            padding-bottom: 55%;
            /* iOS fallback: use padding to maintain square aspect ratio */
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            background: #fff;
            overflow: hidden;
            animation: rotateVinyl 10s linear infinite;
            /* iOS fix: force GPU rendering for better circle rendering */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .vinyl-user-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            -webkit-border-radius: 50%;
        }

        @keyframes rotateVinyl {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        /* 6. 缁変焦鏆€閸楋紕锟?*/
        .card-inner {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .card-coach-style {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 3vw !important;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 4px;
            overflow: hidden;
        }

        .clip-icon {
            display: none !important;
            /* 瀹告彃鍨归梽?*/
        }

        .coach-header {
            width: 100%;
            background: #fd7d92;
            color: white;
            font-size: 3.5vw !important;
            font-weight: 900 !important;
            padding: 1.2vw 0 !important;
            text-align: center;
            white-space: nowrap;
            letter-spacing: 0.2em !important;
            border-radius: 0 0 2vw 2vw !important;
        }

        .coach-num {
            font-size: 10vw !important;
            color: #fb6599;
            line-height: 1;
            margin-top: 2px;
        }

        .coach-num span {
            font-size: 3vw !important;
            margin-left: 0.5vw !important;
        }

        .coach-badge {
            background: #fd7d92;
            color: white;
            font-size: 2.5vw !important;
            font-weight: bold !important;
            padding: 0.5vw 2vw !important;
            border-radius: 10vw !important;
            border: 1.5px solid #d64c65;
            white-space: nowrap;
            letter-spacing: 0.05em !important;
        }

        /* 7. 鐏忓繒娲伴弽?*/
        .module-goal {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .goal-pill {
            background: #fd7d92;
            color: white;
            font-size: 2.2vw !important;
            font-weight: bold !important;
            padding: 0.8vw 2vw !important;
            border-radius: 10px;
            position: absolute;
            top: -1vw !important;
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            z-index: 10; /* 閹绘劙鐝仦鍌滈獓閿涘瞼鈥樻穱婵嗘躬閸ュ墽澧栨稉濠冩煙 */
            border: 1.5px solid #d64c65;
            white-space: nowrap;
            letter-spacing: 0.2em !important;
        }

        .goal-rabbit-box {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 0 !important;
            margin-top: 2% !important;
            overflow: visible; /* 閸忎浇顔忛崘鍛啇濠с垹鍤€圭懓锟?*/
            position: relative;
            z-index: 1; /* 娣囨繃瀵旈崷銊ョ俺锟?*/
        }

        .goal-img {
            width: 65%;
            height: auto;
            object-fit: contain;
            transform: translateY(-10%);
            position: relative;
            z-index: 1; /* 娣囨繃瀵旈崷銊ョ俺鐏炲偊绱濇稉宥変紕閹糕剝鏋冿拷?*/
            max-width: 120px; /* 姒涙顓婚張鈧径褍顔旀惔锕傛閸掕绱濋梼鍙夘剾鏉╁洤锟?*/
        }
        
        /* 閼奉亜鐣炬稊澶婃槀鐎靛憡妞傞惃鍕壉锟?*/
        .goal-img.custom-size {
            /* 娑撳秷顔曠純鐣恑dth閿涘矁顔€閸愬懓浠堥弽宄扮础閻㈢喐锟?*/
            max-width: 300px !important; /* 閼奉亜鐣炬稊澶嬫娑旂喐婀侀張鈧径褔妾洪崚璁圭礉闂冨弶顒涙潻鍥с亣 */
        }

        .goal-num {
            position: absolute;
            top: 52% !important;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #f15e93;
            font-size: 10vw !important;
            z-index: 5; /* 绾喕绻氶弫鏉跨摟閸︺劌娴橀悧鍥︾瑐锟?*/
            pointer-events: none; /* 娑撳秹妯嗛幐锛勫仯閸戣绨ㄦ禒?*/
        }

        /* 8. 瀵板懎濮欏〒鍛礋 */
        .todo-style {
            width: 100%;
            height: 100%;
            padding: 1vw 0 0 0 !important;
        }

        .todo-badge {
            background: #fd7d92;
            color: white;
            font-size: 2.5vw !important;
            font-weight: bold !important;
            display: inline-block;
            padding: 0.5vw 2.5vw !important;
            border-radius: 10px;
            margin-bottom: 2vw !important;
            border: 1.5px solid #d24b64;
            letter-spacing: 0.2em !important;
        }

        .todo-item-row {
            font-size: 2.5vw !important;
            color: #666;
            margin-bottom: 1.5vw !important;
            display: flex;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
        }

        .todo-dot {
            width: 1.5vw !important;
            height: 1.5vw !important;
            background: #fb6599;
            border-radius: 50%;
            margin-right: 1vw !important;
            flex-shrink: 0;
        }

        /* 9. 閻ｎ亣瀵楅柦?*/
        .tomato-style {
            width: 100%;
            height: 100%;
            background-image: url('./__har_external/i.postimg.cc/RVXHQGNj/fanqiezhong.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .tomato-num {
            font-size: 10vw !important;
            color: #f15e93;
            text-shadow: 1px 1px 0 #fff;
            line-height: 1;
            transform: translate(2px, calc(1vw + 2px)) !important;
            /* 瀵扳偓锟?px閿涘苯绶氭稉?*/
        }

        .tomato-num span {
            font-size: 4vw !important;
        }

        .tomato-pill {
            background: #fd7d92;
            color: white;
            font-size: 2.2vw !important;
            font-weight: bold !important;
            padding: 0.5vw 2vw !important;
            border-radius: 10px;
            border: 1.5px solid #d64c65;
            margin-top: 2vw !important;
            letter-spacing: 0.15em !important;
            transform: translate(2px, 2px) !important;
            /* 瀵扳偓锟?px閿涘苯绶氭稉?px */
        }

        /* 10. 閻撗呭鏉烆喗锟?*/
        .slider-box {
            width: 105% !important;
            height: 105% !important;
            border-radius: 3vw !important;
            overflow: hidden;
            display: flex;
            scroll-snap-type: x mandatory;
            overflow-x: scroll;
            scrollbar-width: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .slider-box::-webkit-scrollbar {
            display: none;
        }

        .slide-img {
            min-width: 100%;
            height: 100%;
            object-fit: cover;
            scroll-snap-align: center;
        }


        /* --- 鏉烆喗鎸遍崶鐐瘹缁€铏瑰仯 (閺傛澘锟? --- */
        .slider-dots-overlay {
            position: absolute;
            bottom: 8px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 5px;
            z-index: 20;
            pointer-events: none;
            /* 鐠佲晝鍋ｉ崙鑽も敍闁繗绻冮崢浼欑礉娑撳秴濂栭崫宥囧仯閸ュ墽锟?*/
        }

        .slider-dot {
            width: 6px;
            height: 6px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            transition: all 0.3s;
        }

        .slider-dot.active {
            background: #fff;
            width: 12px;
            /* 闁鑵戦弮璺哄綁闂€澶哥锟?*/
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        /* 瀹革缚绗傜憴鎺炵窗鐟欐帟澹婄拋鍓х枂閸忋儱褰涢幐澶愭尦 */
        #home-layer .home-settings-btn {
            position: fixed;
            /* 閺€閫涜礋fixed閿涘瞼娴夌€甸€涚艾viewport鐎规矮锟?*/
            top: var(--safe-area-inset-top);
            /* 缁毖嗗垱鐏炲繐绠锋い鍫曞劥閿涘矁鈧啳妾荤€瑰鍙忛崠鍝勭厵 */
            left: 0;
            /* 缁毖嗗垱鐏炲繐绠峰锕佺珶 */
            width: auto;
            height: 60px;
            cursor: pointer;
            z-index: 100;
            /* 閹绘劙鐝畓-index绾喕绻氶崷銊︽付娑撳﹤锟?*/
            transition: transform 0.2s;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
        }

        /* ================= 娣囨繂鐡ㄩ惄顔界垼瀵湱鐛ラ弽宄扮础娴兼ê锟?(锟?閹存垹娈戦惄顔界垼"妞嬪孩锟? ================= */
        #saveGoalModal .modal-content {
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(89, 71, 74, 0.15);
            animation: popIn 0.3s ease-out;
        }

        #saveGoalModal .modal-header {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }

        #saveGoalModal .modal-header h3 {
            margin: 0;
            font-size: 20px;
            color: #59474a;
            font-weight: bold;
        }

        /* 閸忔娊妫撮幐澶愭尦閿涙艾褰告稉濠咁潡閹剚璇為崷鍡楄埌 */
        #saveGoalModal .close-btn {
            position: absolute;
            top: -10px;
            right: 0;
            width: 32px;
            height: 32px;
            background: #f8bbd0;
            color: #fff;
            border: none;
            border-radius: 50%;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #saveGoalModal .close-btn:hover {
            background: #ec407a;
            transform: scale(1.1) rotate(90deg);
        }

        /* 閺嶅洨锟?Chip 閺嶅嘲锟?(娴犺法鍙庨幋顏勬禈) */
        .folder-chip {
            padding: 8px 18px;
            background: #f3e5f5;
            /* 濞ｏ紕浼犻懝鑼跺剹锟?*/
            color: #7b1fa2;
            /* 濞ｈ京浼犻懝鍙夋瀮锟?*/
            border-radius: 20px;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .folder-chip:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .folder-chip.active {
            background: linear-gradient(90deg, #fd5392, #ff6b81);
            /* 缁澹婂〒鎰綁 */
            color: white;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(253, 83, 146, 0.4);
        }

        /* 鏉堟挸鍙嗗鍡曠喘锟?*/
        #saveFolderInput {
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            padding: 12px;
            font-size: 16px;
            transition: all 0.2s;
            background: #fafafa;
        }

        #saveFolderInput:focus {
            border-color: #f48fb1;
            background: #fff;
            outline: none;
            box-shadow: 0 0 0 3px rgba(244, 143, 177, 0.2);
        }

        /* 鎼存洟鍎撮幐澶愭尦闁氨鏁ら弽宄扮础 */
        .modal-btn {
            border: none;
            padding: 10px 0;
            font-size: 15px;
            cursor: pointer;
            transition: transform 0.2s;
            font-weight: bold;
            /* 缁夎濮╃粩顖氬悑鐎硅鈧傛叏锟?*/
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
            /* 绾喕绻氶幐澶愭尦閸欘垳鍋ｉ崙?*/
            pointer-events: auto;
            position: relative;
            z-index: 10;
        }

        .modal-btn:active {
            transform: scale(0.95);
        }

        /* 鎼存洟鍎撮幐澶愭尦娑撳﹦些娑撯偓锟?*/
        #saveGoalModal .modal-actions {
            margin-top: 10px;
            gap: 15px;
        }

        #saveGoalModal .modal-btn.primary {
            background: linear-gradient(135deg, #f48fb1, #ec407a);
            box-shadow: 0 4px 10px rgba(236, 64, 122, 0.3);
            border-radius: 12px;
        }

        #saveGoalModal .modal-btn.secondary {
            background: #f5f5f5;
            color: #666;
            border-radius: 12px;
        }

        /* ==================== 閹剚璇炵€佃壈鍩呴悶鍐兇锟?==================== */

        /* 閹剚璇炵€佃壈鍩呯€圭懓锟?*/
        .floating-nav {
            position: fixed;
            z-index: 9999;
            pointer-events: none;
        }

        /* 閹剚璇炵亸蹇曟倖 - 娴ｈ法鏁J12閸ュ墽锟?*/
        .floating-ball {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: auto;
            transition: opacity 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 10000;
            -webkit-user-select: none;
            user-select: none;
        }

        .floating-ball:active {
            transform: scale(0.9);
        }

        /* 閹剚璇為悶鍐ㄦ禈锟?*/
        .ball-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
        }

        /* 閼挎粌宕熺仦鏇炵磻閺冨爼娈ｉ挊蹇斿亾濞搭喚锟?*/
        .floating-ball.menu-open {
            opacity: 0;
            pointer-events: none;
        }

        /* 閼挎粌宕熼懗灞炬珯闁喚锟?*/
        .floating-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.3);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            z-index: 9998;
        }

        .floating-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* 鐏炴洖绱戦懣婊冨礋閿涘牆娓鹃惄姗堢礆- 缂傗晛鐨崚?00px */
        .floating-menu {
            position: fixed;
            width: 100px;
            height: 100px;
            background: rgba(255, 183, 197, 0.7);
            /* 闁繑妲戞惔?.7閿涘瞼些闂勩倖膩锟?*/
            border-radius: 50%;
            opacity: 0;
            transform: scale(0);
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 9999;
        }

        .floating-menu.active {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }

        /* 娑擃厼绺鹃崷鍡楁箑 - 閻у€熷閹诲繗绔熼敍宀€缂夌亸蹇撳煂30px */
        .menu-center-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            /* 闁繑妲戞惔锕傛娴ｅ骸锟?0% */
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
            /* 绾喕绻氶崷銊ュ瀻閸撹尙鍤庢稉濠傜湴 */
        }

        /* 閸掑棗澹婄痪?- 娣囶喖顦茬粚鎸幠侀敍灞艰厬闂傛挳鈧繑妲戦敍灞艰⒈鏉堣妯夌粈?*/
        .menu-divider {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 100%;
            /* 娴ｈ法鏁ゅ〒鎰綁鐎圭偟骞囨稉顓㈡？30%闁繑妲戦敍灞借嫙鐏忓棛鍤庨弶锟犫偓蹇旀鎼达箓妾锋担搴″煂30% */
            background: linear-gradient(to bottom,
                    rgba(255, 255, 255, 0.3) 0%,
                    rgba(255, 255, 255, 0.3) 35%,
                    transparent 35%,
                    transparent 65%,
                    rgba(255, 255, 255, 0.3) 65%,
                    rgba(255, 255, 255, 0.3) 100%);
            transform-origin: center;
            pointer-events: none;
        }

        .divider-1 {
            transform: translate(-50%, -50%) rotate(45deg);
        }

        .divider-2 {
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        /* 閼挎粌宕熼幐澶愭尦 - 缂傗晛鐨崚?0px */
        .menu-btn {
            position: absolute;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            -webkit-user-select: none;
            user-select: none;
            color: rgba(255, 255, 255, 0.95);
            font-size: 18px;
        }

        .menu-btn:active {
            transform: scale(0.85);
        }

        /* 閸ョ偓鐖ｉ弽宄扮础 */
        .icon-home,
        .icon-back,
        .icon-music,
        .icon-chat,
        .icon-star,
        .icon-heart {
            font-size: 20px;
            opacity: 0.95;
        }

        /* 閹稿鎸虫担宥囩枂 - 娑擃厼锟?*/
        .menu-center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 22px;
            z-index: 2;
        }

        .menu-center:active {
            transform: translate(-50%, -50%) scale(0.85);
        }

        /* 閹稿鎸虫担宥囩枂 - 瀹革缚锟?*/
        .menu-left {
            top: 50%;
            left: 5px;
            transform: translateY(-50%);
        }

        .menu-left:active {
            transform: translateY(-50%) scale(0.85);
        }

        /* 閹稿鎸虫担宥囩枂 - 閸欏厖锟?*/
        .menu-right {
            top: 50%;
            right: 5px;
            transform: translateY(-50%);
        }

        .menu-right:active {
            transform: translateY(-50%) scale(0.85);
        }

        /* 閹稿鎸虫担宥囩枂 - 娑撳﹥锟?*/
        .menu-top {
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
        }

        .menu-top:active {
            transform: translateX(-50%) scale(0.85);
        }

        /* 閹稿鎸虫担宥囩枂 - 娑撳锟?*/
        .menu-bottom {
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
        }

        .menu-bottom:active {
            transform: translateX(-50%) scale(0.85);
        }

        /* 闂呮劘妫岄幍鈧張澶婃祼鐎规俺绻戦崶鐐村瘻锟?*/
        .back-btn,
        .back-btn-container {
            display: none !important;
        }

        /* ================= 閸忋劌鐫嗙紓鏍帆瀵湱鐛ラ弽宄扮础 ================= */
        #modal-fullscreen-edit.modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 20000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        /* 绾喕锟?Flex 鐢啫鐪悽鐔告櫏 */
        #modal-fullscreen-edit[style*="display: flex"] {
            display: flex !important;
        }

        #modal-fullscreen-edit .modal-content {
            background: white;
            width: 90%;
            height: 80%;
            max-width: 600px;
            display: flex;
            flex-direction: column;
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            animation: popIn 0.3s ease-out;
        }

        #fullscreen-edit-textarea {
            flex: 1;
            width: 100%;
            resize: none;
            border: 1px solid #ffb7c5;
            border-radius: 12px;
            padding: 15px;
            font-size: 16px;
            line-height: 1.6;
            outline: none;
            box-sizing: border-box;
            background: #fffafa;
            color: #333;
            font-family: inherit;
        }

        #fullscreen-edit-textarea:focus {
            border-color: #fd5392;
            box-shadow: 0 0 0 3px rgba(253, 83, 146, 0.1);
        }


        /* ================= 棣冩瘍 AI闁挎瑨顕ゅ鍦崶閺嶅嘲锟?================= */
        .ai-error-dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            z-index: 100000;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            animation: fadeIn 0.3s ease;
        }

        .ai-error-dialog {
            background: #fff;
            border-radius: 20px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.3s ease;
        }

        .card-tpl-group-content.collapsed {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
        }

        /* ---- 閸楋紕澧栧Ο鈩冩緲閵嗗本澧嶇仦鐐插瀻缂佸嫨鈧秳绗呴幏?+ 閺傛澘缂撻崚鍡欑矋 ---- */
        .card-tpl-group-selector-row {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .card-tpl-group-dropdown {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--theme-card-border, #f0e6e6);
            border-radius: 10px;
            font-size: 13px;
            background: var(--theme-input-bg, #fff);
            color: var(--text-brown, #333);
            outline: none;
            transition: border-color 0.2s;
            cursor: pointer;
            appearance: auto;
        }

        .card-tpl-group-dropdown:focus {
            border-color: #ec4899;
            box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.12);
        }

        .card-tpl-new-group-row {
            display: flex;
            align-items: center;
            gap: 6px;
            animation: ctgNewGroupFadeIn 0.2s ease-out;
        }

        .card-tpl-new-group-row .api-input {
            flex: 1;
            min-width: 0;
        }

        .card-tpl-new-group-cancel {
            width: 32px;
            height: 32px;
            border: 1px solid var(--theme-card-border, #f0e6e6);
            border-radius: 8px;
            background: rgba(255, 80, 80, 0.08);
            color: #e74c3c;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.15s, border-color 0.15s;
        }

        .card-tpl-new-group-cancel:hover {
            background: rgba(255, 80, 80, 0.18);
            border-color: #e74c3c;
        }

        @keyframes ctgNewGroupFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ================= 棣冨剼 閸楋紕澧栧Ο鈩冩緲閸掑棛绮嶉幎妯哄綌 - 闁瀚ㄩ崳銊ヨ剨锟?================= */

        .error-header {
            padding: 25px 20px 15px;
            text-align: center;
            border-bottom: 2px dashed #fce4ec;
        }

        .error-icon {
            font-size: 60px;
            margin-bottom: 10px;
            animation: bounce 0.6s ease;
        }

        .error-title {
            font-size: 18px;
            font-weight: bold;
            color: #ff6b81;
            margin: 10px 0 5px;
        }

        .error-code {
            display: inline-block;
            background: #ff6b81;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            margin-top: 8px;
        }

        .error-solution {
            padding: 20px;
            color: #59474a;
            line-height: 1.8;
            font-size: 14px;
            background: #fffbfc;
        }

        .error-actions {
            display: flex;
            gap: 10px;
            padding: 15px 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .error-actions button {
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 100px;
        }

        .btn-retry {
            background: linear-gradient(90deg, #a29bfe 0%, #6c5ce7 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
        }

        .btn-retry:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
        }

        .btn-settings {
            background: linear-gradient(90deg, #fd5392 0%, #ff6b81 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(255, 107, 129, 0.3);
        }

        .btn-settings:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 129, 0.4);
        }

        .btn-close {
            background: #f1f5f9;
            color: #64748b;
        }

        .btn-close:hover {
            background: #e2e8f0;
        }

        .error-details {
            margin: 0 20px 20px;
            border-top: 1px solid #fce4ec;
            padding-top: 15px;
        }

        .error-details summary {
            cursor: pointer;
            color: #888;
            font-size: 13px;
            padding: 8px;
            border-radius: 8px;
            transition: background 0.2s;
            user-select: none;
        }

        .error-details summary:hover {
            background: #f9f9f9;
        }

        .error-tech-info {
            margin-top: 10px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
            font-size: 12px;
            color: #666;
            line-height: 1.8;
        }

        .error-tech-info div {
            margin-bottom: 8px;
        }

        .error-tech-info strong {
            color: #333;
            font-weight: 600;
        }

        .error-raw {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #ddd;
        }

        .error-raw pre {
            background: #fff;
            padding: 10px;
            border-radius: 6px;
            overflow-x: auto;
            font-size: 11px;
            color: #e74c3c;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 200px;
            overflow-y: auto;
        }

        /* 闁插秷鐦幓鎰仛Toast */
        .retry-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 16px;
            z-index: 100001;
            animation: fadeIn 0.3s ease;
        }

        /* 閸斻劎锟?*/
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        /* 缁夎濮╃粩顖炩偓鍌炲帳 */
        @media (max-width: 480px) {
            .ai-error-dialog {
                width: 95%;
                max-height: 85vh;
            }

            .error-icon {
                font-size: 50px;
            }

            .error-title {
                font-size: 16px;
            }

            .error-solution {
                font-size: 13px;
                padding: 15px;
            }

            .error-actions button {
                min-width: 80px;
                padding: 8px 15px;
                font-size: 13px;
            }
        }

        /* ================= 闁俺鐦藉鏃€鍦哄鍦崶閺嶅嘲锟?================= */
        .call-bubble-popup {
            position: absolute;
            bottom: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%);
            background: rgb(255 233 235 / 82%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 6px 8px;
            display: flex;
            gap: 4px;
            z-index: 1000;
            box-shadow: 0 4px 16px rgba(255, 150, 170, 0.25);
            border: 1px solid rgba(255, 200, 210, 0.6);
            animation: callBubbleFadeIn 0.2s ease-out;
            white-space: nowrap;
        }

        .call-bubble-popup::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 10px;
            height: 10px;
            background: rgb(255 233 235 / 82%);
            border-right: 1px solid rgba(255, 200, 210, 0.6);
            border-bottom: 1px solid rgba(255, 200, 210, 0.6);
        }

        .call-bubble-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .call-bubble-item:active {
            background: rgba(255, 180, 195, 0.3);
        }

        .call-bubble-item img.call-bubble-icon {
            width: 28px;
            height: 28px;
            object-fit: contain;
        }

        @keyframes callBubbleFadeIn {
            from {
                opacity: 0;
                transform: translateX(-50%) translateY(5px);
            }

            to {
                opacity: 1;
                transform: translateX(-50%) translateY(0);
            }
        }

        /* ================= 閺囨潙顦垮鏃€鍦哄鍦崶 & 閹峰绮︾亸蹇曞锟?================= */
        .more-bubble-popup {
            left: auto;
            right: -8px;
            transform: none;
        }

        .more-bubble-popup::after {
            left: auto;
            right: 14px;
            transform: rotate(45deg);
        }

        @keyframes moreBubbleFadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .more-bubble-popup {
            animation: moreBubbleFadeIn 0.2s ease-out;
        }

        .more-bubble-popup .call-bubble-item {
            position: relative;
        }

        .block-active-dot {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 8px;
            height: 8px;
            background: #ff4757;
            border-radius: 50%;
            border: 1.5px solid #fff;
            z-index: 10;
            pointer-events: none;
        }

        /* ================= 棣冨爱 缁惧じ绗呯痪锔跨窗濡€崇础 - 閸斻劋缍旈幓蹇撳晸濮樻梹锟?================= */
        .action-desc-bubble {
            text-align: left;
            padding: 8px 20px;
            margin: 10px auto;
            max-width: 85%;
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border-radius: 16px;
            font-size: 13px;
            color: #555;
            line-height: 1.6;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
            animation: actionFadeIn 0.4s ease-out;
        }

        /* 棣冨爱 缂囥倛浜扮痪澶哥瑓缁撅缚绱板Ο鈥崇础 - 鐢箑銇旈崓蹇曟畱閸斻劋缍旈幓蹇撳晸濮樻梹锟?*/
        .action-desc-bubble-group {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 8px 14px;
            margin: 10px auto;
            max-width: 85%;
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border-radius: 16px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
            animation: actionFadeIn 0.4s ease-out;
        }

        .action-desc-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .card-tpl-selector-close {
            display: block;
            margin: 12px auto 0;
            padding: 8px 24px;
            background: #f5f5f5;
            border: none;
            border-radius: 8px;
            color: #666;
            font-size: 14px;
            cursor: pointer;
        }

        /* ================= 棣冨剼 閸楋紕澧栧Ο鈩冩緲閸掑棛绮嶉幎妯哄綌 - 缁狅紕鎮婃い?================= */
        .card-tpl-group-header {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 8px 12px;
            margin-bottom: 4px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary, #ec4899) 12%, transparent), color-mix(in srgb, var(--theme-primary, #ec4899) 8%, transparent));
            border: 1px solid color-mix(in srgb, var(--theme-primary, #ec4899) 25%, transparent);
            border-radius: 10px;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }

        .card-tpl-group-header:hover {
            background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary, #ec4899) 20%, transparent), color-mix(in srgb, var(--theme-primary, #ec4899) 14%, transparent));
        }

        .card-tpl-group-arrow {
            font-size: 11px;
            color: var(--theme-primary, #ec4899);
            transition: transform 0.2s;
            flex-shrink: 0;
            width: 14px;
            text-align: center;
        }

        .card-tpl-group-name {
            flex: 1;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-brown);
        }

        .card-tpl-group-count {
            font-size: 11px;
            background: var(--theme-primary, #ec4899);
            color: var(--theme-btn-text, #fff);
            border-radius: 10px;
            padding: 1px 7px;
            font-weight: bold;
            flex-shrink: 0;
        }

        .card-tpl-group-content {
            padding-left: 8px;
            overflow: hidden;
            max-height: 2000px;
            transition: max-height 0.3s ease, opacity 0.25s ease;
            opacity: 1;
        }

        .card-tpl-group-content.collapsed {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
        }

        /* ================= 棣冨剼 閸楋紕澧栧Ο鈩冩緲閸掑棛绮嶉幎妯哄綌 - 闁瀚ㄩ崳銊ヨ剨锟?================= */
        /* 缁狅紕鎮婇崚鍡欑矋閹稿锟?- 鐠虹喖娈㈢紘搴″瀹搞儱娼戞稉濠氼暯閼硅绱濋崠鍝勫焼娴滃骸顕遍崗銉﹀瘻锟?*/
        .card-tpl-manage-btn {
            background: var(--theme-btn-gradient, linear-gradient(135deg, #a29bfe, #6c5ce7)) !important;
            color: var(--theme-btn-text, #fff) !important;
        }

        .card-tpl-sel-group-header {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 7px 10px;
            margin-bottom: 4px;
            background: linear-gradient(135deg, #fff0f5 0%, #fce4ec 100%);
            border: 1px solid #ffd6e7;
            border-radius: 10px;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }

        .card-tpl-sel-group-header:hover {
            background: linear-gradient(135deg, #ffe4f0 0%, #f8bbd0 100%);
        }

        .card-tpl-sel-group-arrow {
            font-size: 10px;
            color: #ec4899;
            flex-shrink: 0;
            width: 12px;
            text-align: center;
        }

        .card-tpl-sel-group-name {
            flex: 1;
            font-size: 13px;
            font-weight: 600;
            color: #c2185b;
        }

        .card-tpl-sel-group-count {
            font-size: 11px;
            background: #ec4899;
            color: #fff;
            border-radius: 10px;
            padding: 1px 6px;
            font-weight: bold;
        }

        .card-tpl-sel-group-content {
            padding-left: 4px;
            overflow: hidden;
            max-height: 2000px;
            transition: max-height 0.3s ease, opacity 0.25s ease;
            opacity: 1;
        }

        .card-tpl-sel-group-content.collapsed {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
        }

        .action-desc-bubble-group .action-desc-text {
            flex: 1;
            min-width: 0;
            font-size: 13px;
            color: #555;
            line-height: 1.6;
        }

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

        /* ================= 棣冨剼 閸楋紕澧栧Ο鈩冩緲閸掑棛绮嶇粻锛勬倞瀵湱锟?================= */
        .ctg-mgr-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.48);
            z-index: 10200;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            animation: ctgMgrFadeIn 0.2s ease;
            overflow: hidden; /* 闂冨弶顒涢柆顔惧兊鐏炲倹婀伴煬顐㈠讲濠婃艾锟?*/
        }

        @keyframes ctgMgrFadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        .ctg-mgr-modal {
            width: 100%;
            max-width: 480px;
            max-height: 88vh;
            background: var(--theme-modal-bg, #fff);
            border-radius: 20px 20px 0 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 -6px 30px rgba(108,92,231,0.18);
            animation: ctgMgrSlideUp 0.25s cubic-bezier(0.34,1.56,0.64,1);
        }

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

        .ctg-mgr-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 18px 10px;
            border-bottom: 1px solid var(--theme-card-border, #f0e6e6);
            flex-shrink: 0;
        }

        .ctg-mgr-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-brown, #6c5ce7);
        }

        .ctg-mgr-close {
            font-size: 22px;
            color: #bbb;
            cursor: pointer;
            line-height: 1;
            padding: 2px 6px;
            border-radius: 6px;
            transition: background 0.15s;
        }

        .ctg-mgr-close:hover { background: #f5f5f5; color: #888; }

        /* 閺傛澘缂撻崚鍡欑矋鏉堟挸鍙嗙悰?*/
        .ctg-mgr-new-group-row {
            display: flex;
            gap: 8px;
            padding: 10px 14px;
            border-bottom: 1px solid var(--theme-card-border, #f0e6e6);
            flex-shrink: 0;
        }

        .ctg-mgr-new-group-inp {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--theme-card-border, #f0e6e6);
            border-radius: 10px;
            font-size: 13px;
            background: var(--theme-input-bg, #fff);
            color: var(--text-brown, #333);
            outline: none;
            transition: border-color 0.2s;
        }

        .ctg-mgr-new-group-inp:focus {
            border-color: #a29bfe;
        }

        .ctg-mgr-new-group-btn {
            padding: 8px 14px;
            background: linear-gradient(135deg, #a29bfe, #6c5ce7);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity 0.15s;
        }

        .ctg-mgr-new-group-btn:active { opacity: 0.8; }

        /* 閸掑棛锟?濡剝婢橀崚妤勶拷?*/
        .ctg-mgr-body {
            flex: 1;
            overflow-y: auto;
            padding: 10px 14px;
            overscroll-behavior: contain; /* 闂冨弶顒涘姘З缁屽潡鈧繐鍩屾惔鏇炵湴妞ょ敻锟?*/
            -webkit-overflow-scrolling: touch; /* iOS 閹垱鈧勭泊锟?*/
            touch-action: pan-y; /* 绾喕绻氱憴锔芥嚋濠婃艾濮╅崣顏冪稊閻劋绨銈呭帗锟?*/
        }

        .ctg-mgr-group {
            margin-bottom: 12px;
        }

        .ctg-mgr-group-header {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 9px 12px;
            background: linear-gradient(135deg, rgba(162,155,254,0.13) 0%, rgba(108,92,231,0.08) 100%);
            border: 1px solid rgba(162,155,254,0.3);
            border-radius: 12px;
            margin-bottom: 6px;
        }

        .ctg-mgr-group-icon { font-size: 15px; }

        .ctg-mgr-group-name {
            flex: 1;
            font-size: 14px;
            font-weight: 700;
            color: var(--text-brown, #333);
        }

        .ctg-mgr-group-count {
            font-size: 11px;
            background: #6c5ce7;
            color: #fff;
            border-radius: 10px;
            padding: 1px 7px;
            font-weight: bold;
            flex-shrink: 0;
        }

        .ctg-mgr-group-actions {
            display: flex;
            gap: 4px;
        }

        .ctg-mgr-btn {
            border: none;
            background: transparent;
            cursor: pointer;
            font-size: 15px;
            padding: 3px 5px;
            border-radius: 7px;
            transition: background 0.15s;
            line-height: 1;
        }

        .ctg-mgr-btn:hover { background: rgba(0,0,0,0.07); }
        .ctg-mgr-btn-del:hover { background: rgba(255,80,80,0.12); }

        /* 濡剝婢橀崟楣冣偓澶婂灙锟?*/
        .ctg-mgr-tpl-list {
            padding-left: 8px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .ctg-mgr-tpl-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background: var(--theme-input-bg, #fff);
            border: 1.5px solid var(--theme-card-border, #f0e6e6);
            border-radius: 10px;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
            user-select: none;
        }

        .ctg-mgr-tpl-item:hover {
            border-color: #a29bfe;
            background: rgba(162,155,254,0.06);
        }

        .ctg-mgr-tpl-item.selected {
            border-color: #6c5ce7;
            background: rgba(108,92,231,0.07);
        }

        .ctg-mgr-checkbox {
            width: 16px;
            height: 16px;
            accent-color: #6c5ce7;
            flex-shrink: 0;
            cursor: pointer;
        }

        .ctg-mgr-tpl-name {
            font-size: 13px;
            color: var(--text-brown, #444);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 鎼存洟锟?Action Bar */
        .ctg-mgr-action-bar {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 10px 14px;
            border-top: 1px solid var(--theme-card-border, #f0e6e6);
            background: var(--theme-modal-bg, #fff);
            flex-shrink: 0;
        }

        .ctg-mgr-action-top-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .ctg-mgr-move-label {
            font-size: 12px;
            color: var(--theme-sub-text);
            white-space: nowrap;
        }

        .ctg-mgr-sel-count {
            font-size: 12px;
            font-weight: 700;
            color: #6c5ce7;
            min-width: 56px;
        }

        .ctg-mgr-sel {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid var(--theme-card-border, #f0e6e6);
            border-radius: 8px;
            font-size: 13px;
            background: var(--theme-input-bg, #fff);
            color: var(--text-brown, #333);
            min-width: 0;
        }

        .ctg-mgr-move-btn {
            padding: 7px 18px;
            background: linear-gradient(135deg, #a29bfe, #6c5ce7);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity 0.15s;
        }

        .ctg-mgr-move-btn:active { opacity: 0.8; }

        /* 閸愬懓浠堥弬鏉跨紦閸掑棛绮嶆潏鎾冲弳锟?*/
        .ctg-mgr-inline-new-group {
            display: flex;
            align-items: center;
            gap: 6px;
            animation: ctgNewGroupFadeIn 0.18s ease-out;
        }

        .ctg-mgr-inline-new-group .ctg-mgr-new-group-inp {
            flex: 1;
            min-width: 0;
        }

        .ctg-mgr-cancel-new-group-btn {
            width: 30px;
            height: 30px;
            border: 1px solid var(--theme-card-border, #f0e6e6);
            border-radius: 8px;
            background: rgba(255,80,80,0.08);
            color: #e74c3c;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.15s;
        }

        .ctg-mgr-cancel-new-group-btn:hover {
            background: rgba(255,80,80,0.18);
        }

        /* 閸掑棛绮嶆径鎾劥閸忋劑锟?checkbox */
        .ctg-mgr-group-selall {
            display: flex;
            align-items: center;
            cursor: pointer;
            flex-shrink: 0;
            margin-right: 2px;
        }

        .ctg-mgr-selall-cb {
            width: 15px;
            height: 15px;
            accent-color: #6c5ce7;
            cursor: pointer;
        }

        /* ================= 棣冩寗 娴滄彃鐦戞禍鎺戝З閹烘帟顢戝婊冭剨锟?================= */

        .intimacy-ranking-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: intimacyFadeIn 0.2s ease;
        }

        @keyframes intimacyFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .intimacy-ranking-modal {
            width: 88%;
            max-width: 360px;
            background: linear-gradient(135deg, #fff5f7 0%, #fff0f3 50%, #fce4ec 100%);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 12px 40px rgba(255, 100, 130, 0.25);
            animation: intimacySlideUp 0.25s ease;
        }

        @keyframes intimacySlideUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .intimacy-ranking-header {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 18px 10px;
            position: relative;
        }

        .intimacy-ranking-title {
            font-size: 17px;
            font-weight: 700;
            color: #d63384;
        }

        .intimacy-ranking-close {
            position: absolute;
            right: 18px;
            top: 14px;
        }

        .intimacy-ranking-close {
            font-size: 24px;
            color: #ccc;
            cursor: pointer;
            line-height: 1;
        }

        .intimacy-ranking-tabs {
            display: flex;
            gap: 0;
            margin: 0 18px 10px;
            background: rgba(255, 180, 195, 0.2);
            border-radius: 10px;
            overflow: hidden;
        }

        .intimacy-tab {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            font-size: 13px;
            font-weight: 600;
            color: #b0768a;
            cursor: pointer;
            transition: all 0.2s;
            border-radius: 10px;
        }

        .intimacy-tab.active {
            background: linear-gradient(135deg, #ff6b9d, #ff4081);
            color: #fff;
            box-shadow: 0 2px 8px rgba(255, 64, 129, 0.3);
        }

        .intimacy-ranking-body {
            padding: 0 18px 12px;
            min-height: 120px;
            max-height: 300px;
            overflow-y: auto;
        }

        .intimacy-rank-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.75);
            border-radius: 14px;
            box-shadow: 0 2px 8px rgba(255, 150, 170, 0.1);
            position: relative;
        }

        .intimacy-rank-badge {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .intimacy-rank-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #ffb6c1;
            flex-shrink: 0;
        }

        .intimacy-rank-info {
            flex: 1;
            min-width: 0;
        }

        .intimacy-rank-name {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .intimacy-rank-count {
            font-size: 12px;
            color: #e91e63;
            margin-top: 2px;
        }

        .intimacy-rank-empty {
            text-align: center;
            color: #cba0ad;
            font-size: 13px;
            padding: 30px 0;
        }

        .intimacy-ranking-footer {
            padding: 10px 18px 16px;
            text-align: center;
        }

        .intimacy-send-btn {
            background: linear-gradient(135deg, #ff6b9d, #ff4081);
            color: #fff;
            border: none;
            border-radius: 22px;
            padding: 10px 36px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(255, 64, 129, 0.3);
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .intimacy-send-btn:active {
            transform: scale(0.96);
            box-shadow: 0 2px 8px rgba(255, 64, 129, 0.2);
        }

        /* ================= 缂囥倛浜版禍鎻掔槕娴滄帒濮╅柅澶嬪閹存劕鎲冲鍦崶 ================= */
        .intimacy-member-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 10001;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .intimacy-member-modal {
            width: 80%;
            max-width: 320px;
            background: #fff5f7;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 8px 30px rgba(255, 100, 130, 0.2);
            animation: intimacySlideUp 0.2s ease;
        }

        .intimacy-member-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px 8px;
            font-size: 15px;
            font-weight: 600;
            color: #d63384;
        }

        .intimacy-member-close {
            font-size: 22px;
            color: #ccc;
            cursor: pointer;
        }

        .intimacy-member-list {
            padding: 4px 12px 14px;
            max-height: 300px;
            overflow-y: auto;
        }

        .intimacy-member-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            margin-bottom: 6px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.15s;
        }

        .intimacy-member-item:active {
            background: rgba(255, 180, 195, 0.3);
        }

        .intimacy-member-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            border: 1.5px solid #ffb6c1;
        }

        .intimacy-member-name {
            font-size: 14px;
            color: #333;
            font-weight: 500;
        }

        /* ================= 娴滄彃鐦戞禍鎺戝З閹烘帟顢戦崡锛勫閿涘牐浜版径鈺佸敶锟?================= */
        .intimacy-card {
            background: linear-gradient(135deg, #fff5f7, #fce4ec);
            border-radius: 14px;
            padding: 12px 14px;
            margin: 4px 0;
            box-shadow: 0 2px 10px rgba(255, 150, 170, 0.15);
            border: 1px solid rgba(255, 200, 210, 0.5);
            max-width: 260px;
        }

        .intimacy-card-title {
            font-size: 13px;
            font-weight: 700;
            color: #d63384;
            margin-bottom: 8px;
            text-align: center;
        }

        .intimacy-card-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
            font-size: 12px;
            color: #555;
        }

        .intimacy-card-row img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* ================= 棣冨剼 閸楋紕澧栧Ο鈩冩緲缁狅紕鎮婇弽宄扮础 ================= */
        .card-tpl-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            margin-bottom: 8px;
            background: var(--theme-input-bg);
            border: 1px solid var(--theme-card-border);
            border-radius: 10px;
            transition: all 0.2s;
        }

        .card-tpl-item:hover {
            border-color: var(--theme-primary);
            box-shadow: 0 2px 8px rgba(244, 114, 182, 0.2);
        }

        .card-tpl-item-info {
            flex: 1;
            overflow: hidden;
        }

        .card-tpl-item-name {
            font-weight: bold;
            color: var(--text-brown);
            font-size: 14px;
        }

        .card-tpl-item-preview {
            font-size: 12px;
            color: var(--theme-sub-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 2px;
        }

        .card-tpl-item-btns {
            display: flex;
            gap: 6px;
            margin-left: 8px;
        }

        .card-tpl-item-btns button {
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
        }

        /* ================= 棣冨剼 閸楋紕澧栧Ο鈩冩緲闁瀚ㄩ崳銊ヨ剨锟?================= */
        .card-tpl-selector-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10002;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card-tpl-selector-box {
            background: #fff;
            border-radius: 16px;
            width: 85%;
            max-width: 360px;
            max-height: 70vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        }

        .card-tpl-selector-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--text-brown);
            margin-bottom: 12px;
            text-align: center;
        }

        .card-tpl-selector-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            margin-bottom: 8px;
            background: #FFF5F7;
            border: 2px solid #FFDEE9;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .card-tpl-selector-item:hover {
            border-color: #f472b6;
        }

        .card-tpl-selector-item.active {
            border-color: #ec4899;
            background: #fff0f5;
            box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2);
        }

        .card-tpl-selector-item .tpl-name {
            flex: 1;
            font-size: 14px;
            color: var(--text-brown);
        }

        .card-tpl-selector-item .tpl-check {
            font-size: 18px;
            color: #ec4899;
        }

        .card-tpl-selector-empty {
            text-align: center;
            color: #999;
            font-size: 13px;
            padding: 20px 0;
        }

        .card-tpl-selector-close {
            display: block;
            margin: 12px auto 0;
            padding: 8px 24px;
            background: #f5f5f5;
            border: none;
            border-radius: 8px;
            color: #666;
            font-size: 14px;
            cursor: pointer;
        }


        /* ================= 棣冿拷?缁俱垹瀵橀梿銊у閺佸牊鐗卞?================= */
        @keyframes hongbaoFall {
            0% {
                transform: translateY(0) translateX(0) rotate(0deg);
                opacity: 1;
            }

            20% {
                transform: translateY(20vh) translateX(var(--sway, 0px)) rotate(10deg);
            }

            50% {
                transform: translateY(50vh) translateX(calc(var(--sway, 0px) * -0.5)) rotate(-5deg);
            }

            80% {
                transform: translateY(80vh) translateX(var(--sway, 0px)) rotate(8deg);
                opacity: 1;
            }

            100% {
                transform: translateY(110vh) translateX(0) rotate(0deg);
                opacity: 0;
            }
        }

        @keyframes hongbaoAmountFloat {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.5);
            }

            30% {
                opacity: 1;
                transform: translate(-50%, -80%) scale(1.2);
            }

            100% {
                opacity: 0;
                transform: translate(-50%, -150%) scale(1);
            }
        }

        .hongbao-packet {
            -webkit-tap-highlight-color: transparent;
        }

        .hongbao-packet:active {
            transform: scale(0.9) !important;
        }


        /* ================= 棣冩寗 鐟欐帟澹婃禍鎺戝З鐟欙妇顫悧瑙勬櫏 ================= */
        .touch-effect-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: 15000;
            pointer-events: none;
            overflow: hidden;
        }

        .touch-effect-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            font-size: 20px;
            font-weight: 900;
            max-width: 85vw;
            text-align: center;
            word-break: break-word;
            white-space: normal;
            animation: touchTextPop 2.8s ease-out forwards;
            z-index: 15002;
            color: #fff;
        }

        .touch-effect-text.positive {
            -webkit-text-stroke: 3px #ff6b9d;
            paint-order: stroke fill;
        }

        .touch-effect-text.negative {
            -webkit-text-stroke: 3px #9b7aff;
            paint-order: stroke fill;
        }

        @keyframes touchTextPop {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            12% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
            20% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
        }

        /* 濮濓綁娼伴敍娆砈S閻栧崬绺炬禒搴＄俺闁劑顥濇稉濠傚箵 */
        .touch-heart {
            position: absolute;
            bottom: -30px;
            pointer-events: none;
            will-change: transform;
            width: var(--heart-size, 14px);
            height: var(--heart-size, 14px);
            background: var(--heart-color, #ff6b9d);
            transform: rotate(-45deg) scale(0.5);
            opacity: 0;
            animation: touchHeartFloat var(--duration, 3.5s) ease-out forwards;
            animation-delay: var(--delay, 0s);
            z-index: 15001;
        }

        .touch-heart::before,
        .touch-heart::after {
            content: '';
            position: absolute;
            width: var(--heart-size, 14px);
            height: var(--heart-size, 14px);
            background: inherit;
            border-radius: 50%;
        }

        .touch-heart::before {
            top: calc(var(--heart-size, 14px) / -2);
            left: 0;
        }

        .touch-heart::after {
            top: 0;
            left: calc(var(--heart-size, 14px) / 2);
        }

        @keyframes touchHeartFloat {
            0% {
                transform: translateY(0) translateX(0) rotate(-45deg) scale(0.3);
                opacity: 0;
            }
            8% {
                opacity: 0.95;
            }
            30% {
                transform: translateY(-30vh) translateX(var(--sway1, 15px)) rotate(-45deg) scale(var(--peak-scale, 0.9));
            }
            60% {
                transform: translateY(-60vh) translateX(var(--sway2, -10px)) rotate(-45deg) scale(var(--peak-scale, 0.9));
                opacity: 0.8;
            }
            85% {
                opacity: 0.4;
            }
            100% {
                transform: translateY(-110vh) translateX(var(--sway1, 15px)) rotate(-45deg) scale(1);
                opacity: 0;
            }
        }

        /* 鐠愮喖娼伴敍姘跨厜銏♀偓鎺撶毜缁楋箑褰挎禒搴濊厬韫囧啫鑴婄亸?*/
        .touch-anger {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 36px;
            opacity: 0;
            animation: touchAngerBurst 1.2s ease-out forwards;
            animation-delay: var(--delay, 0s);
            z-index: 15001;
        }

        @keyframes touchAngerBurst {
            0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
            20% { transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1.2); opacity: 1; }
            50% { transform: translate(calc(-50% + var(--tx2, 0px)), calc(-50% + var(--ty2, 0px))) scale(1); opacity: 0.8; }
            100% { transform: translate(calc(-50% + var(--tx3, 0px)), calc(-50% + var(--ty3, 0px))) scale(0.4); opacity: 0; }
        }

        /* 鐠愮喖娼伴敍姘潌楠炴洟娓块崝?*/
        @keyframes touchShake {
            0%, 100% { transform: translateX(0); }
            15% { transform: translateX(-6px) rotate(-0.5deg); }
            30% { transform: translateX(5px) rotate(0.5deg); }
            45% { transform: translateX(-4px); }
            60% { transform: translateX(3px); }
            75% { transform: translateX(-2px); }
        }

        .touch-shake {
            animation: touchShake 0.5s ease-in-out;
        }


        /* ================= 棣冨綌 妫ｆ牠銆夐崣灞界潌濮樻潙閽╁鎴濆З ================= */
        .home-swiper {
            display: flex;
            width: 200vw;
            height: 100vh;
            overflow: hidden;
            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform;
        }

        .home-screen {
            width: 100vw;
            height: 100vh;
            flex-shrink: 0;
            overflow: hidden;
        }

        /* 妞ょ敻娼伴幐鍥┿仛閸ｃ劌鐨崷鍡欏仯 */
        .home-page-dots {
            position: fixed;
            bottom: 18px;
            left: 50%;
            transform: translateX(-50%);
            display: none !important;
            /* 濮樻瓕绻欓梾鎰閿涘矁顩惄鏈朣閹貉冨煑 */
            gap: 8px;
            z-index: 50;
            padding: 6px 12px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .home-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .home-dot.active {
            background: #ff6b81;
            width: 20px;
            border-radius: 4px;
        }

        /* 缁楊兛绨╃仦蹇旂垼锟?*/
        .home-screen2-header {
            width: 100%;
            padding-top: calc(60px + env(safe-area-inset-top));
            padding-bottom: 10px;
            text-align: center;
        }

        .screen2-title {
            font-size: 22px;
            font-weight: bold;
            color: #59474a;
        }

        .home-app-grid-screen2 {
            margin-top: 20px;
            padding: 0 20px;
        }

        /* ================= 棣冿拷?閻溾晛鍙跨粻閬嶃€夐棃銏＄壉锟?================= */
        .toybox-container {
            padding: 20px;
            padding-top: calc(60px + env(safe-area-inset-top));
            max-width: 600px;
            margin: 0 auto;
            min-height: 100vh;
        }

        .toybox-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .toybox-title {
            color: var(--theme-title-color);
            font-size: 22px;
            margin: 0 0 6px 0;
        }

        .toybox-subtitle {
            color: var(--theme-sub-text);
            font-size: 13px;
            margin: 0;
        }

        .toybox-actions {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .toybox-import-btn {
            background: var(--theme-btn-gradient);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 10px 28px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 12px var(--theme-btn-shadow);
            transition: transform 0.2s;
        }

        .toybox-import-btn:active {
            transform: scale(0.95);
        }

        /* 鎼存梻鏁ら崚妤勶拷?*/
        .toybox-app-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .toybox-app-item {
            background: var(--theme-card-bg);
            border: 2px solid var(--theme-card-border);
            border-radius: 16px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
            box-shadow: 0 2px 8px rgba(184, 134, 11, 0.1);
        }

        .toybox-app-item:active {
            transform: scale(0.98);
            box-shadow: 0 1px 4px rgba(184, 134, 11, 0.15);
        }

        .toybox-app-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            flex-shrink: 0;
            border: 1.5px solid var(--theme-card-border);
        }

        .toybox-app-info {
            flex: 1;
            min-width: 0;
        }

        .toybox-app-name {
            font-size: 16px;
            font-weight: bold;
            color: var(--theme-title-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .toybox-app-desc {
            font-size: 12px;
            color: var(--theme-sub-text);
            margin-top: 3px;
        }

        .toybox-app-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }

        .toybox-app-del {
            border: none;
            background: none;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s;
        }

        .toybox-app-del:active {
            transform: scale(0.9);
        }

        /* 缁岃櫣濮搁幀?*/
        .toybox-empty {
            text-align: center;
            padding: 60px 20px;
        }

        .toybox-empty-icon {
            font-size: 60px;
            margin-bottom: 15px;
        }

        .toybox-empty-text {
            font-size: 18px;
            color: var(--theme-sub-text);
            font-weight: bold;
            margin-bottom: 8px;
        }

        .toybox-empty-hint {
            font-size: 13px;
            color: var(--theme-sub-text);
        }

        /* ================= 棣冿拷?閻溾晛鍙跨粻鍗炲弿鐏炲繗绻嶇悰灞芥珤 ================= */
        .toybox-runner-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 15000;
            background: #000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* iOS鐎瑰鍙忛崠鍝勭厵妞ゅ爼鍎撮崡鐘辩秴锟?*/
        .toybox-safe-area-top {
            display: none;
            width: 100%;
            flex-shrink: 0;
            height: var(--safe-area-inset-top);
            background: #fff;
        }

        /* 娴犲懎婀猧OS鐠佹儳顦稉濠冩▔缁€鍝勭暔閸忋劌灏崡鐘辩秴 */
        @supports (-webkit-touch-callout: none) {
            .toybox-safe-area-top {
                display: block;
            }
        }

        .toybox-runner-frame {
            width: 100%;
            height: 100%;
            flex: 1;
            border: none;
            background: transparent;
            max-width: none;
            margin: 0;
        }

        /* 閸忔娊妫撮幐澶愭尦瀹歌尙些闂勩倧绱濋悽杈ㄥ亾濞搭喖鐨悶鍐у敩锟?*/
        .toybox-runner-close-bottom {
            display: none;
        }

        /* 閻溾晛鍙跨粻杈ㄥⅵ瀵偓閺冭埖鍋撳ù顔肩毈閻炲啯褰侀崡鍥у煂閺堚偓妞よ泛锟?*/
        .floating-ball.toybox-active {
            z-index: 15001;
        }

        /* 閻溾晛鍙跨粻杈ㄥⅵ瀵偓閺冭埖褰侀崡鍥ㄦ殻娑擃亝鍋撳ù顔碱嚤閼割亜顔愰崳銊ф畱鐏炲倸褰旀稉濠佺瑓锟?*/
        .floating-nav.toybox-active {
            z-index: 15001;
        }

        .floating-ball.toybox-active ~ .floating-menu.active {
            z-index: 15002;
        }

        .floating-ball.toybox-active ~ .floating-overlay.active {
            z-index: 15001;
        }

        /* ===== 棣冿拷?閻溾晛鍙跨粻杈仦蹇庣喘锟?===== */
        @media screen and (orientation: landscape) {
            .toybox-runner-overlay {
                flex-direction: row;
                background: #000;
            }

            /* 濡亜鐫嗛弮鍫曟閽樺繘銆婇柈銊ョ暔閸忋劌灏崡鐘辩秴閿涘牆鍨ù宄版躬娓氀囨桨锟?*/
            .toybox-safe-area-top {
                display: none !important;
            }

            .toybox-runner-frame {
                max-width: 100%;
                width: 100%;
                height: 100%;
                flex: 1;
                margin: 0;
            }
        }

        /* ================= 缂佹ê娴橀悽缁樻緲閺嶅嘲锟?================= */
        .drawing-board-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: drawBoardFadeIn 0.25s ease-out;
        }

        @keyframes drawBoardFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .drawing-board-container {
            width: 100%;
            height: 100%;
            background: #fff;
            display: flex;
            flex-direction: column;
            padding-top: var(--safe-area-inset-top);
            padding-bottom: var(--safe-area-inset-bottom);
        }

        .drawing-board-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
            background: #fff0f5;
            border-bottom: 1px solid #ffdee9;
            flex-shrink: 0;
        }

        .drawing-title {
            font-size: 16px;
            font-weight: 600;
            color: #d4727a;
        }

        .drawing-close-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #999;
            cursor: pointer;
            border-radius: 50%;
            transition: background 0.15s;
        }

        .drawing-close-btn:active {
            background: rgba(0, 0, 0, 0.08);
        }

        .drawing-send-btn {
            padding: 6px 18px;
            background: linear-gradient(135deg, #ff9a9e, #fecfef);
            color: #fff;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.15s;
        }

        .drawing-send-btn:active {
            opacity: 0.7;
        }

        /* 閻㈣绔烽崠鍝勭厵 */
        .drawing-canvas-wrap {
            flex: 1;
            position: relative;
            overflow: hidden;
            background: #fff;
            touch-action: none;
        }

        .drawing-canvas-wrap canvas {
            display: block;
            width: 100%;
            height: 100%;
            cursor: crosshair;
        }

        /* 鎼存洟鍎村銉ュ徔锟?*/
        .drawing-toolbar {
            flex-shrink: 0;
            padding: 10px 12px;
            padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
            background: #fff;
            border-top: 1px solid #ffdee9;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .drawing-colors {
            display: flex;
            gap: 8px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .drawing-color-btn {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
            border: 2px solid transparent;
            flex-shrink: 0;
        }

        .drawing-color-btn.active {
            transform: scale(1.2);
            box-shadow: 0 0 0 2px #ff9a9e;
            border-color: #fff;
        }

        .drawing-sizes {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }

        .drawing-size-btn {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #f8f0f2;
            transition: background 0.15s, box-shadow 0.15s;
        }

        .drawing-size-btn.active {
            background: #ffdee9;
            box-shadow: 0 0 0 2px #ff9a9e;
        }

        .drawing-size-btn span {
            display: block;
            border-radius: 50%;
            background: #333;
        }

        .drawing-tools {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .drawing-tool-btn {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #f8f0f2;
            transition: background 0.15s;
        }

        .drawing-tool-btn:active {
            background: #ffdee9;
        }

        .drawing-tool-btn.active {
            background: #ffdee9;
            box-shadow: 0 0 0 2px #ff9a9e;
        }


        /* ==================== 棣冨腹 缂囧骸瀵插銉ユ綉 - 閼奉亜鐣炬稊澶岀法閸栨牜閮寸紒?==================== */




        #theme-editor-layer .api-container {
            padding-bottom: 100px;
        }

        /* Tab 閸掑洦锟?*/
        .te-tabs {
            display: flex;
            background: var(--theme-card-bg);
            border-radius: 25px;
            padding: 4px;
            margin: 15px 15px 0;
            box-shadow: 0 2px 10px rgba(255, 183, 197, 0.2);
            border: 1px solid var(--theme-card-border);
        }

        .te-tab {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            border-radius: 22px;
            font-size: 14px;
            font-weight: bold;
            color: var(--theme-sub-text);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .te-tab.active {
            background: var(--theme-btn-gradient);
            color: #fff;
            box-shadow: 0 3px 10px rgba(255, 154, 158, 0.4);
        }

        /* Tab 閸愬懎顔愰崠鍝勭厵 */
        .te-panels {
            padding: 15px;
        }

        .te-panel {
            display: none;
        }

        .te-panel.active {
            display: block;
        }

        /* 閹舵ê褰旈崡锛勫 */
        .te-card {
            background: var(--theme-card-bg);
            border-radius: 16px;
            margin-bottom: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            border: 1px solid var(--theme-card-border);
        }

        .te-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 16px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.2s;
        }

        .te-card-header:active {
            background: var(--theme-input-bg);
        }

        .te-card-title {
            font-size: 14px;
            font-weight: bold;
            color: var(--theme-title-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .te-card-arrow {
            font-size: 14px;
            color: var(--theme-sub-text);
            transition: transform 0.3s;
        }

        .te-card.open .te-card-arrow {
            transform: rotate(90deg);
        }

        .te-card-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }

        .te-card.open .te-card-body {
            max-height: 2000px;
        }

        .te-card-content {
            padding: 0 16px 16px;
        }

        /* 缂傛牞绶い?*/
        .te-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px 0;
            border-bottom: 1px dashed var(--theme-card-border);
        }

        .te-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .te-item-label {
            font-size: 13px;
            font-weight: bold;
            color: var(--theme-sub-text);
        }

        .te-item-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* 妫版粏澹婇柅澶嬪锟?*/
        .te-color-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .te-color-input {
            width: 40px;
            height: 40px;
            border: 2px solid var(--theme-card-border);
            border-radius: 10px;
            cursor: pointer;
            padding: 2px;
            background: var(--theme-card-bg);
            -webkit-appearance: none;
            appearance: none;
        }

        .te-color-input::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        .te-color-input::-webkit-color-swatch {
            border: none;
            border-radius: 6px;
        }

        .te-color-hex {
            font-size: 12px;
            color: var(--theme-sub-text);
            font-family: monospace;
            background: var(--theme-input-bg);
            padding: 4px 8px;
            border-radius: 8px;
            width: 75px;
            text-align: center;
            border: 1px solid var(--theme-card-border);
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }

        .te-color-hex:focus {
            border-color: var(--theme-primary);
        }

        /* 閸ュ墽澧朥RL鏉堟挸锟?*/
        .te-img-input {
            flex: 1;
            min-width: 0;
            padding: 8px 12px;
            border: 2px solid var(--theme-card-border);
            border-radius: 12px;
            font-size: 12px;
            color: var(--theme-title-color);
            background: var(--theme-input-bg);
            outline: none;
        }

        .te-img-input:focus {
            border-color: var(--theme-primary);
        }

        .te-img-input::placeholder {
            color: var(--theme-sub-text);
        }

        /* 鐏忓搫顕潏鎾冲弳 */
        .te-size-group {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .te-size-input {
            width: 60px;
            padding: 6px 8px;
            border: 2px solid var(--theme-card-border);
            border-radius: 10px;
            font-size: 12px;
            text-align: center;
            color: var(--theme-title-color);
            background: var(--theme-input-bg);
            outline: none;
        }

        .te-size-input:focus {
            border-color: var(--theme-primary);
        }

        .te-size-label {
            font-size: 11px;
            color: var(--theme-sub-text);
        }

        /* 闁繑妲戞惔锔界拨锟?*/
        .te-opacity-group {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
        }

        .te-opacity-slider {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 3px;
            background: linear-gradient(to right, #FFDEE9, #FFB7C5);
            outline: none;
        }

        .te-opacity-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #FF9A9E;
            border: 3px solid #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            cursor: pointer;
        }

        .te-opacity-val {
            font-size: 12px;
            color: var(--theme-sub-text);
            min-width: 36px;
            text-align: center;
            font-family: monospace;
        }

        /* 閹诲繗绔熷鈧崗?*/
        .te-switch-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .te-switch {
            position: relative;
            width: 44px;
            height: 24px;
            background: #ddd;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.3s;
            -webkit-tap-highlight-color: transparent;
        }

        .te-switch.on {
            background: linear-gradient(135deg, #FFB7C5, #FF9A9E);
        }

        .te-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.3s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .te-switch.on::after {
            transform: translateX(20px);
        }

        /* 閸ュ墽澧栨０鍕潔鐏忓繐锟?*/
        .te-img-preview {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            object-fit: contain;
            border: 2px solid var(--theme-card-border);
            background: var(--theme-input-bg);
            flex-shrink: 0;
        }

        /* App閸ョ偓鐖ｉ崚妤勶拷?*/
        .te-icon-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .te-icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 10px 4px;
            background: var(--theme-input-bg);
            border-radius: 12px;
            border: 1px solid var(--theme-card-border);
            cursor: pointer;
            transition: all 0.2s;
            -webkit-tap-highlight-color: transparent;
        }

        .te-icon-item:active {
            transform: scale(0.95);
            background: var(--theme-card-bg);
        }

        .te-icon-item img {
            width: 36px;
            height: 36px;
            object-fit: contain;
            border-radius: 8px;
        }

        .te-icon-item span {
            font-size: 10px;
            color: var(--theme-sub-text);
            text-align: center;
        }

        /* 鎼存洟鍎撮幙宥勭稊锟?*/
        .te-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 12px 20px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
            background: transparent;
            display: flex;
            gap: 12px;
            z-index: 1000;
        }

        .te-btn-save {
            flex: 2;
            padding: 12px 0;
            border: none;
            border-radius: 25px;
            font-size: 15px;
            font-weight: bold;
            color: var(--theme-btn-text, #fff);
            background: var(--theme-btn-gradient);
            box-shadow: none;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .te-btn-save:active {
            transform: scale(0.96);
        }

        .te-btn-reset {
            flex: 1;
            padding: 12px 0;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: bold;
            color: var(--theme-btn-reset-text, #fff);
            background: var(--theme-primary);
            cursor: pointer;
            transition: transform 0.2s;
        }

        .te-btn-reset:active {
            transform: scale(0.96);
        }

        /* 閸ョ偓鐖ｇ紓鏍帆瀵湱锟?*/
        .te-icon-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 20001;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .te-icon-modal-box {
            background: var(--theme-card-bg);
            border-radius: 20px;
            width: 85%;
            max-width: 320px;
            padding: 24px 20px;
            animation: teModalIn 0.25s ease;
        }

        @keyframes teModalIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .te-icon-modal-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--theme-title-color);
            text-align: center;
            margin-bottom: 20px;
        }

        .te-icon-modal-preview {
            width: 60px;
            height: 60px;
            border-radius: 14px;
            object-fit: contain;
            border: 2px solid var(--theme-card-border);
            margin: 0 auto 16px;
            display: block;
            background: var(--theme-input-bg);
        }

        .te-icon-modal .te-item {
            padding: 10px 0;
        }

        .te-icon-modal-btns {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .te-icon-modal-btns button {
            flex: 1;
            padding: 10px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            border: none;
        }

        /* 缂囧骸瀵插銉ユ綉閸忋儱褰涢崶鐐垼 - 缁楊兛绨╃仦?*/
        .home-app-grid-screen2 .home-app-icon .te-entry-icon {
            font-size: 36px;
            line-height: 1;
        }

        /* --- 缂囧骸瀵查弬瑙勵攳鎼存挸鍨悰?--- */
        .te-library-empty {
            text-align: center;
            padding: 25px 10px;
            color: var(--theme-sub-text);
            font-size: 13px;
        }

        .te-library-empty-icon {
            font-size: 36px;
            margin-bottom: 8px;
        }

        .te-library-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            background: var(--theme-input-bg);
            border-radius: 12px;
            border: 1.5px solid var(--theme-card-border);
            margin-bottom: 10px;
            transition: all 0.2s;
        }

        .te-library-item:last-child {
            margin-bottom: 0;
        }

        .te-library-item.is-active {
            border-color: var(--theme-primary);
            background: var(--theme-card-bg);
            box-shadow: 0 2px 8px rgba(255, 154, 158, 0.15);
        }

        .te-library-info {
            flex: 1;
            min-width: 0;
        }

        .te-library-name {
            font-size: 14px;
            font-weight: bold;
            color: var(--theme-title-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .te-library-meta {
            font-size: 11px;
            color: var(--theme-sub-text);
            margin-top: 3px;
        }

        .te-library-active-badge {
            display: inline-block;
            font-size: 10px;
            color: #fff;
            background: var(--theme-btn-gradient);
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 6px;
            font-weight: bold;
        }

        .te-library-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }

        .te-library-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: none;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s;
            -webkit-tap-highlight-color: transparent;
        }

        .te-library-btn:active {
            transform: scale(0.9);
        }

        .te-library-btn-apply {
            background: linear-gradient(135deg, #a29bfe, #6c5ce7);
            color: #fff;
        }

        .te-library-btn-delete {
            background: #ffecec;
            color: #e74c3c;
        }

        /* ==================== 濮樻梹鍦虹紓鏍帆閸ｃ劍鐗卞?(Bubble Editor) ==================== */

        .be-container {
            padding: 15px;
            padding-top: 0;
            padding-bottom: 120px;
            overflow-y: auto;
            height: 100vh;
            box-sizing: border-box;
        }

        /* 妫板嫯顫嶉崠?*/
        .be-preview-area {
            margin: 10px 0;
            border-radius: 16px;
            overflow: hidden;
            border: 2px solid var(--theme-card-border, #e0e8f0);
        }

        .be-preview-checkerboard {
            background-image:
                linear-gradient(45deg, #eef2f6 25%, transparent 25%),
                linear-gradient(-45deg, #eef2f6 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #eef2f6 75%),
                linear-gradient(-45deg, transparent 75%, #eef2f6 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            background-color: #f8fafc;
            padding: 25px 15px;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .be-preview-row {
            display: flex;
            align-items: flex-end;
            gap: 8px;
        }

        .be-preview-ai {
            justify-content: flex-start;
        }

        .be-preview-user {
            justify-content: flex-end;
        }

        .be-preview-avatar {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: linear-gradient(135deg, #c5d8e8, #a0bcd4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: #fff;
            font-weight: bold;
            flex-shrink: 0;
        }

        .be-preview-user .be-preview-avatar {
            background: linear-gradient(135deg, #f0b4c4, #e095a8);
        }

        .be-preview-bubble {
            padding: 6px 12px;
            border-radius: 15px 15px 15px 4px;
            font-size: 14px;
            line-height: 1.5;
            max-width: 60%;
            word-break: break-word;
            position: relative;
            /* 姒涙顓籄I濮樻梹锟?*/
            background: #e5f7ff;
            color: #325881;
            border: 2px solid #8bb1d0;
        }

        .be-preview-user .be-preview-bubble {
            border-radius: 15px 15px 4px 15px;
            background: #ffe5eb;
            color: #b76683;
            border: 2px solid #d5aab4;
        }

        .be-preview-time {
            font-size: 11px;
            color: #999;
            flex-shrink: 0;
            align-self: flex-end;
            padding-bottom: 2px;
        }

        /* 鐟欐帟澹婇崚鍥ㄥ床锟?*/
        .be-side-tabs {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin: 10px 0 8px;
            background: var(--theme-card-bg, #fff);
            border-radius: 12px;
            border: 2px solid var(--theme-card-border, #e0e8f0);
            overflow: hidden;
        }

        .be-side-tab {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            font-size: 14px;
            font-weight: bold;
            color: #999;
            cursor: pointer;
            transition: all 0.25s;
        }

        .be-side-tab.active {
            background: var(--theme-primary, #45a3e7);
            color: #fff;
        }

        .be-mirror-btn {
            width: 44px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--theme-primary, #45a3e7);
            cursor: pointer;
            border-left: 1px solid var(--theme-card-border, #e0e8f0);
            border-right: 1px solid var(--theme-card-border, #e0e8f0);
            transition: transform 0.2s;
            flex-shrink: 0;
        }

        .be-mirror-btn:active {
            transform: scale(1.3);
        }

        /* 缂傛牞绶棃銏℃緲 Tab 锟?*/
        .be-panel-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            border-radius: 10px;
            border: 2px solid var(--theme-card-border, #e0e8f0);
            background: var(--theme-card-bg, #fff);
        }

        .be-panel-tabs::-webkit-scrollbar {
            display: none;
        }

        .be-panel-tab {
            flex: 1;
            text-align: center;
            padding: 8px 4px;
            font-size: 13px;
            color: #888;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
            border-right: 1px solid var(--theme-card-border, #e8eef4);
        }

        .be-panel-tab:last-child {
            border-right: none;
        }

        .be-panel-tab.active {
            color: #fff;
            background: var(--theme-primary, #45a3e7);
            font-weight: bold;
        }

        /* 缂傛牞绶棃銏℃緲 */
        .be-panel {
            display: none;
            padding: 12px;
            background: var(--theme-card-bg, #fff);
            border-radius: 14px;
            border: 2px solid var(--theme-card-border, #e0e8f0);
            margin-bottom: 10px;
        }

        .be-control-group {
            margin-bottom: 14px;
        }

        .be-control-group:last-child {
            margin-bottom: 0;
        }

        .be-control-group>label {
            display: block;
            font-size: 13px;
            color: var(--text-brown, #59474a);
            font-weight: bold;
            margin-bottom: 6px;
        }

        /* 濠婃垵娼＄悰?*/
        .be-slider-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .be-slider {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            background: #e0e8f0;
            border-radius: 3px;
            outline: none;
        }

        .be-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--theme-primary, #45a3e7);
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(69, 163, 231, 0.4);
        }

        .be-slider-val {
            min-width: 28px;
            text-align: right;
            font-size: 13px;
            font-weight: bold;
            color: var(--theme-primary, #45a3e7);
        }

        .be-slider-unit {
            font-size: 11px;
            color: #999;
            min-width: 16px;
        }

        /* 妫版粏澹婄悰?*/
        .be-color-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .be-color-input {
            width: 40px;
            height: 32px;
            padding: 2px;
            border: 2px solid var(--theme-card-border, #e0e8f0);
            border-radius: 8px;
            cursor: pointer;
            background: transparent;
        }

        .be-color-hex {
            font-size: 13px;
            color: #666;
            font-family: 'Courier New', monospace;
            background: transparent;
            border: 1px solid var(--theme-card-border, #e0e8f0);
            border-radius: 6px;
            padding: 2px 6px;
            width: 75px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }

        .be-color-hex:focus {
            border-color: var(--theme-primary, #fd5392);
        }

        /* 閺傚洦婀版潏鎾冲弳 */
        .be-text-input {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid var(--theme-input-border, #e0e8f0);
            border-radius: 10px;
            font-size: 13px;
            outline: none;
            box-sizing: border-box;
            background: var(--theme-input-bg, #fafafa);
            color: var(--text-brown, #333);
            transition: border-color 0.2s;
        }

        .be-text-input:focus {
            border-color: var(--theme-primary, #45a3e7);
        }


        /* 瀵偓锟?*/
        .be-switch-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .be-switch-row>label {
            margin-bottom: 0 !important;
        }

        .be-switch {
            width: 44px;
            height: 24px;
            background: #ddd;
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s;
            flex-shrink: 0;
        }

        .be-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.3s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        }

        .be-switch.on {
            background: var(--theme-primary, #45a3e7);
        }

        .be-switch.on::after {
            transform: translateX(20px);
        }

        /* 鎼存洟鍎撮幙宥勭稊锟?*/
        .be-action-bar {
            display: flex;
            gap: 8px;
            margin: 0;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px 15px calc(15px + env(safe-area-inset-bottom));
            background: #fdfdfd;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
            z-index: 100;
            box-sizing: border-box;
        }

        .be-btn {
            flex: 1;
            padding: 12px 0;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
        }

        .be-btn:active {
            transform: scale(0.96);
        }

        .be-btn-save {
            background: var(--theme-btn-gradient, linear-gradient(90deg, #45a3e7, #5bb8f5));
            color: var(--theme-btn-text, #fff);
            box-shadow: var(--theme-btn-shadow, 0 4px 12px rgba(69, 163, 231, 0.3));
        }

        .be-btn-css {
            background: var(--theme-primary, #fd5392);
            color: var(--theme-btn-reset-text, #fff);
        }

        .be-btn-manage {
            background: var(--theme-primary, #fd5392);
            color: var(--theme-btn-reset-text, #fff);
        }

        /* 濮樻梹鍦虹粻锛勬倞闂堛垺锟?*/
        .be-manager {
            background: var(--theme-card-bg, #fff);
            border-radius: 16px;
            border: 2px solid #c4a8e8;
            overflow: hidden;
            margin-bottom: 20px;
            position: fixed;
            bottom: 80px;
            /* 閺勫墽銇氶崷銊︽惙娴ｆ粍鐖稉濠冩煙 */
            left: 15px;
            right: 15px;
            z-index: 101;
            /* 绾喕绻氶崷銊︽惙娴ｆ粍鐖崪灞藉従娴犳牕鍘撶槐鐘辩锟?*/
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .be-manager-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: linear-gradient(135deg, #f5f0ff, #ece4ff);
            font-size: 14px;
            font-weight: bold;
            color: #6b4fa0;
        }

        .be-manager-close {
            cursor: pointer;
            padding: 4px 8px;
            color: #999;
            font-size: 16px;
        }

        .be-manager-list {
            max-height: 300px;
            overflow-y: auto;
            padding: 8px;
        }

        .be-manager-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            margin-bottom: 6px;
            background: var(--theme-input-bg, #fafafa);
            border-radius: 10px;
            border: 1px solid #e0e8f0;
            transition: all 0.2s;
        }

        .be-manager-item:last-child {
            margin-bottom: 0;
        }

        .be-manager-item-info {
            flex: 1;
            cursor: pointer;
        }

        .be-manager-item-name {
            font-size: 14px;
            font-weight: bold;
            color: var(--text-brown, #333);
        }

        .be-manager-item-date {
            font-size: 11px;
            color: #999;
            margin-top: 2px;
        }

        .be-manager-item-type {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-top: 3px;
            display: inline-block;
        }

        .be-manager-item-type.css-type {
            background: #fff3e0;
            color: #e65100;
        }

        .be-manager-item-type.editor-type {
            background: #e3f2fd;
            color: #1565c0;
        }

        .be-manager-item-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }

        .be-manager-action-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.2s;
        }

        .be-manager-action-btn:active {
            transform: scale(0.9);
        }

        .be-manager-edit-btn {
            background: #e3f2fd;
            color: #1976d2;
        }

        .be-manager-del-btn {
            background: #ffebee;
            color: #e53935;
        }

        .be-manager-css-btn {
            background: #f3e5f5;
            color: #7b1fa2;
        }

        /* ================= 閼卞﹤銇夐崥濠囥偘 (Chat Pendant) ================= */
        .chat-pendant-container {
            position: absolute;
            top: 0;
            left: 15px;
            z-index: 9999;
            pointer-events: none;
            /* Let clicks pass through */
            transform-origin: top center;
            animation: chat-pendant-swing 4s ease-in-out infinite alternate;
        }

        .chat-pendant {
            width: var(--chat-pendant-size, 40px);
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
        }

        @keyframes chat-pendant-swing {
            0% {
                transform: rotate(-10deg);
            }

            100% {
                transform: rotate(10deg);
            }
        }

        /* ==================== 韫囧啫锛愰崡锛勫閸旂喕锟?(Heart Voice) ==================== */

        /* 韫囧啫锛愰崶鐐垼閹稿锟?- 鐎佃壈鍩呴弽?*/
        .heart-voice-btn {
            position: absolute;
            right: 55px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            z-index: 10;
        }

        /* SVG 閻栧崬绺鹃崶鐐垼 */
        .heart-voice-icon {
            position: relative;
            width: 24px;
            height: 24px;
            animation: hv-heartbeat 1.5s ease-in-out infinite;
        }

        .heart-voice-icon svg.hv-heart-svg {
            width: 100%;
            height: 100%;
            fill: var(--text-brown, #59474a);
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
        }

        /* 韫囧啳鐑︾痪?- 閻栧崬绺炬稉顓㈡？閻ㄥ嫬绺鹃悽闈涙禈閺佸牊锟?*/
        .heart-voice-icon .hv-pulse-line {
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -60%);
            z-index: 2;
            width: 14px;
            height: 8px;
        }

        .heart-voice-icon .hv-pulse-line svg {
            width: 100%;
            height: 100%;
        }

        .heart-voice-icon .hv-pulse-line svg path {
            fill: none;
            stroke: #fff;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 40;
            stroke-dashoffset: 40;
            animation: hv-pulse-draw 1.5s ease-in-out infinite;
        }

        @keyframes hv-heartbeat {
            0%, 100% { transform: scale(1); }
            15% { transform: scale(1.15); }
            30% { transform: scale(1); }
            45% { transform: scale(1.1); }
            60% { transform: scale(1); }
        }

        @keyframes hv-pulse-draw {
            0% { stroke-dashoffset: 40; }
            50% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: -40; }
        }

        /* 韫囧啫锛愰張澶嬫煀閺佺増宓侀弮鍓佹畱鐏忓繒瀛╅悙?*/
        .heart-voice-btn .hv-new-dot {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 8px;
            height: 8px;
            background: #ff4757;
            border-radius: 50%;
            animation: hv-dot-pulse 2s ease-in-out infinite;
            display: none;
        }

        .heart-voice-btn .hv-new-dot.active {
            display: block;
        }

        @keyframes hv-dot-pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.3); }
        }

        /* ===== 韫囧啫锛愬鍦崶 ===== */
        .hv-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 10002;
            justify-content: center;
            align-items: center;
            animation: hv-fade-in 0.25s ease;
            /* iOS 闂冨弶顒涢懗灞炬珯濠婃艾濮╃粚鍧椻偓?*/
            touch-action: none;
            overscroll-behavior: contain;
            /* 📒 顶部留出 iOS 状态栏 / 刘海安全区，底部留出聊天输入栏空间 */
            padding-top: calc(20px + env(safe-area-inset-top));
            padding-bottom: calc(70px + env(safe-area-inset-bottom));
            box-sizing: border-box;
        }

        .hv-modal-overlay.active {
            display: flex;
        }

        @keyframes hv-fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .hv-modal-card {
            width: 88%;
            max-width: 360px;
            max-height: 85vh;
            background: var(--theme-card-bg, #ffffff);
            border-radius: 20px;
            border: 2px solid var(--theme-card-border, #FFDEE9);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            animation: hv-card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            display: flex;
            flex-direction: column;
        }

        /* ===== 笔记本外壳：包住 tabs + card，让 tabs 可以露在 card 上方 ===== */
        .hv-modal-wrap {
            width: 88%;
            max-width: 360px;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            animation: hv-card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* wrap 内的 card 不再需要自己的宽度和动画 */
        .hv-modal-wrap .hv-modal-card {
            width: 100%;
            max-width: none;
            max-height: none;
            flex: 1;
            min-height: 0;
            animation: none;
            /* 让 card 上沿微微"咬住"标签下沿 */
            margin-top: -6px;
            position: relative;
            z-index: 1;
        }

        /* ===== 笔记本标签栏（露在卡片上方） ===== */
        .hv-tabs {
            display: flex;
            gap: 0;
            padding: 0 18px;
            flex-shrink: 0;
            position: relative;
            z-index: 0;
        }

        .hv-tab {
            flex: 0 0 auto;
            min-width: 62px;
            padding: 5px 18px 10px;
            border-radius: 10px 10px 0 0;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: rgba(255, 255, 255, 0.85);
            text-align: center;
            cursor: pointer;
            user-select: none;
            position: relative;
            transform: translateY(2px);
            transition: transform 0.22s ease, filter 0.22s ease, opacity 0.22s ease;
            opacity: 0.78;
            filter: saturate(0.85);
        }

        /* 马卡龙三色 */
        .hv-tab-pink   { background: #fbcfe1; }
        .hv-tab-blue   { background: #c5e3f0; }
        .hv-tab-yellow { background: #fde7a4; }

        .hv-tab.active {
            transform: translateY(0);
            opacity: 1;
            filter: saturate(1);
            color: #ffffff;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        }

        .hv-tab .hv-tab-text {
            display: inline-block;
            line-height: 1;
        }

        /* ===== 翻页容器 ===== */
        .hv-pages {
            flex: 1;
            min-height: 0;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .hv-page {
            display: none;
            flex: 1;
            min-height: 0;
            flex-direction: column;
            overflow: hidden;
        }

        .hv-page.active {
            display: flex;
            animation: hv-page-in-right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 方向感：从右滑入（点了右边的 tab） */
        .hv-page.active.from-right {
            animation: hv-page-in-right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        }
        /* 从左滑入（点了左边的 tab） */
        .hv-page.active.from-left {
            animation: hv-page-in-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes hv-page-in-right {
            from { opacity: 0; transform: translateX(22px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes hv-page-in-left {
            from { opacity: 0; transform: translateX(-22px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        /* 占位页样式 */
        .hv-page-placeholder {
            flex: 1;
            min-height: 200px;
        }

        /* ============ 📒 档案页样式（tab3 user profile） ============ */
        /* 主视图：和 #hv-current-view 用同一套 flex 链写法 */
        #hv-up-main-view {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        /* 编辑子视图（复用 hv-history-view 隐藏/显示机制） */
        #hv-up-edit-view { display: none; }
        #hv-up-edit-view.active {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        /* 5 大分类 section 容器 */
        #hv-up-sections {
            padding-bottom: 8px;
        }
        .hv-up-section + .hv-up-section {
            margin-top: 14px;
        }

        .hv-up-section {
            background: linear-gradient(135deg, #fffdf6 0%, #fff7e0 100%);
            border: 1px solid #f4e3aa;
            border-radius: 12px;
            padding: 11px 12px 12px;
            box-shadow: 0 1px 3px rgba(216, 178, 90, 0.06);
        }

        .hv-up-sec-title {
            font-size: 13.5px;
            font-weight: 700;
            color: #8a6a2c;
            letter-spacing: 0.4px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .hv-up-sec-title .hv-up-sec-icon { font-size: 14px; }

        .hv-up-sec-empty {
            font-size: 12px;
            color: #c8b48a;
            text-align: left;
            padding: 4px 2px;
            font-style: italic;
        }

        .hv-up-sec-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        /* 简单类标签云（喜好/讨厌/习惯/印象） */
        .hv-up-chip {
            display: inline-flex;
            align-items: center;
            padding: 5px 11px;
            background: #fff;
            border: 1.2px solid #f0d989;
            border-radius: 14px;
            font-size: 12.5px;
            color: #5a3f1c;
            line-height: 1.3;
            cursor: pointer;
            transition: all 0.18s ease;
            max-width: 100%;
            word-break: break-all;
        }
        .hv-up-chip:active {
            transform: scale(0.96);
            background: #fff8e0;
        }

        /* 不同分类的小色调 */
        .hv-up-section[data-cat="like"] .hv-up-chip { border-color: #f5cfa8; background: #fff8f0; }
        .hv-up-section[data-cat="dislike"] .hv-up-chip { border-color: #e8b8b8; background: #fff5f5; color: #7a3a3a; }
        .hv-up-section[data-cat="habit"] .hv-up-chip { border-color: #c5d3e8; background: #f5f8fc; color: #3a4a6a; }
        .hv-up-section[data-cat="impression"] .hv-up-chip { border-color: #d8c5e8; background: #f9f5fc; color: #5a3a7a; }

        /* 关系条目（比 chip 大一点） */
        .hv-up-rel-card {
            width: 100%;
            background: #fff;
            border: 1.2px solid #f0d989;
            border-radius: 10px;
            padding: 8px 10px 9px;
            cursor: pointer;
            transition: all 0.18s ease;
        }
        .hv-up-rel-card:active {
            transform: scale(0.99);
            background: #fffbef;
        }
        .hv-up-rel-name {
            font-size: 13px;
            font-weight: 700;
            color: #5a3f1c;
            margin-bottom: 2px;
        }
        .hv-up-rel-meta {
            font-size: 11.5px;
            color: #8a6a2c;
            line-height: 1.4;
            margin-bottom: 3px;
        }
        .hv-up-rel-traits {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 3px;
        }
        .hv-up-rel-trait {
            display: inline-block;
            padding: 1px 7px;
            background: #fdf3d6;
            border-radius: 8px;
            font-size: 11px;
            color: #8a6a2c;
            line-height: 1.5;
        }

        .hv-up-tip {
            font-size: 11px;
            color: #b8a058;
            text-align: center;
            padding: 4px 0 2px;
        }

        /* 编辑视图输入控件 */
        .hv-up-edit-label {
            font-size: 12px;
            color: var(--theme-sub-text, #888);
            margin-bottom: 5px;
            font-weight: 600;
        }
        .hv-up-edit-input {
            width: 100%;
            padding: 9px 11px;
            border-radius: 9px;
            border: 1.5px solid var(--theme-card-border, #f4e3aa);
            background: #fff;
            font-size: 13px;
            color: var(--text-brown, #59474a);
            box-sizing: border-box;
            font-family: inherit;
        }
        .hv-up-edit-textarea {
            width: 100%;
            min-height: 70px;
            padding: 9px 11px;
            border-radius: 9px;
            border: 1.5px solid var(--theme-card-border, #f4e3aa);
            background: #fff;
            font-size: 13px;
            line-height: 1.6;
            color: var(--text-brown, #59474a);
            resize: vertical;
            box-sizing: border-box;
            font-family: inherit;
        }
        .hv-up-edit-input:focus,
        .hv-up-edit-textarea:focus {
            outline: none;
            border-color: #d8b25a;
        }

        /* ===== 日程页样式 ===== */
        /* 设置按钮（绝对定位在日程 header 右上角） */
        .hv-sch-settings-btn {
            position: absolute;
            top: 16px;
            right: 50px;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 14px;
            cursor: pointer;
            color: var(--theme-sub-text, #888);
            transition: background 0.2s;
            z-index: 4;
        }
        .hv-sch-settings-btn:active {
            background: rgba(0, 0, 0, 0.05);
        }

        /* 设置子视图（复用 hv-history-view 隐藏/显示机制） */
        #hv-sch-settings-view {
            display: none;
        }
        #hv-sch-settings-view.active {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        /* ============ 时间轴重制（精确对齐 + 笔记本质感）============ */
        /* 关键尺寸：
           - 时间列宽度 TIME_W = 60px
           - 时间列与圆点之间间距 GAP = 8px
           - 圆点直径 DOT = 12px
           - 圆点中心 X = TIME_W + GAP + DOT/2 = 60+8+6 = 74px
           - 竖线 X = 圆点中心 = 74px (left = 73px, width = 2px)
           - 内容卡片 left margin = TIME_W + GAP + DOT + GAP_AFTER = 60+8+12+10 = 90px
        */
        #hv-sch-timeline {
            position: relative;
            padding: 8px 4px 14px 0;
        }
        /* 时间轴左侧的竖线（虚线感更像手账） */
        #hv-sch-timeline::before {
            content: '';
            position: absolute;
            left: 73px;
            top: 14px;
            bottom: 14px;
            width: 2px;
            background:
                linear-gradient(to bottom, transparent, #fbcfe1 8%, #fbcfe1 92%, transparent);
            border-radius: 2px;
            opacity: 0.85;
        }

        /* 单条日程行 */
        .hv-sch-item {
            position: relative;
            display: flex;
            align-items: stretch;
            padding: 5px 0;
            min-height: 50px;
        }

        /* 时间列 */
        .hv-sch-time {
            width: 60px;
            flex-shrink: 0;
            text-align: right;
            padding-right: 8px;
            padding-top: 6px;
            font-size: 11.5px;
            line-height: 1.5;
            color: #b8a4ab;
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        .hv-sch-time-end {
            color: #d4c2c8;
            font-size: 10px;
            font-weight: 500;
            margin-top: 1px;
        }
        .hv-sch-time-end::before {
            content: '~ ';
            opacity: 0.7;
        }

        /* 圆点：精确落在竖线中心（left = 中心X - 半径 = 74-6 = 68px） */
        .hv-sch-dot {
            position: absolute;
            left: 68px;
            top: 17px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ffffff;
            border: 2.5px solid #f6c8db;
            box-sizing: border-box;
            z-index: 2;
            transition: all 0.3s ease;
        }

        /* 内容卡片 */
        .hv-sch-content {
            flex: 1;
            margin-left: 30px;
            background: linear-gradient(135deg, #fffafc 0%, #fff5f8 100%);
            border-radius: 12px;
            padding: 9px 13px 10px;
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-brown, #59474a);
            border: 1px solid #fde6ee;
            box-shadow: 0 1px 3px rgba(255, 192, 211, 0.08);
            position: relative;
            transition: all 0.3s ease;
        }
        /* 卡片左侧的小尖角，指向时间轴竖线 */
        .hv-sch-content::before {
            content: '';
            position: absolute;
            left: -6px;
            top: 14px;
            width: 10px;
            height: 10px;
            background: inherit;
            border-left: 1px solid #fde6ee;
            border-bottom: 1px solid #fde6ee;
            transform: rotate(45deg);
            border-radius: 0 0 0 2px;
        }

        .hv-sch-title {
            font-weight: 700;
            font-size: 13.5px;
            margin-bottom: 4px;
            color: #5a3f48;
            letter-spacing: 0.2px;
        }

        .hv-sch-meta {
            font-size: 11px;
            color: #a48a92;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 3px;
            margin-bottom: 1px;
        }
        .hv-sch-meta span {
            display: inline-flex;
            align-items: center;
            padding: 2px 7px 2px 6px;
            background: rgba(251, 207, 225, 0.22);
            border-radius: 8px;
            line-height: 1.3;
            white-space: nowrap;
        }
        .hv-sch-meta span::before {
            margin-right: 3px;
            font-size: 10px;
        }
        .hv-sch-meta .hv-sch-loc::before { content: '📍'; }
        .hv-sch-meta .hv-sch-mood {
            background: rgba(197, 227, 240, 0.28);
        }
        .hv-sch-meta .hv-sch-mood::before { content: '🌿'; }

        /* 小注释：去掉斜体，改用左侧短色条提示 */
        .hv-sch-note {
            position: relative;
            font-size: 12px;
            color: #8d747c;
            margin-top: 6px;
            padding: 5px 0 5px 9px;
            line-height: 1.6;
            border-left: 2px solid #f6d2de;
            background: linear-gradient(to right, rgba(251, 207, 225, 0.10), transparent 60%);
            border-radius: 0 6px 6px 0;
        }

        /* ============ 三态：past / current / future ============ */

        /* 已过去：整体褪色 */
        .hv-sch-item.past .hv-sch-time { color: #d4c2c8; }
        .hv-sch-item.past .hv-sch-time-end { color: #e3d4d9; }
        .hv-sch-item.past .hv-sch-dot {
            border-color: #e8d6dd;
            background: #f4ebef;
        }
        .hv-sch-item.past .hv-sch-content {
            opacity: 0.55;
            background: linear-gradient(135deg, #fbf6f8 0%, #f7f0f3 100%);
        }

        /* 当前：脉冲圆点 + 卡片光晕 + 左侧粉色色条 */
        .hv-sch-item.current .hv-sch-time { color: #ff6b81; }
        .hv-sch-item.current .hv-sch-time-end { color: #ff9eaf; }
        .hv-sch-item.current .hv-sch-dot {
            border-color: #ff6b81;
            background: #ff6b81;
            box-shadow: 0 0 0 4px rgba(255, 107, 129, 0.18);
            animation: hv-sch-pulse 1.6s ease-in-out infinite;
        }
        .hv-sch-item.current .hv-sch-content {
            background: linear-gradient(135deg, #fff4f7 0%, #ffe8ee 100%);
            border-color: #fbb6ce;
            box-shadow: 0 4px 12px rgba(255, 107, 129, 0.13);
        }
        .hv-sch-item.current .hv-sch-content::before {
            border-left-color: #fbb6ce;
            border-bottom-color: #fbb6ce;
        }
        /* 当前条左侧色条 */
        .hv-sch-item.current .hv-sch-content::after {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 3px;
            background: linear-gradient(to bottom, #ff6b81, #fbb6ce);
            border-radius: 0 2px 2px 0;
        }
        .hv-sch-item.current .hv-sch-title {
            color: #c14258;
        }
        .hv-sch-item.current .hv-sch-title::before {
            content: '▶ ';
            color: #ff6b81;
            font-size: 10px;
            display: inline-block;
            transform: translateY(-1px);
        }

        @keyframes hv-sch-pulse {
            0%, 100% { box-shadow: 0 0 0 4px rgba(255, 107, 129, 0.20); }
            50%      { box-shadow: 0 0 0 8px rgba(255, 107, 129, 0.06); }
        }

        /* 未来：默认色（已经在基础样式里了，这里仅微调圆点） */
        .hv-sch-item.future .hv-sch-dot {
            border-color: #f6c8db;
            background: #ffffff;
        }

        /* 韫囧啫锛愮憴鍡楁禈鐎圭懓娅掗敍鍫濈箑妞ょ粯锟?flex 鐎涙劙銆嶉幍宥堝厴锟?body 濠婃艾濮╅敍?*/
        #hv-current-view {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        #hv-history-view.active {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        @keyframes hv-card-pop {
            from {
                opacity: 0;
                transform: scale(0.85) translateY(20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* 瀵湱鐛ラ崗鎶芥４閹稿锟?*/
        .hv-close-btn {
            position: absolute;
            top: 12px;
            right: 14px;
            font-size: 20px;
            color: var(--theme-sub-text, #aaa);
            cursor: pointer;
            z-index: 5;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .hv-close-btn:active {
            background: rgba(0,0,0,0.05);
        }

        /* 瀵湱鐛ラ弽鍥暯锟?*/
        .hv-card-header {
            text-align: center;
            padding: 20px 20px 12px;
            flex-shrink: 0;
        }

        .hv-card-header-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-brown, #59474a);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .hv-card-header-title .hv-title-heart {
            color: #ff6b81;
            font-size: 18px;
            animation: hv-heartbeat 1.5s ease-in-out infinite;
            display: inline-block;
        }

        .hv-card-subtitle {
            font-size: 11px;
            color: var(--theme-sub-text, #aaa);
            margin-top: 4px;
        }

        /* 瀵湱鐛ラ崘鍛啇閸欘垱绮撮崝銊ュ隘 */
        .hv-card-body {
            padding: 0 18px 18px;
            overflow-y: auto;
            flex: 1;
            min-height: 0;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
        }

        /* --- 閹稿洦鏆熼棃銏℃緲 --- */
        .hv-metrics-panel {
            background: linear-gradient(135deg, rgba(255,107,129,0.08) 0%, rgba(253,83,146,0.08) 100%);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 12px;
            border: 1px solid rgba(255,107,129,0.15);
        }

        .hv-metrics-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--theme-sub-text, #999);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 12px;
        }

        .hv-metric-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .hv-metric-item:last-child {
            margin-bottom: 0;
        }

        .hv-metric-icon {
            font-size: 18px;
            width: 28px;
            flex-shrink: 0;
        }

        .hv-metric-info {
            flex: 1;
        }

        .hv-metric-label {
            font-size: 11px;
            color: var(--theme-sub-text, #999);
            margin-bottom: 3px;
        }

        .hv-metric-bar-wrap {
            height: 8px;
            background: rgba(0,0,0,0.06);
            border-radius: 4px;
            overflow: hidden;
        }

        .hv-metric-bar {
            height: 100%;
            border-radius: 4px;
            transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .hv-metric-bar.heartbeat {
            background: linear-gradient(90deg, #ff6b81, #ff4757);
        }

        .hv-metric-bar.jealousy {
            background: linear-gradient(90deg, #ffa502, #ff6348);
        }

        .hv-metric-bar.happy {
            background: linear-gradient(90deg, #7bed9f, #2ed573);
        }

        .hv-metric-bar.angry {
            background: linear-gradient(90deg, #ff6b6b, #ee5a24);
        }

        .hv-metric-desc {
            font-size: 10px;
            color: var(--theme-sub-text, #999);
            margin-top: 2px;
        }

        .hv-metric-value {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-brown, #59474a);
            min-width: 50px;
            text-align: right;
            flex-shrink: 0;
            margin-left: 8px;
        }

        /* --- 韫囧啯鍎忛悩鑸碘偓?--- */
        .hv-mood-section {
            background: var(--theme-input-bg, #fffbfc);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 12px;
            border: 1px solid var(--theme-card-border, #FFDEE9);
        }

        .hv-mood-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--theme-sub-text, #999);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 8px;
        }

        .hv-mood-text {
            font-size: 15px;
            color: var(--text-brown, #59474a);
            font-weight: 500;
            line-height: 1.5;
            padding-left: 10px;
            border-left: 3px solid var(--theme-primary, #fd5392);
        }

        /* --- 瀹告彃鍨归梽銈堝磸锟?--- */
        .hv-draft-section {
            background: linear-gradient(135deg, rgba(108,92,231,0.06) 0%, rgba(162,155,254,0.06) 100%);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 12px;
            border: 1px solid rgba(108,92,231,0.12);
            position: relative;
        }

        .hv-draft-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--theme-sub-text, #999);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 10px;
        }

        /* 閸掔娀娅庨惃鍕毜锟?*/
        .hv-draft-bubble {
            background: rgba(108,92,231,0.08);
            border: 1.5px dashed rgba(108,92,231,0.25);
            border-radius: 12px 12px 12px 4px;
            padding: 10px 14px;
            margin-bottom: 12px;
            position: relative;
        }

        .hv-draft-deleted {
            font-size: 14px;
            color: var(--theme-sub-text, #999);
            text-decoration: line-through;
            text-decoration-color: rgba(239, 68, 68, 0.5);
            text-decoration-thickness: 1.5px;
            line-height: 1.5;
        }

        /* 閸愬懎绺鹃惇鐔风杽閹櫕锟?*/
        .hv-draft-inner-title {
            font-size: 10px;
            color: var(--theme-sub-text, #999);
            margin-bottom: 6px;
            letter-spacing: 1px;
        }

        .hv-draft-inner {
            font-size: 14px;
            color: var(--text-brown, #59474a);
            line-height: 1.6;
            opacity: 0.9;
            padding-left: 10px;
            border-left: 3px solid rgba(108,92,231,0.3);
        }

        /* --- 鎼存洟鍎撮幙宥勭稊锟?--- */
        .hv-card-footer {
            padding: 12px 18px;
            display: flex;
            justify-content: center;
            border-top: 1px solid var(--theme-card-border, #FFDEE9);
            flex-shrink: 0;
        }

        .hv-history-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 20px;
            border-radius: 20px;
            border: 1.5px solid var(--theme-card-border, #FFDEE9);
            background: var(--theme-card-bg, #fff);
            color: var(--text-brown, #59474a);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .hv-history-btn:active {
            transform: scale(0.96);
            background: var(--theme-input-bg, #fffbfc);
        }

        /* --- 閸樺棗褰惰箛鍐紣鐟欏棗锟?--- */
        .hv-history-view {
            display: none;
        }

        .hv-history-view.active {
            display: block;
        }

        .hv-history-list {
            max-height: 50vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
            padding: 4px 0;
        }

        .hv-history-item {
            background: var(--theme-input-bg, #fffbfc);
            border: 1px solid var(--theme-card-border, #FFDEE9);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .hv-history-item:active {
            transform: scale(0.98);
            border-color: var(--theme-primary, #fd5392);
        }

        .hv-history-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .hv-history-item-time {
            font-size: 11px;
            color: var(--theme-sub-text, #aaa);
        }

        .hv-history-item-metrics {
            display: flex;
            gap: 10px;
            font-size: 12px;
        }

        .hv-history-item-metrics span {
            display: flex;
            align-items: center;
            gap: 2px;
            color: var(--theme-sub-text, #999);
        }

        .hv-history-item-mood {
            font-size: 13px;
            color: var(--text-brown, #59474a);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hv-history-back-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--theme-primary, #fd5392);
            font-size: 13px;
            cursor: pointer;
            padding: 4px 0;
            margin-bottom: 10px;
        }

        .hv-history-back-btn:active {
            opacity: 0.7;
        }

        /* 閺冪姴绺炬竟鐗堟殶閹诡喗妞傞惃鍕絹缁€?*/
        .hv-empty-state {
            text-align: center;
            padding: 30px 20px;
            color: var(--theme-sub-text, #aaa);
            font-size: 14px;
        }

        .hv-empty-state .hv-empty-icon {
            font-size: 40px;
            margin-bottom: 10px;
            opacity: 0.5;
        }

        /* --- 閸樺棗褰剁拋鏉跨秿閸掔娀娅庡Ο鈥崇础 --- */
        .hv-delete-btn {
            position: absolute;
            top: 16px;
            left: 14px;
            font-size: 18px;
            cursor: pointer;
            opacity: 0.5;
            transition: all 0.2s;
            z-index: 5;
        }

        .hv-delete-btn:active {
            transform: scale(0.9);
        }

        .hv-delete-btn.active {
            opacity: 1;
        }

        /* 閸掔娀娅庡Ο鈥崇础娑撳娈戦崟楣冣偓澶嬵攱 */
        .hv-history-item .hv-check {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid #ddd;
            border-radius: 50%;
            flex-shrink: 0;
            margin-right: 10px;
            transition: all 0.2s;
            align-items: center;
            justify-content: center;
        }

        .hv-history-item .hv-check.checked {
            background: #ff4757;
            border-color: #ff4757;
        }

        .hv-history-item .hv-check.checked::after {
            content: '\2713';
            color: #fff;
            font-size: 12px;
            font-weight: bold;
        }

        .hv-history-list.delete-mode .hv-history-item .hv-check {
            display: flex;
        }

        .hv-history-list.delete-mode .hv-history-item {
            flex-direction: row;
            align-items: center;
        }

        /* 鎼存洟鍎撮崚鐘绘珟绾喛顓婚弽?*/
        .hv-delete-bar {
            padding: 10px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid var(--theme-card-border, #FFDEE9);
            background: var(--theme-card-bg, #fff);
            flex-shrink: 0;
        }

        .hv-delete-bar span {
            font-size: 13px;
            color: var(--theme-sub-text, #999);
        }

        .hv-delete-bar-btns {
            display: flex;
            gap: 8px;
        }

        .hv-delete-bar-cancel {
            padding: 6px 16px;
            border-radius: 16px;
            border: 1.5px solid var(--theme-card-border, #FFDEE9);
            font-size: 13px;
            color: var(--text-brown, #59474a);
            cursor: pointer;
            transition: all 0.2s;
        }

        .hv-delete-bar-cancel:active {
            transform: scale(0.96);
        }

        .hv-delete-bar-confirm {
            padding: 6px 16px;
            border-radius: 16px;
            background: #ff4757;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .hv-delete-bar-confirm:active {
            transform: scale(0.96);
            background: #e84141;
        }


/* ================= 棣冩懖 閹峰秶鐝涘妤冮兇缂佺喐鐗卞?================= */

/* 闁氨鏁ゅ鍦崶闁喚锟?*/
.polaroid-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 闂傤亜鍘滈悘顖滃锟?*/
.polaroid-flash-effect {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
}
@keyframes polaroidFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- 閻╁憡婧€瀵湱锟?---- */
.polaroid-camera-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 閻╁憡婧€閺堥缚锟?*/
.polaroid-camera-body {
    width: 384px;
    aspect-ratio: 540 / 376;
    background-image: url('qita/23.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

/* 闂€婊冦仈閸欐牗娅欓崳?- 閺嶈宓丳S閺佺増宓侀惂鎯у瀻濮ｆ柨鐣炬担?*/
.polaroid-lens-view {
    position: absolute;
    left: 24.81%;
    top: 28%;
    width: 37.78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000;
    overflow: hidden;
    z-index: 5;
    border: 3px solid #a78bba;
    box-sizing: border-box;
}

#polaroid-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
}


/* 閻╁憡婧€閹貉冨煑閹稿锟?*/
.polaroid-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
}

.polaroid-ctrl-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    padding: 0;
    border: none;
}
.polaroid-ctrl-btn:active { transform: scale(0.9); }

.polaroid-flip-btn {
    background: rgba(255,255,255,0.2);
    border: 2px solid #fff !important;
    color: #fff;
}

.polaroid-shutter-btn {
    width: 40px; height: 40px;
    background: #ff4444;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ---- 閹峰秶鐝涘妤冪椽鏉堟垵鍙忕仦蹇涳拷?---- */
.polaroid-editor-page {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #fdf2f4;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 娑擃參妫块崣顖涚泊閸斻劌灏崺?*/
.pe-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 70px 16px 16px 16px;
    -webkit-overflow-scrolling: touch;
}
.pe-paper-wrap {
    width: 100%;
    max-width: 320px;
}

/* 閻╁摜锟?*/
.polaroid-paper {
    position: relative;
    background: #fff;
    padding: 10px 10px 0 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transform: rotate(-1deg);
    width: 100%;
    border-radius: 2px;
}

/* canvas鐎圭懓锟?*/
.pe-canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}
#polaroid-photo-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
}
#polaroid-draw-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    touch-action: none;
    z-index: 5;
}

/* 閻╁摜鐒婃稉瀣啘閸愭瑥鐡ч崠?*/
.polaroid-text-area {
    padding: 10px 4px 14px 4px;
}
.polaroid-text-area textarea {
    width: 100%;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: #555;
    background: transparent;
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
}

/* 閻撗呭娑撳鏌熼幙宥勭稊閹稿鎸崇悰?*/
.pe-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-bottom: 8px;
}
.pe-action-btn {
    border-radius: 22px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.1s;
    padding: 8px 18px;
    font-size: 13px;
    white-space: nowrap;
}
.pe-action-btn:active { transform: scale(0.95); }
.pe-btn-close {
    background: #fff;
    color: #999;
}
.pe-btn-retake {
    background: #fff;
    color: #ff9800;
}
.pe-btn-send {
    background: linear-gradient(135deg, #ff4081, #ff6b9d);
    color: #fff;
    padding: 8px 24px;
}

/* 鎼存洟鍎村銉ュ徔閺嶅骏绱欓崶鍝勭暰锟?*/
.pe-bottom-bar {
    flex-shrink: 0;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pe-tools-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pe-tool-btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    border: none;
    background: rgba(0,0,0,0.04);
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
.pe-tool-btn.active {
    background: #ff4081;
    color: #fff;
}

.pe-separator {
    width: 1px;
    height: 28px;
    background: rgba(0,0,0,0.1);
    margin: 0 4px;
}

/* 缁绮忛幐澶愭尦 */
.pe-size-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
.pe-size-btn.active {
    border-color: #ff4081;
    background: rgba(255,64,129,0.08);
}
.pe-size-dot {
    display: block;
    border-radius: 50%;
    background: #555;
}

/* 妫版粏澹婇柅澶嬪锟?*/
.polaroid-color-bar {
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.03);
    border-radius: 20px;
}
.pe-color {
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
    border: 2px solid transparent;
}
.pe-color.active {
    border-color: #ff4081;
    transform: scale(1.15);
}

/* 閼奉亜鐣炬稊澶愵杹閼规煡鈧瀚ㄩ崳?*/
.pe-color-custom {
    width: 28px; height: 28px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #ff0000, #00ff00, #0000ff, #ff00ff);
    overflow: hidden;
    transition: transform 0.1s;
}
.pe-color-custom.active {
    border-color: #ff4081;
    transform: scale(1.15);
}
.pe-color-custom input[type="color"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* ---- 閼卞﹤銇夊鏃€鍦烘稉顓犳畱閹峰秶鐝涘妤佺壉锟?---- */
.polaroid-msg-frame {
    background: #fff;
    padding: 8px 8px 6px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 2px;
    transform: rotate(-1.5deg);
    max-width: 220px;
    display: inline-block;
}
.polaroid-msg-frame img {
    width: 100%;
    display: block;
    border-radius: 0;
    filter: contrast(1.05) saturate(1.1);
}
.polaroid-msg-frame .polaroid-msg-text {
    text-align: center;
    font-family: inherit;
    font-size: 12px;
    color: #666;
    padding: 14px 4px 8px 4px;
    word-break: break-word;
}


/* ================= 棣冨箥 閸掑棔闊╅棅鍏呯瀵湱鐛ラ弽宄扮础 ================= */

.share-music-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.share-music-overlay[style*="flex"] { display: flex; }

.share-music-modal {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px 20px;
    width: 300px;
    max-width: 90vw;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.share-music-close {
    position: absolute;
    top: 12px; right: 14px;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.share-music-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 16px;
}

/* 旧版手动输入弹窗的 form/input/file/send 样式已删除（功能下线） */

/* ================= 🍠📱 历史遗留链接卡片（降级显示） ================= */
.legacy-link-card {
    display: inline-block;
    max-width: 260px;
    background: #fff;
    border: 1px solid #e8d8e0;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 2px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.legacy-link-card-platform {
    font-size: 12px;
    font-weight: 600;
    color: #b85e7e;
    margin-bottom: 4px;
}
.legacy-link-card-url {
    font-size: 11px;
    line-height: 1.4;
    word-break: break-all;
    color: #5a8ec7;
    margin-bottom: 6px;
}
.legacy-link-card-url a {
    color: inherit;
    text-decoration: none;
}
.legacy-link-card-url a:hover { text-decoration: underline; }
.legacy-link-card-url .legacy-card-link-empty {
    color: #aaa;
    font-style: italic;
}
.legacy-link-card-hint {
    font-size: 10px;
    color: #999;
}

/* ================= 棣冨箥 闂婂厖绠伴幒銊ㄥ礃閸楋紕澧栭弽宄扮础 ================= */

.music-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #ffeded 50%, #fffafa 100%);
    border-radius: 14px;
    padding: 10px 12px;
    min-width: 220px;
    max-width: 280px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    gap: 10px;
    position: relative;
    overflow: hidden;
}

/* 鐏忎線娼伴懗灞炬珯閸ユ儳锟?*/
.music-card-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: blur(3px) saturate(1.2);
    transform: scale(1.08);
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.music-card-bg.active {
    opacity: 0.32;
}

/* 绾喕绻氶崘鍛啇閸︺劏鍎楅弲顖欑锟?*/
.music-card-cover,
.music-card-info {
    position: relative;
    z-index: 1;
}

.music-card:active {
    transform: scale(0.97);
}

.music-card-cover {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.music-card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% !important;
}

.music-card-play-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.05);
    border-radius: 50% !important;
    transition: background 0.2s;
}

.music-card-play-btn .music-icon-play {
    opacity: 0.9;
}

.music-playing .music-card-play-btn .music-icon-play path {
    d: path("M6 4h4v16H6V4zm8 0h4v16h-4V4z");
}

/* 閸旂姾锟?spinner */
.music-icon-loading { display: none; }
.music-loading .music-icon-loading { display: flex !important; }
.music-loading .music-icon-play { display: none; }

.music-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: musicSpin 0.8s linear infinite;
}

.music-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.music-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #2a2a2a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.music-card-artist {
    font-size: 12px;
    color: rgba(0,0,0,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* 閸旂姾娴囬悩鑸碘偓?*/
.music-loading .music-card-play-btn {
    background: rgba(0,0,0,0.4);
}

/* 缂傛挸鍟块幓鎰仛閺傚洤锟?*/
.music-buffering-hint {
    display: none;
    font-size: 11px;
    color: rgba(0,0,0,0.45);
    line-height: 1.3;
    font-weight: 500;
}

.music-loading .music-buffering-hint {
    display: block;
}

.music-loading .music-card-artist {
    display: none;
}

.buffering-dots span {
    animation: bufferingDot 1.4s infinite ease-in-out both;
    font-weight: bold;
}

.buffering-dots span:nth-child(1) { animation-delay: 0s; }
.buffering-dots span:nth-child(2) { animation-delay: 0.2s; }
.buffering-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bufferingDot {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

@keyframes musicSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 閹绢厽鏂佹稉顓炲З锟?- 鐏忎線娼伴弮瀣祮 */
.music-playing .music-card-cover-img {
    animation: musicCoverSpin 8s linear infinite;
}

.music-playing .music-card-play-btn {
    background: rgba(0,0,0,0.35);
}

.music-playing .music-card-play-btn .music-icon-play path {
    fill: #fff;
}

@keyframes musicCoverSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 鐏忎線娼伴張顏勫鏉炶姤妞傞梾鎰 */
.music-cover-hidden {
    display: none !important;
}

/* 娑撳顣介柅鍌炲帳 */
[class*="theme-"] .music-card {
    background: linear-gradient(135deg, #ffffff 0%, #ffeded 50%, #fffafa 100%);
}

/* ================= 棣冨箥 闂婂厖绠伴幒銊ㄥ礃閸楋紕澧栭弽宄扮础 END ================= */

/* ================= 棣冩晙 闂囩鐫嗛柨浣哥潌閺嶅嘲锟?(Screen Lock) ================= */

.screen-lock-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2900;
    pointer-events: none; /* 娑撳秵瀚ら幋顏囆曢幗闈╃礉閸欘亜浠涚憴鍡氼潕閺佸牊锟?*/
    opacity: 0;
    transition: opacity 0.6s ease;
}
.screen-lock-overlay.active {
    opacity: 1;
}
.screen-lock-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* 缁澹婇崣鎴濆帨鏉堣锟?*/
.screen-lock-border {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 3px solid #ff69b4;
    box-shadow:
        inset 0 0 30px rgba(255, 105, 180, 0.25),
        0 0 30px rgba(255, 105, 180, 0.15);
    animation: screenLockPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes screenLockPulse {
    0%, 100% {
        border-color: #ff69b4;
        box-shadow:
            inset 0 0 20px rgba(255, 105, 180, 0.2),
            0 0 20px rgba(255, 105, 180, 0.12);
    }
    50% {
        border-color: #ff1493;
        box-shadow:
            inset 0 0 45px rgba(255, 20, 147, 0.35),
            0 0 45px rgba(255, 20, 147, 0.25);
    }
}

/* 鏉堣顢嬮幎鏍уЗ閺佸牊鐏夐敍鍫㈡暏閹村嘲鐨剧拠鏇⑩偓鈧崙鐑樻锟?*/
.screen-lock-border.shake {
    animation: screenLockShake 0.5s ease-in-out, screenLockPulse 2.5s ease-in-out infinite;
}
@keyframes screenLockShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, 0); }
    30% { transform: translate(4px, 0); }
    50% { transform: translate(-3px, 0); }
    70% { transform: translate(3px, 0); }
    90% { transform: translate(-2px, 0); }
}

/* 闁夸礁鐫嗛幓鎰仛閺傚洤锟?*/
.screen-lock-text {
    position: absolute;
    /* 闁灝绱戦悩鑸碘偓浣圭埉/閻忛潧濮╁畝娑樻嫲閼卞﹤銇夌€佃壈鍩呴弽蹇ョ礉閺€鍓х枂閸︺劌顕遍懜顏呯埉娑撳鏌熼悾娆忓毉闂傜锟?*/
    top: calc(max(env(safe-area-inset-top, 0px), 12px) + 60px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.92), rgba(255, 20, 147, 0.92));
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(255, 105, 180, 0.45);
    animation: screenLockTextGlow 3s ease-in-out infinite;
    pointer-events: auto;
    letter-spacing: 0.5px;
    z-index: 1;
}

@keyframes screenLockTextGlow {
    0%, 100% {
        box-shadow: 0 4px 18px rgba(255, 105, 180, 0.4);
    }
    50% {
        box-shadow: 0 4px 25px rgba(255, 20, 147, 0.6);
    }
}

/* ================= 棣冩晙 闂囩鐫嗛柨浣哥潌閺嶅嘲锟?END =================  */

/* ================= 棣冨癄 妫ｆ牠銆夊瀛樺皾缁惧湱澹掗弫鍫熺壉锟?v2 ================= */

/* WebGL 濮樺瓨灏濈痪鍦暰锟?- 鐟曞棛娲婇弫缈犻嚋妫ｆ牠銆夐敍灞捐閺屾挻濮岀亸鍕倵閻ㄥ嫯鍎楅弲?*/
#water-fx-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* 绾喕绻氭＃鏍€夐崘鍛啇閸︺劍鎸夊▔銏㈡暰鐢啩绠ｆ稉?*/
#home-layer .home-swiper {
    position: relative;
    z-index: 2;
}

#home-layer .home-page-dots {
    z-index: 3;
}

/* ================= 棣冨癄 妫ｆ牠銆夊瀛樺皾缁惧湱澹掗弫鍫熺壉锟?END ================= */

/* ================= 锟?妫ｆ牠銆夐悧瑙勬櫏缁崵锟?(Particles & Switches) ================= */
/* 妫ｆ牠銆夐悧瑙勬櫏缁帒鐡欑€圭懓锟?*/
.home-effect-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    z-index: 1; /* 閻╂牕锟?canvas 娑撳绱濇担鍡楁躬閸忔湹锟?UI 锟?*/
}

.effect-particle {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

/* 棣冨皭锟?娑撳锟?*/
.snow-particle {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    filter: blur(1px);
    animation: snowFall linear infinite;
}
@keyframes snowFall {
    0% { transform: translateY(-20px) translateX(0); opacity: 0; }
    10% { opacity: 0.8; transform: translateY(10vh) translateX(10px); }
    50% { transform: translateY(50vh) translateX(-15px); opacity: 0.8; }
    90% { opacity: 0.4; }
    100% { transform: translateY(100vh) translateX(20px); opacity: 0; }
}

/* 棣冨碍 濡精锟?*/
.sakura-particle {
    width: 12px;
    height: 12px;
    background: #ffb7c5;
    border-radius: 12px 1px;
    opacity: 0.9;
    animation: sakuraFall linear infinite;
}
@keyframes sakuraFall {
    0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; transform: translateY(10vh) translateX(15px) rotate(45deg); }
    40% { transform: translateY(40vh) translateX(-25px) rotate(90deg); }
    70% { transform: translateY(70vh) translateX(20px) rotate(180deg); opacity: 0.9; }
    100% { transform: translateY(100vh) translateX(-15px) rotate(360deg); opacity: 0; }
}

/* 棣冨磪 閽€钘夊骄 */
.leaf-particle {
    width: 16px;
    height: 10px;
    background: linear-gradient(to right, #f59e0b, #eab308);
    border-radius: 2px 20px 2px 20px;
    opacity: 0.9;
    animation: leafFall linear infinite;
    transform-origin: center;
}
@keyframes leafFall {
    0% { transform: translateY(-20px) translateX(0) rotate(0deg) rotateX(0deg); opacity: 0; }
    15% { opacity: 1; transform: translateY(15vh) translateX(25px) rotate(45deg) rotateX(45deg); }
    45% { transform: translateY(45vh) translateX(-20px) rotate(120deg) rotateX(180deg); }
    75% { transform: translateY(75vh) translateX(15px) rotate(240deg) rotateX(90deg); }
    100% { transform: translateY(100vh) translateX(-10px) rotate(360deg) rotateX(0deg); opacity: 0; }
}

/* 閴傘倧锟?閻栧崬锟?*/
.heart-particle {
    width: 12px;
    height: 12px;
    background: #ff6b9d;
    transform: rotate(-45deg);
    animation: heartFloat linear infinite;
}
.heart-particle::before,
.heart-particle::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ff6b9d;
    border-radius: 50%;
}
.heart-particle::before { top: -6px; left: 0; }
.heart-particle::after { top: 0; left: 6px; }
@keyframes heartFloat {
    0% { transform: translateY(100vh) translateX(0) rotate(-45deg) scale(0.5); opacity: 0; }
    10% { opacity: 0.9; }
    50% { transform: translateY(50vh) translateX(20px) rotate(-45deg) scale(0.8); }
    90% { opacity: 0.9; }
    100% { transform: translateY(-20px) translateX(-10px) rotate(-45deg) scale(1); opacity: 0; }
}

/* 棣冨皫锟?娑撳锟?*/
.rain-particle {
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, transparent, rgba(174, 194, 224, 0.8));
    border-radius: 0 0 2px 2px;
    animation: rainFall linear infinite;
}
@keyframes rainFall {
    0% { transform: translateY(-20px); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* 鐠佸墽鐤嗛棃銏㈠ - 閻楄鏅ラ柅澶愩€嶇純鎴炵壐 */
.effect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.effect-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border: 2px solid var(--theme-card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-card-bg);
}

.effect-option:has(input:checked) {
    border-color: var(--theme-primary);
    background: rgba(255, 107, 129, 0.1);
}

.effect-option input {
    display: none;
}

.effect-label {
    font-size: 13px;
    color: var(--theme-sub-text);
    white-space: nowrap;
}

.effect-option:has(input:checked) .effect-label {
    color: var(--theme-primary);
    font-weight: 600;
}
/* ================= 锟?妫ｆ牠銆夐悧瑙勬櫏缁崵锟?END ================= */

/* ================= 棣冨箒 濞村鐨禒顏呭亾濞搭噣娼伴弶?================= */

/* 閺堚偓鐏忓繐瀵查崶鐐垼閹稿锟?*/
.ld-mini-btn {
    position: absolute;
    top: calc(70px + env(safe-area-inset-top));
    right: 12px;
    z-index: 1001;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(255, 180, 200, 0.25);
    box-shadow: 0 2px 8px rgba(255, 107, 129, 0.08);
    cursor: pointer;
    transition: all 0.25s ease;
    animation: ldMiniIn 0.3s ease-out;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    line-height: 1;
}

.ld-mini-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.55);
}

@keyframes ldMiniIn {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

#lie-detector-float {
    position: absolute;
    top: calc(70px + env(safe-area-inset-top));
    right: 15px;
    z-index: 1001;
    width: fit-content;
    min-width: 160px;
    max-width: 220px;
    padding: 8px 14px 6px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    border: 1.5px solid rgba(255, 180, 200, 0.35);
    box-shadow: 0 4px 20px rgba(255, 107, 129, 0.1),
                0 1px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    animation: ldSlideIn 0.35s ease-out;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

@keyframes ldSlideIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ld-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ld-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.ld-data {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.ld-label {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
}

.ld-value {
    font-size: 13px;
    font-weight: 700;
    color: #e84393;
    font-family: 'SF Mono', 'Menlo', monospace;
    transition: transform 0.3s ease;
}

/* 鏉╂稑瀹抽弶?*/
.ld-progress-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.ld-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #fdcb6e, #e17055, #d63031);
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.ld-progress-fill.warning {
    background: linear-gradient(90deg, #e17055, #d63031);
}

.ld-progress-fill.danger {
    background: linear-gradient(90deg, #d63031, #c0392b);
    animation: ldDangerPulse 1.2s ease-in-out infinite;
}

@keyframes ldDangerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 閺佹澘鈧吋娲块弬鎷屽墻閸愭彃濮╅悽?*/
.ld-pulse .ld-value {
    animation: ldValuePulse 0.5s ease;
}

@keyframes ldValuePulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* 閹晝缍掑鍦崶 锟?閹晝缍掗柅澶愩€嶉幐澶愭尦 */
.lie-punishment-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255,107,129,0.06) 0%, rgba(253,83,146,0.06) 100%);
    border: 2px solid rgba(255,107,129,0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.lie-punishment-option:active {
    transform: scale(0.97);
}

.lie-punishment-option.selected {
    border-color: #e84393;
    background: linear-gradient(135deg, rgba(255,107,129,0.15) 0%, rgba(253,83,146,0.15) 100%);
    box-shadow: 0 4px 15px rgba(232, 67, 147, 0.2);
}

.lie-punishment-option .lp-emoji {
    font-size: 24px;
    flex-shrink: 0;
}

.lie-punishment-option .lp-text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    flex: 1;
}

.lie-punishment-option .lp-text strong {
    display: block;
    font-size: 14px;
    color: #222;
    margin-bottom: 2px;
}

/* 閼奉亜鐣炬稊澶嬪劦缂冩岸銆嶉惃鍕灩闂勩倖瀵滈柦?*/
.lie-punishment-option .lp-delete {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.lie-punishment-option .lp-delete:active {
    opacity: 1;
}

/* ================= 棣冨箒 濞村鐨禒?END ================= */

/* ================= 棣冩嫲 鐟欐帟澹婃稉璇插З閸欐垶绉烽幁?- 妞ゅ爼鍎撮柅姘辩叀瀵湱锟?================= */
.proactive-toast {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: calc(100% - 20px);
    max-width: 400px;
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.04),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.6);
    cursor: pointer;
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.proactive-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.proactive-toast.hiding {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.proactive-toast:active {
    transform: translateX(-50%) translateY(0) scale(0.98);
}

.proactive-toast-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f0f0f0;
}

.proactive-toast-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.proactive-toast-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proactive-toast-text {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.proactive-toast-time {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

/* safe-area闁倿锟?(閸掓ɑ鎹ｇ仦? */
@supports (padding-top: env(safe-area-inset-top)) {
    .proactive-toast {
        margin-top: calc(10px + env(safe-area-inset-top));
    }
}

/* ================= 棣冩嫲 鐟欐帟澹婃稉璇插З閸欐垶绉烽幁?END ================= */

/* 鐏忓繒瀛╅悙瑙勭壉瀵骏绱欓悽銊ょ艾閺堫亣顕板☉鍫熶紖锟?*/
.unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background-color: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(239,68,68,0.3);
    z-index: 10;
}


/* ==================== 馃尭 娴敓缁樻ⅵ (Reverie) ==================== */

/* 鍏ㄥ睆鑳屾櫙灞?*/
/* ==================== 🎨 浮生绘梦主题变量（可被"我的美化"覆盖） ==================== */
/* 作用域：仅浮生绘梦相关页面，不影响美化工坊和其他页面 */
#reverie-layer,
#reverie-detail-layer,
#reverie-dream-layer,
#reverie-char-settings-layer,
#reverie-preset-layer,
#reverie-preset-edit-layer,
#reverie-user-identity-layer {
    /* 背景 */
    --reverie-bg-image: url('xianxia/01.jpg');
    --reverie-detail-bg-image: url('xianxia/13.jpg');
    --reverie-dream-bg-image: url('xianxia/22.jpg');

    /* 图片按钮（一级页面） */
    --reverie-img-title: url('xianxia/02.png');
    --reverie-img-preset-btn: url('xianxia/04.png');
    --reverie-img-theme-btn: url('xianxia/03.png');
    --reverie-img-card-border: url('xianxia/05.png');
    --reverie-img-import-btn: url('xianxia/06.png');
    --reverie-img-user-identity-btn: url('xianxia/25.png');
    --reverie-img-char-create-btn: url('xianxia/24.png');

    /* 图片按钮（二级页面） */
    --reverie-img-detail-frame: url('xianxia/07.png');
    --reverie-img-detail-settings: url('xianxia/08.png');
    --reverie-img-detail-dreams-frame: url('xianxia/09.png');
    --reverie-img-detail-new-dream: url('xianxia/10.png');
    --reverie-img-detail-preset: url('xianxia/11.png');
    --reverie-img-detail-worldbook: url('xianxia/12.png');

    /* 图片按钮（三级页面） */
    --reverie-img-dream-settings: url('xianxia/14.png');
    --reverie-img-dream-send: url('xianxia/20.png');
    --reverie-img-dream-func: url('xianxia/21.png');
    --reverie-img-dream-cover: url('xianxia/23.jpg');

    /* 三宫格气泡图片 */
    --reverie-img-bubble-top: url('xianxia/18S.png');
    --reverie-img-bubble-mid: url('xianxia/18Z.png');
    --reverie-img-bubble-bottom: url('xianxia/18X.png');
    --reverie-img-bubble-signet: url('xianxia/17.png');
    --reverie-img-dialogue-icon: url('xianxia/16.png');

    /* 主色调 */
    --reverie-accent: #f5a0b8;
    --reverie-accent-deep: #e87aaa;
    --reverie-accent-light: #ffdee9;

    /* 文字 */
    --reverie-text-primary: #59474a;
    --reverie-text-sub: #c9a0b0;
    --reverie-text-placeholder: #d4b0c0;

    /* 通用页面（二级设置/演绎设定等） */
    --reverie-page-bg: #fff5f8;
    --reverie-card-bg: #ffffff;
    --reverie-card-border: #ffdee9;
    --reverie-input-bg: #fffafa;
    --reverie-input-border: #ffdee9;
    --reverie-input-focus-border: #f5a0b8;
    --reverie-divider: #ffeef3;
    --reverie-btn-save-gradient: linear-gradient(90deg, #fd5392, #ff6b81);
    --reverie-btn-save-text: #ffffff;
    --reverie-btn-save-shadow: 0 4px 12px rgba(253, 83, 146, 0.3);

    /* 角色卡名标签 */
    --reverie-card-name-text: #e87aaa;
    --reverie-card-name-bg: linear-gradient(180deg, rgba(255,225,238,0.88) 0%, rgba(255,200,218,0.72) 40%, rgba(255,185,208,0.60) 100%);
    --reverie-card-name-border: rgba(255, 210, 225, 0.65);

    /* 梦境卡片（二级页） */
    --reverie-dream-card-bg: linear-gradient(160deg, rgba(255,240,248,0.6) 0%, rgba(245,220,235,0.45) 50%, rgba(255,235,245,0.55) 100%);
    --reverie-dream-card-border: #ffbbc7;
    --reverie-dream-title-text: #ffffff;

    /* 长文气泡（三级页） */
    --reverie-bubble-body-text: #aa5569;
    --reverie-dialogue-bg: #ffe0e0;
    --reverie-dialogue-text: #cd5e78;

    /* 气泡底部操作按钮（✎ 编辑 / ➥ 回溯 / ✖ 删除） */
    --reverie-bubble-act-bg: rgba(255, 250, 252, 0.85);
    --reverie-bubble-act-border: rgba(255, 182, 204, 0.55);
    --reverie-bubble-act-text: #c87a94;
    --reverie-bubble-act-hover-bg: #ffe4ec;
    --reverie-bubble-act-hover-text: #a85573;
    --reverie-bubble-act-active-bg: linear-gradient(135deg, #ffd6e3, #f5a0b8);
    --reverie-bubble-act-active-text: #ffffff;
    --reverie-bubble-act-danger-text: #e27a8e;
    --reverie-bubble-act-danger-hover-bg: #ffd9e1;
    --reverie-bubble-act-danger-hover-text: #d24867;
    --reverie-bubble-act-danger-active-bg: linear-gradient(135deg, #ff9db2, #e05c7d);
    --reverie-bubble-act-danger-active-text: #ffffff;

    /* 输入栏（三级页底部） */
    --reverie-input-bar-bg: rgba(254, 235, 240, 0.8);
    --reverie-input-bar-border: #f4d4dd;
    --reverie-dream-input-field-bg: #ffffff;
    --reverie-dream-input-field-border: #f4d4dd;
    --reverie-dream-input-field-text: #59474a;
    --reverie-dream-input-field-placeholder: #d4b8c2;

    /* 危险/归档按钮 */
    --reverie-danger-gradient: linear-gradient(135deg, #ff7979, #eb4d4b);
    --reverie-archive-gradient: linear-gradient(135deg, #8b5cf6, #6d5fbd);
}

/* ============================================================
 * 🌸 浮生绘梦 - 全局兜底背景层
 * 解决页面切换瞬间 .reverie-bg 消失时通用背景闪出来的问题。
 * 只有当 <body> 带 .in-reverie 类时显示。
 * z-index 比 #bg-layer(-999) 高、比 .reverie-bg(0) 低。
 * ============================================================ */
#reverie-global-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -500;
    pointer-events: none;
    background-color: #ffeef3;
    background-image: url('xianxia/01.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}

body.in-reverie #reverie-global-bg {
    display: block;
}

.reverie-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 先放一层粉色兜底，图片没加载完时不会白闪 */
    background-color: #ffeef3;
    background-image: var(--reverie-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* 可滚动内容容器 */
.reverie-container {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    padding: 0 12px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

/* 椤堕儴鍖哄煙 - 璐撮《閮紝瀹夊崜鐩存帴椤朵笂鍘伙紝iOS鑷姩safe-area */
.reverie-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 2px;
    padding-top: env(safe-area-inset-top, 0px);
    margin-bottom: 15px;
    position: relative;
    min-height: 100px;
}

/* 椤堕儴鎸夐挳锛氬乏鍙充袱渚ф寕浠?- 璐撮《 */
.reverie-header-btn {
    width: 70px;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    margin-top: 0;
}

.reverie-header-btn:active {
    transform: scale(0.92);
}

/* 涓棿鏍囬鍥?*/
.reverie-header-title {
    flex: 1;
    max-width: 60%;
    height: auto;
    object-fit: contain;
    margin: 50px auto 0;
}

/* 角色卡片网格 - 3列，显示2行区域，超出可滚动 */
/* 
   精确适配公式（所有屏幕尺寸自动校准）:
   每列宽 = (100vw - 容器padding 24px - gap*2) / 3
   每卡高 = 每列宽 × 460/316（aspect-ratio）
   名称区域 = 26px × 2行 = 52px
   行间距 = 14px（gap 加宽）
   padding-bottom = 10px
   
   两行总高 = 每卡高 × 2 + 52 + 14 + 10
           = (100vw - 24px - 28px) / 3 × 460/316 × 2 + 76
           = (100vw - 52px) × 920/948 + 76
   
   实测360px下用+80刚好 → 统一+80
   320→340 | 360→379 | 375→393 | 390→408 | 414→431 | 430→447
*/
.reverie-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 2px;
    padding-bottom: 10px;
    margin-top: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc((100vw - 52px) * 920 / 948 + 80px);
    flex-shrink: 0;
}

.reverie-card-grid::-webkit-scrollbar {
    display: none;
}

/* 鍗曚釜瑙掕壊鍗＄墖瀹瑰櫒 */
.reverie-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s;
}

.reverie-card:active {
    transform: scale(0.96);
}

/* 鍗＄墖鍥剧墖鍖哄煙 - 妗?澶村儚鍙犲姞 */
.reverie-card-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 316 / 460;
}

/* 瑙掕壊澶村儚 - 閾哄湪妗嗗悗闈?*/
.reverie-card-avatar {
    position: absolute;
    top: 8%;
    left: 12%;
    width: 80%;
    height: 85%;
    object-fit: cover;
    border-radius: 10px;
    z-index: 1;
}

/* 杈规PNG - 鍙犲湪澶村儚涓婇潰 */
.reverie-card-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

/* 瑙掕壊鍚嶆爣绛?- 娴呯矇鑹叉按鏅舵灉鍐绘寜閽?*/
.reverie-card-name {
    margin-top: 6px;
    padding: 3px 22px;
    min-width: 70%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: var(--reverie-card-name-text, #e87aaa);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    background: var(--reverie-card-name-bg, linear-gradient(180deg,
        rgba(255, 225, 238, 0.88) 0%,
        rgba(255, 200, 218, 0.72) 40%,
        rgba(255, 185, 208, 0.60) 100%));
    border: 1.5px solid var(--reverie-card-name-border, rgba(255, 210, 225, 0.65));
    border-radius: 20px;
    box-shadow:
        0 2px 8px rgba(255, 170, 200, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.95),
        inset 0 -1px 3px rgba(255, 160, 190, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: relative;
    z-index: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
}

/* 鏋滃喕鍏夋辰鏁堟灉 */
.reverie-card-name::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 15%;
    right: 15%;
    height: 40%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0) 100%);
    border-radius: 20px 20px 50% 50%;
    pointer-events: none;
}

/* 绌虹姸鎬?- 鍙繚鐣欐枃瀛?*/
.reverie-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
}

.reverie-empty-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(180, 100, 130, 0.4);
    line-height: 1.8;
}

/* 搴曢儴瀵煎叆鎸夐挳 - 鍥哄畾鍦ㄥ簳閮?*/
.reverie-import-bar {
    position: fixed;
    bottom: 3px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.reverie-import-btn {
    width: 70px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.reverie-import-btn:active {
    transform: scale(0.92);
}

/* ---- 🌸 浮生绘梦 - 一级页面 3 按钮底部栏 (USER身份 / 导入 / 新建) ---- */
.reverie-import-bar-3btn {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
}

.reverie-import-side-btn {
    width: 50px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 5px;
}

.reverie-import-side-btn:active {
    transform: scale(0.90);
}

/* ---- 鑱旂郴浜哄鍏ュ脊绐?(閲嶆柊璁捐) ---- */
.reverie-modal-card {
    width: 88%;
    max-width: 360px;
    max-height: 72vh;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(200, 100, 140, 0.2);
    display: flex;
    flex-direction: column;
}

.reverie-modal-header {
    position: relative;
    text-align: center;
    padding: 22px 20px 16px;
    background: linear-gradient(180deg, #fff5f8 0%, #ffffff 100%);
    border-bottom: 1px solid #ffeef3;
}

.reverie-modal-header-deco {
    font-size: 28px;
    margin-bottom: 6px;
}

.reverie-modal-title {
    font-size: 18px;
    font-weight: bold;
    color: #59474a;
}

.reverie-modal-subtitle {
    font-size: 12px;
    color: #c9a0b0;
    margin-top: 4px;
}

.reverie-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ccc;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.reverie-modal-close:active {
    background: #ffeef3;
    color: #e87aaa;
}

.reverie-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 16px;
}

/* 寮圭獥鍐呯殑鑱旂郴浜哄垪琛ㄩ」 */
.reverie-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 4px;
    border: 1.5px solid transparent;
}

.reverie-contact-item:active {
    background: #fff5f8;
    border-color: #ffdee9;
}

.reverie-contact-item.is-added {
    opacity: 0.4;
    cursor: not-allowed;
}

.reverie-contact-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid #ffdee9;
    flex-shrink: 0;
}

.reverie-contact-info {
    flex: 1;
    min-width: 0;
}

.reverie-contact-name {
    font-size: 15px;
    font-weight: bold;
    color: #59474a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reverie-contact-added-badge {
    font-size: 11px;
    color: #f5a0b8;
    font-weight: bold;
    flex-shrink: 0;
    padding: 3px 10px;
    background: #fff0f5;
    border-radius: 12px;
}

/* ==================== reverie-level1 END ==================== */

/* ==================== reverie-detail (level2) ==================== */

.reverie-detail-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* 先放一层粉色兜底，图片没加载完时不会白闪 */
    background-color: #ffeef3;
    background-image: var(--reverie-detail-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.reverie-detail-container {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    padding: 0 10px;
    padding-bottom: 75px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.reverie-detail-back {
    display: none;
}

.reverie-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: env(safe-area-inset-top, 0px);
    min-height: 180px;
}

.reverie-detail-settings-btn {
    width: 72px;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s;
    margin-top: 0;
    margin-left: 90px;
}

.reverie-detail-settings-btn:active {
    transform: scale(0.92);
}

.reverie-detail-portrait {
    position: relative;
    width: 52%;
    max-width: 240px;
    margin-right: 4px;
    margin-top: 6px;
    transform: rotate(10deg);
    transform-origin: center center;
}

.reverie-detail-avatar {
    position: absolute;
    top: 15%;
    left: 12%;
    width: 76%;
    height: 68%;
    object-fit: cover;
    border-radius: 8px;
    z-index: 1;
}

.reverie-detail-frame {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

.reverie-detail-dreams-section {
    position: relative;
    width: 100%;
    margin-top: -10px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.reverie-detail-dreams-frame-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    object-fit: fill;
}

.reverie-detail-dreams-grid {
    position: absolute;
    top: 7%;
    left: 7%;
    right: 7%;
    bottom: 8%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    gap: 16px 10px;
    padding: 6px;
    overflow-y: auto;
    align-content: start;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}

.reverie-detail-dreams-grid::-webkit-scrollbar {
    display: none;
}

.reverie-dream-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: var(--reverie-dream-card-bg, linear-gradient(160deg,
        rgba(255, 240, 248, 0.6) 0%,
        rgba(245, 220, 235, 0.45) 50%,
        rgba(255, 235, 245, 0.55) 100%));
    box-shadow:
        0 2px 12px rgba(200, 120, 160, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.reverie-dream-card:active {
    transform: scale(0.95);
    box-shadow:
        0 1px 6px rgba(200, 120, 160, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.reverie-dream-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.08) 60%,
        transparent 100%);
    border-radius: 16px 16px 50% 50%;
    z-index: 3;
    pointer-events: none;
}

.reverie-dream-cover {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: 15px;
}

.reverie-dream-card-overlay {
    display: none;
}

.reverie-dream-title {
    position: absolute;
    bottom: 8px;
    left: 6px;
    right: 6px;
    font-size: 11px;
    font-weight: bold;
    color: var(--reverie-dream-title-text, #fff);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    z-index: 4;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reverie-dreams-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    color: rgba(180, 120, 150, 0.7);
    font-size: 13px;
    text-align: center;
    line-height: 1.8;
}

.reverie-dreams-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
    opacity: 0.6;
}

.reverie-detail-bottom-bar {
    position: fixed;
    bottom: 3px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 50px;
    z-index: 5;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.reverie-detail-btn-img {
    width: 50px;
    height: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s;
    filter: none;
    margin-bottom: 3px;
}

.reverie-detail-btn-img:active {
    transform: scale(0.90);
}

.reverie-detail-btn-center {
    width: 70px;
    margin-bottom: 0;
}

/* ---- reverie-char-settings page ---- */

.rcs-page-container {
    background: var(--reverie-page-bg, #fff5f8);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rcs-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--reverie-page-bg, #fff5f8);
    flex-shrink: 0;
}

.rcs-back-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--reverie-accent-deep, #e87aaa);
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
    user-select: none;
    line-height: 1;
}

.rcs-back-btn:active {
    background: #ffeef3;
}

.rcs-nav-title {
    color: var(--reverie-text-primary, #59474a);
    margin: 0;
    font-size: 18px;
}

.rcs-content-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 10px;
}

.rcs-content-area::-webkit-scrollbar {
    display: none;
}

.rcs-avatar-section {
    display: flex;
    justify-content: center;
    padding: 16px 0 10px;
}

.rcs-avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid var(--reverie-accent-light, #ffdee9);
    box-shadow: 0 4px 12px rgba(200, 120, 160, 0.2);
}

.rcs-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rcs-avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 11px;
    text-align: center;
    padding: 3px 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.rcs-avatar-wrapper:active .rcs-avatar-overlay {
    opacity: 1;
}

.rcs-card {
    background: var(--reverie-card-bg, #fff);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1.5px solid var(--reverie-card-border, #ffdee9);
}

.rcs-card-label {
    font-size: 13px;
    font-weight: bold;
    color: var(--reverie-text-primary, #59474a);
    margin-bottom: 8px;
}

.rcs-name-display {
    font-size: 16px;
    font-weight: bold;
    color: var(--reverie-text-primary, #59474a);
    padding: 8px 14px;
    background: var(--reverie-page-bg, #fff5f8);
    border-radius: 12px;
    border: 2px solid var(--reverie-card-border, #ffdee9);
    text-align: center;
}

.rcs-name-hint {
    font-size: 11px;
    color: var(--reverie-text-sub, #c9a0b0);
    margin-top: 5px;
    text-align: center;
}

.rcs-input {
    width: 100%;
    padding: 9px 14px;
    border: 2px solid var(--reverie-input-border, #ffdee9);
    border-radius: 14px;
    font-size: 14px;
    color: var(--reverie-text-primary, #59474a);
    background: var(--reverie-input-bg, #fffafa);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-family: inherit;
}

.rcs-input:focus {
    border-color: var(--reverie-input-focus-border, #f5a0b8);
}

.rcs-input::placeholder {
    color: var(--reverie-text-placeholder, #d4b0c0);
}

.rcs-select {
    width: 100%;
    padding: 9px 14px;
    border: 2px solid var(--reverie-input-border, #ffdee9);
    border-radius: 14px;
    font-size: 14px;
    color: var(--reverie-text-primary, #59474a);
    background: var(--reverie-input-bg, #fffafa);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c9a0b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.rcs-select:focus {
    border-color: var(--reverie-input-focus-border, #f5a0b8);
}

.rcs-textarea {
    width: 100%;
    padding: 9px 14px;
    border: 2px solid var(--reverie-input-border, #ffdee9);
    border-radius: 14px;
    font-size: 14px;
    color: var(--reverie-text-primary, #59474a);
    background: var(--reverie-input-bg, #fffafa);
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s;
    min-height: 100px;
    margin-bottom: 16px;
}

.rcs-textarea:focus {
    border-color: var(--reverie-input-focus-border, #f5a0b8);
}

.rcs-textarea::placeholder {
    color: var(--reverie-text-placeholder, #d4b0c0);
}

.rcs-fullscreen-btn {
    position: static;
    margin-top: -15px;
    float: right;
    padding: 4px 10px;
    border: none;
    border-radius: 8px;
    background: #fff5f8;
    color: #e87aaa;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.rcs-fullscreen-btn:active {
    background: #ffeef3;
}

.rcs-delete-card {
    background: #fff;
    border-color: #ffcdd2;
    margin-top: 12px;
}

.rcs-delete-hint {
    font-size: 11px;
    color: #c9a0b0;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.5;
}

.rcs-btn-delete {
    width: 100%;
    padding: 10px;
    border: 2px solid #ffcdd2;
    border-radius: 25px;
    background: #fff;
    color: #e57373;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, opacity 0.2s;
}

.rcs-btn-delete:active {
    background: #fff5f5;
    opacity: 0.8;
}

.rcs-bottom-bar {
    flex-shrink: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--reverie-page-bg, #fff5f8);
    border-top: 1px solid var(--reverie-accent-light, #ffdee9);
}

.rcs-btn-save {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background: var(--reverie-btn-save-gradient, linear-gradient(90deg, #fd5392, #ff6b81));
    color: var(--reverie-btn-save-text, #fff);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: var(--reverie-btn-save-shadow, 0 4px 12px rgba(253, 83, 146, 0.3));
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.rcs-btn-save:active {
    opacity: 0.8;
}

/* ---- new-dream modal ---- */

.new-dream-form-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.new-dream-field {
    margin-bottom: 16px;
}

.new-dream-label {
    font-size: 14px;
    font-weight: bold;
    color: #59474a;
    margin-bottom: 7px;
}

.new-dream-optional {
    font-weight: normal;
    font-size: 12px;
    color: #c9a0b0;
}

.new-dream-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #ffdee9;
    border-radius: 14px;
    font-size: 14px;
    color: #59474a;
    background: #fffafa;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.new-dream-input:focus {
    border-color: #f5a0b8;
}

.new-dream-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #ffdee9;
    border-radius: 14px;
    font-size: 14px;
    color: #59474a;
    background: #fffafa;
    outline: none;
    box-sizing: border-box;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s;
}

.new-dream-textarea:focus {
    border-color: #f5a0b8;
}

.new-dream-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.8), rgba(255, 230, 238, 0.6));
    border-radius: 14px;
    border: 1.5px solid rgba(255, 220, 233, 0.5);
}

.new-dream-checkbox-info {
    flex: 1;
    min-width: 0;
}

.new-dream-checkbox-label {
    font-size: 14px;
    font-weight: 600;
    color: #59474a;
    margin-bottom: 2px;
}

.new-dream-checkbox-hint {
    font-size: 11px;
    color: #c9a0b0;
    line-height: 1.4;
}

.new-dream-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.new-dream-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.new-dream-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ddd;
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.3s;
}

.new-dream-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.3s;
}

.new-dream-toggle input:checked + .new-dream-toggle-slider {
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
}

.new-dream-toggle input:checked + .new-dream-toggle-slider::before {
    transform: translateX(20px);
}

.new-dream-cover-upload {
    width: 100%;
    height: 120px;
    border: 2px dashed #ffdee9;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255, 250, 252, 0.6);
    overflow: hidden;
    position: relative;
}

.new-dream-cover-upload:active {
    border-color: #f5a0b8;
    background: rgba(255, 240, 245, 0.8);
}

.new-dream-cover-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #e0b0c0;
}

.new-dream-cover-preview {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.new-dream-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #ffeef3;
}

.new-dream-btn-cancel {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 25px;
    background: #ffcdd2;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.new-dream-btn-cancel:active {
    opacity: 0.7;
}

.new-dream-btn-confirm {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(90deg, #fd5392, #ff6b81);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(253, 83, 146, 0.3);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.new-dream-btn-confirm:active {
    opacity: 0.8;
}

/* ==================== 生成记忆等待动效 ==================== */

.dream-context-loading-anim {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.dream-context-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fd5392, #ff6b81);
    animation: dreamContextBounce 1.4s infinite ease-in-out both;
    box-shadow: 0 2px 6px rgba(255, 107, 129, 0.3);
}

.dream-context-dot:nth-child(1) { animation-delay: 0s; }
.dream-context-dot:nth-child(2) { animation-delay: 0.2s; }
.dream-context-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dreamContextBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ==================== 演绎配置弹窗 ==================== */

.rps-form-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* 当前绑定行 */
.rps-current-row {
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.9), rgba(255, 225, 238, 0.7));
    border: 1.5px solid rgba(255, 200, 220, 0.5);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rps-current-label {
    font-size: 13px;
    color: #c08090;
    font-weight: 600;
    flex-shrink: 0;
}

.rps-current-name {
    flex: 1;
    font-size: 15px;
    font-weight: bold;
    color: #59474a;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rps-unbind-btn {
    font-size: 12px;
    color: #e08090;
    padding: 4px 12px;
    border: 1px solid #f0c0c8;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.rps-unbind-btn:active {
    background: #fff0f3;
    color: #d05060;
}

/* 预设列表 */
.rps-list-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rps-list-loading,
.rps-list-empty {
    text-align: center;
    padding: 32px 0;
    color: #c9a0b0;
    font-size: 14px;
}

.rps-preset-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 250, 252, 0.9), rgba(255, 242, 248, 0.7));
    border: 1.5px solid rgba(255, 220, 233, 0.6);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.rps-preset-item:active {
    background: linear-gradient(135deg, rgba(255, 235, 242, 0.9), rgba(255, 220, 235, 0.8));
    border-color: #f5a0b8;
    transform: scale(0.98);
}

.rps-preset-item.active {
    border-color: #f5a0b8;
    background: linear-gradient(135deg, #fff0f5, #ffe4ed);
    box-shadow: 0 2px 8px rgba(245, 160, 184, 0.25);
}

.rps-preset-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.rps-preset-item.active .rps-preset-radio {
    border-color: #f5a0b8;
    background: #f5a0b8;
}

.rps-preset-item.active .rps-preset-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.rps-preset-info {
    flex: 1;
    min-width: 0;
}

.rps-preset-name {
    font-size: 15px;
    font-weight: 600;
    color: #59474a;
    margin-bottom: 2px;
}

.rps-preset-meta {
    font-size: 11px;
    color: #c9a0b0;
}

.rps-preset-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    color: white;
    margin-left: 4px;
}

/* ==================== 世界书选择弹窗 ==================== */

.rws-form-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.rws-count-row {
    text-align: center;
    font-size: 13px;
    color: #c08090;
    padding: 10px 0;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.7), rgba(255, 230, 238, 0.5));
    border-radius: 12px;
    flex-shrink: 0;
}

.rws-count-row span {
    font-weight: bold;
    color: #e87aaa;
}

.rws-list-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.rws-list-loading,
.rws-list-empty {
    text-align: center;
    padding: 32px 0;
    color: #c9a0b0;
    font-size: 14px;
}

/* 分组标题行 */
.rws-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 6px;
    margin-bottom: 4px;
    background: linear-gradient(135deg, rgba(255, 242, 248, 0.8), rgba(255, 235, 242, 0.6));
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.rws-group-header:active {
    background: rgba(255, 225, 235, 0.9);
}

.rws-group-header.ungrouped {
    background: rgba(248, 248, 248, 0.8);
}

.rws-group-arrow {
    font-size: 10px;
    color: #b08090;
    transition: transform 0.2s;
    width: 14px;
    text-align: center;
}

.rws-group-arrow.collapsed {
    transform: rotate(-90deg);
}

.rws-group-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #59474a;
}

.rws-group-count {
    font-size: 11px;
    color: #c9a0b0;
}

.rws-group-select-all {
    font-size: 12px;
    color: #e87aaa;
    padding: 2px 10px;
    border: 1px solid #f5c0d0;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    margin-left: auto;
}

.rws-group-select-all:active {
    background: #fff0f5;
    color: #d05060;
}

/* 单个条目行 */
.rws-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 26px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.rws-item:active {
    background: rgba(255, 242, 248, 0.6);
}

.rws-item.hidden {
    display: none;
}

.rws-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #f5a0b8;
    flex-shrink: 0;
    cursor: pointer;
}

.rws-item-info {
    flex: 1;
    min-width: 0;
}

.rws-item-key {
    font-size: 14px;
    font-weight: 500;
    color: #59474a;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rws-item-position {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    color: white;
    font-weight: normal;
    flex-shrink: 0;
}

.rws-item-position.pos-before {
    background: #f5a0b8;
}

.rws-item-position.pos-after {
    background: #a0b8d0;
}

.rws-item-content {
    font-size: 12px;
    color: #a08090;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 底部按钮 */
.rws-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ffeef3;
    flex-shrink: 0;
}

.rws-btn-clear {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 25px;
    background: #ffcdd2;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.rws-btn-clear:active {
    opacity: 0.7;
}

.rws-btn-done {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(90deg, #fd5392, #ff6b81);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(253, 83, 146, 0.3);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.rws-btn-done:active {
    opacity: 0.8;
}

/* ==================== reverie-detail END ==================== */

/* ==================== reverie-dream (level3) ==================== */

.reverie-dream-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: var(--reverie-dream-bg-image, url('xianxia/22.jpg'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.reverie-dream-container {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 顶部栏 - 设置按钮右对齐 */
.reverie-dream-top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    flex-shrink: 0;
}

.reverie-dream-settings-btn {
    width: 48px;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s;
}

.reverie-dream-settings-btn:active {
    transform: scale(0.92);
}

/* 长文气泡消息区域 */
.reverie-dream-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 10px 6px;
    min-height: 0;
}

.reverie-dream-messages::-webkit-scrollbar {
    display: none;
}

/* 🌸 楼层 + Token 状态条（消息区和输入栏之间的一行小灰字）*/
.rd-status-bar {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 14px 4px 14px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(150, 120, 130, 0.65);
    font-family: monospace;
    pointer-events: none;
    background: transparent;
}
.rd-status-bar .rd-status-floor,
.rd-status-bar .rd-status-token {
    white-space: nowrap;
}
.rd-status-bar .rd-status-floor:empty,
.rd-status-bar .rd-status-token:empty {
    display: none;
}

/* 底部输入栏 - 参照聊天窗口 .chat-input-bar */
.reverie-dream-input-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--reverie-input-bar-bg, rgba(254, 235, 240, 0.8));
    border: 2px solid var(--reverie-input-bar-border, #f4d4dd);
    border-radius: 0;
    margin: 0;
}

/* 左边按钮 */
.reverie-dream-input-left-btn {
    width: 40px;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 2px;
}

.reverie-dream-input-left-btn:active {
    transform: scale(0.88);
}

/* 输入框包裹层 */
.reverie-dream-input-field-wrap {
    flex: 1;
    min-width: 0;
}

/* 输入框 - textarea支持多行自动变高 */
.reverie-dream-input-field {
    width: 100%;
    padding: 8px 14px;
    border: 2px solid var(--reverie-dream-input-field-border, #f4d4dd);
    border-radius: 18px;
    background: var(--reverie-dream-input-field-bg, #fff);
    font-size: 15px;
    color: var(--reverie-dream-input-field-text, #59474a);
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    resize: none;
    overflow-y: hidden;
    line-height: 1.5;
    word-wrap: break-word;
    min-height: 40px;
    max-height: 120px;
    transition: border-color 0.2s, height 0.1s ease;
}

.reverie-dream-input-field:focus {
    border-color: var(--reverie-input-focus-border, #f5a0b8);
}

.reverie-dream-input-field::placeholder {
    color: var(--reverie-dream-input-field-placeholder, #d4b8c2);
}

/* 输入框内容超出后才显示滚动条（通过JS控制overflow） */
.reverie-dream-input-field.is-scrollable {
    overflow-y: auto;
}

/* WebKit滚动条 */
.reverie-dream-input-field::-webkit-scrollbar {
    width: 4px;
}
.reverie-dream-input-field::-webkit-scrollbar-thumb {
    background: #f4d4dd;
    border-radius: 4px;
}

/* 发送按钮 */
.reverie-dream-input-send-btn {
    width: 50px;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s;
    flex-shrink: 0;
    align-self: center;
    margin-right: 2px;
}

.reverie-dream-input-send-btn:active {
    transform: scale(0.88);
}

/* 🛑 AI 思考中：发送按钮进入"停止"状态，轻微呼吸脉冲提示用户可点停 */
.reverie-dream-input-send-btn.rd-sending {
    animation: rdSendPulse 1.4s ease-in-out infinite;
}

@keyframes rdSendPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(0.94); filter: brightness(1.15); }
}

/* ==================== 梦境消息气泡 (三宫格) ==================== */

/* 消息行 */
.rd-msg-row {
    display: flex;
    margin-bottom: 14px;
    padding: 0 2px;
}

/* 用户消息右对齐 */
.rd-msg-user {
    justify-content: flex-end;
}

/* AI消息左对齐 */
.rd-msg-ai {
    justify-content: flex-start;
}

/* 气泡容器 - 全宽 */
.rd-bubble {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* 气泡底部操作栏：✎ 编辑 / ➥ 回溯 / ✖ 删除 */
.rd-bubble-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    padding: 0 4px;
    justify-content: flex-end;
}

.rd-msg-user .rd-bubble-actions,
.rd-msg-ai .rd-bubble-actions {
    justify-content: flex-end;
}

.rd-bubble-act {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--reverie-bubble-act-border, rgba(255, 182, 204, 0.55));
    background: var(--reverie-bubble-act-bg, rgba(255, 250, 252, 0.85));
    color: var(--reverie-bubble-act-text, #c87a94);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(232, 122, 170, 0.15);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.rd-bubble-act:hover {
    background: var(--reverie-bubble-act-hover-bg, #ffe4ec);
    color: var(--reverie-bubble-act-hover-text, #a85573);
}

.rd-bubble-act:active {
    transform: scale(0.9);
    background: var(--reverie-bubble-act-active-bg, linear-gradient(135deg, #ffd6e3, #f5a0b8));
    color: var(--reverie-bubble-act-active-text, #ffffff);
}

.rd-bubble-act-danger {
    color: var(--reverie-bubble-act-danger-text, #e27a8e);
}

.rd-bubble-act-danger:hover {
    background: var(--reverie-bubble-act-danger-hover-bg, #ffd9e1);
    color: var(--reverie-bubble-act-danger-hover-text, #d24867);
}

.rd-bubble-act-danger:active {
    background: var(--reverie-bubble-act-danger-active-bg, linear-gradient(135deg, #ff9db2, #e05c7d));
    color: var(--reverie-bubble-act-danger-active-text, #ffffff);
}

/* 🌸 ⇩ 让 AI 回复按钮：默认隐藏，只在"最后一条是 USER"的气泡上露出 */
.rd-bubble-act-reply {
    display: none;
}
.rd-msg-row.rd-can-reply .rd-bubble-act-reply {
    display: inline-flex;
}

/* 🎨 ✦ 手动生图按钮：默认隐藏，只在"手动模式"消息容器内的角色气泡才显示 */
.rd-bubble-act-imggen {
    display: none;
    color: var(--reverie-bubble-act-imggen-text, #c97a9d);
}
#reverieDreamMessages.rd-img-mode-manual .rd-msg-ai .rd-bubble-act-imggen {
    display: inline-flex;
}
.rd-bubble-act-imggen:hover {
    background: var(--reverie-bubble-act-imggen-hover-bg, #ffe9f1);
    color: var(--reverie-bubble-act-imggen-hover-text, #a8557a);
}
.rd-bubble-act-imggen.is-busy,
.rd-bubble-act-imggen:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 🌸 伪流式：字符级流式 reveal */
.rd-bubble-body .rd-stream-text {
    white-space: pre-wrap;
    word-break: break-word;
}
.rd-bubble-body .rd-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: currentColor;
    opacity: 0.55;
    animation: rdCaretBlink 1s steps(2, start) infinite;
    border-radius: 1px;
}
.rd-msg-row:not(.rd-msg-streaming) .rd-caret { display: none; }
@keyframes rdCaretBlink {
    to { opacity: 0; }
}

/* 旧的长按变暗效果已废弃（改为底部操作按钮） */

/* 气泡顶部 - 18S.png，固定不拉伸 */
.rd-bubble-top {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* 气泡底部 - 18X.png，固定不拉伸 */
.rd-bubble-bottom {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* 气泡中间 - 文字区域，背景用18Z.png纵向平铺 */
.rd-bubble-mid {
    background-image: var(--reverie-img-bubble-mid, url('xianxia/18Z.png'));
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
    padding: 6px 32px;
    position: relative;
    /* 去掉原先的 margin:-1px 0，避免半透明 PNG 三层叠加产生色带 */
    margin: 0;
}

/* 顶/底图按块级贴合，防止 flex 容器里出现亚像素缝隙 */
.rd-bubble-top,
.rd-bubble-bottom {
    vertical-align: top;
}

/* 气泡正文 */
.rd-bubble-body {
    font-size: 14px;
    line-height: 1.85;
    color: var(--reverie-bubble-body-text, #aa5569);
    word-break: break-word;
    white-space: pre-wrap;
    text-align: left;
}

/* AI 气泡正文末尾的落款装饰图 */
.rd-bubble-signet {
    display: block;
    width: 100%;
    height: auto;
    margin: 12px auto 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* 对话块 - 用粉色底框包裹，左侧带爱心图标，文字加粗 */
.rd-bubble-body .rd-dialogue {
    display: inline;
    background: var(--reverie-dialogue-bg, #ffe0e0);
    color: var(--reverie-dialogue-text, #cd5e78);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 8px;
    line-height: 1.5;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.rd-bubble-body .rd-dialogue-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 4px;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    flex-shrink: 0;
}

/* 空状态 */
.rd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.rd-empty-icon {
    font-size: 48px;
    margin-bottom: 14px;
    opacity: 0.6;
}

.rd-empty-text {
    color: rgba(150, 120, 130, 0.7);
    font-size: 14px;
    text-align: center;
    line-height: 1.8;
}

/* 思考中动画 - 三点跳动 */
.rd-thinking {
    display: flex;
    padding: 0 2px;
    margin-bottom: 14px;
}

.rd-thinking-dots {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    padding: 4px 0;
}

.rd-thinking-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9a0b0;
    animation: rdDotBounce 1.4s infinite ease-in-out both;
}

.rd-thinking-dots span:nth-child(1) { animation-delay: 0s; }
.rd-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.rd-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes rdDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* 气泡内嵌图片 */
.rd-bubble-image {
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
}

/* 懒加载占位：未加载时给一个最小高度，方便 IntersectionObserver 捕获可见性，
   以及让滚动时不至于大面积跳动（真实图片加载后 height 会自动撑开） */
.rd-bubble-image[data-img-id]:not([data-img-loaded]):empty {
    min-height: 48px;
    background: rgba(255, 220, 230, 0.25);
}

/* 📄 分页加载 sentinel（顶部"加载更早"指示器） */
.rd-load-more-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 0 16px;
    color: #b892a1;
    font-size: 12px;
    letter-spacing: 0.5px;
    user-select: none;
    opacity: 0.75;
}

.rd-load-more-sentinel .rd-load-more-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d89cb0;
    animation: rdDotBounce 1.3s infinite ease-in-out;
}

.rd-load-more-sentinel .rd-load-more-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.rd-load-more-sentinel .rd-load-more-dot:nth-child(3) {
    animation-delay: 0.4s;
}

.rd-load-more-sentinel .rd-load-more-label {
    margin-left: 4px;
    opacity: 0.85;
}

/* 🔽 回到最新悬浮按钮 */
.rd-scroll-to-bottom-btn {
    position: absolute;
    right: 14px;
    bottom: 92px; /* 在输入栏上方 */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #c45c7e;
    box-shadow: 0 4px 14px rgba(196, 92, 126, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(0.9);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 10;
}

.rd-scroll-to-bottom-btn.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.rd-scroll-to-bottom-btn:active {
    transform: scale(0.9);
}

.rd-scroll-to-bottom-icon {
    display: inline-block;
    margin-top: -6px; /* 视觉上让 "⌄" 居中 */
    font-weight: 700;
}

.rd-bubble-img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform 0.15s ease;
}

.rd-bubble-img:active {
    transform: scale(0.98);
}

/* ============ 🖼️ 浮生绘梦插画大图预览层 ============ */
.rev-img-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    animation: revImgViewerFadeIn 0.18s ease;
}

.rev-img-viewer.show {
    display: flex;
}

@keyframes revImgViewerFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.rev-img-viewer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 92vw;
    max-height: 92vh;
}

.rev-img-viewer-img {
    max-width: 92vw;
    /* 给底部按钮和提示语留出空间，避免把图挤出屏幕 */
    max-height: calc(92vh - 100px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    /* 允许长按弹出系统保存菜单 */
    -webkit-touch-callout: default;
    user-select: none;
}

.rev-img-viewer-actions {
    display: flex;
    gap: 12px;
}

.rev-img-viewer-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.rev-img-viewer-btn:active {
    transform: scale(0.96);
    opacity: 0.85;
}

.rev-img-viewer-save {
    background: linear-gradient(135deg, #ff8fa3, #ff6b81);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 107, 129, 0.4);
}

.rev-img-viewer-close {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(8px);
}

.rev-img-viewer-hint {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
}

/* 发图预览区（输入框上方） */
.rd-image-preview-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 48px 6px 48px;
    flex-shrink: 0;
    background: rgba(254, 235, 240, 0.4);
}

.rd-image-preview-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #ffdee9;
}

.rd-image-preview-remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}

/* 左边多功能气泡菜单 */
.rd-menu-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 2px;
    background: rgb(255 233 235 / 82%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 3px 5px;
    display: flex;
    gap: 4px;
    z-index: 1000;
    box-shadow: 0 3px 12px rgba(255, 150, 170, 0.2);
    border: 1px solid rgba(255, 200, 210, 0.6);
    animation: rdMenuFadeIn 0.2s ease-out;
}

.rd-menu-popup::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 16px;
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
    background: rgb(255 233 235 / 82%);
    border-right: 1px solid rgba(255, 200, 210, 0.6);
    border-bottom: 1px solid rgba(255, 200, 210, 0.6);
}

.rd-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.rd-menu-item:active {
    background: rgba(255, 180, 195, 0.3);
}

.rd-menu-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

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

/* 长文梦境气泡右键菜单 */
.rd-context-menu {
    position: fixed;
    z-index: 10000;
    background: rgba(255, 250, 252, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(232, 122, 170, 0.25);
    border: 1px solid rgba(255, 222, 233, 0.6);
    padding: 8px;
    min-width: 150px;
    display: none;
    animation: rdCtxFadeIn 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.rd-ctx-item {
    padding: 12px 16px;
    font-size: 15px;
    color: #59474a;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.rd-ctx-item:active {
    background: linear-gradient(135deg, rgba(255, 222, 233, 0.6), rgba(245, 160, 184, 0.3));
    transform: scale(0.98);
}

.rd-ctx-item.danger {
    color: #e74c3c;
}

.rd-ctx-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffdee9, transparent);
    margin: 4px 8px;
}

@keyframes rdCtxFadeIn {
    from { opacity: 0; transform: scale(0.92) translateY(-5px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==================== 长文设置弹窗 (Reverie Dream Settings) ==================== */

.rd-settings-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    background: #fff5f8;
    display: flex;
    flex-direction: column;
    animation: rdSettingsSlideIn 0.25s ease-out;
}

@keyframes rdSettingsSlideIn {
    from { transform: translateX(100%); opacity: 0.5; }
    to { transform: translateX(0); opacity: 1; }
}

.rd-settings-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* 头部 - 只有标题居中 */
.rd-settings-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, #fff0f5 0%, #fff5f8 100%);
    border-bottom: 1px solid #ffeef3;
    flex-shrink: 0;
}

.rd-settings-title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #59474a;
}

/* 内容区 */
.rd-settings-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px;
}

.rd-settings-content::-webkit-scrollbar {
    display: none;
}

/* 底部保存栏 */
.rd-settings-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #ffeef3;
    background: #fff;
    display: flex;
    gap: 10px;
    align-items: center;
}

.rd-settings-save-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(135deg, #fd5392, #ff6b81);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 107, 129, 0.25);
    letter-spacing: 1px;
}

.rd-settings-save-btn:active {
    transform: scale(0.98);
}

/* 设置卡片 */
.rd-settings-card {
    background: #fff;
    border: 2px solid #ffdee9;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(255, 222, 233, 0.2);
}

.rd-settings-card-label {
    font-size: 14px;
    font-weight: 600;
    color: #59474a;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rd-settings-card-icon {
    font-size: 16px;
}

/* 输入框 */
.rd-settings-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #ffdee9;
    border-radius: 12px;
    font-size: 15px;
    color: #59474a;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    background: #fffbfc;
    transition: border-color 0.2s;
}

.rd-settings-input:focus {
    border-color: #f5a0b8;
}

.rd-settings-input::placeholder {
    color: #d4b8c2;
}

/* 下拉框（复用 rd-settings-input 的边框/背景） */
.rd-settings-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23e87aaa' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 7px;
}

/* 文本域 */
.rd-settings-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #ffdee9;
    border-radius: 12px;
    font-size: 14px;
    color: #59474a;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    background: #fffbfc;
    resize: vertical;
    line-height: 1.6;
    transition: border-color 0.2s;
    min-height: 100px;
}

.rd-settings-textarea:focus {
    border-color: #f5a0b8;
}

.rd-settings-textarea::placeholder {
    color: #d4b8c2;
}

/* 全屏编辑按钮 - 靠右 */
.rd-settings-fullscreen-btn {
    display: block;
    margin-top: 8px;
    margin-left: auto;
    padding: 6px 14px;
    border: 1px solid #ffdee9;
    border-radius: 20px;
    background: #fff5f8;
    color: #e87aaa;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.rd-settings-fullscreen-btn:active {
    background: #ffeef3;
    transform: scale(0.97);
}

/* 提示文字 */
.rd-settings-hint {
    font-size: 12px;
    color: #baa4ac;
    margin-top: 6px;
    line-height: 1.5;
}

/* 记忆轮数输入行 */
.rd-settings-rounds-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rd-settings-rounds-input {
    width: 100px;
    padding: 10px 14px;
    border: 2px solid #ffdee9;
    border-radius: 12px;
    font-size: 16px;
    color: #59474a;
    text-align: center;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    background: #fffbfc;
    font-weight: 600;
    transition: border-color 0.2s;
}

.rd-settings-rounds-input:focus {
    border-color: #f5a0b8;
}

.rd-settings-rounds-unit {
    font-size: 14px;
    color: #888;
    font-weight: 500;
}

/* 开关行 */
.rd-settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rd-settings-toggle-label {
    font-size: 14px;
    color: #59474a;
    font-weight: 500;
}

/* 开关按钮 */
.rd-settings-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.rd-settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.rd-settings-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e6d3db;
    transition: 0.3s ease;
    border-radius: 24px;
}

.rd-settings-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rd-settings-switch input:checked + .rd-settings-slider {
    background-color: #f5a0b8;
}

.rd-settings-switch input:checked + .rd-settings-slider::before {
    transform: translateX(20px);
}

/* 管理档案按钮 */
.rd-settings-manage-btn {
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #a29bfe, #8a7df5);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 10px rgba(162, 155, 254, 0.3);
    transition: transform 0.15s;
}

.rd-settings-manage-btn:active {
    transform: scale(0.98);
}

/* 自定义背景上传 */
.rd-bg-upload-area {
    position: relative;
    width: 100%;
    height: 160px;
    border: 2px dashed #ffdee9;
    border-radius: 14px;
    background: #fffbfc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s;
}

.rd-bg-upload-area:active {
    border-color: #f5a0b8;
    background: #fff5f8;
}

.rd-bg-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #d4b8c2;
    font-weight: 500;
    pointer-events: none;
}

.rd-bg-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.rd-bg-clear-btn {
    margin-top: 8px;
    padding: 6px 16px;
    background: #ffcdd2;
    color: #fff;
    border: none;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.rd-bg-clear-btn:active {
    opacity: 0.7;
}

/* 危险操作按钮（清空聊天记录） */
.rd-settings-danger-btn {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff7979, #eb4d4b);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 10px rgba(235, 77, 75, 0.25);
    transition: transform 0.15s;
}

.rd-settings-danger-btn:active {
    transform: scale(0.98);
}

/* 警告操作按钮（清除图片） */
.rd-settings-warn-btn {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffb36b, #ff8c42);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 10px rgba(255, 140, 66, 0.25);
    transition: transform 0.15s;
}

.rd-settings-warn-btn:active {
    transform: scale(0.98);
}

/* 完结归档按钮 */
.rd-settings-archive-btn {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #6d5fbd);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.25);
    transition: transform 0.15s;
}

.rd-settings-archive-btn:active {
    transform: scale(0.98);
}

.rd-settings-archive-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ==================== 剧情档案列表 ==================== */

.reverie-dream-summaries-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    min-height: 200px;
}

.reverie-dream-summary-item {
    background: linear-gradient(135deg, #fffbfc, #fff0f5);
    border: 1.5px solid #ffdee9;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    position: relative;
}

.reverie-dream-summary-time {
    font-size: 11px;
    color: #b89aa4;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reverie-dream-summary-time-text {
    font-weight: 500;
}

.reverie-dream-summary-actions {
    display: flex;
    gap: 8px;
}

.reverie-dream-summary-action {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
    border: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}

.reverie-dream-summary-action:active {
    transform: scale(0.95);
}

.reverie-dream-summary-action.edit {
    background: #e6d9fb;
    color: #6c5ce7;
}

.reverie-dream-summary-action.delete {
    background: #ffe1e1;
    color: #e84393;
}

.reverie-dream-summary-content {
    font-size: 13.5px;
    color: #59474a;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}

.reverie-dream-summaries-empty {
    text-align: center;
    padding: 40px 20px;
    color: #baa4ac;
    font-size: 13px;
    line-height: 1.8;
}

.reverie-dream-summaries-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #ffeef3;
    background: #fff;
}

.reverie-dream-summary-add-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 22px;
    background: linear-gradient(135deg, #fd5392, #ff6b81);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 107, 129, 0.25);
    letter-spacing: 0.5px;
}

.reverie-dream-summary-add-btn:active {
    transform: scale(0.98);
}

.reverie-dream-summary-add-btn:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* ==================== reverie-dream END ==================== */

/* ==================== 🎭 演绎设定 (Reverie Preset) ==================== */

.rp-container {
    background: #fff5f8;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rp-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, #fff0f5 0%, #fff5f8 100%);
    border-bottom: 1px solid #ffeef3;
    flex-shrink: 0;
}

.rp-nav-title {
    color: #59474a;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.rp-manage-btn {
    font-size: 14px;
    color: #e87aaa;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 12px;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.rp-manage-btn:active {
    background: #ffeef3;
}

.rp-manage-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
}

/* 搜索栏 */
.rp-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 8px;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #ffdee9;
    border-radius: 16px;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.rp-search-bar:focus-within {
    border-color: #f5a0b8;
}

.rp-search-icon {
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.5;
}

.rp-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #59474a;
    background: transparent;
    font-family: inherit;
}

.rp-search-input::placeholder {
    color: #d4b0c0;
}

/* 设定列表区域 */
.rp-list-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 16px;
    min-height: 0;
}

.rp-list-area::-webkit-scrollbar {
    display: none;
}

/* 设定卡片 */
.rp-preset-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #ffeef3;
    box-shadow: 0 2px 10px rgba(255, 180, 200, 0.1);
    transition: all 0.25s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: rpCardIn 0.3s ease both;
}

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

.rp-preset-card:active {
    transform: scale(0.98);
    border-color: #f5a0b8;
}

.rp-preset-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff0f5, #fde0ea);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    border: 1.5px solid #ffdee9;
    box-shadow: 0 2px 8px rgba(255, 170, 200, 0.15);
}

.rp-preset-info {
    flex: 1;
    min-width: 0;
}

.rp-preset-name {
    font-size: 15px;
    font-weight: bold;
    color: #59474a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-preset-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.rp-preset-badge {
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
}

.rp-preset-count {
    font-size: 11px;
    color: #c9a0b0;
}

.rp-preset-more-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #c9a0b0;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.rp-preset-more-btn:active {
    background: #ffeef3;
    color: #e87aaa;
}

/* 空状态 */
.rp-empty {
    text-align: center;
    padding: 60px 20px;
}

.rp-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.rp-empty-text {
    color: #c9a0b0;
    font-size: 14px;
    line-height: 1.8;
}

/* 底部操作栏 */
.rp-bottom-bar {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #ffeef3;
    box-shadow: 0 -4px 16px rgba(255, 180, 200, 0.1);
}

.rp-btn-create {
    flex: 1;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(90deg, #fd5392, #ff6b81);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(253, 83, 146, 0.3);
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.rp-btn-create:active {
    opacity: 0.8;
    transform: scale(0.98);
}

.rp-btn-import {
    padding: 13px 22px;
    border: 2px solid #ffdee9;
    border-radius: 25px;
    background: #fff;
    color: #e87aaa;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.rp-btn-import:active {
    background: #fff5f8;
    border-color: #f5a0b8;
}

/* ---- 编辑页样式 ---- */

.rp-edit-name-section {
    padding: 16px 16px 0;
    flex-shrink: 0;
}

.rp-field-label {
    font-size: 14px;
    font-weight: bold;
    color: #59474a;
    margin-bottom: 8px;
}

.rp-edit-name-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #ffdee9;
    border-radius: 16px;
    font-size: 15px;
    color: #59474a;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-family: inherit;
}

.rp-edit-name-input:focus {
    border-color: #f5a0b8;
}

/* 类目列表区 */
.rp-categories-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px 16px;
    min-height: 0;
}

.rp-categories-area::-webkit-scrollbar {
    display: none;
}

/* 类目卡片 */
.rp-category-card {
    margin-bottom: 12px;
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #ffeef3;
    box-shadow: 0 2px 10px rgba(255, 180, 200, 0.08);
    overflow: hidden;
    animation: rpCardIn 0.3s ease both;
}

.rp-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.rp-category-header:active {
    background: #fff8fa;
}

.rp-category-manage-check {
    display: none;
    width: 22px;
    height: 22px;
    border: 2px solid #ffdee9;
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.rp-category-manage-check.checked {
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    border-color: #e87aaa;
}

.rp-category-manage-check.checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}

.manage-mode .rp-category-manage-check {
    display: block;
}

.rp-category-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.rp-category-title-area {
    flex: 1;
    min-width: 0;
}

.rp-category-name {
    font-size: 14px;
    font-weight: bold;
    color: #59474a;
}

.rp-category-mode-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: #fff0f5;
    color: #e87aaa;
    font-weight: 600;
    margin-left: 6px;
}

.rp-category-edit-btn {
    font-size: 13px;
    color: #c9a0b0;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.rp-category-edit-btn:active {
    background: #ffeef3;
    color: #e87aaa;
}

.rp-category-arrow {
    font-size: 14px;
    color: #d4b0c0;
    transition: transform 0.3s;
    flex-shrink: 0;
}

.rp-category-arrow.expanded {
    transform: rotate(90deg);
}

/* 类目展开内容 */
.rp-category-body {
    display: none;
    padding: 0 12px 12px;
    border-top: 1px solid #ffeef3;
}

.rp-category-body.show {
    display: block;
}

/* 二级条目 */
.rp-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 14px;
    margin-top: 6px;
    background: linear-gradient(135deg, rgba(255, 245, 250, 0.8), rgba(255, 238, 243, 0.5));
    border: 1px solid transparent;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.rp-item-row:active {
    border-color: #ffdee9;
}

.rp-item-manage-check {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ffdee9;
    border-radius: 5px;
    background: #fff;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.rp-item-manage-check.checked {
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    border-color: #e87aaa;
}

.rp-item-manage-check.checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

.manage-mode .rp-item-manage-check {
    display: block;
}

.rp-item-name {
    flex: 1;
    font-size: 13px;
    color: #59474a;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rp-item-name:active {
    color: #e87aaa;
}

/* 条目开关 */
.rp-item-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.rp-item-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rp-item-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ddd;
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.3s;
}

.rp-item-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.3s;
}

.rp-item-toggle input:checked + .rp-item-toggle-slider {
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
}

.rp-item-toggle input:checked + .rp-item-toggle-slider::before {
    transform: translateX(18px);
}

/* 新建条目按钮 */
.rp-add-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
    padding: 9px;
    border: 2px dashed #ffdee9;
    border-radius: 14px;
    background: transparent;
    color: #e0b0c0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    box-sizing: border-box;
}

.rp-add-item-btn:active {
    border-color: #f5a0b8;
    color: #e87aaa;
    background: rgba(255, 240, 245, 0.5);
}

/* 管理模式栏 */
.rp-manage-bar {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #ffeef3;
    box-shadow: 0 -4px 16px rgba(255, 180, 200, 0.1);
}

.rp-manage-delete-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(90deg, #ff6b6b, #ee5a5a);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(238, 90, 90, 0.3);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s;
}

.rp-manage-delete-btn:active {
    opacity: 0.8;
}

.rp-manage-done-btn {
    padding: 12px 24px;
    border: 2px solid #ffdee9;
    border-radius: 25px;
    background: #fff;
    color: #59474a;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.rp-manage-done-btn:active {
    background: #fff5f8;
}

/* 编辑页底部栏 */
.rp-edit-bottom-bar {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #ffeef3;
    box-shadow: 0 -4px 16px rgba(255, 180, 200, 0.1);
}

.rp-btn-add-category {
    flex: 1;
    padding: 13px;
    border: 2px solid #ffdee9;
    border-radius: 25px;
    background: #fff;
    color: #e87aaa;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.rp-btn-add-category:active {
    background: #fff5f8;
    border-color: #f5a0b8;
}

.rp-btn-save-preset {
    flex: 1;
    padding: 13px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(90deg, #fd5392, #ff6b81);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(253, 83, 146, 0.3);
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.rp-btn-save-preset:active {
    opacity: 0.8;
    transform: scale(0.98);
}

.rp-btn-manage-bottom {
    padding: 13px 18px;
    border: 2px solid #ffdee9;
    border-radius: 25px;
    background: #fff;
    color: #e87aaa;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}

.rp-btn-manage-bottom:active {
    background: #fff5f8;
    border-color: #f5a0b8;
}

.rp-btn-manage-bottom.active {
    color: #fff;
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    border-color: #e87aaa;
}

/* ---- 新建类目弹窗 - 单选/多选卡片 ---- */
.rp-select-mode-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rp-radio-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid #ffdee9;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.rp-radio-card:active {
    border-color: #f5a0b8;
}

.rp-radio-card.active {
    border-color: #f5a0b8;
    background: linear-gradient(135deg, rgba(255, 240, 245, 0.9), rgba(255, 230, 238, 0.7));
}

.rp-radio-dot {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
    position: relative;
}

.rp-radio-card.active .rp-radio-dot {
    border-color: #e87aaa;
}

.rp-radio-card.active .rp-radio-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    border-radius: 50%;
}

.rp-radio-info {
    flex: 1;
}

.rp-radio-title {
    font-size: 14px;
    font-weight: bold;
    color: #59474a;
}

.rp-radio-hint {
    font-size: 11px;
    color: #c9a0b0;
    margin-top: 2px;
}

/* ---- 三点菜单 (iOS ActionSheet) ---- */
#rpContextMenu.modal-overlay {
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.rp-context-menu-card {
    width: 92%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(100, 60, 80, 0.18);
    animation: rpMenuSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

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

.rp-context-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #59474a;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.rp-context-menu-item + .rp-context-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: rgba(255, 200, 220, 0.35);
}

.rp-context-menu-item:active {
    background: rgba(255, 220, 233, 0.5);
}

.rp-ctx-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
}

.rp-ctx-danger {
    color: #e74c3c;
}

.rp-ctx-danger .rp-ctx-svg {
    opacity: 0.85;
}

.rp-context-menu-divider {
    height: 1px;
    background: rgba(255, 200, 220, 0.4);
    margin: 2px 0;
}

.rp-context-menu-cancel {
    padding: 14px;
    text-align: center;
    font-size: 16px;
    color: #c9a0b0;
    font-weight: 600;
    cursor: pointer;
    border-top: 1px solid rgba(255, 200, 220, 0.4);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

.rp-context-menu-cancel:active {
    background: rgba(255, 220, 233, 0.5);
}

/* ==================== 🎭 演绎设定 END ==================== */



/* ==================== 馃尭 娴敓缁樻ⅵ END ==================== */


/* ================= 🎨 浮生绘梦 - 梦境生图设置卡 ================= */
.rcs-dreamimg-card {
    background: linear-gradient(135deg, #fffafa 0%, #fff5f8 100%);
    border: 1.5px solid #ffc8dc;
}

.rcs-dreamimg-hint {
    font-size: 11px;
    color: #b48ea0;
    line-height: 1.6;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(255, 234, 240, 0.55);
    border-radius: 10px;
}

.rcs-dreamimg-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px;
}

.rcs-dreamimg-switch-label {
    font-size: 14px;
    color: #59474a;
    font-weight: 600;
}

/* 小粉色开关 */
.rcs-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}

.rcs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.rcs-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #e8d4de;
    border-radius: 26px;
    transition: background 0.25s;
}

.rcs-switch-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rcs-switch input:checked + .rcs-switch-slider {
    background: linear-gradient(135deg, #f5a0b8, #f08aaa);
}

.rcs-switch input:checked + .rcs-switch-slider::before {
    transform: translateX(20px);
}

/* 详情面板 */
.rcs-dreamimg-panel {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #ffd8e4;
}

.rcs-dreamimg-sub-label {
    font-size: 12px;
    color: #59474a;
    font-weight: 600;
    margin: 12px 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rcs-dreamimg-required {
    font-size: 10px;
    color: #e87aaa;
    font-weight: normal;
}

/* 频率三档 */
.rcs-dreamimg-freq-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
}

.rcs-dreamimg-freq-opt {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rcs-dreamimg-freq-opt input[type="radio"] {
    display: none;
}

.rcs-dreamimg-freq-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    border: 2px solid #ffdee9;
    border-radius: 12px;
    background: #fffafa;
    transition: all 0.2s;
}

.rcs-dreamimg-freq-opt input:checked + .rcs-dreamimg-freq-box {
    border-color: #f5a0b8;
    background: linear-gradient(135deg, #fff5f8, #ffe8f0);
    box-shadow: 0 2px 6px rgba(245, 160, 184, 0.25);
}

.rcs-dreamimg-freq-title {
    font-size: 14px;
    font-weight: 700;
    color: #59474a;
    margin-bottom: 2px;
}

.rcs-dreamimg-freq-opt input:checked + .rcs-dreamimg-freq-box .rcs-dreamimg-freq-title {
    color: #e87aaa;
}

.rcs-dreamimg-freq-desc {
    font-size: 11px;
    color: #b48ea0;
}

.rcs-dreamimg-textarea {
    min-height: 70px;
    margin-bottom: 6px;
    font-size: 13px;
}

.rcs-dreamimg-tip {
    font-size: 11px;
    color: #b48ea0;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* ================= 🎨 梦境气泡 - 生图 loading / 失败 状态 ================= */

/* 加载中块：三个跳动的点，卡片质感 */
.rd-bubble-image-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 16px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 245, 248, 0.9), rgba(255, 234, 240, 0.9));
    border: 1px dashed #f5c2d6;
    font-size: 12px;
    color: #b57895;
    min-height: 60px;
}

.rd-bubble-image-loading .rd-img-loading-label {
    margin-left: 6px;
    opacity: 0.85;
}

.rd-bubble-image-loading .rd-img-dot {
    width: 7px;
    height: 7px;
    background: #f5a0b8;
    border-radius: 50%;
    animation: rdImgDotPulse 1.2s infinite ease-in-out;
}

.rd-bubble-image-loading .rd-img-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.rd-bubble-image-loading .rd-img-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes rdImgDotPulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* 失败块：和聊天窗口保持一致的风格 */
.rd-bubble-image-fail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255, 230, 230, 0.7);
    border: 1px solid #ffcdd2;
    font-size: 12px;
    color: #c9535e;
    line-height: 1.5;
}

.rd-bubble-image-fail-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rd-bubble-image-fail-reason {
    font-size: 11px;
    color: #a66570;
    opacity: 0.85;
    word-break: break-all;
}


/* ==================== 🎨 浮生绘梦 - 我的美化 (Reverie Theme Manager) ==================== */
#reverie-theme-layer {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
}

.rvtheme-container {
    background: #fff5f8;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
}

/* 标题：参考演绎设定页面（rp-nav-header），flex 布局 + 18px + 底部分隔线 */
.rvtheme-container .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, #fff0f5 0%, #fff5f8 100%);
    border-bottom: 1px solid #ffeef3;
    flex-shrink: 0;
    margin-bottom: 0;
}

.rvtheme-container .nav-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #59474a;
}

.rvtheme-nav-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.rvtheme-nav-btn {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #ffdee9;
    background: #fff;
    color: #e87aaa;
    border-radius: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.rvtheme-nav-btn:active {
    background: #ffeef3;
}

.rvtheme-tip {
    margin: 12px 16px 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #fff0f5, #ffe6ef);
    border: 1px solid #ffdee9;
    border-radius: 14px;
    color: #a66570;
    font-size: 12.5px;
    line-height: 1.7;
    flex-shrink: 0;
}

.rvtheme-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding-bottom: 10px;
}

.rvtheme-scroll::-webkit-scrollbar {
    display: none;
}

.rvtheme-list {
    padding: 4px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rvtheme-card {
    background: #fff;
    border: 1.5px solid #ffdee9;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(255, 200, 220, 0.12);
    transition: border-color 0.2s, transform 0.15s;
}

.rvtheme-card.is-active {
    border-color: #f5a0b8;
    box-shadow: 0 4px 16px rgba(245, 160, 184, 0.28);
}

.rvtheme-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rvtheme-card-info {
    flex: 1;
    min-width: 0;
}

.rvtheme-card-name {
    font-size: 15px;
    font-weight: bold;
    color: #59474a;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rvtheme-card-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.rvtheme-card-badge.default-badge {
    background: #ffeef3;
    color: #b28699;
}

.rvtheme-card-meta {
    font-size: 11px;
    color: #c9a0b0;
    margin-top: 3px;
}

.rvtheme-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.rvtheme-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 14px;
    border: 1px solid #ffdee9;
    background: #fff;
    color: #e87aaa;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
    font-weight: 500;
}

.rvtheme-action-btn:active {
    background: #ffeef3;
}

.rvtheme-action-btn.primary {
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    color: #fff;
    border-color: transparent;
}

.rvtheme-action-btn.primary.is-active {
    background: #fff;
    color: #e87aaa;
    border: 1px solid #f5a0b8;
}

.rvtheme-action-btn.danger {
    color: #e57373;
    border-color: #ffcdd2;
}

.rvtheme-action-btn.danger:active {
    background: #fff0f0;
}

.rvtheme-empty {
    text-align: center;
    padding: 40px 20px;
    color: #c9a0b0;
    font-size: 13px;
    line-height: 1.8;
}

.rvtheme-bottom-bar {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 245, 248, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid #ffdee9;
}

.rvtheme-btn-primary {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 22px;
    background: linear-gradient(90deg, #fd5392, #ff6b81);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(253, 83, 146, 0.25);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s, opacity 0.2s;
}

.rvtheme-btn-primary:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.rvtheme-btn-secondary {
    flex: 1;
    padding: 12px;
    border: 1.5px solid #ffdee9;
    border-radius: 22px;
    background: #fff;
    color: #e87aaa;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.rvtheme-btn-secondary:active {
    background: #fff5f8;
}

/* ---- 主题编辑弹窗 ---- */
.rvtheme-editor-modal {
    width: 92%;
    max-width: 520px;
    height: 82vh;
    max-height: 82vh;
    background: #fff;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.rvtheme-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #ffeef3;
    flex-shrink: 0;
}

.rvtheme-editor-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    color: #c9a0b0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.rvtheme-editor-close:active {
    background: #ffeef3;
}

.rvtheme-editor-body {
    flex: 1;
    padding: 14px 18px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rvtheme-editor-label {
    font-size: 13px;
    font-weight: bold;
    color: #59474a;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rvtheme-editor-hint {
    font-weight: normal;
    font-size: 11px;
    color: #c9a0b0;
}

.rvtheme-editor-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #ffdee9;
    border-radius: 12px;
    font-size: 14px;
    color: #59474a;
    background: #fffafa;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.rvtheme-editor-input:focus {
    border-color: #f5a0b8;
}

.rvtheme-editor-textarea {
    width: 100%;
    flex: 1;
    min-height: 220px;
    padding: 10px 14px;
    border: 2px solid #ffdee9;
    border-radius: 12px;
    font-size: 12.5px;
    color: #59474a;
    background: #fffafa;
    outline: none;
    box-sizing: border-box;
    resize: none;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    line-height: 1.55;
    transition: border-color 0.2s;
}

.rvtheme-editor-textarea:focus {
    border-color: #f5a0b8;
}

.rvtheme-editor-footer {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-shrink: 0;
}
/* ==================== 🎨 浮生绘梦 - 我的美化 END ==================== */


/* ================= 🎭 演绎设定小助手 ================= */

/* 📎 附加预设按钮 */
.rp-attach-preset-btn {
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.rp-attach-preset-btn:active {
    transform: scale(0.9);
    opacity: 0.7;
}

/* 用户发送的"已附加预设"气泡卡 */
.rp-attached-preset-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5a0b8, #e87aaa);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(232, 122, 170, 0.3);
    max-width: 240px;
}
.rp-attached-preset-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.rp-attached-preset-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.rp-attached-preset-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rp-attached-preset-meta {
    font-size: 11px;
    opacity: 0.9;
}

/* 🎭 AI 输出的修改/新增/新类目预览卡 */
.rp-change-card {
    border-radius: 14px;
    padding: 12px 14px;
    margin: 2px 0;
    min-width: 220px;
    max-width: 280px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    border: 1.5px solid;
    background: #fff;
}
.rp-change-card:active {
    transform: scale(0.98);
}
.rp-change-card.rp-change-modify {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.rp-change-card.rp-change-add {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.rp-change-card.rp-change-newcat {
    border-color: #a855f7;
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
}

.rp-change-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}
.rp-change-icon { font-size: 16px; }
.rp-change-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}
.rp-change-modify .rp-change-badge { background: #3b82f6; }
.rp-change-add .rp-change-badge { background: #22c55e; }
.rp-change-newcat .rp-change-badge { background: #a855f7; }

.rp-change-breadcrumb {
    font-size: 12px;
    color: #475569;
    margin-bottom: 6px;
    line-height: 1.4;
    word-break: break-all;
}
.rp-change-breadcrumb-sep {
    color: #94a3b8;
    margin: 0 4px;
}
.rp-change-name {
    font-weight: 600;
    color: #1e293b;
}

.rp-change-body {
    font-size: 12px;
    color: #475569;
    line-height: 1.55;
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 10px;
    border-radius: 8px;
    max-height: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-all;
    white-space: pre-wrap;
}
.rp-change-hint {
    font-size: 11px;
    color: #64748b;
    margin-top: 6px;
    text-align: center;
}
.rp-change-save-btn {
    display: block;
    margin-top: 8px;
    width: 100%;
    padding: 8px 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(90deg, #f5a0b8, #e87aaa);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(232, 122, 170, 0.3);
    transition: transform 0.15s ease, opacity 0.2s ease;
}
.rp-change-save-btn:active {
    transform: scale(0.97);
}
.rp-change-save-btn.rp-saved {
    background: #d4edda !important;
    color: #155724 !important;
    box-shadow: none !important;
    cursor: default;
}

/* 附加预设选择弹窗里的列表项（复用 rps 风格，此处留空即可） */


/* ============================================================
 * 🎨 浮生绘梦 - 可视化主题编辑器抽屉 (一期：一级页面)
 * ============================================================ */
.rv-ve-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: linear-gradient(180deg, #fff5f8 0%, #ffffff 100%);
    border-top: 1.5px solid #ffdee9;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px rgba(245, 160, 184, 0.18);
    display: flex;
    flex-direction: column;
    /* 默认展开高度 */
    height: 56vh;
    max-height: 56vh;
    transition: height 0.28s ease, max-height 0.28s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: hidden;
}
.rv-ve-drawer.collapsed {
    /* 🎨 新方案：收起时直接隐藏整个抽屉（让位浮动球） */
    display: none !important;
}

/* 折叠态提示（旧方案保留但不再使用） */
.rv-ve-collapsed-hint {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #c9a0b0;
    font-weight: bold;
    pointer-events: none;
}

/* 🎨 收起后的浮动球：只在编辑器激活 + 折叠态时显示 */
.rv-ve-fab {
    position: fixed;
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb3c8, #f5a0b8);
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.2s;
    touch-action: none;  /* 启用拖动 */
}
.rv-ve-fab:active {
    transform: scale(0.92);
}
.rv-ve-fab.dragging {
    transition: none;
}

/* 顶部 handle（点击折叠/展开） */
.rv-ve-handle {
    flex-shrink: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rv-ve-handle-bar {
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: #ffc1d2;
}

/* 顶部 header：取消 / 标题 / 保存 */
.rv-ve-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 10px;
    border-bottom: 1px solid #ffeef3;
}
.rv-ve-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #59474a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}
.rv-ve-btn-text {
    background: transparent;
    border: none;
    color: #c9a0b0;
    font-size: 14px;
    padding: 6px 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rv-ve-btn-text:active {
    color: #f5a0b8;
}
.rv-ve-btn-primary {
    background: linear-gradient(90deg, #fd5392, #ff6b81);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: bold;
    padding: 7px 16px;
    border-radius: 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 8px rgba(253, 83, 146, 0.28);
}
.rv-ve-btn-primary:active {
    transform: scale(0.96);
}
.rv-ve-btn-icon {
    background: #fff0f5;
    border: 1px solid #ffdee9;
    color: #c9a0b0;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 14px;
    cursor: pointer;
    margin-right: 6px;
    -webkit-tap-highlight-color: transparent;
}
.rv-ve-btn-icon:active {
    background: #ffdee9;
}

/* 滚动正文 */
.rv-ve-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 14px 16px;
}
.rv-ve-body::-webkit-scrollbar {
    width: 4px;
}
.rv-ve-body::-webkit-scrollbar-thumb {
    background: #ffd0dc;
    border-radius: 2px;
}

/* 主题名输入区 */
.rv-ve-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 12px;
    border-bottom: 1px dashed #ffeef3;
    margin-bottom: 8px;
}
.rv-ve-name-row label {
    font-size: 12px;
    color: #c9a0b0;
    flex-shrink: 0;
}
.rv-ve-name-input {
    flex: 1;
    padding: 7px 12px;
    font-size: 13px;
    border: 1.2px solid #ffdee9;
    border-radius: 10px;
    background: #fffafa;
    color: #59474a;
    outline: none;
    min-width: 0;
}
.rv-ve-name-input:focus {
    border-color: #f5a0b8;
}

/* 折叠分组卡片 */
.rv-ve-group {
    background: #fff;
    border: 1px solid #ffeef3;
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}
.rv-ve-group-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.rv-ve-group-title {
    flex: 1;
    font-size: 13px;
    font-weight: bold;
    color: #59474a;
}
.rv-ve-group-arrow {
    font-size: 14px;
    color: #c9a0b0;
    transition: transform 0.2s;
}
.rv-ve-group.open .rv-ve-group-arrow {
    transform: rotate(90deg);
}
.rv-ve-group-body {
    display: none;
    padding: 0 12px 10px;
    border-top: 1px dashed #ffeef3;
}
.rv-ve-group.open .rv-ve-group-body {
    display: block;
}

/* 单条字段：label + 控件 + 重置 */
.rv-ve-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed #ffeef3;
}
.rv-ve-field:last-child {
    border-bottom: none;
}
.rv-ve-field-label {
    flex-shrink: 0;
    width: 70px;
    font-size: 12px;
    color: #59474a;
}
.rv-ve-field-control {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.rv-ve-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #ffe4ec;
    border-radius: 2px;
    outline: none;
    min-width: 0;
}
.rv-ve-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f5a0b8;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(245, 160, 184, 0.5);
}
.rv-ve-slider-val {
    flex-shrink: 0;
    width: 46px;
    text-align: right;
    font-size: 11px;
    color: #c9a0b0;
    font-variant-numeric: tabular-nums;
}
.rv-ve-img-input {
    flex: 1;
    padding: 5px 8px;
    font-size: 11px;
    border: 1px solid #ffdee9;
    border-radius: 8px;
    background: #fffafa;
    color: #59474a;
    outline: none;
    min-width: 0;
}
.rv-ve-img-input:focus {
    border-color: #f5a0b8;
}
.rv-ve-img-upload-btn {
    flex-shrink: 0;
    background: #fff0f5;
    border: 1px solid #ffdee9;
    color: #c9a0b0;
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rv-ve-img-upload-btn:active {
    background: #ffdee9;
}
.rv-ve-reset-btn {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #c9a0b0;
    font-size: 13px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}
.rv-ve-reset-btn:active {
    background: #ffeef3;
    color: #f5a0b8;
}
.rv-ve-reset-btn.modified {
    color: #f5a0b8;
}

/* Toggle 开关 */
.rv-ve-toggle {
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #ffe4ec;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.rv-ve-toggle.on {
    background: #f5a0b8;
}
.rv-ve-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: left 0.2s;
}
.rv-ve-toggle.on .rv-ve-toggle-knob {
    left: 20px;
}

/* 颜色控件 */
.rv-ve-color {
    flex-shrink: 0;
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid #ffdee9;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rv-ve-color::-webkit-color-swatch-wrapper {
    padding: 0;
}
.rv-ve-color::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}
.rv-ve-color-hex {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    font-size: 11px;
    border: 1px solid #ffdee9;
    border-radius: 8px;
    background: #fffafa;
    color: #59474a;
    outline: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rv-ve-color-hex:focus {
    border-color: #f5a0b8;
}

/* 高亮提示：当前选中编辑的元素（在真实页面上） */
.rv-ve-target-hint {
    outline: 2px dashed #f5a0b8 !important;
    outline-offset: 3px;
    transition: outline 0.2s;
}

/* 🔒 进入可视化编辑模式后，禁用所有"非编辑器自身"元素的点击/触摸
 * 防止用户误触底部按钮、悬浮导航球等导致页面乱跳出 BUG
 * 编辑器/浮动球本身保留交互
 */
body.rv-ve-active * {
    pointer-events: none !important;
}
body.rv-ve-active #reverie-ve-drawer,
body.rv-ve-active #reverie-ve-drawer *,
body.rv-ve-active #reverie-ve-fab,
body.rv-ve-active #reverie-ve-fab * {
    pointer-events: auto !important;
}

/* 三级页面的气泡消息区允许滚动（仅滚动，不响应点击/长按等其他交互） */
body.rv-ve-active #reverie-dream-layer .reverie-dream-messages {
    pointer-events: auto !important;
}
body.rv-ve-active #reverie-dream-layer .reverie-dream-messages * {
    /* 子元素仍禁用，避免点到气泡上的编辑/删除按钮 */
    pointer-events: none !important;
}

/* 进入可视化模式时，让一级页面留出底部空间避免被抽屉挡住 */
body.rv-ve-active #reverie-layer .reverie-import-bar {
    bottom: calc(56vh + 4px);
    transition: bottom 0.28s ease;
}
/* 收起态：抽屉隐藏，恢复原始底部位置（浮动球不占空间） */
body.rv-ve-active.rv-ve-collapsed #reverie-layer .reverie-import-bar {
    bottom: 3px;
}

/* 二级 / 三级页面在可视化模式下，整体上抬避免被抽屉挡住 */
body.rv-ve-active #reverie-detail-layer,
body.rv-ve-active #reverie-dream-layer {
    padding-bottom: 56vh !important;
    transition: padding-bottom 0.28s ease;
}
/* 收起态：恢复正常 padding */
body.rv-ve-active.rv-ve-collapsed #reverie-detail-layer,
body.rv-ve-active.rv-ve-collapsed #reverie-dream-layer {
    padding-bottom: 0 !important;
}
/* 三级输入栏是 sticky/fixed-like 的，需要把它挪到抽屉之上 */
body.rv-ve-active #reverie-dream-layer .reverie-dream-input-bar {
    bottom: 56vh;
}
body.rv-ve-active.rv-ve-collapsed #reverie-dream-layer .reverie-dream-input-bar {
    bottom: 0;
}

/* 层级 Tab */
.rv-ve-level-tabs {
    display: flex;
    gap: 6px;
    padding: 4px 0 8px;
    border-bottom: 1px dashed #ffeef3;
    margin-bottom: 4px;
}
.rv-ve-level-tab {
    flex: 1;
    text-align: center;
    padding: 6px 8px;
    font-size: 12px;
    color: #c9a0b0;
    background: #fff5f8;
    border: 1px solid #ffdee9;
    border-radius: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s;
}
.rv-ve-level-tab.active {
    color: #fff;
    background: linear-gradient(90deg, #fd5392, #ff6b81);
    border-color: transparent;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(253, 83, 146, 0.3);
}
.rv-ve-level-tab:active {
    transform: scale(0.96);
}

/* ==================== 📊 聊天数据分析栏（调试用） ==================== */
/* 现在挂在"聊天设置"弹窗里，作为静态展示卡片，不再做折叠 */
.chat-stats-bar {
    background: #fff8fa;
    border: 1px solid rgba(255, 200, 215, 0.6);
    border-radius: 10px;
    font-size: 12px;
    color: #5d4751;
    line-height: 1.5;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    margin-top: 8px;
    overflow: hidden;
}
.chat-stats-summary {
    display: none; /* 设置面板里直接展开看，不要折叠条 */
}
.chat-stats-summary-arrow {
    display: none;
}
.chat-stats-detail {
    display: block;
    padding: 10px 12px;
}
.chat-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    gap: 8px;
}
.chat-stats-row-label {
    color: #a07a87;
    flex-shrink: 0;
    font-size: 12px;
}
.chat-stats-row-value {
    color: #5d4751;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
    font-size: 12px;
}
.chat-stats-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 200, 215, 0.7);
}
.chat-stats-total .chat-stats-row-value {
    color: #d6336c;
    font-size: 13px;
}
.chat-stats-refresh {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    color: #d6336c;
    background: #fff;
    border: 1px solid #ffd0dc;
    border-radius: 10px;
    cursor: pointer;
    font-weight: normal;
}
.chat-stats-refresh:active {
    background: #ffe0e9;
}
/* ==================== 📊 数据分析栏 end ==================== */


/* ================= 🎧 iPod 黑胶播放器 ================= */
.ipod-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ipod-overlay[style*="flex"] { display: flex; }

/* 机身：iPod Classic 银白色 + 圆角 + 真实金属光泽 */
.ipod-device {
    position: relative;
    width: 290px;
    height: 480px;
    border-radius: 24px;
    background:
        /* 顶部高光 */
        linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%) no-repeat,
        /* 主色 */
        linear-gradient(155deg, #fafafa 0%, #ececec 30%, #d9d9d9 60%, #c8c8c8 100%);
    box-shadow:
        /* 外部投影 */
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 12px 24px rgba(0, 0, 0, 0.25),
        /* 边缘金属高光 */
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        inset 1px 0 0 rgba(255, 255, 255, 0.4),
        inset -1px 0 0 rgba(0, 0, 0, 0.08);
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
}

/* 机身斜向反光（伪元素） */
.ipod-device::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(165deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.1) 35%,
        rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    z-index: 1;
}

/* 屏幕外框：内嵌进机身的凹陷感 */
.ipod-screen {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 220px;
    border-radius: 8px;
    background: #0a0a0a;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #d4f0ff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 屏幕内阴影蒙版：盖在内容上方，模拟屏幕嵌进机身的凹陷 */
.ipod-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.18),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1),
        inset 1px 0 2px rgba(0, 0, 0, 0.1),
        inset -1px 0 2px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* 屏幕状态栏（粉色渐变） */
.ipod-statusbar {
    background: linear-gradient(180deg, #fbe5ea 0%, #f5becb 50%, #ffc3d1 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}
.ipod-statusbar-icon {
    font-size: 11px;
    opacity: 0.9;
}

/* 内容区 */
.ipod-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: #fdfdfd;
    color: #222;
}

.ipod-page {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.ipod-page.active { display: flex; flex-direction: column; }

/* 滚动条美化 */
.ipod-page::-webkit-scrollbar { width: 4px; }
.ipod-page::-webkit-scrollbar-thumb { background: #f5b8c9; border-radius: 2px; }

/* 主菜单列表 */
.ipod-menu-list {
    width: 100%;
}
.ipod-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    font-size: 14px;
    color: #2a2a2a;
    border-bottom: 1px solid #f0e0e6;
    cursor: pointer;
    transition: background 0.15s;
}
.ipod-menu-item.active {
    background: linear-gradient(180deg, #ffb7c6 0%, #f9d1da 100%);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.ipod-menu-arrow {
    font-size: 18px;
    color: inherit;
    opacity: 0.6;
}

/* 搜索页 */
.ipod-search-box {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: #fdf2f5;
    border-bottom: 1px solid #f0d8e0;
    flex-shrink: 0;
}
.ipod-search-input {
    flex: 1;
    border: 1px solid #f0c4d0;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    background: #fff;
    outline: none;
    color: #222;
    min-width: 0;
}
.ipod-search-input:focus { border-color: #f590a8; box-shadow: 0 0 0 2px rgba(245, 144, 168, 0.18); }
.ipod-search-btn {
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffb6c8 0%, #e87598 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 0 14px;
    cursor: pointer;
    flex-shrink: 0;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(232, 117, 152, 0.4);
}
.ipod-search-btn:active { filter: brightness(0.92); }

/* 添加自定义歌曲页 */
.ipod-page-add {
    padding: 12px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ipod-add-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ipod-add-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #f0c4d0;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    background: #fff;
    outline: none;
    color: #222;
}
.ipod-add-input:focus {
    border-color: #f590a8;
    box-shadow: 0 0 0 2px rgba(245, 144, 168, 0.18);
}
.ipod-add-input::placeholder { color: #c9a4b0; }
.ipod-add-btn {
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffb6c8 0%, #e87598 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    cursor: pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(232, 117, 152, 0.4);
    margin-top: 4px;
}
.ipod-add-btn:active { filter: brightness(0.92); }
.ipod-add-cover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -4px;
}
.ipod-add-or {
    font-size: 11px;
    color: #b89aa3;
    flex-shrink: 0;
}
.ipod-add-cover-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #fff;
    border: 1px dashed #f0c4d0;
    border-radius: 6px;
    color: #c97a90;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1;
    justify-content: center;
}
.ipod-add-cover-btn:hover {
    background: #fdf2f5;
    border-color: #f590a8;
}
.ipod-add-cover-btn.has-file {
    background: linear-gradient(180deg, #ffe5ec 0%, #ffd1dc 100%);
    border-style: solid;
    border-color: #f590a8;
    color: #b85e7e;
    font-weight: 600;
}
.ipod-add-cover-clear {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: #f5b8c9;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}
.ipod-add-cover-clear:active { filter: brightness(0.9); }
.ipod-add-hint {
    font-size: 10px;
    color: #b89aa3;
    line-height: 1.5;
    margin-top: 4px;
    padding: 6px 8px;
    background: #fdf2f5;
    border-radius: 4px;
    border-left: 2px solid #f5b8c9;
}

/* 通用列表（搜索结果、收藏） */
.ipod-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ipod-list-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #f5e6eb;
    cursor: pointer;
    gap: 8px;
    transition: background 0.15s;
}
.ipod-list-item.active {
    background: linear-gradient(180deg, #ffb7c6 0%, #f9d1da 100%);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.ipod-list-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.ipod-list-item-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}
.ipod-list-item-meta {
    font-size: 10px;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    color: inherit;
}
.ipod-list-item-source {
    display: inline-block;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(245, 144, 168, 0.18);
    margin-left: 4px;
    vertical-align: middle;
    color: #b85e7e;
}
.ipod-list-item.active .ipod-list-item-source {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.ipod-list-item-fav {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
    cursor: pointer;
    color: #b8a0a8;
    background: transparent;
}
.ipod-list-item-fav.active {
    color: #ff6699;
}
.ipod-list-item.active .ipod-list-item-fav { color: #fff; }
.ipod-list-item.active .ipod-list-item-fav.active { color: #fff5f8; }

.ipod-empty {
    text-align: center;
    color: #b8a0a8;
    font-size: 12px;
    padding: 30px 20px;
    line-height: 1.6;
}

.ipod-loading {
    text-align: center;
    color: #e87598;
    font-size: 12px;
    padding: 20px;
}

/* 正在播放页（沉浸式：封面铺满，信息浮在底部，隐藏顶部状态栏） */
.ipod-page-playing {
    padding: 0 !important;
    position: relative;
    background: #1a1a1a;
}
/* 在 nowplaying 页时让状态栏消失，封面占据整个屏幕 */
.ipod-screen.ipod-immersive .ipod-statusbar {
    display: none;
}
.ipod-now-fullcover {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f590a8, #ffb6c8);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ipod-now-fullcover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ipod-now-cover-placeholder {
    font-size: 60px;
    color: rgba(255, 255, 255, 0.55);
}

/* 文字+进度条浮层（底部渐变） */
.ipod-now-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 12px 10px;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0.78) 100%);
    color: #fff;
}
.ipod-now-info {
    text-align: center;
    width: 100%;
    margin-bottom: 8px;
}
.ipod-now-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
}
.ipod-now-artist {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ipod-now-progress {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ipod-now-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}
.ipod-now-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ffb6c8, #ff8eaa);
    transition: width 0.2s linear;
    box-shadow: 0 0 6px rgba(255, 142, 170, 0.6);
}
.ipod-now-time {
    flex-shrink: 0;
    min-width: 30px;
    text-align: center;
}

/* 点击轮：iPod 经典圆环（增强光泽和阴影） */
.ipod-wheel {
    position: relative;
    z-index: 2;
    width: 200px;
    height: 200px;
    margin: 22px auto 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, #ffffff 0%, #f8f8f8 25%, #e6e6e6 65%, #c4c4c4 100%);
    box-shadow:
        /* 内部高光 */
        inset 0 3px 6px rgba(255, 255, 255, 0.95),
        inset 0 -4px 10px rgba(0, 0, 0, 0.12),
        inset 4px 0 8px rgba(255, 255, 255, 0.5),
        inset -4px 0 8px rgba(0, 0, 0, 0.06),
        /* 外部投影 */
        0 2px 4px rgba(0, 0, 0, 0.18),
        0 6px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
/* 圆环高光（伪元素） */
.ipod-wheel::before {
    content: '';
    position: absolute;
    top: 6%;
    left: 12%;
    width: 76%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

/* 中心圆按钮（更立体的球形） */
.ipod-wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 30%, #ffffff 0%, #f5f5f5 35%, #d8d8d8 75%, #b8b8b8 100%);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 1),
        inset 0 -3px 6px rgba(0, 0, 0, 0.15),
        0 3px 8px rgba(0, 0, 0, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ipod-wheel-center:active {
    transform: translate(-50%, -50%) scale(0.96);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        inset 0 -1px 2px rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.1);
}
.ipod-center-heart {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(232, 117, 152, 0.4));
    transition: transform 0.2s;
}
.ipod-wheel-center:hover .ipod-center-heart { transform: scale(1.08); }

/* 4 个外圈按钮（统一尺寸，SVG 居中） */
.ipod-wheel-btn {
    position: absolute;
    color: #a8a8a8;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
    z-index: 1;
}
.ipod-wheel-btn:active { background: rgba(0, 0, 0, 0.05); }
.ipod-wheel-btn svg { display: block; }
.ipod-wheel-btn svg path,
.ipod-wheel-btn svg rect { transition: fill 0.15s; }

.ipod-wheel-up {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}
.ipod-wheel-prev {
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
}
.ipod-wheel-next {
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
}
.ipod-wheel-play {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.ipod-tip {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* 黑胶暂停状态：停止旋转 */
.vinyl-center-spin.vinyl-paused {
    animation-play-state: paused !important;
}

/* 移动端响应：屏幕小的话整体缩小 */
@media (max-height: 640px) {
    .ipod-device {
        width: 250px;
        height: 420px;
    }
    .ipod-screen { height: 190px; }
    .ipod-wheel { width: 170px; height: 170px; margin-top: 16px; }
    .ipod-wheel-center { width: 64px; height: 64px; }
    .ipod-center-heart { width: 30px !important; height: 30px !important; }
    .ipod-wheel-btn { width: 32px; height: 32px; }
    .ipod-wheel-btn svg { width: 22px !important; height: 22px !important; }
}


/* ===== 分享音乐 - 收藏列表 ===== */
/* 旧版的 .share-music-tabs / .share-music-tab 切换样式已删除（手动输入 tab 下线后只剩单面板，不再需要 tab 切换） */
.share-music-favs {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.share-music-favs-list {
    display: flex;
    flex-direction: column;
}
.share-music-favs-empty {
    text-align: center;
    color: #aaa;
    font-size: 13px;
    padding: 40px 20px;
    line-height: 1.7;
}
.share-music-fav-item {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid #f5e6eb;
    cursor: pointer;
    transition: background 0.15s;
    gap: 10px;
}
.share-music-fav-item:hover { background: #fdf2f5; }
.share-music-fav-item:active { background: #fbe5ec; }
.share-music-fav-info {
    flex: 1;
    min-width: 0;
}
.share-music-fav-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-music-fav-artist {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-music-fav-send {
    flex-shrink: 0;
    background: linear-gradient(180deg, #ffb6c8 0%, #e87598 100%);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 2px rgba(232, 117, 152, 0.4);
}
.share-music-fav-send:active { filter: brightness(0.92); }


/* 分享整个歌单按钮 */
.share-playlist-btn {
    display: block;
    width: 100%;
    border: 1px dashed #f0c4d0;
    background: #fdf2f5;
    color: #b85e7e;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.share-playlist-btn:hover {
    background: #fbe5ec;
    border-style: solid;
    border-color: #f590a8;
    color: #e87598;
}
.share-playlist-btn:active { filter: brightness(0.95); }


/* 正在播放页 - 左上角浮动收藏爱心（极简版） */
.ipod-now-fav {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
}
.ipod-now-fav:active { transform: scale(0.88); }

/* 默认（未收藏）：浅粉色描边空心爱心 */
.ipod-now-fav svg path {
    fill: none;
    stroke: #ffb6c8;
    stroke-width: 2;
    transition: fill 0.2s;
}

/* 已收藏：浅粉色实心爱心 */
.ipod-now-fav.is-fav svg path {
    fill: #ffb6c8;
    stroke: #ffb6c8;
}


/* ================= 📷 Blog 博客功能（INS 风） ================= */
/* 配色：粉色 + 白色 + 深灰文字 */
:root {
    --blog-pink: #ff7aa6;
    --blog-pink-soft: #ffd1dc;
    --blog-pink-bg: #ffeef3;
    --blog-pink-hover: #ff5e92;
    --blog-text-main: #262626;
    --blog-text-sub: #8e8e8e;
    --blog-text-light: #c7c7c7;
    --blog-border: #efefef;
    --blog-divider: #f5f5f5;
    --blog-bg: #ffffff;
    --blog-card-shadow: 0 2px 8px rgba(255, 122, 166, 0.08);
}

#blog-layer {
    background: var(--blog-bg);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    color: var(--blog-text-main);
}

/* --- 顶栏 --- */
.blog-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    /* 🍎 iOS 全屏 / 刘海机用 env(safe-area-inset-top)；
       普通浏览器 env 值为 0，给一个 12px 兜底，避免右上角按钮贴顶被状态栏挤压 */
    height: calc(50px + max(env(safe-area-inset-top), 12px));
    padding-top: max(env(safe-area-inset-top), 12px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--blog-border);
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
}

.blog-back {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--blog-text-main);
    cursor: pointer;
    user-select: none;
    margin-right: 6px;
}

.blog-logo {
    font-family: 'Fredoka', 'Billabong', cursive, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fc93b5;
    flex: 1;
}

.blog-topbar-actions {
    display: flex;
    gap: 10px;
}

.blog-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--blog-text-main);
    transition: background 0.2s;
}

.blog-icon-btn:hover,
.blog-icon-btn:active {
    background: var(--blog-pink-bg);
    color: var(--blog-pink);
}

/* 📷 角色 Profile 顶栏：博客生图开关
   - is-on：粉色高亮，提示当前会调用生图
   - is-off：灰色，提示已省钱关掉 */
.blog-imggen-toggle.is-on {
    color: var(--blog-pink);
    background: var(--blog-pink-bg);
}
.blog-imggen-toggle.is-off {
    color: #9ca3af;
    background: transparent;
}
.blog-imggen-toggle.is-off:hover,
.blog-imggen-toggle.is-off:active {
    color: #6b7280;
    background: rgba(0, 0, 0, 0.05);
}

/* --- 账号切换栏 --- */
.blog-accountbar {
    display: flex;
    gap: 14px;
    padding: 14px 14px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--blog-border);
    scrollbar-width: none;
    /* 折叠/展开过渡 */
    max-height: 140px;
    transition: max-height 0.28s ease, padding 0.28s ease, opacity 0.2s ease, border-color 0.2s ease;
    will-change: max-height;
}

.blog-accountbar.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-bottom-color: transparent;
    pointer-events: none;
}

.blog-accountbar::-webkit-scrollbar {
    display: none;
}

/* 顶栏右侧账号切换按钮：展开时高亮 + 旋转 */
.blog-acctbar-toggle svg {
    transition: transform 0.25s ease;
}

.blog-acctbar-toggle.active {
    background: var(--blog-pink-bg);
    color: var(--blog-pink);
}

.blog-acctbar-toggle.active svg {
    transform: rotate(90deg);
}

.blog-account-chip {
    flex-shrink: 0;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.blog-account-avatar-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 2px;
    background: var(--blog-divider);
    transition: transform 0.15s;
}

.blog-account-chip:active .blog-account-avatar-wrap {
    transform: scale(0.95);
}

.blog-account-chip.active .blog-account-avatar-wrap {
    background: #fc93b5;
    padding: 2.5px;
}

.blog-account-avatar-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid #fff;
    display: block;
}

.blog-account-name {
    font-size: 11px;
    color: var(--blog-text-main);
    max-width: 64px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-account-chip.active .blog-account-name {
    color: var(--blog-pink);
    font-weight: 600;
}

.blog-account-chip.add-chip .blog-account-avatar-wrap {
    background: var(--blog-pink-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blog-pink);
    font-size: 28px;
    font-weight: 300;
    border: 2px dashed var(--blog-pink);
    box-sizing: border-box;
}

.blog-account-chip.add-chip .blog-account-avatar-wrap::after {
    content: "+";
}

.blog-account-chip.add-chip .blog-account-avatar-wrap img {
    display: none;
}

.blog-account-chip.add-chip .blog-account-name {
    color: var(--blog-pink);
}

/* --- Tab 切换 --- */
.blog-tabs {
    display: flex;
    border-bottom: 1px solid var(--blog-border);
    background: #fff;
    position: sticky;
    top: calc(50px + env(safe-area-inset-top));
    z-index: 40;
}

.blog-tab {
    flex: 1;
    text-align: center;
    padding: 13px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--blog-text-sub);
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.blog-tab.active {
    color: var(--blog-text-main);
}

.blog-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--blog-pink);
    border-radius: 1px;
}

/* --- Feed 流 --- */
.blog-feed {
    padding-bottom: 80px;
    min-height: 60vh;
}

.blog-empty {
    padding: 80px 30px;
    text-align: center;
    color: var(--blog-text-sub);
}

.blog-empty-icon {
    font-size: 48px;
    margin-bottom: 14px;
    opacity: 0.6;
}

.blog-empty-title {
    font-size: 16px;
    color: var(--blog-text-main);
    margin-bottom: 6px;
    font-weight: 500;
}

.blog-empty-sub {
    font-size: 13px;
    color: var(--blog-text-light);
}

/* --- 帖子卡片（仿 INS） --- */
.blog-post {
    background: #fff;
    border-bottom: 1px solid var(--blog-divider);
    margin-bottom: 4px;
}

.blog-post-header {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 10px;
}

/* 自己主页帖子卡片：不显示头像和昵称，只显示时间 */
.blog-post-header-compact {
    padding: 10px 14px 6px;
}

.blog-post-header-compact .blog-post-time {
    flex: 1;
    margin-top: 0;
}

.blog-post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blog-divider);
    cursor: pointer;
}

.blog-post-meta {
    flex: 1;
    min-width: 0;
}

.blog-post-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--blog-text-main);
    line-height: 1.2;
}

.blog-post-time {
    font-size: 11px;
    color: var(--blog-text-sub);
    margin-top: 2px;
}

.blog-post-more {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--blog-text-sub);
    font-size: 18px;
    line-height: 1;
}

.blog-post-text {
    padding: 0 14px 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--blog-text-main);
    white-space: pre-wrap;
    word-break: break-word;
}

.blog-post-images {
    width: 100%;
    background: #fafafa;
    display: grid;
    gap: 2px;
}

.blog-post-images.count-1 {
    grid-template-columns: 1fr;
}

/* 单图：保持原始比例完整显示（不裁切），只限制最大高度避免竖图过长 */
.blog-post-images.count-1 img {
    aspect-ratio: auto;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    object-position: center;
}

.blog-post-images.count-2 {
    grid-template-columns: 1fr 1fr;
}

.blog-post-images.count-2 img {
    aspect-ratio: 1 / 1;
}

.blog-post-images.count-3,
.blog-post-images.count-4,
.blog-post-images.count-5,
.blog-post-images.count-6,
.blog-post-images.count-7,
.blog-post-images.count-8,
.blog-post-images.count-9 {
    grid-template-columns: 1fr 1fr 1fr;
}

.blog-post-images.count-3 img,
.blog-post-images.count-4 img,
.blog-post-images.count-5 img,
.blog-post-images.count-6 img,
.blog-post-images.count-7 img,
.blog-post-images.count-8 img,
.blog-post-images.count-9 img {
    aspect-ratio: 1 / 1;
}

.blog-post-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    background: var(--blog-divider);
}

/* --- 互动栏（点赞、评论、召唤、转发） --- */
.blog-post-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 14px 6px;
}

.blog-action-btn {
    cursor: pointer;
    color: var(--blog-text-main);
    transition: transform 0.15s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 统一所有按钮的视觉高度（图标 + 数字 都是 24px 行高） */
    line-height: 24px;
}

.blog-action-btn svg {
    /* 所有图标统一尺寸 + 描边粗细，避免视觉上忽粗忽细 */
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
    stroke-width: 1.6;
}

.blog-action-btn:active {
    transform: scale(0.85);
}

/* 已点赞：粉色实心 + 描边同色 */
.blog-action-btn.liked svg path,
.blog-action-btn.liked svg {
    fill: var(--blog-pink);
    stroke: var(--blog-pink);
}

/* 计数文字（爱心数 / 评论数） */
.blog-action-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--blog-text-main);
    line-height: 1;
    /* 数字按钮整体可点（爱心 / 评论），用同一个手感 */
    user-select: none;
}

.blog-post-stats {
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-main);
}

.blog-post-comments-preview {
    padding: 2px 14px 12px;
    font-size: 13px;
    color: var(--blog-text-main);
    line-height: 1.5;
}

.blog-comment-line {
    margin-bottom: 3px;
}

.blog-comment-line .name {
    font-weight: 600;
    margin-right: 6px;
}

.blog-comment-line .npc-tag {
    font-size: 10px;
    color: var(--blog-text-light);
    background: var(--blog-divider);
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 4px;
    font-weight: 500;
}

.blog-comments-more {
    color: var(--blog-text-sub);
    cursor: pointer;
    margin-top: 4px;
    font-weight: 400;
}


/* ================= 📷 Blog - 弹窗 / 表单 ================= */
.blog-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}

.blog-modal[style*="display: flex"],
.blog-modal[style*="display:flex"] {
    pointer-events: auto;
}

.blog-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    animation: blogFadeIn 0.2s ease;
}

.blog-modal-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: blogSlideUp 0.25s cubic-bezier(.2, .9, .3, 1);
    padding-bottom: env(safe-area-inset-bottom);
}

@keyframes blogFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes blogSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.blog-modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--blog-border);
    position: relative;
}

.blog-modal-title {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--blog-text-main);
}

.blog-modal-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blog-text-sub);
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
}

.blog-modal-close:hover {
    background: var(--blog-divider);
}

.blog-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

.blog-modal-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--blog-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ============ 角色发帖 - 风格档位选择 sheet ============ */
.blog-style-picker-card {
    max-width: 480px;
}

.blog-style-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-style-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--blog-border);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.blog-style-item:hover {
    border-color: var(--blog-pink);
    background: var(--blog-pink-bg);
}

.blog-style-item:active {
    transform: scale(0.99);
}

.blog-style-emoji {
    font-size: 26px;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.blog-style-meta {
    flex: 1;
    min-width: 0;
}

.blog-style-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--blog-text-main);
    margin-bottom: 4px;
}

.blog-style-desc {
    font-size: 12px;
    color: var(--blog-text-sub);
    line-height: 1.4;
}

/* ============ 转发到聊天弹窗 ============ */
.blog-forward-card {
    height: 88vh;
    max-height: 88vh;
}

.blog-forward-toolbar {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--blog-border);
    background: #fff;
}

.blog-forward-search {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--blog-border);
    border-radius: 18px;
    padding: 7px 12px;
    font-size: 13px;
    background: #f6f6f6;
    color: var(--blog-text-main);
    outline: none;
}

.blog-forward-search:focus {
    border-color: var(--blog-pink);
    background: #fff;
}

.blog-forward-toolbar-btn {
    flex-shrink: 0;
    border: 1px solid var(--blog-border);
    border-radius: 14px;
    padding: 0 12px;
    height: 30px;
    font-size: 12px;
    background: #fff;
    color: var(--blog-text-main);
    cursor: pointer;
}

.blog-forward-toolbar-btn:active {
    background: var(--blog-pink-bg);
    color: var(--blog-pink);
    border-color: var(--blog-pink);
}

.blog-forward-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.blog-forward-group {
    border-bottom: 1px solid var(--blog-divider);
}

.blog-forward-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fafafa;
    font-size: 12px;
    color: var(--blog-text-sub);
    cursor: pointer;
    user-select: none;
}

.blog-forward-group-header .group-name {
    flex: 1;
    font-weight: 600;
    color: var(--blog-text-main);
}

.blog-forward-group-header .group-count {
    font-size: 11px;
    color: var(--blog-text-sub);
}

.blog-forward-group-toggle {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blog-text-sub);
    transition: transform 0.18s ease;
}

.blog-forward-group.collapsed .blog-forward-group-toggle {
    transform: rotate(-90deg);
}

.blog-forward-group.collapsed .blog-forward-group-list {
    display: none;
}

.blog-forward-group-pickall {
    border: 1px solid var(--blog-border);
    border-radius: 12px;
    padding: 0 10px;
    height: 24px;
    font-size: 11px;
    background: #fff;
    color: var(--blog-text-main);
    cursor: pointer;
}

.blog-forward-group-pickall.active {
    background: var(--blog-pink);
    color: #fff;
    border-color: var(--blog-pink);
}

.blog-forward-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.blog-forward-item:active {
    background: var(--blog-pink-bg);
}

.blog-forward-item.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.blog-forward-item-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blog-divider);
    flex-shrink: 0;
}

.blog-forward-item-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--blog-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-forward-item-type {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--blog-text-sub);
    border: 1px solid var(--blog-border);
    border-radius: 8px;
    padding: 1px 6px;
}

.blog-forward-checkbox {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--blog-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.15s;
}

.blog-forward-item.selected .blog-forward-checkbox {
    background: var(--blog-pink);
    border-color: var(--blog-pink);
    color: #fff;
}

.blog-forward-empty {
    text-align: center;
    color: var(--blog-text-sub);
    font-size: 13px;
    padding: 40px 16px;
}

.blog-forward-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--blog-border);
    background: #fff;
}

.blog-forward-count {
    flex: 1;
    font-size: 13px;
    color: var(--blog-text-sub);
}

.blog-forward-count #blogForwardCountNum {
    font-weight: 600;
    color: var(--blog-pink);
}

.blog-forward-footer .blog-btn {
    min-width: 80px;
}

/* ============ 聊天里的博客转发卡片 ============ */
.blog-card-bubble {
    background: #ffffff;
    border: 1px solid #f0e0e6;
    border-radius: 14px;
    padding: 12px;
    max-width: 280px;
    min-width: 220px;
    user-select: none;
    box-shadow: 0 1px 2px rgba(252, 147, 181, 0.08);
}

.blog-card-bubble-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 2px;
}

.blog-card-bubble-icon {
    font-size: 14px;
    color: #d63384;
}

.blog-card-bubble-title {
    flex: 1;
    font-family: 'Fredoka', 'Billabong', cursive, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fc93b5;
    line-height: 1;
}

.blog-card-bubble-account {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 0 2px;
}

.blog-card-bubble-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
}

.blog-card-bubble-name {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-card-bubble-text {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    padding: 0 2px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
}

/* 图片网格：1 张独占、2 张并排、3 张三宫格 */
.blog-card-bubble-images {
    display: grid;
    gap: 3px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 4px;
    background: #f5f5f5;
}

.blog-card-bubble-images.count-1 { grid-template-columns: 1fr; }
.blog-card-bubble-images.count-2 { grid-template-columns: 1fr 1fr; }
.blog-card-bubble-images.count-3 { grid-template-columns: 1fr 1fr 1fr; }

.blog-card-bubble-images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.blog-card-bubble.deleted {
    background: #f8f8f8;
    border-color: #ddd;
    color: #999;
}

.blog-card-bubble.deleted .blog-card-bubble-title {
    color: #999;
}

/* 原帖已删除：纯文字提示，跟随用户字体 */
.blog-card-deleted-text {
    font-family: inherit;
    font-size: 13px;
    color: #9ca3af;
}

/* 卡片底部"查看详情"行 - 点击跳到帖子详情页 */
.blog-card-bubble-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0e0e6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 12px;
    color: #d63384;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}

.blog-card-bubble-footer:active {
    opacity: 0.6;
}

.blog-card-bubble-footer svg {
    flex-shrink: 0;
}

/* 表单 */
.blog-form-group {
    margin-bottom: 16px;
}

.blog-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-main);
    margin-bottom: 8px;
}

.blog-input,
.blog-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--blog-border);
    background: #fafafa;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--blog-text-main);
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.blog-input:focus,
.blog-textarea:focus {
    border-color: var(--blog-pink);
    background: #fff;
}

.blog-textarea {
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

/* 标签 chip 行 */
.blog-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-tag-chip {
    padding: 6px 14px;
    border-radius: 16px;
    background: var(--blog-divider);
    color: var(--blog-text-main);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s;
}

.blog-tag-chip.active {
    background: var(--blog-pink);
    color: #fff;
}

/* 头像上传 */
.blog-avatar-uploader {
    display: inline-block;
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    background: var(--blog-divider);
}

.blog-avatar-uploader img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.blog-avatar-uploader:hover .blog-avatar-overlay,
.blog-avatar-uploader:active .blog-avatar-overlay {
    opacity: 1;
}

/* 通用按钮 */
.blog-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s, transform 0.1s;
}

.blog-btn:active {
    transform: scale(0.97);
}

.blog-btn-primary {
    background: var(--blog-pink);
    color: #fff;
}

.blog-btn-primary:hover {
    filter: brightness(1.05);
}

.blog-btn-ghost {
    background: var(--blog-divider);
    color: var(--blog-text-main);
}

.blog-btn-danger {
    background: #fff;
    color: #ed4956;
    border: 1px solid #ed4956;
}

/* 账号管理列表项 */
.blog-acct-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--blog-divider);
}

.blog-acct-item:last-child {
    border-bottom: none;
}

.blog-acct-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blog-divider);
    flex-shrink: 0;
}

.blog-acct-item-info {
    flex: 1;
    min-width: 0;
}

.blog-acct-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--blog-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-acct-item-badge {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 8px;
    font-weight: 500;
}

.blog-acct-item-badge.main {
    background: var(--blog-pink);
    color: #fff;
}

.blog-acct-item-badge.alt {
    background: var(--blog-pink-bg);
    color: var(--blog-pink);
}

.blog-acct-item-bio {
    font-size: 12px;
    color: var(--blog-text-sub);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-acct-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.blog-acct-item-btn {
    border: none;
    background: var(--blog-divider);
    color: var(--blog-text-main);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

.blog-acct-item-btn.danger {
    background: #fff0f1;
    color: #ed4956;
}


/* ================= 📷 Blog - 发帖弹窗 ================= */
.blog-composer-as {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--blog-pink-bg);
    border-radius: 10px;
    margin-bottom: 12px;
}

.blog-composer-as img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.blog-composer-as-text {
    font-size: 13px;
    color: var(--blog-text-main);
}

.blog-composer-as-text b {
    color: var(--blog-pink);
    font-weight: 600;
}

.blog-composer-counter {
    text-align: right;
    font-size: 11px;
    color: var(--blog-text-light);
    margin-top: 6px;
}

.blog-composer-counter.over {
    color: #ed4956;
}

.blog-composer-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 12px;
}

.blog-composer-images:empty {
    margin-top: 0;
}

.blog-composer-image-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--blog-divider);
}

.blog-composer-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-composer-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.blog-composer-toolbar {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.blog-composer-tool {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--blog-pink);
    border-radius: 10px;
    color: var(--blog-pink);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    background: var(--blog-pink-bg);
    transition: background 0.15s;
}

.blog-composer-tool:active {
    background: #ffe1e9;
}

.blog-composer-tool-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--blog-text-light);
}

.blog-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ================= 📷 Blog - Profile 页 ================= */
#blog-profile-layer {
    position: relative;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0;
    background: var(--blog-bg);
    overflow: hidden;
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    color: var(--blog-text-main);
    display: none;
    flex-direction: column;
}

#blog-profile-layer.active {
    display: flex;
}

.blog-profile-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px;
    position: relative;
}

/* 下拉刷新提示条 */
.blog-pull-hint {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--blog-pink);
    font-size: 13px;
    transition: height 0.2s, opacity 0.2s;
    background: linear-gradient(180deg, var(--blog-pink-bg) 0%, #fff 100%);
}

.blog-pull-hint.active {
    height: 60px;
}

.blog-pull-hint-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--blog-pink-soft);
    border-top-color: var(--blog-pink);
    border-radius: 50%;
    animation: blogSpin 0.7s linear infinite;
}

@keyframes blogSpin {
    to { transform: rotate(360deg); }
}

/* Profile 头部 */
.blog-profile-header {
    padding: 24px 18px 16px;
    border-bottom: 1px solid var(--blog-divider);
}

.blog-profile-top {
    display: flex;
    align-items: center;
    gap: 24px;
}

.blog-profile-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blog-divider);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--blog-pink-soft);
    flex-shrink: 0;
}

.blog-profile-stats {
    flex: 1;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.blog-profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.blog-profile-stat-num {
    font-size: 17px;
    font-weight: 600;
    color: var(--blog-text-main);
    line-height: 1.2;
}

.blog-profile-stat-label {
    font-size: 12px;
    color: var(--blog-text-sub);
    margin-top: 2px;
}

.blog-profile-meta {
    margin-top: 14px;
}

.blog-profile-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--blog-text-main);
}

.blog-profile-tag {
    font-size: 11px;
    color: var(--blog-pink);
    background: var(--blog-pink-bg);
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 6px;
    font-weight: 500;
}

.blog-profile-bio {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--blog-text-main);
    white-space: pre-wrap;
}

.blog-profile-actions {
    margin-top: 14px;
    display: flex;
    gap: 8px;
}

.blog-profile-btn {
    flex: 1;
    border: none;
    background: var(--blog-divider);
    color: var(--blog-text-main);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0;
    border-radius: 8px;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s;
}

.blog-profile-btn:active {
    transform: scale(0.98);
}

.blog-profile-btn.primary {
    background: var(--blog-pink);
    color: #fff;
}

.blog-profile-btn.followed {
    background: var(--blog-divider);
    color: var(--blog-text-main);
}

/* 装饰态（不可点的 span，如"已关注"）：span 默认不响应 flex/上下 padding，
   这里补上 flex 居中，让文字与底框水平垂直都对齐 */
.blog-profile-btn.static {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* tabs */
.blog-profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--blog-border);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 5;
}

.blog-profile-tab {
    flex: 1;
    padding: 11px 0;
    display: flex;
    justify-content: center;
    color: var(--blog-text-sub);
    cursor: pointer;
    position: relative;
}

.blog-profile-tab.active {
    color: var(--blog-text-main);
}

.blog-profile-tab.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: var(--blog-text-main);
}

/* 九宫格 */
.blog-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px 0;
}

.blog-profile-grid-item {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--blog-divider);
    overflow: hidden;
    cursor: pointer;
}

.blog-profile-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-profile-grid-item-text {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--blog-pink-bg), #fff8fa);
    color: var(--blog-text-main);
    font-size: 12px;
    line-height: 1.5;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}

.blog-profile-grid-item-multi {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.blog-profile-grid-item-likes {
    position: absolute;
    bottom: 6px;
    left: 6px;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0,0,0,0.25);
    padding: 1px 6px;
    border-radius: 8px;
}

/* 角色发帖 loading 浮层 */
.blog-profile-loading-mask {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.92);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}

.blog-profile-loading-card {
    background: #fff;
    border: 1px solid var(--blog-pink-soft);
    box-shadow: 0 10px 30px rgba(255,122,166,0.15);
    border-radius: 18px;
    padding: 28px 32px;
    text-align: center;
    max-width: 280px;
}

.blog-profile-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--blog-pink-soft);
    border-top-color: var(--blog-pink);
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: blogSpin 0.7s linear infinite;
}

.blog-profile-loading-text {
    font-size: 13px;
    color: var(--blog-text-main);
    line-height: 1.6;
}


/* ================= 📷 Blog - 帖子详情页 ================= */
#blog-post-detail-layer {
    position: relative;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0;
    background: var(--blog-bg);
    overflow: hidden;
    display: none;
    flex-direction: column;
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    color: var(--blog-text-main);
}

#blog-post-detail-layer.active {
    display: flex;
}

.blog-post-detail-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px;
}

.blog-post-detail-body .blog-post {
    border-bottom: 8px solid var(--blog-divider);
}

/* 评论分隔头 */
.blog-detail-comments-header {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-main);
    border-bottom: 1px solid var(--blog-divider);
}

/* 评论列表 */
.blog-comment-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--blog-divider);
}

/* 顶层评论一组（父 + 子回复块）整体作为一个分组：
   - 由 wrapper 自己画底部分隔线，把"父+所有子"封进同一块；
   - 父级 .blog-comment-item 自身的 border-bottom 取消，避免和子回复之间出现一条多余的横线。 */
[data-toplevel] {
    border-bottom: 1px solid var(--blog-divider);
}
[data-toplevel] > .blog-comment-item {
    border-bottom: none;
}

.blog-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blog-divider);
    flex-shrink: 0;
}

.blog-comment-body {
    flex: 1;
    min-width: 0;
}

.blog-comment-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.blog-comment-name .npc-tag {
    font-size: 10px;
    background: var(--blog-divider);
    color: var(--blog-text-light);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 500;
}

.blog-comment-name .author-tag {
    font-size: 10px;
    background: var(--blog-pink-bg);
    color: var(--blog-pink);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
}

.blog-comment-content {
    font-size: 14px;
    color: var(--blog-text-main);
    line-height: 1.5;
    margin-top: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}

.blog-comment-meta {
    font-size: 11px;
    color: var(--blog-text-sub);
    margin-top: 4px;
    display: flex;
    gap: 14px;
}

.blog-comment-meta span {
    cursor: pointer;
}

.blog-comment-meta span:hover {
    color: var(--blog-pink);
}

/* 子回复 */
.blog-comment-replies {
    /* 缩进基准 = 父评论 padding-left(14) + 父头像宽(36) + gap(10) = 60，
       让子回复头像视觉对齐到父评论"昵称/内容起始"的那一列。 */
    margin: 4px 14px 12px 60px;
    padding-left: 10px;
    border-left: 2px solid var(--blog-divider);
}

.blog-comment-replies .blog-comment-item {
    padding: 6px 0;
    border-bottom: none;
    gap: 8px;
}

.blog-comment-replies .blog-comment-avatar {
    width: 26px;
    height: 26px;
}

.blog-comment-replies .blog-comment-name {
    font-size: 12px;
}

.blog-comment-replies .blog-comment-content {
    font-size: 13px;
}

.blog-detail-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--blog-text-light);
    font-size: 13px;
}

/* 底部评论栏 */
.blog-comment-bar {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--blog-border);
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-comment-bar-as {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    background: var(--blog-divider);
}

.blog-comment-bar-as img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-comment-input {
    flex: 1;
    border: 1px solid var(--blog-border);
    background: #fafafa;
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    color: var(--blog-text-main);
    min-width: 0;
}

.blog-comment-input:focus {
    border-color: var(--blog-pink);
    background: #fff;
}

.blog-comment-send {
    flex-shrink: 0;
    border: none;
    background: var(--blog-pink);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
}

.blog-comment-send:active {
    transform: scale(0.96);
}

.blog-comment-send[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* 切换评论账号浮层 */
.blog-comment-acct-switcher {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.blog-comment-acct-switcher-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    max-height: 60vh;
    overflow-y: auto;
}

.blog-comment-acct-switcher-title {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--blog-text-main);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--blog-divider);
    margin-bottom: 4px;
}

.blog-comment-acct-switcher-list .blog-acct-item {
    cursor: pointer;
}

.blog-comment-acct-switcher-list .blog-acct-item.active {
    background: var(--blog-pink-bg);
    border-radius: 8px;
    padding: 10px 8px;
}

.blog-comment-acct-switcher-list .blog-acct-item.active .blog-acct-item-name {
    color: var(--blog-pink);
}


/* ================= 📷 Blog - 推荐 tab 角色头像横滚条 ================= */
.blog-explore-charstrip-wrap {
    background: #fff;
    border-bottom: 1px solid var(--blog-divider);
    padding: 12px 0 14px;
}

.blog-explore-charstrip-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-main);
    padding: 0 14px 8px;
}

.blog-explore-charstrip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0 14px;
}

.blog-explore-charstrip::-webkit-scrollbar {
    display: none;
}

.blog-char-chip {
    flex-shrink: 0;
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.15s;
}

.blog-char-chip:active {
    transform: scale(0.95);
}

.blog-char-chip-avatar-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fc93b5;
    padding: 2px;
}

.blog-char-chip-avatar-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid #fff;
    display: block;
}

.blog-char-chip-empty-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: #ddd;
    border: 2px solid #fff;
    border-radius: 50%;
}

.blog-char-chip-name {
    font-size: 11px;
    color: var(--blog-text-main);
    max-width: 70px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.blog-char-chip-count {
    font-size: 10px;
    color: var(--blog-text-sub);
    line-height: 1;
}


/* ================= 📷 Blog - 重构布局 V2 ================= */
/* 主页：当前账号的 profile 直接显示在主页 */
#blog-layer {
    position: relative;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#blog-layer.active {
    display: flex;
}

.blog-self-profile {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    background: var(--blog-bg);
}

/* self-profile 头部块 */
.blog-self-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--blog-divider);
    background: #fff;
}

.blog-self-top {
    display: flex;
    align-items: center;
    gap: 24px;
}

.blog-self-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blog-divider);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #fc93b5;
    flex-shrink: 0;
}

.blog-self-stats {
    flex: 1;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.blog-self-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.blog-self-stat-num {
    font-size: 16px;
    font-weight: 600;
    color: var(--blog-text-main);
    line-height: 1.2;
}

.blog-self-stat-label {
    font-size: 12px;
    color: var(--blog-text-sub);
    margin-top: 2px;
}

.blog-self-meta {
    margin-top: 12px;
}

.blog-self-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--blog-text-main);
}

.blog-self-tag {
    font-size: 11px;
    color: #fc93b5;
    background: #ffeef5;
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 6px;
    font-weight: 500;
}

.blog-self-bio {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--blog-text-main);
    white-space: pre-wrap;
}

/* self-profile 帖子列表（与主 Feed 卡片一致） */
.blog-self-posts,
.blog-profile-feed {
    background: #fff;
}

.blog-self-empty {
    padding: 60px 30px;
    text-align: center;
    color: var(--blog-text-sub);
    background: #fff;
}

.blog-self-empty-icon {
    font-size: 42px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.blog-self-empty-title {
    font-size: 14px;
    color: var(--blog-text-main);
    margin-bottom: 4px;
    font-weight: 500;
}

.blog-self-empty-sub {
    font-size: 12px;
    color: var(--blog-text-light);
}

/* ================= 底部 tab bar ================= */
.blog-bottom-tabs {
    flex-shrink: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--blog-border);
    display: flex;
    align-items: center;
}

.blog-bottom-tab {
    flex: 1;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--blog-text-sub);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.blog-bottom-tab:active {
    transform: scale(0.95);
}

.blog-bottom-tab span {
    font-size: 10px;
    font-weight: 500;
}

.blog-bottom-tab.active {
    color: #fc93b5;
}

.blog-bottom-tab-publish {
    flex: 1;
    height: 60px;
    cursor: pointer;
}

.blog-bottom-publish-fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fc93b5;
    box-shadow: 0 4px 14px rgba(252, 147, 181, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: transform 0.15s, filter 0.15s;
}

.blog-bottom-tab-publish:active .blog-bottom-publish-fab {
    transform: scale(0.92);
    filter: brightness(0.95);
}

/* ================= 我的关注页 ================= */
#blog-following-layer {
    position: relative;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0;
    background: var(--blog-bg);
    overflow: hidden;
    display: none;
    flex-direction: column;
}

#blog-following-layer.active {
    display: flex;
}

.blog-following-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.blog-following-section {
    border-top: 8px solid var(--blog-divider);
}

.blog-following-section:first-child {
    border-top: none;
}

.blog-following-section-title {
    padding: 14px 16px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-sub);
}

.blog-following-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.blog-following-item:active {
    background: #fafafa;
}

.blog-following-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--blog-divider);
    flex-shrink: 0;
}

.blog-following-info {
    flex: 1;
    min-width: 0;
}

.blog-following-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--blog-text-main);
    line-height: 1.2;
}

.blog-following-bio {
    font-size: 12px;
    color: var(--blog-text-sub);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-following-action {
    flex-shrink: 0;
    border: none;
    background: var(--blog-divider);
    color: var(--blog-text-main);
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
}

.blog-following-action.unfollowed {
    background: #fc93b5;
    color: #fff;
}

/* ================= 发现页（路人帖 Feed） ================= */
#blog-discover-layer {
    position: relative;
    height: 100vh;
    height: 100dvh;
    padding-bottom: 0;
    background: var(--blog-bg);
    overflow: hidden;
    display: none;
    flex-direction: column;
}

#blog-discover-layer.active {
    display: flex;
}

.blog-discover-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--blog-bg);
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.blog-discover-posts {
    display: flex;
    flex-direction: column;
}

/* 复用 .blog-post 卡片样式，发现页里加点上下间距 */
.blog-discover-posts .blog-post {
    margin-bottom: 8px;
}

/* 空状态 */
.blog-discover-empty {
    padding: 100px 30px 60px;
    text-align: center;
    color: var(--blog-text-sub);
}

.blog-discover-empty-icon {
    font-size: 48px;
    margin-bottom: 14px;
    opacity: 0.55;
}

.blog-discover-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--blog-text-main);
    margin-bottom: 6px;
}

.blog-discover-empty-sub {
    font-size: 12px;
    color: var(--blog-text-light);
    line-height: 1.6;
}

/* 加载中 */
.blog-discover-loading {
    padding: 100px 30px 60px;
    text-align: center;
    color: var(--blog-text-sub);
}

.blog-discover-loading-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    border: 3px solid var(--blog-divider);
    border-top-color: #fc93b5;
    border-radius: 50%;
    animation: blog-discover-spin 0.9s linear infinite;
}

.blog-discover-loading-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--blog-text-main);
    margin-bottom: 6px;
}

.blog-discover-loading-sub {
    font-size: 12px;
    color: var(--blog-text-light);
}

@keyframes blog-discover-spin {
    to { transform: rotate(360deg); }
}

/* 顶栏刷新按钮按下时旋转 */
#blogDiscoverRefreshBtn.spinning svg {
    animation: blog-discover-spin 0.9s linear infinite;
}

/* 许愿弹窗 hint 文案 */
.blog-wish-hint {
    font-size: 12px;
    color: var(--blog-text-sub);
    line-height: 1.7;
    background: #fff7fb;
    border-left: 3px solid #fc93b5;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

/* 许愿弹窗分区标题 */
.blog-wish-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--blog-text-main);
    margin-bottom: 8px;
}

/* 许愿弹窗角色下拉 */
.blog-wish-select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--blog-text-main);
    background: #fff;
    border: 1px solid var(--blog-divider);
    border-radius: 8px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.blog-wish-select:focus {
    border-color: #fc93b5;
}