details {
            width: 100%;
            max-width: 600px; 
            display: flex;
            flex-direction: column;
            background-color: #fcfcfd;
            border: 1px solid #e4e6e9;
            border-radius: 12px; 
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
            overflow: hidden; 
            margin-bottom: 20px;
            padding: 0 20px; 
            box-sizing: border-box;
            color: #505256; 
            font-size: 14px;
            line-height: 1.8;
            transition: background-color 0.3s ease;
        }

        details[open] {
            padding-bottom: 20px;
        }

        details > summary {
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 -20px; 
            padding: 18px 20px; 
            color: #333438;
            font-size: 15px; 
            font-weight: 500;
            cursor: pointer;
            user-select: none;
            transition: background-color 0.2s ease;
        }

        details > summary::-webkit-details-marker {
            display: none;
        }

        details > summary:hover {
            background-color: #f3f4f6;
        }

        details[open] > summary {
            border-bottom: 1px solid #e4e6e9;
            margin-bottom: 20px; 
        }

        details > summary::after {
            content: '▶';
            font-size: 12px;
            color: #8a8d93;
            transition: transform 0.2s ease;
        }

        details[open] > summary::after {
            transform: rotate(90deg);
        }

        /* ==========================================================================
           保护性隔离样式：将原本的全局初始化精确限定在 .app-container 及其子元素内
           ========================================================================== */
        .app-container,
        .app-container *,
        .app-container *::before,
        .app-container *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* 仅用于当前独立测试时的预览外壳 */
        .app-embed-wrapper {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        /* ==========================================================================
           组件核心样式
           ========================================================================== */
        .app-container img {
            max-width: 100%; 
            height: auto;    
            display: block;  
        }

        /* --- 外层 App 容器 (作为普通的 div 手机模拟框) --- */
        .app-container {
            width: 100%;
            max-width: 414px; /* iPhone Plus 宽度 */
            margin: 0 auto; /* 在父级 details 中居中 */
            background-color: #f8f9fa;
            border-radius: 15px;
            padding: 2px;
            border: 2px solid #333; /* 模拟手机边框 */
            overflow: hidden;
            color: #333;
            text-align: left;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        /* App 状态栏 */
        .status-bar {
            height: 20px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 8px;
            font-weight: 600;
            background-color: #fff;
            border-top-left-radius: 13px;
            border-top-right-radius: 13px;
        }

        .status-bar > span:nth-child(1) {
            flex: 1;
            text-align: left;
        }
        
        .status-bar > span:nth-child(3) {
            flex: 1;
            text-align: right;
        }
        
        .status-bar > span:nth-child(2) {
            text-align: center;
        }

        /* App 导航栏 */
        .app-header {
            background-color: #fff;
            padding: 10px 12px 12px;
            border-bottom: 1px solid #eee;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .app-header h1 {
            font-size: 13px;
            color: #1a1a1a;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        /* --- 主体内容区 --- */
        .app-content {
            max-height: calc(85vh - 100px);
            overflow-y: auto;
            padding: 1px;
            background-color: #f8f9fa;
        }

        .app-content::-webkit-scrollbar {
            width: 0px;
            background: transparent;
        }

        /* --- 内层卡片 (改为普通 div，不再折叠) --- */
        .app-container .inner-card {
            background: #ffffff;
            border-radius: 5px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        }

        /* 内部卡片标题栏 */
        .app-container .inner-card-title {
            font-size: 12px;
            font-weight: 700;
            color: #007aff;
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        /* --- 图文区内部样式 --- */
        .image-display {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 12px;
            background-color: #e5e5ea;
        }

        .image-display img {
            width: 100%;
            height: 180px;          
            object-fit: cover;      
            cursor: zoom-in;
        }

        .image-description {
            font-size: 11px;
            color: #3a3a3c;
            line-height: 1.5;
            margin-top: 10px;
            padding: 4px 2px;
            text-align: center;
        }

        /* --- 纯 CSS 查看大图样式（作用域安全化） --- */
        .zoom-checkbox {
            display: none !important;
        }

        .lightbox-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.85);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .lightbox-overlay img {
            max-width: 90vw !important;
            max-height: 80vh !important;
            object-fit: contain !important;
            border-radius: 4px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            cursor: zoom-out;
        }

        .lightbox-overlay::after {
            content: '点击任意处关闭';
            position: absolute;
            bottom: 30px;
            color: #aaa;
            font-size: 12px;
            letter-spacing: 1px;
        }

        .zoom-checkbox:checked ~ .lightbox-overlay {
            opacity: 1;
            pointer-events: auto;
        }

        /* --- 内部元素样式 --- */
        .user-status {
            margin-top: 8px;
            padding: 12px;
            background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
            border-radius: 12px;
            font-size: 10px;
            color: #0369a1;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .points-section {
            margin-top: 20px;
        }

        .points-title {
            font-size: 10px;
            color: #8e8e93;
            margin-bottom: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .character-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .character-item {
            background: #fdfdfd;
            border: 1px solid #f0f0f2;
            border-radius: 12px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
        }

        .character-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .character-name-box {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .character-name {
            font-weight: 600;
            color: #1c1c1e;
            font-size: 12px;
        }

        .character-relation {
            font-size: 8px;
            background-color: #f2f2f7;
            color: #8e8e93;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }

        .character-score {
            font-size: 10px;
            font-weight: 700;
            color: #34c759;
        }

        .character-intro {
            font-size: 10px;
            color: #666;
            line-height: 1.5;
            background-color: #fafafa;
            padding: 8px 10px;
            border-radius: 8px;
        }

        .character-features {
            font-size: 10px;
            color: #636366;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 2px;
            padding-top: 8px;
            border-top: 1px dashed #f0f0f2;
        }

        .feature-badge {
            background-color: #f2f2f7;
            color: #555;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 10px;
        }

        .sensitive-badge {
            background-color: #ffe4e6;
            color: #e11d48;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
        }

        .preference-badge {
            background-color: #f3e8ff;
            color: #7c3aed;
            padding: 3px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
        }