/* ============================================================
   设计令牌（Design Tokens）
   ============================================================ */
:root{
    /* 颜色 */
    --body-bg:#f5f8ff;
    --body-bg-alt:#eef3fb;
    --body-text:#121720;
    --body-text-soft:#4a5568;
    --card-bg:#ffffff;
    --card-bg-hover:#fafcff;
    --card-border:#e3e9f3;
    --card-border-hover:#a8d8ff;
    --card-text:#4a5568;
    --meta-text:#8899aa;

    /* 主色 */
    --accent:#00d0ff;
    --accent-hover:#33e0ff;
    --accent-soft:rgba(0,208,255,0.10);
    --accent-border:rgba(0,208,255,0.32);
    --accent-deep:#0a63d6;

    /* 语义色 */
    --danger:#ff4d4f;
    --danger-soft:rgba(255,77,79,0.10);
    --warn:#ff9800;
    --warn-soft:rgba(255,152,0,0.10);
    --success:#28a745;
    --success-soft:rgba(40,167,69,0.10);

    /* 圆角 */
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:14px;
    --radius-xl:20px;
    --radius-pill:999px;

    /* 阴影 */
    --shadow-sm:0 1px 3px rgba(15,23,42,0.06);
    --shadow-md:0 4px 14px rgba(15,23,42,0.08);
    --shadow-lg:0 12px 32px rgba(15,23,42,0.10);
    --shadow-accent:0 8px 28px rgba(0,208,255,0.20);
    --shadow-glow:0 0 0 4px rgba(0,208,255,0.15);

    /* 间距 */
    --gap-xs:6px;
    --gap-sm:10px;
    --gap-md:16px;
    --gap-lg:24px;
    --gap-xl:32px;

    /* 动画 */
    --ease:cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:0.15s;
    --dur:0.22s;
    --dur-slow:0.4s;

    /* 布局 */
    --header-h:60px;
    --footer-h:44px;
}

html.dark{
    --body-bg:#0b111a;
    --body-bg-alt:#0f1722;
    --body-text:#e8eef7;
    --body-text-soft:#aab8cc;
    --card-bg:#141d2b;
    --card-bg-hover:#182433;
    --card-border:#223046;
    --card-border-hover:#00d0ff;
    --card-text:#b8c8dc;
    --meta-text:#667788;

    --accent-soft:rgba(0,208,255,0.14);
    --accent-border:rgba(0,208,255,0.4);

    --shadow-sm:0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:0 4px 14px rgba(0,0,0,0.35);
    --shadow-lg:0 12px 32px rgba(0,0,0,0.5);
    --shadow-accent:0 8px 28px rgba(0,208,255,0.28);
}

/* ============================================================
   基础重置
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    background:var(--body-bg);
    color:var(--body-text);
    width:100vw;
    min-height:calc(100vh - var(--header-h));
    overflow-x:hidden;
    padding-top:var(--header-h);
    padding-bottom:70px;
    font-family:"Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:background .3s var(--ease), color .3s var(--ease);
}

img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* 自定义滚动条 */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
    background:rgba(140,160,190,0.3);
    border-radius:5px;
    border:2px solid transparent;
    background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
    background:rgba(140,160,190,0.55);
    background-clip:padding-box;
}

/* 文本选中 */
::selection{
    background:rgba(0,208,255,0.3);
    color:var(--body-text);
}

/* ============================================================
   顶部导航
   ============================================================ */
