/* ============================================================
   液态云盘 · Liquid Glass UI
   ============================================================ */

:root{
  --glass-bg: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  --glass-tint: rgba(9,14,28,.42);
  --glass-brd: rgba(255,255,255,.24);
  --glass-shadow: 0 24px 60px -12px rgba(4,8,24,.55), 0 2px 10px rgba(4,8,24,.25);
  --spec: radial-gradient(120% 90% at 18% -10%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
  --text: #f2f5ff;
  --text-dim: rgba(236,242,255,.62);
  --accent: #6ee7ff;
  --accent-2: #b39dff;
  --radius: 26px;
  --radius-sm: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }

.hidden{ display: none !important; }

html,body{
  height:100%;
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
               "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: #070a14;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────── 背景：流动的色彩 ─────────────── */
.bg{
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 15% 0%, #1b2450 0%, #0b1020 55%, #06080f 100%);
}
.blob{
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
  animation: drift 26s var(--ease) infinite alternate;
}
.b1{ width: 46vw; height: 46vw; left: -8vw; top: -10vw;
     background: radial-gradient(circle at 30% 30%, #5b8cff, transparent 68%); }
.b2{ width: 40vw; height: 40vw; right: -6vw; top: 6vh;
     background: radial-gradient(circle at 40% 40%, #a06bff, transparent 66%);
     animation-duration: 32s; animation-delay: -8s; }
.b3{ width: 44vw; height: 44vw; left: 24vw; bottom: -16vw;
     background: radial-gradient(circle at 50% 50%, #29e2c8, transparent 68%);
     animation-duration: 38s; animation-delay: -14s; opacity:.42; }
.b4{ width: 28vw; height: 28vw; right: 18vw; bottom: 8vh;
     background: radial-gradient(circle at 50% 50%, #ff7bd5, transparent 68%);
     animation-duration: 30s; animation-delay: -4s; opacity:.35; }

@keyframes drift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(4vw,-3vh,0) scale(1.12); }
  100% { transform: translate3d(-3vw,4vh,0) scale(.95); }
}

.grain{
  position:absolute; inset:-50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity:.16; mix-blend-mode: overlay; pointer-events:none;
}

/* ─────────────── 玻璃材质 ─────────────── */
.glass{
  position: relative;
  background-color: var(--glass-tint);
  background-image: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  isolation: isolate;
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: var(--spec);
  opacity:.55; pointer-events:none; mix-blend-mode: screen;
  z-index: 0;
}
.glass > *{ position: relative; z-index: 1; }

/* ─────────────── 通用控件 ─────────────── */
.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7;
     stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px; border-radius: 14px;
  font-size: 14px; font-weight: 600; letter-spacing:.2px;
  color: var(--text); cursor:pointer; white-space:nowrap;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px -10px rgba(0,0,0,.7);
  backdrop-filter: blur(14px) saturate(160%);
  transition: transform .18s var(--ease), background .25s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translateY(-1px);
  background: linear-gradient(160deg, rgba(255,255,255,.26), rgba(255,255,255,.10)); }
.btn:active{ transform: translateY(0) scale(.985); }

.btn.primary{
  color:#04121b;
  background: linear-gradient(150deg, #9bf0ff, #7cc8ff 45%, #a99cff);
  border-color: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 26px -8px rgba(112,196,255,.75);
}
.btn.primary:hover{ filter: brightness(1.06); }
.btn.ghost{ padding:10px; background: rgba(255,255,255,.08); }
.btn.wide{ width:100%; justify-content:center; }

.chip{
  padding: 8px 14px; border-radius: 12px; font-size:13px; font-weight:600;
  color: var(--text-dim); cursor:pointer;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  transition: .2s var(--ease);
}
.chip:hover{ color: var(--text); background: rgba(255,255,255,.13); }

/* ─────────────── 登录 ─────────────── */
.login{
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 24px;
}
.login-card{
  width: min(380px, 100%);
  padding: 34px 30px 26px;
  text-align: center;
  animation: pop .5s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform: translateY(14px) scale(.97);} to{opacity:1; transform:none;} }

.login-card h1{ margin: 14px 0 4px; font-size: 24px; letter-spacing:.5px; font-weight: 700; }
.login-card .sub{ margin:0 0 22px; color: var(--text-dim); font-size: 13px; }

.field{ display:block; text-align:left; margin-bottom: 16px; }
.field span{ display:block; font-size:12px; color: var(--text-dim); margin: 0 0 7px 4px; }
.field input{
  width:100%; padding: 13px 15px; border-radius: 14px;
  background: rgba(8,12,24,.42);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text); font-size: 15px; outline: none;
  transition: .2s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.field input:focus{
  border-color: rgba(140,220,255,.75);
  box-shadow: 0 0 0 4px rgba(110,220,255,.16), inset 0 1px 0 rgba(255,255,255,.12);
  background: rgba(8,12,24,.55);
}
.err{ min-height: 18px; margin: 12px 0 0; font-size: 12.5px; color:#ffb4c4; }

.logo{
  width: 26px; height: 26px; border-radius: 9px; display:inline-block; vertical-align:-6px;
  background: conic-gradient(from 200deg, #9bf0ff, #a99cff, #ff9ede, #9bf0ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px -6px rgba(160,180,255,.9);
  position: relative;
}
.logo::after{
  content:""; position:absolute; inset: 26%;
  border-radius: 4px; background: rgba(255,255,255,.85);
  box-shadow: 0 0 10px rgba(255,255,255,.8);
}
.logo.big{ width: 54px; height: 54px; border-radius: 18px; }

/* ─────────────── 主框架 ─────────────── */
.shell{
  position: relative; z-index: 2;
  height: 100%; padding: 16px; gap: 14px;
  display: flex; flex-direction: column;
}

.topbar{
  display:flex; align-items:center; gap: 14px;
  padding: 10px 14px; border-radius: 22px;
  flex: 0 0 auto;
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.4px; }
.brand-name{ font-size: 15px; }

.search{
  flex: 1 1 auto; display:flex; align-items:center; gap:9px;
  padding: 9px 13px; border-radius: 14px;
  background: rgba(8,12,24,.34);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: .25s var(--ease);
  max-width: 560px; margin: 0 auto;
}
.search:focus-within{
  border-color: rgba(140,220,255,.6);
  box-shadow: 0 0 0 4px rgba(110,220,255,.14), inset 0 1px 0 rgba(255,255,255,.14);
}
.search .ic{ color: var(--text-dim); width:18px; height:18px; }
.search input{
  flex:1; border:0; background: transparent; color: var(--text);
  font-size: 14px; outline:none; min-width: 0;
}
.search input::placeholder{ color: rgba(230,238,255,.42); }
.search kbd{
  font: inherit; font-size: 11px; color: var(--text-dim);
  padding: 2px 7px; border-radius: 7px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.top-actions{ display:flex; gap:8px; align-items:center; }

.layout{
  flex: 1 1 auto; display:flex; gap: 14px; min-height: 0;
}

.sidebar{
  width: 210px; flex: 0 0 auto; padding: 14px;
  display:flex; flex-direction: column; gap: 12px;
  border-radius: 24px;
}
.nav{ display:flex; flex-direction: column; gap: 4px; }
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 11px 12px; border-radius: 14px;
  background: transparent; border: 1px solid transparent;
  color: rgba(238,244,255,.76); font-size: 14px; font-weight: 600;
  cursor:pointer; text-align:left; transition: .18s var(--ease);
}
.nav-item:hover{ color: var(--text); background: rgba(255,255,255,.07); }
.nav-item.active{
  color: var(--text);
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -16px rgba(0,0,0,.9);
}

.storage{
  margin-top: auto; display:flex; align-items:center; gap: 12px;
  padding: 12px; border-radius: 18px;
  background: rgba(8,12,24,.30);
  border: 1px solid rgba(255,255,255,.12);
}
.ring{ position: relative; width: 44px; height: 44px; flex: 0 0 auto; }
.ring svg{ transform: rotate(-90deg); width:100%; height:100%; }
.ring circle{ fill:none; stroke-width: 4; stroke-linecap: round; }
.ring-bg{ stroke: rgba(255,255,255,.12); }
.ring-fg{
  stroke: url(#g) var(--accent); stroke: #7fe3ff;
  stroke-dasharray: 106.8; stroke-dashoffset: 106.8;
  transition: stroke-dashoffset .8s var(--ease);
  filter: drop-shadow(0 0 6px rgba(126,227,255,.7));
}
.ring span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size: 10.5px; font-weight: 700; letter-spacing:.2px;
}
.storage-text{ display:flex; flex-direction: column; line-height:1.35; min-width:0; }
.storage-text strong{ font-size: 12.5px; font-weight:700; }
.storage-text small{ font-size: 11px; color: var(--text-dim); }

.content{
  flex: 1 1 auto; min-width: 0; display:flex; flex-direction:column;
  padding: 6px 6px 6px 16px; border-radius: 24px;
}

.toolbar{
  display:flex; align-items:center; gap: 12px;
  padding: 10px 10px 10px 2px; flex: 0 0 auto;
}
.crumbs{ display:flex; align-items:center; gap: 4px; flex:1; min-width:0; overflow:hidden; }
.crumb{
  padding: 6px 10px; border-radius: 10px; font-size: 13.5px; font-weight:600;
  color: var(--text-dim); cursor:pointer; white-space:nowrap;
  transition: .18s var(--ease);
}
.crumb:hover{ color: var(--text); background: rgba(255,255,255,.08); }
.crumb.here{ color: var(--text); }
.crumb-sep{ color: rgba(255,255,255,.28); font-size: 12px; padding: 0 1px; }

.tools{ display:flex; align-items:center; gap: 8px; flex: 0 0 auto; }
.seg{ display:flex; padding: 3px; border-radius: 12px;
      background: rgba(8,12,24,.32); border:1px solid rgba(255,255,255,.12); }
.seg-btn{
  display:grid; place-items:center; width: 30px; height: 28px; border-radius: 9px;
  background: transparent; border:0; color: var(--text-dim); cursor:pointer;
  transition: .18s var(--ease);
}
.seg-btn .ic{ width:16px; height:16px; }
.seg-btn:hover{ color: var(--text); }
.seg-btn.active{
  color:#04121b;
  background: linear-gradient(150deg, #9bf0ff, #a99cff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* ─────────────── 文件区 ─────────────── */
.file-area{
  flex: 1 1 auto; overflow: auto; padding: 4px 10px 18px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.file-area::-webkit-scrollbar{ width: 8px; }
.file-area::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18); border-radius: 99px;
}

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

.tile{
  position: relative; display:flex; flex-direction:column; gap:10px;
  min-height: 154px;
  padding: 14px 13px 13px; border-radius: 20px;
  background-image: linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  background-color: rgba(10,16,32,.32);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 30px -22px rgba(0,0,0,.9);
  cursor: pointer; user-select:none;
  transition: transform .2s var(--ease), background .25s, border-color .25s, box-shadow .25s;
  animation: rise .34s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
.tile:hover{
  transform: translateY(-3px);
  background-image: linear-gradient(155deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
  background-color: rgba(12,19,38,.42);
  border-color: rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 22px 40px -24px rgba(0,0,0,.95);
}
.tile.sel{
  border-color: rgba(140,230,255,.75);
  box-shadow: 0 0 0 2px rgba(120,220,255,.35), inset 0 1px 0 rgba(255,255,255,.4);
}

.tile-icon{
  width: 46px; height: 46px; border-radius: 15px; display:grid; place-items:center;
  background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  color: #cfe6ff;
}
.tile-icon .ic{ width: 23px; height: 23px; }
.tile.folder .tile-icon{ color:#ffd98a; background: linear-gradient(150deg, rgba(255,214,120,.30), rgba(255,170,60,.10)); border-color: rgba(255,214,120,.42); box-shadow: inset 0 1px 0 rgba(255,236,190,.6), 0 6px 16px -10px rgba(255,190,80,.8); }
.tile.img .tile-icon{ color:#8be9ff; background: linear-gradient(150deg, rgba(120,220,255,.28), rgba(80,170,255,.09)); border-color: rgba(140,225,255,.42); }
.tile.vid .tile-icon{ color:#c6a6ff; background: linear-gradient(150deg, rgba(180,150,255,.28), rgba(120,90,255,.09)); border-color: rgba(190,160,255,.42); }
.tile.aud .tile-icon{ color:#ff9ede; background: linear-gradient(150deg, rgba(255,150,220,.28), rgba(220,90,190,.09)); border-color: rgba(255,160,220,.42); }
.tile.doc .tile-icon{ color:#9ef0c8; background: linear-gradient(150deg, rgba(140,240,200,.28), rgba(60,190,150,.09)); border-color: rgba(150,240,200,.42); }

.tile .tile-icon{ position: relative; z-index: 2; }
.tile .tile-name, .tile .tile-meta{ position: relative; z-index: 2; }
.tile .tile-name{
  margin-top: auto;
  font-size: 13.5px; font-weight:600; line-height:1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile-meta{ font-size: 11.5px; color: rgba(232,240,255,.72); }

.tile .thumb{
  position:absolute; inset:0; border-radius: inherit; overflow:hidden; z-index:1;
  background-size: cover; background-position: center; opacity:0;
  transition: opacity .3s var(--ease);
}
.tile .thumb.on{ opacity:1; }
.tile .thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(6,10,20,.92), rgba(6,10,20,.28) 46%, rgba(6,10,20,0) 78%);
}
.tile:has(.thumb.on) .tile-name{ text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.tile:has(.thumb.on) .tile-meta{ color: rgba(240,246,255,.78); }
.tile .thumb + .tile-icon{ display:none; }

/* 列表视图 */
.list{ display:flex; flex-direction: column; gap: 6px; }
.row{
  display:grid; grid-template-columns: 34px 1fr 110px 150px 38px;
  align-items:center; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  border: 1px solid transparent; cursor:pointer;
  transition: .18s var(--ease);
}
.row:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.row.sel{ background: rgba(120,220,255,.14); border-color: rgba(140,230,255,.45); }
.row .ric{ display:grid; place-items:center; color:#cfe6ff; }
.row .rname{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .rsize, .row .rdate{ font-size:12px; color: var(--text-dim); white-space:nowrap; }

.empty{
  height: 100%; display:grid; place-items:center; text-align:center; padding: 40px 20px;
}
.empty-inner{ display:flex; flex-direction:column; align-items:center; gap: 10px; color: var(--text-dim); }
.empty-inner .big-ic{
  width: 88px; height: 88px; border-radius: 28px; display:grid; place-items:center;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.empty-inner .big-ic .ic{ width: 40px; height: 40px; opacity:.8; }
.empty-inner strong{ color: var(--text); font-size: 15px; }
.empty-inner small{ font-size: 12.5px; }

.skeleton{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
.sk{ height: 132px; border-radius: 20px;
     background: linear-gradient(100deg, rgba(255,255,255,.06), rgba(255,255,255,.14), rgba(255,255,255,.06));
     background-size: 220% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer{ to{ background-position: -120% 0; } }

/* ─────────────── 上传面板 ─────────────── */
.uploads{
  position: fixed; right: 20px; bottom: 20px; z-index: 15;
  width: 320px; max-width: calc(100vw - 40px);
  padding: 14px; border-radius: 20px;
  animation: pop .3s var(--ease) both;
}
.uploads-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.uploads-head strong{ font-size: 13px; }
.mini{
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  color: var(--text-dim); border-radius: 9px; padding: 4px 10px; font-size: 11.5px; cursor:pointer;
}
.upload-list{ display:flex; flex-direction:column; gap: 9px; max-height: 220px; overflow:auto; }
.up-item{ font-size: 12px; }
.up-name{ display:flex; justify-content:space-between; gap: 8px; margin-bottom: 5px; }
.up-name span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-name span:last-child{ color: var(--text-dim); flex:0 0 auto; }
.bar{ height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow:hidden; }
.bar i{
  display:block; height:100%; width:0%;
  border-radius:99px;
  background: linear-gradient(90deg, #7fe3ff, #a99cff);
  box-shadow: 0 0 12px rgba(140,210,255,.7);
  transition: width .18s linear;
}

/* ─────────────── 拖拽 / 提示 / 菜单 ─────────────── */
.dropzone{
  position: fixed; inset: 0; z-index: 40;
  display:grid; place-items:center;
  background: rgba(6,10,22,.55);
  backdrop-filter: blur(6px);
}
.drop-card{
  padding: 34px 44px; border-radius: 26px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 8px;
  animation: pop .25s var(--ease) both;
}
.drop-card strong{ font-size: 16px; }
.drop-card small{ color: var(--text-dim); font-size: 12.5px; }

.toasts{
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 60; display:flex; flex-direction:column; gap: 8px; align-items:center;
  pointer-events: none;
}
.toast{
  padding: 10px 16px; border-radius: 14px; font-size: 13px; font-weight:600;
  color: var(--text);
  background: rgba(20,26,44,.82);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(16px) saturate(160%);
  animation: toastIn .28s var(--ease) both;
}
.toast.bad{ border-color: rgba(255,140,170,.5); }
@keyframes toastIn{ from{ opacity:0; transform: translateY(-10px);} to{opacity:1; transform:none;} }

.ctx{
  position: fixed; z-index: 55; min-width: 168px; padding: 7px;
  border-radius: 16px; display:flex; flex-direction:column; gap: 2px;
  animation: pop .16s var(--ease) both;
}
.ctx button{
  display:flex; align-items:center; gap: 9px;
  padding: 9px 11px; border-radius: 11px; border:0; background: transparent;
  color: var(--text); font-size: 13px; font-weight:600; text-align:left; cursor:pointer;
  transition: .15s;
}
.ctx button:hover{ background: rgba(255,255,255,.12); }
.ctx button.danger{ color: #ffb3c2; }
.ctx hr{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:5px 4px; }

/* ─────────────── 预览 ─────────────── */
.preview{
  position: fixed; inset: 0; z-index: 50;
  display:grid; place-items:center; padding: 26px;
  background: rgba(4,7,16,.72);
  backdrop-filter: blur(18px) saturate(140%);
  animation: fade .25s var(--ease) both;
}
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
.preview-body{
  max-width: min(1080px, 100%); max-height: 100%;
  display:grid; place-items:center;
}
.preview-body img, .preview-body video{
  max-width: 100%; max-height: 82vh; border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
}
.preview-body pre{
  max-width: min(860px, 88vw); max-height: 76vh; overflow:auto;
  padding: 20px 22px; border-radius: 18px; margin:0;
  background: rgba(12,17,30,.9);
  border: 1px solid rgba(255,255,255,.14);
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #d8e6ff; white-space: pre-wrap; word-break: break-word;
}
.preview-close{
  position: fixed; top: 18px; right: 20px;
  width: 40px; height: 40px; border-radius: 14px;
  background: rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  color: var(--text); font-size: 16px; cursor:pointer;
  backdrop-filter: blur(14px);
}

/* ─────────────── 响应式 ─────────────── */
@media (max-width: 900px){
  .sidebar{ display:none; }
  .shell{ padding: 10px; gap: 10px; }
  .topbar{ padding: 8px 10px; border-radius: 18px; gap: 8px; }
  .brand-name{ display:none; }
  .search kbd{ display:none; }
  .btn span{ display:none; }
  .btn{ padding: 10px 12px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(132px,1fr)); gap: 10px; }
  .row{ grid-template-columns: 30px 1fr 78px 34px; }
  .row .rdate{ display:none; }
  .content{ padding: 4px 4px 4px 12px; border-radius: 20px; }
  .uploads{ right: 10px; bottom: 10px; left: 10px; width: auto; }
}

@media (prefers-reduced-motion: reduce){
  .blob{ animation: none; }
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   背景图层 / 服务器监控 / 设置面板 / 灵动岛
   ============================================================ */

/* 背景图 */
.bglayer{
  position:absolute; inset:0; z-index:2;
  background-size: cover; background-position: center;
  opacity:0; transition: opacity .6s var(--ease);
}
.bglayer.on{ opacity:1; }
body.has-bg .blob{ opacity:.14; }
body.has-bg .grain{ opacity:.08; }
.bglayer::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,10,20,.55), rgba(6,10,20,.78));
}

/* 侧栏：服务器状态 */
.sys{
  padding: 12px; border-radius: 18px;
  background-color: rgba(9,14,28,.34);
  background-image: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
}
.sys-h{
  display:flex; align-items:center; gap:7px;
  font-size: 11.5px; font-weight:700; letter-spacing:.4px;
  color: rgba(238,244,255,.7); margin-bottom: 10px;
}
.sys-h .i-dot{
  width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.16);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
.sys-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sys-item label{ display:block; font-size:10.5px; color: rgba(230,238,255,.5); margin-bottom:3px; }
.sys-item b{ font-size: 12.5px; font-weight:700; letter-spacing:.2px; }
.mini{ height:3px; border-radius:2px; background: rgba(255,255,255,.12); margin-top:5px; overflow:hidden; }
.mini i{
  display:block; height:100%; width:0; border-radius:2px;
  background: linear-gradient(90deg,#7fe3ff,#a99cff);
  transition: width .5s var(--ease), background .3s;
}
.mini i.warn{ background: linear-gradient(90deg,#ffd479,#ff9f5b); }
.mini i.bad{ background: linear-gradient(90deg,#ff8f9e,#ff5b7f); }

/* 设置面板 */
.sheet{
  position: fixed; inset:0; z-index: 70;
  display:grid; place-items:center; padding: 20px;
  background: rgba(4,7,16,.6);
  backdrop-filter: blur(10px);
  animation: fade .2s var(--ease) both;
}
.sheet-card{
  width: min(420px, 100%); padding: 20px; border-radius: 24px;
  animation: pop .28s var(--ease) both;
}
.sheet-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
.sheet-h strong{ font-size: 15px; }
.sheet-sec h4{ margin:0 0 10px; font-size: 12px; font-weight:700; color: rgba(238,244,255,.66); letter-spacing:.4px; }
.presets{ display:grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.pre{
  height: 54px; border-radius: 13px; cursor:pointer;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: .2s var(--ease);
}
.pre:hover{ transform: translateY(-2px); }
.pre.sel{ border-color: rgba(150,225,255,.9); box-shadow: 0 0 0 2px rgba(120,220,255,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.p-aurora{ background: linear-gradient(140deg,#5b8cff,#a06bff 55%,#29e2c8); }
.p-sunset{ background: linear-gradient(140deg,#ff9d6c,#ff5f9e 55%,#7b4bff); }
.p-forest{ background: linear-gradient(140deg,#1f7a5a,#2fa36b 55%,#0b3b34); }
.p-night{ background: linear-gradient(140deg,#1b2450,#2c3566 55%,#0a0f1e); }
.sheet-actions{ display:flex; gap:8px; }
.hint-sm{ margin: 12px 0 0; font-size: 11.5px; line-height:1.5; color: rgba(232,240,255,.5); }

/* 灵动岛 */
#island{
  position: fixed; top: 72px; left: 50%; z-index: 60;
  border-radius: 22px; overflow: hidden;
  max-width: 168px;
  background:
    radial-gradient(120% 90% at 22% 0%, rgba(120,150,255,.16), rgba(120,150,255,0) 58%),
    linear-gradient(160deg, rgba(46,56,88,.62), rgba(16,20,32,.72) 48%, rgba(9,12,20,.82));
  backdrop-filter: blur(24px) saturate(170%) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.04);
  border: 1px solid rgba(150,175,255,.22);
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    0 2px 10px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 0 0 1px rgba(90,120,220,.08);
  color: #fff; font-size: 13px; line-height: 1;
  transform: translate(-50%,-12px) scale(.96); opacity:0;
  transition: max-width .42s cubic-bezier(.22,.9,.3,1.05), transform .34s cubic-bezier(.22,.9,.3,1.05),
              opacity .28s, border-color .3s, box-shadow .3s;
  will-change: max-width, transform;
}
#island::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    linear-gradient(118deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%),
    radial-gradient(120% 80% at 50% -20%, rgba(160,190,255,.18), rgba(160,190,255,0) 60%);
  mix-blend-mode: screen; opacity:.55;
}
#island > *{ position: relative; z-index: 1; }
#island.on{ opacity:1; transform: translate(-50%,0) scale(1); }
#island.wide{ max-width: min(94vw,430px); }
#island.expanded{ max-width: min(94vw,340px); }
#island.ok{ border-color: rgba(52,211,153,.5); }
#island.err{ border-color: rgba(248,113,113,.55); }

#island .i-bar{ display:flex; align-items:center; gap:8px; height:38px; padding:0 5px 0 12px; cursor:pointer; }
#island .i-dot{ width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.16); }
#island.err .i-dot{ background:#f87171;box-shadow:0 0 0 4px rgba(248,113,113,.16); }
#island .i-msg{ flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;opacity:.95; }
#island .i-eq{ display:none;align-items:flex-end;gap:2px;height:14px;flex:0 0 auto; }
#island.music .i-eq{ display:flex; }
#island .i-eq i{ width:2.5px;border-radius:2px;background:linear-gradient(180deg,#8ab4ff,#a855f7);animation:eq 1s ease-in-out infinite; }
#island .i-eq i:nth-child(1){ height:40%;animation-delay:-.2s }
#island .i-eq i:nth-child(2){ height:90%;animation-delay:-.5s }
#island .i-eq i:nth-child(3){ height:60%;animation-delay:-.8s }
#island .i-eq i:nth-child(4){ height:75%;animation-delay:-.35s }
@keyframes eq{ 0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)} }

#island .i-btn{
  flex:0 0 auto; width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(165deg, rgba(255,255,255,.16), rgba(255,255,255,.045));
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s;
}
#island .i-btn:hover{ background:linear-gradient(165deg, rgba(255,255,255,.26), rgba(255,255,255,.09)); }
#island .i-btn:active{ transform:scale(.94); }
#island .i-btn svg{ width:13px;height:13px;fill:currentColor; }
#island.music .i-btn{ background:linear-gradient(135deg,rgba(120,160,255,.5),rgba(168,85,247,.45));border-color:rgba(200,215,255,.45); }

#island .i-panel{
  max-height:0; opacity:0; overflow:hidden; padding:0 14px;
  transition: max-height .34s cubic-bezier(.22,.9,.3,1.05), opacity .26s, padding .3s;
}
#island.expanded .i-panel{ max-height:190px; opacity:1; padding:2px 14px 12px; }
#island .i-meta{ display:flex;flex-direction:column;gap:3px;margin-bottom:10px; }
#island .i-title{ font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#island .i-artist{ font-size:11.5px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#island .i-ctrl{ display:flex;align-items:center;justify-content:center;gap:16px; }
#island .i-cbtn{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s;
}
#island .i-cbtn:hover{ background:rgba(255,255,255,.16); }
#island .i-cbtn:active{ transform:scale(.93); }
#island .i-cbtn svg{ width:13px;height:13px;fill:currentColor; }
#island .i-cbtn.i-main{
  width:42px;height:42px;
  background:linear-gradient(135deg,#7aa2ff,#a855f7);
  border-color:rgba(190,205,255,.55);
  box-shadow:0 6px 18px rgba(91,140,255,.4);
}
#island .i-progress{ height:3px;border-radius:2px;background:rgba(255,255,255,.14);margin-top:12px;overflow:hidden; }
#island .i-progress > i{ display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,#8ab4ff,#a855f7);transition:width .3s linear; }
#island .i-sys{
  display:flex; justify-content:space-between; gap:6px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 10.5px; color: rgba(255,255,255,.6);
}
#island .i-sys b{ color:#fff; font-weight:700; margin-left:2px; }

@media (max-width: 900px){
  #island{ top: 64px; }
  .sys{ display:none; }
}

/* 音乐库（设置面板） */
.tracks{ display:flex; flex-direction:column; gap:6px; max-height: 190px; overflow:auto; margin-bottom: 10px; }
.track{
  display:flex; align-items:center; gap:8px;
  padding: 7px 9px; border-radius: 11px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12.5px;
}
.track.playing{ border-color: rgba(140,230,255,.55); background: rgba(120,220,255,.12); }
.track .t-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track .t-size{ font-size:11px; color: rgba(232,240,255,.45); flex:0 0 auto; }
.track .t-btn{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08);
  color:#fff;display:grid;place-items:center;cursor:pointer;transition:.16s;
}
.track .t-btn:hover{ background: rgba(255,255,255,.18); }
.track .t-btn.del{ color:#ffb3c2; }
.track .t-btn svg{ width:12px;height:12px;fill:currentColor; }
.track-empty{ font-size:12px; color: rgba(232,240,255,.45); padding: 8px 2px; }

/* ============================================================
   音乐频谱背景（环绕 · 动态取色）
   ============================================================ */
#spectrum{
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity .8s var(--ease);
}
body.spec-on #spectrum{ opacity: 1; }
body.spec-on .blob{ opacity:.10; }
body.spec-on .bglayer.on{ opacity:.35; }

/* 动态取色：岛与高光跟着频谱变色 */
#island{ box-shadow: var(--spec-glow, 0 18px 44px rgba(0,0,0,.55)), inset 0 1px 0 rgba(255,255,255,.30); }
#island.music{ border-color: var(--spec-edge, rgba(150,175,255,.22)); }
.btn.primary{
  background-image: linear-gradient(150deg,
    hsl(var(--spec-hue, 190) 100% 78%),
    hsl(calc(var(--spec-hue, 190) + 45) 95% 72%) 45%,
    hsl(calc(var(--spec-hue, 190) + 90) 90% 76%));
}

/* ============================================================
   移动端：抽屉式侧栏（分类 / 服务器状态 / 设置 / 退出）
   ============================================================ */
.only-mobile{ display: none !important; }
.drawer-mask{
  position: fixed; inset: 0; z-index: 75;
  background: rgba(4,8,16,.58);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.drawer-mask.on{ opacity: 1; pointer-events: auto; }

.side-actions{ display:flex; gap:8px; margin-top: 10px; }
.side-actions .btn{ flex:1 1 0; justify-content:center; font-size:13px; }

@media (max-width: 900px){
  .only-mobile{ display: inline-flex !important; }

  .sidebar{
    display: flex !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(78vw, 280px);
    z-index: 80;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    border-radius: 0 24px 24px 0;
    transform: translateX(-104%);
    transition: transform .32s var(--ease);
    overflow-y: auto;
    /* transform 与 backdrop-filter 同用会让内容发糊，抽屉里改用实底 */
    background: linear-gradient(165deg, rgba(20,27,46,.97), rgba(9,13,24,.99));
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 22px 0 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
  }
  .sidebar.open{ transform: none; }
  .sidebar .storage{ margin-top: 14px; }

  .sys{ display: block !important; }
}

/* ===== 全设备自适应 ===== */
html{ height: 100%; }
body{ min-height: 100vh; min-height: 100dvh; }

/* 大屏 / 高分屏 */
@media (min-width: 1440px){
  .shell{ padding: 22px 26px; gap: 18px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 14px; }
  .search{ max-width: 720px; }
  .tile{ min-height: 168px; }
}
@media (min-width: 1900px){
  .shell{ max-width: 1760px; margin: 0 auto; width: 100%; }
}

/* 笔记本 */
@media (min-width: 901px) and (max-width: 1199px){
  .shell{ padding: 14px; gap: 12px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(152px,1fr)); }
  .search{ max-width: 420px; }
  .row{ grid-template-columns: 34px 1fr 96px 120px 38px; gap: 10px; }
}

/* 平板 / 手机（≤900） */
@media (max-width: 900px){
  .shell{
    padding: calc(8px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .topbar{ gap: 8px; }
  .top-actions{ flex: 0 0 auto; }
  .btn{ min-height: 42px; }
  .content{ border-radius: 20px; }
  .crumbs{ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .crumbs::-webkit-scrollbar{ display: none; }
  .file-area{ -webkit-overflow-scrolling: touch; }
  .sheet{ padding: 16px; }
  .sheet-card{ max-height: calc(100dvh - 32px); overflow-y: auto; }
}

/* 手机竖屏（≤640） */
@media (max-width: 640px){
  .shell{
    padding: calc(6px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .topbar{ padding: 7px 8px; border-radius: 16px; gap: 6px; }
  .brand{ gap: 6px; }
  .logo{ width: 26px; height: 26px; border-radius: 9px; }
  .search{ padding: 8px 10px; border-radius: 12px; max-width: none; }
  .search input{ font-size: 13px; }
  .btn{ padding: 9px 10px; border-radius: 12px; }
  .btn svg{ width: 18px; height: 18px; }
  .content{ padding: 0 0 0 10px; border-radius: 16px; }
  .toolbar{ padding: 8px 6px 8px 2px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(104px,1fr)); gap: 8px; }
  .tile{ min-height: 128px; padding: 10px 9px 9px; border-radius: 15px; gap: 7px; }
  .tile .t-name{ font-size: 12px; }
  .row{ grid-template-columns: 26px 1fr 62px 30px; gap: 8px; padding: 9px 8px; }
  .row .rname{ font-size: 12.5px; }
  .sheet{ padding: 0; align-items: flex-end; }
  .sheet-card{
    width: 100%; max-height: calc(100dvh - 20px);
    border-radius: 22px 22px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .presets{ grid-template-columns: repeat(3,1fr); }
  .tracks{ max-height: 42vh; }
  #island{ max-width: calc(100vw - 24px); }
  #island .i-sys{ display: none; }
  #island .i-title, #island .i-artist{ max-width: 46vw; }
  .uploads{ left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .upload-list{ max-height: 34vh; }
}

/* 小屏横屏（矮屏，如手机横放） */
@media (max-height: 540px) and (orientation: landscape){
  .shell{ padding: 6px 8px; gap: 6px; }
  .topbar{ padding: 6px 8px; border-radius: 14px; }
  .sidebar{ padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .sidebar .storage{ margin-top: 8px; }
  .grid{ grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
  .tile{ min-height: 112px; }
  .sheet-card{ max-height: calc(100dvh - 12px); overflow-y: auto; }
  #island{ top: calc(48px + env(safe-area-inset-top)); }
  .upload-list{ max-height: 40vh; }
}

/* 超小屏兜底 */
@media (max-width: 380px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .row{ grid-template-columns: 24px 1fr 54px; }
  .search kbd{ display: none; }
}

/* 触屏：去掉 hover 副作用，放大点击区域 */
@media (hover: none){
  .tile:hover, .row:hover, .nav-item:hover{ transform: none; }
  .nav-item, .chip, .btn{ -webkit-tap-highlight-color: transparent; }
}