/* =================================
   1. 基础与全局样式 (Base & Global)
   ================================= */
:root {
    --bg-color: #000;
    --text-color: #ffffff;
    --accent-color: #000000;
    --heart-color: #ff4757;
    --ios-gray-bg: #f2f2f6;
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    
    --neo-bg: #f5f6f8;
    --neo-text: #333333;
    --neo-shadow-light: #ffffff;
    --neo-shadow-dark: #d5d6d9;
    
    /* QQ 主界面背景色：与顶部导航 / 胶囊导航一致，统一为纯白 */
    --qq-bg: #ffffff;
    --qq-item-bg: #ffffff;
    --qq-shadow-dark: #d5d6d9;
    --qq-shadow-light: #ffffff;
    --chat-bubble-font-size: 13px;
    --chat-avatar-size: 38px;
    --chat-ai-bubble-bg: #ffffff;
    --chat-ai-bubble-color: #000000;
    --chat-ai-bubble-border: #f0f0f0;
    --chat-me-bubble-bg: #000000;
    --chat-me-bubble-color: #ffffff;
    --chat-me-bubble-border: transparent;
}

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

body { 
    margin: 0; 
    padding: 0;
    width: 100vw; 
    height: 100vh; 
    background-color: var(--bg-color); 
    font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
    overflow: hidden; 
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- 自律钟待办专用遮罩，避免受全局 modal 规则干扰 --- */
#todo-modal.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1800; /* 高于一般 app-page / clock-modal-overlay 等 */
}

#todo-modal.modal-overlay.active {
    display: flex;
    opacity: 1;          /* 覆盖全局把 overlay 当成淡入层的 opacity 逻辑 */
}

#todo-modal .modal-container.clock-todo-modal {
    position: relative;   /* 不再作为全屏容器，而是 overlay 中的内容卡片 */
    width: 86vw;
    max-width: 360px;
    border-radius: 18px;
    background: #ffffff;
    color: #333333;
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    padding: 16px 16px 12px;
    opacity: 1;           /* 覆盖全局 .modal-container 的初始透明度 */
    transform: none;      /* 关闭全局 scale 动画，以免被缩到看不见 */
}

#todo-modal .modal-header {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
}

#todo-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

#todo-modal .modal-field-label {
    display: block;
    font-size: 13px;
    color: #666666;
    margin-bottom: 4px;
}

#todo-modal .modal-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    outline: none;
    background: #ffffff;
}

#todo-modal .modal-input:focus {
    border-color: #000000;
}

#todo-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#todo-modal .modal-btn {
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

#todo-modal .modal-btn.cancel {
    background: #f2f2f7;
    color: #333333;
}

#todo-modal .modal-btn.primary {
    background: #000000;
    color: #ffffff;
}


/* =================================
   2. 锁屏与主屏幕 (Lock & Home Screen)
   ================================= */

/* --- 锁屏 --- */
#lock-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000 url('https://i.postimg.cc/KzpC6Pst/IMG-3941.jpg') center/cover no-repeat; z-index: 2000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: #fff; transition: transform 0.5s var(--ease-ios);
    background-size: cover; background-position: center;
}
#lock-screen.unlocked {
    transform: translateY(-100%);
    pointer-events: none;
}

/* 锁屏变暗遮罩，用于密码 / 图案面板弹出时整体压暗背景 */
.lock-screen-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.lock-title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 120px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* 古早 iOS 风格的滑动解锁条（仅在滑块模式下显示） */
.lock-slider {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 320px;
    display: none; /* 默认隐藏，完全由 JS 决定何时显示 */
}

.lock-slider-track {
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: 999px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.5);
    overflow: hidden;
    backdrop-filter: blur(6px);
}

.lock-slider-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
    color: transparent;
    background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.95), rgba(255,255,255,0.15));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: lock-slider-glow 1.8s linear infinite;
}

.lock-slider-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 40px;
    border-radius: 999px;
    background: rgba(236,240,244,0.96);
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3f4650;
    font-size: 13px;
    font-weight: 600;
    pointer-events: auto;
    touch-action: pan-y;
    user-select: none;
}

/* 上滑解锁提示文字（仅在上滑模式下显示） */
.lock-swipe-hint {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    display: block; /* 强制占位，避免某些状态下被隐藏导致看不到文本 */
}

.lock-swipe-hint.visible {
    opacity: 1;
}

/* 密码面板（仅在密码模式下显示） */
.lock-passcode-panel {
    position: absolute;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    width: 80%;
    max-width: 320px;
    padding: 18px 16px 18px;
    border-radius: 18px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform-origin: center bottom;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.lock-passcode-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* 密码错误时的轻微左右抖动动画（仅在错误瞬间触发） */
.lock-passcode-panel.shake {
    animation: lock-passcode-shake 0.22s ease;
}

/* 错误提示文案：保持简单，避免频繁重排导致卡顿 */
.lock-passcode-panel::after {
    content: attr(data-error);
    display: block;
    margin-top: 4px;
    font-size: 11px;
    text-align: center;
    color: #ffb3b3;
}

@keyframes lock-passcode-shake {
    0%   { transform: translateX(-50%) translateY(0); }
    25%  { transform: translateX(calc(-50% - 5px)) translateY(0); }
    50%  { transform: translateX(calc(-50% + 5px)) translateY(0); }
    75%  { transform: translateX(calc(-50% - 3px)) translateY(0); }
    100% { transform: translateX(-50%) translateY(0); }
}

.lock-passcode-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.lock-passcode-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.lock-passcode-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.8);
    background: transparent;
    transition: background-color 0.15s ease;
}

.lock-passcode-dot.filled {
    background: rgba(255,255,255,0.95);
}

.lock-passcode-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.lock-pattern-panel {
    position: absolute;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    width: min(82vw, 320px);
    padding: 18px 18px 20px;
    border-radius: 24px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(12px);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.lock-pattern-panel.visible {
    display: flex;
}
.lock-pattern-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.lock-pattern-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.82);
    text-align: center;
    line-height: 1.5;
    min-height: 18px;
}

.lock-pattern-grid,
.lock-pattern-preview-grid {
    --lock-pattern-line-color: rgba(255,255,255,0.88);
    position: relative;
    width: 210px;
    height: 210px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    place-items: center;
    touch-action: none;
    user-select: none;
}

.lock-pattern-lines,
.lock-pattern-preview-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.lock-pattern-dot,
.lock-pattern-preview-dot {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(255,255,255,0.32);
    box-shadow: 0 0 0 7px rgba(255,255,255,0.12);
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    pointer-events: auto;
}

.lock-pattern-dot.active,
.lock-pattern-preview-dot.active {
    transform: scale(1.05);
    background: rgba(255,255,255,0.98);
    box-shadow: 0 0 0 9px rgba(255,255,255,0.22);
}

.lock-pattern-preview-grid {
    width: 156px;
    height: 156px;
    background: #f8f8f8;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

.lock-pattern-preview-dot {
    width: 14px;
    height: 14px;
    background: rgba(0,0,0,0.26);
    box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
}

.lock-pattern-preview-dot.active {
    background: rgba(0,0,0,0.92);
    box-shadow: 0 0 0 8px rgba(0,0,0,0.12);
}

.lock-key {
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.lock-key.placeholder {
    visibility: hidden;
}

.lock-key.delete {
    font-size: 14px;
}

.lock-key:active {
    background: rgba(255,255,255,0.16);
}

/* 文字高光从左到右扫过，仅做黑白渐变，不再左右位移 */
@keyframes lock-slider-glow {
    0% { background-position: 0% 50%; opacity: 0.4; }
    50% { background-position: 100% 50%; opacity: 1; }
    100% { background-position: 0% 50%; opacity: 0.4; }
}

/* --- 主屏幕容器 --- */
.home-pager {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.home-pager-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s var(--ease-ios);
}

.home-page {
    flex: 0 0 100%;
    position: relative;
}

.screen {
    width: 100%;
    height: 100%;
    background: #e7c4a2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-top: env(safe-area-inset-top);
}

/* 主屏两页默认背景统一改成更柔和的米白色 */
#main-screen {
    background-color: #f7f3ec !important;
    background-image: none !important;
}

#love-screen {
    background-color: #f7f3ec !important;
    background-image: none !important;
}

.home-pager-indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 20;
}

.pager-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    transition: all 0.25s ease;
}

.pager-dot.active {
    width: 18px;
    border-radius: 999px;
    background: rgba(0,0,0,0.65);
}

/* --- 主屏幕组件 (Widgets & Apps) --- */
.header-widget {
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-top: 40px;
    position: relative;
}

/* 主屏顶部个人名片区域 */
.home-profile-banner {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 12px auto 4px;
    padding: 16px 18px 18px;
    border-radius: 26px;
    background-color: #fdf7f1; /* 暖白色底色 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    min-height: 110px;
}

.home-profile-banner-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.home-profile-avatar-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 0;
}

.home-profile-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fbe3d3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.home-profile-avatar-icon {
    width: 56px;
    height: 56px;
}

.home-profile-avatar img,
#home-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-profile-username {
    position: absolute;
    right: -2px;
    bottom: -4px;
    max-width: 90px;
    padding: 2px 7px;
    font-size: 11px;
    color: #7b5b41;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-profile-text {
    flex: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.home-profile-region {
    font-size: 13px;
    color: #8a674b;
    letter-spacing: 0.06em;
}

.home-profile-status {
    font-size: 13px;
    line-height: 1.5;
    color: #3e2a1b;
}

.home-profile-region[contenteditable="true"],
.home-profile-status[contenteditable="true"],
.home-profile-username[contenteditable="true"] {
    outline: none;
}

.home-profile-region[contenteditable="true"]:focus,
.home-profile-status[contenteditable="true"]:focus,
.home-profile-username[contenteditable="true"]:focus {
    text-decoration: underline;
    text-decoration-style: dashed;
}

.home-profile-bg-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 4px 10px;
    font-size: 11px;
    color: #7b5b41;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.home-profile-bg-btn:active {
    transform: scale(0.96);
}

.header-live-btn {
    position: absolute;
    top: 28px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.header-live-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #111;
    stroke-width: 1.6;
}

.header-live-btn:active {
    transform: scale(0.94);
}
.date-line { 
    font-size: 14px; 
    opacity: 0.9; 
    margin-bottom: 5px; 
    font-weight: 500; 
}
.time-line { 
    font-size: 64px; 
    font-weight: 300; 
    line-height: 1; 
}
.date-line,
.time-line {
    color: #000; /* 将颜色设置为黑色 */
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 130px 75px 75px; /* 再略微缩小行高，让下方组件整体继续向上收紧 */
    gap: 12px;
    flex-grow: 0;
    margin-bottom: 10px;
    padding: 0 10px;
}

#main-screen .grid-container {
    margin-top: 0;
    margin-bottom: 6px;
}

.widget {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

#main-screen #photo-widget {
    border-radius: 0;
    height: 110px;
    width: 85%;
    max-width: 180px;
    min-width: 140px;
    justify-self: flex-start;
    align-self: flex-start;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 0;
    margin-top: 12px;
}

#main-screen #photo-widget.anniversary-widget {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#main-screen #photo-widget .anniv-title {
    font-size: 14px;
}

#main-screen #photo-widget .anniv-days {
    font-size: 24px;
}

#main-screen #photo-widget .anniv-sub {
    font-size: 11px;
}

.photo-widget {
    grid-column: 1/2;
    grid-row: 1/2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* 左上纪念日组件文字样式：在主屏幕展示当前选中的纪念日 */
.anniversary-widget {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.anniversary-widget .anniv-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
}

.anniversary-widget .anniv-days {
    font-size: 28px;
    font-weight: 700;
    color: #000;
}

.anniversary-widget .anniv-sub {
    font-size: 12px;
    color: #333;
    opacity: 0.85;
    margin-top: 6px;
}

.heart-icon {
    width: 24px;
    height: 24px;
    margin: 15px;
    fill: none;
    stroke: var(--heart-color);
    stroke-width: 2;
}
.battery-container {
    margin: 15px;
    background: rgba(0,0,0,0.4);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.battery-level {
    height: 100%;
    width: 80%;
    background-color: #4cd137;
}

/* 右侧方形图片组件：网格跨两行，但自身尺寸略小，默认图片填满整个组件 */
.bottom-photo-widget {
    grid-column: 2/3;
    grid-row: 2/4;
    justify-self: center;              /* 在网格单元内水平居中 */
    align-self: center;                /* 在跨两行的区域中垂直居中 */
    width: 78%;                        /* 略微缩小宽度，让整体更精致但不显得太小 */
    aspect-ratio: 1 / 1;               /* 整个玻璃组件保持正方形 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-size: cover;            /* 导入图片默认铺满整个组件 */
    background-position: center;
    background-repeat: no-repeat;
}

.bottom-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;                      /* 隐藏占位文案，只保留图片区域 */
    color: transparent;
}

.app-row-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

#main-screen .app-row-container {
    margin-top: 12px;
}
.apps-area {
    grid-column: 2/3;
    grid-row: 1/2;
    display: flex;
    justify-content: flex-start;
    column-gap: 16px;
    padding-left: 6px;
}
.left-apps-row-1 { 
    grid-column: 1/2; 
    grid-row: 2/3; 
}
.left-apps-row-2 { 
    grid-column: 1/2; 
    grid-row: 3/4; 
}

.home-app {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    gap: 8px; 
    cursor: pointer; 
    text-align: center;
    width: 70px;
    background: none; 
    border: none; 
    padding: 0;
    font-family: inherit; 
    color: inherit;
}
@keyframes app-click-vibrate {
    0% { transform: scale(1); } 
    30% { transform: scale(0.9); }
    60% { transform: scale(1.1); } 
    80% { transform: scale(0.98); }
    100% { transform: scale(1); }
}
.home-app:active .home-app-icon { 
    animation: app-click-vibrate 0.3s ease-in-out; 
}

.home-app-icon {
    width: 60px;   /* 主屏幕所有 APP 图标整体稍微放大 */
    height: 60px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
    background-color: rgba(255,255,255,0.72);
    border: 1px solid rgba(17,17,17,0.08);
    position: relative;
    overflow: hidden;
}

.home-app-icon.has-custom-image {
    background: transparent;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* 第二页爱心面板里的图标，单独也稍微放大，让比例统一一些 */
.love-app-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
}
 
.home-app-icon svg {
    width: 25px;
    height: 25px;
}

/* 首页（QQ 等所在的第一页）图标：统一改成黑色细线条风格 */
#main-screen .home-app-icon svg {
    fill: none;
    stroke: #111111;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

/* 只在首页强制覆盖内部 path/rect/circle，避免旧 SVG 的旧色值或粗细干扰 */
#main-screen .home-app-icon svg * {
    fill: none;
    stroke: #111111;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

/* 孵蛋室图标保留轻微放大，但仍与整体黑色细线条风格统一 */
#main-screen #icon-hatchery svg {
    transform: scale(1.12);
    transform-origin: 50% 50%;
}

#main-screen #icon-hatchery svg * {
    fill: none;
    stroke: #111111;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

.home-app-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.home-app-icon.has-custom-image .home-app-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-app-name {
    font-size: 11px; 
    font-weight: 500; 
    color: rgb(4, 3, 3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); 
    white-space: nowrap;
}

.time-bars-area {
    grid-column: 2/3;
    grid-row: 2/4;
    display: flex;
    justify-content: space-evenly;
    padding: 12px 8px;
    align-items: flex-end;
    height: 180px; /* 对应上方行高略增，避免进度条太矮 */
}
.vertical-bar-group { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    height: 100%; 
    width: 35%; 
    justify-content: flex-end; 
}
.bar-track { 
    width: 100%; 
    height: 75%; 
    background: rgba(255,255,255,0.1); 
    border-radius: 10px; 
    position: relative; 
    overflow: hidden; 
    display: flex; 
    align-items: flex-end; 
}
.bar-fill { 
    width: 100%; 
    height: 50%; 
    background: #fff; 
    border-radius: 10px; 
}
.bar-label { 
    font-size: 11px; 
    margin-top: 8px; 
    opacity: 0.9; 
    text-align: center; 
    font-weight: 600; 
}

/* --- Dock 栏 --- */
.dock-bar {
    position: absolute; 
    bottom: 25px; 
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 24px;
    padding: 10px 15px; 
    display: flex; 
    gap: 25px;
    z-index: 10; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.dock-bar .home-app-icon:hover { 
    transform: scale(1.1); 
}


/* =================================
   3. 通用APP页面结构 (Generic App Page)
   ================================= */
.app-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease-in-out;
}
.app-page.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.app-page:not(.active),
.app-page:not(.active) * {
    pointer-events: none !important;
}

.app-page:not(.active) .nav-btn,
.app-page:not(.active) .focus-exit-btn {
    pointer-events: none !important;
}

.app-page.active .nav-btn,
.app-page.active .focus-exit-btn {
    pointer-events: auto;
}
.page-bg-gray {
    background-color: var(--ios-gray-bg); 
}

.nav-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 15px 10px 15px;
    font-size: 17px;
    font-weight: 600;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    border-bottom: 0.5px solid #ddd;
    color: #000;
    z-index: 20;
    flex-shrink: 0;
}
.nav-btn {
    position: relative;
    z-index: 21;
    min-width: 38px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--accent-color);
    cursor: pointer;
    pointer-events: auto;
}

#api-page .nav-header .nav-btn:last-child {
    min-width: auto;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    justify-content: center;
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#api-page .nav-header .nav-btn:last-child:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.12);
}
.nav-title { 
    flex: 1; 
    text-align: center; 
}
.btn-danger {
    color: #ff3b30 !important; 
}

.scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    color: #333;
}

/* ================================
   3.x 烹饪模块 (Cooking Feature)
   ================================ */
.cooking-page {
    background: linear-gradient(180deg, #fffaf3 0%, #fff4e7 100%);
    color: #000000;
}

.cooking-nav-header {
    border-bottom: 1px solid rgba(235, 155, 67, 0.22);
    background: linear-gradient(180deg, rgba(255, 243, 225, 0.98) 0%, rgba(255, 248, 238, 0.94) 100%);
    box-shadow: 0 10px 24px rgba(224, 135, 42, 0.12);
}

.cooking-nav-header .nav-title {
    color: #8d4d13;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.cooking-nav-header .nav-btn {
    color: #c46a18;
}

.cooking-nav-header #cooking-works-btn {
    justify-content: center;
    min-width: 56px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(228, 140, 54, 0.28);
    background: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(228, 140, 54, 0.14);
}

/* ================================
   3.y 旅游模块 (Travel Feature)
   ================================ */
.travel-page {
    background: linear-gradient(180deg, #f6fff7 0%, #edf9f0 100%);
    color: #173626;
}

.travel-nav-header {
    border-bottom: 1px solid rgba(120, 178, 141, 0.25);
    background: linear-gradient(135deg, rgba(223, 248, 228, 0.98) 0%, rgba(202, 239, 212, 0.95) 55%, rgba(235, 252, 239, 0.98) 100%);
    box-shadow: 0 10px 24px rgba(110, 173, 135, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.travel-nav-header .nav-title {
    color: #1d4d36;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.travel-nav-header .nav-btn,
.travel-nav-header .nav-icon-btn {
    color: #2b6b4c;
}

.travel-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.travel-nav-header .travel-refresh-btn,
.travel-nav-header .travel-flag-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(104, 170, 129, 0.26);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(225, 247, 232, 0.94) 100%);
    box-shadow: 0 8px 18px rgba(109, 171, 133, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    pointer-events: auto;
    touch-action: manipulation;
}

.travel-nav-header .travel-refresh-btn svg,
.travel-nav-header .travel-flag-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    pointer-events: none;
}

.travel-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 15px 15px 10px;
    overflow: hidden;
}

.travel-card {
    width: 100%;
    flex: 1;
    min-height: 0;
    max-height: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 255, 248, 0.98) 100%);
    border-radius: 22px;
    border: 1px solid rgba(163, 216, 181, 0.35);
    box-shadow: 0 14px 32px rgba(102, 156, 124, 0.12);
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.travel-card.is-report-mode {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.travel-card > [hidden] {
    display: none !important;
}

.travel-placeholder {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #5f7d69;
    line-height: 1.7;
    padding: 6px 4px;
}

.travel-trip-list {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 6px;
}

.travel-trip-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 251, 242, 0.94) 100%);
    border-radius: 16px;
    border: 1px solid rgba(173, 221, 188, 0.42);
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(118, 173, 138, 0.1);
}

.travel-trip-title,
.travel-trip-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #214c35;
    line-height: 1.45;
}

.travel-trip-meta,
.travel-trip-item-meta {
    font-size: 11px;
    color: #7f9387;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.travel-trip-summary {
    font-size: 12px;
    color: #4d6858;
    line-height: 1.6;
}

.travel-trip-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.travel-trip-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(155, 210, 173, 0.45);
    background: rgba(229, 248, 234, 0.95);
    color: #487159;
}

.travel-report-view {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 6px;
}

.travel-report-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 252, 243, 0.96) 100%);
    border-radius: 16px;
    border: 1px solid rgba(171, 220, 186, 0.4);
    padding: 10px 11px;
    box-shadow: 0 12px 26px rgba(112, 172, 136, 0.1);
}

.travel-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.travel-report-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.travel-report-content {
    font-size: 12px;
    color: #555555;
    line-height: 1.6;
}

.travel-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.travel-tab-bar {
    position: relative;
    flex-shrink: 0;
    border-top: 1px solid rgba(134, 196, 154, 0.26);
    background: linear-gradient(135deg, rgba(220, 246, 227, 0.98) 0%, rgba(194, 236, 205, 0.96) 52%, rgba(234, 252, 239, 0.98) 100%);
    box-shadow: 0 -10px 22px rgba(111, 170, 134, 0.12);
    padding: 8px 18px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.travel-tab {
    flex: 1;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #5d7b67;
    cursor: pointer;
    border-radius: 14px;
    padding: 6px 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.travel-tab-icon {
    font-size: 16px;
}

.travel-tab-label {
    font-size: 12px;
}

.travel-tab.active {
    color: #1d5139;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(230, 249, 235, 0.88) 100%);
    box-shadow: inset 0 0 0 1px rgba(162, 218, 181, 0.42);
}

.travel-tab.active .travel-tab-label {
    position: relative;
}

.travel-tab.active .travel-tab-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #2d7a52;
}

.travel-modal-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 44, 28, 0.18) 0%, rgba(14, 33, 21, 0.42) 100%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.travel-modal-overlay.active {
    display: flex;
}

.travel-modal {
    width: calc(100% - 24px);
    max-width: 440px;
    max-height: 88vh;
    background: linear-gradient(180deg, rgba(248, 255, 249, 0.98) 0%, rgba(235, 251, 239, 0.98) 100%);
    border-radius: 24px;
    border: 1px solid rgba(159, 214, 178, 0.45);
    box-shadow: 0 22px 48px rgba(38, 76, 49, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.travel-modal.large {
    max-width: 520px;
    max-height: 92vh;
}

.travel-modal.progress {
    width: calc(100% - 18px);
    max-width: 560px;
    max-height: 92vh;
    min-height: min(78vh, 700px);
}

.travel-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(177, 223, 190, 0.45);
    background: linear-gradient(135deg, rgba(221, 248, 228, 0.92) 0%, rgba(198, 238, 208, 0.92) 100%);
}

.travel-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f5039;
}

.travel-modal-close {
    border: none;
    background: rgba(255, 255, 255, 0.72);
    color: #2b6b4c;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(122, 179, 143, 0.14);
}

.travel-modal-body {
    padding: 16px;
    overflow-y: auto;
}

.travel-modal-footer {
    padding: 12px 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(183, 227, 195, 0.38);
    background: rgba(248, 255, 250, 0.92);
}

.travel-field {
    margin-bottom: 10px;
}

.travel-field label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    color: #35694c;
    font-weight: 600;
}

.travel-field textarea {
    width: 100%;
    min-height: 88px;
    border-radius: 16px;
    border: 1px solid rgba(164, 214, 180, 0.5);
    padding: 10px 12px;
    font-size: 13px;
    color: #214733;
    background: rgba(255, 255, 255, 0.82);
    font-family: inherit;
    resize: vertical;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(155, 210, 173, 0.12);
}

.travel-transport-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.transport-option {
    border-radius: 999px;
    border: 1px solid rgba(162, 215, 179, 0.48);
    padding: 6px 12px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.72);
    color: #426d54;
    cursor: pointer;
}

.transport-option.active {
    background: linear-gradient(135deg, #85c79c 0%, #6ab786 100%);
    color: #ffffff;
    border-color: #70bb8a;
    box-shadow: 0 8px 18px rgba(106, 183, 134, 0.24);
}

.travel-role-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.travel-role-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.travel-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.travel-role-item {
    width: 82px;
    min-height: 98px;
    border-radius: 18px;
    border: 1px solid rgba(162, 215, 179, 0.48);
    padding: 10px 8px 8px;
    font-size: 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.82);
    color: #355f47;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: center;
}

.travel-role-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef7f1;
    border: 1px solid rgba(167, 214, 181, 0.5);
    flex-shrink: 0;
}

.travel-role-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.travel-role-name {
    display: none;
}

.travel-role-id {
    width: 100%;
    font-size: 11px;
    line-height: 1.35;
    color: inherit;
    word-break: break-word;
}

.travel-role-desc {
    display: none;
}

.travel-role-item.selected {
    background: linear-gradient(135deg, #84c69b 0%, #67b583 100%);
    color: #ffffff;
    border-color: #6ab786;
    box-shadow: 0 8px 18px rgba(106, 183, 134, 0.22);
}

.travel-role-empty {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px dashed rgba(160, 208, 176, 0.7);
    background: rgba(238, 250, 241, 0.85);
    color: #62806c;
    font-size: 12px;
    line-height: 1.6;
}

.travel-progress-overview {
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(183, 227, 196, 0.4);
    background: linear-gradient(180deg, rgba(236, 252, 241, 0.88) 0%, rgba(229, 248, 235, 0.78) 100%);
}

.travel-progress-overview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.travel-progress-stage-name {
    font-size: 15px;
    font-weight: 700;
    color: #1f533b;
}

.travel-progress-percent {
    font-size: 13px;
    font-weight: 700;
    color: #4d7b5f;
}

.travel-progress-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(161, 214, 177, 0.26);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(78, 130, 97, 0.12);
}

.travel-progress-track-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #72c08a 0%, #4aa86a 55%, #2f8f55 100%);
    box-shadow: 0 6px 14px rgba(82, 165, 110, 0.24);
    transition: width 0.28s ease;
}

.travel-progress-phase-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    font-size: 11px;
    color: #73917d;
}

.travel-progress-phase-row .phase {
    position: relative;
    padding-top: 2px;
}

.travel-progress-phase-row .phase.active {
    color: #1f533b;
    font-weight: 700;
}

.travel-progress-body {
    padding: 12px 16px;
    flex: 1;
    overflow-y: auto;
}

.travel-progress-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.travel-progress-item {
    border-radius: 16px;
    border: 1px solid rgba(176, 221, 189, 0.46);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 252, 244, 0.94) 100%);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.7;
    color: #355b44;
    box-shadow: 0 10px 24px rgba(95, 155, 116, 0.08);
}

.travel-progress-item .stage-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(218, 243, 225, 0.9);
    color: #4d7a5d;
    font-size: 11px;
    font-weight: 600;
}

.travel-progress-empty {
    padding: 20px 14px;
    border: 1px dashed rgba(166, 212, 179, 0.7);
    border-radius: 16px;
    background: rgba(240, 251, 243, 0.82);
    color: #64806d;
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

.travel-progress-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(183, 227, 195, 0.4);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(248, 255, 250, 0.92);
}

.travel-progress-input-wrap {
    display: flex;
    gap: 8px;
}

#travel-progress-input {
    flex: 1;
    border-radius: 16px;
    border: 1px solid rgba(166, 214, 180, 0.68);
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    color: #234735;
    background: rgba(255, 255, 255, 0.94);
}

#travel-progress-send {
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, #7bc893 0%, #58b776 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 0 16px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(92, 180, 119, 0.24);
}

.travel-progress-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.travel-progress-actions .btn-small {
    flex: 1;
}

.cooking-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fff8ef 0%, #fff2e0 100%);
    position: relative;
}

.cooking-scroll {
    flex: 1;
    min-height: 0;
    padding: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 246, 232, 0.72) 100%);
}

.cooking-category-label {
    font-size: 13px;
    color: #777777;
    margin-bottom: 6px;
}

.cooking-section {
    margin-top: 18px;
}

.cooking-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.cooking-section-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.cooking-link-btn {
    border: none;
    background: transparent;
    font-size: 12px;
    color: #555555;
    text-decoration: underline;
    padding: 0;
    cursor: pointer;
}

.cooking-ingredients-summary {
    font-size: 12px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 10px;
}

.cooking-ingredients-group {
    margin-bottom: 10px;
}

.cooking-ingredients-group-title {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.cooking-ingredients-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cooking-ingredient-tag {
    border-radius: 999px;
    border: 1px solid #efd4b1;
    background: rgba(255, 250, 243, 0.96);
    color: #7f552b;
    padding: 5px 11px;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.cooking-ingredient-tag.selected {
    background: linear-gradient(135deg, #ff9d45 0%, #ffbf70 100%);
    color: #ffffff;
    border-color: #ff9d45;
    box-shadow: 0 8px 18px rgba(242, 140, 38, 0.26);
}

.cooking-ingredient-tag.custom {
    border-style: dashed;
    background: rgba(255, 244, 227, 0.95);
    color: #7f552b;
}

.cooking-ingredient-tag.custom.selected {
    color: #7f552b;
    background: rgba(255, 233, 205, 0.98);
    border-color: #efb275;
    box-shadow: 0 8px 18px rgba(242, 140, 38, 0.16);
}

.cooking-steps-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cooking-step-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #f0ddc8;
    padding: 12px 12px 10px;
    box-shadow: 0 10px 18px rgba(239, 165, 83, 0.07);
}

.cooking-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.cooking-step-title {
    font-size: 13px;
    font-weight: 600;
    color: #7b4f24;
}

.cooking-step-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cooking-step-action {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #f0d4b4;
    background: #fff8f0;
    color: #bb6a1b;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cooking-step-action.danger {
    color: #b55427;
}

.cooking-step-text {
    width: 100%;
    border: none;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
}

.cooking-step-text::placeholder {
    color: #bbbbbb;
}

.cooking-add-step-btn {
    margin-top: 10px;
    width: 100%;
    border-radius: 999px;
    border: 1px dashed #cccccc;
    background: #fafafa;
    padding: 8px 0;
    font-size: 13px;
    cursor: pointer;
}

.cooking-finish-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    border: 1px solid #f2dec8;
    box-shadow: 0 16px 28px rgba(228, 144, 47, 0.08);
    padding: 12px 12px 14px;
}

.cooking-cover-upload {
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px dashed #efc89a;
    background: linear-gradient(180deg, #fffaf4 0%, #fff2e5 100%);
}

.cooking-cover-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cooking-cover-picker,
.cooking-cover-remove {
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.cooking-cover-picker {
    background: linear-gradient(135deg, #f39a39 0%, #ffbf6a 100%);
    color: #ffffff;
}

.cooking-cover-remove {
    background: #fff7ef;
    color: #b5651a;
    border: 1px solid #e8af6d;
}

.cooking-cover-hint {
    font-size: 12px;
    line-height: 1.6;
    color: #85552a;
}

.cooking-cover-preview {
    margin-top: 10px;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid #efdcc6;
    display: block;
}

.cooking-field-label {
    display: block;
    font-size: 13px;
    margin: 8px 0 4px;
}

.cooking-input {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #dddddd;
    padding: 7px 12px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
}

.cooking-input::placeholder {
    color: #bbbbbb;
}

.cooking-mood-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cooking-mood-tag {
    border-radius: 999px;
    border: 1px solid #f0d4b6;
    padding: 4px 10px;
    font-size: 12px;
    background: rgba(255, 249, 241, 0.96);
    color: #8a5a28;
    cursor: pointer;
}

.cooking-mood-tag.selected {
    background: linear-gradient(135deg, #ffab52 0%, #ffcd8b 100%);
    color: #ffffff;
    border-color: #ffab52;
}

.cooking-ai-btn {
    margin-top: 12px;
    width: 100%;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #f28f2a 0%, #ffb250 100%);
    color: #ffffff;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 14px 24px rgba(241, 140, 38, 0.22);
    cursor: pointer;
}

.cooking-ai-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.cooking-ai-result {
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid #f1dfca;
    padding: 12px;
    background: linear-gradient(180deg, #fffaf4 0%, #fff2e5 100%);
}

.cooking-ai-result-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.cooking-ai-rating {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid #111111;
    font-size: 12px;
    font-weight: 600;
}

.cooking-ai-result-text {
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.cooking-share-btn {
    margin-top: 8px;
    width: 100%;
    border-radius: 999px;
    border: 1px solid #e7a362;
    background: #fff8f0;
    color: #b76418;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cooking-guide-card {
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid #f1dcc2;
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.96) 0%, rgba(255, 244, 227, 0.96) 100%);
    padding: 12px;
    box-shadow: 0 12px 24px rgba(236, 157, 72, 0.08);
}

.cooking-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.cooking-guide-title {
    font-size: 14px;
    font-weight: 700;
    color: #8b5117;
}

.cooking-guide-btn {
    border: none;
    border-radius: 999px;
    background: rgba(244, 150, 52, 0.14);
    color: #be6918;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
}

.cooking-guide-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.cooking-guide-hint,
.cooking-guide-result {
    font-size: 12px;
    line-height: 1.7;
    color: #80552b;
    white-space: pre-wrap;
}

.cooking-guide-result {
    margin-top: 8px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px dashed #e9bc8d;
}

.cooking-works-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2005;
}

.cooking-works-overlay.active {
    display: flex;
}

.cooking-works-modal {
    width: min(760px, calc(100vw - 18px));
    max-height: min(92vh, 860px);
    border-radius: 26px;
    border: 1px solid #f0dabc;
    background: linear-gradient(180deg, #fffdf9 0%, #fff5e9 100%);
    box-shadow: 0 24px 56px rgba(0,0,0,0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cooking-works-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.cooking-works-title {
    font-size: 18px;
    font-weight: 700;
}

.cooking-works-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    color: #a36227;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cooking-works-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow: hidden;
    min-height: 0;
}

.cooking-works-tip {
    font-size: 12px;
    line-height: 1.6;
    color: #8b5a31;
    background: rgba(255, 248, 238, 0.88);
    border: 1px solid #f0dcc2;
    border-radius: 12px;
    padding: 10px 12px;
}

.cooking-works-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 300px;
    max-height: min(72vh, 680px);
    padding-right: 6px;
}

.cooking-work-item {
    border-radius: 16px;
    border: 1px solid #f0dcc2;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 14px;
    cursor: pointer;
}

.cooking-work-item.active {
    border-color: #f09a3c;
    background: linear-gradient(180deg, #fff8ef 0%, #fff2de 100%);
    box-shadow: 0 12px 22px rgba(241, 149, 49, 0.12);
}

.cooking-work-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cooking-work-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
}

.cooking-work-item-score {
    font-size: 12px;
    color: #333333;
    border: 1px solid #d8d8d8;
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}

.cooking-work-item-meta {
    margin-top: 3px;
    font-size: 12px;
    color: #777777;
}

.cooking-works-empty {
    border-radius: 12px;
    border: 1px dashed #dddddd;
    background: #fcfcfc;
    color: #777777;
    font-size: 12px;
    line-height: 1.6;
    padding: 12px;
}

.cooking-work-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.36);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2010;
}

.cooking-work-detail-overlay.active {
    display: flex;
}

.cooking-work-detail-modal {
    width: min(420px, calc(100vw - 26px));
    max-height: min(82vh, 720px);
    overflow-y: auto;
    border-radius: 22px;
    border: 1px solid #efd9bb;
    background: linear-gradient(180deg, #fffdf9 0%, #fff4e6 100%);
    box-shadow: 0 24px 56px rgba(0,0,0,0.24);
    padding: 16px;
}

.cooking-work-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cooking-work-detail-name {
    font-size: 16px;
    font-weight: 700;
    color: #7b4e24;
}

.cooking-work-detail-close {
    border: none;
    background: transparent;
    font-size: 17px;
    color: #9a632b;
    cursor: pointer;
}

.cooking-work-detail-meta {
    margin-top: 8px;
    font-size: 12px;
    color: #8b6037;
}

.cooking-work-detail-rating {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(243, 157, 62, 0.12);
    border: 1px solid #e7b37a;
    color: #b76719;
    font-size: 13px;
    font-weight: 700;
}

.cooking-work-detail-image {
    margin-top: 12px;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid #efdcc7;
    display: block;
    background: #fff7ed;
}

.cooking-work-detail-review {
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid #f0dcc2;
    background: rgba(255, 255, 255, 0.92);
    color: #5c432c;
    font-size: 13px;
    line-height: 1.75;
    padding: 14px;
    white-space: pre-wrap;
}

.cooking-works-footer {
    display: flex;
    gap: 8px;
    border-top: 1px solid #f0f0f0;
    padding: 10px 12px 12px;
}

.cooking-works-action {
    flex: 1;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #f2942f 0%, #ffbb66 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 0;
    cursor: pointer;
}

.cooking-works-action.secondary {
    background: #fff8f0;
    color: #b76318;
    border: 1px solid #e5a15d;
}

.cooking-works-action:disabled {
    opacity: 0.45;
    cursor: default;
}

.cooking-tab-bar {
    position: relative;
    z-index: 5;
    border-top: 1px solid rgba(236, 157, 72, 0.22);
    background: linear-gradient(180deg, rgba(255, 248, 238, 0.98) 0%, rgba(255, 240, 220, 0.98) 100%);
    box-shadow: 0 -10px 24px rgba(233, 153, 61, 0.12);
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 0;
}

.cooking-tab {
    flex: 1;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    border-radius: 16px;
    font-size: 11px;
    color: #94653d;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.cooking-tab-icon {
    font-size: 17px;
}

.cooking-tab-label {
    font-size: 11px;
}

.cooking-tab.active {
    color: #c46d16;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 18px rgba(236, 157, 72, 0.16);
}

.cooking-tab.active .cooking-tab-label::after {
    content: '';
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: #f29a36;
    margin: 3px auto 0;
}

/* =================================
   3.x 直播模块 (Live Feature)
   ================================= */
.nav-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.86);
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-icon-btn svg {
    width: 18px;
    height: 18px;
    stroke: #111;
    stroke-width: 1.5;
    fill: none;
}
.nav-icon-btn:active {
    transform: scale(0.92);
}
.live-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-page {
    background: #f7f7f7;
    color: #111;
}
.live-page .nav-header {
    background: rgba(255,255,255,0.96);
    border-bottom: 0.5px solid #e5e5e7;
}
.live-page .scroll-content {
    padding: 20px;
}
.live-rooms-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.live-rooms-title {
    font-size: 20px;
    font-weight: 700;
}
.live-rooms-subtitle {
    font-size: 13px;
    color: #777;
}
.live-rooms-hint {
    font-size: 12px;
    color: #a09f9f;
}
.live-room-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.live-rooms-empty {
    padding: 40px 20px;
    text-align: center;
    color: #8a8a8a;
    font-size: 13px;
    line-height: 1.6;
    border: 1px dashed rgba(0,0,0,0.1);
    border-radius: 20px;
    background: rgba(255,255,255,0.9);
}
.live-room-card {
    border: none;
    outline: none;
    background: #fff;
    border-radius: 26px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    cursor: pointer;
    text-align: left;
}
.live-room-card:focus-visible {
    box-shadow: 0 0 0 2px #111;
}
.live-room-cover {
    position: relative;
    height: 170px;
    background-size: cover;
    background-position: center;
}
.live-room-online {
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
}
.live-room-card-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.live-room-card-title {
    font-size: 17px;
    font-weight: 600;
}
.live-room-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
}
.live-room-card-desc {
    font-size: 13px;
    color: #7a7a7a;
    line-height: 1.5;
}

.live-room-page {
    background: #050505;
    color: #fff;
}
.live-room-header {
    padding: 32px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.live-room-anchor {
    display: flex;
    align-items: center;
    gap: 12px;
}
.live-room-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.35);
}
.live-room-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.live-room-name {
    font-size: 17px;
    font-weight: 600;
}
.live-room-id {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}
.live-room-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.3em;
    background: rgba(255,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    font-weight: 600;
}
.live-room-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 20px 80px;
    overflow-y: auto;
}
.live-room-scene {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.6;
    min-height: 90px;
}
.live-room-comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 220px;
    overflow-y: auto;
}
.live-comment-item {
    background: rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
}
.live-comment-item.from-me {
    background: rgba(255,255,255,0.2);
}
.live-comment-item.gift {
    border: 1px solid rgba(255,255,255,0.4);
}
.live-comment-name {
    font-weight: 600;
    margin-right: 6px;
}
.live-room-gift-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.live-gift-btn {
    flex: 1;
    min-width: 70px;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 10px;
    color: #fff;
    font-size: 13px;
}
.live-room-input-bar {
    display: flex;
    gap: 10px;
}
.live-room-input-bar input {
    flex: 1;
    border-radius: 16px;
    border: none;
    padding: 12px 14px;
    font-size: 14px;
}
.live-room-input-bar button {
    border-radius: 16px;
    border: none;
    background: #fff;
    padding: 0 18px;
    font-weight: 600;
}
.live-room-exit-btn {
    position: absolute;
    left: 20px;
    bottom: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 16px;
    padding: 10px 18px;
    font-size: 13px;
}

