/* =========================================
   全局变量与基础设置
   ========================================= */
:root {
    /* 🔴 核心修复：纯白背景 */
    --bg-page: #ffffff; 
    --card-bg: #ffffff;
    
    /* 边框稍微加深一点，适配纯白底色 */
    --border-soft: #eaeaea;
    
    --text-main: #1c1c1e;
    --text-sub: #636366;
    --accent: #2563eb;
    --bull: #16a34a;
    --bear: #e11d48;
    --star-color: #e11d48;
    
    /* 头部统一背景变量 */
    --header-info-bg: rgba(255, 255, 255, 0.95);

    /* 用户/登录图标的尺寸与颜色 */
    --user-icon-size: 32px;
    --user-icon-color-light: #48484a;
    --user-icon-color-dark: #b0b0b0;
    --user-icon-bg: #f3f3f3;

    /* --- AI 信号专用配色 (Tailwind Variables) --- */
    /* AI Buy (Sky Blue) */
    --ai-sky-bg: #f0f9ff;      /* sky-50 */
    --ai-sky-border: #0ea5e9;  /* sky-500 */
    --ai-sky-text: #0369a1;    /* sky-700 */

    /* AI Sell (Red - Explicit overrides) */
    --ai-red-bg: #fef2f2;      /* red-50 */
    --ai-red-border: #dc2626;  /* red-600 */
    --ai-red-text: #b91c1c;    /* red-700 */

    /* AI Watch (Gray) */
    --ai-gray-bg: #f9fafb;     /* gray-50 */
    --ai-gray-border: #9ca3af; /* gray-400 */
    --ai-gray-text: #4b5563;   /* gray-600 */

    /* Confidence Levels */
    --ai-conf-high: #10b981;   /* emerald-500 */
    --ai-conf-mid: #eab308;    /* yellow-500 */
    --ai-conf-low: #9ca3af;    /* gray-400 */
    --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: #000000;
        --card-bg: #1c1c1e;
        --border-soft: #38383a;
        --text-main: #f5f5f7;
        --text-sub: #8e8e93;
        
        /* 🔴 修复：深色模式头部统一背景 */
        --header-info-bg: rgba(28, 28, 30, 0.95);

        /* --- AI 信号深色模式适配 --- */
        --ai-sky-bg: #0c4a6e;      /* sky-900 */
        --ai-sky-border: #38bdf8;  /* sky-400 */
        --ai-sky-text: #e0f2fe;    /* sky-100 */

        --ai-red-bg: #450a0a;      /* red-950 */
        --ai-red-border: #f87171;  /* red-400 */
        --ai-red-text: #fee2e2;    /* red-100 */

        --ai-gray-bg: #27272a;     /* zinc-800 */
        --ai-gray-border: #52525b; /* zinc-600 */
        --ai-gray-text: #d4d4d8;   /* zinc-300 */
    }
    .shell,.footer{border-color:#38383a!important;background:var(--card-bg)}
    .sticky-header-group{background:transparent!important;}
    
    /* 🔴 修复：深色模式头部组件统一背景 */
    .topbar, .info-row, .tab-switcher {
        background: var(--header-info-bg) !important;
    }
    
    .date-separator span{background:var(--card-bg)}
    .item{border-bottom-color:#38383a}
    .copy-icon svg, .share-icon span{fill:#8e8e93!important; color: #8e8e93!important}
    .login-input{background:var(--bg-page)}
    
    /* 暗色模式下用户/登录图标颜色 */
    .login-btn .material-symbols-outlined { color: var(--user-icon-color-dark); }
    #user-icon.user-icon-style { background: #38383a !important; color: #f5f5f7 !important; }
    
    /* ✅ 公告栏背景设置为页面的卡片背景色 */
    .section-title-row {
        background: var(--card-bg) !important; 
    }
    
    /* 暗色模式下切换按钮调整 */
    .tab-btn { color: var(--text-main); }
    .tab-btn:not(.active) { color: var(--text-sub); } 
    
    /* 暗色模式下的 segmented control 容器和滑块 */
    .segmented-control {
        background: #3a3a3c;
        box-shadow: inset 0 0 0 0.5px #48484a, inset 0 1px 2px rgba(0, 0, 0, 0.15);
    }
    .segmented-control-slider {
        background: var(--card-bg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    /* 暗色模式下推送开关调整 */
    .slider {
        background-color: #3a3a3c !important; 
    }
    .slider:before {
        background-color: var(--card-bg) !important; 
    }
    input:checked + .slider:before {
         background-color: white !important; 
    }
    
    /* 🔴 修复：Top News 深色模式背景 */
    .top-news-box {
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
    }
    .top-news-header {
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }
}

*{margin:0;padding:0;box-sizing:border-box}

/* 🔴 核心修复：彻底隐藏滚动条 (增强版) */
/* 1. 针对 Webkit 内核 (Chrome, Safari) */
::-webkit-scrollbar {
    display: none; /* 关键：直接不显示 */
    width: 0 !important;
    height: 0 !important;
    background: transparent;
}

/* 2. 针对 Firefox, IE, Edge */
html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    /* 核心：为保证 sticky 吸顶，此处不要加 overflow-x: hidden */
}

body{
    min-height:100vh;
    font-family: var(--font-stack); 
    background:var(--bg-page);
    color:var(--text-main);
    padding: 0; 
    font-size:15px;
    /* 🔴 新增：防止橡皮筋效果 */
    overscroll-behavior-y: none; 
}

/* =========================================
   布局容器
   ========================================= */
.shell{
    width:100%;
    max-width:720px; 
    background:var(--card-bg);
    margin: 0 auto; 
    
    border-radius:0; 
    box-shadow: none;
    border: none;
    
    /* 🔴 FIX 1: 移除 Flex 布局，以修复 position: sticky 失效的问题 */
    display: block; 
    /* 🔴 FIX 1: 移除 min-height 依赖，改用 block 布局 */
    min-height: 100vh;
}

/* 桌面端阴影 */
@media (min-width: 721px) {
    .shell { box-shadow: 0 0 50px rgba(0,0,0,0.05); }
}

/* =========================================
   1. 固定头部组 (Logo + 行情 + 筛选)
   ========================================= */
.sticky-header-group {
    position: sticky; 
    position: -webkit-sticky;
    top: 0; 
    z-index: 100;
    background: transparent; 
    /* 移除顶部的圆角和阴影，实现纯平原生感 */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
}

/* 板块1：顶部 Logo 栏 */
.topbar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 14px;
    padding-top: env(safe-area-inset-top);
    height: calc(62.67px + env(safe-area-inset-top));
    border-bottom: 1px solid var(--border-soft);
    
    /* 🔴 修改：统一使用变量背景 */
    background: var(--header-info-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.brand-logo{
    width:42px;
    height:42px;
    border-radius:999px;
    overflow:hidden;
    flex-shrink:0;
}

.brand-logo img{width:100%;height:100%;object-fit:cover}

.brand-name{
    font-size:18px;
    letter-spacing:0.16em;
    font-weight:600;
}

/* 板块2：行情信息栏 - 液体毛玻璃效果 */
.info-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 14px 8px;
    font-size:14px;
    
    /* 🔴 修改：统一使用变量背景 */
    background: var(--header-info-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* 🔴 FIX 2: 恢复 info-row 的底部边框，作为 Quote 和 Tab 之间的分割线 */
    border-bottom: 1px solid var(--border-soft);
}

.info-date{
    color:var(--text-sub);
    white-space:nowrap;
    font-weight: 600; 
}

.info-quote{display:flex;align-items:center;gap:6px;white-space:nowrap}

.quote-label{
    color: transparent; 
    letter-spacing: normal; 
    font-size: 0; 
    width: 16px; 
    height: 16px;
    background: url('https://www.aiea.app/gold.svg') center center no-repeat;
    background-size: cover;
    border-radius: 50%; 
    flex-shrink: 0;
    margin-right: 4px; 
}

.quote-price{font-variant-numeric:tabular-nums;font-weight:600;font-size:17px}
.quote-change{
    font-variant-numeric:tabular-nums;
    font-size:16px;
    font-weight:700;
    min-width:66px;
}
.quote-change.up{color:var(--bull);animation:bounce .6s}
.quote-change.down{color:var(--bear);animation:bounce .6s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* =========================================
   板块3：控制行 (Tab切换 + 推送开关)
   ========================================= */

/* Tab Switcher 作为行容器 (使用液体毛玻璃背景) */
.tab-switcher {
    display: flex;
    align-items: center; 
    gap: 12px; 
    padding: 6px 14px 8px; 
    
    /* 🔴 修复：统一使用变量背景，确保深色模式一致 */
    background: var(--header-info-bg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    border-bottom: 1px solid var(--border-soft); 
    box-shadow: none; 
    
    flex-shrink: 0;
    margin-right: 0; 
}

/* =========================================
   ✅ 公告栏 (不吸顶，无吸顶背景)
   ========================================= */
.section-title-row{
    padding: 8px 14px; 
    font-size: 13px;   
    font-weight: 500; 
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    
    /* ✅ 移除吸顶背景和模糊效果，使用卡片背景色 */
    background: var(--card-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.section-text {
    flex: 1;
    line-height: 1.5;
    font-weight: 500; 
}

.section-close {
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.2s;
}

.section-close:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text-main);
}

.section-close span {
    font-size: 18px; 
}

/* =========================================
   8. 顶部重要文章列表 (Top News List Style)
   ========================================= */
/* 🔴 核心修复：纯白背景 + 细边框 + 阴影 */
.top-news-box {
    margin: 10px 14px 2px;
    padding: 12px 14px;
    
    /* 改为浅灰色背景 */
    background: #f5f5f7; 
    
    border-radius: 12px;
    
    /* 移除边框 */
    border: none; 
    
    /* 移除阴影 */
    box-shadow: none;
    
    /* 确保有入场动画 */
    animation: fade-in 0.4s ease;
}

.top-news-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    
    /* 加上内部分割线 */
    border-bottom: 1px solid var(--border-soft); 
}

.top-news-icon {
    font-size: 18px;
    color: var(--accent); /* 品牌蓝 */
    margin-right: 6px;
}

.top-news-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 列表单项 */
.top-news-item {
    display: flex;
    align-items: flex-start;
    padding: 6px 0;
    cursor: pointer;
    line-height: 1.5;
    transition: opacity 0.2s;
}

.top-news-item:active {
    opacity: 0.6;
}

/* 序号 (01, 02) */
.top-news-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    margin-right: 10px;
    width: 20px;
    flex-shrink: 0;
    font-family: -apple-system, monospace;
}

/* 标题文字 */
.top-news-text {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
    
    /* 限制显示1行 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* =========================================
   iOS 风格分段控制
   ========================================= */

/* 1. 分段控件的外部容器 */
.segmented-control {
    position: relative;
    display: flex;
    padding: 2px; /* 内部厚度 */
    background: var(--border-soft); /* 浅灰色背景 */
    border-radius: 15px; /* ✅ 增加圆角，使其变为胶囊形 */
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.04);
    height: 30px; /* 强制高度：26px内容 + 2px*2 padding */
    box-sizing: border-box;
}

/* 2. 滑块 (白色的滑动选中条) */
.segmented-control-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    height: 26px; /* 明确高度：26px，与右侧开关 Switch 高度一致 */
    background: var(--card-bg);
    border-radius: 13px; /* ✅ 配合外部容器增加圆角 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0.5px 1px rgba(0,0,0,0.08); /* 优化阴影 */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* 3. 按钮 (透明文本标签) */
.tab-btn {
    position: relative;
    z-index: 2;
    flex: 1 1 auto; 
    height: 26px; /* 明确高度：26px */
    padding: 0 10px;
    min-width: 50px;
    font-size: 13px; /* iOS 标准小控件字号 */
    font-weight: 500;
    line-height: 26px; /* 垂直居中文本 */
    cursor: pointer;
    background: transparent;
    border: none;
    white-space: nowrap;
    transition: color 0.2s;
    color: var(--text-main);
    text-align: center;
}

.tab-btn:not(.active) {
    color: var(--text-sub);
}

.tab-btn.active {
    color: var(--text-main); 
}

.tab-btn:hover {
    background: transparent; 
}


/* =========================================
   推送开关组 (iOS Switch Style)
   ========================================= */

.push-toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* iOS Switch 容器 */
.ios-switch {
    position: relative;
    display: inline-block;
    width: 46px; 
    height: 26px; /* 保持 26px，与左侧 Tab 高度一致 */
    flex-shrink: 0;
}

/* 隐藏原始 Checkbox */
.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* 滑块 (Slider) 本体 */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-soft); 
    transition: .4s;
    border-radius: 26px; 
    box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
}

/* 滑块上的圆圈 (Knob) */
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Checkbox 被选中时的背景色 */
input:checked + .slider {
    background-color: var(--bull); 
}

/* Checkbox 被选中时，将圆圈滑到右边 */
input:checked + .slider:before {
    transform: translateX(20px); 
}

/* =========================================
   策略流 Feed
   ========================================= */
.feed{
    /* 🔴 FIX 1: 移除 flex 依赖，改为 block */
    flex:1 1 auto; 
    padding:8px 14px 10px;
    min-height:200px;
}

.date-separator{
    text-align:center;
    font-size:13px;
    color:#9ca3af;
    padding:10px 0 4px;
}

.date-separator span{
    padding:0 8px;
    background:var(--card-bg);
}

.item{
    display:grid;
    grid-template-columns:56px 10px minmax(0,1fr);
    column-gap:6px;
    /* 🔴 FIX 5: 调整策略条目的整体 padding，减小上下间距 */
    padding:10px 4px 10px 0; 
    font-size:15px;
    border-bottom:1px solid var(--border-soft);
    /* 2. 列表项入场动画 (更加丝滑) */
    animation: slideUpFade 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

.item:last-child{border-bottom:none}

.item-time{
    text-align:left;
    font-variant-numeric:tabular-nums;
    color:#9ca3af;
    padding-top:2px;
}

.timeline{
    position:relative;
    width:3px;
    min-height:40px;
    margin-left:-2px;
}

.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:2px;
    transform:translateX(-50%);
    width:8px;
    height:8px;
    border-radius:999px;
    background:#fee2e2;
    border:2px solid #f97373;
    box-sizing:border-box;
}

.timeline::after{
    content:"";
    position:absolute;
    left:50%;
    top:14px;
    bottom:-8px;
    transform:translateX(-50%);
    width:2px;
    background:linear-gradient(to bottom,#fecaca,rgba(248,250,252,0));
}

.item-body{
    display:flex;
    flex-direction:column;
    /* 🔴 FIX 5: 减小策略文字/标签间的垂直间距 */
    gap:6px; 
}

/* =========================================
   标签与动作按钮
   ========================================= */
.item-tags-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
}

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

.pill{
    border-radius:999px;
    padding:0 10px;
    height: 22px;
    line-height: 20px;
    font-size:13px;
    border:1px solid transparent;
    white-space:nowrap;
    font-weight:500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.pill-dir-long{background:#e8f8eb;border-color:rgba(22,163,74,.45);color:var(--bull)}
.pill-dir-short{background:#ffe5e9;border-color:rgba(225,29,72,.45);color:var(--bear)}
.pill-dir-watch{background:#fef9c3;border-color:rgba(234,179,8,.5);color:#ca8a04}
.pill-dir-news{background:#fef2f2;border-color:rgba(225,29,72,.55);color:var(--bear)}

.pill-status-right{background:#ecfdf3;border-color:rgba(22,163,74,.45);color:var(--bull)}
.pill-status-wrong{background:#fef2f2;border-color:rgba(225,29,72,.55);color:var(--bear)}
.pill-status-pending{background:var(--user-icon-bg);color:var(--text-sub)}

.pill-status-star {
    background: #fef2f2;
    border-color: rgba(247, 183, 49, 0.6);
    color: var(--star-color);
    font-size: 14px;
    padding: 0 8px;
}

.pill-star-icon {
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
}

/* --- [新增] AI 信号专用标签样式 --- */
/* AI Action: BUY (Sky Blue) */
.pill-ai-buy {
    background-color: var(--ai-sky-bg);
    border: 1px solid var(--ai-sky-border);
    color: var(--ai-sky-text);
}

/* AI Action: SELL (Red) */
.pill-ai-sell {
    background-color: var(--ai-red-bg);
    border: 1px solid var(--ai-red-border);
    color: var(--ai-red-text);
}

/* AI Action: WATCH (Gray) */
.pill-ai-watch {
    background-color: var(--ai-gray-bg);
    border: 1px solid var(--ai-gray-border);
    color: var(--ai-gray-text);
}

/* Confidence: High (>=75%, Bright Green Solid) */
.pill-conf-high {
    background-color: var(--ai-conf-high);
    color: #ffffff;
    border: 1px solid var(--ai-conf-high);
}

/* Confidence: Mid (>=50%, Warning Yellow Solid) */
.pill-conf-mid {
    background-color: var(--ai-conf-mid);
    color: #ffffff;
    border: 1px solid var(--ai-conf-mid);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1); /* 提升黄色背景白字可读性 */
}

/* Confidence: Low (<50%, Neutral Gray Solid) */
.pill-conf-low {
    background-color: var(--ai-conf-low);
    color: #ffffff;
    border: 1px solid var(--ai-conf-low);
}

/* --- [新增] AI 信号正文排版样式 --- */
.ai-title {
    font-weight: 700;
    font-size: 16px;
    margin-top: 14px;
    margin-bottom: 6px;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.item-text strong {
    font-weight: 700;
    color: var(--text-main);
}

.action-icons { display: flex; gap: 4px; }

.copy-icon, .share-icon{
    cursor:pointer;
    opacity:0.7;
    transition:all .2s;
    padding:4px;
    border-radius:6px;
    display:flex;
}

.copy-icon:hover, .share-icon:hover{
    opacity:1;
    background:rgba(0,0,0,.06);
}

.copy-icon svg{ width:20px; height:20px; fill:var(--text-sub); }
.copy-icon.copied svg{fill:#16a34a!important}

.share-icon { align-items: center; justify-content: center; }

.share-icon span {
    font-family: 'Material Symbols Outlined';
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: var(--text-sub);
    fill: var(--text-sub);
}

/* =========================================
   转发/截图功能 (无需修改，保持不变)
   ========================================= */
#share-staging {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: -10;
    padding: 0;
    background: #ffffff;
}

.share-card-wrapper {
    width: 380px;
    padding: 25px 20px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
}

.share-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.share-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}
.share-header-left img { width: 42px; height: 42px; border-radius: 999px; }
.share-signal-source { font-size: 12px; color: #6b7280; font-weight: 500; white-space: nowrap; }

.share-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e5e5e5;
    margin-bottom: 15px;
}
.share-time-date { font-size: 13px; color: #9ca3af; white-space: nowrap; }
.share-info-row .item-tags { margin-left: auto; }

.share-content { margin: 0; padding: 0; color: var(--text-main); }

.share-card-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #e5e5e5;
    margin-bottom: 10px; 
}
.share-footer-text {
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #9ca3af;
    margin-bottom: 10px;
}
.share-footer-qr img {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.share-dialog {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65); 
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    flex-direction: column;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.share-dialog.active { opacity: 1; visibility: visible; }

.share-image-container { max-width: 95vw; max-height: 90vh; }
.share-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    box-shadow:0 10px 40px rgba(0,0,0,.6);
}

.share-tip {
    color: #fff;
    font-size: 14px;
    margin-top: 15px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

/* =========================================
   图片放大 (Lightbox) (无需修改，保持不变)
   ========================================= */
.item-image-wrap{
    /* 🔴 改进 2: 减小图片与文字间的垂直间距 (从 6px 减到 3px) */
    margin-top:3px; 
    border-radius:10px;
    overflow:hidden;
    cursor:zoom-in;
    background:#000;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.item-image{
    width:100%;
    height:auto;
    max-height:82vh;
    object-fit:contain;
    display:block;
    background:#000;
    transition:transform .2s;
}

.lightbox-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.92);
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:all .3s;
}

.lightbox-overlay.active{opacity:1;visibility:visible}

.lightbox-img{
    max-width:95vw;
    max-height:95vh;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 10px 40px rgba(0,0,0,.6);
}

.footer{
    padding:8px 12px 10px;
    font-size:11px;
    color:#9ca3af;
    text-align:center;
    border-top:1px solid var(--border-soft);
    background:var(--card-bg);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    /* 🔴 FIX 1: 移除 margin-top: auto，因为它依赖于被移除的 Flex 父容器 */
    /* margin-top: auto; */
}

/* =========================================
   登录功能样式 (无需修改，保持不变)
   ========================================= */
.login-btn, #user-icon.user-icon-style {
    width: var(--user-icon-size);
    height: var(--user-icon-size);
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.login-btn {
    background: var(--user-icon-bg);
}

.login-btn .material-symbols-outlined {
    font-size: 24px;
    color: var(--user-icon-color-light); 
}

.login-btn:hover {
    background: var(--border-soft);
}

#user-icon.user-icon-style {
    background: #2563eb; 
    color: white; 
    font-weight: 600; 
    font-size: 16px; 
    box-shadow: none !important; 
}

#user-icon.user-icon-style:hover {
    background: #2563eb; 
    box-shadow: none !important; 
}

@media (prefers-color-scheme: dark) {
    #user-icon.user-icon-style { 
        background: #2563eb !important; 
        color: #f5f5f7 !important; 
    }
}


/* 液体毛玻璃效果 2: 登录弹窗背景 */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-modal-overlay.active { opacity: 1; visibility: visible; }

.login-modal {
    background: rgba(255, 255, 255, 0.9); 
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 380px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease-out;
}

@media (prefers-color-scheme: dark) {
    .login-modal {
        background: rgba(28, 28, 30, 0.9); 
    }
}

.login-modal-overlay.active .login-modal { transform: scale(1); }

.login-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: var(--text-sub);
    padding: 4px;
    border-radius: 50%;
}

.login-close:hover { background: rgba(0, 0, 0, 0.05); }

.login-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-main);
}

.login-tip { font-size: 14px; color: var(--text-sub); margin-bottom: 20px; }

.login-form { display: none; flex-direction: column; gap: 15px; }
.login-form.active { display: flex; }

.login-input {
    padding: 12px 15px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-size: 16px;
    background: var(--bg-page);
    color: var(--text-main);
}

.login-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.login-submit-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.login-submit-btn:hover { background: #1d4ed8; }
.login-submit-btn:disabled { background: #9ca3af; cursor: not-allowed; }

.login-resend-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.login-resend-btn:hover { background: rgba(37, 99, 235, 0.1); }
.login-error { color: var(--bear); font-size: 13px; min-height: 16px; }
/* =========================================
   移动端适配 (无需修改，保持不变)
   ========================================= */
@media(max-width:480px) {
    .login-modal { margin: 0 10px; width: auto; }
    body{padding:0}
    /* 🔴 确认：确保 shell 无圆角无边框 */
    .shell{border-radius:0; max-width:100%; box-shadow:none; border:none}
    
    .sticky-header-group { border-top-left-radius: 0; border-top-right-radius: 0; }
    .footer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    
    .topbar,.info-row,.section-title-row,.feed{padding-left:10px;padding-right:10px}
    /* 适配新的 controls-row */
    .controls-row {padding-left:10px;padding-right:10px}
    
    /* 适配 tab-switcher */
    .tab-switcher {padding-left:10px;padding-right:10px}
    
    .item{grid-template-columns:56px 10px minmax(0,1fr);padding:12px 6px}
    
    .login-modal {
        background: rgba(255, 255, 255, 0.95);
    }
    @media (prefers-color-scheme: dark) {
        .login-modal {
            background: rgba(28, 28, 30, 0.95);
        }
    }

    .tab-switcher { padding: 6px 10px 8px; }
}

/* =========================================
   骨架屏 (Skeleton Loading) [新增] (无需修改，保持不变)
   ========================================= */
/* 骨架屏动画：光影扫过效果 */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-wrapper {
    animation: fade-in 0.3s ease;
}

.skeleton-item {
    display: grid;
    grid-template-columns: 56px 10px minmax(0, 1fr); /* 保持与 .item 一致的布局 */
    column-gap: 6px;
    padding: 12px 4px 12px 0;
    border-bottom: 1px solid var(--border-soft);
}

/* 骨架屏通用背景与动画 */
.skeleton-bg {
    background: linear-gradient(90deg, var(--bg-page) 25%, var(--border-soft) 50%, var(--bg-page) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: 4px;
}

/* 左侧时间占位 */
.skeleton-time {
    height: 14px;
    width: 40px;
    margin-top: 4px;
}

/* 中间轴线占位 */
.skeleton-line-col {
    position: relative;
    width: 2px; /* 稍微细一点模拟轴线 */
    background: var(--border-soft);
    margin-left: 4px;
    height: 100%;
}

/* 右侧内容区 */
.skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 标签行占位 */
.skeleton-tags-row {
    display: flex;
    gap: 8px;
}
.skeleton-pill {
    width: 50px;
    height: 20px;
    border-radius: 999px;
}

/* 文本行占位 */
.skeleton-text-line {
    height: 14px;
    width: 100%;
}
.skeleton-text-line.short { width: 60%; }
.skeleton-text-line.image {
    width: 100%;
    height: 120px; /* 模拟图片高度 */
    margin-top: 5px;
    border-radius: 8px;
}

/* =========================================
   文本展开/收起 (Read More) 
   ========================================= */

/* 1. 正文通用排版 */
.item-text {
    line-height: 1.6;
    color: var(--text-main);
    font-size: 15px;
    word-break: break-word;
    white-space: pre-wrap;
    text-align: justify;
    display: block;
}

/* 2. 折叠容器 */
.item-text-container {
    position: relative;
    width: 100%;
    transition: max-height 0.3s ease;
    overflow: hidden;
}

/* 3. 折叠状态：限制高度 (约5行) */
.item-text-container.collapsed {
    max-height: 120px; 
}

/* 4. 展开状态：无限制 */
.item-text-container.expanded {
    max-height: none;
    overflow: visible;
    padding-bottom: 24px; /* 底部留出空间给“收起” */
}

/* 5. 按钮基础样式 (去除默认按钮样式) */
.read-more-btn {
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 15px; /* 与正文一致 */
    line-height: 1.6;
    background: transparent;
    padding: 0;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

/* === 状态 A: 折叠时 (微博经典样式) === */
.item-text-container.collapsed .read-more-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 20px; /* 左侧留出一点空间给渐变 */
    
    /* 核心：使用渐变背景遮住底下的文字，制造“距离感” */
    /* 从透明 -> 到背景色(85%处) -> 纯背景色 */
    background: linear-gradient(to right, rgba(255,255,255,0), var(--card-bg) 45%, var(--card-bg));
}

/* 适配暗色模式的渐变 */
@media (prefers-color-scheme: dark) {
    .item-text-container.collapsed .read-more-btn {
        background: linear-gradient(to right, rgba(28,28,30,0), var(--card-bg) 45%, var(--card-bg));
    }
}

/* 使用伪元素添加 "..." 和 "展开" 文字 */
.item-text-container.collapsed .read-more-btn::before {
    content: '... '; /* 这里是省略号 */
    color: var(--text-main); /* 省略号颜色跟随正文 */
}

.item-text-container.collapsed .read-more-btn::after {
    content: '展开'; /* 按钮文字 */
    color: #eb7350; /* 橙色 */
    /* 或者使用蓝色：color: #2563eb; */
    font-weight: 400;
    margin-left: 2px; /* ... 和 展开 之间的微小距离 */
}

/* 鼠标悬停时稍微变深，提示可点击 */
.item-text-container.collapsed .read-more-btn:hover::after {
    filter: brightness(0.9);
}

/* === 状态 B: 展开时 (变为底部的“收起”按钮) === */
.item-text-container.expanded .read-more-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    color: var(--text-sub); /* 灰色 */
    font-size: 13px;
    padding-top: 4px;
}

.item-text-container.expanded .read-more-btn::after {
    content: '收起';
}

.item-text-container.expanded .read-more-btn:hover {
    color: var(--text-main);
}


/* =========================================
   PWA 安装引导 (浮动胶囊) (无需修改，保持不变)
   ========================================= */
.pwa-capsule {
    position: fixed;
    bottom: 30px; /* 距离底部的位置 */
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* 默认向下隐藏 */
    width: 90%;
    max-width: 400px;
    background: var(--card-bg);
    border-radius: 50px; /* 胶囊形状 */
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border: 1px solid var(--border-soft);
    z-index: 999;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    pointer-events: none;
    /* 恢复 display: flex 确保内部布局正常 */
    display: flex;
    align-items: center;
    padding: 6px 6px 6px 8px; /* 紧凑内边距 */
}

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

.pwa-icon img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}

.pwa-info {
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pwa-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.pwa-desc {
    font-size: 11px;
    color: var(--text-sub);
}

.pwa-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#pwa-btn-install {
    background: var(--accent);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

#pwa-btn-install:hover {
    background: #1d4ed8;
}

.pwa-close-btn {
    width: 28px;
    height: 28px;
    background: var(--bg-page);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-sub);
}
.pwa-close-btn span { font-size: 18px; }

/* =========================================
   iOS 安装指引弹窗 (无需修改，保持不变)
   ========================================= */
.ios-guide-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 靠下显示 */
    padding-bottom: 40px;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.ios-guide-overlay.active { opacity: 1; visibility: visible; }

.ios-guide-card {
    background: var(--card-bg);
    width: 90%;
    max-width: 380px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    position: relative;
}

.ios-guide-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
}
.ios-guide-header img { width: 32px; height: 32px; border-radius: 8px; }