.header-nav{
    width:100%;
    height:var(--header-h);
    background:linear-gradient(to bottom, #121720, #0f141c);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    position:fixed;
    top:0;left:0;
    z-index:9999;
    border-bottom:1px solid rgba(0,208,255,0.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 2px 16px rgba(0,0,0,0.35);
}

.left-nav{
    display:flex;
    gap:30px;
    align-items:center;
    width:180px;
    min-width:120px;
}

.site-title{
    color:var(--accent);
    font-size:22px;
    font-weight:700;
    letter-spacing:0.5px;
    transition:color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
    cursor:default;
}
.site-title:hover{
    text-shadow:0 0 16px rgba(0,208,255,0.6);
}

.center-search{
    display:flex;
    align-items:center;
    gap:8px;
    position:relative;
    flex:1;
    max-width:480px;
    justify-content:center;
}

.search-input{
    background:#1a2332;
    color:#fff;
    border:1px solid rgba(0,208,255,0.3);
    padding:8px 14px;
    border-radius:var(--radius-sm);
    outline:none;
    width:100%;
    max-width:320px;
    font-size:14px;
    font-family:inherit;
    transition:all var(--dur) var(--ease);
}
.search-input::placeholder{color:#667788;}
.search-input:focus{
    border-color:var(--accent);
    background:#1e2a3d;
    box-shadow:var(--shadow-glow);
}
.search-input:hover{
    border-color:rgba(0,208,255,0.55);
}

.search-btn{
    background:linear-gradient(to bottom, #00d0ff, #0099cc);
    color:#0a1620;
    border:none;
    border-radius:var(--radius-sm);
    padding:8px 18px;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    transition:all var(--dur-fast) var(--ease);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 6px rgba(0,208,255,0.3);
    white-space:nowrap;
}
.search-btn:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(0,208,255,0.4);
}
.search-btn:active{
    transform:translateY(0);
    filter:brightness(0.95);
}

.right-lang{
    width:180px;
    min-width:120px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    align-items:center;
}

.setting-btn{
    display:flex !important;
    width:36px !important;
    height:36px !important;
    border-radius:var(--radius-sm) !important;
    background:linear-gradient(to bottom, #2aaacf, #1a7fa5) !important;
    color:#fff !important;
    border:none !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    z-index:999 !important;
    font-size:14px !important;
    transition:all var(--dur) var(--ease);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.25);
}
.setting-btn:hover{
    filter:brightness(1.1);
    transform:rotate(15deg) scale(1.05);
}
.setting-btn:active{
    transform:rotate(15deg) scale(0.98);
}

.lang-select{
    background:#1a2332;
    color:#fff;
    border:1px solid rgba(0,208,255,0.3);
    padding:7px 10px;
    border-radius:var(--radius-sm);
    outline:none;
    cursor:pointer;
    font-size:13px;
    font-family:inherit;
    transition:all var(--dur) var(--ease);
}
.lang-select:hover{
    border-color:var(--accent);
    background:#1e2a3d;
}
.lang-select:focus{
    border-color:var(--accent);
    box-shadow:var(--shadow-glow);
}

/* ============================================================
   天气栏
   ============================================================ */
.time-weather-bar{
    position:absolute;
    left:0;
    top:var(--header-h);
    width:100%;
    height:260px;
    overflow:hidden;
    border-radius:0;
    z-index:2;
    background:#0f1722;
    display:flex;
}

.double-wrap{width:100%;height:100%;display:flex;flex-direction:row;}
.single-weather{width:100%;height:100%;position:relative;}
.double-left,.double-right{width:50%;height:100%;position:relative;overflow:hidden;}

.sky-img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    left:0;top:0;
    transition:opacity 1.2s ease, filter 1.2s ease, transform 8s ease;
}
.time-weather-bar:hover .sky-img{
    transform:scale(1.03);
}

.time-text{
    position:absolute;
    top:16px;
    color:#fff;
    font-size:15px;
    font-weight:500;
    padding:6px 14px;
    background:rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:var(--radius-pill);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    text-shadow:0 1px 4px rgba(0,0,0,0.8);
    z-index:10;
    letter-spacing:0.3px;
}
#singleTimeText, #leftTimeText{left:16px;}
#rightTimeText{right:16px;left:auto;}
#leftSkyImg{filter:brightness(0.95) saturate(1.1);}
#rightSkyImg{filter:brightness(0.8) saturate(0.9);}

/* ============================================================
   3D 方块
   ============================================================ */
.flip-box{
    position:relative;
    margin-top:320px;
    left:50%;
    transform:translateX(-50%);
    width:px;
    height:px;
    z-index:3;
    border-radius:var(--radius-md);
}

.flip-front,.flip-back{
    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    background:;
    border:none;
    border-radius:var(--radius-md);
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:;
    font-size:px;
    padding:16px;
    text-align:center;
    word-break:break-all;
    overflow:hidden;
}
.flip-front{background:;}
.flip-back{background:#121720;transform:rotateY(180deg);}

.flip-inner{
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    transition:transform 0.8s var(--ease);
}

.slide-wrap{width:100%;height:100%;display:flex;transition:transform 0.6s var(--ease);}
.slide-item{
    flex-shrink:0;
    width:px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:10px;
    word-wrap:break-word;
    word-break:break-all;
}

.page-btn{
    width:44px;
    height:44px;
    background:rgba(0,0,0,0.3);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(0,208,255,0.5);
    border-radius:50%;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent);
    font-size:20px;
    cursor:pointer;
    z-index:10;
    user-select:none;
    transition:all var(--dur) var(--ease);
}
.page-btn:hover{
    background:rgba(0,208,255,0.2);
    border-color:var(--accent);
    transform:translateY(-50%) scale(1.1);
    box-shadow:0 0 20px rgba(0,208,255,0.4);
}
.page-btn:active{
    transform:translateY(-50%) scale(0.95);
}
.btn-left{left:-56px}
.btn-right{right:-56px}

/* ============================================================
   分类按钮 —— 玻璃胶囊
   ============================================================ */
.category-sidebar{
    position:absolute;
    top:320px;
    left:calc(50% - 480px - 130px);
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:4;
    padding:14px;
    background:rgba(15,23,34,0.78);
    backdrop-filter:blur(14px) saturate(1.6);
    -webkit-backdrop-filter:blur(14px) saturate(1.6);
    border:1px solid rgba(0,208,255,0.22);
    border-radius:var(--radius-lg);
    box-shadow:
        0 10px 32px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.category-btn{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 18px 11px 14px;
    border:1px solid rgba(0,208,255,0.25);
    background:linear-gradient(to bottom, #16202e, #0f1722);
    color:#c8d6e8;
    border-radius:var(--radius-md);
    cursor:pointer;
    white-space:nowrap;
    font-size:14px;
    font-family:inherit;
    font-weight:500;
    transition:all var(--dur) var(--ease-out);
    position:relative;
    overflow:hidden;
    min-width:120px;
    text-align:left;
}
.category-btn::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:3px;
    background:var(--accent);
    transform:scaleY(0);
    transform-origin:center;
    transition:transform var(--dur) var(--ease-out);
}
.category-btn:hover{
    background:linear-gradient(to bottom, #1a2a3a, #14202e);
    border-color:rgba(0,208,255,0.6);
    color:#fff;
    transform:translateX(3px);
    box-shadow:0 3px 12px rgba(0,208,255,0.18);
}
.category-btn:hover::before{transform:scaleY(1);}

.category-btn.active{
    background:linear-gradient(to bottom, #2aaacf, #1a7fa5);
    border-color:var(--accent);
    color:#fff;
    font-weight:600;
    box-shadow:
        0 4px 16px rgba(0,208,255,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transform:translateX(4px);
}
.category-btn.active::before{transform:scaleY(1);}
.category-btn:active{transform:translateX(4px) scale(0.98);}

.cat-icon{font-size:16px;line-height:1;transition:transform var(--dur) var(--ease-bounce);}
.category-btn:hover .cat-icon{transform:scale(1.2) rotate(-8deg);}
.cat-text{flex:1;}

/* ============================================================
   文章容器
   ============================================================ */
.article-wrap{
    width:95%;
    max-width:1700px;
    margin:60px auto 40px;
    position:relative;
    z-index:5;
}

.random-section{margin-top:10px;}

.random-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:20px;
}
@media (max-width:1500px){.random-grid{grid-template-columns:repeat(4, 1fr);}}
@media (max-width:1200px){.random-grid{grid-template-columns:repeat(3, 1fr);}}
@media (max-width:850px){.random-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:520px){.random-grid{grid-template-columns:1fr;}}

/* ============================================================
   热门文章
   ============================================================ */
.hot-section{margin-bottom:40px;}

.hot-title{
    font-size:15px;
    font-weight:600;
    color:var(--warn);
    padding:7px 16px;
    background:var(--warn-soft);
    border:1px solid rgba(255,152,0,0.3);
    border-radius:var(--radius-pill);
    display:inline-block;
    margin-bottom:18px;
}

.hot-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:20px;
}
@media (max-width:1500px){.hot-grid{grid-template-columns:repeat(4, 1fr);}}
@media (max-width:1200px){.hot-grid{grid-template-columns:repeat(3, 1fr);}}
@media (max-width:850px){.hot-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:520px){.hot-grid{grid-template-columns:1fr;}}

/* ============================================================
   文章卡片 —— 现代玻璃卡片
   ============================================================ */
.article-card{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:var(--radius-lg);
    padding:20px 22px;
    transition:
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease-out),
        background var(--dur) var(--ease);
    position:relative;
    display:flex;
    flex-direction:column;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}
.article-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top right, rgba(0,208,255,0.08), transparent 60%);
    opacity:0;
    transition:opacity var(--dur) var(--ease);
    pointer-events:none;
}
.article-card:hover{
    box-shadow:var(--shadow-accent), var(--shadow-md);
    border-color:var(--card-border-hover);
    background:var(--card-bg-hover);
    transform:translateY(-4px);
}
.article-card:hover::after{opacity:1;}
.article-card:active{transform:translateY(-1px);}

.article-title{
    font-size:16px;
    color:var(--body-text);
    font-weight:600;
    line-height:1.5;
    margin-bottom:12px;
    padding-right:76px;
    word-break:break-word;
    transition:color var(--dur) var(--ease);
}
.article-card:hover .article-title{color:var(--accent-deep);}
html.dark .article-card:hover .article-title{color:var(--accent);}

.article-content{
    font-size:13.5px;
    color:var(--card-text);
    line-height:1.75;
    margin-bottom:14px;
    white-space:pre-wrap;
    word-break:break-word;
    position:relative;
}
.article-content.collapsed .full-text{display:none;}
.article-content.collapsed .preview-text{display:inline;}
.article-content.expanded .preview-text{display:none;}
.article-content.expanded .full-text{display:inline;}

.article-content .ellipsis{color:var(--meta-text);}

.article-content .expand-btn{
    display:inline-block;
    margin-top:10px;
    padding:5px 14px;
    font-size:12px;
    color:var(--accent-deep);
    background:var(--accent-soft);
    border:1px solid var(--accent-border);
    border-radius:var(--radius-pill);
    cursor:pointer;
    font-family:inherit;
    font-weight:500;
    transition:all var(--dur-fast) var(--ease);
}
.article-content .expand-btn:hover{
    background:rgba(0,208,255,0.22);
    border-color:var(--accent);
    transform:translateY(-1px);
}
.article-content .expand-btn:active{transform:translateY(0);}

.article-meta{
    font-size:12px;
    color:var(--meta-text);
    line-height:1.5;
    margin-bottom:12px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
}

/* 作者区 */
.article-author{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:auto;
    padding:12px 8px 6px;
    border-top:1px solid var(--card-border);
    cursor:pointer;
    transition:all var(--dur) var(--ease);
    border-radius:var(--radius-sm);
    margin-left:-8px;
    margin-right:-8px;
}
.article-author:hover{
    background:var(--accent-soft);
    padding-left:14px;
    padding-right:14px;
}

.author-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    background:linear-gradient(135deg, #7fb8f0, #2f74cc);
    color:#fff;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.95),
        0 0 0 3px rgba(80,120,200,0.35);
    user-select:none;
    transition:transform var(--dur) var(--ease-bounce);
}
.article-author:hover .author-avatar{
    transform:scale(1.08);
}

.author-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.author-name{
    font-size:13px;
    font-weight:600;
    color:var(--body-text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.author-meta{font-size:11px;color:var(--meta-text);}

/* 投票按钮 */
.vote-box{display:flex;gap:10px;margin-top:12px;}

.vote-btn{
    flex:1;
    padding:8px 0;
    border-radius:var(--radius-sm);
    border:1px solid var(--card-border);
    background:var(--card-bg);
    color:var(--body-text);
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    transition:all var(--dur-fast) var(--ease);
    font-family:inherit;
}
.vote-btn:hover{
    background:var(--accent-soft);
    border-color:var(--accent-border);
    transform:translateY(-1px);
}
.vote-btn:active{transform:translateY(0);}
.vote-btn.up.active{
    background:#e6f7ff;
    border-color:#1890ff;
    color:#1890ff;
    box-shadow:0 2px 8px rgba(24,144,255,0.2);
}
.vote-btn.down.active{
    background:#fff2f0;
    border-color:var(--danger);
    color:var(--danger);
    box-shadow:0 2px 8px rgba(255,77,79,0.2);
}
html.dark .vote-btn{border-color:var(--card-border);}
.vote-btn:disabled{opacity:0.5;cursor:not-allowed;}

/* 空状态 */
.empty-article-tip{
    text-align:center;
    padding:80px 20px;
    color:var(--meta-text);
    font-size:15px;
    background:var(--card-bg);
    border:1px dashed var(--card-border);
    border-radius:var(--radius-lg);
}

/* ============================================================
   底部栏
   ============================================================ */
.footer-bar{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:var(--footer-h);
    background:linear-gradient(to bottom, #121720, #0a0e14);
    border-top:1px solid rgba(0,208,255,0.1);
    padding:0 20px;
    z-index:999;
    display:flex;
    flex-direction:row;
    gap:24px;
    align-items:center;
    box-shadow:0 -2px 14px rgba(0,0,0,0.35);
}
.footer-bar .links-group{display:flex;gap:24px;flex-wrap:wrap;}
.footer-bar a{
    color:#8899aa;
    text-decoration:none;
    font-size:13px;
    transition:color var(--dur) var(--ease);
    position:relative;
}
.footer-bar a:hover{color:var(--accent);}
.footer-bar a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:1px;
    background:var(--accent);
    transition:width var(--dur) var(--ease);
}
.footer-bar a:hover::after{width:100%;}

/* ============================================================
   搜索弹窗
   ============================================================ */
.search-tip-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
}
.tip-text{
    font-size:18px;
    color:#fff;
    padding:24px 36px;
    background:rgba(20,29,43,0.95);
    border-radius:var(--radius-lg);
    border:1px solid rgba(0,208,255,0.3);
    box-shadow:var(--shadow-lg);
}
.search-highlight{
    color:#ff4d4f;
    font-weight:bold;
    background:rgba(255,77,79,0.15);
    padding:0 2px;
    border-radius:3px;
}

/* ============================================================
   设置弹窗
   ============================================================ */
.setting-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:none;
    z-index:10000;
    align-items:center;
    justify-content:center;
}
.set-window{
    width:740px;
    height:540px;
    max-width:94vw;
    max-height:86vh;
    background:var(--card-bg);
    border-radius:var(--radius-lg);
    display:flex;
    overflow:hidden;
    position:relative;
    border:1px solid var(--card-border);
    box-shadow:var(--shadow-lg);
    animation:popIn 0.25s var(--ease-out);
}
@keyframes popIn{
    from{opacity:0;transform:scale(0.94);}
    to{opacity:1;transform:scale(1);}
}
.set-close{
    position:absolute;
    right:14px;
    top:12px;
    font-size:22px;
    background:none;
    border:none;
    color:var(--body-text);
    cursor:pointer;
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all var(--dur) var(--ease);
}
.set-close:hover{
    background:var(--danger-soft);
    color:var(--danger);
    transform:rotate(90deg);
}
.set-menu-left{
    width:180px;
    border-right:1px solid var(--card-border);
    padding:14px 0;
    background:var(--body-bg-alt);
    flex-shrink:0;
}
.set-menu-item{
    padding:12px 22px;
    cursor:pointer;
    font-size:14px;
    transition:all var(--dur-fast) var(--ease);
    border-left:3px solid transparent;
}
.set-menu-item:hover{background:var(--accent-soft);}
.set-menu-item.active{
    background:var(--accent-soft);
    color:var(--accent);
    border-left-color:var(--accent);
    font-weight:600;
}
.set-content-right{flex:1;padding:24px;overflow-y:auto;}
.set-tab{display:none;}
.set-tab.active{display:block;animation:fadeIn 0.25s var(--ease);}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.line{margin:16px 0;border-bottom:1px solid var(--card-border);}

.black-item{
    display:flex;
    justify-content:space-between;
    padding:10px 14px;
    border:1px solid var(--card-border);
    border-radius:var(--radius-sm);
    margin:6px 0;
    font-size:13px;
    transition:all var(--dur-fast) var(--ease);
}
.black-item:hover{
    border-color:var(--accent-border);
    background:var(--accent-soft);
}
.black-del{
    color:var(--danger);
    background:none;
    border:none;
    cursor:pointer;
    font-size:12px;
    transition:opacity var(--dur) var(--ease);
}
.black-del:hover{opacity:0.7;}

.upload-hour-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:8px 0;}
.hour-upload-item{
    font-size:13px;
    padding:10px !important;
    border-radius:var(--radius-sm) !important;
    transition:all var(--dur) var(--ease);
}
.hour-upload-item:hover{
    transform:translateY(-1px);
    box-shadow:var(--shadow-sm);
}