.live-profile-page {
    background: #f6f6f6;
    color: #111;
}
.live-profile-page .scroll-content {
    padding: 20px;
}
.live-profile-scroll {
    padding-bottom: 34px;
}
.live-profile-section {
    background: #fff;
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}
.live-profile-hero {
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
    border: 1px solid rgba(17,17,17,0.05);
}
.live-profile-hero-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.live-profile-hero-main {
    display: flex;
    align-items: center;
    gap: 14px;
}
.live-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    object-fit: cover;
    background: linear-gradient(135deg, #f2f2f2, #e9e9e9);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.live-profile-hero-meta {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.live-profile-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.live-profile-name {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-profile-switch-btn {
    border: 1px solid rgba(17,17,17,0.1);
    background: #f7f7f7;
    color: #111;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.live-profile-id,
.live-profile-realname {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
}
.live-profile-persona {
    margin-top: 2px;
    padding: 14px 15px;
    border-radius: 18px;
    background: #f7f7f7;
    color: #555;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
}
.live-profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.live-profile-stat-card {
    border-radius: 18px;
    padding: 14px 12px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
    border: 1px solid rgba(17,17,17,0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.live-profile-stat-label {
    font-size: 11px;
    color: #7a7a7a;
    line-height: 1.4;
}
.live-profile-stat-card strong {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}
.live-profile-section-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
}
.live-profile-desc {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}
.live-profile-live-toggle {
    margin-top: 14px;
    border: none;
    border-radius: 16px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    background: #000;
    color: #fff;
    cursor: pointer;
}
.live-profile-live-toggle.off {
    background: #fff;
    color: #111;
    border: 1px solid #111;
}
.live-profile-status {
    margin-top: 10px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}
.live-gift-records,
.live-dm-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.live-swipe-item {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
.live-swipe-delete {
    position: absolute;
    top: 0;
    right: 0;
    width: 92px;
    height: 100%;
    border: none;
    background: linear-gradient(180deg, #ff5a5f, #e53b41);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.live-swipe-content {
    position: relative;
    z-index: 1;
    transition: transform 0.24s ease;
    will-change: transform;
}
.live-swipe-content.swiped {
    transform: translateX(-92px);
}
.live-gift-record {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid #f0f0f0;
    font-size: 13px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}
.live-gift-record .gift-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 16px;
    background: #f7f7f7;
}
.live-gift-record .gift-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.live-gift-record strong {
    display: block;
    font-size: 14px;
    color: #111;
}
.live-gift-record .gift-body span {
    font-size: 12px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-gift-record .gift-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #666;
}
.live-dm-item {
    border: 1px solid #efefef;
    border-radius: 20px;
    padding: 14px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}
.live-dm-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #666;
}
.live-dm-name {
    font-weight: 600;
    color: #111;
}
.live-dm-time {
    margin-left: auto;
    font-size: 12px;
}
.live-dm-unread {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #111;
    color: #fff;
}
.live-dm-text {
    font-size: 13px;
    color: #4a4a4a;
    line-height: 1.5;
    word-break: break-word;
}
.live-empty-hint {
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 12px 0;
}
#live-delete-confirm-modal .book-modal-btn {
    background: linear-gradient(180deg, #ff6a6f, #e5484d);
    color: #fff;
    border-color: transparent;
}
@media (max-width: 420px) {
    .live-profile-name-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .live-profile-switch-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .live-profile-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* 小剧场页面 */
.theatre-page {
    background: #ffffff;
    color: #111111;
    display: flex;
    flex-direction: column;
}

.theatre-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #ffffff;
    border-bottom: 0.5px solid #e5e5e7;
}

.theatre-nav-title {
    font-size: 16px;
    font-weight: 600;
}

.theatre-nav-right {
    width: 40px;
}

.theatre-divider {
    height: 0.5px;
    background: #e5e5e7;
}

.theatre-body {
    flex: 1;
    padding: 30px 18px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.theatre-entry-grid {
    width: 100%;
    display: grid;
    gap: 18px;
    align-content: center;
}

.theatre-entry-card {
    width: min(100%, 320px);
    margin: 0 auto;
    appearance: none;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
    border-radius: 28px;
    padding: 24px 22px 22px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.08);
    border: 1.5px solid #cfcfd4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.theatre-entry-card:active {
    transform: scale(0.985);
}

.theatre-entry-card:hover {
    box-shadow: 0 18px 40px rgba(0,0,0,0.1);
    border-color: #b7b7bd;
}

.theatre-entry-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #d7d7dc;
    background: #f3f3f5;
    color: #666;
    font-size: 11px;
    letter-spacing: 0.4px;
}

.theatre-entry-title {
    font-size: 24px;
    font-weight: 700;
    color: #111111;
}

.theatre-entry-subtitle {
    font-size: 14px;
    line-height: 1.6;
    color: #666c74;
}

.theatre-entry-action {
    margin-top: 4px;
    font-size: 12px;
    color: #8a8f98;
}

.theatre-panel {
    position: fixed;
    inset: 0;
    z-index: 1585;
    background: rgba(15, 15, 18, 0.36);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.theatre-panel.active {
    display: flex;
}

.theatre-panel-dialog {
    width: min(100%, 380px);
    max-height: min(82vh, 720px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #f8f8fa 100%);
    border: 1px solid #d2d2d7;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}

.theatre-panel-dialog-large {
    width: min(100%, 420px);
}

.theatre-panel-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 10px;
}

.theatre-panel-eyebrow {
    font-size: 11px;
    color: #8a8f98;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.theatre-panel-close {
    width: 34px;
    height: 34px;
    border: 1px solid #d7d7dc;
    border-radius: 50%;
    background: #f4f4f6;
    color: #555;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.theatre-panel-close:active {
    transform: scale(0.94);
}

.theatre-panel .theatre-section-header {
    font-size: 20px;
    font-weight: 700;
    color: #101114;
}

.theatre-panel .theatre-section-subtitle {
    padding: 0 20px;
    font-size: 13px;
    line-height: 1.7;
    color: #6d727c;
}

.theatre-panel .theatre-story-toolbar,
.theatre-panel .theatre-render-rule-list,
.theatre-panel .theatre-story-columns {
    padding-left: 20px;
    padding-right: 20px;
}

.theatre-panel .theatre-story-toolbar {
    margin-top: 14px;
}

#theatre-add-render-rule-btn,
#theatre-add-story-template-btn {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 14px 16px !important;
    min-height: 48px;
    border: 1px solid #cfd3da !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #f8f9fb 0%, #eceff4 100%) !important;
    color: #2f343b !important;
    box-shadow: 0 12px 24px rgba(148, 163, 184, 0.18), inset 0 1px 0 rgba(255,255,255,0.9);
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    margin-left: 0 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

#theatre-add-render-rule-btn:hover,
#theatre-add-story-template-btn:hover {
    border-color: #bcc2cb !important;
    box-shadow: 0 16px 30px rgba(148, 163, 184, 0.22), inset 0 1px 0 rgba(255,255,255,0.95);
    filter: brightness(1.01);
}

#theatre-add-render-rule-btn:active,
#theatre-add-story-template-btn:active {
    transform: scale(0.985);
    box-shadow: 0 8px 16px rgba(148, 163, 184, 0.16), inset 0 1px 0 rgba(255,255,255,0.92);
}

.theatre-panel .theatre-render-rule-list,
.theatre-panel .theatre-story-columns {
    flex: 1;
    min-height: 0;
    padding-bottom: 20px;
    overflow-y: auto;
}

.theatre-panel .theatre-story-columns {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.theatre-subsection-title {
    font-size: 14px;
    font-weight: 700;
    color: #16181d;
    margin-bottom: 10px;
}

.theatre-empty {
    padding: 16px;
    border: 1px dashed #d8d8de;
    border-radius: 18px;
    background: #fbfbfc;
    color: #7a7f87;
    font-size: 12px;
    line-height: 1.7;
}

.theatre-rule-group + .theatre-rule-group {
    margin-top: 14px;
}

.theatre-rule-group-title {
    margin-bottom: 8px;
    font-size: 12px;
    color: #7c818a;
}

.theatre-rule-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e1e1e7;
    box-shadow: 0 8px 18px rgba(0,0,0,0.04);
}

.theatre-rule-item + .theatre-rule-item {
    margin-top: 10px;
}

.theatre-rule-main {
    min-width: 0;
    flex: 1;
}

.theatre-rule-name {
    font-size: 14px;
    font-weight: 700;
    color: #16181d;
    line-height: 1.5;
}

.theatre-rule-meta,
.theatre-rule-pattern {
    margin-top: 4px;
    font-size: 12px;
    color: #7c818a;
    line-height: 1.6;
    word-break: break-all;
}

.theatre-rule-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.theatre-rule-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #555;
}

.theatre-story-tag,
.theatre-tag-list .theatre-story-tag {
    border: 1px solid #d8d8de;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.18s ease;
}

.theatre-story-tag.selected,
.theatre-tag-list .theatre-story-tag.selected {
    background: #111827;
    border-color: #111827;
    color: #fff;
    box-shadow: 0 10px 18px rgba(17,24,39,0.18);
}

.theatre-modal {
    width: min(420px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #f9f9fb 100%);
    border-radius: 26px;
    border: 1px solid #d8d8de;
    box-shadow: 0 22px 54px rgba(0,0,0,0.2);
}

.theatre-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 18px 10px;
}

.theatre-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #13161b;
}

.theatre-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid #d7d7dc;
    border-radius: 50%;
    background: #f4f4f6;
    color: #555;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.theatre-modal-body {
    padding: 0 18px 18px;
    overflow-y: auto;
}

.theatre-modal-body-scroll {
    max-height: calc(100vh - 190px);
}

.theatre-modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 18px 18px;
    border-top: 1px solid #ececf1;
    background: rgba(255,255,255,0.92);
}

.theatre-modal-footer .btn-small {
    flex: 1;
}

.theatre-modal .btn-small {
    border: 1px solid #d5d7dd;
    border-radius: 14px;
    padding: 10px 14px;
    min-height: 42px;
    font-size: 13px;
    font-weight: 700;
    margin-left: 0;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.theatre-modal .btn-small:active {
    transform: scale(0.97);
}

.theatre-modal .btn-small.primary {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #ffffff;
    border-color: #111827;
    box-shadow: 0 14px 28px rgba(17, 24, 39, 0.22);
}

.theatre-modal .btn-small.secondary,
.theatre-modal .btn-small:not(.primary) {
    background: linear-gradient(180deg, #f8f8fa 0%, #eceef2 100%);
    color: #42464d;
    border-color: #d7d9df;
}

.theatre-modal .btn-small.secondary:hover,
.theatre-modal .btn-small:not(.primary):hover {
    border-color: #c2c6ce;
    box-shadow: 0 14px 26px rgba(148, 163, 184, 0.16);
    filter: brightness(0.995);
}

.theatre-modal .btn-small.primary:hover {
    filter: brightness(1.03);
    box-shadow: 0 16px 30px rgba(17, 24, 39, 0.26);
}

#theatre-rule-test-btn {
    background: linear-gradient(180deg, #f7f7f9 0%, #e9ecf1 100%);
    color: #3f444b;
    border-color: #d3d7de;
}

.theatre-form-group {
    margin-top: 14px;
}

.theatre-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.theatre-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #50545c;
}

.theatre-input,
.theatre-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7d7de;
    border-radius: 16px;
    background: #fff;
    padding: 12px 14px;
    font-size: 13px;
    color: #111;
    outline: none;
}

.theatre-input:focus,
.theatre-textarea:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17,24,39,0.08);
}

.theatre-textarea {
    resize: vertical;
    min-height: 88px;
    line-height: 1.6;
}

.theatre-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #868b94;
}

.theatre-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.theatre-test-row {
    align-items: center;
}

.theatre-test-status {
    font-size: 12px;
    color: #5b6068;
}

.theatre-test-status.error {
    color: #c0392b;
}

.theatre-preview-wrapper {
    margin-top: 12px;
    padding: 14px;
    border-radius: 20px;
    background: #f6f7fa;
    border: 1px solid #e4e5ea;
}

.theatre-preview-title {
    margin-bottom: 10px;
    font-size: 12px;
    color: #80858e;
}

.theatre-preview-card {
    min-height: 70px;
}

.theatre-preview-placeholder {
    padding: 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px dashed #d9d9df;
    font-size: 12px;
    line-height: 1.7;
    color: #8a8f98;
}

.theatre-switch {
    position: relative;
    width: 48px;
    height: 28px;
    display: inline-block;
}

.theatre-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theatre-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d5d7dd;
    transition: 0.2s ease;
}

.theatre-switch-slider::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: 0.2s ease;
}

.theatre-switch input:checked + .theatre-switch-slider {
    background: #111827;
}

.theatre-switch input:checked + .theatre-switch-slider::after {
    transform: translateX(20px);
}

.theatre-modal-overlay {
    z-index: 1700;
    background: rgba(12, 12, 15, 0.42);
}

/* 外观设置页面模块化卡片 */
#beautify-page .beautify-module-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 22px;
}

#beautify-page .beautify-module-btn {
    width: 100%;
    border: none;
    outline: none;
    background: #ffffff;
    color: #000000;
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}

#beautify-page .beautify-module-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

#beautify-page .beautify-module-btn.active {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.10);
}

#beautify-page .beautify-module-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

#beautify-page .beautify-module-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f5f6f8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    font-size: 16px;
}

#beautify-page .beautify-module-title {
    font-size: 15px;
    font-weight: 600;
}

#beautify-page .beautify-module-desc {
    font-size: 12px;
    color: #777;
}

#beautify-page .beautify-panel {
    display: none;
}

#beautify-page .beautify-panel.active {
    display: block;
}

/* 强制非激活面板不可见，避免偶发样式覆盖导致多面板同时露出 */
#beautify-page .beautify-panel:not(.active) {
    display: none !important;
}

/* 让外观设置整个页面成为单一滚动容器，避免面板不在可滚动区域内导致“看不见、滚不动” */
#beautify-page {
    overflow-y: auto;
}
/* 外观页内的列表区域不再单独产生嵌套滚动，避免双层滚动导致的内容无法到达 */
#beautify-page .scroll-content {
    overflow: visible;
    flex: 0 0 auto;
}

/* 外观设置页按钮用白底 + 阴影风格 */
#beautify-page .btn-small {
    background: #ffffff;
    color: #000000;
    border: 1px solid #e4e4e7;
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

#beautify-page .btn-small:active {
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transform: translateY(1px);
}

.anniv-widget-style-card {
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(17,17,17,0.06);
    background: linear-gradient(180deg, #f8f2ec 0%, #f3ebe4 100%);
    box-shadow: 0 14px 30px rgba(17,17,17,0.06);
}

.anniv-widget-style-title {
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 15px;
    color: #111111;
}

.anniv-widget-style-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.anniv-widget-style-row-bottom {
    align-items: flex-end;
}

.anniv-widget-style-field {
    flex: 1;
    min-width: 0;
}

.anniv-widget-style-field-compact {
    flex: 0 0 104px;
}

.anniv-widget-style-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #5f5f64;
}

.anniv-widget-number-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    color: #111111;
    border: 1px solid #e7e5e4;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #faf7f4 100%);
    box-sizing: border-box;
    appearance: textfield;
    -moz-appearance: textfield;
}

.anniv-widget-number-input::-webkit-outer-spin-button,
.anniv-widget-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.anniv-widget-color-input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 4px;
    border: 1px solid #e7e5e4;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #faf7f4 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    cursor: pointer;
}

.anniv-widget-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
    width: 100%;
    height: 100%;
}

.anniv-widget-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 12px;
}

.anniv-widget-color-input::-moz-color-swatch {
    border: none;
    border-radius: 12px;
}

.anniv-widget-style-action-wrap {
    display: flex;
}

.anniv-widget-secondary-btn,
.anniv-widget-upload-btn,
.anniv-widget-primary-btn {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#anniversary-creator-page .anniv-widget-secondary-btn {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d9dee7 !important;
    box-shadow: 0 10px 22px rgba(15,23,42,0.08) !important;
}

#anniversary-creator-page .anniv-widget-secondary-btn:hover,
#anniversary-creator-page .anniv-widget-upload-btn:hover {
    background: #ffffff !important;
    border-color: #cfd6e2 !important;
    box-shadow: 0 12px 24px rgba(15,23,42,0.1) !important;
}

.anniv-widget-upload-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.anniv-widget-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#anniversary-creator-page .anniv-widget-upload-btn {
    width: auto;
    min-width: 112px;
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d9dee7 !important;
    box-shadow: 0 10px 22px rgba(15,23,42,0.08) !important;
}

.anniv-widget-bg-preview {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    border: 1px solid rgba(17,17,17,0.08);
    background: linear-gradient(180deg, #f4f4f5 0%, #ececec 100%);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.75);
}

.anniv-widget-primary-btn {
    margin-top: 14px;
    background: linear-gradient(135deg, #1b1b1d 0%, #3b3b40 100%);
    color: #ffffff;
    border-color: rgba(17,17,17,0.08);
    box-shadow: 0 14px 24px rgba(17,17,17,0.16);
}


/* =================================
   4. 可复用组件 (Reusable Components)
   - 抽屉、弹窗、设置卡片等
   ================================= */

/* --- 通用设置卡片 --- */
.setting-card { 
    background: #fff; 
    border-radius: 15px; 
    padding: 0 15px; 
    margin-bottom: 20px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); 
}
/* 外观面板专用卡片，稍微加大留白 */
.appearance-card {
    margin: 10px 14px 20px;
    padding: 10px 14px 12px;
}

.setting-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 0; 
    border-bottom: 0.5px solid #eee; 
}
.setting-row:last-child { 
    border-bottom: none; 
}
.setting-row label:not(.rocker-switch) {
    font-size: 15px;
    min-width: 80px;
    font-weight: 500;
}
.input-clean {
    flex: 1;
    border: none;
    font-size: 14px;
    text-align: right;
    outline: none;
    background: transparent;
    color: #555;
}

#global-beautify-css-input {
    direction: ltr;
    text-align: left;
}
.btn-small {
    padding: 6px 12px;
    background: #e5e5ea;
    border-radius: 8px;
    font-size: 12px;
    color: #333;
    border: none;
    cursor: pointer;
    margin-left: 5px;
    font-weight: bold;
}

#api-page .btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 14px;
    margin-left: 0;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

#api-page .btn-small:active {
    transform: translateY(1px) scale(0.985);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

#api-page .setting-row > .btn-small,
#api-page > .scroll-content > div[style*="padding: 0 15px"] .btn-small {
    width: 100%;
    justify-content: center;
}

.travel-modal .btn-small,
.travel-progress-actions .btn-small {
    margin-left: 0;
    min-height: 40px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.travel-modal .btn-small.secondary,
.travel-progress-actions .btn-small:not(.primary) {
    background: linear-gradient(180deg, #ecfaf0 0%, #dcf4e4 100%);
    color: #356347;
    border: 1px solid rgba(162, 216, 178, 0.8);
    box-shadow: 0 8px 18px rgba(113, 171, 133, 0.12);
}

.travel-modal .btn-small.primary,
.travel-progress-actions .btn-small.primary {
    background: linear-gradient(135deg, #7cca95 0%, #55b674 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(86, 178, 115, 0.24);
}

.travel-modal .btn-small:active,
.travel-progress-actions .btn-small:active,
#travel-progress-send:active {
    transform: scale(0.98);
}

/* 外观页面的资源列表行样式 */
/* 外观页面的资源列表行样式 */
.appearance-resource-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px 12px;
    margin-top: 6px;
}

.appearance-resource-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 6px;
    border-bottom: none;
}

.appearance-resource-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.appearance-resource-name {
    font-size: 12px;
    font-weight: 500;
    color: #111;
    text-align: center;
}

.appearance-resource-desc {
    font-size: 10px;
    color: #888;
    text-align: center;
}

.appearance-change-btn {
    margin-left: 0;
    width: 100%;
}

.appearance-help-text {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
    margin-top: 6px;
}

.appearance-hidden-inputs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.appearance-hidden-input {
    display: block;
    width: 0;
    height: 0;
    border: none;
    padding: 0;
    margin: 0;
}

.appearance-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.appearance-action-row .appearance-submit-btn {
    flex: 1;
}

.appearance-save-wide {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}

/* 外观设置：改成更接近书城的黑白极简胶囊条目风格 */
#beautify-page .beautify-module-btn {
    border: 1px solid rgba(17,17,17,0.08);
    border-radius: 24px;
    padding: 14px 16px;
    gap: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
    box-shadow: 0 14px 28px rgba(17,17,17,0.06);
}

#beautify-page .beautify-module-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(17,17,17,0.08);
}

#beautify-page .beautify-module-btn.active {
    border-color: #cfcfd4;
    box-shadow: 0 0 0 1px rgba(207,207,212,0.55), 0 18px 34px rgba(17,17,17,0.08);
}

#beautify-page .beautify-module-main {
    gap: 10px;
}

#beautify-page .beautify-module-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #d4d4d8;
    background: #ffffff;
    box-shadow: none;
}

#beautify-page .beautify-module-title {
    font-size: 15px;
    font-weight: 700;
}

#beautify-page .beautify-module-desc {
    font-size: 12px;
    color: #6e6e73;
}

#beautify-page .appearance-card {
    margin: 12px 14px 20px;
    padding: 16px;
    border-radius: 26px;
    border: 1px solid #ececec;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
    box-shadow: 0 16px 34px rgba(17,17,17,0.06);
}

#beautify-page .appearance-section-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#beautify-page .appearance-resource-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

#beautify-page .appearance-resource-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

#beautify-page .appearance-change-btn {
    min-width: 72px;
    min-height: 40px;
    border-radius: 14px;
    font-weight: 600;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f7 100%);
}

#beautify-page .appearance-picker-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#beautify-page .appearance-picker-btn {
    flex: 0 0 auto;
    min-width: 88px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f7 100%);
    color: #1f2937;
}

#beautify-page .appearance-picker-url-box,
#beautify-page .appearance-picker-name-box {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(17,17,17,0.06);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

#beautify-page .appearance-picker-name-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#beautify-page .appearance-picker-name-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#beautify-page .appearance-picker-name-field span {
    font-size: 12px;
    font-weight: 600;
    color: #5f5f64;
}

#beautify-page .appearance-picker-name-confirm,
#beautify-page .appearance-picker-url-box .btn-small,
#beautify-page .appearance-picker-reset {
    min-width: 88px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
}

#beautify-page .appearance-picker-name-toggle,
#beautify-page .appearance-picker-reset {
    color: #1f2937;
    font-weight: 600;
}

#beautify-page .appearance-picker-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

#beautify-page .appearance-picker-name-confirm {
    background: linear-gradient(135deg, #1b1b1d 0%, #3b3b40 100%);
    color: #ffffff;
}

#beautify-page .appearance-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid #d9d9de;
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
    box-shadow: 0 12px 28px rgba(17,17,17,0.05);
    color: #111111;
    text-align: left;
}

#beautify-page .appearance-group-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#beautify-page .appearance-group-title {
    font-size: 14px;
    font-weight: 700;
}

#beautify-page .appearance-group-subtitle {
    font-size: 12px;
    color: #7a7a80;
}

#beautify-page .appearance-group-arrow {
    font-size: 14px;
    color: #8f8f95;
    transition: transform 0.28s ease, color 0.28s ease;
}

#beautify-page .appearance-group-toggle.open .appearance-group-arrow {
    transform: rotate(90deg);
    color: #55555c;
}

#beautify-page .appearance-resource-group {
    margin-top: -2px;
    padding: 0 4px;
}

#beautify-page .appearance-resource-list-grouped {
    padding: 6px 0 4px;
}

#beautify-page .appearance-resource-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid #e6e6ea;
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
    box-shadow: 0 10px 24px rgba(17,17,17,0.05);
}

#beautify-page .appearance-resource-main {
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    gap: 4px;
}

#beautify-page .appearance-resource-name,
#beautify-page .appearance-resource-desc {
    text-align: left;
}

#beautify-page .appearance-resource-name {
    font-size: 14px;
    font-weight: 600;
}

#beautify-page .appearance-resource-desc {
    font-size: 12px;
    line-height: 1.45;
    color: #6e6e73;
}

#beautify-page .appearance-help-text {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #6e6e73;
}

#beautify-page .appearance-change-btn,
#beautify-page .appearance-submit-btn,
#beautify-page .appearance-save-wide {
    min-height: 36px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #d3d3d8;
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f6 100%);
    color: #222226;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
}

#beautify-page .appearance-change-btn {
    width: auto;
    min-width: 74px;
    flex: 0 0 auto;
}

#beautify-page .appearance-action-row {
    gap: 10px;
}

#beautify-page .appearance-action-row .appearance-submit-btn {
    flex: 1 1 180px;
}

/* 壁纸轮换块 */
.appearance-rotate-block {
    margin-top: 10px;
}

.appearance-toggle-row {
    padding-top: 10px;
    padding-bottom: 10px;
}

.appearance-toggle-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
}

.appearance-toggle-control input[type="checkbox"] {
    width: auto;
}

.appearance-rotate-container {
    margin-top: 4px;
}

.appearance-rotate-slot {
    padding: 10px 0 6px 0;
    border-bottom: 0.5px dashed #eee;
}

.appearance-rotate-slot:last-child {
    border-bottom: none;
}

.appearance-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.appearance-slot-title {
    font-size: 13px;
    font-weight: 500;
}

.appearance-time-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.appearance-time-input {
    flex: 0 0 110px;
    font-size: 12px;
}

/* 锁屏密码长度选择 */
.appearance-passcode-lengths {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.appearance-length-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #555;
}

/* 外观统一弹窗 */
.appearance-picker-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.appearance-picker-modal.active {
    display: flex;
}

.appearance-picker-dialog {
    width: 82%;
    max-width: 360px;
    background: #fff;
    border: 1px solid #d9d9de;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    padding: 12px 14px 14px;
}

.appearance-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.appearance-picker-title {
    font-size: 15px;
    font-weight: 600;
}

.appearance-picker-subtitle {
    font-size: 11px;
    color: #777;
}

.appearance-picker-close {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}

.appearance-picker-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.appearance-picker-option {
    border-radius: 999px;
    border: 1px solid #d4d4d9;
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
    padding: 8px 10px;
    font-size: 13px;
    text-align: center;
    color: #222226;
}

.appearance-picker-url-box {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.appearance-picker-url-input {
    border-radius: 10px;
    border: 1px solid #d7d7dc;
    padding: 8px 10px;
    font-size: 13px;
    background: #fbfbfc;
}

.appearance-picker-confirm {
    margin-left: 0;
}

.appearance-picker-dialog .btn-small {
    border: 1px solid #d3d3d8;
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f6 100%);
    color: #222226;
    box-shadow: none;
}

.appearance-picker-reset {
    border-radius: 999px;
    border: 1px solid #d8d8dd;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f7 100%);
    color: #1f2937;
    padding: 6px 10px;
    font-size: 12px;
    align-self: flex-start;
}
/* 游戏大厅 / 自律钟 / 纪念日 主界面整体偏白，接近世界书 */
#game-center-page,
#anniversary-page,
#clock-page {
    background-color: #f7f8fa;
}


/* 相关条目的卡片化阴影与边框 */
#game-center-page .neo-card,
#anniversary-page .anniversary-item,
#clock-page .clock-task-item {
    background-color: #ffffff;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* 剧本杀 · 古宅暗色调样式 */
.script-kill-setup-overlay {
    position: absolute;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 10% 0%, rgba(255,255,255,0.08), transparent 55%),
                radial-gradient(circle at 90% 100%, rgba(255,255,255,0.04), transparent 55%),
                rgba(0,0,0,0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
}

.script-kill-setup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.script-kill-setup-modal {
    width: 92%;
    max-width: 520px;
    max-height: min(88vh, 720px);
    padding: 18px 18px 14px;
    border-radius: 22px;
    background: radial-gradient(circle at 20% 0%, #2b2520, #120f0c 65%, #0a0907 100%);
    border: 1px solid rgba(255,245,215,0.20);
    box-shadow: 0 18px 45px rgba(0,0,0,0.65);
    color: #f7f2e9;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.script-kill-setup-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f3e0b5;
    text-shadow: 0 0 10px rgba(0,0,0,0.75);
    margin-bottom: 4px;
}

.script-kill-setup-section {
    margin-top: 8px;
    padding: 10px 10px 8px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(15,13,11,0.92), rgba(33,27,22,0.98));
    border: 1px solid rgba(255,245,215,0.06);
}

.script-kill-setup-label {
    font-size: 13px;
    font-weight: 500;
    color: #f3e0b5;
    margin-bottom: 6px;
}

.script-kill-player-count {
    display: inline-flex;
    gap: 6px;
    padding: 4px 2px 2px;
    border-radius: 999px;
    background: rgba(10,8,6,0.9);
    border: 1px solid rgba(255,245,215,0.18);
}

.script-kill-player-count .count-btn {
    min-width: 76px;
    padding: 4px 10px;
    border-radius: 999px;
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
    color: #e8ddcc;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.script-kill-player-count .count-btn.active {
    background: radial-gradient(circle at 30% 0%, #f3e0b5, #c79a54 80%);
    color: #120f0c;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.65);
}

.script-kill-setup-hint,
.script-kill-setup-subhint {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(246,238,220,0.75);
}

.script-kill-script-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.script-kill-script-item {
    padding: 8px 10px 7px;
    border-radius: 12px;
    border: 1px solid rgba(255,245,215,0.12);
    background: radial-gradient(circle at 0% 0%, rgba(255,245,215,0.08), transparent 60%),
                rgba(12,10,8,0.95);
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.script-kill-script-item.active {
    border-color: rgba(255,222,173,0.9);
    box-shadow: 0 0 0 1px rgba(255,222,173,0.58), 0 8px 18px rgba(0,0,0,0.7);
    transform: translateY(-1px);
}

.script-kill-script-name {
    font-size: 14px;
    font-weight: 600;
    color: #f9e6c4;
}

.script-kill-script-desc {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(246,238,220,0.8);
}

.script-kill-role-columns {
    display: flex;
    gap: 10px;
}

.script-kill-role-column {
    flex: 1;
}

.script-kill-role-title {
    font-size: 12px;
    font-weight: 500;
    color: rgba(244,227,190,0.95);
    margin-bottom: 4px;
}

.script-kill-role-list {
    max-height: 150px;
    padding: 4px 2px;
    border-radius: 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,245,215,0.08);
    overflow-y: auto;
}

.script-kill-role-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.script-kill-role-item + .script-kill-role-item {
    margin-top: 3px;
}

.script-kill-role-item.user-role {
    background: linear-gradient(120deg, rgba(240,232,215,0.08), rgba(50,40,32,0.95));
}

.script-kill-role-item.ai-role {
    background: linear-gradient(120deg, rgba(18,14,11,0.95), rgba(35,27,22,0.98));
}

.script-kill-role-item.active {
    box-shadow: 0 0 0 1px rgba(255,222,173,0.9), 0 6px 16px rgba(0,0,0,0.75);
    transform: translateY(-0.5px);
}

.script-kill-role-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,245,215,0.55);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}

.script-kill-role-main {
    flex: 1;
    min-width: 0;
}

.script-kill-role-name {
    font-size: 13px;
    font-weight: 500;
    color: #f8ebd2;
}

.script-kill-role-desc {
    margin-top: 1px;
    font-size: 11px;
    color: rgba(246,238,220,0.8);
}

.script-kill-role-empty {
    padding: 8px 7px;
    font-size: 11px;
    color: rgba(246,238,220,0.7);
}

.script-kill-setup-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.script-kill-setup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
    flex-shrink: 0;
}

.script-kill-setup-actions .setup-btn {
    min-width: 82px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,245,215,0.35);
    font-size: 13px;
    cursor: pointer;
    background: rgba(12,10,8,0.9);
    color: #f6eddc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.script-kill-setup-actions .setup-btn.secondary {
    background: transparent;
    color: rgba(246,238,220,0.9);
}

.script-kill-setup-actions .setup-btn.primary {
    background: linear-gradient(135deg, #f3e0b5, #c9984b);
    color: #16110c;
}

/* 剧本杀主界面：古宅暗色调 */
.script-kill-page {
    background: radial-gradient(circle at 0% 0%, #221a13, #070605 55%, #020101 100%);
    color: #f6f1e7;
}

.script-kill-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.script-kill-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(15,11,8,0.95));
    border-bottom: 1px solid rgba(255,245,215,0.18);
}

.script-kill-header .nav-btn {
    border: none;
    outline: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0%, rgba(255,255,255,0.16), rgba(0,0,0,0.95));
    color: #f5ebd9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.7);
}

.script-kill-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.script-kill-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.script-kill-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(247,238,220,0.8);
}

.script-kill-phase {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,245,215,0.5);
    color: #f3e0b5;
}

.script-kill-players {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 6px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255,245,215,0.10);
    background: radial-gradient(circle at 0 0, rgba(255,245,215,0.18), transparent 55%),
                rgba(6,4,3,0.98);
}

.script-kill-player-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 54px;
}

.script-kill-player-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,245,215,0.6);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.7), 0 6px 14px rgba(0,0,0,0.85);
    object-fit: cover;
}

.script-kill-player-name {
    max-width: 58px;
    font-size: 11px;
    color: #f8ebd2;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.script-kill-main {
    flex: 1;
    padding: 10px 10px 6px;
    overflow-y: auto;
    background: radial-gradient(circle at 10% 0%, #1d1610, #050405 70%);
}

.script-kill-log {
    min-height: 100%;
    border-radius: 16px;
    border: 1px solid rgba(255,245,215,0.14);
    background:
        linear-gradient(135deg, rgba(10,7,5,0.96), rgba(18,14,11,0.98)),
        repeating-linear-gradient(180deg, rgba(255,245,215,0.03) 0, rgba(255,245,215,0.03) 1px, transparent 1px, transparent 20px);
    padding: 10px 11px;
    font-size: 13px;
    line-height: 1.6;
    color: #f6f1e7;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 18px 40px rgba(0,0,0,0.9);
}

.script-kill-log-placeholder {
    margin: 0;
    font-size: 12px;
    color: rgba(247,238,220,0.75);
}

.script-kill-log-block + .script-kill-log-block {
    margin-top: 10px;
}

.script-kill-log-block p {
    margin: 0 0 4px;
}

.script-kill-log-block p:last-child {
    margin-bottom: 0;
}

.script-kill-toolbar {
    padding: 6px 10px 4px;
    display: flex;
    gap: 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0.96), rgba(16,12,9,0.98));
    border-top: 1px solid rgba(255,245,215,0.12);
}

.script-kill-tool-btn {
    flex: 1;
    border-radius: 999px;
    border: 1px solid rgba(255,245,215,0.22);
    background: rgba(6,4,3,0.95);
    color: #f6eddc;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.script-kill-tool-btn.primary {
    flex: 1.2;
    background: linear-gradient(135deg, #f3e0b5, #c9984b);
    color: #16110c;
}

.script-kill-input-panel {
    padding: 6px 10px 10px;
    background: radial-gradient(circle at 80% 0%, rgba(255,245,215,0.12), transparent 55%),
                rgba(0,0,0,0.96);
    border-top: 1px solid rgba(255,245,215,0.18);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.script-kill-input-hint {
    font-size: 11px;
    color: rgba(246,238,220,0.8);
}

.script-kill-input-row {
    display: flex;
    gap: 8px;
}

#script-kill-input {
    flex: 1;
    border-radius: 999px;
    border: 1px solid rgba(255,245,215,0.22);
    background: rgba(12,9,7,0.98);
    color: #f9f2e6;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
}

#script-kill-input::placeholder {
    color: rgba(246,238,220,0.58);
}

.script-kill-action-btn {
    min-width: 72px;
    border-radius: 999px;
    border: 1px solid rgba(255,245,215,0.35);
    background: linear-gradient(135deg, #f3e0b5, #c9984b);
    color: #16110c;
    font-size: 13px;
    cursor: pointer;
}

.script-kill-action-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

.script-kill-vote-row {
    display: flex;
    gap: 8px;
}

#script-kill-vote-select {
    flex: 1;
    border-radius: 999px;
    border: 1px solid rgba(255,245,215,0.26);
    background: rgba(12,9,7,0.96);
    color: #f9f2e6;
    padding: 6px 11px;
    font-size: 13px;
}

#script-kill-vote-select option {
    background: #1a140f;
    color: #f6f1e7;
}

.script-kill-status {
    min-height: 16px;
    font-size: 11px;
    color: rgba(246,238,220,0.8);
}

.script-kill-setup-status {
    min-height: 18px;
    padding: 0 4px;
    font-size: 12px;
    color: #f3e0b5;
    letter-spacing: 0.02em;
}