.ios-guide-close {
    margin-left: auto;
    padding: 4px;
    cursor: pointer;
    color: var(--text-sub);
}

.ios-guide-steps {
    font-size: 14px;
    line-height: 2;
    color: var(--text-main);
}

.step { display: flex; align-items: center; gap: 6px; }
.icon-inline { font-size: 18px; color: var(--accent); }
.ios-add-box {
    background: var(--bg-page);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid var(--border-soft);
}

/* 简单的箭头指示 */
.ios-arrow-down {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff; /* 指向底部的箭头 */
    margin-top: 10px;
    animation: bounce 1s infinite;
}
@media (prefers-color-scheme: dark) {
    .ios-arrow-down { border-top-color: #38383a; }
}

/* =========================================
   6. 原生质感增强 (触控与交互优化) (无需修改，保持不变)
   ========================================= */

/* 1. 禁止 iOS 橡皮筋回弹效果，让滚动更扎实 */
body {
    overscroll-behavior-y: none;
}

/* 2. 去除移动端点击按钮时的蓝色高亮背景 */
button, 
.tab-btn, 
.login-btn, 
.section-close, 
.share-icon, 
.copy-icon,
.read-more-btn,
.ios-switch,
#pwa-btn-install,
.pwa-close-btn,
.ios-guide-close {
    -webkit-tap-highlight-color: transparent;
}

/* 3. 禁止 UI 元素文字被长按选中 (只允许策略正文被选中) */
.topbar,
.info-row,
.tab-switcher,
.section-title-row,
.item-time,
.item-tags,
.footer,
.login-modal,
.pwa-capsule,
.ios-guide-card {
    -webkit-user-select: none; /* Safari */
    user-select: none;
}

/* 允许正文和弹窗提示被复制 */
.item-text, .share-tip {
    -webkit-user-select: text;
    user-select: text;
}

/* 4. 修复 PWA 胶囊在 iPhone X/11/12+ 上被底部黑条遮挡的问题 */
.pwa-capsule {
    bottom: calc(30px + env(safe-area-inset-bottom));
}

/* =========================================
   7. 终极交互微调 (按压反馈 + 入场动画) (无需修改，保持不变)
   ========================================= */

/* 1. 按钮按压回弹效果 (微缩) */
button:active, 
.tab-btn:active, 
.login-btn:active, 
.share-icon:active, 
.copy-icon:active,
.read-more-btn:not(.item-text-container.expanded + .read-more-btn):active, /* 排除展开后的收起按钮 */
#pwa-btn-install:active,
.pwa-close-btn:active,
.section-close:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* 3. 优化移动端点击响应速度 */
a, button, input, .item-image, .tab-btn {
    touch-action: manipulation;
}
/* =========================================
   12. 动画定义 (无需修改，保持不变)
   ========================================= */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}