/* ============================================================
   反馈窗口
   ============================================================ */
.fb-window{
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    width:520px !important;
    max-width:94vw !important;
    height:auto !important;
    max-height:82vh !important;
    transform:translate(-50%,-50%) !important;
    display:none;
    z-index:10001;
    flex-direction:column;
    animation:popIn 0.25s var(--ease-out);
}
.fb-window.show{display:flex !important;}
.fb-window.win-maximized{
    top:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
    border-radius:0 !important;
}
.fb-window.win-maximized .win-titlebar{border-radius:0 !important;}

.fb-body{flex:1;overflow-y:auto;background:var(--body-bg);padding:0;}

.fb-form{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:26px 30px;
    color:var(--body-text);
}

.fb-field{display:flex;flex-direction:column;gap:8px;}
.fb-field label{
    font-size:13px;
    font-weight:500;
    color:var(--body-text);
}

.fb-form input[type="text"],
.fb-form textarea{
    width:100%;
    box-sizing:border-box;
    padding:11px 14px;
    font-size:14px;
    font-family:inherit;
    border:1px solid var(--card-border);
    border-radius:var(--radius-sm);
    outline:none;
    background:var(--card-bg);
    color:var(--body-text);
    transition:all var(--dur) var(--ease);
    resize:vertical;
}
.fb-form textarea{min-height:110px;line-height:1.6;}
.fb-form input[type="text"]:focus,
.fb-form textarea:focus{
    border-color:var(--accent);
    box-shadow:var(--shadow-glow);
    background:var(--card-bg-hover);
}
.fb-form input[type="text"]::placeholder,
.fb-form textarea::placeholder{color:var(--meta-text);}