/* 剧本杀查看身份 / 时间线弹窗 */
.script-kill-modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 2700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08), transparent 55%),
                rgba(0,0,0,0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease-out;
}

.script-kill-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.script-kill-modal {
    width: 88%;
    max-width: 460px;
    max-height: 80vh;
    border-radius: 20px;
    border: 1px solid rgba(255,245,215,0.3);
    background: radial-gradient(circle at 0 0, #261e16, #0c0907 70%);
    box-shadow: 0 18px 48px rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f6f1e7;
}

.script-kill-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(255,245,215,0.16);
}

.script-kill-modal-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f3e0b5;
}

.script-kill-modal-close {
    border: none;
    outline: none;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(0,0,0,0.7);
    color: #f6f1e7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.script-kill-modal-body {
    padding: 10px 14px 12px;
    overflow-y: auto;
}

.script-kill-role-detail {
    margin-bottom: 10px;
}

.script-kill-role-detail h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #f9e6c4;
}

.script-kill-role-detail p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(246,238,220,0.88);
}

.script-kill-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.script-kill-timeline-item {
    position: relative;
    padding-left: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(246,238,220,0.9);
}

.script-kill-timeline-item::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f3e0b5;
}

.script-kill-timeline-empty {
    font-size: 12px;
    color: rgba(246,238,220,0.75);
}

/* 朋友圈动态卡片：背景更白，边缘带阴影以增强区分度 */
#qq-tab-moments {
    background-color: #ffffff !important;
}

/* 孵蛋室：黑白极简风布局与组件样式 */
.hatchery-page {
    background-color: #f5f5f5;
    color: #000;
}

.hatchery-nav {
    background: rgba(255,255,255,0.96);
    border-bottom: 0.5px solid #e3e3e3;
    backdrop-filter: blur(16px);
}

.hatchery-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 15px 24px;
}

/* 孵蛋室主界面条目列表 */
.hatchery-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 20px rgba(0,0,0,0.03);
    cursor: pointer;
    flex: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hatchery-item:hover {
    background-color: #fafafa;
    box-shadow: 0 10px 28px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}

.hatchery-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}

.hatchery-item-icon-char {
    background: #111;
    color: #fff;
}

.hatchery-item-icon-world {
    background: #fff;
    color: #111;
}

.hatchery-item-icon-css {
    background: #000;
    color: #fff;
}

.hatchery-item-icon-qa {
    background: linear-gradient(135deg, #111 0%, #3b3b3b 100%);
    color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.hatchery-item-highlight {
    border-color: rgba(17,17,17,0.14);
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(246,246,246,0.96) 100%);
}

.hatchery-item-highlight .hatchery-item-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hatchery-item-highlight .hatchery-item-title::after {
    content: none;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.hatchery-item-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hatchery-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.hatchery-item-desc {
    font-size: 12px;
    color: #777;
}

.hatchery-module-card {
    background-color: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hatchery-module-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hatchery-module-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hatchery-module-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.hatchery-module-subtitle {
    font-size: 12px;
    color: #777;
}

.hatchery-module-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hatchery-status-text {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    /* 黑色与灰色交替条纹，移动端可见且更醒目 */
    background: repeating-linear-gradient(90deg,
        #000000 0%, #888888 12.5%,
        #000000 25%, #888888 37.5%,
        #000000 50%, #888888 62.5%,
        #000000 75%, #888888 87.5%,
        #000000 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* 加快渐变移动速度 */
    animation: statusGradientMove 2.7s linear infinite;
}

@keyframes statusGradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .hatchery-status-text {
        animation: none;
        background-position: 50% 50%;
    }
}

.hatchery-btn.hatchery-btn-small {
    padding: 6px 10px;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

.hatchery-textarea,
.hatchery-output {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fafafa;
    padding: 10px 11px;
    font-family: Menlo, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #111;
    outline: none;
    resize: vertical;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.hatchery-textarea::placeholder,
.hatchery-output::placeholder {
    color: #999;
}

.hatchery-output {
    min-height: 110px;
    max-height: 220px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.hatchery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.hatchery-btn {
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background-color 0.12s ease-out;
}

.hatchery-btn-ghost {
    background-color: transparent;
    color: #000;
    border: 1px solid #000;
    box-shadow: none;
}

.hatchery-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 8px rgba(0,0,0,0.16);
}

.hatchery-btn[disabled] {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}

.hatchery-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-top: 2px;
}

.hatchery-input,
.hatchery-select-full {
    width: 100%;
}

.hatchery-input,
.hatchery-select {
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fafafa;
    padding: 10px 11px;
    font-size: 13px;
    line-height: 1.4;
    color: #111;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.hatchery-input:focus,
.hatchery-select:focus,
.hatchery-textarea:focus,
.hatchery-output:focus {
    border-color: #222;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17,17,17,0.08);
}

.hatchery-qa-content,
.hatchery-qa-chat-layout {
    gap: 14px;
}

.hatchery-qa-hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f4f4f4 100%);
}

.hatchery-qa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.hatchery-qa-tips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hatchery-qa-tip {
    border-radius: 12px;
    border: 1px solid #ececec;
    background: rgba(255,255,255,0.84);
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: #454545;
}

.hatchery-qa-persona {
    min-height: 92px;
}

.hatchery-qa-question {
    min-height: 118px;
}

.hatchery-qa-actions {
    justify-content: flex-end;
}

.hatchery-qa-chat-card {
    flex: 1;
    min-height: 0;
}

.hatchery-qa-chat-body {
    min-height: 0;
}

.hatchery-qa-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 2px;
}

.hatchery-qa-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border-radius: 16px;
    border: 1px dashed #d8d8d8;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
    color: #888;
    font-size: 13px;
    text-align: center;
    padding: 16px;
    line-height: 1.6;
}

.hatchery-qa-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hatchery-qa-message.user {
    align-items: flex-end;
}

.hatchery-qa-message.assistant {
    align-items: flex-start;
}

.hatchery-qa-message-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #888;
    padding: 0 2px;
}

.hatchery-qa-message-bubble {
    width: fit-content;
    max-width: 100%;
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.hatchery-qa-message.user .hatchery-qa-message-bubble {
    background: linear-gradient(135deg, #111 0%, #2f2f2f 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.hatchery-qa-message.assistant .hatchery-qa-message-bubble {
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    color: #111;
    border: 1px solid #ececec;
    border-bottom-left-radius: 6px;
}

.hatchery-qa-message-bubble.is-loading {
    color: #666;
    position: relative;
}

.hatchery-qa-message-bubble.is-loading::after {
    content: '...';
    display: inline-block;
    margin-left: 4px;
    letter-spacing: 0.2em;
    animation: hatcheryQaDots 1.2s steps(3, end) infinite;
}

@keyframes hatcheryQaDots {
    0% { opacity: 0.35; }
    50% { opacity: 1; }
    100% { opacity: 0.35; }
}

.chat-css-action-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.chat-css-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.chat-css-action-btn:hover::before {
    opacity: 1;
}

.chat-css-action-btn:active {
    transform: translateY(1px) scale(0.98);
}

.chat-css-save-btn {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(17,24,39,0.18);
}

.chat-css-save-btn::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
}

.chat-css-save-btn:hover {
    box-shadow: 0 10px 20px rgba(17,24,39,0.22);
}

.chat-css-reset-btn {
    background: linear-gradient(135deg, #f8fafc 0%, #e5e7eb 100%);
    color: #111827;
    border-color: rgba(148,163,184,0.4);
    box-shadow: 0 6px 14px rgba(148,163,184,0.18);
}

.chat-css-reset-btn::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.22) 100%);
}

.chat-css-reset-btn:hover {
    box-shadow: 0 8px 18px rgba(148,163,184,0.22);
}

.moment-post-item {
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* --- 操作菜单/选择器 (Action Sheet) --- */
.action-sheet-modal { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 200; 
    display: flex; flex-direction: column; justify-content: flex-end;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease-out;
}
.action-sheet-modal.active { 
    opacity: 1; 
    pointer-events: auto; 
}
.picker-content { 
    background: #fff; 
    border-radius: 20px 20px 0 0; 
    max-height: 80%;
    display: flex; flex-direction: column; 
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s var(--ease-ios);
}
.action-sheet-modal.active .picker-content { 
    transform: translateY(0); 
}
.picker-header { 
    padding: 15px; 
    text-align: center; 
    border-bottom: 1px solid #eee; 
    font-weight: bold; 
    color: #333; 
    display: flex; 
    justify-content: space-between; 
}
.picker-list {
    /* 不再强制占满父容器高度，避免出现可以滚动但其实是空白的区域 */
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}
.picker-item { 
    padding: 15px; 
    border-bottom: 1px solid #f5f5f5; 
    cursor: pointer; 
    color: #333; 
    font-size: 14px; 
    text-align: center; 
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: #f9f9f9; }

/* --- 抽屉 (Drawer) --- */
.drawer-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 300; 
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease-out;
    display: flex; align-items: flex-end;
       opacity: 0; /* 默认完全透明 */
    pointer-events: none; /* 默认不响应任何鼠标/触摸事件，可以“点穿”它 */
    transition: opacity 0.3s ease; /* 让它出现时有渐变效果 */
}
.drawer-overlay.active { 
    opacity: 1; 
    pointer-events: auto; 
}
.drawer { 
    width: 100%; 
    background: #fff; 
    border-radius: 25px 25px 0 0; 
    /* padding: 25px; */ /* ‼️【修改】注释掉或删除这行，因为它会破坏滚动布局 */
    transform: translateY(100%); 
    transition: transform 0.3s var(--ease-ios);
    display: flex; 
    flex-direction: column; 
    /* align-items: center; */ /* ‼️【修改】注释掉或删除这行，让内容自然伸展 */
    max-height: 85%;
    color: #000; /* ‼️【新增】为所有抽屉设置一个默认的黑色字体，解决字体消失问题 */
}


.drawer-overlay.active .drawer { 
    transform: translateY(0); 
}
.drawer .drawer-scroll-content {
    width: 100%;
    flex: 1;
    min-height: 0; /* 关键：允许在 flex 布局中真正滚动，防止内容被硬撑住 */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 20px 60px; /* 底部留白调小，减少视觉上的“空白可滚动区域” */
    overscroll-behavior-y: contain;
}

/* 角色卡编辑（AI 角色设定）抽屉：只需要更小一点的底部留白 */
#drawer-ai .drawer-scroll-content {
    padding-bottom: 40px;
}

/* 聊天设置已改为独立页面，使用页面自己的底部留白 */
.avatar-uploader { 
    width: 80px; 
    height: 80px; 
    border-radius: 20px; 
    background: #f0f0f0; 
    border: 2px dashed #ccc; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 30px; 
    color: #ccc; 
    cursor: pointer; 
    overflow: hidden; 
    margin-bottom: 20px; 
}
.avatar-uploader img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: none; 
}
.drawer-input { 
    width: 100%; 
    padding: 15px; 
    margin-bottom: 15px; 
    border: 1px solid #ddd; 
    border-radius: 15px; 
    text-align: center; 
    outline: none; 
    font-size: 15px; 
    background: #fafafa; 
}
.drawer-textarea { 
    height: 90px; 
    resize: none; 
    text-align: left; 
}
.drawer-row { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    margin-bottom: 15px; 
    gap: 10px; 
}
.drawer-row label { 
    font-size: 15px; 
    font-weight: bold; 
}
.drawer-row select { 
    flex: 1; 
    padding: 12px; 
    border-radius: 12px; 
    border: 1px solid #ddd; 
    background: #fafafa; 
}
.drawer-section-title { 
    font-size: 13px; 
    color: #888; 
    font-weight: 500; 
    text-align: left; 
    width: 100%; 
    margin-bottom: 8px; 
    margin-top: 15px; 
    padding-left: 5px; 
}
.drawer-action-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    background: #fff;
    border-radius: 15px;
}
.drawer-action-item {
    padding: 15px;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 0.5px solid #eee;
    text-align: center;
    color: var(--accent-color);
    font-weight: 500;
}
.group-only-action { display: none; }
.drawer-action-item:last-child { 
    border-bottom: none; 
}
.drawer-action-item.danger { 
    color: var(--heart-color); 
}

/* --- 开关 (Slider Switch) --- */
.slider-switch { 
    position: relative; 
    display: inline-block; 
    width: 50px; 
    height: 24px; 
    flex-shrink: 0; 
}
.slider-switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}
.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; 
    transition: .4s; 
    border-radius: 24px; 
}
.slider:before { 
    position: absolute; 
    content: ""; 
    height: 20px; 
    width: 20px; 
    left: 2px; 
    bottom: 2px; 
    background-color: white; 
    transition: .4s; 
    border-radius: 50%; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); 
}
input:checked + .slider { 
    background-color: #000; 
}
input:checked + .slider:before { 
    transform: translateX(20px); /* Corrected value */
}
.offline-settings-container { 
    display: none; 
    width: 100%; 
}
.offline-settings-container.visible { 
    display: block; 
}
.word-count-inputs { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}
.word-count-inputs input { 
    text-align: center; 
    width: 80px; 
}

/* --- 提示 (Toast) --- */
.toast { 
    position: absolute; 
    top: 50px; 
    left: 50%; 
    background: rgba(0,0,0,0.85); 
    color: white; 
    padding: 12px 24px; 
    border-radius: 25px; 
    font-size: 14px; 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s, transform 0.3s; 
    z-index: 9999; 
    white-space: nowrap; 
    font-weight: bold; 
    transform: translateX(-50%) translateY(0); 
}
.toast.show { 
    opacity: 1; 
    transform: translateX(-50%) translateY(10px); 
}

/* --- 通用居中弹窗 (Modal) --- */
.clock-modal-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 500;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease-out;
}
.clock-modal-overlay.active { 
    opacity: 1; 
    pointer-events: auto; 
}
.clock-modal-content { 
    background: #f9f9f9; width: 90%; max-width: 350px;
    border-radius: 20px; padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; gap: 20px; position: relative;
    transform: scale(0.9); opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
}
.clock-modal-overlay.active .clock-modal-content { 
    transform: scale(1); 
    opacity: 1; 
}
.clock-modal-input { 
    width: 100%; 
    padding: 12px; 
    border-radius: 10px; 
    border: 1px solid #ddd; 
    font-size: 15px; 
    outline-color: #000; 
}
.clock-modal-buttons { 
    display: flex; 
    gap: 10px; 
    margin-top: 10px; 
}
.clock-modal-buttons button { 
    flex: 1; 
    padding: 12px; 
    border-radius: 10px; 
    border: none; 
    font-size: 15px; 
    font-weight: bold; 
    cursor: pointer; 
}
#clock-create-btn { background: #000; color: #fff; }
#clock-cancel-btn { background: #e5e5ea; }
.restore-checkbox-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 8px 0; 
}
.restore-checkbox-row input { 
    width: 18px; 
    height: 18px; 
}
.restore-checkbox-row label { 
    font-size: 16px; 
}

/* 专注界面：右上角陪伴头像 + 文本区域 */
.focus-companion-panel {
    position: absolute;
    top: 18px;
    right: 18px;
    display: none;
    align-items: flex-start;
    gap: 10px;
    z-index: 6;
    max-width: calc(100% - 72px);
}

.focus-companion-panel.active {
    display: flex;
}

.focus-companion-avatar-btn {
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.focus-companion-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.focus-companion-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(17,17,17,0.78), rgba(70,70,70,0.7));
}

.focus-companion-banner {
    min-width: 168px;
    max-width: 196px;
    min-height: 108px;
    padding: 12px 12px 34px;
    border-radius: 18px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    transition: opacity 0.18s ease, transform 0.18s ease, min-height 0.18s ease;
}

.focus-companion-banner-text {
    color: #ffffff;
    text-align: left;
    font-size: 13px;
    line-height: 1.55;
    padding: 0;
    margin: 0;
    width: 100%;
    user-select: text;
}

.focus-companion-banner-toggle {
    position: absolute;
    left: 12px;
    bottom: 10px;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
}

.focus-companion-generate-btn {
    position: absolute;
    right: 12px;
    bottom: 10px;
    border: none;
    background: rgba(255,255,255,0.22);
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transition: transform 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.focus-companion-generate-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.28);
}

.focus-companion-generate-btn:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.focus-companion-banner.collapsed {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 30px;
}

.focus-companion-banner.collapsed .focus-companion-banner-text {
    display: none;
}
.thoughts-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 500;
    display: flex; justify-content: center; align-items: center; padding: 20px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease-out;
}
.thoughts-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.thoughts-modal-content {
    background: #fff; color: #000; border-radius: 20px;
    width: 100%; max-width: 350px; padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); position: relative;
    transform: scale(0.9); opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
}
.thoughts-modal-content-lg {
    max-width: 420px;
    max-height: 78%;
    display: flex;
    flex-direction: column;
}
.thoughts-modal-overlay.active .thoughts-modal-content {
    transform: scale(1);
    opacity: 1;
}
.thoughts-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}
.thoughts-modal-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}
.thoughts-modal-subtitle {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #8c8c93;
}
.thoughts-modal-close-btn,
.thoughts-modal-action-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #888;
    flex-shrink: 0;
}
.thoughts-modal-action-btn {
    font-size: 13px;
    font-weight: 600;
    color: #1677ff;
    padding: 6px 0;
}
.thought-section {
    margin-bottom: 15px;
}
.thought-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin: 0 0 8px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.thought-section p {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    white-space: pre-wrap;
}
.thought-section:last-child {
    margin-bottom: 0;
}
.status-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 4px;
}
.status-history-empty {
    padding: 22px 14px;
    border-radius: 16px;
    background: #f6f7fb;
    color: #8c8c93;
    font-size: 14px;
    text-align: center;
}
.status-history-item {
    border-radius: 16px;
    background: #f7f8fa;
    padding: 14px;
}
.status-history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.status-history-item-time {
    font-size: 12px;
    color: #8c8c93;
}
.status-history-item-actions {
    display: flex;
    gap: 8px;
}
.status-history-item-btn {
    border: none;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    color: #333;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.status-history-item-btn.delete {
    color: #e5484d;
}
.status-history-meta {
    display: grid;
    gap: 10px;
}
.status-history-field {
    display: grid;
    gap: 4px;
}
.status-history-field-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}
.status-history-field-value {
    font-size: 14px;
    line-height: 1.5;
    color: #2f2f33;
    white-space: pre-wrap;
}


/* =================================
   5. 各应用样式 (App-Specific Styles)
   ================================= */

/* --- 5.1 QQ 应用 --- */
.qq-page-bg {
    background-color: var(--qq-bg) !important;
    color: #000 !important;
}
/* QQ 主体和聊天页恢复与通用页面接近的淡入淡出速度，保持切换观感一致 */
.app-page.qq-page-bg {
    transition: opacity 0.12s ease-in-out;
}
  .qq-header {
  	/* 使用 flex 布局，左侧返回，中间绝对居中标题，右侧一组功能按钮 */
  	display: flex;
  	align-items: center;
  	position: relative; /* 为标题的绝对定位提供基准 */
  	justify-content: flex-start; /* 不再平均分布，方便把右侧按钮挤在一起 */
  }

  /* 让线下模式门形按钮推到右侧，并与右边的设置按钮排成一组 */
  .qq-header .offline-entry-btn {
  	margin-left: auto;
  }

/* 新增：标题和副标题的容器 */
.nav-title-container {
    /* 使用绝对定位来实现完美居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* 内部元素垂直排列并居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* 让它不影响点击 */
}

/* 修改：主标题样式 */
.nav-title {
    font-weight: 800; /* 加粗 */
    font-size: 17px;
}

/* 新增：副标题（正在输入…）样式 */
.nav-subtitle {
    font-size: 12px;
    color: #888;
    height: 0; /* 默认隐藏 */
    opacity: 0;
    transition: height 0.3s ease, opacity 0.3s ease;
}

/* 新增：当副标题需要显示时的样式 */
.nav-subtitle.visible {
    height: 15px; /* 显示时给予高度 */
    opacity: 1;
}

/* 聊天设置独立页 */
.chat-settings-page {
    background: linear-gradient(180deg, #f7f8fb 0%, #f2f4f8 100%) !important;
}
.chat-settings-page-shell {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.chat-settings-inline-note {
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
    padding: 2px 2px 0;
}
.chat-settings-location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 4px 0 12px;
}
.chat-settings-location-card {
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(226, 232, 240, 0.95);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-settings-location-title {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}
.chat-settings-location-input {
    width: 100%;
}
.chat-settings-data-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-settings-data-card {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%);
    border: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-settings-data-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.chat-settings-data-label {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
.chat-settings-data-value {
    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
}
.chat-settings-data-meta {
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}
.chat-settings-memory-box {
    min-height: 84px;
    border-radius: 14px;
    border: 1px dashed rgba(156, 163, 175, 0.55);
    background: rgba(249, 250, 251, 0.96);
    padding: 12px;
    font-size: 13px;
    line-height: 1.7;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-settings-inline-icon-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(209, 213, 219, 0.95);
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    flex-shrink: 0;
}
.chat-memory-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
.chat-memory-modal-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: #374151;
}
.chat-memory-modal-field > span {
    font-weight: 700;
    color: #111827;
}
.chat-memory-modal-status {
    margin-top: 14px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
}
.chat-settings-exit-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 12px;
    background: rgba(255,255,255,0.95);
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 34px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.14);
    z-index: 2;
    cursor: pointer;
}
.chat-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 56px 14px 106px;
    box-sizing: border-box;
}
.chat-settings-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-settings-section + .chat-settings-section {
    margin-top: 14px;
}
.chat-settings-compact-section .setting-card {
    margin: 0 0 10px;
    padding: 0 12px;
    border-radius: 12px;
    box-shadow: 0 1px 5px rgba(15, 23, 42, 0.05);
}
.chat-settings-compact-section .setting-row {
    padding: 10px 0;
}
.chat-settings-compact-section .setting-label,
.chat-settings-compact-section .setting-row > label {
    font-size: 13px;
    min-width: 66px;
}
.chat-settings-compact-section .input-clean {
    font-size: 13px;
}
.chat-settings-compact-section #online-wb-display {
    height: 34px !important;
    line-height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px;
}
.chat-settings-section-title {
    font-size: 13px;
    color: #6b7280;
    font-weight: 700;
    padding: 2px 4px;
}
.chat-settings-action-group-title {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 700;
    padding: 2px 6px;
    margin-top: 8px;
    margin-bottom: 6px;
}
.chat-settings-savebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(242,244,248,0) 0%, rgba(242,244,248,0.94) 18%, #f2f4f8 100%);
}
.chat-settings-save-btn {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.18);
    cursor: pointer;
}
.chat-settings-save-btn:active {
    transform: scale(0.985);
}
#chat-memory-summary-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(312px, calc(100vw - 56px), calc(100vh - 136px));
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: calc(100vw - 56px);
    max-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.96);
}
#chat-memory-summary-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 10px;
    font-weight: 700;
    color: #111827;
}
#chat-memory-summary-modal .close-btn {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
}
#chat-memory-summary-modal .modal-scroll-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 18px 12px;
    overflow-y: auto;
}
#chat-memory-summary-modal .chat-memory-modal-grid,
#chat-memory-summary-modal .chat-memory-modal-status {
    margin-top: 0;
}
#chat-memory-summary-modal .drawer-footer {
    margin-top: auto;
    gap: 12px;
    padding: 12px 18px 18px;
    border-top: 1px solid rgba(229, 231, 235, 0.9);
    background: #fff;
}
#chat-memory-summary-modal .drawer-footer button {
    min-height: 42px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}
#chat-memory-summary-modal .drawer-footer button:not(.primary) {
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: #fff;
    color: #111827;
}
#chat-memory-summary-modal .drawer-footer button.primary {
    background: #111827;
    color: #fff;
}
#chat-memory-summary-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
#chat-memory-summary-overlay.active {
    display: flex;
}
@media (max-width: 420px) {
    .chat-memory-modal-grid {
        grid-template-columns: 1fr;
    }
}

/* QQ 底部导航栏：单一胶囊 + 灰色边线包裹 */
.qq-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 30px 25px 30px;
    padding: 5px;
    border-radius: 999px;
    background-color: #ffffff;        /* 胶囊本体白色 */
    border: 1px solid #d0d0d0;       /* 一圈明显的浅灰边线 */
    box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* 适度浮起感 */
    width: auto;
}
/* 删除中间竖杠 */
.nav-tab-separator {
    display: none;
}
.nav-tab-item {
    flex: 1;
    cursor: pointer;
    color: #999;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border-radius: 999px; /* 让选中的图标区域呈灰色圆角胶囊 */
}
/* 底部导航文字全部隐藏，仅保留图标 */
.nav-tab-item span {
    display: none;
}
.nav-tab-item.active {
    color: #000;
    background-color: #f0f2f5; /* 当前选中页的图标区域变灰，作为状态提示 */
}
.nav-tab-item svg {
    width: 24px;
    height: 24px;
}

/* QQ 聊天列表：仿朋友圈卡片的清晰边缘效果 */
.chat-list {
    list-style: none;
    padding: 12px;
    margin: 0;
    overflow-y: auto;
    flex: 1;
    background-color: #ffffff; /* 与胶囊导航保持统一，为纯白背景 */
}
.chat-item-wrapper {
    position: relative;
    height: 80px;
    margin-bottom: 15px;
    border-radius: 20px;
    overflow: hidden;
}
.delete-action {
    position: absolute;
    top: 0; right: 0;
    width: 100px;
    height: 100%;
    background-color: var(--heart-color);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 15px;
    z-index: 1;
}
.chat-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center;
    padding: 15px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e5e5; /* 类似朋友圈动态卡片的细边框 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* 统一为单侧柔和阴影，提升层次感 */
    cursor: pointer;
    transition: transform 0.3s ease-out;
    z-index: 2;
}
.chat-item:active { 
    transform: scale(0.98); 
}
.chat-item.swiped { 
    transform: translateX(-90px); 
}
.chat-avatar { 
    width: 50px; 
    height: 50px; 
    border-radius: 12px; 
    object-fit: cover; 
    margin-right: 15px; 
    background: #eee; 
    border: 1px solid #f0f0f0; 
}
.chat-avatar[src=""], .chat-avatar:not([src]) { 
    opacity: 0; 
}
.chat-info { 
    flex: 1; 
    min-width: 0; 
    pointer-events: none; 
}
.chat-name { 
    font-size: 16px; 
    font-weight: 700; 
    color: #111; 
    margin-bottom: 6px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.chat-preview { 
    font-size: 13px; 
    color: #666; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.user-mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000;
    cursor: pointer;
    margin-right: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    background-color: #eee;
}

/* QQ 邮件页 */
.qq-mail-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 110px;
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}

.qq-mail-status {
    display: none;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(32, 33, 36, 0.06);
    color: #4b5563;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.qq-mail-empty {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9aa0a6;
    font-size: 14px;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255,255,255,0.9);
    border: 1px dashed rgba(148, 163, 184, 0.45);
}

.qq-mail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qq-mail-item {
    width: 100%;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255,255,255,0.98);
    border-radius: 22px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.qq-mail-item:active {
    transform: scale(0.985);
}

.qq-mail-item.is-editing {
    padding-left: 14px;
}

.qq-mail-item.selected {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 14px 34px rgba(59, 130, 246, 0.16);
}

.qq-mail-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(148, 163, 184, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 14px;
    font-weight: 700;
    flex: 0 0 auto;
    margin-top: 2px;
    visibility: hidden;
    background: #fff;
}

.qq-mail-item.is-editing .qq-mail-check {
    visibility: visible;
}

.qq-mail-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qq-mail-item-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qq-mail-item-sender {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qq-mail-item-time {
    flex: 0 0 auto;
    font-size: 12px;
    color: #94a3b8;
}

.qq-mail-item-subject {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: #0f172a;
}

.qq-mail-item-preview,
.qq-mail-item-signature {
    font-size: 13px;
    line-height: 1.6;
    color: #667085;
}

.qq-mail-edit-bar {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 96px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
    z-index: 5;
}

.qq-mail-edit-meta {
    font-size: 14px;
    color: #475467;
    font-weight: 600;
}

.qq-mail-delete-btn {
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(220, 38, 38, 0.22);
}

.qq-mail-delete-btn:disabled {
    opacity: 0.45;
    box-shadow: none;
}

.qq-mail-edit-fab {
    position: absolute;
    right: 18px;
    bottom: 98px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.34);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
}

.qq-mail-edit-fab svg {
    width: 26px;
    height: 26px;
}

.qq-mail-modal {
    display: flex;
    flex-direction: column;
    width: min(392px, calc(100vw - 32px));
    max-height: calc(100vh - 36px);
    background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,248,251,0.99) 100%);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.24);
}

.qq-mail-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 14px;
}

.qq-mail-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    line-height: 1.35;
}

.qq-mail-modal-subtitle {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #98a2b3;
}

.qq-mail-close-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.06);
    color: #344054;
    font-size: 22px;
    line-height: 1;
}

.qq-mail-modal-body {
    overflow-y: auto;
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.qq-mail-setting-card {
    border-radius: 20px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(226, 232, 240, 0.95);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qq-mail-setting-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.qq-mail-setting-desc,
.qq-mail-group-label,
.qq-mail-empty-inline {
    font-size: 12px;
    line-height: 1.6;
    color: #98a2b3;
}

.qq-mail-generator-status {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.04);
    color: #4b5563;
    font-size: 13px;
    line-height: 1.7;
}

.qq-mail-generator-status.is-busy {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.1);
}

.qq-mail-primary-btn,
.qq-mail-save-btn {
    border: none;
    border-radius: 16px;
    padding: 13px 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    box-shadow: 0 14px 28px rgba(17, 24, 39, 0.16);
}

.qq-mail-primary-btn:disabled {
    opacity: 0.55;
    box-shadow: none;
}

.qq-mail-save-btn {
    margin-top: 4px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
}

.qq-mail-selected-list,
.qq-mail-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.qq-mail-selected-chip,
.qq-mail-tag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: #fff;
    color: #475467;
    font-size: 12px;
    line-height: 1.4;
}

.qq-mail-tag-btn.selected {
    border-color: rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
}

.qq-mail-binding-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qq-mail-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.qq-mail-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: #667085;
}

.qq-mail-field select,
.qq-mail-field input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: #fff;
    padding: 11px 12px;
    font-size: 14px;
    color: #111827;
    box-sizing: border-box;
}

.qq-mail-field input:disabled {
    opacity: 0.5;
    background: #f8fafc;
}

.qq-mail-trash-list {
    padding-bottom: 20px;
}

.qq-mail-trash-item {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: rgba(255,255,255,0.96);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qq-mail-trash-subject {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.qq-mail-trash-meta,
.qq-mail-trash-preview {
    font-size: 12px;
    line-height: 1.6;
    color: #667085;
}

.qq-mail-detail-modal {
    min-height: min(560px, calc(100vh - 36px));
}

.qq-mail-detail-body {
    gap: 0;
    padding-bottom: 26px;
}

.qq-mail-detail-body p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.85;
    color: #344054;
}

.qq-mail-detail-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 420px) {
    .qq-mail-edit-bar {
        left: 12px;
        right: 12px;
        bottom: 92px;
        padding: 12px 14px;
    }

    .qq-mail-edit-fab {
        right: 14px;
        bottom: 96px;
    }

    .qq-mail-form-grid {
        grid-template-columns: 1fr;
    }
}

