/* ============================================================
   星屿 · 导航  —  简约 / 二次元 / 深色友好
   性能版：不用 backdrop-filter、背景静止、动画只用 transform/opacity
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,li,figure{margin:0;padding:0}
ul{list-style:none}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* hidden 属性必须永远生效 —— 否则 display:flex/grid 会覆盖掉它 */
[hidden]{display:none!important}

/* ---------- 主题变量 ---------- */
:root{
    --violet:#7c5cf5;
    --pink:#d94fc4;
    --cyan:#0aa8c4;
    --bg:#f6f6fd;
    --bg-2:#eaeaf8;
    --panel:rgba(255,255,255,.86);
    --panel-solid:#ffffff;
    --nav-bg:rgba(255,255,255,.94);
    --line:rgba(28,26,60,.09);
    --line-strong:rgba(28,26,60,.16);
    --fg:#1d1c2b;
    --fg-dim:#666a86;
    --fg-faint:#9a9db5;
    --shadow:0 1px 2px rgba(28,26,60,.05),0 6px 18px -8px rgba(28,26,60,.16);
    --shadow-hover:0 4px 10px rgba(28,26,60,.08),0 14px 30px -12px rgba(96,72,220,.3);
    --glow:0 0 0 1px rgba(124,92,245,.3),0 0 20px -6px rgba(124,92,245,.35);
    --radius:16px;
    --radius-sm:11px;
    --ease:cubic-bezier(.22,.68,.28,1);
}
:root[data-theme="dark"]{
    --violet:#a78bfa;
    --pink:#f0abfc;
    --cyan:#67e8f9;
    --bg:#101118;
    --bg-2:#171827;
    --panel:rgba(30,32,46,.72);
    --panel-solid:#1b1d29;
    --nav-bg:rgba(22,23,33,.95);
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.17);
    --fg:#e9eaf4;
    --fg-dim:#9ba1bb;
    --fg-faint:#6e7492;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px -10px rgba(0,0,0,.55);
    --shadow-hover:0 6px 14px rgba(0,0,0,.4),0 18px 38px -14px rgba(150,120,255,.32);
    --glow:0 0 0 1px rgba(167,139,250,.4),0 0 22px -6px rgba(167,139,250,.38);
}