.fb-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:8px;
    padding-top:16px;
    border-top:1px solid var(--card-border);
}

.fb-btn{
    min-width:100px;
    padding:10px 22px;
    font-size:14px;
    font-family:inherit;
    font-weight:500;
    cursor:pointer;
    border:1px solid #7fa8dd;
    border-radius:var(--radius-sm);
    color:#0a2b52;
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.85) 0%,
            rgba(255,255,255,0.25) 48%,
            rgba(255,255,255,0.00) 49%,
            rgba(255,255,255,0.30) 100%),
        linear-gradient(to bottom,#eaf4ff,#a7c8ee 55%,#8bb1de 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 2px 4px rgba(0,0,0,0.15);
    transition:all var(--dur-fast) var(--ease);
}
.fb-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.fb-btn:active{transform:translateY(0);filter:brightness(0.95);}

.fb-btn-cancel{
    border-color:#a0a8b5;
    color:var(--body-text);
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.85) 0%,
            rgba(255,255,255,0.25) 48%,
            rgba(255,255,255,0.00) 49%,
            rgba(255,255,255,0.30) 100%),
        linear-gradient(to bottom,#f7f9fc,#d4dae3 55%,#c0c8d3 100%);
}

/* ============================================================
   举报按钮 & 举报窗口
   ============================================================ */