/* QQ 聊天详情页 */
.message-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #ffffff; /* 默认聊天背景纯白 */
}
.message-row {
    display: flex;
    gap: 10px;
    width: 100%;
    min-width: 0;
    align-items: flex-start !important; /* 强制所有消息行顶部对齐头像/卡片 */
}
.message-row.me { 
    flex-direction: row-reverse; 
}
.msg-avatar {
    width: var(--chat-avatar-size, 38px);
    height: var(--chat-avatar-size, 38px);
    border-radius: 10px;
    object-fit: cover;
    background: #ddd;
    flex-shrink: 0;
    border: 1px solid #eee; 
}
/* 统一的气泡基础样式：适中高度的长条矩形 */
.bubble {
    max-width: 72%;                /* 收窄默认宽度，避免长文本换行后接近整行 */
    padding: 9px 14px;             /* 适中内边距，保证高度适中 */
    border-radius: 12px;           /* 比之前略小的圆角，更偏「长条矩形」 */
    font-size: var(--chat-bubble-font-size, 13px);
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    text-align: left;
    display: inline-block;
    font-weight: 500;
    position: relative;
}
.bubble[data-group-title] {
    margin-top: 14px;
}
.bubble[data-group-title]::after {
    content: attr(data-group-title);
    position: absolute;
    top: -14px;
    right: 6px;
    font-size: 10px;
    line-height: 1;
    color: #8c8c8c;
    background: rgba(255,255,255,0.88);
    padding: 1px 4px;
    border-radius: 999px;
    white-space: nowrap;
}
/* AI 气泡：白底长条矩形，保持原有黑白配色 */
.bubble.ai {
    background: var(--chat-ai-bubble-bg, #ffffff);
    color: var(--chat-ai-bubble-color, #000000);
    box-shadow: 4px 4px 12px var(--qq-shadow-dark), -4px -4px 12px var(--qq-shadow-light);
    border: 1px solid var(--chat-ai-bubble-border, #f0f0f0);
    border-top-left-radius: 4px;   /* 左上角略微收紧，保持方向感 */
    max-width: 72%;
}
/* 自己的气泡：黑底长条矩形，保持原有黑白配色 */
.bubble.me {
    background: var(--chat-me-bubble-bg, #000000);
    color: var(--chat-me-bubble-color, #ffffff);
    box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
    border: 1px solid var(--chat-me-bubble-border, transparent);
    border-top-right-radius: 4px;  /* 右上角略微收紧，保持方向感 */
    max-width: 72%;
}
.bubble.system { 
    font-size: 12px; 
    color: #999; 
    text-align: center; 
    width: 100%; 
    max-width: 100%; 
    background: transparent; 
    padding: 0; 
    margin: -5px 0 5px; 
    box-shadow: none; 
    font-weight: normal; 
}

/* QQ 聊天输入框 */
.input-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: #FFFFFF;
    border-top: 1px solid #E0E0E0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    padding: 8px 8px max(10px, env(safe-area-inset-bottom));
}

/* 主输入行 */
.chat-main-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    background-color: #FFFFFF;
}

.chat-input {
    flex: 1;
    height: 42px;
    border: none;
    padding: 0 15px;
    border-radius: 21px;
    background-color: #f0f2f5;
    font-size: 15px;
    outline: none;
    min-width: 0;
}

/* “+”号按钮 */
.btn-toggle-toolbar {
    background: transparent;
    box-shadow: none;
    color: #555;
}
.btn-toggle-toolbar:active {
    transform: scale(1.08);
    box-shadow: none;
}
.btn-toggle-toolbar.rotated {
    transform: rotate(45deg);
}
.btn-toggle-toolbar.rotated:active {
    transform: rotate(45deg) scale(1.08);
}

/* 发送和AI回复按钮的通用容器样式 */
.icon-btn-chat {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #000;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transform: scale(1);
    transition: transform 0.16s ease, opacity 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}
.icon-btn-chat svg {
    width: 24px;
    height: 24px;
}
.icon-btn-chat:active {
    transform: scale(1.1);
}
.icon-btn-chat:disabled {
    opacity: 0.55;
    cursor: default;
}
.icon-btn-chat:disabled:active {
    transform: scale(1);
}

/* 隐藏的工具栏 */
.chat-input-toolbar {
    width: 100%;
    max-height: 0;
    background-color: #FFFFFF;
    border-radius: 18px;
    border: 1px solid transparent;
    box-shadow: none;
    overflow: hidden;
    max-width: 100%;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: max-height 0.26s ease, transform 0.26s ease, opacity 0.26s ease, margin-top 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}
.chat-input-toolbar.active {
    max-height: min(30vh, calc((100dvh - 88px) / 3));
    margin-top: 4px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-color: #ededed;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
}

.toolbar-scroll {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}
.toolbar-scroll::-webkit-scrollbar {
    display: none;
}
.toolbar-page {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 10px;
    padding: 16px 14px 14px;
    scroll-snap-align: start;
    align-content: start;
    justify-items: center;
}
.toolbar-page-single {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.toolbar-page-single .toolbar-item:first-child {
    grid-column: 1;
}
.toolbar-item {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.toolbar-btn {
    width: 48px;
    height: 48px;
    background-color: #f5f6f8;
    border: none;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #333;
    transition: transform 0.16s ease, background-color 0.16s ease;
}
.toolbar-btn:active {
    transform: scale(1.06);
    background-color: #eceef2;
}
.toolbar-btn svg {
    width: 27px;
    height: 27px;
}
.toolbar-label {
    width: 100%;
    font-size: 12px;
    line-height: 1.25;
    color: #666;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* 查手机弹窗 */
.phone-lookup-content {
    width: min(420px, calc(100vw - 30px));
    padding: 24px;
    gap: 20px;
}

.phone-lookup-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.phone-lookup-tip {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.phone-lookup-btn {
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.phone-lookup-btn.primary {
    background: #111;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.phone-lookup-btn.ghost {
    background: #f5f5f5;
    color: #111;
    border: 1px solid #e5e5e5;
}

.phone-lookup-btn.danger {
    background: #ff4757;
    color: #fff;
}

.phone-lookup-btn.small {
    font-size: 13px;
    padding: 8px 12px;
}

.phone-lookup-btn:active {
    transform: translateY(1px);
}

#phone-lookup-container {
    position: fixed;
    inset: 0;
    z-index: 4600;
    padding: 0;
}

#phone-lookup-container > .phone-lookup-content {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    background: #050507;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#phone-lookup-step-select {
    width: min(360px, calc(100vw - 32px));
    padding: 24px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

#phone-lookup-reverse-step {
    width: min(420px, calc(100vw - 24px));
    height: min(100dvh - 24px, 860px);
    padding: 0;
    border-radius: 36px;
    background: linear-gradient(180deg, #06070b 0%, #10131a 100%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    overflow: hidden;
}

#phone-lookup-target-step {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-shell-device {
    width: min(100vw - 20px, 420px);
    height: min(100dvh - 20px, 860px);
    min-height: 0;
    margin: 0 auto;
    padding: 18px;
    border-radius: 42px;
    background: linear-gradient(160deg, #050505 0%, #151515 40%, #030303 100%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.12), inset 0 -6px 18px rgba(255,255,255,0.05), 0 22px 45px rgba(0,0,0,0.32);
    position: relative;
}

.phone-shell-notch {
    width: 104px;
    height: 24px;
    border-radius: 0 0 18px 18px;
    background: #020202;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.phone-shell-screen {
    position: relative;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(180deg, #efe5ff 0%, #dfeaff 48%, #f9f2ff 100%);
}

.phone-shell-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 10px;
    font-size: 12px;
    color: rgba(17,17,17,0.72);
    position: relative;
    z-index: 2;
}

.phone-shell-home-view,
.phone-shell-app-view {
    height: calc(100% - 40px);
    min-height: 0;
}

.phone-shell-wallpaper {
    height: 100%;
    padding: 8px 18px 24px;
    overflow-y: auto;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.92), transparent 36%),
        radial-gradient(circle at bottom right, rgba(255,196,224,0.42), transparent 30%),
        linear-gradient(160deg, #f7f0ff 0%, #dde8ff 48%, #fff5fd 100%);
}

.phone-shell-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px 0;
    position: relative;
    z-index: 2;
}

.phone-shell-topbar-app {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(17,17,17,0.08);
    background: rgba(255,255,255,0.76);
    backdrop-filter: blur(14px);
}

.phone-shell-exit-btn,
.phone-shell-action-btn {
    border: none;
    background: rgba(255,255,255,0.92);
    color: #111;
    height: 38px;
    min-width: 38px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    cursor: pointer;
}

.phone-shell-exit-btn {
    padding: 0;
    font-size: 0;
}

.phone-shell-exit-btn::before {
    content: '×';
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.phone-shell-action-btn {
    font-size: 18px;
    padding: 0;
}

.phone-shell-exit-btn:active,
.phone-shell-action-btn:active,
.phone-shell-home-indicator:active,
.phone-shell-app:active,
.phone-shell-list-item:active,
.phone-shell-gallery-item:active,
.phone-shell-setting-chip:active,
.phone-shell-save-btn:active,
.phone-shell-detail-close:active {
    transform: scale(0.97);
}

.phone-shell-owner {
    flex: 1;
    text-align: right;
    font-size: 13px;
    color: rgba(17,17,17,0.7);
    font-weight: 600;
}

.phone-shell-title-group {
    padding: 26px 2px 0;
}

.phone-shell-date {
    font-size: 14px;
    color: rgba(17,17,17,0.62);
    margin-bottom: 6px;
}

.phone-shell-greeting {
    font-size: 28px;
    line-height: 1.25;
    color: #111;
    font-weight: 800;
    max-width: 220px;
}

.phone-shell-app-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 12px;
}

.phone-shell-app {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.phone-shell-app-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    color: #fff;
}

.phone-shell-app-label {
    font-size: 12px;
    font-weight: 600;
    color: #303030;
}

.phone-shell-app-browser .phone-shell-app-icon {
    background: linear-gradient(135deg, #2f9bff 0%, #4dc8ff 100%);
}

.phone-shell-app-gallery .phone-shell-app-icon {
    background: linear-gradient(135deg, #ff7fb2 0%, #ffb35e 100%);
}

.phone-shell-app-note .phone-shell-app-icon {
    background: linear-gradient(135deg, #ffcb47 0%, #ffdf87 100%);
    color: #7b5100;
}

.phone-shell-app-diary .phone-shell-app-icon {
    background: linear-gradient(135deg, #8b6cff 0%, #b193ff 100%);
}

.phone-shell-app-settings .phone-shell-app-icon {
    background: linear-gradient(135deg, #5f6675 0%, #8c96aa 100%);
}

.phone-shell-app-view {
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

.phone-shell-app-heading {
    flex: 1;
    min-width: 0;
}

.phone-shell-app-title {
    font-size: 17px;
    font-weight: 800;
    color: #111;
}

.phone-shell-app-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: #8b8b95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-reverse-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 18px 22px;
    color: #f5f7ff;
    background:
        radial-gradient(circle at top left, rgba(122, 92, 255, 0.22), transparent 28%),
        radial-gradient(circle at bottom right, rgba(74, 156, 255, 0.18), transparent 32%),
        linear-gradient(180deg, #07080d 0%, #10131a 56%, #0a0d13 100%);
}

.phone-reverse-topbar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.phone-reverse-exit-btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: #f5f7ff;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.phone-reverse-title-group {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.phone-reverse-kicker {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(214,221,255,0.62);
}

.phone-reverse-title {
    margin-top: 6px;
    font-size: 21px;
    line-height: 1.35;
    font-weight: 800;
    color: #f7f8ff;
}

.phone-reverse-hero {
    margin-top: 18px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.phone-reverse-status {
    font-size: 15px;
    line-height: 1.65;
    color: #f4f6ff;
    white-space: pre-wrap;
}

.phone-reverse-subtext {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(226,231,255,0.68);
}

.phone-reverse-actions {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.phone-reverse-actions .phone-lookup-btn.primary {
    background: linear-gradient(135deg, #7d5cff 0%, #4f8bff 100%);
    box-shadow: 0 12px 30px rgba(79,139,255,0.24);
}

.phone-reverse-actions .phone-lookup-btn.ghost {
    background: rgba(255,255,255,0.06);
    color: #f5f7ff;
    border: 1px solid rgba(255,255,255,0.08);
}

.phone-reverse-hint {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(214,221,255,0.62);
}

.phone-reverse-timeline {
    margin-top: 16px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 4px;
}

.phone-reverse-empty {
    margin: auto 0;
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    font-size: 13px;
    line-height: 1.75;
    color: rgba(226,231,255,0.72);
    text-align: center;
}

.phone-reverse-card {
    padding: 16px;
    border-radius: 20px;
    background: rgba(12, 16, 24, 0.88);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.phone-reverse-card.waiting {
    border-color: rgba(125, 92, 255, 0.34);
    background: linear-gradient(180deg, rgba(20, 24, 37, 0.96) 0%, rgba(12, 16, 24, 0.94) 100%);
}

.phone-reverse-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.phone-reverse-card-app {
    font-size: 13px;
    font-weight: 700;
    color: #f6f7ff;
}

.phone-reverse-card-tag {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: rgba(226,231,255,0.78);
    font-size: 11px;
}

.phone-reverse-card-text,
.phone-reverse-card-result {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(238,241,255,0.9);
    white-space: pre-wrap;
}

.phone-reverse-card-result {
    color: #f7f8ff;
}

.phone-reverse-card-meta {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
    color: rgba(214,221,255,0.52);
}

.phone-reverse-loading-dots::after {
    content: '...';
    display: inline-block;
    width: 1.2em;
    overflow: hidden;
    vertical-align: bottom;
    animation: phone-reverse-dots 1.2s steps(4, end) infinite;
}

@keyframes phone-reverse-dots {
    0% { width: 0; }
    100% { width: 1.2em; }
}

.phone-shell-app-body {
    flex: 1;
    min-height: 0;
    padding: 16px 16px 74px;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.phone-shell-section-card {
    background: #f6f7fb;
    border: 1px solid #ececf3;
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 14px;
}

.phone-shell-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border-radius: 22px;
    background: #f7f8fc;
    color: #8f93a5;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    line-height: 1.7;
}

.phone-shell-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.phone-shell-list-item {
    width: 100%;
    border: none;
    text-align: left;
    padding: 14px 15px;
    border-radius: 18px;
    background: #f7f8fc;
    box-shadow: 0 6px 16px rgba(0,0,0,0.04);
    cursor: pointer;
}

.phone-shell-list-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.phone-shell-list-title {
    font-size: 15px;
    font-weight: 700;
    color: #151515;
}

.phone-shell-list-meta {
    font-size: 11px;
    color: #9a9dad;
    flex-shrink: 0;
}

.phone-shell-list-preview {
    font-size: 13px;
    line-height: 1.6;
    color: #616575;
}

.phone-shell-browser-banner,
.phone-shell-settings-banner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #eef5ff 0%, #f5efff 100%);
    margin-bottom: 14px;
}

.phone-shell-browser-title,
.phone-shell-settings-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
}

.phone-shell-browser-desc,
.phone-shell-settings-desc {
    font-size: 13px;
    color: #6c7183;
    line-height: 1.6;
}

.phone-shell-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.phone-shell-gallery-item {
    border: none;
    border-radius: 22px;
    background: #eef0f5;
    min-height: 128px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.phone-shell-gallery-thumb {
    height: 100%;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #a2a7b5;
    background: linear-gradient(180deg, #f3f4f8 0%, #e1e4ec 100%);
}

.phone-shell-gallery-icon {
    font-size: 32px;
}

.phone-shell-gallery-label {
    font-size: 12px;
    font-weight: 600;
}

.phone-shell-form-group {
    margin-bottom: 16px;
}

.phone-shell-form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #303446;
}

.phone-shell-setting-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.phone-shell-setting-chip {
    border: 1px solid #d7dced;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    background: #fff;
    color: #4f5568;
    cursor: pointer;
}

.phone-shell-setting-chip.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.phone-shell-setting-number {
    width: 100%;
    border: 1px solid #dfe3ef;
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
}

.phone-shell-setting-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #8e93a6;
    line-height: 1.6;
}

.phone-shell-save-btn {
    width: 100%;
    border: none;
    border-radius: 18px;
    padding: 14px 16px;
    background: #111;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(17,17,17,0.18);
}

.phone-shell-home-indicator {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    border-radius: 999px;
    border: none;
    background: rgba(0,0,0,0.18);
    cursor: pointer;
}

.phone-shell-detail-modal {
    position: absolute;
    inset: 0;
    background: rgba(17,17,17,0.28);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    z-index: 6;
}

.phone-shell-detail-card {
    width: 100%;
    background: #fff;
    border-radius: 26px;
    padding: 18px 18px 20px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.16);
    position: relative;
}

.phone-shell-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f2f3f7;
    color: #555;
    font-size: 20px;
    cursor: pointer;
}

.phone-shell-detail-kicker {
    font-size: 12px;
    color: #8f94a6;
    margin-bottom: 8px;
}

.phone-shell-detail-title {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    padding-right: 28px;
}

.phone-shell-detail-text {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.75;
    color: #474c5b;
    white-space: pre-wrap;
}

.phone-shell-inline-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #7d8395;
    font-size: 13px;
    padding: 34px 0;
}

.phone-shell-inline-loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(82,94,127,0.22);
    border-top-color: #6170a8;
    animation: phoneLookupSpin 0.8s linear infinite;
}

@keyframes phoneLookupSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 420px) {
    #phone-lookup-target-step {
        padding: 0;
    }

    .phone-shell-device {
        width: 100vw;
        height: 100dvh;
        padding: 14px;
        border-radius: 0;
    }

    .phone-shell-screen {
        border-radius: 24px;
    }
}

.reverse-hint-card {
    padding: 18px;
    border-radius: 18px;
    background: #f8f8fa;
    border: 1px dashed #d6d6e0;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* 视频通话层 */
.video-call-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 18, 0.88);
    backdrop-filter: blur(12px);
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-call-overlay.active {
    display: flex;
}

.video-call-panel {
    width: 100%;
    max-width: 520px;
    color: #fff;
    text-align: center;
}

.video-call-dialing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.video-call-avatar {
    width: 120px;
    height: 120px;
    border-radius: 32px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.3);
}

.video-call-label {
    font-size: 20px;
    font-weight: 600;
}

.video-call-status-text {
    font-size: 15px;
    color: #d3d8e6;
}

.video-call-helper-text {
    max-width: 320px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
}

.video-call-btn-row {
    display: flex;
    gap: 16px;
}

.video-call-btn {
    border: none;
    border-radius: 24px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.video-call-btn:hover,
.video-call-icon-btn:hover,
.video-call-icon-action:hover,
.video-call-settings-btn:hover {
    transform: translateY(-1px);
}

.video-call-btn.danger {
    background: #ff4757;
}

.video-call-btn.success {
    background: #22c55e;
}

.video-call-btn.ghost {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
}

.video-call-btn.small {
    padding: 8px 14px;
    font-size: 13px;
}

.video-call-btn:active,
.video-call-icon-btn:active,
.video-call-icon-action:active,
.video-call-settings-btn:active {
    opacity: 0.78;
    transform: scale(0.98);
}

.video-call-active {
    width: 100%;
}

.video-call-active-wrapper {
    width: min(980px, calc(100vw - 40px));
    min-height: min(88vh, 820px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(12, 16, 28, 0.55), rgba(8, 10, 18, 0.8));
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
}

.video-call-active-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 8, 18, 0.12), rgba(5, 8, 18, 0.5));
    pointer-events: none;
}

.video-call-topbar,
.video-call-content-mask,
.video-call-settings-modal {
    position: relative;
    z-index: 1;
}

.video-call-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.video-call-icon-btn {
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.video-call-duration {
    min-width: 92px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.video-call-bg-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.video-call-settings-btn {
    min-width: 92px;
    height: 42px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(140, 190, 255, 0.34);
    background: linear-gradient(180deg, rgba(84, 162, 255, 0.96), rgba(44, 122, 255, 0.9));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(36, 111, 255, 0.34);
    cursor: pointer;
}

.video-call-self-preview {
    width: 94px;
    height: 146px;
    border-radius: 18px;
    background: rgba(255,255,255,0.14);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.84);
    font-size: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 12px 28px rgba(0,0,0,0.22);
}

.video-call-content-mask {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
    background: rgba(8, 10, 18, 0.28);
    backdrop-filter: blur(5px);
}

.video-call-scene-box,
.video-call-user-input-area {
    border-radius: 22px;
    background: rgba(7, 11, 20, 0.52);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.video-call-scene-main-box {
    flex: 1;
    min-height: 280px;
    padding: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.video-call-scene-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.video-call-scene-title {
    font-size: 14px;
    color: #cdd5eb;
    margin-bottom: 6px;
}

.video-call-scene-status {
    font-size: 12px;
    color: rgba(255,255,255,0.68);
}

.video-call-scene-feed {
    flex: 1;
    min-height: 300px;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.video-call-scene-feed::-webkit-scrollbar {
    width: 6px;
}

.video-call-scene-feed::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.24);
    border-radius: 999px;
}

.video-call-scene-empty {
    color: rgba(243,246,255,0.74);
    font-size: 14px;
    line-height: 1.9;
    padding: 4px 0;
}

.video-call-scene-entry {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.video-call-scene-entry.system {
    background: rgba(129, 140, 248, 0.16);
}

.video-call-scene-entry.user-status {
    background: rgba(56, 189, 248, 0.12);
}

.video-call-scene-entry.ai-reaction,
.video-call-scene-entry.ai-connect {
    background: rgba(244, 114, 182, 0.1);
}

.video-call-scene-entry-author {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #d8e4ff;
    letter-spacing: 0.04em;
}

.video-call-scene-entry-text {
    font-size: 15px;
    line-height: 1.9;
    color: #f3f6ff;
    white-space: pre-wrap;
}

.video-call-user-input-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    text-align: left;
}

.video-call-user-input-area label {
    font-size: 13px;
    color: #d7def0;
}

.video-call-user-input-inline {
    margin-top: 2px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.video-call-user-input-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

#video-call-user-input {
    flex: 1;
    border-radius: 18px;
    border: none;
    padding: 14px 16px;
    min-height: 74px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    background: rgba(255,255,255,0.95);
    color: #1d2433;
}

#video-call-user-input:focus {
    outline: 2px solid rgba(96, 165, 250, 0.55);
}

.video-call-user-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.video-call-icon-action {
    width: 48px;
    min-height: 48px;
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.video-call-icon-action.success {
    background: linear-gradient(180deg, #36d576, #22c55e);
}

.video-call-icon-action.ghost {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
}

@media (max-width: 720px) {
    .video-call-bg-entry {
        gap: 8px;
    }

    .video-call-settings-btn {
        min-width: 78px;
        height: 38px;
        padding: 0 12px;
        font-size: 14px;
    }

    .video-call-self-preview {
        width: 74px;
        height: 118px;
    }

    .video-call-user-input-row {
        flex-direction: column;
    }

    .video-call-user-actions {
        flex-direction: row;
    }

    .video-call-icon-action {
        flex: 1;
    }
}

.video-call-settings-modal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(4, 7, 14, 0.5);
    backdrop-filter: blur(8px);
}

.video-call-settings-dialog {
    width: min(720px, 100%);
    border-radius: 28px;
    background: #121a2b;
    box-shadow: 0 18px 48px rgba(0,0,0,0.35);
    padding: 22px;
    text-align: left;
}

.video-call-settings-header,
.video-call-settings-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.video-call-settings-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.video-call-settings-subtitle {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.68);
    line-height: 1.6;
}

.video-call-settings-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.video-call-settings-card {
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    padding: 16px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.video-call-settings-label {
    font-size: 14px;
    font-weight: 600;
    color: #f5f7ff;
    margin-bottom: 12px;
}

.video-call-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

#video-call-self-input,
#video-call-remote-input {
    display: none;
}

.video-call-settings-preview {
    margin-top: 14px;
    height: 130px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.66);
    font-size: 13px;
}

.video-call-settings-actions {
    margin-top: 18px;
}

@media (max-width: 768px) {
    .video-call-overlay {
        padding: 12px;
    }

    .video-call-active-wrapper {
        width: 100%;
        min-height: calc(100vh - 24px);
        border-radius: 24px;
        padding: 16px;
    }

    .video-call-topbar {
        flex-wrap: wrap;
    }

    .video-call-bg-entry {
        width: 100%;
        justify-content: flex-end;
    }

    .video-call-self-preview {
        width: 132px;
        height: 74px;
    }

    .video-call-user-input-row {
        flex-direction: column;
    }

    .video-call-user-actions {
        flex-direction: row;
        justify-content: flex-end;
    }

    .video-call-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* 时间戳样式 (现在它应该能正确生效了) */
.chat-timestamp {
    width: fit-content;
    margin: 15px auto 25px auto;
    background-color: rgba(0, 0, 0, 0.08); /* 颜色改得更淡一点 */
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: #555; /* 在淡色背景上，深灰色文字更清晰 */
    font-weight: 500;
}

/* QQ 通讯录布局：上下 3 / 7 分栏，可折叠详情 */
#qq-tab-contacts {
    background-color: #f5f6f8;
    display: flex;
    flex-direction: column !important; /* 覆盖内联的 row，让整体改为上下布局 */
    overflow: hidden;
}

.qq-contacts-list {
    flex: 3; /* 上方列表约占 30% 高度 */
    padding: 10px;
    overflow-y: auto;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
}

.qq-contacts-detail {
    flex: 7; /* 下方详情约占 70% 高度 */
    padding: 15px;
    overflow-y: auto;
    background-color: #f5f5f5;
}

/* 当没有展开任何联系人详情时，隐藏下方区域，让列表占满整个页面 */
#qq-tab-contacts.contacts-detail-hidden .qq-contacts-list {
    flex: 1;
    border-bottom: none;
}

#qq-tab-contacts.contacts-detail-hidden .qq-contacts-detail {
    flex: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
}

.qq-contacts-empty,
.qq-contacts-placeholder {
    text-align: center;
    color: #999;
    font-size: 13px;
    margin-top: 40px;
}

.qq-contacts-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 6px;
    transition: background-color 0.15s ease;
}

.qq-contacts-item.active {
    background-color: #f0f2f5;
}

.qq-contacts-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    background-color: #eee;
    flex-shrink: 0;
    margin-right: 8px;
}

.qq-contacts-main {
    flex: 1;
    min-width: 0;
}

.qq-contacts-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.qq-contacts-name {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qq-contacts-role-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #ddd;
    color: #777;
    white-space: nowrap;
}

.qq-contacts-category-line {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qq-contacts-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.qq-contacts-detail-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    background-color: #eee;
    flex-shrink: 0;
}

.qq-contacts-detail-main {
    flex: 1;
    min-width: 0;
}

.qq-contacts-detail-name-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.qq-contacts-detail-name {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.qq-contacts-detail-role {
    font-size: 12px;
    color: #666;
}

.qq-contacts-detail-note {
    font-size: 11px;
    color: #999;
}

.qq-contacts-detail-section {
    margin-top: 16px;
}

.qq-contacts-detail-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.qq-contacts-detail-text {
    font-size: 13px;
    line-height: 1.5;
    color: #444;
}

.qq-contact-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qq-contact-tag {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    color: #555;
    cursor: pointer;
}

.qq-contact-tag-empty {
    background: transparent;
    border-style: dashed;
    color: #bbb;
    cursor: default;
}

.qq-contact-tag-editor {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

#qq-contact-tag-input {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #ddd;
    padding: 6px 10px;
    font-size: 12px;
    outline: none;
}

/* QQ 朋友圈 */
#qq-tab-moments { 
    background-color: var(--neo-bg) !important; 
    color: var(--neo-text); 
}
#qq-header-moments.active-moments { 
    background: transparent !important; 
    border-bottom: none !important; 
    box-shadow: none !important; 
}
.moments-profile-header {
    position: relative;
    height: 33vh;
    background-color: var(--neo-bg);
}
.moments-bg {
    width: 100%;
    height: 100%;
    background-color: #ccc;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
.moments-user-avatar {
    position: absolute; 
    right: 20px; 
    bottom: -25px;
    width: 80px; 
    height: 80px; 
    border-radius: 15px;
    border: 4px solid var(--neo-bg); 
    object-fit: cover;
    cursor: pointer; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); 
    background: #eee;
}
.moments-signature {
    text-align: right;
    padding: 40px 20px 15px 110px;
    font-size: 13px;
    color: #555;
    outline: none;
    background-color: rgba(255,255,255,0.9);
    border: none;
    min-height: 55px;
    display: block;
}
.moments-signature:empty::before { 
    content: '设置你的个性签名'; 
    color: #999; 
}
#moments-feed-container {
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: rgba(255,255,255,0.9);
}
.moment-post-item {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 15px;
    color: var(--neo-text);
}
.moment-post-author { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 12px; 
}
.moment-author-avatar { 
    width: 42px; 
    height: 42px; 
    border-radius: 10px; 
    object-fit: cover; 
}
.moment-author-name { 
    font-size: 16px; 
    font-weight: bold; 
}
.moment-post-text { 
    font-size: 15px; 
    line-height: 1.5; 
    white-space: pre-wrap; 
    word-break: break-word; 
    margin-bottom: 12px; 
}
.moment-post-image { 
    width: 100%; 
    max-width: 250px; 
    height: auto; 
    object-fit: cover; 
    border-radius: 12px; 
    margin-top: 5px; 
    border: 1px solid rgba(0,0,0,0.05); 
}
.moment-post-footer { 
    margin-top: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.moment-like-btn, .moment-actions-btn, .moment-bell-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s;
    color: var(--neo-text);
}
.moment-like-btn:active, .moment-actions-btn:active, .moment-bell-btn:active {
    transform: scale(0.9);
}
.moment-like-btn.liked { 
    color: var(--heart-color); 
    animation: heartBeat 0.5s ease; 
}
@keyframes heartBeat { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.3); } 
    100% { transform: scale(1); } 
}

.moment-post-author-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.moment-author-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.moment-author-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.08);
    color: #374151;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.moment-author-subtitle {
    font-size: 12px;
    color: #8b5cf6;
    line-height: 1.5;
}
.moment-post-location {
    margin: -2px 0 12px;
    font-size: 12px;
    color: #6b7280;
}
.moment-post-actions-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.moment-bell-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(236, 72, 153, 0.14) 100%);
    color: #7c3aed;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.16);
}
.moment-bell-btn:hover {
    color: #6d28d9;
}
.moment-bell-btn svg {
    pointer-events: none;
}
.moment-post-item.is-self-post {
    border-color: rgba(196, 181, 253, 0.9);
    box-shadow: 0 10px 26px rgba(139, 92, 246, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%);
}
.moment-post-item.is-self-post .moment-author-avatar {
    border: 2px solid rgba(139, 92, 246, 0.3);
}
.moments-header-icon-btn,
.moments-header-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.moments-header-actions {
    gap: 4px;
    margin-left: auto;
}
.moments-settings-page {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    background: linear-gradient(180deg, #f7f8fb 0%, #f2f4f8 100%);
}
.moments-settings-header {
    flex-shrink: 0;
}
.moments-settings-content {
    padding-bottom: 132px;
}
.moments-settings-two-rows {
    grid-template-columns: 1fr 1fr;
}
.moments-settings-footer {
    z-index: 1;
}

#moments-post-creator #moment-text-input {
    background: var(--neo-bg); 
    color: var(--neo-text); 
    border: none; 
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light); 
}
#moments-post-creator #moment-text-input::placeholder { 
    color: #888; 
}
#moments-post-creator #moment-location-setter { 
    background: var(--neo-bg); 
    color: #555; 
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light); 
}
#moments-post-creator #moment-add-image-label { 
    background: var(--neo-bg); 
    color: #666; 
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light); 
}
#moments-post-creator #moment-add-image-label:active { 
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light); 
}
#moments-post-creator #publish-moment-btn { 
    background: #000; 
    color: #fff; 
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light); 
}
#moments-post-creator #publish-moment-btn:active { 
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(255,255,255,0.3); 
}
#moments-post-creator .close-btn { 
    color: #888; 
}


/* --- 5.2 世界书 应用 --- */
/* High-contrast adjustments for Worldbook (refined) */
#worldbook-page { background: #fff !important; }
#worldbook-page .nav-header {
  background: #fff !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
#worldbook-page .neo-btn-small,
#worldbook-page .custom-select-display,
#worldbook-page .neo-input {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}
/* 世界书主页面整体白色背景（你之前已经有一部分） */
#worldbook-page {
    background-color: #ffffff !important;
}

/* 世界书顶部导航栏更白一点 */
#worldbook-page .nav-header {
    background-color: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 世界书列表中的每一个条目整体变白卡片风格 */
#worldbook-page #wb-list > * {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 12px 14px;
    /* 加强阴影和边缘感，让世界书条目更明显 */
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* 条目内标题/正文可以稍微加点对比度（可按自己口味调） */
#worldbook-page #wb-list > * h3,
#worldbook-page #wb-list > * .wb-entry-title {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 0 0 6px 0;
}

#worldbook-page #wb-list > * p,
#worldbook-page #wb-list > * .wb-entry-body {
    font-size: 13px;
    color: #555;
    margin: 0;
}

/* 世界书分类标签的标签色（如果有类似 class，可以这样写） */
#worldbook-page .wb-category-tag,
#worldbook-page .wb-category-name {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 12px;
    font-weight: 500;
}

#worldbook-page .custom-select-display:hover,
#worldbook-page .neo-btn-small:hover {
  background: #f5f5f5 !important;
  color: #000 !important;
}
#worldbook-page .setting-row .setting-label { color: #000 !important; font-weight: 600; }
#worldbook-page .setting-row { border-bottom: 1px solid #e5e5e5; }
#worldbook-page .collapse-container { border: 1px solid #e5e5e5; border-radius: 10px; }

/* Ensure worldbook binding displays can show multiline quantity text */
#online-wb-display,
#offline-wb-display,
#offline-wb-display-offline {
  height: auto !important;
  min-height: 40px;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left !important;
}
.neo-page { 
    background-color: var(--neo-bg) !important; 
    color: var(--neo-text) !important; 
}
.neo-header { 
    background: transparent !important; 
    border: none !important; 
    box-shadow: 0 4px 10px rgba(213, 214, 217, 0.5) !important; 
    color: var(--neo-text) !important; 
}
.neo-btn-small { 
    border: none; 
    background: var(--neo-bg); 
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light); 
    border-radius: 12px; 
    color: var(--neo-text); 
    padding: 10px 18px; 
    cursor: pointer; 
    transition: 0.2s; 
    font-size: 14px; 
    font-weight: bold; 
}
.neo-btn-small:active { 
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light); 
}
.neo-card { 
    background: var(--neo-bg); 
    border-radius: 20px; 
    padding: 18px; 
    box-shadow: 6px 6px 12px var(--neo-shadow-dark), -6px -6px 12px var(--neo-shadow-light); 
    cursor: pointer; 
    transition: 0.2s; 
}
.neo-card:active { 
    transform: scale(0.98); 
}
.neo-input { 
    width: 100%; 
    border: none; 
    background: var(--neo-bg); 
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light); 
    padding: 15px; 
    border-radius: 15px; 
    outline: none; 
    color: var(--neo-text); 
    font-size: 14px; 
    font-weight: 500; 
}
.neo-input-wrapper { 
    width: 100%; 
    margin-bottom: 20px; 
}
.neo-input-label { 
    display: block; 
    font-size: 13px; 
    color: #000; 
    margin-bottom: 8px; 
    font-weight: 600; 
}
.wb-categories { 
    display: flex; 
    gap: 15px; 
    padding: 20px 15px; 
    overflow-x: auto; 
}
.wb-cat-tab { 
    padding: 10px 20px; 
    border-radius: 20px; 
    font-size: 13px; 
    font-weight: bold; 
    background: var(--neo-bg); 
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light); 
    white-space: nowrap; 
    cursor: pointer; 
    color: #666; 
    transition: 0.2s; 
}
.wb-cat-tab.active { 
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light); 
    color: #000; 
}
.neo-drawer { 
    background: var(--neo-bg) !important; 
    box-shadow: 0 -10px 30px rgba(163,177,198,0.4) !important; 
}
#wb-entry-list-editor { 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
    width: 100%; 
    margin-top: 10px; 
}
.wb-entry-item { 
    border: 2px solid #fff; 
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light); 
    border-radius: 15px; 
    padding: 15px; 
    position: relative; 
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wb-entry-header-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.wb-entry-header-row .entry-keyword {
    flex: 1;
}
.wb-entry-item .neo-input { 
    margin-bottom: 10px; 
}
.wb-entry-item .neo-input.entry-content { 
    height: 100px; 
    resize: none; 
}
.wb-entry-delete-btn { 
    position: absolute; 
    top: -10px; right: -10px; 
    width: 24px; height: 24px; 
    background: var(--neo-bg); 
    box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light); 
    border-radius: 50%; border: none; 
    color: var(--heart-color); 
    font-weight: bold; 
    cursor: pointer; 
}

/* 简约滑块开关 */
.wb-entry-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wb-entry-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.wb-entry-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #e5e5ea;
    transition: background 0.2s ease;
}

.wb-entry-toggle-thumb {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transform: translateX(-8px);
    transition: transform 0.2s ease;
}

.wb-entry-toggle input:checked + .wb-entry-toggle-track + .wb-entry-toggle-thumb {
    transform: translateX(8px);
}

.wb-entry-toggle input:checked + .wb-entry-toggle-track {
    background: #000000;
}

/* 世界书条目数量提示 */
.wb-book-entry-count {
    margin-top: 6px;
    font-size: 12px;
    color: #9b9b9b;
    text-align: center;
}


/* 让游戏大厅 / 纪念日 / 自律钟主界面背景更白，接近世界书 */
#game-center-page,
#anniversary-page,
#clock-page {
    background-color: #ffffff !important;
}

/* 让三个应用里的主要条目卡片更有阴影、更易区分 */
#game-center-page .neo-card,
#anniversary-page .anniversary-item,
#clock-page .clock-task-item {
    background-color: #ffffff;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

/* ================= 谁是卧底 ================= */

.undercover-setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.undercover-setup-overlay.active {
    display: flex;
}
.undercover-setup-modal {
    width: 92%;
    max-width: 420px;
    background: #ffffff;
    color: #000;
    border-radius: 18px;
    padding: 18px 18px 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.undercover-setup-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}
.undercover-setup-section {
    margin-top: 10px;
}
.undercover-setup-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}
.undercover-player-count {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: #f5f5f5;
}
.undercover-player-count .count-btn {
    border: none;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    background: transparent;
    color: #555;
    cursor: pointer;
}
.undercover-player-count .count-btn.active {
    background: #000;
    color: #fff;
}
.undercover-setup-hint,
.undercover-setup-subhint {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
}
.undercover-role-columns {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.undercover-role-column {
    flex: 1;
    background: #fafafa;
    border-radius: 12px;
    padding: 8px;
}
.undercover-role-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}
.undercover-role-list {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.undercover-role-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #eee;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.undercover-role-item.active {
    border-color: #000;
    background: #111;
    transform: translateY(1px);
}
.undercover-role-item.active .undercover-role-name {
    color: #fff;
}
.undercover-role-item.active .undercover-role-desc {
    color: #ccc;
}
.undercover-role-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
}
.undercover-role-main {
    flex: 1;
    min-width: 0;
}
.undercover-role-name {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}
.undercover-role-desc {
    font-size: 11px;
    color: #999;
}
.undercover-role-empty {
    font-size: 12px;
    color: #999;
}

.undercover-setup-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.undercover-setup-actions .setup-btn {
    min-width: 80px;
}

/* 游戏主界面 */

#undercover-page.undercover-page {
    background: #050506;
    color: #f5f5f5;
}

.undercover-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 10px 12px;
    box-sizing: border-box;
}

.undercover-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 8px;
}
.undercover-title-wrap {
    flex: 1;
    min-width: 0;
}
.undercover-title {
    font-size: 16px;
    font-weight: 700;
}
.undercover-subtitle {
    font-size: 11px;
    color: #bbb;
    margin-top: 2px;
}
.undercover-mask-btn {
    border: none;
    padding: 6px 8px;
    border-radius: 999px;
    background: #000;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.undercover-mask-icon {
    font-size: 15px;
}

.undercover-players {
    display: flex;
    gap: 10px;
    padding: 4px 0 8px;
    overflow-x: auto;
}
.undercover-player-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 12px;
    background: #111;
    border: 1px solid #222;
    min-width: 60px;
}
.undercover-player-item.active {
    border-color: #fff;
    box-shadow: 0 0 0 1px #fff;
}
.undercover-player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
}
.undercover-player-name {
    font-size: 11px;
    max-width: 64px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.undercover-main {
    flex: 1;
    min-height: 0;
    margin-top: 4px;
}
.undercover-log {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: radial-gradient(circle at top, #151515, #050506);
    padding: 10px 12px;
    box-sizing: border-box;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.5;
}
.undercover-log-placeholder {
    color: #777;
}
.undercover-log-block {
    margin-bottom: 8px;
}
.undercover-log-block p {
    margin: 0 0 4px;
}

.undercover-input-panel {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: #0b0b0c;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.undercover-input-hint {
    font-size: 11px;
    color: #bbb;
}
.undercover-input-row {
    display: flex;
    gap: 8px;
}
#undercover-input {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #333;
    padding: 7px 11px;
    background: #050506;
    color: #f5f5f5;
    font-size: 13px;
    outline: none;
}
#undercover-input::placeholder {
    color: #666;
}
.undercover-action-btn {
    border-radius: 999px;
    border: none;
    padding: 0 12px;
    font-size: 12px;
    cursor: pointer;
    background: #222;
    color: #fff;
}
.undercover-action-btn.primary {
    background: #ffffff;
    color: #000;
}
.undercover-action-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.undercover-vote-row {
    display: flex;
    gap: 8px;
}
#undercover-vote-select {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #333;
    padding: 6px 10px;
    background: #050506;
    color: #f5f5f5;
    font-size: 13px;
    outline: none;
}
.undercover-status {
    font-size: 11px;
    color: #888;
}

/* 通用黑白弹窗：我的谜底 & 结算 */

.undercover-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.undercover-modal-overlay.active {
    display: flex;
}
.undercover-modal {
    width: 86%;
    max-width: 380px;
    background: #ffffff;
    color: #000;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.4);
    padding: 14px 16px 12px;
}
.undercover-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.undercover-modal-title {
    font-size: 15px;
    font-weight: 700;
}
.undercover-modal-close {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
}
.undercover-modal-body {
    margin-top: 10px;
    font-size: 13px;
}
.undercover-word-main {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
}
.undercover-word-desc {
    font-size: 12px;
    color: #666;
    text-align: center;
}
.undercover-modal-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.undercover-modal-btn {
    min-width: 80px;
    border-radius: 999px;
    border: 1px solid #111;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    background: #000;
    color: #fff;
}
.undercover-modal-btn.secondary {
    background: #fff;
    color: #000;
}
.undercover-result-words {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.undercover-result-word-item {
    flex: 1;
    background: #f5f5f5;
    border-radius: 12px;
    padding: 6px 8px;
}
.undercover-result-word-item .label {
    font-size: 11px;
    color: #777;
    margin-bottom: 4px;
}
.undercover-result-word-item .value {
    font-size: 14px;
    font-weight: 600;
}
.undercover-result-summary {
    font-size: 14px;
    font-weight: 600;
}
.undercover-result-detail p {
    margin: 4px 0;
    font-size: 12px;
}
.undercover-result-footer {
    justify-content: space-between;
}

/* --- 5.3 纪念日 应用 --- */
.anniversary-list {
    list-style: none;
    padding: 15px;
    margin: 0;
}
.anniversary-item-wrapper { 
    position: relative; 
    margin-bottom: 15px; 
    border-radius: 15px; 
    overflow: hidden; 
}
.anniversary-item-actions { 
    position: absolute; 
    top: 0; right: 0; 
    height: 100%; 
    display: flex; 
    z-index: 1; 
}
.anniversary-item-actions button { 
    width: 70px; 
    height: 100%; 
    border: none; 
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 15px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.anniversary-item-actions .edit-btn { 
    background-color: #f0ad4e; 
}
.anniversary-item-actions .delete-btn { 
    background-color: var(--heart-color); 
}
.anniversary-item {
    position: relative; 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 20px 15px; 
    background: #fff; 
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease-out; 
    z-index: 2;
}
.anniversary-item.swiped { 
    transform: translateX(-210px); 
}
.anniversary-title { 
    font-size: 16px; 
    font-weight: 600; 
}
.anniversary-countdown { 
    text-align: right; 
}
.anniversary-days { 
    font-size: 18px; 
    font-weight: bold; 
    color: #000; 
}
.anniversary-label { 
    font-size: 12px; 
    color: #888; 
}
.anniversary-creator-form { 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}
.anniversary-date-picker { 
    display: flex; 
    justify-content: space-between; 
    gap: 10px; 
}
.anniversary-date-picker select {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    font-weight: 500;
}

@media (max-width: 768px) {
    .anniv-widget-style-row {
        flex-wrap: wrap;
    }

    .anniv-widget-style-field,
    .anniv-widget-style-field-compact {
        flex: 1 1 100%;
    }

    .anniv-widget-style-action-wrap {
        width: 100%;
    }

    .anniv-widget-secondary-btn,
    .anniv-widget-upload-btn,
    .anniv-widget-primary-btn,
    #beautify-page .appearance-picker-btn {
        min-height: 46px;
    }

    #beautify-page .appearance-picker-btn {
        min-width: 0;
        flex: 1 1 calc(50% - 5px);
    }

    .anniv-widget-color-input {
        height: 48px;
        border-radius: 18px;
    }

    .anniv-widget-color-input::-webkit-color-swatch {
        border-radius: 14px;
    }

    .anniv-widget-color-input::-moz-color-swatch {
        border-radius: 14px;
    }

    .anniv-widget-upload-btn {
        width: 100%;
    }

    .anniv-widget-bg-preview {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }
}


/* --- 5.4 自律钟 应用 --- */
.clock-app-container { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}

#clock-main-task-view,
#clock-main-todo-view,
#clock-personal-view {
    flex: 1;
    overflow-y: auto;
}

/* 注意：显示 / 隐藏状态完全交给 JS 中的 hidden 属性控制，这里不再强制 display:none，
   否则会与 JS 的 hidden 切换行为冲突，导致个人页无法显示。 */

