/* ===== CSS 变量（主题系统）===== */
:root {
    --bg-gradient-1: radial-gradient(ellipse 900px 500px at 50% 45%, rgba(160,195,235,0.6) 0%, rgba(180,205,238,0.35) 40%, transparent 70%);
    --bg-gradient-2: linear-gradient(175deg, #d5e3f2 0%, #e1ebf6 40%, #e9f0f9 100%);
    --dot-color: rgba(140,175,215,0.14);
    --glow-color: rgba(150,185,230,0.3);
    --grid-minor: rgba(100,140,190,0.05);
    --grid-major: rgba(100,140,190,0.095);

    --logo-color: #2a6dd4;
    --title-color: #2c3e5a;
    --text-color: #555;
    --text-light: #8a95a5;
    --text-placeholder: #aab5c4;

    --search-bg: rgba(255,255,255,0.72);
    --search-border: rgba(200,210,225,0.5);
    --search-focus-bg: rgba(255,255,255,0.88);
    --search-focus-border: rgba(100,150,220,0.35);
    --search-shadow: rgba(100,130,180,0.06);
    --search-focus-shadow: rgba(100,140,200,0.12);

    --tag-bg: rgba(255,255,255,0.5);
    --tag-border: rgba(200,210,225,0.45);
    --tag-hover-bg: rgba(255,255,255,0.8);
    --tag-hover-border: rgba(160,185,220,0.5);
    --tag-text: #7a8a9e;
    --tag-hover-text: #5a7a9a;

    --action-bg: rgba(255,255,255,0.6);
    --action-border: rgba(200,210,225,0.45);
    --action-hover-bg: rgba(255,255,255,0.85);
    --action-hover-border: rgba(160,185,220,0.5);
    --action-text: #5a6a7e;
    --action-hover-text: #3a5a7a;

    --lang-bg: #e8ecf1;
    --lang-btn-color: #888;
    --lang-btn-active-bg: #fff;
    --lang-btn-active-color: #333;
    --lang-btn-hover-color: #555;
    --lang-shadow: rgba(0,0,0,0.06);

    --theme-btn-bg: rgba(255,255,255,0.5);
    --theme-btn-border: rgba(200,210,225,0.45);
    --theme-btn-hover-bg: rgba(255,255,255,0.8);
    --theme-btn-text: #6a7a8e;
}

/* 暗黑主题 */
[data-theme="dark"] {
    --bg-gradient-1: radial-gradient(ellipse 900px 500px at 50% 45%, rgba(45,65,105,0.6) 0%, rgba(32,48,80,0.4) 40%, transparent 70%);
    --bg-gradient-2: linear-gradient(175deg, #141d33 0%, #18233c 40%, #1d2946 100%);
    --dot-color: rgba(90,120,175,0.12);
    --glow-color: rgba(55,85,140,0.32);
    --grid-minor: rgba(120,155,210,0.03);
    --grid-major: rgba(120,155,210,0.06);

    --logo-color: #5b9af5;
    --title-color: #d0d8e8;
    --text-color: #b0b8c8;
    --text-light: #7a8599;
    --text-placeholder: #5a6578;

    --search-bg: rgba(30,40,60,0.72);
    --search-border: rgba(60,75,100,0.5);
    --search-focus-bg: rgba(35,48,72,0.88);
    --search-focus-border: rgba(91,154,245,0.4);
    --search-shadow: rgba(0,0,0,0.15);
    --search-focus-shadow: rgba(91,154,245,0.15);

    --tag-bg: rgba(40,52,75,0.5);
    --tag-border: rgba(60,75,100,0.45);
    --tag-hover-bg: rgba(50,65,90,0.7);
    --tag-hover-border: rgba(91,154,245,0.3);
    --tag-text: #8899aa;
    --tag-hover-text: #aabbdd;

    --action-bg: rgba(30,40,60,0.6);
    --action-border: rgba(60,75,100,0.45);
    --action-hover-bg: rgba(40,52,75,0.8);
    --action-hover-border: rgba(91,154,245,0.3);
    --action-text: #8899aa;
    --action-hover-text: #aabbdd;

    --lang-bg: #2a3450;
    --lang-btn-color: #7a8599;
    --lang-btn-active-bg: #3a4565;
    --lang-btn-active-color: #d0d8e8;
    --lang-btn-hover-color: #b0b8c8;
    --lang-shadow: rgba(0,0,0,0.15);

    --theme-btn-bg: rgba(40,52,75,0.5);
    --theme-btn-border: rgba(60,75,100,0.45);
    --theme-btn-hover-bg: rgba(50,65,90,0.7);
    --theme-btn-text: #8899aa;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg-gradient-2);overflow:hidden;transition:background .4s}

body{
    position:relative;
    background:var(--bg-gradient-1),var(--bg-gradient-2);
}

/* ===== 动态流体背景 ===== */
#fluidBg{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:1;
    pointer-events:none;
    opacity:1;
    filter:blur(55px) saturate(1.05);
}
/* 胶片颗粒质感 */
.grain{
    position:fixed;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:0.5;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.06'/></svg>");
}
[data-theme="dark"] .grain{
    opacity:0.32;
}
.main{
    z-index:10;
}
body::before{
    content:'';position:absolute;inset:0;
    background-image:
        linear-gradient(var(--grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
        linear-gradient(var(--grid-minor) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
    background-size:160px 160px, 160px 160px, 32px 32px, 32px 32px;
    z-index:2;
    pointer-events:none;
    transition:background-image .4s;
    /* 中心渐隐遮罩：网格只在画面四周若隐若现 */
    -webkit-mask-image:-webkit-radial-gradient(50% 42%, ellipse cover, transparent 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.7) 60%, #000 100%);
    mask-image:radial-gradient(ellipse 110% 85% at 50% 42%, transparent 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.7) 60%, #000 100%);
    /* 缓慢呼吸：明暗随时间轻微浮动 */
    animation:gridBreath 16s ease-in-out infinite alternate;
}
@keyframes gridBreath{
    0%{opacity:0.55}
    100%{opacity:1}
}
body::after{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 600px 400px at 50% 35%, var(--glow-color) 0%, transparent 60%);
    pointer-events:none;
    transition:background .4s;
}

/* ===== 导航栏 ===== */
.navbar{
    position:fixed;top:0;left:0;right:0;
    display:flex;align-items:center;justify-content:space-between;
    padding:28px 80px;
    z-index:100;
}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo-icon{width:28px;height:28px;display:block}
.logo-text{font-size:17px;font-weight:700;color:var(--logo-color);letter-spacing:0.5px;transition:color .4s}

.nav-right{display:flex;align-items:center;gap:16px}
.nav-app{font-size:14px;color:var(--text-color);text-decoration:none;transition:color .2s}
.nav-app:hover{color:var(--logo-color)}

.lang-switch{
    display:inline-flex;align-items:center;gap:2px;
    background:var(--lang-bg);border-radius:18px;padding:3px 4px;
    font-size:13px;transition:background .3s;
}
.lang-btn{
    padding:3px 12px;border-radius:16px;border:none;cursor:pointer;
    background:transparent;color:var(--lang-btn-color);font-size:13px;transition:all .25s;
}
.lang-btn.active{background:var(--lang-btn-active-bg);color:var(--lang-btn-active-color);box-shadow:0 1px 3px var(--lang-shadow)}
.lang-btn:hover:not(.active){color:var(--lang-btn-hover-color)}

/* 主题切换按钮 */
.theme-btn{
    width:34px;height:34px;
    border-radius:50%;border:1px solid var(--theme-btn-border);
    background:var(--theme-btn-bg);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .3s;
    color:var(--theme-btn-text);
}
.theme-btn:hover{
    background:var(--theme-btn-hover-bg);
    border-color:rgba(160,185,220,0.4);
}
.theme-btn svg{width:16px;height:16px;transition:all .3s}
[data-theme="dark"] .theme-btn .icon-sun{display:block}
[data-theme="dark"] .theme-btn .icon-moon{display:none}
[data-theme="light"] .theme-btn .icon-sun{display:none}
[data-theme="light"] .theme-btn .icon-moon{display:block}
/* 默认显示月亮（亮色模式） */
.theme-btn .icon-sun{display:none}
.theme-btn .icon-moon{display:block}

/* ===== 主体内容 ===== */
.main{
    position:relative;z-index:10;
    display:flex;flex-direction:column;align-items:center;
    padding-top:22vh;
}

/* 公告 */
.announcement{
    display:flex;align-items:center;gap:6px;
    font-size:13.5px;color:var(--text-light);
    margin-bottom:36px;
    cursor:pointer;
    transition:color .2s;
    max-width:700px;
    text-align:center;
}
.announcement:hover{color:var(--tag-hover-text)}
.announcement .diamond{
    width:10px;height:10px;flex-shrink:0;
    background:linear-gradient(135deg,#5b8def,#7ea8f5);
    border-radius:2px;transform:rotate(45deg);
}
.announcement .arrow{font-size:12px;margin-left:2px;opacity:0.6}

/* 标题 */
.hero-title{
    position:relative;
    display:inline-block;
    font-size:52px;font-weight:300;
    color:var(--title-color);
    letter-spacing:14px;
    margin-bottom:48px;
    text-indent:14px;
    transition:color .4s;
    --mx:50%; --my:50%;
    --lens-r:42px;
}

/* ===== 标题圆形放大镜效果 ===== */
/* 黑色圆形底色 */
.hero-title::before{
    content:'';
    position:absolute;
    left:var(--mx); top:var(--my);
    width:calc(var(--lens-r) * 2);
    height:calc(var(--lens-r) * 2);
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:1px solid rgba(20,20,20,0.6);
    background:#111;
    box-shadow:0 0 14px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.4);
    opacity:0;
    transition:opacity .3s;
    pointer-events:none;
    z-index:1;
}
/* 圆圈内白色文字（不放大），裁剪在圆圈内 */
.hero-title::after{
    content:attr(data-text);
    position:absolute;
    left:0; top:0;
    width:100%;
    color:#fff;
    -webkit-clip-path:circle(var(--lens-r) at var(--mx) var(--my));
    clip-path:circle(var(--lens-r) at var(--mx) var(--my));
    opacity:0;
    transition:opacity .3s;
    pointer-events:none;
    text-indent:14px;
    letter-spacing:14px;
    white-space:pre;
    z-index:2;
}
.hero-title:hover::before,
.hero-title:hover::after{
    opacity:1;
}
[data-theme="dark"] .hero-title::before{
    border-color:rgba(255,255,255,0.25);
    background:#000;
    box-shadow:0 0 16px rgba(0,0,0,0.5), inset 0 0 10px rgba(0,0,0,0.5);
}

/* ===== 搜索框 ===== */
.search-wrapper{
    position:relative;
    width:780px;max-width:92vw;
    background:var(--search-bg);
    backdrop-filter:blur(12px);
    border:1px solid var(--search-border);
    border-radius:22px;
    padding:6px 6px 14px;
    box-shadow:0 2px 16px var(--search-shadow);
    transition:all .3s;
}
.search-wrapper:focus-within{
    background:var(--search-focus-bg);
    border-color:var(--search-focus-border);
    box-shadow:0 4px 24px var(--search-focus-shadow);
}
.search-box{
    display:block;
    width:100%;min-height:96px;
    max-height:280px;
    background:transparent;
    border:none;
    border-radius:16px;
    padding:18px 18px 8px 18px;
    font-size:15px;line-height:1.7;color:var(--text-color);
    outline:none;
    box-shadow:none;
    resize:none;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--search-border) transparent;
    font-family:inherit;
}
.search-box::-webkit-scrollbar{width:5px}
.search-box::-webkit-scrollbar-thumb{background:var(--search-border);border-radius:3px}
.search-box::-webkit-scrollbar-track{background:transparent}
.search-box::placeholder{color:var(--text-placeholder)}

.search-footer{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:6px;
    padding:0 10px;
}
.footer-right{
    display:flex;align-items:center;gap:12px;
}
.char-count{
    font-size:12px;
    color:var(--text-placeholder);
    letter-spacing:0.5px;
    font-variant-numeric:tabular-nums;
    transition:color .25s;
    user-select:none;
}
.char-count.warn{color:#d98a2b}
.char-count.full{color:#e05252;font-weight:600}

.tags{display:flex;gap:10px}
.tag{
    display:inline-flex;align-items:center;gap:5px;
    padding:6px 16px;
    border-radius:20px;
    font-size:13px;color:var(--tag-text);
    background:var(--tag-bg);
    border:1px solid var(--tag-border);
    cursor:pointer;
    transition:all .25s;
}
.tag:hover{
    background:var(--tag-hover-bg);
    border-color:var(--tag-hover-border);
    color:var(--tag-hover-text);
}

/* 点击激活：整体变蓝 */
.tag.active{
    background:linear-gradient(135deg,#4a8de8,#6da8f4);
    border-color:#4a8de8;
    color:#fff;
    box-shadow:0 2px 10px rgba(74,141,232,0.35);
}
.tag.active:hover{
    background:linear-gradient(135deg,#3f7fdc,#5f9bee);
    border-color:#3f7fdc;
    color:#fff;
}
.tag.active svg{opacity:1}
[data-theme="dark"] .tag.active{
    background:linear-gradient(135deg,#2f6fd0,#4a8de8);
    border-color:#5b9af5;
    color:#fff;
    box-shadow:0 2px 12px rgba(91,154,245,0.4);
}

.tag svg{width:15px;height:15px;opacity:0.7}

.submit-btn{
    width:38px;height:38px;
    border-radius:50%;border:none;
    background:linear-gradient(135deg,#4a8de8,#6da8f4);
    color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 12px rgba(74,141,232,0.3);
    transition:all .25s;
}
.submit-btn:hover{
    transform:scale(1.08);
    box-shadow:0 4px 18px rgba(74,141,232,0.4);
}
.submit-btn svg{width:18px;height:18px}

/* ===== 底部按钮 ===== */
.action-bar{
    display:flex;gap:14px;
    margin-top:40px;
    flex-wrap:wrap;justify-content:center;
}
.action-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:11px 22px;
    background:var(--action-bg);
    backdrop-filter:blur(8px);
    border:1px solid var(--action-border);
    border-radius:24px;
    font-size:14px;color:var(--action-text);
    cursor:pointer;
    text-decoration:none;
    transition:all .25s;
}
.action-btn:hover{
    background:var(--action-hover-bg);
    border-color:var(--action-hover-border);
    box-shadow:0 2px 12px rgba(100,140,200,0.08);
    color:var(--action-hover-text);
}
.action-btn svg{width:16px;height:16px;opacity:0.65}

/* ===== 暗黑模式平滑过渡 ===== */
body, body::before, body::after,
.hero-title, .logo-text, .announcement,
.search-wrapper, .search-box, .tag, .action-btn, .nav-app, .lang-btn {
    transition: color .4s, background .4s, border-color .4s, box-shadow .4s;
}

/* ===== 响应式 ===== */
@media(max-width:700px){
    .hero-title{font-size:36px;letter-spacing:8px;text-indent:8px}
    .main{padding-top:18vh}
    .search-wrapper{width:92vw}
    .action-bar{gap:10px}
    .action-btn{padding:9px 16px;font-size:13px}
    .navbar{padding:14px 20px}
    .announcement{font-size:12px;padding:0 10px}
}

/* ===== 开屏动画 ===== */
.splash{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
    background:var(--bg-gradient-1),var(--bg-gradient-2);
    animation:splashOut .7s ease 1.7s forwards;
}
.splash-logo-wrap{position:relative;width:96px;height:96px;display:grid;place-items:center}
.splash-ring{
    position:absolute;inset:0;border-radius:50%;
    border:2px solid var(--logo-color,#4d6bfe);opacity:0;
    animation:splashRing 1.5s ease-out .25s;
}
.splash-logo{
    width:88px;height:88px;display:block;
    filter:drop-shadow(0 10px 26px rgba(77,107,254,.35));
    animation:splashLogo .95s cubic-bezier(.2,.85,.25,1) both;
}
.splash-name{
    font-size:26px;font-weight:600;color:var(--title-color,#2c3e5a);
    animation:splashName 1s ease .4s both;
}
.splash-bar{
    width:120px;height:3px;border-radius:3px;overflow:hidden;
    background:var(--grid-major,rgba(0,0,0,.08));
}
.splash-bar i{
    display:block;height:100%;width:100%;
    background:var(--logo-color,#4d6bfe);
    transform-origin:left center;transform:scaleX(0);
    animation:splashBar 1.5s ease .35s forwards;
}
@keyframes splashLogo{
    0%{opacity:0;transform:scale(.6) translateY(10px);filter:blur(6px)}
    60%{opacity:1;transform:scale(1.06) translateY(0);filter:blur(0)}
    100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes splashRing{
    0%{opacity:0;transform:scale(.6)}
    25%{opacity:.55}
    100%{opacity:0;transform:scale(2.1)}
}
@keyframes splashName{
    0%{opacity:0;letter-spacing:.5em;transform:translateY(8px)}
    100%{opacity:1;letter-spacing:.18em;transform:translateY(0)}
}
@keyframes splashBar{
    0%{transform:scaleX(0)}
    100%{transform:scaleX(1)}
}
@keyframes splashOut{
    0%{opacity:1;visibility:visible}
    100%{opacity:0;visibility:hidden}
}
/* 尊重系统“减少动态效果”偏好 */
@media (prefers-reduced-motion: reduce){
    .splash,.splash-logo,.splash-ring,.splash-name,.splash-bar i{animation:none!important}
    .splash{transition:opacity .3s;opacity:0;visibility:hidden}
}