.report-btn{
    position:absolute;
    top:16px;
    right:16px;
    padding:4px 12px;
    font-size:12px;
    font-family:inherit;
    color:var(--danger);
    background:var(--danger-soft);
    border:1px solid rgba(255,77,79,0.35);
    border-radius:var(--radius-pill);
    cursor:pointer;
    transition:all var(--dur-fast) var(--ease);
    z-index:2;
    font-weight:500;
}
.report-btn:hover{
    background:rgba(255,77,79,0.22);
    border-color:var(--danger);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(255,77,79,0.25);
}
.report-btn:active{transform:translateY(0);}

.report-window{
    position:fixed !important;
    top:50% !important;
    left:50% !important;
    width:520px !important;
    max-width:94vw !important;
    height:auto !important;
    max-height:82vh !important;
    transform:translate(-50%,-50%) !important;
    display:none;
    z-index:10002;
    flex-direction:column;
    animation:popIn 0.25s var(--ease-out);
}
.report-window.show{display:flex !important;}
.report-window.win-maximized{
    top:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100vh !important;
    transform:none !important;
    border-radius:0 !important;
}
.report-window.win-maximized .win-titlebar{border-radius:0 !important;}

.report-body{flex:1;overflow-y:auto;background:var(--body-bg);padding:0;}