.clock-bottom-nav { 
    display: flex; 
    background: #ffffff; /* 底栏整体为白色 */
    border-top: 0.5px solid #ddd; /* 仅顶部一条灰色边线 */
    flex-shrink: 0; 
    padding-bottom: 20px; 
}
.clock-nav-item { 
    flex: 1; 
    text-align: center; 
    padding: 10px; 
    cursor: pointer; 
    color: #999; 
    background-color: transparent; /* 按钮透明，不做分隔色块 */
    border: none; /* 移除按钮边框，避免中间竖线 */
}
.clock-nav-item.active { 
    color: #000; 
}
.clock-nav-item svg { 
    width: 24px; 
    height: 24px; 
    margin-bottom: 2px; 
}
.clock-nav-item div { 
    font-size: 10px; 
    font-weight: 500; 
}

/* 自律钟 个人资料卡片 */
/* 自律钟 个人资料卡片：INS 简约偏白风 */
.clock-personal-card {
    position: relative;
    margin: 18px 16px 4px;
    padding: 18px 14px 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}

.clock-personal-left {
    flex-shrink: 0;
}

.clock-personal-avatar-btn {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    padding: 0;
    margin: 0;
    background: linear-gradient(145deg, #f9fafb, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.14);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.16s var(--ease-ios), box-shadow 0.16s var(--ease-ios), border-color 0.16s ease;
}

.clock-personal-avatar-btn:active {
    transform: translateY(1px) scale(0.985);
    box-shadow:
        0 4px 10px rgba(15, 23, 42, 0.16);
    border-color: rgba(148, 163, 184, 0.7);
}

.clock-personal-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clock-personal-avatar-fallback {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #4b5563;
}

.clock-personal-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.clock-personal-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9ca3af;
}

.clock-personal-role-hint {
    font-size: 11px;
    line-height: 1.4;
    color: #6b7280;
}

.clock-personal-switch-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    flex-shrink: 0;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #111827;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.clock-personal-switch-btn:hover {
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.clock-personal-switch-btn:active {
    transform: scale(0.97);
}

.clock-personal-name {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.clock-personal-sign {
    font-size: 13px;
    line-height: 1.5;
    color: #4b5563;
}

.clock-personal-name,
.clock-personal-sign {
    min-height: 20px;
    padding: 3px 6px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid rgba(209, 213, 219, 0.8);
}

.clock-personal-name[contenteditable="true"]:focus,
.clock-personal-sign[contenteditable="true"]:focus {
    outline: none;
    border-color: #111827;
    box-shadow: 0 0 0 1px #11182710;
}

.clock-personal-sign-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 个人页各个功能区：自律时长统计 / 陪伴角色 / 自律格言 / 壁纸 */
.clock-personal-section {
    margin-top: 14px;
    padding: 0 16px;
}

.clock-personal-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.clock-personal-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.clock-personal-section-sub {
    font-size: 11px;
    color: #9ca3af;
}

.clock-personal-section-btn {
    width: 100%;
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 16px;
    padding: 11px 12px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transform-origin: center;
    transition: transform 0.15s var(--ease-ios), box-shadow 0.15s var(--ease-ios), border-color 0.15s ease, background-color 0.15s ease;
}

.clock-personal-section-btn:active {
    transform: translateY(1px) scale(0.985);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
    border-color: rgba(156, 163, 175, 0.7);
    background-color: #f9fafb;
}

.clock-personal-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #111827;
}

.clock-personal-section-texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.clock-personal-section-main {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.clock-personal-section-meta {
    font-size: 11px;
    color: #9ca3af;
}

/* 让个人页底部几个按钮彼此之间保持统一间距 */
#clock-personal-view .clock-personal-section + .clock-personal-section {
    margin-top: 10px;
}

.clock-task-list { 
    list-style: none; 
    padding: 15px; 
    margin: 0; 
}
.clock-task-item-wrapper { 
    position: relative; 
    margin-bottom: 15px; 
    border-radius: 15px; 
    overflow: hidden; 
}
.clock-task-item-actions { 
    position: absolute; 
    top: 0; right: 0; 
    height: 100%; 
    display: flex; 
    z-index: 1; 
}
.clock-task-item-actions button { 
    width: 70px; 
    height: 100%; 
    border: none; 
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 15px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}
.clock-task-item-actions .edit-btn { 
    background-color: #f0ad4e; 
}
.clock-task-item-actions .delete-btn { 
    background-color: var(--heart-color); 
}
.clock-task-item {
    position: relative; 
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 20px 15px; 
    background: #fff; 
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    cursor: pointer;
    transition: transform 0.3s ease-out; 
    z-index: 2;
}
.clock-task-item.swiped { 
    transform: translateX(-140px); 
}
.clock-task-name { 
    font-size: 16px; 
    font-weight: 600; 
}
.clock-task-duration { 
    font-size: 13px; 
    color: #888; 
    background-color: #f0f0f0; 
    padding: 4px 8px; 
    border-radius: 8px; 
    font-weight: 500; 
}

.beautify-panel {
    display: none;
}

.beautify-panel.active {
    display: block;
}

.beautify-module-btn {
    width: 100%;
    text-align: left;
    border: none;
    background: #fff;
    padding: 12px 14px;
    margin: 6px 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.beautify-module-btn.active {
    outline: 2px solid #000;
}


.beautify-module-btn {
    width: 100%;
    text-align: left;
    border: none;
    background: #fff;
    padding: 12px 14px;
    margin: 6px 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.beautify-module-btn.active {
    outline: 2px solid #000;
}

.setting-card {
    margin: 10px 14px;
    padding: 12px 10px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0;
}

.setting-row > label {
    min-width: 70px;
    font-size: 12px;
    color: #555;
}

.love-screen {
    background-color: #f7f3ec;
    background-image: none;
    color: #4c2f21;
    gap: 20px;
}

.love-screen-header {
    flex: 0 0 20%;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.love-header-bar {
    width: 100%;
    padding: 8px 12px;
    border-radius: 16px;
    background: #f5f5f5;
    border: 1px solid rgba(120, 120, 120, 0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
    color: #000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.love-header-label {
    font-size: 11px;
    letter-spacing: 0.3em;
    color: #666;
    white-space: nowrap;
}

.love-header-message {
    flex: 1;
    min-height: 20px;
    font-size: 13px;
    color: #000;
    outline: none;
    border: none;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.love-header-message:empty::before {
    content: attr(data-placeholder);
    color: #999;
}

.love-screen-eyebrow {
    font-size: 11px;
    letter-spacing: 0.3em;
    margin: 0;
    opacity: 0.7;
}

.love-screen-title {
    font-size: 28px;
    margin: 6px 0;
    letter-spacing: 0.04em;
}

.love-screen-desc {
    margin: 0;
    font-size: 14px;
    color: rgba(76,47,33,0.8);
    line-height: 1.6;
}

.love-board {
    display: flex;
    gap: 24px;
    flex: 1;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: -18px;
}

/* 第二屏中部 · 黑白简约日记长条（中下区放大版） */
.role-diary-strip {
    position: relative;
}

.role-diary-settings {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.04);
    cursor: pointer;
}

.role-diary-settings-icon {
    width: 16px;
    height: 16px;
    fill: #888;
}

.role-diary-settings-root {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.role-diary-settings-root.visible {
    pointer-events: auto;
    opacity: 1;
}

.role-diary-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.role-diary-settings-panel {
    position: relative;
    z-index: 1;
    width: 280px;
    max-width: calc(100% - 40px);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    padding: 14px 14px 12px;
    font-size: 13px;
}

.role-diary-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.role-diary-settings-title {
    font-weight: 600;
}

.role-diary-settings-close {
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.role-diary-settings-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.role-diary-settings-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.role-diary-settings-label {
    flex: 0 0 92px;
    color: #555;
}

.role-diary-settings-input {
    flex: 1;
    max-width: 160px;
    height: 28px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 12px;
}

.role-diary-settings-color {
    width: 40px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.role-diary-settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.role-diary-settings-btn {
    min-width: 68px;
    height: 28px;
    border-radius: 999px;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

.role-diary-settings-btn.secondary {
    background: #f2f2f2;
}

.role-diary-settings-btn.primary {
    background: #000;
    color: #fff;
}

 .love-screen .role-diary-strip {
     position: absolute;
     left: 50%;
     top: 54%;               /* 再往上提一点，让「暖心一下」板块整体更靠中部 */
     transform: translateX(-50%);
     z-index: 2;
 
     /* 略微拉宽「暖心一下」长条，让视觉更充实但仍保留左右留白 */
     width: 92%;
     max-width: 380px;
     box-sizing: border-box;
     margin: 0 auto;
     padding: 8px 12px;
     border-radius: 14px;
     border: 1px solid #111;
     background: #ffffff;
     display: flex;
     align-items: center;
     gap: 8px;
     box-shadow: 0 6px 18px rgba(0,0,0,0.18);
 }
 
 .role-diary-strip {
     position: relative;
 }
 
 .role-diary-settings {
     position: absolute;
     right: 8px;
     top: 8px;
     width: 24px;
     height: 24px;
     border-radius: 999px;
     border: none;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: rgba(0,0,0,0.04);
     cursor: pointer;
 }
 
 .role-diary-settings-icon {
     width: 16px;
     height: 16px;
     fill: #888;
 }
 
 .role-diary-settings-root {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 2600;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.2s ease;
 }
 
 .role-diary-settings-root.visible {
     pointer-events: auto;
     opacity: 1;
 }
 
 .role-diary-settings-backdrop {
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,0.4);
 }
 
 .role-diary-settings-panel {
     position: relative;
     z-index: 1;
     width: 280px;
     max-width: calc(100% - 40px);
     border-radius: 18px;
     background: #fff;
     box-shadow: 0 18px 45px rgba(0,0,0,0.35);
     padding: 14px 14px 12px;
     font-size: 13px;
 }
 
 .role-diary-settings-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 8px;
 }
 
 .role-diary-settings-title {
     font-weight: 600;
 }
 
 .role-diary-settings-close {
     border: none;
     background: none;
     font-size: 18px;
     line-height: 1;
     padding: 0 2px;
     cursor: pointer;
 }
 
 .role-diary-settings-body {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-bottom: 10px;
 }
 
 .role-diary-settings-row {
     display: flex;
     align-items: center;
     gap: 6px;
 }
 
 .role-diary-settings-label {
     flex: 0 0 92px;
     color: #555;
 }
 
 .role-diary-settings-input {
     flex: 1;
     height: 28px;
     padding: 4px 8px;
     border-radius: 8px;
     border: 1px solid #ddd;
     font-size: 12px;
 }
 
 .role-diary-settings-color {
     width: 40px;
     height: 24px;
     padding: 0;
     border-radius: 6px;
     border: 1px solid #ddd;
 }
 
 .role-diary-settings-footer {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
 }
 
 .role-diary-settings-btn {
     min-width: 68px;
     height: 28px;
     border-radius: 999px;
     border: none;
     font-size: 12px;
     cursor: pointer;
 }
 
 .role-diary-settings-btn.secondary {
     background: #f2f2f2;
 }
 
 .role-diary-settings-btn.primary {
     background: #000;
     color: #fff;
 }
 
 .role-diary-avatar {
     flex: 0 0 auto;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
    justify-content: center;
    width: 60px;
}

.role-diary-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fbe5d3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #4c2f21;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.role-diary-avatar-circle.has-image {
    color: transparent;
}

.role-diary-avatar-name {
    margin-top: 4px;
    font-size: 10px;
    color: #5a3c1f;
    max-width: 64px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-diary-avatar select,
.role-diary-select-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    border: none;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

.role-diary-text {
    flex: 1;
    font-size: 11px;
    line-height: 1.45;
    color: #ffffff;
    background: #111111; /* 中间改为黑色条块，承载白色台词文本 */
    padding: 8px 10px;
    border-radius: 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.role-diary-action {
    flex: 0 0 auto;
    border-radius: 999px;
    border: 1px solid #111;
    background: #000;
    color: #fff;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    min-width: 56px;
}

.role-diary-action:active {
    opacity: 0.8;
}

.love-apps-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    justify-content: center;
    min-width: 140px;
}

.love-apps-row {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    justify-content: flex-start;
    grid-area: apps;
}

.love-app-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.72);
    border: 1px solid rgba(17,17,17,0.08);
    box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

.love-app-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: #111111;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}

.love-app .home-app-name {
    color: #4c2f21;
}

.love-uploadable {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.love-uploadable:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 4px;
}

.love-uploadable:active {
    transform: scale(0.97);
}

.love-uploadable.love-has-image svg {
    opacity: 0;
}

 .love-canvas {
    flex: 1;
    position: relative;
    min-height: 360px;
    padding-top: 10px;    /* 轻微压缩上下留白，让上下两块再稍微靠近一点 */
    padding-right: 6px; /* 原 10px，让右侧爱心组件整体向右贴近一点，但仍保留少量留白 */
    padding-bottom: 10px; /* 与顶部对称，保证下半部分也同步上移一点 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 保持原有结构，只做温和收紧 */
 }


.love-top-group {
    display: flex;
    align-items: center; /* 让爱心整体和四个 APP 的中线大致在同一高度 */
    justify-content: space-between; /* 将爱心推到更靠右的位置，左侧 App 保持不动 */
    gap: 24px;
}

.love-bottom-group {
    display: flex;
    align-items: flex-end;   /* 圆形组件与下面四个 APP 的底部对齐 */
    justify-content: flex-start;
    gap: 52px;              /* 圆形组件与第一列（无限流/漂流瓶）之间的距离再拉大一些 */
}

 .love-bottom-apps {
     display: flex;
     flex: 1;
     justify-content: flex-start;
     align-items: flex-end;
     column-gap: 44px;        /* 「无限流」列与「小剧场」列之间的间距加大 */
     margin-left: 24px;       /* 再向右轻微偏移，让四个 App 更靠中间（原 16px） */
 }
 
 .love-bottom-col {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     row-gap: 10px;              /* 同一列上下两个 APP 的垂直间距 */
 }
 
 /* 爱心组件：右侧单颗爱心容器，直接以完整爱心形状显示并裁剪背景图片 */
 .love-heart {
    position: relative;
    width: 130px;   /* 放大爱心组件，让视觉重心更突出 */
    height: 130px;
    margin-right: 16px;  /* 在 space-between 布局下，让爱心比刚才稍微左移一点 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.32);   /* 玻璃感底色 */
    box-shadow: 0 15px 35px rgba(122,84,55,0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow: hidden;
    /* 使用更接近传统爱心的路径：顶部有明显凹陷、两侧鼓起 */
    -webkit-clip-path: polygon(
        50% 14%,  /* 顶部中心略低，形成心形凹陷 */
        60% 4%,   /* 右上弧起点 */
        72% 4%,
        84% 10%,
        92% 22%,
        96% 36%,
        96% 50%,
        90% 64%,
        80% 76%,
        66% 86%,
        50% 96%,  /* 底部心尖 */
        34% 86%,
        20% 76%,
        10% 64%,
        4% 50%,
        4% 36%,
        8% 22%,
        16% 10%,
        28% 4%,
        40% 4%
    );
    clip-path: polygon(
        50% 14%,
        60% 4%,
        72% 4%,
        84% 10%,
        92% 22%,
        96% 36%,
        96% 50%,
        90% 64%,
        80% 76%,
        66% 86%,
        50% 96%,
        34% 86%,
        20% 76%,
        10% 64%,
        4% 50%,
        4% 36%,
        8% 22%,
        16% 10%,
        28% 4%,
        40% 4%
    );
}
/* 保留类名以兼容上传逻辑，此状态无需额外样式 */

/* 不再使用伪元素绘制爱心，形状完全由 SVG 决定 */
 .love-heart::before,
 .love-heart::after {
     content: none;
 }
 
 .love-heart-inner {
     position: relative;
     z-index: 2;
 }
 
 /* 移除单独的 love-glass 对爱心形状造成的方形包裹感 */
 .love-heart.love-glass {
     background: transparent;
     border: none !important;
     box-shadow: none !important;
 }
 
  .love-circle {
      position: relative;
      width: 145px;   /* 圆形组件更大一些，贴近左下角但保留一点喘息空间 */
      height: 145px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #4c2f21;
      text-align: center;
      padding: 8px;
      z-index: 1;
      margin-left: 20px;       /* 再向右轻微移动（原 12px），和图标列偏移保持统一 */
      margin-bottom: 36px;  /* 整体向上再抬高一截，让位置更高一些 */
  }
.love-heart-svg {
     width: 100%;
     height: 100%;
     display: block;
 }
 
 /* 放大默认心形 SVG，让未上传图片时的爱心明显变大 */
 .love-heart-svg {
     transform: scale(1.7);
     transform-origin: 50% 50%;
 }
 
 
 /* 调整第二屏底部：拉大圆形与「无限流」列距离，以及「无限流」列与「小剧场」列之间的间距 */
 .love-bottom-group {
     gap: 64px; /* 原 52px，圆形组件与第一列之间更远一点 */
 }
 
 .love-bottom-apps {
     column-gap: 52px; /* 原 44px，两列之间再拉开一点 */
 }
 
  /* 调整「暖心一下」板块位置与高度：略微上移，并整体加高，预留头像空间 */
  .role-diary-strip {
    position: relative;
}

.role-diary-settings {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.04);
    cursor: pointer;
}

.role-diary-settings-icon {
    width: 16px;
    height: 16px;
    fill: #888;
}

.role-diary-settings-root {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.role-diary-settings-root.visible {
    pointer-events: auto;
    opacity: 1;
}

.role-diary-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.role-diary-settings-panel {
    position: relative;
    z-index: 1;
    width: 280px;
    max-width: calc(100% - 40px);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    padding: 14px 14px 12px;
    font-size: 13px;
}

.role-diary-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.role-diary-settings-title {
    font-weight: 600;
}

.role-diary-settings-close {
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.role-diary-settings-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.role-diary-settings-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.role-diary-settings-label {
    flex: 0 0 92px;
    color: #555;
}

.role-diary-settings-input {
    flex: 1;
    max-width: 160px;
    height: 28px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 12px;
}

.role-diary-settings-color {
    width: 40px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.role-diary-settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.role-diary-settings-btn {
    min-width: 68px;
    height: 28px;
    border-radius: 999px;
    border: none;
    font-size: 12px;
    cursor: pointer;
}

.role-diary-settings-btn.secondary {
    background: #f2f2f2;
}

.role-diary-settings-btn.primary {
    background: #000;
    color: #fff;
}

/* 首页两个图片组件内的白色文本全部隐藏，仅保留图片区域 */
 .anniversary-widget .anniv-title,
 .anniversary-widget .anniv-days,
 .anniversary-widget .anniv-sub,
 #bottom-photo-placeholder {
     font-size: 0;
     color: transparent;
 }
 
 /* 移除爱心轮廓的明显白色边框，仅保留柔和填充感 */
 .love-heart-svg path {
     stroke: none;
 }
 
 .love-glass {
     background: rgba(255,255,255,0.08);
     border: 1px solid rgba(255,255,255,0.22);
     box-shadow: 0 15px 35px rgba(0,0,0,0.08);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
 }
 
 .love-tips {
     font-size: 12px;
     color: rgba(76,47,33,0.7);
     text-align: center;
     margin-top: auto;
 }
 
 @media (max-width: 420px) {
     .love-board {
         flex-direction: column;
     }
 
     .love-canvas {
         min-height: 360px;
         padding-right: 0;
     }
 
     .love-top-group {
         flex-direction: row;      /* 手机上也保持爱心在四个 APP 右侧 */
         align-items: center;
         gap: 16px;
     }
 
     .love-bottom-group {
         align-items: flex-end;    /* 圆形组件与下面四个 APP 的底部对齐 */
         gap: 20px;                /* 手机上也适当拉开圆形组件与左侧 APP 列的距离 */
     }
 
     .love-bottom-apps {
         flex-wrap: wrap;
         justify-content: flex-start;
         gap: 18px;                /* 两列 APP 在小屏幕上也稍微分开一些 */
         margin-left: 16px;        /* 小屏上四个 App 再整体略微往右移（原 10px） */
     }
 
     .love-circle {
         width: 100px;  /* 移动端略小一圈，保持左下角的呼吸感 */
         height: 100px;
     }
 }
 .focus-chart-text { 
     font-size: 24px; 
     font-weight: bold; 
     color: #333; 
 }
 .focus-chart-label { 
     margin-top: 10px; 
     font-size: 14px; 
     font-weight: 500; 
     color: #666; 
 }

.personalization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}
.grid-item {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eee;
    cursor: pointer;
    border: 0;
    overflow: hidden;
}
.grid-item-add {
    border: 2px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    font-size: 30px;
    padding-top: 0;
    min-height: 88px;
    background: #f3f4f6;
}
.delete-icon {
    position: absolute;
    top: 6px; right: 6px;
    width: 24px; height: 24px;
    background: rgba(17, 24, 39, 0.8); color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    font-weight: bold; 
    cursor: pointer; 
}

.clock-settings-modal {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    min-height: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    width: min(92%, 360px);
    max-height: 78vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .clock-settings-modal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.clock-report-modal {
    width: min(92%, 380px);
}

.clock-settings-modal .modal-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clock-settings-note {
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
}

.clock-range-switch {
    display: flex;
    gap: 8px;
}

.clock-segment-btn {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 8px 0;
    background: #fff;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.clock-segment-btn.active {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.clock-report-summary {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f9fafb;
    color: #111827;
    font-size: 13px;
    line-height: 1.6;
}

.clock-chart-panel {
    min-height: 140px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eef0f3;
    padding: 12px;
}

.clock-bar-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clock-bar-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.clock-bar-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}

.clock-bar-row-label {
    color: #111827;
    font-weight: 500;
}

.clock-bar-row-value {
    color: #6b7280;
}

.clock-bar-track {
    height: 10px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.clock-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6c63ff, #4f46e5);
}

.clock-pie-layout {
    display: flex;
    align-items: center;
    gap: 14px;
}

.clock-pie-chart {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 50%;
}

.clock-pie-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clock-pie-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #374151;
}

.clock-pie-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.clock-pie-name {
    flex: 1;
}

.clock-report-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clock-report-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #eef0f3;
    background: #fff;
}

.clock-report-item-main {
    min-width: 0;
    flex: 1;
}

.clock-report-item-title {
    font-size: 13px;
    color: #111827;
    line-height: 1.5;
    word-break: break-word;
}

.clock-report-item-sub {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.clock-report-item-value {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.clock-empty-state {
    padding: 28px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
}

.clock-add-row {
    display: flex;
    gap: 8px;
}

.clock-inline-btn {
    flex-shrink: 0;
    padding-inline: 14px;
}

.clock-role-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clock-role-item {
    width: 100%;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.clock-role-item.active {
    border-color: #111827;
    background: #f9fafb;
}

.clock-role-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    grid-row: 1 / span 2;
}

.clock-role-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.clock-role-item-tag,
.clock-role-item-action {
    font-size: 11px;
    color: #6b7280;
}

.clock-role-item-action {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
}

.clock-wallpaper-grid {
    margin-top: 4px;
}

/* 自律钟 专注页面 */
#focus-session-page { 
    z-index: 1100; 
    background-size: cover; 
    background-position: center; 
    color: #fff; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    padding: 20px; 
}
.focus-timer-container { 
    position: relative; 
    width: 250px; 
    height: 250px; 
}
.focus-timer-container svg { 
    position: absolute; 
    top: 0; left: 0; 
    transform: rotate(-90deg); 
}
.timer-circle-bg { 
    stroke: rgba(255, 255, 255, 0.3); 
}
.timer-circle-progress { 
    stroke: #000; 
    transition: stroke-dashoffset 1s linear; 
}
.focus-time-display { 
    font-size: 56px; 
    font-weight: 300; 
    line-height: 250px; 
    z-index: 1; 
    position: relative; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.3); 
}
.focus-quote { 
    margin-top: 40px; 
    font-size: 16px; 
    font-style: italic; 
    opacity: 0.9; 
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); 
}
/* =================================
   6. 新增功能样式 (Emoji & T2I)
   ================================= */

/* --- 黑白简约弹窗通用样式 --- */
.dark-modal {
    background: #1c1c1e !important;
    color: #f2f2f7 !important;
}
.dark-modal .picker-header {
    border-bottom-color: #3a3a3c !important;
    color: #f2f2f7 !important;
}
.dark-modal .setting-card.dark {
    background: #2c2c2e;
    padding: 0 15px;
    margin: 15px;
}
.dark-modal .setting-card.dark .setting-row {
    border-bottom-color: #444;
}
.dark-modal .setting-card.dark label {
    color: #f2f2f7;
}
.dark-modal .input-clean, .dark-modal select.input-clean {
    color: #e5e5ea;
    background-color: transparent; /* For select */
}
.dark-modal select.input-clean option {
    background: #3a3a3c;
    color: #f2f2f7;
}

/* --- 表情包管理弹窗专属样式 --- */
.modal-tab-header {
    display: flex;
    padding: 0 15px;
    background: #2c2c2e;
}
.modal-tab-btn {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    color: #8e8e93;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.modal-tab-btn.active {
    color: #fff;
    border-bottom-color: #fff;
}
.modal-scroll-content {
    flex: 1;
    overflow-y: auto;
}
#emoji-display-area {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 15px;
}
#emoji-display-area p {
    grid-column: 1 / -1; /* 让提示文字占满整行 */
    text-align: center;
    color: #8e8e93;
}
.emoji-preview-item {
    width: 100%;
    height: 70px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    position: relative;
}
.emoji-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.emoji-delete-btn {
    position: absolute;
    top: -5px; right: -5px;
    width: 20px; height: 20px;
    background: #ff4757;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
}

/* --- 聊天气泡：表情和想象画廊卡片 --- */
.bubble.emoji {
    background: transparent;
    box-shadow: none;
    padding: 0;
    width: 100px;
    height: 100px;
}
.bubble.emoji img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bubble.image-card {
    background: transparent; /* 父容器背景透明 */
    width: 72px;  /* 再放大一点，细节更清晰 */
    height: 72px; /* 再放大一点，细节更清晰 */
    padding: 0;
    cursor: pointer;
    position: relative;
    display: inline-flex;        /* 和转账卡片一样，用 inline-flex 参与行内布局 */
    align-items: center;
    justify-content: center;
    margin-top: 0;         /* 顶部对齐头像 */
    margin-bottom: 0;      /* 避免自身额外垂直间距 */
    vertical-align: top;   /* 兜底：在其它上下文中仍然顶部对齐 */
    align-self: flex-start; /* 在 flex 容器（message-row）中也强制顶对齐头像 */
    font-size: 0;          /* 消除行内元素基线高度对齐导致的“下沉感” */
    line-height: 0;        /* 同上：让卡片完全按盒模型高度对齐 */
}

/* 内部真正执行 3D 翻转的容器，保证外层 bubble 的位置始终不变 */
.image-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.bubble.image-card.flipped .image-card-inner {
    transform: rotateY(180deg);
}
 
.image-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 16px; /* 卡片圆角 */
    overflow: hidden;
    display: flex;          /* 确保内容在卡片内部居中 */
    justify-content: center;
    align-items: center;
}
 
.image-card-front {
    background: #1c1c1e; /* 使用 iOS 风格的深灰色背景，比纯黑更有质感 */
    color: #fff;
    
    /* 图标部分 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3a9 9 0 0 0-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9-4.03-9-9-9zm-4.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm3-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm3 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px; /* 图标尺寸 */
}
 
.image-card-back {
    background: #f0f0f0;  /* 柔和的浅灰色背景 */
    color: #333;
    padding: 6px;
    font-size: 12px;
    line-height: 1.45;
    transform: rotateY(180deg); /* 背面先旋转 180 度，配合外层翻转显示 */
    text-align: left;
    word-break: break-word;
    overflow: hidden;
    align-items: stretch;
}
.image-card-back-scroll {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 4px 4px;
    font-size: 11px;
    line-height: 1.45;
    -webkit-overflow-scrolling: touch;
}
.image-card-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: #555;
    font-size: 12px;
    line-height: 18px;
    padding: 0;
    cursor: pointer;
    z-index: 2;
}
.image-card-close:active {
    transform: scale(0.96);
}

.moment-post-footer {
    border-top: 1px solid var(--neo-shadow-dark);
    padding-top: 10px;
    margin-top: 15px; 
}

.moment-likes-list {
    font-size: 14px;
    color: #4a5a8a;
    padding: 10px 15px;
    background: #e9eaf0;
    border-radius: 6px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.moment-likes-list .liker-name {
    font-weight: 600;
}

.moment-comments-section {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moment-comment-item {
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

.moment-comment-item .comment-author {
    font-weight: 600;
    color: #4a5a8a;
    cursor: pointer;
}

/* --- 评论区表单美化 --- */
.moment-comment-form {
    display: flex;
    gap: 10px; /* 输入框和按钮的间距 */
    margin-top: 15px;
    align-items: center;
}

.moment-comment-input {
    flex: 1;
    border: none;
    padding: 10px 15px; /* 调整内边距 */
    border-radius: 15px;
    font-size: 14px;
    outline: none;
    
    /* 白色拟态风格 */
    background: var(--neo-bg);
    color: var(--neo-text);
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light);
}
.moment-comment-input::placeholder {
    color: #999;
}

.moment-comment-submit {
    flex-shrink: 0; /* 防止按钮被压缩 */
    width: 40px;   /* 设置宽度 */
    height: 40px;  /* 设置高度 */
    border: none;
    border-radius: 12px; /* 圆角 */
    cursor: pointer;
    transition: 0.2s;
    
    /* 拟态风格 & 居中图标 */
    background: var(--neo-bg);
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

.moment-comment-submit:active {
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light);
}

.moment-comment-submit svg {
    width: 18px;
    height: 18px;
    color: var(--neo-text);
}
.game-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* --- 你画我猜 · 开局弹窗与主界面 --- */
.draw-guess-setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1500;
}

.draw-guess-setup-overlay.active {
    display: flex;
}

.draw-guess-setup-modal {
    width: 90%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    padding: 18px 18px 16px;
    box-sizing: border-box;
}

.draw-guess-setup-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.draw-guess-setup-section {
    margin-top: 10px;
}

.draw-guess-setup-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.draw-guess-player-count {
    display: inline-flex;
    gap: 8px;
}

.draw-guess-player-count .count-btn {
    min-width: 78px;
    border: 1px solid #d8ddf3;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
    color: #3b4675;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(95, 117, 196, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.draw-guess-player-count .count-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(95, 117, 196, 0.18);
}

.draw-guess-player-count .count-btn.active {
    border-color: #4f6df5;
    background: linear-gradient(135deg, #5d7bff 0%, #7c5cff 100%);
    color: #fff;
    box-shadow: 0 10px 22px rgba(92, 107, 255, 0.28);
}

.draw-guess-setup-hint,
.draw-guess-setup-subhint {
    margin-top: 6px;
    font-size: 12px;
    color: #888;
}

.draw-guess-role-columns {
    display: flex;
    gap: 12px;
}

.draw-guess-role-column {
    flex: 1;
}

.draw-guess-role-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.draw-guess-role-list {
    max-height: 210px;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 8px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #fafafa;
}

.draw-guess-role-empty {
    font-size: 12px;
    color: #999;
    text-align: center;
}

.draw-guess-role-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.draw-guess-role-item + .draw-guess-role-item {
    margin-top: 4px;
}

.draw-guess-role-item:hover {
    background: #f0f0f0;
}

.draw-guess-role-item.active {
    background: #111;
    color: #fff;
}

.draw-guess-role-item.active .draw-guess-role-desc {
    color: #ddd;
}

.draw-guess-role-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
}

.draw-guess-role-main {
    flex: 1;
}

.draw-guess-role-name {
    font-size: 13px;
    font-weight: 600;
}

.draw-guess-role-desc {
    font-size: 11px;
    color: #777;
}

.draw-guess-setup-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 主界面整体布局 */
.draw-guess-page {
    background: #f5f7ff;
    padding: 14px;
    box-sizing: border-box;
}

.draw-guess-container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.draw-guess-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.draw-guess-title-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.draw-guess-title {
    font-size: 18px;
    font-weight: 700;
}

.draw-guess-subtitle {
    font-size: 12px;
    color: #666;
}

.draw-guess-players {
    display: flex;
    gap: 10px;
    padding: 6px 2px 2px 2px;
    overflow-x: auto;
}

.draw-guess-player-item {
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.draw-guess-player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.draw-guess-player-name {
    font-size: 11px;
    max-width: 64px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.draw-guess-player-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #e0e4ff;
    color: #333;
}

.draw-guess-player-item.drawer .draw-guess-player-tag {
    background: #4b6fff;
    color: #fff;
}

.draw-guess-main {
    display: grid;
    grid-template-columns: 1.05fr 1.1fr;
    gap: 10px;
    align-items: stretch;
}

.draw-guess-canvas {
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.draw-guess-right-column {
    background: #ffffff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.draw-guess-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.draw-guess-hint-list {
    flex: 1;
    min-height: 120px;
    max-height: 210px;
    padding: 6px;
    border-radius: 10px;
    border: 1px dashed #d1d8ff;
    background: #f4f6ff;
    overflow-y: auto;
    font-size: 13px;
}

.draw-guess-placeholder {
    font-size: 12px;
    color: #777;
}

.draw-guess-hint-row {
    display: flex;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.7);
}

.draw-guess-hint-row.from-ai {
    background: #e5f1ff;
}

.draw-guess-hint-index {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

.draw-guess-hint-text {
    font-size: 13px;
    color: #333;
}

.draw-guess-status {
    font-size: 12px;
    color: #666;
    min-height: 16px;
}

.draw-guess-status.active {
    color: #4b6fff;
}

.draw-guess-guess-list {
    flex: 1;
    min-height: 80px;
    max-height: 120px;
    border-radius: 10px;
    border: 1px dashed #ddd;
    padding: 6px;
    overflow-y: auto;
    font-size: 13px;
}

.draw-guess-guess-row {
    display: flex;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    margin-bottom: 4px;
    background: #f8f8f8;
}

.draw-guess-guess-row.correct {
    background: #e3ffe7;
}

.draw-guess-guess-index {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

.draw-guess-guess-text {
    font-size: 13px;
    color: #333;
}

.draw-guess-input-group {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

#draw-guess-guess-input {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #d1d8ff;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}

#draw-guess-guess-input::placeholder {
    color: #999;
}

.draw-guess-drawer-panel {
    margin-top: 6px;
    display: none;
}

#draw-guess-hint-input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 6px 8px;
    font-size: 13px;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

.draw-guess-drawer-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.draw-guess-btn {
    border-radius: 999px;
    border: none;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    background: #f0f0f0;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.draw-guess-btn.primary {
    background: #4b6fff;
    color: #fff;
}

.draw-guess-btn.secondary {
    background: #ffffff;
    border: 1px solid #d1d8ff;
    color: #4b6fff;
}

.draw-guess-btn:active {
    opacity: 0.85;
}

.draw-guess-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

.draw-guess-round {
    font-size: 12px;
}

@media (max-width: 420px) {
    .draw-guess-main {
        grid-template-columns: 1fr;
    }
}

/* --- 真心话大冒险游戏界面（重构版） --- */
#truth-game-page {
    justify-content: center;
    align-items: center;
    padding: 16px;
    font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: #fff7e0; /* 暖黄色主背景 */
}

.truth-game-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #4a3210;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.truth-game-status {
    margin-top: 4px;
    margin-bottom: 2px;
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.truth-game-status.active {
    opacity: 1;
}

.truth-game-log-block {
    margin-bottom: 10px;
}

.truth-game-log-block:last-child {
    margin-bottom: 0;
}

/* 顶部玩家头像条 */
.truth-game-players {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px 4px 4px;
    overflow-x: auto;
    margin-bottom: 8px;
}

.truth-game-player-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 56px;
}

.truth-game-player-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0,0,0,0.15);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.truth-game-player-name {
    font-size: 11px;
    color: #6b4b20;
    max-width: 64px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 被淘汰玩家：头像变灰、略微透明 */
.truth-game-player-item.eliminated .truth-game-player-avatar {
    filter: grayscale(100%);
    opacity: 0.45;
}

.truth-game-player-item.eliminated .truth-game-player-name {
    color: #b8a58a;
}

.truth-game-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.truth-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    color: #4a3210;
}

.truth-game-main {
    background: #fff3cf;
    border-radius: 18px;
    border: 1px solid #f0d9a2;
    padding: 14px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 6px 16px rgba(171, 123, 33, 0.23);
}

.truth-game-mode {
    font-size: 13px;
    color: #b97a2d;
}

/* 日志区域：展示整局游戏的文字叙事 */
.truth-game-log {
    flex: 1;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px dashed #f0cf95;
    font-size: 14px;
    line-height: 1.6;
    color: #4a3210;
}

.truth-game-log p {
    margin: 0 0 6px 0;
}

.truth-game-log-placeholder {
    color: #c09b5a;
}

/* 底部输入栏 + 操作按钮 */
.truth-game-input-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.truth-game-input-bar input {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #e1c487;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    background: #fffdf6;
}

.truth-game-input-bar input::placeholder {
    color: #c8a670;
}

.truth-game-action-btn {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.truth-game-action-btn.primary {
    background: #ffb947;
    color: #3e2500;
}

.truth-game-action-btn.secondary {
    background: #fff;
    color: #a06a1e;
    border: 1px solid #f0cf95;
}

.truth-game-action-btn:active {
    opacity: 0.85;
}

/* 旧的按钮样式保留（备用，不再主用） */
.truth-game-buttons {
    display: flex;
    gap: 12px;
}

.truth-game-buttons button {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

#truth-game-truth-btn {
    background: #fff;
    color: #000;
}

#truth-game-dare-btn {
    background: #ff4757;
    color: #fff;
}

#truth-game-truth-btn:active,
#truth-game-dare-btn:active {
    opacity: 0.85;
}

/* --- 真心话大冒险 · 开局黑白弹窗 --- */
.truth-game-setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.truth-game-setup-overlay.active {
    display: flex;
}

.truth-game-setup-modal {
    width: 100%;
    max-width: 420px;
    margin: 0 18px;
    background: #fff3cf; /* 与游戏主卡片一致的暖黄色 */
    color: #4a3210;
    border-radius: 18px;
    border: 1px solid #f0d9a2;
    box-shadow: 0 8px 20px rgba(171, 123, 33, 0.35);
    padding: 16px 14px 14px 14px;
    font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.truth-game-setup-title {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.truth-game-setup-section {
    margin-bottom: 12px;
}

.truth-game-setup-label {
    font-size: 12px;
    color: #222;
    margin-bottom: 6px;
}

.truth-game-player-count {
    display: flex;
    gap: 8px;
}

.truth-game-player-count .count-btn {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #333;
    background: #fff;
    color: #111;
    padding: 6px 0;
    font-size: 12px;
    cursor: pointer;
}

.truth-game-player-count .count-btn.active {
    background: #111;
    color: #f5f5f5;
}

.truth-game-role-columns {
    display: flex;
    gap: 10px;
}

.truth-game-role-column {
    flex: 1;
    min-width: 0;
}

.truth-game-role-title {
    margin-bottom: 6px;
    font-size: 12px;
    color: #222;
}

@media (max-width: 420px) {
    .truth-game-role-columns {
        flex-direction: column;
    }
}

.truth-game-player-list {
    max-height: 210px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid #333;
    background: #fff;
    padding: 6px 4px;
}

.truth-game-role-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 12px;
    color: #777;
}

.truth-game-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 8px;
}

