/* ============================================================
   无争的小窝 —— Miuix / HyperOS 风格
   ============================================================ */
:root{
  --bg:#f4f3f1;
  --card:#ffffff;
  --card-2:#fafafa;
  --line:#ececec;
  --txt:#111114;
  --txt-2:#8a8a8e;
  --txt-3:#b0b0b4;
  --accent:#3482ff;
  --green:#dff3e0;
  --green-ink:#123d1a;
  --mint:#b7e9c0;
  --orange:#ff8a3d;
  --radius:24px;
  --radius-sm:16px;
  --shadow:0 2px 12px rgba(0,0,0,.05);
  --shadow-lg:0 12px 40px rgba(0,0,0,.10);
  --maxw:1080px;
}
[data-theme="dark"]{
  --bg:#0f0f11;
  --card:#1c1c1f;
  --card-2:#26262a;
  --line:#2c2c31;
  --txt:#f2f2f5;
  --txt-2:#9a9aa0;
  --txt-3:#6c6c72;
  --green:#1d3a24;
  --green-ink:#c9f3d2;
  --mint:#2f7a41;
  --shadow:0 2px 12px rgba(0,0,0,.35);
  --shadow-lg:0 14px 44px rgba(0,0,0,.55);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"MiSans","HarmonyOS Sans SC","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  min-height:100vh;
  padding-bottom:calc(104px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block}

/* 隐藏旧装饰 */
.aurora,.motes,.seal{display:none!important}

/* ---------------- 顶部大标题 ---------------- */
.hero-top{
  max-width:var(--maxw);margin:0 auto;
  padding:calc(26px + env(safe-area-inset-top)) clamp(16px,4vw,28px) 0;
  display:flex;align-items:flex-start;gap:16px;
}
.hero-top .tt{flex:1;min-width:0}
.hero-top h1{
  margin:0;font-size:clamp(32px,4.6vw,58px);line-height:1.1;
  font-weight:800;letter-spacing:-.02em;
}
.hero-top .sub{
  margin:8px 0 0;color:var(--txt-2);font-size:clamp(13px,1.3vw,16px);
  font-weight:400;
}
.hero-top .acts{display:flex;gap:10px;flex:0 0 auto;padding-top:4px}
.round-btn{
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:18px;
  background:var(--card);color:var(--txt);
  box-shadow:var(--shadow);transition:transform .18s,background .18s;
}
.round-btn:hover{transform:translateY(-2px);background:var(--card-2)}
.round-btn:active{transform:scale(.94)}

/* ---------------- 主区 ---------------- */
.view{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(16px,3vh,26px) clamp(14px,3.4vw,28px) 24px;
  min-height:50vh;
}
.view>section{animation:pop .36s cubic-bezier(.2,.8,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}

/* 搜索 */
.search{
  max-width:var(--maxw);margin:0 auto;padding:14px clamp(14px,3.4vw,28px) 0;
}
.search input{
  width:100%;padding:13px 18px;border-radius:16px;border:0;outline:none;
  background:var(--card);color:var(--txt);
  font-size:15px;box-shadow:var(--shadow);
}
.search input::placeholder{color:var(--txt-3)}
.search input:focus{box-shadow:0 0 0 2px rgba(52,130,255,.35),var(--shadow)}

/* ---------------- 状态卡（薄荷绿） ---------------- */
.status{
  position:relative;overflow:hidden;
  background:var(--green);color:var(--green-ink);
  border-radius:28px;padding:22px 24px;
  box-shadow:none;
}
.status h2{margin:0;font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.01em}
.status .meta{margin-top:4px;font-size:13px;opacity:.72;font-family:ui-monospace,Menlo,Consolas,monospace}
.status .ring{
  position:absolute;right:-28px;top:50%;transform:translateY(-50%);
  width:132px;height:132px;border-radius:50%;
  border:10px solid rgba(47,122,65,.18);
  border-top-color:rgba(47,122,65,.55);border-right-color:rgba(47,122,65,.42);
}
.status .tagline{position:relative;margin-top:14px;font-size:13px;opacity:.8}

/* ---------------- 卡片分组 ---------------- */
.group{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  margin-top:14px;
}
.group .row{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  transition:background .16s;
}
.group .row:last-child{border-bottom:0}
.group .row:hover{background:var(--card-2)}
.group .row .ic{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;font-size:20px;
  background:var(--card-2);
}
.group .row .tx{flex:1;min-width:0}
.group .row .tx b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.group .row .tx span{display:block;font-size:13px;color:var(--txt-2);margin-top:2px}
.group .row .ar{color:var(--txt-3);font-size:16px}
.group .row .val{color:var(--txt-2);font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* 区块标题 */
.sec-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:26px 2px 4px;
}
.sec-head h2{margin:0;font-size:clamp(19px,2.2vw,24px);font-weight:700;letter-spacing:-.01em}
.sec-head .count{color:var(--txt-2);font-size:13px}
.sec-head .more{
  margin-left:auto;font-size:14px;color:var(--accent);font-weight:600;
  background:none;border:0;cursor:pointer;padding:0;font-family:inherit;
}
h3.sub{margin:0 2px 8px;font-size:15px;font-weight:700;color:var(--txt-2)}

/* ---------------- 网格 ---------------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));margin-top:10px}
.cardgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}

/* 视频卡 */
.vcard{
  background:var(--card);border-radius:20px;overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s;
}
.vcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.vcard:active{transform:scale(.985)}
.vcard .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#e8ebf0,#dfe4ea);
  display:grid;place-items:center;overflow:hidden}
[data-theme="dark"] .vcard .thumb{background:linear-gradient(135deg,#25262b,#1e2024)}
.vcard .thumb img{width:100%;height:100%;object-fit:cover}
.vcard .play{
  position:absolute;width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 6px 20px rgba(0,0,0,.18);
  display:grid;place-items:center;transition:transform .2s;
}
.vcard .play::before{
  content:"";width:0;height:0;margin-left:4px;
  border-left:14px solid #1c1c1f;border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.vcard:hover .play{transform:scale(1.08)}
.vcard .meta{padding:12px 14px 14px}
.vcard .t{font-size:15px;font-weight:600;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vcard .s{margin-top:5px;color:var(--txt-2);font-size:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tag{padding:2px 9px;border-radius:999px;background:rgba(52,130,255,.1);color:#2b6fe0;font-size:11px;font-weight:600}
[data-theme="dark"] .tag{color:#8ab6ff}

/* 相册卡 */
.pcard{position:relative;border-radius:20px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;
  background:var(--card);box-shadow:var(--shadow);transition:transform .22s,box-shadow .22s}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.pcard:hover img{transform:scale(1.04)}
.pcard .cap{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:12px;
  opacity:0;transition:opacity .2s}
.pcard:hover .cap{opacity:1}

/* 游戏卡 */
.gcard{display:flex;gap:14px;align-items:center;padding:16px;border-radius:20px;
  background:var(--card);box-shadow:var(--shadow);
  transition:transform .22s,box-shadow .22s}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gcard .gico{flex:0 0 auto;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  font-size:25px;background:linear-gradient(140deg,rgba(255,138,61,.16),rgba(52,130,255,.12))}
.gcard h4{margin:0 0 3px;font-size:16px;font-weight:700}
.gcard p{margin:0;color:var(--txt-2);font-size:13px;line-height:1.5}

/* 空状态 */
.empty{padding:44px 22px;text-align:center;color:var(--txt-2);
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.empty .big{font-size:34px;margin-bottom:8px;opacity:.7}
.empty code{background:var(--card-2);padding:2px 6px;border-radius:6px;font-size:12px;color:var(--txt-2)}

/* ---------------- 音乐 ---------------- */
.mlist{display:grid;gap:10px;margin-top:10px}
.mcard{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:18px;
  background:var(--card);box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,background .2s}
.mcard:hover{transform:translateY(-2px);background:var(--card-2)}
.mcard.playing{background:rgba(52,130,255,.08)}
.mcard .disc{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(140deg,#e9edf3,#d8dee8)}
[data-theme="dark"] .mcard .disc{background:linear-gradient(140deg,#2a2b30,#1f2024)}
.mcard.playing .disc{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mcard .info{min-width:0;flex:1}
.mcard .info b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard .info span{font-size:12px;color:var(--txt-2)}
.player-bar{display:none;align-items:center;gap:12px;margin-top:14px;padding:12px 16px;
  border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.player-bar.on{display:flex}
.player-bar audio{flex:1;height:36px}
.player-bar b{font-size:13px;max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------- 底部导航 ---------------- */
.bottomnav{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:80;width:min(560px,calc(100% - 24px));
  display:flex;align-items:center;gap:2px;
  padding:8px;border-radius:26px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 10px 34px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.03);
}
[data-theme="dark"] .bottomnav{background:rgba(28,28,31,.82);box-shadow:0 10px 34px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.bottomnav a{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 2px;border-radius:18px;color:var(--txt-2);
  font-size:11px;transition:color .18s,background .18s,transform .18s;
}
.bottomnav a .nb{font-size:20px;line-height:1;filter:saturate(.9)}
.bottomnav a.on{color:var(--accent);background:rgba(52,130,255,.1);font-weight:700}
.bottomnav a:active{transform:scale(.94)}
.bottomnav .plus{
  flex:0 0 auto;width:52px;height:52px;border-radius:18px;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:26px;font-weight:300;
  color:#fff;background:linear-gradient(150deg,#4b93ff,#2f6fe6);
  box-shadow:0 8px 20px rgba(52,130,255,.4);
  transition:transform .18s;
}
.bottomnav .plus:hover{transform:translateY(-2px)}
.bottomnav .plus:active{transform:scale(.93)}

/* 隐藏旧 fab */
.fab{display:none!important}

/* ---------------- 弹层 ---------------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;
  animation:fade .2s both}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
[data-theme="dark"] .modal-bg{background:rgba(0,0,0,.6)}
.modal-body{
  position:relative;width:min(760px,100%);max-height:88vh;overflow:auto;
  background:var(--card);border-radius:28px;padding:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.modal-body.wide{width:min(1200px,100%)}
.modal-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.modal-head h3{margin:0;font-size:18px;font-weight:700}
.modal-head .x{
  margin-left:auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:var(--card-2);color:var(--txt-2);font-size:15px;
  display:grid;place-items:center;transition:.18s;
}
.modal-head .x:hover{background:var(--line);color:var(--txt)}
#player-video{width:100%;max-height:70vh;border-radius:18px;background:#000}
#lb-img{width:100%;border-radius:18px}
.hint{margin:10px 0 0;color:var(--txt-2);font-size:12px}

/* 上传面板 */
.drops{padding:34px 18px;text-align:center;border-radius:20px;
  background:var(--card-2);border:1.5px dashed var(--line);transition:.2s}
.drops.over{border-color:var(--accent);background:rgba(52,130,255,.08)}
.drops .ic{font-size:32px;color:var(--txt-3);margin-bottom:6px}
.drops p{margin:0 0 4px;font-size:15px;font-weight:600}
.drops small{color:var(--txt-2);font-size:12px}
.up-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  font:inherit;cursor:pointer;border:0;border-radius:14px;padding:11px 20px;
  font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(150deg,#4b93ff,#2f6fe6);
  box-shadow:0 6px 16px rgba(52,130,255,.3);
  transition:transform .18s,filter .18s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--card-2);color:var(--txt);box-shadow:none}
.uploaded{margin-top:12px;max-height:32vh;overflow:auto;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.up-item{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--card-2)}
.up-item img,.up-item video{width:100%;height:100%;object-fit:cover}
.up-item .ic{display:grid;place-items:center;height:100%;font-size:26px;color:var(--txt-3)}
.up-item .del{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:0;
  background:rgba(0,0,0,.5);color:#fff;font-size:12px;cursor:pointer;display:grid;place-items:center}
.up-item .kind{position:absolute;left:5px;bottom:5px;font-size:10px;padding:1px 6px;border-radius:6px;
  background:rgba(0,0,0,.55);color:#fff}
.note{margin:14px 0 0;padding:12px 14px;border-radius:14px;font-size:12px;line-height:1.6;
  color:var(--txt-2);background:var(--card-2)}

/* 放映 */
.slides{position:fixed;inset:0;z-index:140;background:#000;display:grid;place-items:center}
.slides[hidden]{display:none}
.slides img{max-width:100vw;max-height:100vh;object-fit:contain}
.slide-bar{position:absolute;left:0;right:0;bottom:0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:14px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:13px}
.slide-bar #slide-cap{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.slide-nav{display:flex;align-items:center;gap:8px}
.slide-nav button{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;font-size:18px;
  background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px);transition:.18s}
.slide-nav button:hover{background:rgba(255,255,255,.3)}
#slide-idx{font-size:12px;opacity:.7;min-width:50px;text-align:center}

/* 页脚 */
.foot{max-width:var(--maxw);margin:0 auto;padding:18px clamp(14px,3.4vw,28px) 8px;
  color:var(--txt-3);font-size:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.foot .dot{opacity:.5}

/* 旧 hero 兼容 */
.hero{padding:0}
.hero h1,.hero p,.hero .sig{display:none}
.quote,.about{display:none}

@media (max-width:600px){
  .bottomnav{width:calc(100% - 16px);padding:6px;border-radius:22px}
  .bottomnav a{font-size:10px}
  .bottomnav .plus{width:46px;height:46px;border-radius:16px;font-size:23px}
  .hero-top{padding-top:calc(18px + env(safe-area-inset-top))}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* 卡片上的删除按钮 */
.vcard{position:relative}
.card-del{
  position:absolute;top:8px;right:8px;z-index:6;
  width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.45);color:#fff;font-size:13px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:.92;transition:opacity .18s,background .18s,transform .18s;
}
.vcard:hover .card-del,.pcard:hover .card-del{opacity:1;background:rgba(220,50,50,.7)}
.card-del:hover{background:rgba(220,50,50,.85);transform:scale(1.08)}