/* ============ 组件层：卡片 / 瀑布流 / 提示 / 查看器 ============ */

/* ---- 通用组件 ---- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:12px;font-size:14px;font-weight:600;
  background:var(--grad);color:#0a0a18;transition:.25s;box-shadow:0 4px 18px rgba(96,165,250,.3)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(96,165,250,.45)}
.btn.ghost{background:rgba(120,120,255,.1);color:var(--txt);border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{background:rgba(120,120,255,.2)}
.btn.sm{padding:6px 14px;font-size:12.5px;border-radius:9px}
.btn.danger{background:linear-gradient(120deg,#f87171,#fb923c);color:#fff}
.tag{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;background:rgba(120,120,255,.12);
  border:1px solid var(--line);color:var(--txt2)}
.tag.on{background:var(--grad);color:#0a0a18;border-color:transparent;font-weight:600}
.verified{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:var(--grad);color:#0a0a18;font-size:9px;font-weight:900;margin-left:4px;vertical-align:1px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);backdrop-filter:blur(10px)}
.section-title{display:flex;align-items:baseline;gap:12px;margin:38px 0 18px}
.section-title h2{font-size:22px;letter-spacing:.5px}
.section-title h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-title small{color:var(--txt3);font-size:12.5px}
.divider{height:1px;background:var(--line);margin:22px 0}

/* ---- 3D 倾斜卡片 ---- */
.tilt{transform-style:preserve-3d;transition:transform .12s ease-out,box-shadow .3s;will-change:transform}
.tilt .tilt-in{transform-style:preserve-3d}
.tilt .pop{transform:translateZ(38px)}

/* ---- 分类快捷入口（3D 立方） ---- */
.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.entry{perspective:600px}
.entry-in{position:relative;height:86px;border-radius:var(--r);padding:16px;overflow:hidden;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);transform-style:preserve-3d;transition:transform .25s,box-shadow .25s}
.entry-in:hover{transform:rotateX(8deg) rotateY(-8deg) translateZ(14px);box-shadow:-10px 14px 34px rgba(0,0,0,.5)}
.entry-in b{font-size:15px;display:block}
.entry-in small{color:var(--txt3);font-size:11.5px}
.entry-ico{position:absolute;right:-8px;bottom:-14px;font-size:52px;opacity:.16;filter:blur(.4px)}

/* ---- 空状态 ---- */
.empty{padding:70px 20px;text-align:center;color:var(--txt3)}
.empty .e-ico{font-size:52px;margin-bottom:14px;opacity:.5}

/* ---- 提示 toast ---- */
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);z-index:999;
  padding:11px 24px;border-radius:14px;background:rgba(20,20,40,.92);border:1px solid var(--line2);
  color:var(--txt);font-size:13.5px;opacity:0;pointer-events:none;transition:.35s;backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:80vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 图片查看器 ---- */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(5,5,12,.94);display:flex;
  align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.8)}
.lb-close{position:absolute;top:22px;right:28px;font-size:26px;color:var(--txt2);cursor:pointer;transition:.25s}
.lb-close:hover{color:#fff;transform:rotate(90deg)}

/* ---- 标题渐变流动动画 ---- */
.section-title h2 em,.hero h1 em{background-size:220% 100%;animation:gradFlow 7s ease-in-out infinite}
@keyframes gradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- 卡片光晕扫过 ---- */
.m-card::after,.v-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.13) 45%,transparent 60%);
  transform:translateX(-120%);transition:transform .7s}
.m-card:hover::after,.v-card:hover::after{transform:translateX(120%)}
body.light .m-card::after,body.light .v-card::after{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 45%,transparent 60%)}

/* ---- 图标系统（HaoMacss/icon 雪碧图，描边跟随主题色） ---- */
.ico{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.16em;flex:none}
.ico-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ico-wrap .ico{width:19px;height:19px}
.muted{color:var(--txt3);font-size:13px}
.card-title{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px}

/* ---- 空状态插图 ---- */
.empty .e-img{width:min(200px,60%);opacity:.9;margin-bottom:6px}
.empty .e-sub{font-size:12.5px;margin-top:8px;color:var(--txt3)}

/* ---- 视频卡时长角标 ---- */
.v-card .m-dur{position:absolute;right:10px;bottom:52px;font-size:11px;padding:2px 7px;border-radius:6px;
  background:rgba(4,10,18,.66);color:#fff;backdrop-filter:blur(4px)}

/* ---- 详情页说明文字 ---- */
.data-note{padding:14px 0;color:var(--txt3);font-size:12.5px;line-height:1.8}

/* ---- 返回行 ---- */
.back-row{margin:6px 0 18px;display:flex}
.back-row .tag{display:inline-flex;align-items:center;gap:6px}

/* ---- 启动加载态（等待后端数据时显示） ---- */
.boot-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:120px 20px;color:var(--txt3);font-size:13.5px}
.boot-spin{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--cyan);
  animation:hy-spin .9s linear infinite}
@keyframes hy-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.boot-spin{animation:none}}