.truth-game-player-row + .truth-game-player-row {
    border-top: 1px solid #eee;
}

.truth-game-player-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #333;
}

.truth-game-player-row-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.truth-game-player-row-name {
    font-size: 13px;
}

.truth-game-player-row-desc {
    font-size: 11px;
    color: #666;
}

.truth-game-player-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.truth-game-setup-hint {
    margin-top: 4px;
    font-size: 11px;
    color: #555;
}

.truth-game-setup-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.setup-btn {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid #333;
    cursor: pointer;
    background: #fff;
}

.setup-btn.secondary {
    background: #f5f5f5;
    color: #111;
}

.setup-btn.primary {
    background: #111;
    color: #f5f5f5;
}

.setup-btn:active {
    opacity: 0.85;
}

/* --- 狼人杀 · 开局设置弹窗 --- */
.werewolf-setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.werewolf-setup-overlay.active {
    display: flex;
}

.werewolf-setup-modal {
    width: 100%;
    max-width: 420px;
    margin: 0 18px;
    background: #fff3cf;
    color: #4a3210;
    border-radius: 18px;
    border: 1px solid #f0d9a2;
    box-shadow: 0 8px 20px rgba(171, 123, 33, 0.35);
    padding: 16px 14px 14px 14px;
    font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.werewolf-setup-title {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.werewolf-setup-section {
    margin-bottom: 12px;
}

.werewolf-setup-label {
    font-size: 12px;
    color: #222;
    margin-bottom: 6px;
}

.werewolf-player-count {
    display: flex;
    gap: 8px;
}

.werewolf-player-count .count-btn {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #333;
    background: #fff;
    color: #111;
    padding: 6px 0;
    font-size: 12px;
    cursor: pointer;
}

.werewolf-player-count .count-btn.active {
    background: #111;
    color: #f5f5f5;
}

.werewolf-setup-hint,
.werewolf-setup-subhint {
    margin-top: 4px;
    font-size: 11px;
    color: #555;
}

.werewolf-role-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.werewolf-role-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.werewolf-role-row .werewolf-role-name {
    width: 70px;
    font-size: 13px;
}

.werewolf-role-row input[type="number"] {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #333;
    padding: 4px 6px;
    font-size: 13px;
    outline: none;
}

.werewolf-role-columns {
    display: flex;
    gap: 10px;
}

.werewolf-role-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.werewolf-role-title {
    font-size: 12px;
    color: #222;
}

.werewolf-role-list {
    max-height: 210px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid #333;
    background: #fff;
    padding: 6px 4px;
}

.werewolf-role-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 8px;
    cursor: pointer;
}

.werewolf-role-item + .werewolf-role-item {
    border-top: 1px solid #eee;
}

.werewolf-role-item.active {
    background: #111;
    color: #f5f5f5;
}

.werewolf-role-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #333;
}

.werewolf-role-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.werewolf-role-name {
    font-size: 13px;
}

.werewolf-role-desc {
    font-size: 11px;
    color: #666;
}

.werewolf-role-item.active .werewolf-role-desc {
    color: #ddd;
}

.werewolf-setup-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.werewolf-page {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fff7e0 0%, #ffefc1 100%);
    color: #4a3210;
    font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.werewolf-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.werewolf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(74, 50, 16, 0.10);
    background: rgba(255, 248, 227, 0.95);
}

.werewolf-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.werewolf-title {
    font-size: 16px;
    font-weight: 700;
}

.werewolf-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(74, 50, 16, 0.72);
}

.werewolf-phase {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: #4a3210;
    color: #fff7e0;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.werewolf-players {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px 6px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(74, 50, 16, 0.08);
    background: rgba(255, 252, 244, 0.9);
}

.werewolf-player-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.werewolf-player-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(74, 50, 16, 0.18);
    box-shadow: 0 3px 8px rgba(74, 50, 16, 0.14);
    background: #fff;
}

.werewolf-player-item.dead .werewolf-player-avatar {
    filter: grayscale(100%);
    opacity: 0.52;
}

.werewolf-player-name {
    max-width: 64px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.werewolf-player-tag {
    font-size: 10px;
    color: rgba(74, 50, 16, 0.72);
    text-align: center;
}

.werewolf-main {
    flex: 1;
    min-height: 0;
    padding: 10px 10px 6px;
    overflow-y: auto;
}

.werewolf-log {
    min-height: 100%;
    border-radius: 16px;
    border: 1px solid rgba(74, 50, 16, 0.10);
    background: rgba(255, 255, 255, 0.72);
    padding: 10px 11px;
    font-size: 13px;
    line-height: 1.6;
    color: #4a3210;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 10px 24px rgba(171, 123, 33, 0.12);
}

.werewolf-log-placeholder {
    margin: 0;
    font-size: 12px;
    color: rgba(74, 50, 16, 0.66);
}

.werewolf-log-block + .werewolf-log-block {
    margin-top: 10px;
}

.werewolf-log-block p {
    margin: 0 0 4px;
}

.werewolf-log-block p:last-child {
    margin-bottom: 0;
}

.werewolf-input-panel {
    padding: 8px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 248, 227, 0.96);
    border-top: 1px solid rgba(74, 50, 16, 0.08);
}

.werewolf-input-hint {
    font-size: 11px;
    color: rgba(74, 50, 16, 0.74);
}

.werewolf-input-row,
.werewolf-extra-row {
    display: flex;
    gap: 8px;
}

.werewolf-input-row input,
.werewolf-extra-row select {
    flex: 1;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid rgba(74, 50, 16, 0.18);
    background: #fffef9;
    padding: 9px 11px;
    font-size: 13px;
    outline: none;
}

.werewolf-action-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    background: #4a3210;
    color: #fff7e0;
    cursor: pointer;
}

.werewolf-action-btn.primary {
    background: #b97a2d;
    color: #fffdf8;
}

.werewolf-action-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* --- 飞行棋 · 通用布局 --- */
#flight-chess-page {
    display: flex;
    flex-direction: column;
    background: #fff7e0; /* 默认暖黄色背景 */
    font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* 情趣联机模式：整体偏粉色氛围 */
#flight-chess-page.couple-mode {
    background: radial-gradient(circle at top, #ffe7f3 0%, #ffe0f0 40%, #ffd3ea 100%);
}

.flight-chess-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 15px 10px 15px;
    font-size: 17px;
    font-weight: 600;
    color: #4a3210;
}

#flight-chess-page.couple-mode .flight-chess-header-title {
    color: #d53c8f;
}

.flight-chess-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4px 10px 12px 10px;
    gap: 8px;
}

.flight-chess-board-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flight-chess-board {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    padding: 12px;
    /* 叠加：中央圆形高光 + 棋盘格线 + 暖黄色底色 */
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0 16%, transparent 17%),
        linear-gradient(#f5d7a0 1px, transparent 1px),
        linear-gradient(90deg, #f5d7a0 1px, transparent 1px),
        radial-gradient(circle at 20% 20%, #fffdf6 0%, #ffe8bd 40%, #ffd48c 100%);
    background-size:
        auto,
        28px 28px,
        28px 28px,
        auto;
    background-position:
        center center,
        14px 14px,
        14px 14px,
        center;
    box-shadow: 0 10px 24px rgba(171, 123, 33, 0.25);
}

#flight-chess-page.couple-mode .flight-chess-board {
    /* 情趣联机模式：粉色系棋盘格 */
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.98) 0 16%, transparent 17%),
        linear-gradient(#ffc1dd 1px, transparent 1px),
        linear-gradient(90deg, #ffc1dd 1px, transparent 1px),
        radial-gradient(circle at 20% 20%, #fff7fd 0%, #ffd3eb 40%, #ffb4dd 100%);
    background-size:
        auto,
        28px 28px,
        28px 28px,
        auto;
    background-position:
        center center,
        14px 14px,
        14px 14px,
        center;
    box-shadow: 0 10px 26px rgba(213, 60, 143, 0.35);
}

.flight-chess-corner {
    position: absolute;
    width: 40%;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.flight-chess-corner-bottom-left {
    left: 6%;
    bottom: 6%;
}

.flight-chess-corner-top-left {
    left: 6%;
    top: 6%;
}

.flight-chess-corner-top-right {
    right: 6%;
    top: 6%;
}

.flight-chess-corner-bottom-right {
    right: 6%;
    bottom: 6%;
}

.flight-chess-corner-label {
    font-size: 11px;
    font-weight: 600;
    color: #4a3210;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

#flight-chess-page.couple-mode .flight-chess-corner-label {
    color: #c1267b;
}

.flight-chess-corner-pieces {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.flight-chess-piece {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.flight-chess-piece.active {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 3px 6px rgba(0, 0, 0, 0.28);
}

.flight-chess-piece-color-0 {
    background: #ff4d4f;
}

.flight-chess-piece-color-1 {
    background: #40a9ff;
}

.flight-chess-piece-color-2 {
    background: #73d13d;
}

.flight-chess-piece-color-3 {
    background: #faad14;
}

#flight-chess-page.couple-mode .flight-chess-piece-color-0 {
    background: #ff4b98;
}

#flight-chess-page.couple-mode .flight-chess-piece-color-1 {
    background: #ff85c0;
}

#flight-chess-page.couple-mode .flight-chess-piece-color-2 {
    background: #ffa39e;
}

#flight-chess-page.couple-mode .flight-chess-piece-color-3 {
    background: #ffd666;
}

.flight-chess-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.flight-chess-dice-btn {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    border: none;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#flight-chess-page.couple-mode .flight-chess-dice-btn {
    background: #fff0f7;
    box-shadow: 0 8px 18px rgba(213, 60, 143, 0.35);
}

.flight-chess-dice-face {
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

.flight-chess-dice-hint {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.55);
}

.flight-chess-bottom-panel {
    height: 34%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 6px 6px 6px;
}

#flight-chess-page.couple-mode .flight-chess-bottom-panel {
    background: rgba(255, 247, 252, 0.8);
    border-radius: 18px;
    padding: 4px 8px 8px 8px;
}

.flight-chess-player-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
}

.flight-chess-player-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
}

.flight-chess-player-item.current {
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.9);
}

#flight-chess-page.couple-mode .flight-chess-player-item.current {
    box-shadow: 0 0 0 2px rgba(255, 120, 180, 0.98);
}

.flight-chess-player-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.flight-chess-player-name {
    font-size: 12px;
    color: #4a3210;
}

#flight-chess-page.couple-mode .flight-chess-player-name {
    color: #c1267b;
}

.flight-chess-log {
    flex: 0 0 auto;
    margin-top: 4px;
    padding: 4px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    line-height: 1.5;
    color: #4a3210;
    overflow-y: auto;
    max-height: 86px;
}

#flight-chess-page.couple-mode .flight-chess-log {
    background: rgba(255, 255, 255, 0.96);
}

.flight-chess-log p {
    margin: 0 0 4px 0;
}

.flight-chess-log-placeholder {
    color: #c09b5a;
}

#flight-chess-page.couple-mode .flight-chess-log-placeholder {
    color: #d65fa4;
}

.flight-chess-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.flight-chess-status {
    flex: 1;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
}

#flight-chess-page.couple-mode .flight-chess-status {
    color: #c1267b;
}

.flight-chess-next-btn {
    border-radius: 999px;
    padding: 6px 14px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    background: #ffb947;
    color: #3e2500;
    cursor: pointer;
}

#flight-chess-page.couple-mode .flight-chess-next-btn {
    background: #ff85c0;
    color: #4a1033;
}

.flight-chess-next-btn:active {
    opacity: 0.85;
}

/* 飞行棋 · 模式选择弹窗 */
.flight-chess-setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.flight-chess-setup-overlay.active {
    display: flex;
}

.flight-chess-setup-modal {
    width: 100%;
    max-width: 420px;
    margin: 0 18px;
    background: #fff;
    border-radius: 18px;
    padding: 16px 14px 14px 14px;
    font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.flight-chess-role-columns {
    display: flex;
    gap: 10px;
}

.flight-chess-role-column {
    flex: 1;
    min-width: 0;
}

.flight-chess-role-title {
    margin-bottom: 6px;
    font-size: 12px;
    color: #222;
}

@media (max-width: 420px) {
    .flight-chess-role-columns {
        flex-direction: column;
    }
}

.flight-chess-setup-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.flight-chess-setup-section {
    margin-bottom: 12px;
}

.flight-chess-setup-label {
    font-size: 12px;
    color: #222;
    margin-bottom: 6px;
}

.flight-chess-mode-toggle {
    display: flex;
    gap: 8px;
}

.flight-chess-mode-toggle .mode-btn {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #333;
    background: #fff;
    color: #111;
    padding: 6px 0;
    font-size: 12px;
    cursor: pointer;
}

.flight-chess-mode-toggle .mode-btn.active {
    background: #111;
    color: #f5f5f5;
}

.flight-chess-mode-hint {
    margin-top: 4px;
    font-size: 11px;
    color: #555;
}

.flight-chess-friend-list {
    max-height: 210px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    padding: 6px 4px;
}

.flight-chess-role-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: 12px;
    color: #888;
}

.flight-chess-friend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: 8px;
}

.flight-chess-friend-row + .flight-chess-friend-row {
    border-top: 1px solid #f0f0f0;
}

.flight-chess-friend-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.flight-chess-friend-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.flight-chess-friend-name {
    font-size: 13px;
}

.flight-chess-friend-desc {
    font-size: 11px;
    color: #777;
}

.flight-chess-friend-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.flight-chess-setup-hint {
    margin-top: 4px;
    font-size: 11px;
    color: #555;
}

.flight-chess-player-count {
    display: flex;
    gap: 8px;
}

.flight-chess-player-count .count-btn {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #333;
    background: #fff;
    color: #111;
    padding: 6px 0;
    font-size: 12px;
    cursor: pointer;
}

.flight-chess-player-count .count-btn.active {
    background: #111;
    color: #f5f5f5;
}

.flight-chess-setup-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.bubble-nav-bar {
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    height: 65px;
    background: var(--neo-bg);
    box-shadow: 6px 6px 12px var(--neo-shadow-dark), -6px -6px 12px var(--neo-shadow-light);
    border-radius: 32.5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

.bubble-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #999;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
    width: 60px; /* 给个固定宽度，防止拥挤 */
}
.bubble-nav-item.active {
    color: var(--neo-text);
}
.bubble-nav-item svg {
    width: 24px;
    height: 24px;
}

/* --- 帖子卡片样式 (核心) --- */
.forum-post-item {
    background: var(--neo-bg);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 6px 6px 12px var(--neo-shadow-dark), -6px -6px 12px var(--neo-shadow-light);
}

.forum-delete-action {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.forum-delete-btn {
    border: 1px solid rgba(255, 107, 107, 0.18);
    background: linear-gradient(180deg, #fff8f8 0%, #ffecec 100%);
    color: #d94b4b;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(217, 75, 75, 0.10);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.forum-delete-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 6px rgba(217, 75, 75, 0.16);
}

.forum-post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.forum-author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #eee;
}
.forum-author-name {
    font-size: 15px;
    font-weight: bold;
    color: var(--neo-text);
}

.forum-post-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 15px;
}

.forum-post-stats {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-top: 1px solid var(--neo-shadow-dark);
    color: #777;
    font-size: 13px;
}
.stat-item {
    cursor: pointer;
}
.stat-item:active {
    color: #000;
}

.forum-comment-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--neo-shadow-dark);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.forum-comment-item {
    font-size: 13px;
}
.forum-comment-author {
    font-weight: bold;
    color: #4a5a8a;
}
.forum-comment-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.forum-comment-input {
    flex: 1;
    border: none;
    background: var(--neo-bg);
    padding: 8px 12px;
    border-radius: 15px;
    font-size: 13px;
    outline: none;
    box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light);
}

/* --- 悬浮发布按钮 (FAB) --- */
.floating-action-button {
    position: absolute;
    bottom: 95px; /* 放在导航栏上方 */
    right: 30px;
    /* 略微缩小主操作按钮尺寸，减轻存在感但保持易点中 */
    width: 48px;
    height: 48px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.28);
    cursor: pointer;
    z-index: 101; /* 确保在滚动内容之上 */
    transition: transform 0.2s ease-out;
}
.floating-action-button svg {
    width: 22px;
    height: 22px;
}
.floating-action-button:active {
    transform: scale(0.95);
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-row {
  /* 将动画应用到整个消息行上 */
  animation: fadeInUp 0.4s ease-out forwards;
}
.stat-item svg {
    width: 18px; /* 图标宽度 */
    height: 18px; /* 图标高度 */
    vertical-align: middle; /* 让图标和文字垂直居中对齐 */
    margin-right: 4px; /* 图标和数字之间的间距 */
    fill: #555; /* 图标的默认颜色 */
    transition: fill 0.2s; /* 颜色变化的过渡效果 */
}

.stat-item:hover svg {
    fill: #007bff; /* 鼠标悬停时的颜色 */
}

.stat-item:active svg {
    transform: scale(0.9); /* 点击时的缩小效果 */
}

.forum-comment-reply-tag {
    color: #888;
    background-color: #f0f0f0;
    padding: 1px 5px;
    border-radius: 4px;
    margin-right: 5px;
    font-size: 0.8em;
}

.phone-header {
    background-color: #f7f7f7; /* 一个清爽的浅灰色背景 */
    padding: 12px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #000;
    border-bottom: 1px solid #e5e5e5; /* 加上一条细细的底边线，增加质感 */
    position: relative; /* 为了以后可能增加的返回按钮等做准备 */
     overflow: hidden;   /* <-- 建议也添加这一行，可以防止抽屉的圆角在动画过程中露在外面 */
}

.forum-personal-actions {
    margin-top: 30px; /* 让按钮组和上面的信息卡片拉开距离 */
    background-color: #ffffff; /* 纯白背景 */
    border-radius: 10px; /* 圆角 */
    overflow: hidden; /* 隐藏超出圆角的部分 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* 添加一点微妙的阴影 */
}

.forum-personal-actions .action-button {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background-color: transparent; /* 按钮本身透明，依赖父容器背景 */
    border: none;
    border-bottom: 1px solid #f0f0f0; /* 每个按钮之间用细线隔开 */
    text-align: left;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    position: relative; /* 为了添加箭头 */
    transition: background-color 0.2s; /* 点击时有反馈效果 */
}

/* 最后一个按钮不需要底部分割线 */
.forum-personal-actions .action-button:last-child {
    border-bottom: none;
}

/* 鼠标悬停或点击时的反馈效果 */
.forum-personal-actions .action-button:hover,
.forum-personal-actions .action-button:active {
    background-color: #f5f5f5;
}

/* 在每个按钮右侧添加一个 > 箭头，增加可点击的暗示 */
.forum-personal-actions .action-button::after {
    content: '❯';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #cccccc;
    font-size: 18px;
    font-weight: 300;
}


#chat-bg-file,
#chat-bg-global-file {
    width: 100%;
    min-height: 44px;
    border: 1px dashed #d9dde6;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
    color: #4b5563;
    padding: 10px 12px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 18px rgba(15, 23, 42, 0.04);
}
#chat-bg-file::file-selector-button,
#chat-bg-global-file::file-selector-button {
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #ffffff;
    padding: 8px 12px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: 600;
}
#chat-css-input {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
    writing-mode: horizontal-tb;
    caret-color: #111827;
    font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
    line-height: 1.6;
}
#chat-bg-reset-row {
    display: flex;
    gap: 8px;
}
#chat-bg-reset-btn {
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%) !important;
    color: #374151;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
#chat-bg-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}
#chat-css-preset-list .btn-small,
#chat-appearance-modal .btn-small {
    border-radius: 12px;
}

#chat-default-appearance-modal .modal-content {
    width: min(92vw, 360px);
}

.chat-default-appearance-content {
    padding: 18px 16px 16px;
}

.chat-default-appearance-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 0 0;
}

.chat-default-appearance-note {
    font-size: 12px;
    line-height: 1.7;
    color: #6b7280;
    padding: 0 2px;
}

.chat-default-appearance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.chat-default-appearance-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-default-appearance-field > label {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}

.chat-default-appearance-tip {
    font-size: 11px;
    line-height: 1.6;
    color: #9ca3af;
}

.chat-default-appearance-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-default-appearance-range-row input[type="range"] {
    flex: 1;
}

.chat-default-appearance-range-row span {
    min-width: 52px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.chat-default-theme-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.chat-default-theme-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.chat-default-theme-card.active {
    border-color: #111827;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
    transform: translateY(-1px);
}

.chat-default-theme-name {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.chat-default-theme-preview {
    display: flex;
    gap: 8px;
}

.chat-default-theme-bubble {
    min-width: 42px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.chat-default-appearance-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.chat-default-appearance-actions .btn-small {
    flex: 1;
    padding: 10px 8px;
    border: none;
    border-radius: 12px;
}

.chat-default-appearance-reset-btn {
    background: #f3f4f6;
    color: #374151;
}

.chat-default-appearance-save-btn {
    background: #111827;
    color: #ffffff;
}

.forum-settings-page {
    position: absolute;
    inset: 0;
    z-index: 24;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f7f8fb 0%, #f2f4f8 100%);
}

.forum-settings-header-spacer {
    width: 38px;
    height: 38px;
}

.forum-settings-content {
    flex: 1;
    padding: 16px 16px 112px;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.forum-settings-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.forum-settings-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.forum-settings-card-desc {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
}

.forum-settings-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.forum-settings-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.forum-settings-field label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
}

.forum-settings-select,
.forum-settings-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid #d7dce5;
    background: #f9fafb;
    padding: 10px 12px;
    font-size: 13px;
    color: #111827;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.forum-settings-select:focus,
.forum-settings-input:focus {
    border-color: #4b6fff;
    box-shadow: 0 0 0 3px rgba(75, 111, 255, 0.12);
    background: #ffffff;
}

.forum-settings-input.is-disabled,
.forum-settings-input:disabled {
    color: #9ca3af;
    background: #f3f4f6;
    cursor: not-allowed;
}

.forum-settings-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(247, 248, 251, 0) 0%, rgba(247, 248, 251, 0.95) 18%, #f7f8fb 100%);
}

.forum-settings-save-btn {
    width: 100%;
    min-height: 48px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18);
    cursor: pointer;
}

.forum-settings-save-btn:active {
    transform: scale(0.985);
}

.forum-share-modal-card {
    border-radius: 24px 24px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.12);
}

.forum-share-modal-title {
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: #111827;
}

.forum-share-summary {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.forum-share-summary-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.5;
}

.forum-share-summary-meta,
.forum-share-hint {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
}

.forum-share-summary-text {
    font-size: 13px;
    color: #374151;
    line-height: 1.65;
    word-break: break-word;
}

.forum-share-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.forum-share-actions .btn-primary,
.forum-share-actions .drawer-button-cancel {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
}

.forum-share-actions .drawer-button-cancel {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
}

.forum-share-actions .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.forum-profile-sync-text {
    margin-top: 8px;
    font-size: 12px;
    color: #7b8190;
    line-height: 1.5;
}

.forum-sync-note {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
    border: 1px solid #eceff5;
    color: #697180;
    font-size: 13px;
    line-height: 1.7;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.forum-role-switch-modal-header {
    padding-left: 28px;
    font-size: 15px;
}

.forum-role-sync-note {
    margin: 0 16px 12px 26px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #f7f8fb;
    border: 1px solid #eceff5;
    color: #667085;
    font-size: 12px;
    line-height: 1.55;
}

.forum-role-sync-item {
    gap: 12px;
    cursor: pointer;
}

.forum-role-sync-item.active {
    background: linear-gradient(180deg, #fcfcfd 0%, #f5f7fb 100%);
}

.forum-role-sync-item .role-action-btn.switch {
    margin-left: auto;
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    padding: 7px 12px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

.forum-role-sync-item.active .role-action-btn.switch {
    background: #4f46e5;
    color: #ffffff;
}

.forum-role-sync-item .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.role-action-tag {
    margin-left: auto;
    margin-right: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    white-space: nowrap;
}
.list-item-edit-btn {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: #f0f0f0;
    color: #555;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}
.form-layout { display: flex; flex-direction: column; gap: 8px; }
.form-layout label { font-size: 14px; color: #666; margin-top: 8px; }
.form-input { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    font-size: 15px; 
    box-sizing: border-box;
}
.btn-danger { background-color: #e53935; color: white; }
.unread-badge {
    position: absolute;
    top: -5px;
    right: -12px;
    background-color: #e53935;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.dm-list-item {
    display: flex;
    padding: 15px;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    position: relative;
}
.dm-list-item:hover { background-color: #f9f9f9; }
.dm-list-item .avatar { width: 50px; height: 50px; }
.dm-list-item-content { flex-grow: 1; overflow: hidden; }
.dm-sender-name { font-weight: bold; font-size: 16px; }
.dm-message-preview { font-size: 14px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-unread-dot {
    width: 10px;
    height: 10px;
    background-color: #007bff;
    border-radius: 50%;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.dm-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    margin-bottom: 6px;
    max-width: 78%;
    word-wrap: break-word;
    line-height: 1.5;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.dm-bubble.other {
    background: #ffffff;
    align-self: flex-start;
    border-bottom-left-radius: 6px;
}
.dm-bubble.self {
    background: linear-gradient(135deg, #cfe8ff 0%, #95ccff 100%);
    color: #0f172a;
    align-self: flex-end;
    border-bottom-right-radius: 6px;
}

#forum-dm-page.active {
    display: flex !important;
}

.forum-dm-page {
    display: flex;
    flex-direction: column;
    background: #f7f8fa;
    min-height: 100%;
}

.forum-dm-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    box-sizing: border-box;
    background: rgba(247, 248, 250, 0.92);
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(14px);
}

.forum-dm-header .header-btn {
    position: static;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #111827;
    appearance: none;
    -webkit-appearance: none;
}

.forum-dm-header .header-btn.left {
    justify-self: start;
}

.forum-dm-header .header-btn.right {
    justify-self: end;
}

.forum-dm-header .header-btn::before,
.forum-dm-header .header-btn::after {
    display: none !important;
}

.forum-dm-header .header-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.forum-dm-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    justify-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-dm-generate-btn {
    border-radius: 0 !important;
    background: transparent !important;
    color: #111827;
    box-shadow: none !important;
    outline: none;
}

.forum-dm-generate-btn svg {
    width: 20px;
    height: 20px;
}

.forum-dm-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, #f3f7fc 0%, #eef3f9 100%);
    padding: 12px 12px 16px;
    box-sizing: border-box;
}

.forum-dm-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
}

#dm-chat-view,
.forum-dm-chat-view {
    min-height: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 8px 4px 14px;
}

.forum-dm-input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(241, 244, 249, 0.96);
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

.forum-dm-input-shell {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 14px;
    height: 42px;
    border-radius: 21px;
    background: #ffffff;
    border: 1px solid rgba(203, 213, 225, 0.92);
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
}

#dm-chat-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #0f172a;
}

#dm-chat-input::placeholder {
    color: #94a3b8;
}

.forum-dm-action-btn {
    border: none;
    min-width: 68px;
    height: 42px;
    padding: 0 16px;
    border-radius: 21px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18);
}

.forum-dm-action-btn:active {
    transform: translateY(1px) scale(0.98);
}

.forum-dm-ai-btn {
    background: #ffffff;
    color: #2563eb;
    border: 1px solid rgba(96, 165, 250, 0.45);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.forum-dm-send-btn {
    background: linear-gradient(135deg, #2ea7ff 0%, #1677ff 100%);
    color: #ffffff;
}

.forum-profile-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 这就是我们缺失的头像样式！ */
.forum-profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
    cursor: pointer; /* 增加手型光标，暗示可以点击 */
    transition: transform 0.2s;
}

.forum-profile-avatar:active {
    transform: scale(0.95); /* 点击反馈 */
}

.forum-profile-info {
    flex-grow: 1;
}

.forum-profile-card-compact {
    align-items: flex-start;
}

.forum-profile-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.forum-profile-stats {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    font-size: 14px;
    color: #555;
}

.forum-profile-forum-id-row {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.forum-profile-forum-id-label {
    font-size: 12px;
    color: #6b7280;
}

.forum-profile-forum-id-value {
    font-size: 14px;
    color: #111827;
}

.forum-id-edit-btn {
    margin-left: auto;
    min-width: 56px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.forum-role-sync-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.forum-role-id-preview {
    font-size: 12px;
    color: #7b8190;
}

/* 通用模态遮罩层（全局默认：用于论坛等） */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* 模态框容器（全局默认） */
.modal-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* --- 激活状态 --- */
.modal-overlay.active,
.modal-container.active {
    opacity: 1;
    visibility: visible;
}
.modal-container.active {
    transform: scale(1);
}

/* --- 自律钟待办弹窗专用覆写：避免依赖 .active 在 container 上 --- */
#todo-modal.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 1800;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

#todo-modal.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

#todo-modal .modal-container.clock-todo-modal {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 0.22s ease, transform 0.24s ease;
}

#todo-modal.modal-overlay.active .modal-container.clock-todo-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#todo-modal .modal-container.clock-todo-modal {
    position: relative;
    width: min(248px, calc(100vw - 44px));
    min-height: 226px;
    height: auto;
    border-radius: 20px;
    background: #ffffff;
    color: #333333;
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    padding: 18px 16px 14px;
    opacity: 0;
    visibility: visible;
    transform: translateY(10px) scale(0.96);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
#todo-modal .modal-header {
    padding: 0 0 10px 0;
    font-size: 17px;
    font-weight: 600;
}

#todo-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    flex: 1;
}

#todo-modal .modal-field {
    display: block;
    width: 100%;
}

#todo-modal .modal-field-label {
    display: block;
    font-size: 13px;
    color: #666666;
    margin-bottom: 6px;
    line-height: 1.2;
}

#todo-modal .modal-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
}

#todo-modal .modal-input:focus {
    border-color: #000000;
}

#todo-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#todo-modal .modal-btn {
    min-width: 72px;
    padding: 6px 10px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

#todo-modal .modal-btn.primary {
    background: #000000;
    color: #ffffff;
}

.modal-body {
    padding: 20px;
}
.modal-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.modal-item:last-child {
    border-bottom: none;
}
.modal-item:active {
    background-color: #f5f5f5;
}

/* --- 抽屉内部内容样式 (可选，但建议添加) --- */
.drawer-header {
    padding: 16px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}

.drawer-content {
    padding: 16px;
}

.drawer-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 16px;
}

.drawer-item:active {
    background-color: #e9e9e9;
}

.drawer-button-cancel {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #d0d0d0;
    transition: opacity 0.2s;
}

/* ================================
   无限流 App · 暗色血线风格
   ================================ */

.infinite-page {
    background: radial-gradient(circle at top, #2b0f16 0, #06040a 55%, #000000 100%);
    color: #f5f5f5;
    display: flex;
    flex-direction: column;
    padding: 12px 10px 10px;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.infinite-nav-header {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
}

.infinite-nav-header .nav-title {
    justify-self: center;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #fefefe;
}

.infinite-header-actions {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.infinite-header-actions .infinite-hero-sword-btn {
    position: static;
    width: 38px;
    height: 38px;
}

.infinite-header-actions .infinite-hero-shield-btn {
    background: radial-gradient(circle at 30% 0%, #8ee0ff, #255f9f 70%, #071323 100%);
    box-shadow: 0 10px 24px rgba(90, 165, 255, 0.35);
}

#infinite-page .infinite-nav-header > .nav-btn {
    justify-content: center;
    color: #fff;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#infinite-page .infinite-nav-header > .nav-btn:active {
    transform: translateY(1px) scale(0.98);
    background: rgba(255, 255, 255, 0.16);
}

.infinite-nav-status {
    font-size: 11px;
    color: #f97373;
    max-width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infinite-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    touch-action: pan-y;
}

.infinite-hero {
    position: relative;
    padding: 14px 12px 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 10% 0%, rgba(255, 0, 76, 0.28), transparent 55%),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.12), transparent 50%),
        linear-gradient(135deg, #14040a, #260814 45%, #12040a 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.02),
        0 18px 38px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}

.infinite-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 4px
        );
    mix-blend-mode: screen;
    opacity: 0.7;
}

.infinite-task-card-reward {
    margin-top: 6px;
    color: #ffd89b;
    font-size: 12px;
    font-weight: 600;
}

.infinite-task-card-tag {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    color: #ffd4ff;
    border: 1px solid rgba(255, 180, 255, 0.24);
    background: rgba(255, 180, 255, 0.08);
}

.infinite-hero-title,
.infinite-hero-sub,
.infinite-hero-status {
    position: relative;
    z-index: 1;
}

.infinite-hero-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #ffe3e3;
    margin-bottom: 4px;
}

.infinite-hero-sub {
    font-size: 12px;
    line-height: 1.5;
    color: #f4c7c7;
    max-width: 80%;
}

.infinite-hero-status {
    margin-top: 10px;
    color: #ffb4b4;
}

.infinite-hero-sword-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: radial-gradient(circle at 30% 0%, #ff7b89, #7f1228 70%, #12040a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(255, 0, 102, 0.45);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.infinite-hero-sword-btn .sword-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
}

.infinite-hero-sword-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 4px 12px rgba(255, 0, 102, 0.35);
}

.infinite-hero-sword-btn.disabled,
.infinite-hero-sword-btn:disabled {
    opacity: 0.35;
    cursor: default;
    filter: grayscale(80%);
    box-shadow: none;
}

.infinite-hero-sword-btn.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.infinite-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: radial-gradient(circle at top, #12030a 0, #050309 60%, #020104 100%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.9);
    padding: 10px 10px calc(100px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

.infinite-section {
    display: none;
    flex: 1;
    min-height: 0;
}

.infinite-section.active {
    display: block;
    min-height: 0;
}

.infinite-empty-hint {
    font-size: 13px;
    color: #b78b8b;
    padding: 16px 8px;
    text-align: center;
}

.infinite-sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.infinite-sub-title {
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #f7d4d4;
}

.infinite-dungeon-list,
.infinite-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.infinite-dungeon-item {
    width: 100%;
    text-align: left;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 10px 8px;
    background: radial-gradient(circle at 0 0, rgba(255, 0, 76, 0.12), transparent 60%),
                linear-gradient(135deg, rgba(9, 9, 11, 0.96), rgba(10, 10, 15, 0.98));
    color: #f5f5f5;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
}

.infinite-dungeon-item:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

.infinite-dungeon-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

.infinite-dungeon-title {
    font-size: 14px;
    font-weight: 600;
}

.infinite-dungeon-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 148, 148, 0.6);
    color: #ffb4b4;
}

.infinite-dungeon-danger {
    font-size: 12px;
    color: #ff9b9b;
    margin-bottom: 4px;
}

.infinite-dungeon-entry {
    font-size: 12px;
    color: #f3e0e0;
    margin-bottom: 6px;
}

.infinite-dungeon-meta {
    font-size: 11px;
    color: #d2b5b5;
}

.infinite-dungeon-reward {
    color: #ffeb99;
    font-weight: 600;
}

.infinite-task-card {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px;
    background: linear-gradient(135deg, rgba(15, 11, 18, 0.96), rgba(10, 7, 12, 0.98));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}

.infinite-task-list .infinite-task-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.infinite-task-card-main {
    flex: 1;
    min-width: 0;
}

.infinite-task-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    min-width: 74px;
}

.infinite-task-action-btn {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 5px 10px;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.infinite-task-action-btn.primary {
    background: linear-gradient(135deg, #ff6f90, #7f1633);
}

.infinite-task-action-btn.danger {
    background: linear-gradient(135deg, #8b8b96, #454553);
}

.infinite-task-action-btn:active {
    transform: translateY(1px) scale(0.98);
}

.infinite-task-action-btn:disabled {
    opacity: 0.42;
    cursor: default;
    filter: grayscale(72%);
}

.infinite-task-card-title {
    color: #ffe3e3;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.infinite-task-card-desc {
    color: #d8bcbc;
    font-size: 12px;
    line-height: 1.55;
}

.infinite-dungeon-session {
    margin-top: 6px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    padding: 10px;
    font-size: 12px;
    color: #f0dede;
    min-height: 48px;
}

.infinite-profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0 10px;
}

.infinite-profile-main {
    flex: 1;
}

.infinite-profile-name {
    font-size: 15px;
    font-weight: 600;
    color: #ffe3e3;
}

.infinite-profile-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #f5c2c2;
}

.infinite-role-attrs-line {
    margin-top: 2px;
    font-size: 11px;
    color: #e0bebe;
}

#infinite-page .btn-small {
    margin-left: 0;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
    color: #f0dede;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

#infinite-page .btn-small.primary {
    border-color: rgba(255, 173, 192, 0.55);
    background: linear-gradient(135deg, #ff5f86, #851939);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(255, 76, 123, 0.35);
}

#infinite-page .btn-small.secondary,
#infinite-page .btn-small:not(.primary) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
    color: #edd7d7;
}

#infinite-page .btn-small:active {
    transform: translateY(1px) scale(0.98);
}

#infinite-page .btn-small:disabled {
    opacity: 0.45;
    cursor: default;
    filter: grayscale(72%);
    box-shadow: none;
}

#infinite-bind-role-btn {
    white-space: nowrap;
    padding-left: 14px;
    padding-right: 14px;
}

.infinite-points-row {
    margin: 2px 0 8px;
    font-size: 12px;
    color: #f5dede;
}

.infinite-points-label {
    opacity: 0.8;
}

.infinite-points-value {
    font-weight: 600;
    color: #ffeb99;
}

.infinite-shop-section,
.infinite-inventory-section {
    margin-top: 4px;
}

.infinite-shop-header,
.infinite-inventory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
    color: #f6d7d7;
}

.infinite-shop-list,
.infinite-inventory-list {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 6px;
    font-size: 12px;
    color: #e6c7c7;
    min-height: 40px;
}

.infinite-tab-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: radial-gradient(circle at top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.98));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.infinite-tab-btn {
    flex: 1;
    border-radius: 999px;
    border: none;
    padding: 6px 6px;
    font-size: 11px;
    color: #d6c1c1;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.infinite-tab-btn-icon {
    font-size: 15px;
}

.infinite-tab-btn-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.infinite-tab-btn.active {
    background: radial-gradient(circle at top, #ff4b6e, #7f1d33);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
}

/* 无限流弹层基础占位：默认彻底隐藏，避免未样式化内容泄漏到其他页面 */
.infinite-modal-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 300;
}

#infinite-page .infinite-empty-hint label input[type="checkbox"] {
    accent-color: #ff6b84;
}

.infinite-modal-overlay.active {
    display: flex;
}

.infinite-modal {
    width: 100%;
    max-width: 320px;
    max-height: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, #14040a, #09050b 100%);
    color: #f8eaea;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

.infinite-modal-header,
.infinite-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}

.infinite-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.infinite-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: #ffe3e3;
}

.infinite-modal-close {
    border: none;
    background: transparent;
    color: #f7d4d4;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.infinite-modal-body,
.infinite-dungeon-run-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
}

.infinite-team-section + .infinite-team-section {
    margin-top: 14px;
}

.infinite-team-title {
    margin-bottom: 8px;
    font-size: 12px;
    color: #ffb4b4;
    letter-spacing: 0.08em;
}