.report-form{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:24px 28px;
    color:var(--body-text);
}
.report-target{
    font-size:13px;
    padding:12px 16px;
    background:var(--accent-soft);
    border-left:3px solid var(--accent);
    border-radius:var(--radius-sm);
    word-break:break-all;
    line-height:1.5;
}
.report-target b{color:var(--accent-deep);}
html.dark .report-target b{color:var(--accent);}

.report-section-title{
    font-size:13px;
    font-weight:600;
    color:var(--body-text);
    margin-top:6px;
    margin-bottom:4px;
}
.report-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 16px;
    padding:4px 0;
}
.report-options label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--body-text);
    cursor:pointer;
    padding:8px 10px;
    border-radius:var(--radius-sm);
    transition:all var(--dur-fast) var(--ease);
    user-select:none;
    border:1px solid transparent;
}
.report-options label:hover{
    background:var(--accent-soft);
    border-color:var(--accent-border);
}
.report-options input[type="checkbox"]{
    cursor:pointer;
    width:16px;
    height:16px;
    accent-color:var(--accent);
}
.report-form textarea{
    width:100%;
    box-sizing:border-box;
    padding:11px 14px;
    font-size:14px;
    font-family:inherit;
    border:1px solid var(--card-border);
    border-radius:var(--radius-sm);
    outline:none;
    background:var(--card-bg);
    color:var(--body-text);
    transition:all var(--dur) var(--ease);
    resize:vertical;
    min-height:90px;
    line-height:1.6;
}
.report-form textarea:focus{
    border-color:var(--accent);
    box-shadow:var(--shadow-glow);
}
.report-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:8px;
    padding-top:16px;
    border-top:1px solid var(--card-border);
}
.report-btn-cancel,
.report-btn-submit{
    min-width:100px;
    padding:10px 22px;
    font-size:14px;
    font-family:inherit;
    font-weight:500;
    cursor:pointer;
    border:1px solid #7fa8dd;
    border-radius:var(--radius-sm);
    color:#0a2b52;
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.85) 0%,
            rgba(255,255,255,0.25) 48%,
            rgba(255,255,255,0.00) 49%,
            rgba(255,255,255,0.30) 100%),
        linear-gradient(to bottom,#eaf4ff,#a7c8ee 55%,#8bb1de 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.12),
        0 2px 4px rgba(0,0,0,0.15);
    transition:all var(--dur-fast) var(--ease);
}
.report-btn-cancel:hover,
.report-btn-submit:hover{filter:brightness(1.08);transform:translateY(-1px);}
.report-btn-cancel:active,
.report-btn-submit:active{transform:translateY(0);}