/* ---------- 基础 ---------- */
body{
    min-height:100vh;
    background:var(--bg);
    color:var(--fg);
    font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

/* ---------- 背景：固定层，静态绘制一次，不参与滚动重绘 ---------- */
.decor{
    position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
.blob{position:absolute;border-radius:50%;opacity:.5}
.b1{width:46vmax;height:46vmax;left:-14vmax;top:-16vmax;
    background:radial-gradient(circle,rgba(124,92,245,.5),rgba(124,92,245,0) 68%)}
.b2{width:40vmax;height:40vmax;right:-12vmax;top:6vmax;
    background:radial-gradient(circle,rgba(217,79,196,.36),rgba(217,79,196,0) 68%)}
.b3{width:44vmax;height:44vmax;left:22vmax;bottom:-22vmax;
    background:radial-gradient(circle,rgba(10,168,196,.3),rgba(10,168,196,0) 68%)}
:root[data-theme="dark"] .blob{opacity:.32}
.grid-fade{
    position:absolute;inset:0;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 78% 58% at 50% 0%,#000 12%,transparent 78%);
            mask-image:radial-gradient(ellipse 78% 58% at 50% 0%,#000 12%,transparent 78%);
    opacity:.55;
}

/* ---------- 顶部 ---------- */
.hero{position:relative;z-index:1;padding:clamp(2.8rem,8vw,4.6rem) 1.25rem 1.4rem}
.hero-in{max-width:1080px;margin:0 auto;text-align:center}
.brand{display:inline-flex;align-items:center;gap:.5rem;
    font-size:clamp(2rem,5.5vw,2.9rem);font-weight:800;letter-spacing:.06em;
    animation:rise .5s var(--ease) both}
.brand-mark{
    font-size:.72em;line-height:1;display:inline-block;
    background:linear-gradient(135deg,var(--violet),var(--pink) 55%,var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-text{
    background:linear-gradient(100deg,var(--violet),var(--pink) 34%,var(--cyan) 68%,var(--violet));
    background-size:280% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:flow 12s linear infinite;
}
.brand-sub{margin-top:.3rem;color:var(--fg-dim);font-size:.92rem;letter-spacing:.14em;
    animation:rise .5s var(--ease) .06s both}
@keyframes flow{to{background-position:280% 0}}
@keyframes rise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}

.tools{margin-top:1.3rem;display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap;
    animation:rise .5s var(--ease) .12s both}
.search{position:relative;display:flex;align-items:center;width:min(420px,84vw)}
.search-ico{position:absolute;left:.85rem;width:17px;height:17px;fill:none;
    stroke:var(--fg-faint);stroke-width:2;stroke-linecap:round;pointer-events:none}
.search input{
    width:100%;padding:.72rem 2.4rem .72rem 2.5rem;
    background:var(--panel-solid);border:1px solid var(--line);border-radius:999px;
    outline:none;transition:border-color .2s,box-shadow .2s;
}
.search input::placeholder{color:var(--fg-faint)}
.search input:focus{border-color:transparent;box-shadow:var(--glow)}
.search input::-webkit-search-cancel-button{display:none}
.q-clear{position:absolute;right:.5rem;width:24px;height:24px;border:0;border-radius:50%;
    background:var(--line);color:var(--fg-dim);cursor:pointer;line-height:1;
    transition:background-color .2s}
.q-clear:hover{background:var(--line-strong)}

.btn-icon{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;
    background:var(--panel-solid);border:1px solid var(--line);border-radius:50%;cursor:pointer;
    transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.btn-icon:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.btn-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-icon .ico-sun{display:none}
:root[data-theme="dark"] .btn-icon .ico-sun{display:block}
:root[data-theme="dark"] .btn-icon .ico-moon{display:none}

/* ---------- 分类导航 ---------- */
.catnav{position:sticky;top:0;z-index:20;padding:.6rem 1.25rem;margin-top:.4rem}
.catnav-in{
    max-width:1080px;margin:0 auto;display:flex;gap:.3rem;overflow-x:auto;
    padding:.38rem;scrollbar-width:none;
    background:var(--nav-bg);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);
}
.catnav-in::-webkit-scrollbar{display:none}
.catnav a{position:relative;flex:0 0 auto;padding:.4rem .95rem;border-radius:999px;
    font-size:.88rem;color:var(--fg-dim);white-space:nowrap;
    transition:color .18s,background-color .18s}
.catnav a:hover{color:var(--fg);background:var(--line)}
.catnav a.on{color:#fff;font-weight:600;
    background:linear-gradient(120deg,var(--violet),var(--pink));
    box-shadow:0 5px 14px -6px rgba(124,92,245,.7)}

/* ---------- 主体 ---------- */
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:1.2rem 1.25rem 4rem}
.section{margin-bottom:2.2rem;scroll-margin-top:5rem}
.sec-title{display:flex;align-items:center;gap:.55rem;
    font-size:1.1rem;font-weight:700;letter-spacing:.05em;margin-bottom:.9rem}
.sec-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;
    background:linear-gradient(135deg,var(--violet),var(--pink));
    box-shadow:0 0 10px rgba(124,92,245,.7)}

.grid{display:grid;gap:.62rem;grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}

/* ---------- 卡片（无毛玻璃、无伪元素，纯 alpha 合成）---------- */
.card{
    position:relative;display:flex;align-items:center;gap:.7rem;
    padding:.72rem .82rem;border-radius:var(--radius);
    background:var(--panel);
    border:1px solid var(--line);box-shadow:var(--shadow);
    transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--line-strong)}
.card:active{transform:translateY(-1px)}
.card-ico{
    position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:11px;
    display:grid;place-items:center;overflow:hidden;
    background:linear-gradient(135deg,var(--c1),var(--c2));
}
.card-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:8px;background:var(--panel-solid);border-radius:inherit}
.card-ico b{color:#fff;font-size:1rem;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.28)}
.card-txt{min-width:0;display:flex;flex-direction:column}
.card-txt strong{font-size:.93rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-txt em{font-style:normal;font-size:.75rem;color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.05rem}

.no-result{text-align:center;color:var(--fg-faint);padding:3rem 0}

/* ---------- 滚动出现（只有 transform + opacity）---------- */
[data-reveal]{opacity:0;transform:translate3d(0,14px,0);transition:opacity .4s var(--ease),transform .4s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
.card{opacity:0;transform:translate3d(0,12px,0)}
.card.in{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.card.in:hover{transform:translateY(-3px)}

/* ---------- 上传区 ---------- */
.up-panel{
    padding:1.1rem;border-radius:var(--radius);
    background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
}
.up-tip{color:var(--fg-dim);font-size:.9rem;margin-bottom:.85rem}
.up-row{display:flex;gap:.55rem;flex-wrap:wrap}
.up-row input{flex:1 1 200px;padding:.64rem .95rem;background:var(--panel-solid);
    border:1px solid var(--line);border-radius:var(--radius-sm);outline:none;
    transition:border-color .2s,box-shadow .2s}
.up-row input:focus{border-color:transparent;box-shadow:var(--glow)}
.btn{padding:.64rem 1.1rem;border:0;border-radius:var(--radius-sm);cursor:pointer;
    font-weight:600;font-size:.9rem;color:#fff;
    background:linear-gradient(120deg,var(--violet),var(--pink));
    transition:transform .18s var(--ease),box-shadow .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(124,92,245,.8)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:var(--line);color:var(--fg-dim);font-weight:500}
.btn.ghost:hover{background:var(--line-strong);color:var(--fg);box-shadow:none}
.up-msg{font-size:.85rem;color:var(--pink);margin-top:.65rem;min-height:1.2em}
:root[data-theme="light"] .up-msg{color:#c026a8}

.up-bar{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;flex-wrap:wrap}
.up-user{font-size:.85rem;font-weight:600;color:var(--violet)}
.up-stat{font-size:.8rem;color:var(--fg-faint);margin-right:auto}

.up-dest{display:flex;gap:.4rem;margin-bottom:.85rem;flex-wrap:wrap}
.dest-btn{padding:.36rem .85rem;font-size:.82rem;border-radius:999px;cursor:pointer;
    border:1px solid var(--line);background:transparent;color:var(--fg-dim);
    transition:color .18s,background-color .18s,border-color .18s}
.dest-btn:hover{color:var(--fg);border-color:var(--line-strong)}
.dest-btn.on{color:#fff;font-weight:600;border-color:transparent;
    background:linear-gradient(120deg,var(--violet),var(--pink));
    box-shadow:0 4px 12px -6px rgba(124,92,245,.7)}

.up-cats{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.9rem}
.cat-tab{padding:.28rem .7rem;font-size:.78rem;border-radius:999px;cursor:pointer;
    border:1px solid var(--line);background:transparent;color:var(--fg-dim);
    transition:color .18s,background-color .18s,border-color .18s}
.cat-tab:hover{color:var(--fg);border-color:var(--line-strong)}
.cat-tab.on{color:#fff;font-weight:600;border-color:transparent;
    background:linear-gradient(120deg,var(--violet),var(--pink))}
.filelist{margin-top:.7rem}

/* ---------- 我的文件：文件夹 ---------- */
.folders{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.folder{display:flex;align-items:center;gap:.75rem;padding:.85rem .9rem;cursor:pointer;
    border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);
    box-shadow:var(--shadow);text-align:left;font:inherit;color:inherit;
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.folder:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--line-strong)}
.fd-ico{font-size:1.55rem;line-height:1;flex:0 0 auto}
.fd-txt{display:flex;flex-direction:column;min-width:0}
.fd-txt strong{font-size:.94rem;font-weight:600}
.fd-txt em{font-style:normal;font-size:.75rem;color:var(--fg-faint);margin-top:.1rem}
.folders-hint{color:var(--fg-faint);font-size:.88rem}

.folder-view{margin-top:.2rem}
.fv-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem;flex-wrap:wrap}
.fv-title{font-weight:600;font-size:.98rem}
.fv-count{font-size:.8rem;color:var(--fg-faint);margin-right:auto}
.f-empty{color:var(--fg-faint);font-size:.88rem;padding:1.2rem .2rem}

/* ---------- 在线预览弹层 ---------- */
.viewer{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.vw-bg{position:absolute;inset:0;background:rgba(8,8,16,.82)}
.vw-box{position:relative;display:flex;flex-direction:column;width:100%;
    max-width:min(1080px,96vw);max-height:92vh;overflow:hidden;
    border-radius:var(--radius);background:var(--panel-solid);
    border:1px solid var(--line-strong);box-shadow:var(--shadow-hover)}
.vw-head{display:flex;align-items:center;gap:.55rem;padding:.68rem .85rem;border-bottom:1px solid var(--line)}
.vw-name{flex:1 1 auto;min-width:0;font-size:.9rem;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-body{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;
    background:#0b0c12;overflow:auto}
.vw-body img{max-width:100%;max-height:80vh;display:block}
.vw-body video{max-width:100%;max-height:80vh;background:#000}
.vw-body audio{width:min(560px,90%);margin:3rem 1rem}
.vw-body iframe{width:100%;height:80vh;border:0;background:#fff}
.vw-body pre{margin:0;padding:1rem;width:100%;height:100%;overflow:auto;
    font-family:ui-monospace,Consolas,monospace;font-size:.82rem;line-height:1.65;
    color:#d6d9e6;white-space:pre-wrap;word-break:break-word}
.mini.view:hover{color:var(--cyan);border-color:var(--cyan)}

.dropzone{display:grid;place-items:center;gap:.3rem;text-align:center;cursor:pointer;
    padding:1.9rem 1rem;border-radius:var(--radius);
    border:1.5px dashed var(--line-strong);background:var(--panel-solid);
    transition:border-color .2s,background-color .2s,box-shadow .2s}
.dropzone:hover{border-color:var(--violet)}
.dropzone:focus-visible{outline:none;box-shadow:var(--glow)}
.dropzone.drag{border-color:var(--violet);background:rgba(124,92,245,.09);box-shadow:var(--glow)}
.dz-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
    background:linear-gradient(135deg,rgba(124,92,245,.18),rgba(217,79,196,.18));margin-bottom:.3rem}
.dz-ico svg{width:22px;height:22px;fill:none;stroke:var(--violet);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dz-main{font-size:.92rem;color:var(--fg-dim)}
.dz-main strong{color:var(--fg)}
.dz-note{font-size:.78rem;color:var(--fg-faint)}

.up-progress{display:flex;align-items:center;gap:.7rem;margin-top:.85rem}
.up-progress .track{flex:1;height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.up-progress .fill{display:block;height:100%;width:0;border-radius:999px;
    background:linear-gradient(90deg,var(--violet),var(--pink),var(--cyan));
    transition:width .2s linear}
.up-progress .pct{font-size:.8rem;color:var(--fg-dim);font-variant-numeric:tabular-nums;min-width:3em;text-align:right}

.filelist{margin-top:.9rem;display:flex;flex-direction:column;gap:.5rem}
.filelist:empty{display:none}
.file{display:flex;align-items:center;gap:.7rem;padding:.58rem .72rem;
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-solid)}
.file .f-name{flex:1 1 auto;min-width:0;font-size:.87rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .f-meta{font-size:.74rem;color:var(--fg-faint);white-space:nowrap}
.file .f-act{display:flex;gap:.35rem;flex:0 0 auto}
.mini{padding:.3rem .6rem;font-size:.75rem;border-radius:8px;cursor:pointer;white-space:nowrap;
    border:1px solid var(--line);background:transparent;color:var(--fg-dim);
    transition:color .18s,background-color .18s,border-color .18s}
.mini:hover{color:var(--fg);border-color:var(--line-strong);background:var(--line)}
.mini.share:hover{color:var(--violet);border-color:var(--violet)}
.mini.del:hover{color:#ff6b8b;border-color:#ff6b8b}

/* ---------- 页脚 ---------- */
.foot{position:relative;z-index:1;text-align:center;padding:1.5rem 1rem 2.6rem;color:var(--fg-faint);font-size:.82rem}

/* ---------- 提示条 ---------- */
.toast{position:fixed;left:50%;bottom:2rem;z-index:60;transform:translate(-50%,120%);
    padding:.6rem 1.1rem;border-radius:999px;font-size:.85rem;
    background:var(--panel-solid);border:1px solid var(--line-strong);color:var(--fg);
    box-shadow:var(--shadow-hover);transition:transform .3s var(--ease),opacity .25s;opacity:0}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.5rem}
    .card{padding:.62rem .66rem;gap:.58rem}
    .card-ico{width:34px;height:34px;border-radius:10px}
    .card-txt em{display:none}
    .hero{padding-top:2.4rem}
    .section{margin-bottom:1.8rem}
    .file .f-meta{display:none}
    .blob{opacity:.32}
}


/* ---------- 配置教程弹层 ---------- */
.guide{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.gd-bg{position:absolute;inset:0;background:rgba(8,8,16,.82)}
.gd-box{position:relative;display:flex;flex-direction:column;width:100%;
    max-width:min(620px,96vw);max-height:92vh;overflow:hidden;
    border-radius:var(--radius);background:var(--panel-solid);
    border:1px solid var(--line-strong);box-shadow:var(--shadow-hover)}
.gd-head{display:flex;align-items:center;gap:.55rem;padding:.68rem .85rem;border-bottom:1px solid var(--line)}
.gd-title{flex:1 1 auto;min-width:0;font-size:.92rem;font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem 1.1rem 1.3rem;
    font-size:.88rem;line-height:1.7;color:var(--fg-dim)}
.gd-lead{margin-bottom:1rem}
.gd-steps{display:flex;flex-direction:column;gap:1.05rem;counter-reset:gd}
.gd-steps > li{position:relative;padding-left:1.9rem}
.gd-steps > li::before{counter-increment:gd;content:counter(gd);
    position:absolute;left:0;top:.2rem;width:1.35rem;height:1.35rem;border-radius:50%;
    display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff;
    background:linear-gradient(120deg,var(--violet),var(--pink))}
.gd-steps b{color:var(--fg)}
.gd-note{display:block;margin-top:.3rem;font-size:.79rem;color:var(--fg-faint)}
.gd-dl{display:inline-block;margin:.55rem 0 .1rem}
.gd-table{width:100%;margin:.65rem 0 .1rem;border-collapse:collapse;font-size:.83rem}
.gd-table th,.gd-table td{padding:.42rem .55rem;border:1px solid var(--line);text-align:left;vertical-align:top}
.gd-table th{width:7.5em;background:var(--line);color:var(--fg-dim);font-weight:500;white-space:nowrap}
.gd-secret{color:var(--fg-faint);font-style:italic}
.gd-body code{padding:.1rem .34rem;border-radius:5px;background:var(--line);
    font-family:ui-monospace,Consolas,monospace;font-size:.82em;color:var(--fg)}
.gd-foot{margin-top:.95rem;padding-top:.85rem;border-top:1px solid var(--line);font-size:.83rem}
.gd-foot a{color:var(--violet)}
.gd-foot a:hover{text-decoration:underline}

/* ---------- 尊重「减少动态效果」 ---------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    .card,[data-reveal]{opacity:1!important;transform:none!important}
}

/* ============================================================
   精修：滚动条 / 选中色 / 分区标题 / 卡片质感 / 回到顶部
   ============================================================ */

/* ---------- 选中文字 ---------- */
::selection{background:rgba(124,92,245,.3)}
:root[data-theme="dark"] ::selection{background:rgba(167,139,250,.34)}

/* ---------- 滚动条 ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px;
    border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--violet);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ---------- 键盘焦点可见 ---------- */
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* ---------- 分区标题：渐变短线 + 数量徽章 ---------- */
.sec-title{position:relative;padding-bottom:.5rem}
.sec-title::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:2px;
    border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--pink),transparent)}
.sec-count{font-size:.7rem;font-weight:600;line-height:1;color:var(--fg-faint);
    background:var(--line);padding:.3em .55em;border-radius:999px;margin-left:.1rem}

/* ---------- 卡片悬停：加一圈渐变描边（box-shadow，性能友好）---------- */
.card:hover{box-shadow:var(--shadow-hover),0 0 0 1px rgba(124,92,245,.38)}
:root[data-theme="dark"] .card:hover{box-shadow:var(--shadow-hover),0 0 0 1px rgba(167,139,250,.42)}

/* ---------- 首屏光晕 ---------- */
.hero::before{content:"";position:absolute;left:50%;top:-14%;width:min(820px,130vw);height:400px;
    transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(124,92,245,.2),transparent 64%)}
:root[data-theme="dark"] .hero::before{
    background:radial-gradient(ellipse at center,rgba(124,92,245,.26),transparent 64%)}
.hero-in{position:relative}

/* ---------- 回到顶部 ---------- */
.to-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:50;width:42px;height:42px;
    display:grid;place-items:center;border-radius:50%;cursor:pointer;
    border:1px solid var(--line);background:var(--nav-bg);color:var(--fg-dim);
    box-shadow:var(--shadow);opacity:0;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease),color .2s,border-color .2s}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{color:var(--violet);border-color:var(--violet);transform:translateY(-3px)}
@media (max-width:640px){.to-top{right:.75rem;bottom:.75rem;width:38px;height:38px}}

/* ---------- 背景图：深色用夜色花海，浅色用樱花 ---------- */
:root[data-theme="dark"]{--panel:rgba(18,20,30,.88)}
:root[data-theme="dark"] .decor{
    background-image:
        linear-gradient(rgba(10,10,20,.70), rgba(10,10,20,.86)),
        url("/bg.jpg");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
}
:root[data-theme="light"]{--panel:rgba(255,255,255,.92)}
:root[data-theme="light"] .decor{
    background-image:
        linear-gradient(rgba(255,255,255,.48), rgba(255,255,255,.70)),
        url("/bg-light.jpg");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    filter: contrast(1.16) saturate(1.12) brightness(.94);
}
/* 两种主题都有背景图了，漂浮光斑和网格就多余了，压掉 */
:root[data-theme="dark"] .blob,
:root[data-theme="light"] .blob{display:none}
:root[data-theme="dark"] .grid-fade{opacity:.22}
:root[data-theme="light"] .grid-fade{opacity:.28}
:root[data-theme="dark"] .hero::before{opacity:.45}
:root[data-theme="light"] .hero::before{opacity:.35}