.infinite-team-list {
    min-height: 44px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    padding: 10px;
    color: #cfaeae;
    font-size: 12px;
}

.infinite-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: flex-end;
}

.infinite-modal.dungeon-run {
    max-width: 100%;
    height: calc(100% - 32px);
}

.infinite-dungeon-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.infinite-dungeon-progress-label {
    font-size: 12px;
    color: #ffd8e9;
    letter-spacing: 0.08em;
}

.infinite-dungeon-progress-value {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.08em;
    background: linear-gradient(90deg, #ff73d4 0%, #cc78ff 50%, #ffb5f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 12px rgba(255, 115, 212, 0.32);
}

.infinite-dungeon-progress-bar {
    width: 100%;
    height: 11px;
    border-radius: 999px;
    background: rgba(18, 8, 24, 0.92);
    border: 1px solid rgba(255, 184, 227, 0.35);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.55);
}

.infinite-dungeon-progress-inner {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #ff64c5 0%, #c04dff 48%, #ffc7f6 100%);
    box-shadow: 0 0 14px rgba(255, 100, 197, 0.55);
    transition: width 220ms ease;
}

.infinite-run-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.infinite-run-side-card {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
}

.infinite-run-side-title {
    font-size: 11px;
    color: #ffb9d7;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.infinite-run-side-content {
    font-size: 12px;
    color: #f3e0e0;
    line-height: 1.6;
}

.infinite-run-side-line + .infinite-run-side-line {
    margin-top: 4px;
}

.infinite-dungeon-log {
    min-height: 120px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px;
    color: #f3e0e0;
    background: rgba(255, 255, 255, 0.03);
}

.infinite-dungeon-input-wrap {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.infinite-shop-card {
    padding: 10px 8px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.infinite-shop-card-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}

.infinite-shop-card-name {
    color: #ffe3e3;
    font-weight: 600;
}

.infinite-shop-card-tag {
    color: #ffb4b4;
    font-size: 11px;
}

.infinite-shop-card-desc {
    color: #d9bcbc;
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.55;
}

.infinite-shop-card-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.infinite-shop-card-price {
    color: #ffeb99;
    font-size: 11px;
}

.infinite-shop-buy-btn {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(135deg, #ff6a9f, #8a1f56);
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
}

.infinite-inventory-entry {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.infinite-inventory-entry:last-child {
    border-bottom: none;
}

.infinite-inventory-entry-name {
    color: #ffe3e3;
    font-size: 12px;
    font-weight: 600;
}

.infinite-inventory-entry-meta {
    color: #d8bcbc;
    font-size: 11px;
}

.infinite-shop-confirm-modal,
.infinite-task-confirm-modal {
    max-width: 300px;
}

.infinite-team-matching-modal {
    max-width: 280px;
}

.infinite-team-matching-modal .infinite-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    text-align: center;
}

@media (max-width: 380px) {
    .infinite-run-panel-grid {
        grid-template-columns: 1fr;
    }
}

.infinite-dungeon-input-wrap textarea {
    width: 100%;
    min-height: 76px;
    resize: none;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    box-sizing: border-box;
}

.infinite-dungeon-input-wrap button {
    align-self: flex-end;
}


html, body {
    position: fixed;   /* !!关键!! 重新启用 fixed 来彻底禁止拖动和回弹 */
    width: 100%;
    height: 100%;
    overflow: hidden;  /* 再次确认禁止滚动 */
    margin: 0;
    padding: 0;
    background-color: #ffffff !important; /* !!关键!! 强制指定白色背景，解决灰色问题 */
}


.screen {
    position: relative;
    width: 100%; /* 或者你的固定宽度 */
    height: 100%; /* 或者你的固定高度 */
    background-color: var(--neo-bg, #f0f2f5);
    display: flex; /* 使用 flex 布局来管理内部的 app 页面 */
    flex-direction: column;
    overflow: hidden; /* !!关键!! .screen 本身不滚动 */
}

.btn-primary, .btn-danger {
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    text-align: center;
    background-color: #000000;
    color: #ffffff;
}

.music-search-section {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: #f7f7f7;
    border: 1px dashed #ddd;
}

.music-search-list {
    margin-top: 6px;
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.music-search-item {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    background-color: #fff;
    border: 1px solid #eee;
    cursor: pointer;
}

.music-search-item:hover {
    border-color: #000;
}

/* 一起听：底部迷你播放器条 */
#music-player-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 54px; /* 刚好在输入栏上方 */
    margin: 0 10px 6px 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background-color: rgba(0,0,0,0.06);
    display: none;
    align-items: center;
    gap: 8px;
}

#music-player-bar .music-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

#music-player-meta {
    flex: 1;
    min-width: 0;
}

#music-player-title {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#music-player-artist {
    font-size: 11px;
    color: #777;
    margin-top: 2px;
}

#music-player-progress-track {
    margin-top: 6px;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background-color: rgba(0,0,0,0.08);
    overflow: hidden;
}

#music-player-progress {
    width: 0;
    height: 100%;
    background-color: #111;
    transition: width 0.6s ease-out;
}

#music-player-close-btn {
    border: none;
    background: none;
    padding: 4px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

/* 聊天气泡：音乐与外卖样式 */
.bubble.music {
    max-width: 76%;
    padding: 8px 10px;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
}

.music-main-line {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.music-sub-line {
    font-size: 11px;
    color: #777;
}

.music-lyric-snippet {
    margin-top: 6px;
    font-size: 11px;
    color: #555;
    border-left: 2px solid #ccc;
    padding-left: 6px;
}

.bubble.takeout {
    max-width: 76%;
    padding: 8px 10px;
    border-radius: 12px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
}

.takeout-main-line {
    font-size: 13px;
    font-weight: 600;
}

.takeout-items {
    margin-top: 4px;
    font-size: 11px;
    color: #555;
}

.takeout-direction {
    margin-top: 4px;
    font-size: 11px;
    color: #888;
}
/* 私信输入区按钮颜色已统一交由 forum-dm-action-btn 控制 */
.dm-list-item-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

.dm-list-item-actions {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.dm-list-item-actions .delete-btn {
    background-color: #e53935;
    color: white;
    border: none;
    height: 100%;
    padding: 0 25px;
    font-size: 15px;
    cursor: pointer;
}

.dm-list-item-content {
    position: relative;
    background-color: #fff;
    display: flex;
    padding: 15px;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.dm-list-item-content.swiped {
    transform: translateX(-90px); /* 滑动距离，和删除按钮宽度相关 */
}

/* 之前dm-list-item的样式现在给content */
.dm-list-item-content .avatar { width: 50px; height: 50px; }
.dm-list-content-text { flex-grow: 1; overflow: hidden; }
.stat-item.liked svg {
    fill: #e53935; /* 变成红色 */
    stroke: #e53935; /* 边框也变红 */
}
.btn-text-black {
    background: none;
    border: none;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    padding: 8px;
    cursor: pointer;
}

/* 拉取模型按钮的样式 */
.btn-fetch-models {
    background: #e0e0e0;
    border: none;
    color: #333;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* 全宽黑色按钮新样式 */
.btn-setting-action {
    display: block;
    width: 100%;
    background-color: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px; /* 较大的内边距，适合全宽 */
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* ✅ 新增：“紧凑版”按钮的样式 */
.btn-setting-action.compact {
    display: inline-block; /* 改为行内块，宽度由内容决定 */
    width: auto;          /* 宽度自动 */
    padding: 8px 16px;    /* 减小垂直内边距，让按钮变矮 */
    font-size: 14px;      /* 可以适当减小字体 */
}
/* --- 温度滑块样式 --- */
.slider-row {
    align-items: center;
}
.slider-value {
    font-weight: 500;
    color: #007bff;
    min-width: 30px;
    text-align: right;
}
.temp-slider {
    /* 为 WebKit 浏览器（Chrome, Safari）添加 */
    -webkit-appearance: none;
    /* 为 Firefox 添加 */
    -moz-appearance: none; /* 建议也为火狐浏览器添加 */
    /* 标准属性，这会让VSCode的警告消失 */
    appearance: none;
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    outline: none;
    margin: 0 10px;
}
/* 滑块的圆点 (Thumb) */
.temp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.temp-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.slider-row {
    align-items: center;
}
.slider-value {
    font-weight: 500;
    color: #555; /* 改为和输入框一样的颜色 */
    min-width: 30px;
    text-align: right;
    font-size: 14px;
}
.temp-slider {
     /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    outline: none;
    margin: 0 10px;
}
.temp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* 标准属性 */
    appearance: none;
    width: 18px;
    height: 18px;
    background: #555;
    border-radius: 50%;
    cursor: pointer;
}

.temp-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #555;
    border-radius: 50%;
    cursor: pointer;
}
.btn-gen {
    position: relative;
}

.btn-gen.loading svg {
    opacity: 1;
}

.btn-gen.loading::after {
    content: none;
    animation: none;
}
#message-action-modal .modal-content {
    padding: 8px 0; /* 上下留白 */
    width: 200px; /* 固定宽度 */
    max-width: 80%;
}
#message-action-modal .modal-item {
    justify-content: center; /* 居中显示 */
    padding: 14px;
    font-weight: 500;
}
.modal-item-separator {
    height: 8px;
    background-color: #f0f2f5;
    margin: 8px 0;
}
/* 禁用按钮的样式 */
.modal-item.disabled {
    color: #bbb;
    pointer-events: none;
    cursor: not-allowed;
}

/* 撤回消息提示的样式 */
.recalled-message-placeholder {
    text-align: center;
    margin: 10px 0;
    font-size: 12px;
    color: #aaa;
}

/* AI 撤回的消息，可以点击 */
.recalled-message-placeholder.clickable {
    cursor: pointer;
    text-decoration: underline;
}
.bubble.voice {
    cursor: pointer;
    /* 让语音消息变成一条细长的纵向布局：上方是语音条，下方是文本 */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 70%;
    padding: 6px 10px;
    border-radius: 20px;
}

/* 播放器内部的布局 */
.bubble.voice .voice-player {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bubble.voice .voice-icon {
    font-size: 16px;
    line-height: 1;
}

/* 模拟的语音条 */
.bubble.voice .voice-bar {
    /* 宽度现在完全由JS的内联style控制，这里不再需要任何宽度设置 */
    height: 1.5px;
    background-color: currentColor;
    opacity: 0.6;
}


/* 时长文本 */
.bubble.voice .voice-duration {
    font-size: 14px;
    opacity: 0.8;
    white-space: nowrap;
}

/* 展开的文本 */
.bubble.voice .voice-text {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    line-height: 1.4;
}
.bubble.transfer {
    background-color: #F9A825;
    color: white;
    width: auto;
    /* 使用列方向的 inline-flex，让底部“聊天转账”等文案固定在卡片底部 */
    display: inline-flex;
    flex-direction: column;
    min-width: 150px; /* 整体缩小卡片尺寸 */
    max-width: 200px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background-color 0.3s ease;
}

/* 根据不同状态改变背景色 */
.bubble.transfer.accepted { background-color: #f0f0f0; color: #888; }
.bubble.transfer.rejected { background-color: #e0e0e0; color: #999; }

/* 移除AI或ME气泡默认的边框或背景 */
.bubble.transfer.ai, .bubble.transfer.me { border: none; }
.bubble.transfer.accepted.ai, .bubble.transfer.rejected.ai { background-color: #f0f0f0; }
.bubble.transfer.accepted.me, .bubble.transfer.rejected.me { background-color: #e9e9e9; }

.transfer-content {
    padding: 10px 14px; /* 减小内边距 */
    display: flex;
    align-items: center;
    gap: 10px; /* 减小图标和文字的间距 */
}
.transfer-icon {
    font-size: 26px; /* 减小图标尺寸 */
    line-height: 1;
}
.transfer-details { display: flex; flex-direction: column; }
.transfer-amount {
    font-size: 18px; /* 减小金额字体 */
    font-weight: 500;
}
.transfer-remark {
    font-size: 12px; /* 减小留言字体 */
    opacity: 0.9;
    margin-top: 1px;
}
.transfer-footer {
    color: #fff;
    background-color: rgba(0,0,0,0.05);
    font-size: 12px;
    padding: 4px 14px;
}
.bubble.transfer.accepted .transfer-footer,
.bubble.transfer.rejected .transfer-footer {
    color: #999;
    background-color: transparent;
    border-top: 1px solid #e5e5e5;
}
.bubble.location {
    display: flex;
    align-items: center;
    gap: 10px; /* 图标和文字之间的间距 */
    width: auto; /* 【核心】宽度由内容决定 */
    max-width: 230px; /* 限制一个最大宽度 */
    padding: 10px 14px; /* 稍微减小内边距 */
    cursor: pointer;
}

/* AI和我的气泡样式，只负责背景和边框 */
.bubble.location.ai {
    background-color: #fff;
    border: 1px solid #eee;
}
.bubble.location.me {
    background-color: var(--bubble-me-bg, #ecefe9);
}

/* 位置图标的样式 */
.location-icon {
    font-size: 22px;
    line-height: 1;
}

/* 文本细节部分的容器 */
.location-details {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止长文本溢出 */
}

/* 地名文本 */
.location-place {
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

/* “共享位置”的副标题 */
.location-subtitle {
    font-size: 12px;
    color: #888;
}

/* 确保在我发出的绿色气泡里，文字颜色也清晰可见 */
.bubble.location.me .location-place,
.bubble.location.me .location-subtitle {
    color: #333;
}
.drawer-footer {
    flex-shrink: 0;
    display: flex;
    gap: 15px;
    padding: 15px 20px;
    border-top: 1px solid #e5e5e5;
    background-color: #f7f7f7;
}
.drawer-footer button {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-weight: bold;
    font-size: 16px;
    background: #e9e9eb;
    color: #000;
    cursor: pointer;
}
.drawer-footer button.primary {
    background: #007aff;
    color: #fff;
}

/* 统一设置标签样式 */
.setting-card .setting-label {
    font-weight: bold;
    color: #000;
}
/* 子设置行的标签 */
.setting-card .sub-row label {
    font-weight: normal;
    color: #333;
    padding-left: 15px;
}

/* 折叠容器统一样式 */
.collapse-container {
    max-height: 0;
    overflow: hidden; /* ‼️ 关键：确保内容被裁剪，解决“折叠不完全”问题 */
    transition: max-height 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.collapse-icon-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #c7c7cc;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
    cursor: pointer;
}
.collapse-container.open ~ .collapse-icon-btn {
    transform: rotate(-90deg);
}

/* 统一小号开关样式（时间感知 + 聊天备注名显示） */
.rocker-switch {
    position: relative;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    flex-shrink: 0;
    line-height: 0;
}
.rocker-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}
.rocker-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ebedf2 0%, #dfe3ea 100%);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: background 0.26s ease, box-shadow 0.26s ease;
}
.rocker-slider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef1f4;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.18);
    transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.rocker-switch input:checked + .rocker-slider {
    background: linear-gradient(135deg, #111827 0%, #2f3645 100%);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.08), 0 4px 10px rgba(17, 24, 39, 0.12);
}
.rocker-switch input:checked + .rocker-slider::before {
    left: calc(100% - 24px);
}

.setting-row .rocker-switch {
    margin-left: auto;
}
.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* 头像和按钮的间距 */
    margin-bottom: 25px;
}
.avatar-manage-btn {
    min-width: 104px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 16px rgba(17, 24, 39, 0.18);
}
.avatar-manage-btn:active {
    transform: translateY(1px) scale(0.98);
}
.avatar-manage-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.gallery-manage-btn {
    background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
}
.ai-role-gallery-modal-card {
    width: min(92vw, 560px);
    height: min(82vh, 720px);
    display: flex;
    flex-direction: column;
    color: #f8fafc;
}
.ai-role-gallery-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}
.ai-role-gallery-count {
    margin-left: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.ai-role-gallery-settings {
    margin: 0 16px 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-role-gallery-switch-row,
.ai-role-gallery-probability-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.ai-role-gallery-switch-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #60a5fa;
}
.ai-role-gallery-settings input[type="range"] {
    width: 100%;
    accent-color: #60a5fa;
}
.ai-role-gallery-hint {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}
.ai-role-gallery-scroll {
    flex: 1;
    min-height: 0;
    padding: 0 16px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-content: start;
}
.ai-role-gallery-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-role-gallery-preview-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    aspect-ratio: 1 / 1;
}
.ai-role-gallery-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ai-role-gallery-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 18px;
    line-height: 28px;
    padding: 0;
    cursor: pointer;
}
.ai-role-gallery-input,
.ai-role-gallery-textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    border-radius: 14px;
    padding: 11px 12px;
    font-size: 13px;
}
.ai-role-gallery-input::placeholder,
.ai-role-gallery-textarea::placeholder {
    color: rgba(255, 255, 255, 0.38);
}
.ai-role-gallery-textarea {
    min-height: 84px;
    resize: vertical;
    line-height: 1.6;
}
.ai-role-gallery-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
}
.ai-role-gallery-toggle input {
    accent-color: #60a5fa;
}
.ai-role-gallery-empty {
    border-radius: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.7;
}
.ai-role-gallery-actions {
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 12px;
}
.ai-role-gallery-actions > button {
    flex: 1;
}
.data-cleanup-modal-card {
    width: min(92vw, 560px);
    height: min(80vh, 700px);
    display: flex;
    flex-direction: column;
    color: #f8fafc;
}
.data-cleanup-summary-card {
    margin: 0 16px 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.data-cleanup-total {
    font-size: 14px;
    line-height: 1.6;
}
.data-cleanup-total strong {
    font-size: 18px;
}
.data-cleanup-subline {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}
.data-cleanup-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px 12px;
}
.data-cleanup-scroll {
    flex: 1;
    min-height: 0;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.data-cleanup-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.data-cleanup-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #60a5fa;
    flex: 0 0 auto;
}
.data-cleanup-item-main {
    flex: 1;
    min-width: 0;
}
.data-cleanup-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.data-cleanup-item-key {
    font-size: 13px;
    font-weight: 700;
    word-break: break-all;
    color: #fff;
}
.data-cleanup-item-size {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.86);
    white-space: nowrap;
}
.data-cleanup-item-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
}
.data-cleanup-item-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.data-cleanup-item.suggested .data-cleanup-item-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #a7f3d0;
}
.data-cleanup-item.optional .data-cleanup-item-tag {
    background: rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
}
.data-cleanup-item.keep .data-cleanup-item-tag {
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
}
.data-cleanup-actions {
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 12px;
}
.data-cleanup-actions > button {
    flex: 1;
}
.data-cleanup-empty {
    border-radius: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.7;
}

/* 带有标签的输入框组 */
.input-group {
    width: 100%;
    margin-bottom: 15px;
}
.input-label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
    text-align: left;
}

/* 优化输入框大小和样式 */
#drawer-ai .drawer-input {
    width: 100%;
    padding: 12px 15px; /* 优化内边距 */
    border-radius: 12px; /* 调整圆角 */
    text-align: left; /* 文字从左边开始 */
    margin-bottom: 0; /* 移除旧的间距，由 .input-group 控制 */
}
#drawer-ai .drawer-textarea {
    height: 120px; /* 增加设定框的高度 */
}

/* 头像管理弹窗样式 */
#avatar-manager-modal .modal-scroll-content {
    padding: 15px;
}
.avatar-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
}
.avatar-gallery-item {
    width: 100%;
    padding-top: 100%; /* 保持1:1的方形比例 */
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: #eee;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
}
.avatar-gallery-item.selected {
    border-color: #007aff;
}
.avatar-gallery-item.add-new {
    border: 2px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #ccc;
    padding-top: 0; /* 移除比例，让它变成普通div */
    width: 60px; /* 固定尺寸 */
    height: 60px;
}
html, body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* 你可以保留你的 !important 白色背景，或者根据需要调整 */
    background-color: #ffffff; 
}

#app-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#main-content {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 
  ▼▼▼【最终解决方案：替换 display 为 opacity + pointer-events】▼▼▼ 
  这样可以完美保留所有过渡动画。
*/
.drawer-overlay,
.action-sheet-modal,
.thoughts-modal-overlay,
.clock-modal-overlay,
.modal-overlay,
.modal-container,
.drawer-modal,
.page-modal,
.chat-settings-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 默认状态：不可见，不可点击，但存在于布局中 */
    opacity: 0;
    pointer-events: none;

    /* 确保它们有自己的堆叠上下文，并设置基础过渡 */
    z-index: 400;
    transition: opacity 0.3s ease-out;
}

/* 当JS给它们添加 .active 类时，让它们变得可见、可点击 */
.drawer-overlay.active,
.action-sheet-modal.active,
.thoughts-modal-overlay.active,
.clock-modal-overlay.active,
.modal-container.active, /* 注意：直接控制 modal-container 的情况 */
.drawer-modal.active,
.page-modal.active,
.chat-settings-page.active {
    opacity: 1;
    pointer-events: auto;
}

/* 
  针对 .modal-overlay + .modal-container 这种组合的特殊处理。
  让 .modal-overlay 在激活时也显示出来，作为背景遮罩。
*/
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
    background: rgba(0,0,0,0.4); /* 给遮罩一个背景色 */
    z-index: 500;
}
.modal-container {
    /* 容器本身不需要背景和绝对定位，因为它被 overlay 包裹 */
    /* 我们需要让它在层级上高于它的 overlay 兄弟 */
    z-index: 501;
}
.wb-binding-display {
    flex: 1;
    font-size: 14px;
    color: #111;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.4;
    padding-right: 10px;
}

/* QQ 顶部导航柔和阴影风格 */
.qq-header {
  background: #fff !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* 预设类弹窗统一恢复为手机上的小弹窗尺寸，避免被全局 modal 规则拉宽 */
#preset-manager-modal,
#hatchery-char-template-modal,
#hatchery-style-template-modal,
#hatchery-world-template-modal,
#hatchery-css-brief-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#preset-manager-modal .modal-content,
#hatchery-char-template-modal .modal-content,
#hatchery-style-template-modal .modal-content,
#hatchery-world-template-modal .modal-content,
#hatchery-css-brief-modal .modal-content {
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: min(78vh, 680px) !important;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.22);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
#preset-manager-overlay,
#hatchery-char-template-overlay,
#hatchery-style-template-overlay,
#hatchery-world-template-overlay,
#hatchery-css-brief-overlay {
  background: rgba(0,0,0,0.45) !important;
}
.custom-select-wrapper {
    position: static; /* 修改：我们不再需要它做定位上下文 */
    flex: 1;
    min-width: 0;
}

.setting-row.sub-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important; /* 确保行本身是满宽的 */
}

.custom-select-wrapper {
    position: relative !important;
    flex: 1 !important; /* 占据剩余空间 */
    min-width: 0 !important; /* 防止被压缩 */
}

.custom-select-display {
    display: block;
    height: 40px; /* 【终极方案】使用固定的height，而不是min-height */
    line-height: 40px; /* 让文字垂直居中 */
    padding: 0 12px; /* 调整padding以适应固定的高度 */
    box-sizing: border-box;

    /* 其他样式保持不变 */
    width: 100%;
    background-color: #f0f0f0;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #e0e0e0;
    text-align: right; 
}



.custom-select-display:hover {
    border-color: #ccc !important;
}


.custom-select-options {
    display: none;
    position: absolute;  /* 绝对定位，脱离文档流 */
    top: 100%;           /* 从父元素（wrapper）的底部开始 */
    left: 0;
    width: 100%;         /* 宽度与父元素相同 */
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;       /* 关键：确保它浮在最顶层 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-top: 5px;
}
.custom-select-options.active {
    display: block;
}
.custom-select-category {
    padding: 10px 12px 4px 12px;
    font-size: 13px;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
}

.custom-select-option {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom-select-option:hover {
    background-color: #f5f5f5;
}
.custom-select-option.selected {
    background-color: #e0eafc;
    font-weight: 500;
}
.custom-select-option.selected::after {
    content: '✔'; /* 选中标记 */
    color: var(--primary-color, #007aff);
    font-weight: bold;
}

.setting-row.sub-row {
    display: flex;
    align-items: center;
    gap: 10px; /* 增加元素间距 */
}

/* 确保标签不抢占过多空间 */
.setting-row.sub-row label {
    flex-shrink: 0; /* 防止标签被压缩 */
}

/* 这是关键：让wrapper占据剩余所有空间 */
.custom-select-wrapper {
    position: relative;
    flex: 1; /* 关键：让它填充剩余空间 */
    min-width: 0; /* 关键：防止内部元素过大时导致wrapper自身被挤出 */
}

.custom-select-display {
    /* --- 核心修复 --- */
    display: block; /* 确保它是一个块级元素 */
    min-height: 20px; /* 给一个最小高度，防止内容为空时完全塌陷 */
    width: 100%; /* 强制它撑满父容器 */
    box-sizing: border-box; /* 关键：让padding和border不影响宽度计算 */

    /* --- 原始样式保持不变 --- */
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #e0e0e0;
    text-align: right; 
}
.offline-page-bg .nav-header.qq-header {
    display: flex;
    align-items: center;
}

.offline-page-bg .nav-header.qq-header .nav-title-container {
    flex: 1;
    text-align: center;
}

.offline-page-bg .nav-header.qq-header .nav-btn:last-child {
    margin-left: auto;
}
#offline-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#offline-page.offline-waiting .nav-title-container {
    gap: 2px;
}

#offline-subtitle.visible {
    height: 18px;
    font-size: 12px;
    letter-spacing: 0.04em;
    background: linear-gradient(90deg, #9ca3af 0%, #374151 50%, #cbd5e1 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: offline-waiting-pulse 1.6s linear infinite;
}

@keyframes offline-waiting-pulse {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

#offline-msg-area.offline-message-area {
    flex: 1;
    overflow-y: auto;
}

.offline-input-bar {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 8px;
    background: #fff;
    flex-shrink: 0;
    border-top: 0.5px solid #eee;
}

.offline-input {
    flex: 1;
    max-height: 120px;
    resize: none;
    border-radius: 12px;
    padding: 8px 10px;
    border: 1px solid #ddd;
}
/* 线下消息整体布局 */
.offline-message-area {
    padding: 12px 10px;
    box-sizing: border-box;
}

.offline-msg-row {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    opacity: 1;
    transform: translateY(0);
}

.offline-msg-row.is-entering {
    opacity: 0;
    transform: translateY(14px);
}

.offline-msg-row.is-entering.is-entered {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.42s ease, transform 0.42s ease;
}

/* 用户消息靠右 */
.offline-msg-user {
    justify-content: flex-end !important;
}

/* AI/线下系统消息靠左 */
.offline-msg-ai {
    justify-content: flex-start !important;
}

/* 气泡本体 */
.offline-bubble {
    max-width: var(--offline-bubble-max-width, 80%);
    padding: 9px 12px;
    border-radius: 16px;
    font-size: var(--offline-bubble-font-size, 14px);
    line-height: 1.7;
    word-break: break-word;
    white-space: normal;
    background: var(--offline-ai-bubble-bg, #f4f5f7);
    color: var(--offline-ai-bubble-color, #333333);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.offline-bubble p {
    margin: 0;
}

.offline-bubble p + p {
    margin-top: 10px;
}

/* 用户气泡颜色略深、靠右 */
.offline-msg-user .offline-bubble {
    margin-left: auto;
    background: var(--offline-user-bubble-bg, #4c9fff);
    color: var(--offline-user-bubble-color, #ffffff);
    border-bottom-right-radius: 4px;
}

/* AI 气泡左侧略尖 */
.offline-msg-ai .offline-bubble {
    margin-right: auto;
    background: var(--offline-ai-bubble-bg, #f0f0f0);
    color: var(--offline-ai-bubble-color, #333333);
    border-bottom-left-radius: 4px;
}

.offline-appearance-color-grid input[type="color"] {
    width: 100%;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
}

.offline-appearance-preview {
    --offline-preview-width: 80%;
    --offline-preview-font-size: 14px;
    --offline-preview-ai-bg: #f0f0f0;
    --offline-preview-ai-text: #333333;
    --offline-preview-user-bg: #4c9fff;
    --offline-preview-user-text: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
}

.offline-appearance-preview-row {
    display: flex;
    width: 100%;
}

.offline-appearance-preview-ai {
    justify-content: flex-start;
}

.offline-appearance-preview-user {
    justify-content: flex-end;
}

.offline-appearance-preview-bubble {
    max-width: var(--offline-preview-width);
    padding: 9px 12px;
    border-radius: 16px;
    font-size: var(--offline-preview-font-size);
    line-height: 1.6;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.offline-appearance-preview-ai .offline-appearance-preview-bubble {
    background: var(--offline-preview-ai-bg);
    color: var(--offline-preview-ai-text);
    border-bottom-left-radius: 4px;
}

.offline-appearance-preview-user .offline-appearance-preview-bubble {
    background: var(--offline-preview-user-bg);
    color: var(--offline-preview-user-text);
    border-bottom-right-radius: 4px;
}
#floating-select-options {
    z-index: 9999; /* 保证比抽屉和遮罩都高 */
}
/* 论坛主界面整体更白一些 */
#forum-page {
    background-color: #ffffff !important;
}

/* 顶部导航栏改成白底 + 轻微阴影，去掉原来的分割线感 */
#forum-page .neo-header {
    background-color: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* 帖子列表区域用非常浅的灰，和页面白色拉开一点层次 */
#forum-page .scroll-content {
    background-color: #fafafa;
}

/* 帖子卡片整体改成白底 + 柔和阴影 */
#forum-page .forum-post-item {
    background: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 底部泡泡导航栏改成白色，保持一点浮起感 */
#forum-page .bubble-nav-bar {
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 选中 / 未选中标签的颜色，可以按需要自己调 */
#forum-page .bubble-nav-item {
    color: #999;
}
#forum-page .bubble-nav-item.active {
    color: #000;
}

/* =================================
   Shopping App (Shop Page) - Black & White Minimal
   ================================= */
.shop-page {
    background-color: #f5f5f5;
    color: #000;
}

/* 顶部导航栏 */
.shop-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36px 14px 10px 14px;
    background: #ffffff;
    border-bottom: 0.5px solid #e0e0e0;
    flex-shrink: 0;
    z-index: 15;
}

.shop-nav-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.shop-cart-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid #cccccc;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.shop-cart-icon-btn:active {
    transform: scale(0.96);
}

.shop-cart-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-cart-icon::before {
    content: "🛒";
    font-size: 16px;
}

/* 中部内容区域 */
.shop-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 70px;
    overflow-y: auto;
}

.shop-tab {
    display: none;
}

.shop-tab.active {
    display: block;
}

.shop-products-header {
    margin-bottom: 10px;
}

.shop-products-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.shop-products-subtitle {
    font-size: 12px;
    color: #888;
}

.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 12px;
}

.shop-product-card {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.shop-product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: #f2f2f2;
    border: 1px dashed #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #aaaaaa;
}

.shop-product-name {
    font-size: 13px;
    font-weight: 500;
    color: #111111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-product-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    border-color: #d9d9d9;
}

.shop-product-meta {
    min-height: 16px;
    font-size: 11px;
    color: #7a7a7a;
    line-height: 1.4;
}

.shop-product-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.shop-product-price {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    align-self: flex-start;
}

.shop-product-share-btn,
.shop-product-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.shop-product-share-btn {
    border: 1px solid #d6d6d6;
    background: #ffffff;
    color: #222222;
}

.shop-product-add-btn {
    border: none;
    background: #000000;
    color: #ffffff;
    font-size: 18px;
}

.shop-product-share-btn:active,
.shop-product-add-btn:active {
    transform: scale(0.92);
}

/* 底部导航栏 */
.shop-bottom-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    padding: 4px 10px;
    background: #ffffff;
    border-top: 0.5px solid #e0e0e0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 20;
}

.shop-bottom-nav-item {
    flex: 1;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #888888;
    cursor: pointer;
}

.shop-bottom-icon {
    font-size: 16px;
    margin-bottom: 2px;
    position: relative;
}

.shop-bottom-nav-item.active {
    color: #000000;
    font-weight: 600;
}

.shop-cart-badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    display: none;
}

.shop-cart-badge.visible {
    display: inline-block;
}

/* 购物车页 */
.shop-cart-empty {
    margin-top: 20px;
    font-size: 13px;
    color: #999999;
    text-align: center;
}

.shop-cart-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-cart-item {
    display: flex;
    padding: 12px 12px 10px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.shop-cart-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.shop-cart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.shop-cart-name {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    word-break: break-word;
}

.shop-cart-meta {
    font-size: 12px;
    color: #666666;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.shop-cart-remove-btn {
    align-self: flex-start;
    border: none;
    background: #f6f6f6;
    color: #777777;
    font-size: 12px;
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.shop-cart-footer {
    margin-top: auto;
    padding: 10px 0 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-cart-total {
    font-size: 14px;
    font-weight: 600;
}

.shop-settle-btn {
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    background: #000000;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}

.shop-cart-result {
    font-size: 12px;
    margin-top: 4px;
    color: #666666;
}

/* 个人中心页 */
.shop-profile-section {
    margin-top: 10px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0 10px 28px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shop-account-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.88);
    border: 1px solid #ececec;
}

.shop-account-switcher label {
    color: #555555;
    font-size: 12px;
    white-space: nowrap;
}

.shop-account-switcher select {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #dddddd;
    font-size: 13px;
    background: #ffffff;
}

.shop-small-btn {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #111111;
    background: #ffffff;
    font-size: 11px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.shop-small-btn:active {
    transform: scale(0.97);
}

.shop-small-btn.primary {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.shop-profile-basic {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    border: 1px solid #ececec;
}

.shop-profile-basic-readonly {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,245,245,0.96) 100%);
}

.shop-avatar-wrapper {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    background: #f5f5f5;
    cursor: pointer;
    flex-shrink: 0;
}

.shop-avatar-static {
    cursor: default;
}

#shop-profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-profile-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-profile-username-display {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    letter-spacing: 0.02em;
}

.shop-profile-sync-hint {
    font-size: 12px;
    line-height: 1.6;
    color: #666666;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f6f6f6;
    border: 1px solid #ececec;
}

.shop-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 12px;
    border-radius: 16px;
    background: #111111;
    color: #ffffff;
}

.shop-recharge {
    display: flex;
    gap: 6px;
    align-items: center;
}

#shop-recharge-input {
    width: 92px;
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 12px;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
}

#shop-recharge-input::placeholder {
    color: rgba(255,255,255,0.68);
}

.shop-history-section {
    margin-top: 14px;
    padding: 12px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #eaeaea;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.shop-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.shop-history-empty {
    font-size: 12px;
    color: #999999;
    text-align: center;
    padding: 10px 0;
}

.shop-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-history-item {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px dashed #dddddd;
    font-size: 12px;
}

.shop-history-meta {
    display: flex;
    justify-content: space-between;
}

/* 添加商品弹窗 */
.shop-modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.shop-modal-overlay.active {
    display: flex;
}

.shop-modal {
    width: 80%;
    max-width: 320px;
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 14px 12px;
    border: 1px solid #111111;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

.shop-modal-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.shop-modal-field {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shop-modal-field label {
    font-size: 12px;
    color: #555555;
}

.shop-modal-field input {
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid #dddddd;
    font-size: 13px;
}

.shop-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.shop-modal-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #888888;
}

.shop-detail-modal,
.shop-share-modal {
    max-width: 340px;
}

.shop-detail-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-detail-main {
    display: flex;
    gap: 12px;
    align-items: center;
}

.shop-detail-image {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    border: 1px dashed #cccccc;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.shop-detail-basic {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shop-detail-name {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    line-height: 1.45;
}

.shop-detail-brand,
.shop-detail-specs {
    font-size: 12px;
    color: #666666;
    line-height: 1.5;
}

.shop-detail-price {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
}

.shop-detail-desc {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f6f6f6;
    border: 1px solid #ececec;
    font-size: 12px;
    line-height: 1.7;
    color: #444444;
}

.shop-share-summary {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.5;
}

#shop-share-target-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #dddddd;
    font-size: 13px;
    background: #ffffff;
}

.shop-share-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #7c7c7c;
    line-height: 1.6;
}

.shop-share-actions {
    justify-content: space-between;
    flex-wrap: wrap;
}

.bubble.shop-product {
    padding: 0;
    background: transparent;
    border: none;
    max-width: 250px;
}

.bubble.forum-post {
    padding: 0;
    background: transparent;
    border: none;
    max-width: min(280px, 72vw);
}

.forum-chat-card {
    background: #ffffff;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    padding: 13px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bubble.forum-post.me .forum-chat-card {
    background: #eef4ea;
    border-color: #d7e4cf;
}

.forum-chat-card-label {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: #edf2ff;
    color: #4b6fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.forum-chat-card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: #111827;
}

.forum-chat-card-author,
.forum-chat-card-comment,
.forum-chat-card-stats {
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
}

.forum-chat-card-text {
    font-size: 13px;
    line-height: 1.7;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-word;
}

.shop-chat-card {
    background: #ffffff;
    border: 1px solid #e7e7e7;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bubble.shop-product.me .shop-chat-card {
    background: #eef1eb;
    border-color: #dde3d7;
}

.shop-chat-card-top {
    display: flex;
    gap: 10px;
    align-items: center;
}

.shop-chat-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.shop-chat-card-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shop-chat-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
}

.shop-chat-card-sub,
.shop-chat-card-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #666666;
}

.shop-chat-card-price {
    font-size: 15px;
    font-weight: 700;
    color: #000000;
}

/* 书城 Bookstore - 黑白简约阅读 */
#bookstore-page {
    background-color: #f5f5f5;
    color: #000;
}

.bookstore-body {
    position: absolute;
    top: 72px;
    bottom: 68px;
    left: 0;
    right: 0;
    padding: 18px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.bookstore-view {
    display: none;
    min-height: 100%;
}

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

#bookstore-shelf-view,
#bookstore-profile-view,
#bookstore-creator-view {
    padding-top: 8px;
}

/* 书架视图 */
.bookstore-summary {
    padding: 16px 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    box-shadow: 0 16px 34px rgba(17,17,17,0.06);
}

.bookstore-summary-title {
    color: #666;
}

.bookstore-summary-value {
    font-weight: 600;
}

.book-shelf-empty {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px dashed #dddddd;
    font-size: 13px;
    color: #888;
    text-align: center;
}

.book-shelf-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 8px;
}

.book-card {
    padding: 10px 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.book-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.book-card-title {
    font-size: 14px;
    font-weight: 600;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-card-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #000;
}

.book-card-meta {
    font-size: 11px;
    color: #777;
    display: flex;
    justify-content: space-between;
}

.book-card-progress-bar {
    margin-top: 4px;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: #f0f0f0;
    overflow: hidden;
}

.book-card-progress-inner {
    height: 100%;
    width: 0;
    background: #000;
    border-radius: inherit;
}

/* 阅读器视图 */
#bookstore-reader-view.active {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: linear-gradient(180deg, #f7f1e6 0%, #f2eadb 100%);
}

.book-reader-header {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 4;
}

#bookstore-reader-view.reader-ui-visible .book-reader-header {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.book-reader-back-btn,
.book-reader-header-spacer {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    flex: 0 0 40px;
}