.report-btn-submit{
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.75) 0%,
            rgba(255,255,255,0.20) 48%,
            rgba(255,255,255,0.00) 49%,
            rgba(255,255,255,0.20) 100%),
        linear-gradient(to bottom,#7fd9ff,#1a90c0 55%,#0a5a80 100%);
    color:#fff;
    text-shadow:0 1px 1px rgba(0,0,0,0.4);
    border-color:#0a63d6;
}
/* ============================================================
   邮箱验证按钮（顶部导航）
   ============================================================ */
.email-btn{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    background:linear-gradient(to bottom, #2aaacf, #1a7fa5);
    color:#fff;
    border:none;
    border-radius:var(--radius-sm, 6px);
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    cursor:pointer;
    transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 2px 6px rgba(0,0,0,0.2);
    position:relative;
    white-space:nowrap;
}
.email-btn:hover{
    filter:brightness(1.1);
    transform:translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 4px 14px rgba(42,170,207,0.5);
}
.email-btn:active{
    transform:translateY(0);
    filter:brightness(0.95);
}
.email-btn .email-icon{
    font-size:14px;
    line-height:1;
}
.email-btn .email-text{
    font-size:13px;
    line-height:1;
}

/* 已通过验证时的状态（可选） */
.email-btn.verified{
    background:linear-gradient(to bottom, #28a745, #1e7e34);
}
.email-btn.verified .email-icon::after{
    content:"✓";
    position:absolute;
    top:-6px;
    right:-6px;
    width:16px;
    height:16px;
    background:#fff;
    color:#28a745;
    border-radius:50%;
    font-size:11px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
.email-btn.verified .email-icon{position:relative;}

/* 移动端隐藏文字 */
@media (max-width:850px){
    .email-btn .email-text{display:none;}
    .email-btn{padding:8px 10px;}
}