/* ============================================
   站点导航 v15.5.8 前台样式
   蓝色圆环加载 / 满屏布局 / 全屏按钮
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{--p:#3b5bdb;--p-light:#5c7cfa;--bg:#f5f7fb;--card:#fff;--text:#1a1a2e;--shadow:0 2px 8px rgba(0,0,0,.06)}
body{font-family:-apple-system,'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;background:var(--bg);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
body.bg-img{background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}

/* ===== 加载动画（蓝色圆环） ===== */
#preloader{
  position:fixed;inset:0;width:100vw;height:100vh;
  background:radial-gradient(circle at 50% 40%,#e0e8ff 0%,#f0f4ff 40%,#e8edff 100%);
  z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);
  padding-left:var(--safe-left);padding-right:var(--safe-right);
  transition:opacity .45s ease-out,visibility .45s;overflow:hidden;
}
#preloader.fade-out{opacity:0;visibility:hidden;pointer-events:none}

.load-ring{width:140px;height:140px;position:relative;margin-bottom:32px}
.load-ring div{position:absolute;width:100%;height:100%;border-radius:50%;border:4px solid transparent;animation:spin 1.3s linear infinite}
.load-ring div:nth-child(1){border-top-color:#3b64e7;box-shadow:0 0 14px rgba(59,100,231,.38)}
.load-ring div:nth-child(2){width:82%;height:82%;top:9%;left:9%;border-top-color:#6388ff;box-shadow:0 0 12px rgba(99,136,255,.33);animation-duration:1.1s;animation-direction:reverse}
.load-ring div:nth-child(3){width:64%;height:64%;top:18%;left:18%;border-top-color:#9bb0ff;box-shadow:0 0 10px rgba(155,176,255,.27);animation-duration:1.5s}
.load-ring div:nth-child(4){width:46%;height:46%;top:27%;left:27%;border:3px solid #c2ceff;border-left-color:transparent;box-shadow:0 0 8px rgba(194,206,255,.2);animation-duration:.9s}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.load-glow-dot{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(84,123,255,.13) 0%,transparent 70%);animation:pulse-glow 2.2s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{transform:scale(.85);opacity:.4}50%{transform:scale(1.15);opacity:.8}}

.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:#648cff;box-shadow:0 0 6px #648cff}
@keyframes float-particle{0%{transform:translateY(0) translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(-100vh) translateX(40px);opacity:0}}

.load-text{font-size:24px;color:#243b8c;font-weight:600;margin-bottom:14px;letter-spacing:2px}
.load-sub{font-size:14px;color:#6072ad;letter-spacing:1px}
.dot-wrap{display:inline-block}
.dot-wrap span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3b64e7;margin:0 3px;animation:bounce 1.5s infinite ease-in-out;box-shadow:0 0 6px rgba(59,100,231,.47)}
.dot-wrap span:nth-child(2){animation-delay:.22s}
.dot-wrap span:nth-child(3){animation-delay:.44s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

html.dark #preloader{background:radial-gradient(circle at 50% 40%,#1e2644 0%,#121626 45%,#0e111e 100%)}
html.dark .load-text{color:#c2d1ff}
html.dark .load-sub{color:#828fbf}
html.dark .particle{background:#7490ff;box-shadow:0 0 6px #7490ff}

/* ===== 主页面 ===== */
.main-content{min-height:100vh;display:flex;flex-direction:column;opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.main-content.visible{opacity:1}

/* 雪花 */
.snowflakes{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;z-index:100}
.snowflake{position:absolute;top:-40px;color:rgba(74,108,247,.25);animation:snowfall linear infinite;will-change:transform;user-select:none}
@keyframes snowfall{0%{transform:translateY(-40px) translateX(0) rotate(0);opacity:.7}25%{transform:translateY(25vh) translateX(15px) rotate(180deg);opacity:.5}50%{transform:translateY(50vh) translateX(-10px) rotate(360deg);opacity:.6}75%{transform:translateY(75vh) translateX(20px) rotate(540deg);opacity:.4}100%{transform:translateY(105vh) translateX(-5px) rotate(720deg);opacity:0}}

/* 背景装饰 */
.bg-deco{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;z-index:0}
.bg-circle{position:absolute;border-radius:50%;background:var(--p);opacity:.025;animation:float 25s ease-in-out infinite;will-change:transform}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}33%{transform:translateY(-20px) scale(1.04)}66%{transform:translateY(10px) scale(.97)}}

/* 容器 - 响应式(手机全宽铺满,桌面限宽居中) */
.container{width:100%;margin:0 auto;padding:12px 10px 28px;position:relative;z-index:1;flex:1;display:flex;flex-direction:column}
#content{flex:1;display:flex;flex-direction:column}
@media(min-width:768px){.container{max-width:620px;padding:24px 20px 40px}}
@media(min-width:1024px){.container{max-width:700px}}
@media(min-width:1280px){.container{max-width:760px;padding:32px 24px 48px}}

/* 顶部 */
.header{text-align:center;padding:16px 0 20px;flex-shrink:0;opacity:0;animation:slideIn .6s cubic-bezier(.25,.46,.45,.94) .1s forwards}
.logo-text{font-size:22px;font-weight:800;color:var(--text);letter-spacing:2px}
@media(min-width:768px){.logo-text{font-size:28px}}
@media(min-width:1024px){.logo-text{font-size:32px}}
@keyframes slideIn{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:translateY(0)}}

/* 分类区块 */
.section{flex:1;display:flex;flex-direction:column;justify-content:center;margin-bottom:12px;opacity:0;transform:translateY(20px);animation:secIn .6s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes secIn{to{opacity:1;transform:translateY(0)}}
.section-title{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.section-title::before{content:'';width:3px;height:16px;background:linear-gradient(180deg,var(--p),var(--p-light));border-radius:2px}
.section-title h2{font-size:15px;font-weight:700;color:var(--text);letter-spacing:.5px}

/* 网格 - 响应式 */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:414px){.grid{gap:10px}}
@media(min-width:768px){.grid{grid-template-columns:repeat(4,1fr);gap:12px}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(5,1fr);gap:14px}}
@media(min-width:1280px){.grid{grid-template-columns:repeat(6,1fr);gap:16px}}

/* 卡片 - 白色背景缩小 */
.card{background:var(--card);border-radius:12px;padding:10px 6px 8px;text-align:center;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);opacity:0;transform:translateY(14px);animation:cardIn .5s cubic-bezier(.25,.46,.45,.94) forwards;transition:all .35s cubic-bezier(.25,.46,.45,.94);will-change:transform,box-shadow;position:relative;overflow:hidden}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}
.card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 12px 32px rgba(59,91,219,.15)}
.card:active{transform:translateY(-2px) scale(.98);transition-duration:.1s}

/* 卡片点击涟漪特效 */
.card .ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(59,91,219,.3),transparent);transform:scale(0);animation:rippleOut .6s ease-out forwards;pointer-events:none}
@keyframes rippleOut{to{transform:scale(4);opacity:0}}

/* 卡片动画延迟 */
.card:nth-child(1){animation-delay:calc(var(--sd) + .08s)}
.card:nth-child(2){animation-delay:calc(var(--sd) + .14s)}
.card:nth-child(3){animation-delay:calc(var(--sd) + .2s)}
.card:nth-child(4){animation-delay:calc(var(--sd) + .26s)}
.card:nth-child(5){animation-delay:calc(var(--sd) + .32s)}
.card:nth-child(6){animation-delay:calc(var(--sd) + .38s)}
.card:nth-child(7){animation-delay:calc(var(--sd) + .44s)}
.card:nth-child(8){animation-delay:calc(var(--sd) + .5s)}

/* 图标 - 固定框，文字自适应缩小 */
.card-icon{width:42px;height:38px;padding:0;margin:0 auto 6px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .35s cubic-bezier(.25,.46,.45,.94);will-change:transform;overflow:hidden;flex-shrink:0;white-space:nowrap}
.card-icon.emoji-icon{font-size:22px}
.card-icon.text-icon{font-size:12px;font-weight:700;color:#333;letter-spacing:-.3px;line-height:1;white-space:nowrap;overflow:hidden}
.card-icon.text-icon .icon-txt{display:inline-block;max-width:100%;line-height:1}
.card:hover .card-icon{transform:scale(1.08)}
.card-icon.blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.card-icon.pink{background:linear-gradient(135deg,#fce7f3,#fbcfe8)}
.card-icon.green{background:linear-gradient(135deg,#dcfce7,#bbf7d0)}
.card-icon.purple{background:linear-gradient(135deg,#ede9fe,#ddd6fe)}
.card-icon.orange{background:linear-gradient(135deg,#ffedd5,#fed7aa)}
.card-icon.cyan{background:linear-gradient(135deg,#cffafe,#a5f3fc)}
.card-name{font-size:12px;font-weight:600;color:var(--text);line-height:1.2}

/* 底部 */
.footer{text-align:center;padding:24px 0 10px;color:#b0b0b0;font-size:11px;opacity:0;animation:slideIn .6s cubic-bezier(.25,.46,.45,.94) 1s forwards;line-height:2}
.footer a{color:#8090b0;text-decoration:none;border-bottom:1px dotted #8090b0;transition:all .2s;padding-bottom:1px}
.footer a:hover{color:var(--p);border-bottom-color:var(--p)}

/* 主题切换按钮 */
.theme-btn{position:fixed;top:16px;right:16px;z-index:200;width:36px;height:36px;background:var(--card);border:1px solid var(--border,#e5e7eb);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:.25s;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.theme-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.12)}
body:not(.dark) .theme-btn .dark-icon{display:none}
body.dark .theme-btn .light-icon{display:none}

/* 全屏按钮 */
.fs-restore{position:fixed;bottom:16px;right:16px;z-index:200;width:36px;height:36px;background:var(--card);border:1px solid var(--border,#e5e7eb);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:.25s;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.fs-restore:hover{transform:scale(1.08);box-shadow:0 4px 12px rgba(0,0,0,.12)}

/* 深色模式 */
body.dark{--bg:#0c0f1a;--card:#151928;--text:#e2e8f0;--shadow:0 2px 8px rgba(0,0,0,.2);--border:#1e2538}
body.dark .snowflake{color:rgba(140,160,255,.2)}
body.dark .bg-circle{opacity:.05}
body.dark .footer{color:#4a5568}
body.dark .footer a{color:#6070a0}
body.dark .card-icon.blue{background:linear-gradient(135deg,#1e3a5f,#1a3050)}
body.dark .card-icon.pink{background:linear-gradient(135deg,#3b1525,#2d1020)}
body.dark .card-icon.green{background:linear-gradient(135deg,#0f2a1a,#0a2015)}
body.dark .card-icon.purple{background:linear-gradient(135deg,#1e1540,#180f30)}
body.dark .card-icon.orange{background:linear-gradient(135deg,#2a1a0a,#20150a)}
body.dark .card-icon.cyan{background:linear-gradient(135deg,#0a2525,#081a1a)}
body.dark .card-icon.text-icon{color:#d0d0d0}

/* 空状态 */
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;color:#94a3b8}
.empty-state .icon{font-size:48px;margin-bottom:16px;opacity:.4}
.empty-state p{font-size:14px;font-weight:500}

/* 滚动条美化 */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c0c0c0;border-radius:3px}
body.dark ::-webkit-scrollbar-thumb{background:#2d3748}