.book-reader-back-btn {
    border: none;
    background: rgba(17,17,17,0.72);
    color: #fff;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.book-reader-header-spacer {
    opacity: 0;
}

.book-reader-title-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 12px 28px rgba(17,17,17,0.08);
    backdrop-filter: blur(12px);
}

.book-reader-title {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book-reader-progress {
    font-size: 11px;
    color: #6f6558;
}

.book-reader-main {
    position: absolute;
    inset: 0;
    padding: calc(max(58px, env(safe-area-inset-top) + 38px)) 12px calc(max(108px, env(safe-area-inset-bottom) + 88px));
    display: block;
}

.book-reader-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 8px 0;
    font-size: 20px;
    line-height: 1.95;
    letter-spacing: 0.02em;
    color: #2a2218;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
    -webkit-user-select: text;
}

.book-reader-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.book-reader-ui-mask {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 2;
}

#bookstore-reader-view.reader-ui-visible .book-reader-ui-mask {
    opacity: 1;
    pointer-events: auto;
}

.book-reader-footer {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(17,17,17,0.76);
    color: #fff;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.14), 0 16px 32px rgba(0,0,0,0.18);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 4;
}

#bookstore-reader-view.reader-ui-visible .book-reader-footer {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.book-reader-footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}

.book-reader-chapter {
    font-weight: 600;
    color: #f5ebdb;
}

.book-reader-footer-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.72);
}

.book-reader-footer-actions {
    display: flex;
    gap: 10px;
}

.book-page-btn {
    flex: 1;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.12);
    color: #fff;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
}

.book-page-indicator {
    font-size: 12px;
    color: rgba(255,255,255,0.84);
    text-align: right;
}

/* 陪伴角色侧栏 */
.companion-avatar,
.companion-panel {
    display: none !important;
}

.companion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.companion-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.companion-name {
    font-size: 13px;
    font-weight: 600;
}

.companion-desc {
    font-size: 11px;
    color: #777;
}

.companion-switch-btn {
    border-radius: 999px;
    border: 1px solid #111;
    background: #fff;
    padding: 4px 8px;
    font-size: 11px;
}

.companion-comments {
    flex: 1;
    min-height: 60px;
    max-height: 180px;
    overflow-y: auto;
    border-radius: 8px;
    background: #fafafa;
    padding: 6px 6px 4px;
    font-size: 11px;
    color: #333;
}

.companion-comment-item {
    padding: 4px 4px 4px 10px;
    border-left: 2px solid #000;
    margin-bottom: 4px;
}

.companion-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
}

.companion-hint {
    color: #777;
    flex: 1;
}

.companion-eval-btn {
    border-radius: 999px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
}

/* 个人中心视图 */
.book-profile-header {
    padding: 16px 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 16px 34px rgba(17,17,17,0.06);
}

.book-profile-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.book-profile-mode-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #111111, #3c3c3c);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 18px rgba(17,17,17,0.14);
}

.book-profile-switch-btn {
    border: 1px solid rgba(17,17,17,0.14);
    background: linear-gradient(180deg, #ffffff, #f3f3f3);
    color: #111;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(17,17,17,0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.book-profile-switch-btn:active {
    transform: translateY(1px) scale(0.98);
}

.book-profile-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.book-profile-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
    background: #f5f5f5;
}

.book-profile-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.book-profile-name {
    font-size: 14px;
    font-weight: 600;
}

.book-profile-section {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 16px 34px rgba(17,17,17,0.05);
}

.book-profile-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.book-profile-book-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.book-profile-book-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.book-profile-book-name {
    font-weight: 500;
}

.book-profile-book-meta {
    display: flex;
    justify-content: space-between;
    color: #777;
}

.book-profile-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.book-profile-tab {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #000;
    background: #fff;
    font-size: 11px;
    padding: 4px 0;
}

.book-profile-tab.active {
    background: #000;
    color: #fff;
}

.book-profile-chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.book-profile-pie {
    width: 160px;
    height: 160px;
}

.book-profile-chart-legend {
    width: 100%;
    font-size: 11px;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.book-profile-note {
    font-size: 11px;
    color: #777;
}

/* 书城底部导航 */
.bookstore-tabbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.95);
    border-top: 0.5px solid #e0e0e0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 20;
    backdrop-filter: blur(10px);
}

.bookstore-tab-item {
    flex: 1;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #888;
}

.bookstore-tab-item.active {
    color: #000;
    font-weight: 600;
}

.bookstore-tab-icon {
    font-size: 16px;
    margin-bottom: 2px;
}

/* 书城弹窗 */
#book-creator-settings-modal.active,
#book-profile-switch-modal.active {
    animation: book-modal-overlay-fade-in 0.22s ease both;
}

.modal-overlay .book-modal {
    width: 80%;
    max-width: 340px;
    margin: 0 auto;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
    border-radius: 24px;
    padding: 16px 16px 12px;
    border: 1px solid rgba(17,17,17,0.08);
    box-shadow: 0 24px 60px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.06);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(22px) scale(0.96);
    transform-origin: center bottom;
    transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease;
}

.modal-overlay.active .book-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.modal-overlay .book-modal .book-modal-body {
    overflow-y: auto;
    padding-right: 2px;
}

.book-modal-title {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.book-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.book-modal-btn {
    border-radius: 999px;
    border: 1px solid rgba(17,17,17,0.14);
    background: linear-gradient(180deg, #ffffff, #f5f5f5);
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(17,17,17,0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.book-modal-hint {
    margin-top: 2px;
    padding: 9px 11px;
    border-radius: 14px;
    background: #f6f6f6;
    font-size: 11px;
    line-height: 1.6;
    color: #666;
}

.book-modal-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.book-modal-cancel {
    border-radius: 999px;
    border: 1px solid rgba(17,17,17,0.14);
    background: linear-gradient(180deg, #ffffff, #f3f3f3);
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(17,17,17,0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

/* 书城 · 创作区 Creator Zone */
#book-creator-settings-modal .book-modal,
#book-profile-switch-modal .book-modal {
    width: 86%;
    max-width: 368px;
}

#book-creator-settings-modal .book-modal {
    background:
        radial-gradient(circle at top left, rgba(17,17,17,0.05), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.book-creator-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}

.book-creator-field label {
    font-size: 12px;
    font-weight: 700;
    color: #222;
}

.book-creator-field input[type="text"],
.book-creator-field select,
.book-creator-field input[type="number"] {
    width: 100%;
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(17,17,17,0.1);
    background: linear-gradient(180deg, #ffffff, #f8f8f8);
    padding: 10px 12px;
    font-size: 13px;
    color: #111;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 8px 18px rgba(17,17,17,0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.book-creator-field input[type="text"]::placeholder,
.book-creator-field input[type="number"]::placeholder {
    color: #a0a0a0;
}

.book-creator-field input[type="text"]:focus,
.book-creator-field select:focus,
.book-creator-field input[type="number"]:focus,
#book-creator-outline-input:focus {
    border-color: rgba(17,17,17,0.45);
    box-shadow: 0 0 0 3px rgba(17,17,17,0.08), 0 14px 26px rgba(17,17,17,0.08);
    background: #fff;
}

.book-creator-hint {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.55;
    color: #777;
}

.book-creator-inline {
    align-items: flex-start;
}

.book-creator-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-creator-range input[type="number"] {
    width: 84px;
    min-height: 40px;
    text-align: center;
}

.book-creator-range-sep {
    font-size: 12px;
    color: #555;
}

.book-creator-range-unit {
    font-size: 12px;
    color: #999;
}

.book-creator-role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.book-creator-role-chip {
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(17,17,17,0.12);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(180deg, #ffffff, #f4f4f4);
    box-shadow: 0 8px 16px rgba(17,17,17,0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.book-role-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.book-role-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(17,17,17,0.08);
    background: linear-gradient(180deg, #ffffff, #f8f8f8);
    text-align: left;
    box-shadow: 0 10px 24px rgba(17,17,17,0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.book-role-item.active {
    border-color: #111;
    background: #111;
    color: #fff;
}

.book-role-item-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.08);
    background: #f3f3f3;
}

.book-role-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.book-role-item-name {
    font-size: 13px;
    font-weight: 600;
}

.book-role-item-sub {
    font-size: 11px;
    color: #777;
}

.book-role-item.active .book-role-item-sub {
    color: rgba(255,255,255,0.72);
}

.book-role-item-action {
    font-size: 11px;
    white-space: nowrap;
}

.book-creator-role-chip.selected {
    background: linear-gradient(135deg, #111111, #3d3d3d);
    border-color: #111;
    color: #fff;
    box-shadow: 0 14px 28px rgba(17,17,17,0.18);
}

.book-creator-role-chip:active,
.book-role-item:active,
.book-profile-switch-btn:active,
.book-modal-btn:active,
.book-modal-cancel:active,
.book-creator-btn:active {
    transform: translateY(1px) scale(0.985);
}

.book-creator-header {
    padding: 16px 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    box-shadow: 0 16px 34px rgba(17,17,17,0.06);
}

.book-creator-status {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.book-creator-status span {
    white-space: nowrap;
}

.book-creator-time {
    font-size: 11px;
    color: #777;
}

.book-creator-projects {
    margin-top: 10px;
}

.book-creator-empty {
    padding: 18px 20px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px dashed #dddddd;
    font-size: 13px;
    color: #888;
    text-align: center;
    box-shadow: 0 14px 28px rgba(17,17,17,0.04);
}

.book-creator-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.book-creator-project-card {
    padding: 14px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(17,17,17,0.05);
}

.book-creator-project-title {
    font-size: 13px;
    font-weight: 600;
}

.book-creator-project-meta {
    font-size: 11px;
    color: #777;
}

.book-creator-editor {
    margin-top: 10px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.book-creator-editor-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.book-creator-editor-title {
    font-size: 14px;
    font-weight: 600;
}

.book-creator-editor-meta {
    font-size: 11px;
    color: #777;
}

.book-creator-chapter-list {
    max-height: 40vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
}

.book-creator-chapter-item {
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    padding: 6px 8px;
    font-size: 12px;
    background: #fafafa;
    cursor: pointer;
}

.book-creator-chapter-item.active {
    border-color: #000;
    background: #111;
    color: #fff;
}

.book-creator-chapter-item-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.book-creator-chapter-item-body {
    font-size: 12px;
    line-height: 1.6;
}

.book-creator-chapter-item-body p {
    margin: 0 0 4px;
}

.book-creator-chapter-memory {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e0e0e0;
    font-size: 11px;
    color: #666;
}

.book-creator-input-wrap {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#book-creator-outline-input {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(17,17,17,0.1);
    background: linear-gradient(180deg, #ffffff, #f8f8f8);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.65;
    resize: vertical;
    min-height: 96px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 8px 18px rgba(17,17,17,0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.book-creator-input-actions {
    display: flex;
    gap: 8px;
}

.book-creator-btn {
    flex: 1;
    border-radius: 999px;
    border: 1px solid #111;
    background: linear-gradient(135deg, #111111, #323232);
    color: #fff;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 16px 28px rgba(17,17,17,0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.book-creator-btn.secondary {
    background: linear-gradient(180deg, #ffffff, #f4f4f4);
    color: #111;
    border-color: rgba(17,17,17,0.14);
    box-shadow: 0 10px 20px rgba(17,17,17,0.06);
}

.book-role-item:hover,
.book-profile-switch-btn:hover,
.book-modal-btn:hover,
.book-modal-cancel:hover,
.book-creator-btn:hover,
.book-creator-role-chip:hover {
    box-shadow: 0 14px 28px rgba(17,17,17,0.12);
    border-color: rgba(17,17,17,0.22);
}

.bookstore-header-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

#bookstore-import-btn.bookstore-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #111;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 8px 18px rgba(17,17,17,0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#bookstore-import-btn.bookstore-icon-btn:active {
    transform: scale(0.96);
}

/* 创作中 · 导航栏提示动画 */
#bookstore-page.creator-writing #bookstore-title {
    font-size: 14px;
    background: linear-gradient(90deg, #999, #bbbbbb, #999);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: creator-writing-pulse 1.6s linear infinite;
}

@keyframes book-modal-overlay-fade-in {
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.35);
    }
}

@keyframes creator-writing-pulse {
    0% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
}


.book-companion-list {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
}

.book-companion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.book-companion-item:last-child {
    border-bottom: none;
}

.book-companion-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
    background: #f5f5f5;
}

.book-companion-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.book-companion-name {
    font-weight: 500;
}

.book-companion-desc-line {
    color: #777;
    font-size: 11px;
}

.book-companion-check {
    font-size: 14px;
}

/* --- 塔罗牌 App --- */
.tarot-page {
    position: fixed;
    inset: 0;
    z-index: 2050; /* 高于通用 app-page，但低于塔罗弹窗的 2100 */
    display: none;
    flex-direction: column;
    color: #fef7ff;
    background-image: url('https://i.postimg.cc/HxhcCpXT/EA0C0C44-6F56-4E4F-94CA-AB8529EE99AD.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tarot-page.active {
    display: flex;
}

.tarot-page.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    /* 进一步减弱紫色渐变，仅保留非常轻微的边缘暗角 */
    background:
        radial-gradient(circle at 20% 0%, rgba(95, 59, 145, 0.0) 0,
                        rgba(7, 4, 20, 0.25) 55%,
                        rgba(4, 0, 12, 0.6) 100%);
    z-index: 0;
}

/* 塔罗牌页面使用全屏紫色幕布，顶部导航栏展示为透明返回条 */
.tarot-page .nav-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: transparent;
    color: #fef7ff;
}

.tarot-scroll {
    padding-bottom: 32px;
}

.tarot-curtain {
    position: relative;
    z-index: 1;
    min-height: 100%;
    /* 完全透明，不再叠加灰黑色幕布和模糊，让银河背景原样呈现 */
    background: transparent;
    backdrop-filter: none;
    padding: 32px 18px 40px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.tarot-section {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
    color: #fef7ff;
}

.tarot-section + .tarot-section {
    margin-top: 24px;
}

.tarot-section-hidden {
    display: none !important;
}

/* 菜单区：荧光黄色文本按钮 */
#tarot-menu-section {
    margin-top: 25vh;
}

.tarot-role-label {
    font-size: 16px;
    margin-bottom: 20px;
    color: #f2dfff;
    opacity: 0.9;
}

.tarot-daily-hint {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #f0c7ff;
    opacity: 0.9;
}

.tarot-menu-btn {
    width: 100%;
    margin-top: 14px;
}

/* 今日十问：整体区域下移 & 选项样式 */
#tarot-quiz-section {
    margin-top: 28px;
}

.tarot-question-box {
    margin-top: 18px;
    padding: 16px 14px 12px;
    border-radius: 18px;
    background: rgba(5, 2, 12, 0.65);
}

.tarot-question-text {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.tarot-answer-input {
    width: 100%;
    min-height: 140px; /* 答题区域高度增大 */
    resize: vertical;
}

/* 选择题选项容器：改为竖直一栏栏 */
.tarot-option-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tarot-option-btn {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(10, 8, 20, 0.75); /* 接近你之前喜欢的灰黑背景 */
    color: #fdf7ff;
    font-size: 14px;
}

.tarot-option-btn.selected {
    border-color: rgba(255, 220, 130, 0.9);
    background: rgba(35, 26, 70, 0.9);
}

.tarot-menu-btn {
    width: 100%;
    border: none;
    background: transparent;
    color: #ffe869;
    text-shadow: 0 0 6px rgba(255, 244, 163, 0.8), 0 0 14px rgba(255, 255, 255, 0.3);
    font-size: 17px;
    letter-spacing: 0.16em;
    padding: 10px 0;
    cursor: pointer;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.tarot-menu-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* 规则 / 角色选择弹窗 */
.tarot-modal-overlay {
    position: fixed;
    inset: 0;
    /* 使用更深的半透明黑色，确保弹窗出现时有明显暗化效果 */
    background: rgba(0, 0, 0, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    /* 提高到一个非常高的层级，确保永远盖在所有内容之上 */
    z-index: 9999;
}

.tarot-modal-overlay.active {
    display: flex;
}

.tarot-modal {
    width: 84%;
    max-width: 380px;
    /* 保留原来的紫色渐变背景，但增强描边和阴影，让弹窗轮廓更明显 */
    background: radial-gradient(circle at 0 0, #5b3f82 0, #231235 55%, #12061c 100%);
    border-radius: 20px;
    padding: 18px 16px 14px;
    border: 2px solid rgba(255, 241, 164, 0.95);
    box-shadow: 0 24px 60px rgba(0,0,0,0.9);
    color: #fef7ff;
}

.tarot-modal-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.tarot-modal-body {
    font-size: 13px;
    line-height: 1.5;
}

.tarot-modal-desc {
    margin-top: 0;
    margin-bottom: 8px;
    color: #f3dcff;
}

.tarot-modal-label {
    display: block;
    margin-top: 6px;
    margin-bottom: 4px;
    font-size: 12px;
}

.tarot-modal-select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(11, 6, 28, 0.95);
    color: #fef7ff;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}

.tarot-modal-hint {
    margin-top: 6px;
    font-size: 11px;
    color: #f0c7ff;
}

.tarot-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.tarot-btn {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #ffeef8;
    cursor: pointer;
}

.tarot-btn.primary {
    background: linear-gradient(135deg, #f7c948, #ffed8a);
    color: #3b2457;
    border-color: transparent;
    text-shadow: 0 0 4px rgba(255,255,255,0.5);
}

.tarot-btn.secondary {
    background: rgba(16, 9, 36, 0.8);
}

.tarot-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* 问答流程 */
.tarot-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.tarot-quiz-title {
    font-size: 14px;
    font-weight: 600;
}

.tarot-quiz-progress {
    font-size: 12px;
    color: #f0c7ff;
}

.tarot-quiz-status {
    font-size: 12px;
    color: #f3dcff;
    margin-bottom: 10px;
}

.tarot-question-box {
    background: radial-gradient(circle at 0 0, rgba(255,255,255,0.14) 0, rgba(255,255,255,0.02) 58%);
    border-radius: 18px;
    padding: 12px 12px 10px;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}

.tarot-question-text {
    font-size: 14px;
    margin-bottom: 8px;
    text-align: left;
}

.tarot-answer-input {
    width: 100%;
    background: rgba(5, 3, 18, 0.86);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.24);
    color: #fef7ff;
    padding: 8px 10px;
    font-size: 13px;
    resize: none;
}

.tarot-answer-input::placeholder {
    color: rgba(236, 208, 255, 0.75);
}

.tarot-quiz-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.tarot-quiz-actions .tarot-btn {
    flex: 1;
}

/* 结果界面：上 4 / 下 6 布局（整体仍为竖向，只控制视觉比例） */
.tarot-result-top {
    margin-bottom: 16px;
}

.tarot-result-cards {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.tarot-card {
    width: 80px;
    aspect-ratio: 62 / 100;
    border-radius: 10px;
    background: linear-gradient(145deg, #fbe9ff, #c18bff);
    box-shadow: 0 12px 26px rgba(0,0,0,0.7);
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #3a2253;
}

.tarot-card-name {
    font-size: 11px;
    font-weight: 600;
}

.tarot-card-pos {
    font-size: 10px;
    opacity: 0.8;
}

.tarot-card-symbol {
    font-size: 16px;
    text-align: center;
}

.tarot-result-bottom {
    border-radius: 18px;
    background: rgba(5, 2, 12, 0.78); /* 灰黑底，让结果文本更清晰 */
    border: 1px solid rgba(255,255,255,0.16);
    padding: 16px 14px 16px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.55);
}

.tarot-witch-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.tarot-witch-figure {
    font-size: 28px;           /* 使用 emoji 显示魔女，体积更明显 */
    transform: translateY(-4px); /* 整体稍稍上移一点 */
}

.tarot-witch-halo,
.tarot-witch-body {
    display: none;             /* 隐藏原先的矢量魔女图形 */
}

.tarot-witch-crystal {
    position: static;
    font-size: 28px;
}

.tarot-result-text {
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
    color: #ffffff;            /* 结果文本保持白色 */
    white-space: pre-wrap;     /* 保留 AI 返回中的换行 */
}

.tarot-result-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.tarot-rules-body p {
    margin: 4px 0;
}

.focus-exit-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 25;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    color: #ffffff;
}
/* 通用模态遮罩层 */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;            /* 默认不显示 */
    align-items: center;      /* 居中弹窗 */
    justify-content: center;
    z-index: 1600;            /* 要高于 app-page，但低于锁屏 2000 */
}

.modal-overlay.active {
    display: flex;
}

/* 通用弹窗容器：容器只负责居中，真正的小弹窗卡片交给内部 .modal-content */
.modal-container {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 16px;
    border-radius: 0;
    background: transparent;
    color: #333;
    box-shadow: none;
    box-sizing: border-box;
}

.modal-container > .modal-content {
    width: min(360px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    border-radius: 18px;
    background: #fff;
    color: #333;
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    overflow: hidden;
}

.forum-worldbook-modal {
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.forum-worldbook-modal.active {
    display: flex !important;
}

.forum-worldbook-modal-card {
    position: relative;
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 40px);
    height: min(680px, calc(100vh - 40px));
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24) !important;
    border: 1px solid rgba(226, 232, 240, 0.9);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.forum-worldbook-modal-header {
    flex: 0 0 auto;
    padding: 20px 20px 12px;
    border-bottom: none;
}

.forum-worldbook-modal-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.forum-worldbook-modal-eyebrow {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b95a7;
    font-weight: 700;
}

.forum-worldbook-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #101828;
    line-height: 1.3;
}

.forum-worldbook-modal-subtitle {
    font-size: 13px;
    line-height: 1.7;
    color: #667085;
}

.forum-worldbook-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 6px;
}

.forum-worldbook-modal-body {
    padding: 0 20px 18px;
}

.forum-worldbook-modal-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
}

.forum-worldbook-modal-cancel,
.forum-worldbook-modal-save {
    min-height: 44px;
    border-radius: 999px;
}

.forum-worldbook-modal-cancel {
    flex: 1;
}

.forum-worldbook-modal-save {
    flex: 1.4;
}

.forum-worldbook-intro {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    color: #5b6472;
    font-size: 13px;
    line-height: 1.7;
    border: 1px solid #e8edf5;
}

.forum-worldbook-section + .forum-worldbook-section {
    margin-top: 16px;
}

.forum-worldbook-section {
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #edf1f7;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.forum-worldbook-section-head {
    margin-bottom: 10px;
}

.forum-worldbook-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.forum-worldbook-section-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: #7b8190;
}

.forum-worldbook-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.forum-worldbook-item:hover {
    background: #f8fafc;
}

.forum-worldbook-item:active {
    transform: scale(0.99);
}

.forum-worldbook-item + .forum-worldbook-item {
    margin-top: 6px;
}

.forum-worldbook-item-child {
    margin-left: 12px;
    border-left: 2px solid #eef2f7;
    padding-left: 14px;
}

.forum-worldbook-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.forum-worldbook-item-type {
    font-size: 11px;
    color: #98a2b3;
    letter-spacing: 0.02em;
}

.forum-worldbook-item-name {
    font-size: 14px;
    color: #111827;
    line-height: 1.5;
}

.forum-worldbook-item-category strong {
    font-size: 14px;
    color: #0f172a;
}

/* 自律钟个人页设置弹窗最终覆写：放在通用 modal 规则后面，确保尺寸与居中不再被全局规则覆盖 */
#clock-user-switch-modal,
#clock-stats-modal,
#clock-companion-report-modal,
#clock-motto-modal,
#clock-wallpaper-modal {
    padding: 16px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

#clock-user-switch-modal > .clock-settings-modal,
#clock-motto-modal > .clock-settings-modal,
#clock-wallpaper-modal > .clock-settings-modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 48px) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(14px) scale(0.97) !important;
    transition: opacity 0.22s ease, transform 0.24s ease !important;
    align-self: center;
}

#clock-stats-modal > .clock-settings-modal,
#clock-companion-report-modal > .clock-settings-modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(380px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 48px) !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(14px) scale(0.97) !important;
    transition: opacity 0.22s ease, transform 0.24s ease !important;
    align-self: center;
}

#clock-user-switch-modal.active,
#clock-stats-modal.active,
#clock-companion-report-modal.active,
#clock-motto-modal.active,
#clock-wallpaper-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
}

#clock-user-switch-modal.active > .clock-settings-modal,
#clock-stats-modal.active > .clock-settings-modal,
#clock-companion-report-modal.active > .clock-settings-modal,
#clock-motto-modal.active > .clock-settings-modal,
#clock-wallpaper-modal.active > .clock-settings-modal {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}


.clock-todo-confirm-modal {
    position: relative;
    top: auto;
    left: auto;
    width: min(220px, calc(100vw - 48px)) !important;
    max-width: min(220px, calc(100vw - 48px)) !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 16px;
    padding: 14px 14px 12px;
    display: block;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.clock-todo-confirm-overlay {
    background: rgba(0, 0, 0, 0.26);
    transition: opacity 0.16s ease;
}

.clock-todo-confirm-overlay.active .clock-todo-confirm-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.clock-todo-confirm-modal .modal-header {
    padding: 0 0 8px 0;
}

.clock-todo-confirm-modal .modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #222;
}

.clock-todo-confirm-modal .modal-body {
    margin-bottom: 12px;
}

.clock-todo-confirm-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.clock-todo-confirm-modal .modal-btn {
    min-width: 72px;
    padding: 8px 12px;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.14s ease, opacity 0.14s ease, background-color 0.14s ease;
}

.clock-todo-confirm-modal .modal-btn:active {
    transform: scale(0.96);
}

.clock-todo-confirm-modal .modal-btn.cancel {
    background: #f2f2f2;
    color: #555;
}

.clock-todo-confirm-modal .modal-btn.primary {
    background: linear-gradient(135deg, #111111, #3a3a3a);
    color: #ffffff;
}

/* 自律钟待办条目美化 */
.clock-todo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: rgba(0,0,0,0.02);
    backdrop-filter: blur(6px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.clock-todo-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.clock-todo-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.25);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    transition: all 0.18s ease-out;
}

.clock-todo-checkbox:checked {
    background: linear-gradient(135deg, #111, #444);
    border-color: #111;
}

.clock-todo-checkbox:checked::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.clock-todo-title {
    font-size: 14px;
    color: #111;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clock-todo-title.done {
    color: #b3b3b3;
    text-decoration: line-through;
}

.clock-todo-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: 10px;
}

.clock-todo-deadline {
    font-size: 11px;
    color: #888;
}

.clock-todo-delete {
    border: none;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    background: rgba(0,0,0,0.04);
    color: #c00;
    cursor: pointer;
}

.clock-todo-delete:active {
    transform: scale(0.96);
}

/* 自律钟个人页弹窗按钮美化最终覆写 */
#clock-user-switch-modal .modal-footer,
#clock-stats-modal .modal-footer,
#clock-companion-report-modal .modal-footer,
#clock-motto-modal .modal-footer,
#clock-wallpaper-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid #eef2f7;
}

#clock-user-switch-modal .modal-btn,
#clock-stats-modal .modal-btn,
#clock-companion-report-modal .modal-btn,
#clock-motto-modal .modal-btn,
#clock-wallpaper-modal .modal-btn {
    min-width: 96px;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

#clock-user-switch-modal .modal-btn:active,
#clock-stats-modal .modal-btn:active,
#clock-companion-report-modal .modal-btn:active,
#clock-motto-modal .modal-btn:active,
#clock-wallpaper-modal .modal-btn:active,
#clock-stats-modal .clock-segment-btn:active,
#clock-companion-report-modal .clock-segment-btn:active,
#clock-user-switch-modal .clock-role-item:active,
#clock-wallpaper-modal .grid-item-add:active,
#clock-wallpaper-modal .delete-icon:active {
    transform: scale(0.97);
}

#clock-user-switch-modal .modal-btn.cancel,
#clock-stats-modal .modal-btn.cancel,
#clock-companion-report-modal .modal-btn.cancel,
#clock-motto-modal .modal-btn.cancel,
#clock-wallpaper-modal .modal-btn.cancel {
    background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
    border-color: #e5e7eb;
    color: #374151;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

#clock-motto-modal .modal-btn.primary,
#clock-wallpaper-modal .modal-btn.primary {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(17, 24, 39, 0.18);
}

#clock-user-switch-modal .modal-btn:hover,
#clock-stats-modal .modal-btn:hover,
#clock-companion-report-modal .modal-btn:hover,
#clock-motto-modal .modal-btn:hover,
#clock-wallpaper-modal .modal-btn:hover,
#clock-stats-modal .clock-segment-btn:hover,
#clock-companion-report-modal .clock-segment-btn:hover,
#clock-user-switch-modal .clock-role-item:hover,
#clock-wallpaper-modal .grid-item-add:hover,
#clock-wallpaper-modal .delete-icon:hover {
    filter: brightness(0.98);
}

#clock-stats-modal .clock-segment-btn,
#clock-companion-report-modal .clock-segment-btn {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

#clock-stats-modal .clock-segment-btn.active,
#clock-companion-report-modal .clock-segment-btn.active {
    background: linear-gradient(135deg, #111827 0%, #374151 100%);
    border-color: #111827;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(17, 24, 39, 0.18);
}

#clock-motto-modal .clock-add-row,
#clock-wallpaper-modal .clock-add-row {
    align-items: center;
}

#clock-motto-modal .clock-inline-btn,
#clock-wallpaper-modal .clock-inline-btn {
    min-width: 74px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
}

#clock-motto-modal #clock-motto-input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    color: #111827;
    font-size: 13px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03), 0 6px 14px rgba(15, 23, 42, 0.04);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#clock-motto-modal #clock-motto-input::placeholder {
    color: #9ca3af;
}

#clock-motto-modal #clock-motto-input:focus {
    outline: none;
    border-color: #9ca3af;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08), 0 10px 22px rgba(15, 23, 42, 0.08);
}

#clock-motto-modal .clock-report-item .modal-btn.cancel,
#clock-wallpaper-modal .clock-report-item .modal-btn.cancel {
    min-width: 62px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 11px;
    background: #fff5f5;
    border-color: #fecaca;
    color: #dc2626;
    box-shadow: none;
}

#clock-user-switch-modal .clock-role-item {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

#clock-user-switch-modal .clock-role-item.active {
    background: linear-gradient(135deg, #f9fafb 0%, #eef2ff 100%);
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.12);
}

#clock-user-switch-modal .clock-role-item-action {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-weight: 600;
}

#clock-wallpaper-modal .grid-item-add {
    border-radius: 18px;
    border: 1px dashed #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #6b7280;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

#clock-wallpaper-modal .grid-item-add:hover {
    border-color: #94a3b8;
    color: #111827;
}

#clock-wallpaper-modal .delete-icon {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #dc2626;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
}

/* 自律钟弹窗最终修复：恢复卡片背景、圆角与层级展示 */
#clock-user-switch-modal > .clock-settings-modal,
#clock-stats-modal > .clock-settings-modal,
#clock-companion-report-modal > .clock-settings-modal,
#clock-motto-modal > .clock-settings-modal,
#clock-wallpaper-modal > .clock-settings-modal {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 24px !important;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.24) !important;
    padding: 18px 18px 16px !important;
    overflow: hidden;
}

#clock-user-switch-modal .modal-header,
#clock-stats-modal .modal-header,
#clock-companion-report-modal .modal-header,
#clock-motto-modal .modal-header,
#clock-wallpaper-modal .modal-header,
#todo-modal .modal-header {
    padding: 0 0 12px 0;
}

#clock-user-switch-modal .modal-title,
#clock-stats-modal .modal-title,
#clock-companion-report-modal .modal-title,
#clock-motto-modal .modal-title,
#clock-wallpaper-modal .modal-title,
#todo-modal .modal-title {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    line-height: 1.35;
}

#todo-modal > .clock-todo-modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: stretch !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 24px !important;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.24) !important;
    padding: 18px 18px 16px !important;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
}

#todo-modal .modal-body {
    padding: 0;
    gap: 12px;
}

#todo-modal .modal-footer {
    margin-top: 16px;
}

#todo-modal.active > .clock-todo-modal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* QQ 邮件页滚动修复 */
#qq-tab-mail.qq-mail-page {
    position: relative;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    gap: 12px;
    padding: 14px 14px 120px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

#qq-tab-mail .qq-mail-status,
#qq-tab-mail .qq-mail-empty,
#qq-tab-mail .qq-mail-list {
    flex: 0 0 auto;
}

#qq-tab-mail .qq-mail-list {
    padding-bottom: 6px;
}

/* QQ 邮件编辑态按钮统一风格 */
.qq-mail-edit-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qq-mail-edit-btn {
    min-width: 82px;
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: 999px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}

.qq-mail-edit-btn:hover {
    filter: brightness(0.98);
    border-color: rgba(148, 163, 184, 0.9);
}

.qq-mail-edit-btn:active {
    transform: scale(0.97);
}

.qq-mail-edit-btn:disabled {
    opacity: 0.45;
    box-shadow: none;
}

.qq-mail-edit-btn.danger {
    border-color: rgba(248, 113, 113, 0.45);
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(220, 38, 38, 0.22);
}

/* QQ 工具栏弹窗去掉左上角标题文本 */
#voice-modal-container .modal-header,
#transfer-modal-container .modal-header,
#location-modal-container .modal-header,
#music-modal-container .modal-header,
#takeout-modal-container .modal-header,
#phone-lookup-container .modal-header {
    display: none;
}

/* QQ 萌宠 / 日程功能 */
.qq-pet-page,
.qq-schedule-page {
    background: linear-gradient(180deg, #f7f8fb 0%, #f2f4f8 100%);
}

.qq-pet-shell,
.qq-schedule-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px 24px;
}

.qq-feature-card,
.qq-feature-empty-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
}

.qq-feature-empty-card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}

.qq-feature-empty-title,
.qq-feature-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
}

.qq-feature-empty-desc,
.qq-feature-card-subtitle,
.qq-feature-inline-note,
.qq-feature-inline-meta {
    font-size: 12px;
    line-height: 1.65;
    color: #6b7280;
}

.qq-feature-inline-meta {
    margin-top: 8px;
}

.qq-feature-primary-btn {
    min-width: 112px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #111111 0%, #333333 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.qq-feature-primary-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.qq-pet-stage-top,
.qq-schedule-bind-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.qq-pet-stage-label {
    padding: 6px 12px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.qq-pet-stage-track {
    width: 100%;
    height: 10px;
    margin-top: 14px;
    border-radius: 999px;
    background: #eceff3;
    overflow: hidden;
}

.qq-pet-stage-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #111111 0%, #5b6472 100%);
}

.qq-pet-stage-steps {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.qq-pet-stage-steps span {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
}

.qq-pet-stage-steps span.active {
    color: #111111;
    font-weight: 700;
}

.qq-pet-stage-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
}

.qq-pet-hero-card {
    position: relative;
    text-align: center;
    padding-top: 46px;
}

.qq-pet-bubble {
    position: absolute;
    top: 16px;
    right: 16px;
    max-width: 68%;
    padding: 10px 12px;
    border-radius: 16px 16px 4px 16px;
    background: #111111;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

.qq-pet-avatar {
    width: 104px;
    height: 104px;
    margin: 0 auto 12px;
    border-radius: 28px;
    background: linear-gradient(135deg, #f8fafc 0%, #eceff4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 24px rgba(15, 23, 42, 0.08);
}

.qq-pet-name-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.qq-pet-name-input,
.pet-adoption-input,
.qq-schedule-field select {
    flex: 1;
    min-width: 0;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    border-radius: 14px;
    padding: 11px 12px;
    font-size: 13px;
    color: #111111;
}

.qq-pet-name-input {
    max-width: 180px;
    text-align: center;
}

.qq-pet-rename-btn,
.pet-adoption-btn {
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.qq-pet-rename-btn,
.pet-adoption-btn.primary {
    background: #111111;
    color: #ffffff;
}

.pet-adoption-btn.secondary {
    background: #f3f4f6;
    color: #111111;
}

.qq-pet-species-line {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7280;
}

.qq-pet-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.qq-pet-stat-item {
    padding: 10px 8px;
    border-radius: 16px;
    background: #f7f8fa;
}

.qq-pet-stat-label {
    font-size: 11px;
    color: #6b7280;
}

.qq-pet-stat-value {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #111111;
}

.qq-pet-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.qq-pet-action-btn {
    border: none;
    border-radius: 18px;
    background: #f7f8fa;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
}

.qq-pet-action-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.qq-pet-action-icon {
    font-size: 20px;
}

.qq-pet-action-main {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
}

.qq-pet-action-desc {
    font-size: 11px;
    line-height: 1.5;
    color: #6b7280;
}

.qq-pet-log-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.qq-pet-log-item {
    padding: 12px;
    border-radius: 16px;
    background: #f8fafc;
}

.qq-pet-log-main {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.qq-pet-log-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #111111;
    font-size: 11px;
    font-weight: 600;
}

.qq-pet-log-role.is-ai {
    background: #111111;
    color: #ffffff;
}

.qq-pet-log-action {
    font-size: 12px;
    font-weight: 600;
    color: #111111;
}

.qq-pet-log-text {
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
}

.pet-adoption-overlay {
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.28);
    z-index: 6000;
}

.pet-adoption-overlay.active {
    display: flex;
}

.pet-adoption-container {
    position: relative;
    width: min(420px, calc(100vw - 26px));
    height: auto;
    padding: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1;
}

.pet-adoption-overlay.active .pet-adoption-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
}

.pet-adoption-content {
    padding: 22px;
}

.pet-adoption-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.pet-adoption-title {
    font-size: 20px;
    font-weight: 800;
    color: #111111;
}

.pet-adoption-subtitle {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
}

.pet-adoption-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111111;
    font-size: 20px;
    cursor: pointer;
}

.pet-adoption-section {
    margin-top: 18px;
}

.pet-adoption-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #111111;
}

.pet-adoption-species-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pet-species-choice {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 24px;
    color: #111111;
    cursor: pointer;
}

.pet-species-choice span {
    font-size: 12px;
    font-weight: 600;
}

.pet-species-choice.active {
    border-color: #111111;
    background: #111111;
    color: #ffffff;
}

.pet-adoption-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.qq-schedule-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.qq-schedule-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qq-schedule-field span {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.qq-schedule-entry-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.qq-schedule-entry {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: #f8fafc;
}

.qq-schedule-entry-time {
    flex: 0 0 108px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #6b7280;
}

.qq-schedule-entry-time strong {
    font-size: 13px;
    color: #111111;
}

.qq-schedule-entry-main {
    flex: 1;
    min-width: 0;
}

.qq-schedule-entry-title {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
}

.qq-schedule-entry-meta,
.qq-schedule-entry-note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
}

@media (max-width: 420px) {
    .qq-pet-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qq-pet-action-grid,
    .qq-schedule-control-grid,
    .pet-adoption-species-grid {
        grid-template-columns: 1fr;
    }

    .qq-pet-bubble {
        position: static;
        max-width: none;
        margin-bottom: 12px;
        border-radius: 16px;
    }

    .qq-schedule-entry {
        flex-direction: column;
    }

    .qq-schedule-entry-time {
        flex: none;
    }
}