:root{
  color-scheme:light;
  --bg:#f4f6fb; --surface:#ffffff; --surface2:#f8fafd;
  --border:#e4e9f2; --border2:#d4dce9;
  --text:#182236; --muted:#68738a; --faint:#9aa4b8;
  --accent:#4f7cff; --accent2:#22c8ee; --accent-soft:#eef3ff;
  --danger:#e5484d; --danger-soft:#fdebec; --ok:#18a058; --ok-soft:#e6f6ee;
  --warn:#d97706; --warn-soft:#fdf3e3;
  --shadow:0 1px 2px rgba(20,30,60,.04),0 8px 24px -12px rgba(20,30,60,.12);
  --shadow-lg:0 24px 64px -24px rgba(20,30,60,.28);
  --radius:12px;
  --grad:linear-gradient(135deg,#4f7cff 0%,#6aa0ff 55%,#22c8ee 130%);
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0e16; --surface:#101624; --surface2:#151d2e;
  --border:#1e2839; --border2:#2a3650;
  --text:#e7ecf6; --muted:#8b96ad; --faint:#5c6880;
  --accent:#5d86ff; --accent2:#2dd4f0; --accent-soft:#17233d;
  --danger:#f2555a; --danger-soft:#3a1a1e; --ok:#2fbf71; --ok-soft:#12291d;
  --warn:#f0a020; --warn-soft:#33270f;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lg:0 24px 64px -24px rgba(0,0,0,.7);
}
[data-theme="cyber"]{
  color-scheme:dark;
  --bg:#05070d; --surface:#0b0f1a; --surface2:#111726;
  --border:#1a2233; --border2:#243049;
  --text:#e6f0ff; --muted:#8593b0; --faint:#566180;
  --accent:#22d3ee; --accent2:#f472b6; --accent-soft:#0a2230;
  --danger:#ff4d6d; --danger-soft:#3a1620; --ok:#00e08a; --ok-soft:#0a2a20;
  --warn:#ffb020; --warn-soft:#33270f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 64px -24px rgba(0,0,0,.8);
  --radius:10px;
  --grad:linear-gradient(135deg,#0891b2 0%,#7c3aed 55%,#db2777 130%);
}
[data-theme="violet"]{
  color-scheme:dark;
  --bg:#0d0a16; --surface:#151024; --surface2:#1d1630;
  --border:#2a2140; --border2:#3a2f55;
  --text:#ece7f8; --muted:#9b90b8; --faint:#6b6088;
  --accent:#a78bfa; --accent2:#f0abfc; --accent-soft:#241a3d;
  --danger:#fb7185; --danger-soft:#3a1a24; --ok:#34d399; --ok-soft:#12291f;
  --warn:#fbbf24; --warn-soft:#33270f;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -12px rgba(0,0,0,.55);
  --shadow-lg:0 24px 64px -24px rgba(0,0,0,.75);
  --radius:14px;
  --grad:linear-gradient(135deg,#7c3aed 0%,#a855f7 50%,#ec4899 130%);
}
[data-theme="mint"]{
  --bg:#f2f8f5; --surface:#ffffff; --surface2:#f6faf8;
  --border:#dcebe3; --border2:#c8ddd2;
  --text:#14281f; --muted:#5f7a6e; --faint:#93aca0;
  --accent:#10b981; --accent2:#06b6d4; --accent-soft:#e7f7f0;
  --danger:#e5484d; --danger-soft:#fdebec; --ok:#16a34a; --ok-soft:#e6f6ee;
  --warn:#d97706; --warn-soft:#fdf3e3;
  --shadow:0 1px 2px rgba(20,50,40,.04),0 8px 24px -12px rgba(20,50,40,.12);
  --shadow-lg:0 24px 64px -24px rgba(20,50,40,.24);
  --radius:12px;
  --grad:linear-gradient(135deg,#059669 0%,#10b981 55%,#06b6d4 130%);
}
[data-theme="sunset"]{
  --bg:#fbf6f1; --surface:#ffffff; --surface2:#fdf8f3;
  --border:#f0e2d6; --border2:#e6d2c0;
  --text:#2e2018; --muted:#8a7565; --faint:#b3a092;
  --accent:#f97316; --accent2:#ec4899; --accent-soft:#fef0e6;
  --danger:#dc2626; --danger-soft:#fdebec; --ok:#16a34a; --ok-soft:#e6f6ee;
  --warn:#d97706; --warn-soft:#fdf3e3;
  --shadow:0 1px 2px rgba(80,40,20,.04),0 8px 24px -12px rgba(80,40,20,.12);
  --shadow-lg:0 24px 64px -24px rgba(80,40,20,.24);
  --radius:14px;
  --grad:linear-gradient(135deg,#ea580c 0%,#f97316 50%,#db2777 130%);
}
[data-theme="mono"]{
  --bg:#f5f5f4; --surface:#ffffff; --surface2:#fafaf9;
  --border:#e7e5e4; --border2:#d6d3d1;
  --text:#1c1917; --muted:#78716c; --faint:#a8a29e;
  --accent:#292524; --accent2:#57534e; --accent-soft:#f0efed;
  --danger:#b91c1c; --danger-soft:#fdebec; --ok:#15803d; --ok-soft:#e6f6ee;
  --warn:#b45309; --warn-soft:#fdf3e3;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.10);
  --shadow-lg:0 24px 64px -24px rgba(0,0,0,.22);
  --radius:8px;
  --grad:linear-gradient(135deg,#292524 0%,#44403c 55%,#78716c 130%);
}
[data-theme="aurora"]{
  color-scheme:dark;
  --bg:#06131b; --surface:#0b1d27; --surface2:#102633;
  --border:#16303c; --border2:#1f4152;
  --text:#dff5ee; --muted:#7fa8a0; --faint:#4f7a74;
  --accent:#2dd4bf; --accent2:#818cf8; --accent-soft:#0c2b30;
  --danger:#fb7185; --danger-soft:#3a1a24; --ok:#34d399; --ok-soft:#12291f;
  --warn:#fbbf24; --warn-soft:#33270f;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -12px rgba(0,0,0,.55);
  --shadow-lg:0 24px 64px -24px rgba(0,0,0,.75);
  --radius:14px;
  --grad:linear-gradient(135deg,#0d9488 0%,#2dd4bf 40%,#6366f1 80%,#a855f7 130%);
}
[data-theme="sakura"]{
  --bg:#fdf3f6; --surface:#ffffff; --surface2:#fdf7f9;
  --border:#f3dde5; --border2:#e9c9d5;
  --text:#3d2230; --muted:#96707f; --faint:#c0a3ae;
  --accent:#d9527e; --accent2:#b085f5; --accent-soft:#fdeef3;
  --danger:#dc2626; --danger-soft:#fdebec; --ok:#16a34a; --ok-soft:#e6f6ee;
  --warn:#d97706; --warn-soft:#fdf3e3;
  --shadow:0 1px 2px rgba(120,40,70,.05),0 8px 24px -12px rgba(120,40,70,.14);
  --shadow-lg:0 24px 64px -24px rgba(120,40,70,.26);
  --radius:14px;
  --grad:linear-gradient(135deg,#f472b6 0%,#fb7185 50%,#c084fc 130%);
}
[data-theme="royal"]{
  color-scheme:dark;
  --bg:#0e0c07; --surface:#17130b; --surface2:#1f1a10;
  --border:#2e2716; --border2:#453a20;
  --text:#f3ead6; --muted:#a89877; --faint:#6f6349;
  --accent:#e6b451; --accent2:#f6e27a; --accent-soft:#2b2210;
  --danger:#f2555a; --danger-soft:#3a1a1e; --ok:#a8bf6a; --ok-soft:#242b12;
  --warn:#f0a020; --warn-soft:#33270f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 64px -24px rgba(0,0,0,.8);
  --radius:10px;
  --grad:linear-gradient(135deg,#b8860b 0%,#e6b451 55%,#f6e27a 130%);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace}
a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:8px 12px;outline:none;transition:border .15s,box-shadow .15s;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
::placeholder{color:var(--faint)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-weight:500;font-size:13.5px;border:1px solid transparent;transition:all .15s;white-space:nowrap;user-select:none}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 2px 10px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{border-color:var(--border2);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:7px}
.btn-icon{padding:7px;border-radius:8px;color:var(--muted)}
.btn-icon:hover{background:var(--accent-soft);color:var(--accent)}
.btn-icon svg{width:17px;height:17px}
.btn:disabled{opacity:.55;pointer-events:none}

/* ---------- auth pages ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden;
  background:radial-gradient(900px 500px at 15% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),
             radial-gradient(800px 500px at 110% 110%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 60%),var(--bg)}
.auth-wrap::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:44px 44px;opacity:.35;mask-image:radial-gradient(700px 500px at 50% 40%,#000,transparent)}
.auth-card{position:relative;width:400px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:36px;box-shadow:var(--shadow-lg)}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.auth-logo .logo-mark{width:38px;height:38px;border-radius:11px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 14px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.auth-logo .logo-mark svg{width:22px;height:22px}
.auth-logo h1{font-size:20px;font-weight:700;letter-spacing:-.02em}
.auth-sub{color:var(--muted);font-size:13px;margin-bottom:26px}
.auth-card .field{margin-bottom:14px}
.auth-card label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:500}
.auth-card .btn-primary{width:100%;justify-content:center;padding:10px;margin-top:8px}
.auth-switch{text-align:center;margin-top:18px;font-size:13px;color:var(--muted)}
.auth-switch a{cursor:pointer;font-weight:500}
.auth-err{background:var(--danger-soft);color:var(--danger);border-radius:8px;padding:8px 12px;font-size:12.5px;margin-bottom:14px;display:none}
.auth-err.show{display:block}
.auth-foot{position:absolute;bottom:18px;color:var(--faint);font-size:12px;letter-spacing:.04em}

/* ---------- layout ---------- */
.layout{display:flex;height:100vh}
.sidebar{width:232px;flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px}
.side-logo{display:flex;align-items:center;gap:9px;padding:2px 8px 18px}
.side-logo .logo-mark{width:30px;height:30px;border-radius:9px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff}
.side-logo .logo-mark svg{width:17px;height:17px}
.side-logo b{font-size:15.5px;letter-spacing:-.01em}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--muted);font-weight:500;font-size:13.5px;cursor:pointer;transition:all .13s;margin-bottom:2px}
.nav-item svg{width:17px;height:17px}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent)}
.nav-sep{height:1px;background:var(--border);margin:12px 6px}
.nav-label{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;padding:0 12px;margin-bottom:6px;font-weight:600}
.side-quota{margin-top:auto;padding:14px 10px 4px}
.quota-bar{height:5px;border-radius:3px;background:var(--surface2);border:1px solid var(--border);overflow:hidden;margin:8px 0 6px}
.quota-bar i{display:block;height:100%;background:var(--grad);border-radius:3px;transition:width .4s}
.quota-text{font-size:11.5px;color:var(--muted)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:60px;flex:none;display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(10px)}
.search-box{position:relative;flex:0 1 340px;min-width:150px;max-width:42vw}
.search-box>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none;transition:color .15s}
.search-box input{height:38px;padding:0 34px 0 37px;background:var(--surface);border:1px solid color-mix(in srgb,var(--border2) 60%,var(--muted));border-radius:10px;font-size:13.5px;box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text) 6%,transparent)}
.search-box input::placeholder{color:var(--muted)}
.search-box input:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border2))}
.search-box input:focus{background:var(--surface);border-color:var(--accent)}
.search-box:focus-within>svg{color:var(--accent)}
.search-clear{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:23px;height:23px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--faint);transition:all .15s}
.search-clear:hover{background:var(--surface2);color:var(--text)}
.search-clear svg{width:13px;height:13px;display:block}
.topbar .spacer{flex:1}
.user-chip{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:99px;border:1px solid var(--border);cursor:pointer;transition:all .15s}
.user-chip:hover{border-color:var(--accent)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;flex:none}
.user-chip span{font-size:13px;font-weight:500;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:22px}

/* ---------- toolbar / breadcrumb ---------- */
.page-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:34px}
.crumbs{display:flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.crumbs a{color:var(--muted);cursor:pointer;font-weight:500;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs a:hover{color:var(--accent)}
.crumbs a.crumb-cur{color:var(--text)}
.crumbs .crumb-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs .sep{color:var(--faint);font-weight:400;flex:none}
.crumbs .crumb-more{display:none;color:var(--faint);font-weight:400;flex:none}
.crumbs .crumb-root{display:flex;align-items:center;gap:5px;flex:none}
.crumbs .crumb-root svg{width:15px;height:15px;display:none;flex:none}
.page-head .spacer{flex:1 1 auto;min-width:6px}
.page-head .hint{flex:0 1 auto;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head-tools{display:flex;align-items:center;gap:8px;flex:none}
.view-toggle{display:flex;height:32px;border:1px solid var(--border2);border-radius:8px;overflow:hidden;background:var(--surface)}
.view-toggle button{display:flex;align-items:center;padding:0 9px;color:var(--muted);transition:background .15s,color .15s}
.view-toggle button:hover{color:var(--text);background:var(--surface2)}
.view-toggle button svg{width:15px;height:15px;display:block}
.view-toggle button.active{background:var(--accent-soft);color:color-mix(in srgb,var(--accent) 62%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.sort-wrap{position:relative;display:flex;flex:none}
.sort-wrap .chev{position:absolute;right:11px;top:50%;width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sort-select{appearance:none;-webkit-appearance:none;width:auto;height:32px;padding:0 28px 0 10px;border:1px solid var(--border2);border-radius:8px;background:var(--surface);color:var(--text);font-size:12.5px;cursor:pointer;transition:border .15s,box-shadow .15s}
.sort-select:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border2))}
.sort-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.sel-bar{display:flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:10px;padding:7px 12px;margin-bottom:14px;font-size:13px;color:var(--accent)}
.sel-bar .spacer{flex:1}

/* ---------- file list ---------- */
.file-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.file-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);font-weight:600;background:var(--surface2)}
.file-table th.sortable{cursor:pointer;user-select:none}
.file-table th.sortable:hover{color:var(--accent)}
.file-table td{padding:9px 14px;border-bottom:1px solid var(--border);font-size:13.5px}
.file-table tr:last-child td{border-bottom:none}
.file-table tbody tr{cursor:pointer;transition:background .1s}
.file-table tbody tr:hover{background:var(--surface2)}
.file-table tbody tr.selected{background:var(--accent-soft)}
.fname{display:flex;align-items:center;gap:10px;font-weight:500;min-width:0}
.fname .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star-mark{display:inline-flex;color:#f5b942;flex:none;margin-left:2px}
.star-mark svg{fill:currentColor}
.ficon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.ficon svg{width:17px;height:17px}
.ficon.dir{background:var(--accent-soft);color:var(--accent)}
.ficon.img{background:#fdeef4;color:#e0447c}
.ficon.vid{background:#f0ecfe;color:#7c5cf0}
.ficon.aud{background:#e8f8f0;color:#16a06a}
.ficon.doc{background:#e8f2fe;color:#2f80e0}
.ficon.zip{background:#fdf3e3;color:#d97706}
.ficon.etc{background:var(--surface2);color:var(--muted)}
[data-dark] .ficon.img{background:#3a1a28}[data-dark] .ficon.vid{background:#261d45}
[data-dark] .ficon.aud{background:#0f2c20}[data-dark] .ficon.doc{background:#122a45}
[data-dark] .ficon.zip{background:#33270f}[data-dark] .ficon.etc{background:var(--surface2)}
.fthumb{position:relative;width:32px;height:32px;border-radius:8px;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;background:var(--surface2)}
.fthumb>img,.fthumb>video{width:100%;height:100%;object-fit:cover;display:block}
.fthumb>.ficon{width:100%;height:100%;border-radius:0}
.fthumb .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(0,0,0,.12)}
.fthumb .play-badge svg{width:13px;height:13px;fill:#fff;stroke:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.grid-item .fthumb{width:100%;height:112px;border-radius:10px;margin:0 auto 10px}
.grid-item .fthumb>.ficon{width:52px;height:52px;border-radius:13px}
.grid-item .fthumb .play-badge svg{width:30px;height:30px}
.td-muted{color:var(--muted);font-size:12.5px}
.row-actions{display:flex;gap:2px;opacity:0;transition:opacity .12s}
tr:hover .row-actions{opacity:1}
.checkbox{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.grid-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 12px 14px;text-align:center;cursor:pointer;transition:all .15s;position:relative;box-shadow:var(--shadow)}
.grid-item:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.grid-item.selected{border-color:var(--accent);background:var(--accent-soft)}
.grid-item .ficon{width:52px;height:52px;margin:0 auto 10px;border-radius:13px}
.grid-item .ficon svg{width:26px;height:26px}
.grid-item .nm{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid-item .sz{font-size:11px;color:var(--faint);margin-top:3px}
.grid-item .gcheck{position:absolute;top:8px;left:8px;opacity:0}
.grid-item:hover .gcheck,.grid-item.selected .gcheck{opacity:1}
.empty{padding:70px 20px;text-align:center;color:var(--faint)}
.empty svg{width:52px;height:52px;margin-bottom:14px;opacity:.5}
.empty p{font-size:13.5px}

/* ---------- dropzone ---------- */
.drop-hint{position:fixed;inset:0;background:color-mix(in srgb,var(--accent) 10%,transparent);border:3px dashed var(--accent);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:0}
.drop-hint div{background:var(--surface);padding:20px 36px;border-radius:14px;font-size:16px;font-weight:600;color:var(--accent);box-shadow:var(--shadow-lg)}

/* ---------- upload panel ---------- */
/* 原生 file input 不能用 display:none 隐藏——iOS Safari 对 display:none 的 input
   调用 .click() 可能不弹出选择器。改为保留渲染树但视觉隐藏（1px、透明、不拦截指针）。 */
.native-file{position:fixed;left:-1px;bottom:-1px;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.up-panel{position:fixed;right:22px;bottom:22px;width:340px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:150;overflow:hidden}
.up-head{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px}
.up-head .spacer{flex:1}
.up-head .btn-icon{width:32px;height:32px;flex:none}
.up-list{max-height:260px;overflow-y:auto}
.up-list::-webkit-scrollbar{width:8px}
.up-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 38%,var(--border2));border-radius:4px}
.up-list::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.up-item{padding:9px 16px;border-bottom:1px solid var(--border)}
.up-item:last-child{border-bottom:none}
.up-item .t{display:flex;font-size:12.5px;gap:8px;align-items:center}
.up-item .t .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-item .t .st{color:var(--faint);font-size:11.5px;flex:none}
.up-item .t .st.ok{color:var(--ok)}
.up-item .t .st.err{color:var(--danger)}
.up-item .t .st.conv{color:var(--accent)}
.up-retry{flex:none;width:28px;height:28px;padding:0;color:var(--danger)}
.up-retry svg{width:14px;height:14px}
.up-bar{height:4px;background:var(--surface2);border-radius:2px;margin-top:6px;overflow:hidden}
.up-bar i{display:block;height:100%;background:var(--grad);transition:width .2s;border-radius:2px}
.up-bar.conv i{width:38%!important;transition:none;animation:upConv 1.1s ease-in-out infinite}
@keyframes upConv{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.up-ver{margin-left:8px;font-size:10.5px;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.up-err{margin-top:5px;font-size:11px;line-height:1.45;color:var(--danger);word-break:break-word}

/* ---------- modal ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(10,14,25,.45);backdrop-filter:blur(3px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);width:440px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;animation:popIn .18s cubic-bezier(.2,.9,.3,1.2)}
.modal.wide{width:680px}
.modal-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);font-weight:600;font-size:15px}
.modal-head .spacer{flex:1}
.modal-body{padding:20px;overflow-y:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* ---------- theme picker ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.theme-card{position:relative;border:1.5px solid var(--border2);border-radius:12px;padding:12px;cursor:pointer;transition:all .15s;background:var(--surface)}
.theme-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.theme-card.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.theme-swatch{height:62px;border-radius:9px;margin-bottom:10px;padding:8px;border:1px solid var(--border);overflow:hidden}
.theme-swatch-card{height:100%;border-radius:6px;padding:8px;box-shadow:0 1px 4px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:5px}
.theme-swatch-bar{height:9px;width:62%;border-radius:4px}
.theme-swatch-line{height:5px;border-radius:3px}
.theme-name{font-weight:600;font-size:13.5px}
.theme-desc{font-size:11.5px;color:var(--muted);margin-top:2px}
.theme-check{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.theme-check svg{width:12px;height:12px}
.auth-theme{position:absolute;top:18px;right:18px;z-index:2}
@media (max-width:560px){.theme-grid{grid-template-columns:1fr}}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:500}
.field .hint{font-size:11.5px;color:var(--faint);margin-top:5px}
@keyframes fadeIn{from{opacity:0}}
@keyframes upSheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(8px)}}

/* ---------- preview ---------- */
.preview-body{padding:0;display:flex;align-items:center;justify-content:center;background:#0a0e16;min-height:300px;border-radius:0 0 16px 16px;overflow:hidden}
.preview-body img{max-width:100%;max-height:76vh;object-fit:contain}
.preview-body video{max-width:100%;max-height:76vh}
.preview-body audio{width:80%;margin:40px 0}
.preview-body iframe{width:100%;height:76vh;border:none;background:#fff}
.preview-body pre{width:100%;max-height:76vh;overflow:auto;padding:20px;color:#dfe7f5;font-size:12.5px;font-family:ui-monospace,Consolas,monospace;text-align:left;white-space:pre-wrap;word-break:break-all}

/* ---------- context menu ---------- */
.ctx-menu{position:fixed;z-index:400;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow-lg);padding:5px;min-width:170px;animation:popIn .12s}
.ctx-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--text)}
.ctx-item svg{width:15px;height:15px;color:var(--muted)}
.ctx-item:hover{background:var(--accent-soft);color:var(--accent)}
.ctx-item:hover svg{color:var(--accent)}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger svg{color:var(--danger)}
.ctx-item.danger:hover{background:var(--danger-soft)}
.ctx-sep{height:1px;background:var(--border);margin:4px 8px}

/* ---------- toast ---------- */
#toast-root{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 18px;font-size:13px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;animation:popIn .2s}
.toast.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok)}
.toast.err{border-color:color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger)}
.toast svg{width:15px;height:15px}

/* ---------- cards / admin ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:.85}
.stat-card .lb{font-size:12px;color:var(--muted);font-weight:500}
.stat-card .vl{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px;font-family:ui-monospace,Consolas,monospace}
.stat-card .un{font-size:12px;color:var(--faint);font-weight:400;margin-left:3px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px}
.panel-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600;font-size:14px}
.panel-head .spacer{flex:1}
.panel-body{padding:18px;overflow-x:auto;background:var(--surface);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 38%,var(--border2)) transparent}
.panel-body::-webkit-scrollbar{height:8px}
.panel-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 38%,var(--border2));border-radius:4px}
.panel-body::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.panel-body.flush{padding:0}
.panel-foot{padding:10px 16px;border-top:1px solid var(--border)}
.storage-grid{display:grid;grid-template-columns:340px 1fr;gap:16px;margin-bottom:16px}
@media(max-width:860px){.storage-grid{grid-template-columns:minmax(0,1fr)}}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{color:var(--text);flex:none}
.donut-legend{flex:1;min-width:150px}
.lg-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 0}
.lg-dot{width:10px;height:10px;border-radius:3px;flex:none}
.lg-name{width:52px;color:var(--muted)}
.lg-val{flex:1;text-align:right;font-weight:600}
.lg-cnt{width:52px;text-align:right;color:var(--faint);font-size:11.5px}
.usage-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.usage-row:last-child{margin-bottom:0}
.usage-name{width:110px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.usage-bar{flex:1;height:8px;border-radius:5px;background:var(--surface2);overflow:hidden}
.usage-bar i{display:block;height:100%;background:var(--grad);border-radius:5px}
.usage-bar.mini{height:5px;margin-top:5px;max-width:170px}
.usage-val{width:160px;text-align:right;font-size:12px;color:var(--muted);flex:none}
.log-pager{display:flex;align-items:center;gap:8px;width:100%}
.log-pager .spacer{flex:1}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto}
.tab{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .13s;white-space:nowrap;flex:none}
.tab svg{width:14px;height:14px;flex:none}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tabs{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 42%,var(--border2)) transparent}
.tabs::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 42%,var(--border2));border-radius:3px}
.tabs::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.err{background:var(--danger-soft);color:var(--danger)}
.badge.info{background:var(--accent-soft);color:var(--accent)}
.badge.mute{background:var(--surface2);color:var(--muted)}
.switch{display:inline-block;position:relative;width:34px;height:22px;flex:none;cursor:pointer;vertical-align:middle}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch i{position:absolute;inset:0;background:color-mix(in srgb,var(--muted) 26%,var(--border2));border-radius:99px;transition:background .2s,box-shadow .2s;box-shadow:inset 0 1px 2px rgba(0,0,0,.14),inset 0 0 0 1px color-mix(in srgb,var(--text) 7%,transparent)}
.switch i::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s cubic-bezier(.4,0,.2,1),transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.32),0 0 0 .5px rgba(0,0,0,.05)}
.switch:hover i{background:color-mix(in srgb,var(--muted) 38%,var(--border2))}
.switch input:checked+i{background:var(--accent);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.switch input:checked+i::after{left:15px}
.switch:hover input:checked+i{background:color-mix(in srgb,var(--accent) 86%,#fff)}
.switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.switch:active i::after{transform:scaleX(1.15)}
.form-row{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.form-row > label{width:110px;flex:none;font-size:13px;color:var(--muted);font-weight:500}
.form-row .inp{flex:1}
table.plain{width:100%;border-collapse:collapse}
table.plain th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);text-align:left;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface2);font-weight:600}
table.plain td{padding:10px 16px;border-bottom:1px solid var(--border);font-size:13px}
table.plain tr:last-child td{border-bottom:none}
table.plain tbody tr:hover{background:var(--surface2)}
.table-scroll{overflow-x:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 38%,var(--border2)) transparent}
.table-scroll::-webkit-scrollbar{height:8px}
.table-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 38%,var(--border2));border-radius:4px}
.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ---------- 对象存储 / OSS ---------- */
.hint{font-size:12px;color:var(--muted);line-height:1.5}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* 默认存储选择 */
.oss-opts{display:flex;flex-wrap:wrap;gap:12px}
.oss-opt{flex:1 1 220px;min-width:200px;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);cursor:pointer;transition:border .15s,box-shadow .15s,transform .15s;position:relative}
.oss-opt:hover{border-color:var(--border2);transform:translateY(-1px)}
.oss-opt.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.oss-opt-ic{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.oss-opt.on .oss-opt-ic{background:var(--grad);border-color:transparent;color:#fff}
.oss-opt-tx{min-width:0;flex:1}
.oss-opt-nm{font-weight:600;font-size:13.5px}
.oss-opt-sub{font-size:11.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oss-opt-check{flex:none;color:var(--accent);display:flex}

/* 后端卡片 */
.oss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.oss-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:16px;position:relative;overflow:hidden;transition:border .15s,box-shadow .15s}
.oss-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:0;transition:opacity .2s}
.oss-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.oss-card.active{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.oss-card.active::before{opacity:.9}
.oss-card-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.oss-card-hd{min-width:0;flex:1}
.oss-name{font-weight:600;font-size:14px;display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.oss-sub{font-size:11.5px;color:var(--faint);margin-top:2px}
.oss-prov-logo{width:42px;height:42px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em;box-shadow:0 3px 10px -3px rgba(0,0,0,.4)}
.oss-prov-logo.sm{width:38px;height:38px;font-size:12px;border-radius:10px}
.oss-kv{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:4px 0}
.oss-kv>span{width:64px;flex:none;color:var(--faint)}
.oss-kv>b{font-weight:500;color:var(--text);min-width:0}
.oss-status{display:flex;align-items:center;gap:7px;font-size:12px;margin:12px 0;padding:8px 11px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);min-height:34px}
.oss-status span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oss-status svg{flex:none}
.oss-status.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 32%,transparent);color:var(--ok)}
.oss-status.err{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 32%,transparent);color:var(--danger)}
.oss-status.err span{white-space:normal;word-break:break-word}
.oss-status.busy{color:var(--accent)}
.oss-status.busy svg,.oss-test-result.busy svg{animation:ossSpin 1s linear infinite}
@keyframes ossSpin{to{transform:rotate(360deg)}}
.oss-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.oss-actions .spacer{flex:1}
.oss-actions .btn{display:inline-flex;align-items:center;gap:5px}

/* 厂商预设 */
.oss-prov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:12px}
.oss-prov{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);cursor:pointer;transition:border .15s,transform .15s,box-shadow .15s}
.oss-prov:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.oss-prov .oss-prov-logo{width:46px;height:46px;font-size:13px}
.oss-prov-nm{font-size:12px;font-weight:500;color:var(--text);text-align:center;line-height:1.3}

/* 添加/编辑表单 */
.oss-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.oss-note{display:flex;gap:9px;align-items:flex-start;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:9px;padding:10px 13px;font-size:12px;color:var(--text);margin-bottom:16px;line-height:1.55}
.oss-note svg{flex:none;margin-top:2px;color:var(--accent)}
.oss-test-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:16px;margin-top:4px}
.oss-test-bar .btn{display:inline-flex;align-items:center;gap:6px;flex:none}
.oss-test-result{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0;flex:1;color:var(--muted)}
.oss-test-result span{min-width:0;word-break:break-word}
.oss-test-result svg{flex:none}
.oss-test-result.ok{color:var(--ok)}
.oss-test-result.err{color:var(--danger)}
.oss-test-result.busy{color:var(--accent)}

/* 迁移进度 */
.oss-migrate-progress{margin:6px 0 14px}
.oss-migrate-bar{height:9px;border-radius:5px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}
.oss-migrate-bar i{display:block;height:100%;background:var(--grad);border-radius:5px;transition:width .4s;position:relative;overflow:hidden}
.oss-migrate-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:ossShimmer 1.4s linear infinite}
@keyframes ossShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.oss-migrate-line{margin-top:9px;font-variant-numeric:tabular-nums;word-break:break-word}

/* 滚动条沿用主题 */
.oss-form-grid,.oss-prov-grid,.oss-opts{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}

@media (max-width:720px){
  .oss-form-grid{grid-template-columns:1fr}
  .oss-grid{grid-template-columns:1fr}
  .oss-opt{flex:1 1 100%}
  .oss-prov-grid{grid-template-columns:repeat(3,1fr)}
  .oss-test-bar{align-items:flex-start;flex-direction:column}
  .oss-kv>span{width:56px}
}

/* ---------- share page ---------- */
.share-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;color:var(--text);background:radial-gradient(900px 500px at 15% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),radial-gradient(800px 500px at 110% 110%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 60%),var(--bg)}
.share-card{width:520px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.share-head{padding:26px 28px 18px;border-bottom:1px solid var(--border)}
.share-file{display:flex;align-items:center;gap:14px}
.share-file .ficon{width:48px;height:48px;border-radius:12px}
.share-file .ficon svg{width:24px;height:24px}
.share-file .nm{font-size:16px;font-weight:600;word-break:break-all}
.share-file .mt{font-size:12.5px;color:var(--muted);margin-top:2px}
.share-body{padding:22px 28px 26px}
.share-list{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:14px}
.share-list .si{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:13px}
.share-list .si:last-child{border-bottom:none}
.share-list .si .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-list .si.dir{cursor:pointer;transition:background .1s}
.share-list .si.dir:hover{background:var(--surface2)}
.share-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;font-size:13px;margin-bottom:12px;color:var(--muted)}
.share-crumbs a{cursor:pointer;color:var(--accent)}
.share-crumbs a:hover{text-decoration:underline}
.share-crumbs .sep{margin:0 4px;color:var(--faint)}

/* ---------- share style picker ---------- */
.sstyle-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sstyle{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px;border:1.5px solid var(--border2);border-radius:10px;cursor:pointer;font-size:11.5px;color:var(--muted);transition:all .15s;text-align:center}
.sstyle:hover{border-color:var(--accent);color:var(--text)}
.sstyle.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.sstyle-dot{width:100%;height:26px;border-radius:6px}
@media (max-width:560px){.sstyle-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- share page styles ---------- */
.share-wrap.st-tech{--bg:#05070d;--surface:#0b0f1a;--surface2:#111726;--border:#1a2233;--border2:#243049;--text:#e6f0ff;--muted:#8593b0;--faint:#566180;--accent:#22d3ee;--accent2:#f472b6;--accent-soft:#0a2230;--danger:#ff6b6b;--danger-soft:rgba(255,107,107,.15);--grad:linear-gradient(135deg,#0891b2,#7c3aed,#db2777);--shadow-lg:0 24px 64px -24px rgba(0,0,0,.8);
  background:radial-gradient(900px 500px at 15% -10%,rgba(34,211,238,.14),transparent 60%),radial-gradient(800px 500px at 110% 110%,rgba(244,114,182,.12),transparent 60%),#05070d}
.share-wrap.st-tech::before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(34,211,238,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.07) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;mask-image:radial-gradient(700px 500px at 50% 40%,#000,transparent)}
.share-wrap.st-tech .share-card{position:relative;z-index:1;box-shadow:0 0 0 1px rgba(34,211,238,.18),0 24px 64px -24px rgba(0,0,0,.8)}
.share-wrap.st-tech .share-file .ficon{background:var(--accent-soft);color:var(--accent)}

.share-wrap.st-poster{--surface:rgba(255,255,255,.1);--surface2:rgba(255,255,255,.14);--border:rgba(255,255,255,.22);--border2:rgba(255,255,255,.3);--text:#fff;--muted:rgba(255,255,255,.78);--faint:rgba(255,255,255,.55);--accent:#fff;--accent2:#fff;--accent-soft:rgba(255,255,255,.16);--danger:#ffd7d7;--danger-soft:rgba(255,255,255,.16);--shadow-lg:0 24px 64px -24px rgba(0,0,0,.45);
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 45%,#db2777 100%)}
.share-wrap.st-poster .share-card{width:560px;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.25)}
.share-wrap.st-poster .share-head{border-bottom:1px solid rgba(255,255,255,.2);text-align:center;padding:34px 28px 22px}
.share-wrap.st-poster .share-file{flex-direction:column;gap:14px}
.share-wrap.st-poster .share-file .ficon{width:76px;height:76px;border-radius:20px;background:rgba(255,255,255,.18);color:#fff}
.share-wrap.st-poster .share-file .ficon svg{width:38px;height:38px}
.share-wrap.st-poster .share-file .nm{font-size:19px}
.share-wrap.st-poster .btn-primary{background:#fff;color:#5b21b6;box-shadow:0 8px 24px -8px rgba(0,0,0,.4)}
.share-wrap.st-poster .share-list{border-color:rgba(255,255,255,.25)}
.share-wrap.st-poster .share-list .si{border-color:rgba(255,255,255,.18)}
.share-wrap.st-poster .btn-icon{color:rgba(255,255,255,.8)}

.share-wrap.st-minimal{--bg:#fff;--surface:#fff;--surface2:#fafaf9;--border:#e7e5e4;--border2:#d6d3d1;--text:#1c1917;--muted:#78716c;--faint:#a8a29e;--accent:#1c1917;--accent2:#57534e;--accent-soft:#f5f5f4;--grad:linear-gradient(135deg,#1c1917,#44403c);--shadow-lg:0 1px 2px rgba(0,0,0,.05);
  background:#fff}
.share-wrap.st-minimal .share-card{border:1px solid #1c1917;border-radius:0;box-shadow:none;width:560px}
.share-wrap.st-minimal .share-head{border-bottom:1px solid #1c1917}
.share-wrap.st-minimal .share-file .ficon{background:#f5f5f4;color:#1c1917;border-radius:0}
.share-wrap.st-minimal .btn-primary{background:#1c1917;color:#fff;border-radius:0;box-shadow:none}
.share-wrap.st-minimal .share-list{border-radius:0;border-color:#1c1917}
.share-wrap.st-minimal .share-list .si{border-color:#e7e5e4}
.share-wrap.st-minimal input{border-radius:0}

.share-wrap.st-glass{--surface:rgba(255,255,255,.08);--surface2:rgba(255,255,255,.12);--border:rgba(255,255,255,.18);--border2:rgba(255,255,255,.26);--text:#f1f5f9;--muted:#cbd5e1;--faint:#94a3b8;--accent:#22d3ee;--accent2:#f472b6;--accent-soft:rgba(34,211,238,.15);--danger:#ff8080;--danger-soft:rgba(255,128,128,.15);--grad:linear-gradient(135deg,#22d3ee,#818cf8,#f472b6);--shadow-lg:0 24px 64px -24px rgba(0,0,0,.5);
  background:#0f172a}
.share-wrap.st-glass::before,.share-wrap.st-glass::after{content:"";position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none}
.share-wrap.st-glass::before{width:420px;height:420px;left:-80px;top:-80px;background:rgba(34,211,238,.35)}
.share-wrap.st-glass::after{width:460px;height:460px;right:-100px;bottom:-100px;background:rgba(244,114,182,.3)}
.share-wrap.st-glass .share-card{position:relative;z-index:1;background:rgba(255,255,255,.08);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.18)}
.share-wrap.st-glass .share-file .ficon{background:rgba(255,255,255,.12);color:var(--accent)}

/* ---------- activation ---------- */
.act-steps{display:flex;gap:8px;margin:18px 0;font-size:12px;color:var(--muted)}
.act-steps span{background:var(--surface2);border:1px solid var(--border);padding:4px 10px;border-radius:99px}
.lic-info{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lic-info .it{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.lic-info .it .k{font-size:11.5px;color:var(--faint);margin-bottom:3px}
.lic-info .it .v{font-size:13.5px;font-weight:600;word-break:break-all}

/* ---------- 账号安全 ---------- */
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.sec-hero{display:flex;gap:26px;align-items:center;padding:22px 24px;flex-wrap:wrap;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface) 55%,color-mix(in srgb,var(--accent2) 6%,var(--surface)))}
.sec-hero-score{display:flex;align-items:center;gap:16px;flex:none}
.sec-ring{display:flex;filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--accent) 22%,transparent))}
.sec-hero-title{font-size:15px;font-weight:650;letter-spacing:-.01em}
.sec-hero-sub{margin:5px 0 4px}
.sec-hero-user{font-size:12px;color:var(--faint)}
.sec-hero-rows{flex:1;min-width:260px;display:flex;flex-direction:column;gap:2px}
.sec-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border)}
.sec-row:last-child{border-bottom:none}
.sec-row-lb{font-size:12.5px;color:var(--muted);width:76px;flex:none;font-weight:500}
.sec-row-vl{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-tips{display:flex;flex-direction:column;gap:9px}
.sec-tip{display:flex;gap:9px;align-items:flex-start;font-size:12.8px;color:var(--muted);line-height:1.6}
.sec-tip svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--ok)}
.sec-desc{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:16px}
.sec-off,.sec-on{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;margin-bottom:16px;font-size:13px;color:var(--text)}
.sec-off{background:var(--danger-soft);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)}
.sec-on{background:var(--ok-soft);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent)}
.sec-off svg{color:var(--danger)}
.sec-on svg{color:var(--ok)}
.sec-off svg,.sec-on svg{width:22px;height:22px;flex:none}
.sec-on b{display:block;font-size:13.5px}
.sec-on .hint{color:var(--muted);margin-top:2px}
.sec-kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:13px;border-bottom:1px dashed var(--border)}
.sec-kv span:first-child{color:var(--muted)}
.sec-warn{display:flex;gap:9px;align-items:flex-start;background:var(--warn-soft);color:var(--text);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
  border-radius:9px;padding:11px 13px;font-size:12.5px;line-height:1.6;margin:14px 0}
.sec-warn svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--warn)}
.sec-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sec-ack{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.sec-ack input{width:auto;flex:none;accent-color:var(--accent);cursor:pointer}
.pw-meter-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.pw-meter{display:flex;gap:4px;flex:1}
.pw-meter i{height:4px;flex:1;border-radius:99px;background:var(--border);transition:background .2s}
.pw-meter i.on.err{background:var(--danger)}
.pw-meter i.on.warn{background:var(--warn)}
.pw-meter i.on.ok{background:var(--ok)}
.code-input{text-align:center;font-size:24px;letter-spacing:.42em;padding:12px 8px 12px 20px;font-weight:600}
.wiz-steps{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.wiz-step{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--faint);padding:6px 12px;border-radius:99px;background:var(--surface2);border:1px solid var(--border)}
.wiz-step.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:var(--accent-soft);font-weight:600}
.wiz-step.done{color:var(--ok)}
.wiz-num{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:99px;background:var(--border2);color:var(--surface);font-size:11px;font-weight:700;flex:none}
.wiz-step.active .wiz-num{background:var(--accent);color:#fff}
.wiz-step.done .wiz-num{background:var(--ok);color:#fff}
.wiz-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.qr-wrap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.qr-box{flex:none;padding:12px;background:#fff;border-radius:12px;border:1px solid var(--border2);box-shadow:var(--shadow);line-height:0}
.qr-box img{display:block;border-radius:4px}
.qr-side{flex:1;min-width:230px}
.secret-box{background:var(--surface2);border:1px dashed var(--border2);border-radius:8px;padding:10px 12px;font-size:13px;
  letter-spacing:.09em;word-break:break-all;line-height:1.7;user-select:all}
.backup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}
.backup-code{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;text-align:center;
  font-size:14px;letter-spacing:.1em;font-weight:600;user-select:all;transition:border .15s,background .15s}
.backup-code:hover{border-color:var(--accent);background:var(--accent-soft)}
@media(max-width:900px){.sec-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .sec-hero{gap:16px;padding:18px}
  .sec-hero-rows{min-width:100%}
  .backup-grid{grid-template-columns:1fr}
  .qr-wrap{gap:16px}
  .qr-box{margin:0 auto}
  .code-input{font-size:20px;letter-spacing:.3em}
}

@media (max-width:900px){
  .topbar .btn span{display:none}
  .topbar .btn{padding:8px 10px}
  .search-box{flex-basis:240px}
}

@media (max-width:820px){
  .sidebar{width:64px;padding:14px 8px}
  .side-logo b,.nav-item span,.nav-label,.side-quota{display:none}
  .nav-item{justify-content:center;padding:10px}
  .content{padding:14px}
  .user-chip span{display:none}
}

@media (max-width:560px){
  .topbar{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .topbar .btn{min-height:40px}
  .search-box{flex:1 1 100%;min-width:0;max-width:none}
  .up-panel{left:0;right:0;bottom:0;width:auto;border-radius:18px 18px 0 0;border-left:none;border-right:none;border-bottom:none;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -12px 40px rgba(8,10,20,.28);animation:upSheet .26s cubic-bezier(.2,.7,.3,1)}
  .up-panel::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:var(--border2);margin:8px auto 0}
  .up-head{padding:10px 16px 12px;font-size:14px}
  .up-head .btn-icon{width:40px;height:40px}
  .up-head .btn-sm{min-height:36px}
  .up-list{max-height:min(46vh,360px)}
  .up-item{padding:12px 16px}
  .up-item .t{font-size:13.5px}
  .up-retry{width:36px;height:36px}
  .up-bar{height:5px}
  .up-err{font-size:12px}
  .page-head{gap:8px}
  .crumbs{font-size:13px;gap:3px}
  .crumbs .crumb-mid,.crumbs .sep-mid{display:none}
  .crumbs .crumb-more{display:inline}
  .crumbs .crumb-root span{display:none}
  .crumbs .crumb-root svg{display:block}
  .sort-select{font-size:11.5px;padding:0 24px 0 8px;max-width:106px}
  .sort-wrap .chev{right:9px}
  .view-toggle button{padding:0 7px}
}

/* ---------- 窄屏:数据表 → 堆叠卡片 (v1.12.1) ----------
   后台用户/文件/日志与前台文件/回收站/分享等宽表在手机上会横向溢出,
   导致整块内容被拖动、标签页与下拉框被裁切。此处把每一行渲染成卡片,
   用 data-label(由 ui.js autoCardLabels 从表头注入)逐列展示,完整保留
   所有字段与操作,且不再产生横向溢出。*/
@media (max-width:820px){
  .panel-head{flex-wrap:wrap;gap:8px}
  .panel-head select{max-width:100%}
  .form-row{flex-wrap:wrap;gap:8px}
  .form-row > label{width:100%}
  .form-row .inp{flex:1 1 100%}
  .table-scroll{overflow-x:visible}
  .usage-row{flex-wrap:wrap;gap:6px}
  .usage-name{width:auto;flex:1;min-width:0}
  .usage-val{width:auto;flex:none;font-size:11.5px}
  .usage-bar{flex:1 1 100%;order:3}

  table.plain,.file-table{display:block;width:100%;border:none;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
  table.plain thead,.file-table thead{display:none}
  table.plain tbody,.file-table tbody{display:block}
  table.plain tbody tr,.file-table tbody tr{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:4px 14px;margin-bottom:12px}
  table.plain tbody tr.selected,.file-table tbody tr.selected{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
  table.plain tbody tr:hover,.file-table tbody tr:hover{background:var(--surface)}
  table.plain td,.file-table td{display:block;width:100%;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;text-align:left}
  table.plain tr:last-child td,.file-table tr:last-child td{border-bottom:1px solid var(--border)}
  table.plain tr td:last-child,.file-table tr td:last-child{border-bottom:none}
  table.plain td::before,.file-table td::before{content:attr(data-label);display:inline-block;min-width:80px;margin-right:12px;font-size:11.5px;font-weight:600;color:var(--muted);vertical-align:middle}
  table.plain td[data-label=""]::before,.file-table td[data-label=""]::before{display:none}
  table.plain td[data-label=""],.file-table td[data-label=""]{text-align:right;padding-top:10px}
  table.plain td[data-label=""]>div,.file-table td[data-label=""]>div{justify-content:flex-end}
  table.plain td[data-label="名称"],.file-table td[data-label="名称"],table.plain td[data-label="文件"],.file-table td[data-label="文件"]{font-size:14px;font-weight:600;padding-top:10px}
  table.plain td[data-label="名称"]::before,.file-table td[data-label="名称"]::before,table.plain td[data-label="文件"]::before,.file-table td[data-label="文件"]::before{display:none}
  table.plain td[data-label="详情"]::before,table.plain td[data-label="链接"]::before{display:block;min-width:0;margin:0 0 4px}
  table.plain td[data-label="详情"],table.plain td[data-label="链接"] a{overflow-wrap:anywhere;white-space:normal}
  .fname{width:100%}
  .fname .nm{flex:1;min-width:0}
  .row-actions{opacity:1}
}
/* 触屏无 hover:行内操作与网格复选框常驻可见 */
@media (hover:none){
  .row-actions{opacity:1}
  .grid-item .gcheck{opacity:1}
}

/* ================= 头像 / VIP / 用户中心 (v1.7.0) ================= */
.avatar-img{object-fit:cover;background:var(--surface2);display:block}
.avatar-wrap{position:relative;flex:none;width:28px;height:28px}
.avatar-wrap .avatar-img{width:100%;height:100%;border-radius:50%}
.avatar-wrap.vip::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,#f5b942,#ff8a5c,#f5b942)}
.avatar-wrap.vip.lv1::before{background:linear-gradient(135deg,#7dd3fc,#a78bfa,#7dd3fc)}
.avatar-wrap.vip .avatar-img{position:relative;box-shadow:0 0 0 2px var(--surface)}
.avatar-wrap.xl{width:84px;height:84px}
.avatar-wrap.xl.vip::before{inset:-4px}
.avatar-wrap.xl.vip .avatar-img{box-shadow:0 0 0 3px var(--surface)}
.vip-dot{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#f5b942,#ff8a5c);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface);z-index:1}
.avatar-wrap.xl .vip-dot{width:24px;height:24px;right:-2px;bottom:-2px}
.vip-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5);letter-spacing:.02em;flex:none}
.vip-badge.lv2{background:linear-gradient(135deg,#c9972f,#e6b451);color:#3a2a05}
.vip-badge.sm{padding:1px 7px;font-size:10px;gap:3px}
.vip-badge svg{flex:none}
.theme-vip{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.theme-vip.lv2{background:linear-gradient(135deg,#c9972f,#e6b451);color:#3a2a05}
.theme-card.locked .theme-swatch{opacity:.55}
.theme-card.locked .theme-name,.theme-card.locked .theme-desc{opacity:.65}
.theme-lock{position:absolute;inset:0;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface) 42%,transparent);z-index:2;color:var(--muted)}
.theme-lock svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.uc-hero{display:flex;align-items:center;gap:20px;padding:22px 24px;margin-bottom:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface) 60%);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
.uc-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.uc-id{min-width:0}
.uc-name{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;flex-wrap:wrap}
.uc-sub{font-size:12px;color:var(--muted);margin-top:5px}
.uc-hero .spacer{flex:1}
.uc-quota{width:200px;flex:none}
.uc-quota .q-lb{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.uc-quota .q-vl{font-size:11.5px;color:var(--muted);margin-top:6px}
.uc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
.uc-storage{display:flex;align-items:baseline;gap:6px;margin-bottom:12px}
.uc-storage .big{font-size:26px;font-weight:700}
.uc-storage .of{color:var(--muted);font-size:13px}
.quota-bar.lg{height:10px}
.uc-vip-line{display:flex;align-items:center;gap:9px}
.uc-vip-name{font-weight:600;font-size:14px}
.uc-cur{display:flex;align-items:center;gap:18px}
.uc-cur-tx{min-width:0}
.uc-cur-tx .nm{font-weight:600;font-size:14.5px}
.uc-cur-tx .ds{font-size:12px;color:var(--muted);margin-top:3px}
.uc-cur .spacer{flex:1}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px}
.avatar-pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 6px 11px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--surface);transition:all .13s}
.avatar-pick:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.avatar-pick img{width:54px;height:54px;border-radius:50%;display:block}
.avatar-pick .nm{font-size:11.5px;color:var(--muted)}
.avatar-pick.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.avatar-pick.active .nm{color:var(--accent);font-weight:600}
.pick-check{position:absolute;top:7px;right:7px;width:17px;height:17px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
.upload-zone{display:flex;flex-direction:column;align-items:center;gap:7px;border:1.5px dashed var(--border2);border-radius:var(--radius);padding:28px 18px;text-align:center;color:var(--muted);cursor:pointer;transition:all .15s;background:var(--surface2)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.upload-zone.busy{opacity:.6;pointer-events:none}
.uz-tx{font-size:13.5px;font-weight:600}
.uz-hint{font-size:11.5px;color:var(--faint)}
.vip-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.vip-tier{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:18px;box-shadow:var(--shadow);overflow:hidden}
.vip-tier::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--border2)}
.vip-tier.t1::before{background:linear-gradient(90deg,#7c3aed,#6366f1)}
.vip-tier.t2::before{background:linear-gradient(90deg,#b8860b,#e6b451,#f6e27a)}
.vip-tier.current{border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}
.vip-tier .t-name{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700}
.vip-tier.t1 .t-name svg{color:#8b5cf6}
.vip-tier.t2 .t-name svg{color:#d9a63f}
.vip-tier .t-desc{font-size:12px;color:var(--muted);margin-top:5px}
.vip-tier .t-cur{margin-top:12px}
.perk-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--border)}
.perk-row:last-child{border-bottom:none}
.perk-ic{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.perk-row.locked .perk-ic{background:var(--surface2);color:var(--faint)}
.perk-tx{flex:1;min-width:0}
.perk-tx .nm{font-size:13.5px;font-weight:600}
.perk-tx .ds{font-size:12px;color:var(--muted)}
@media (max-width:900px){
  .uc-grid{grid-template-columns:1fr}
  .vip-tiers{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .uc-quota{display:none}
}
@media (max-width:560px){
  .uc-hero{padding:18px 16px;gap:14px}
  .avatar-wrap.xl{width:64px;height:64px}
  .uc-name{font-size:16px}
  .vip-tiers{grid-template-columns:1fr}
  .uc-cur{flex-wrap:wrap}
  .uc-cur .spacer{display:none}
}

/* ================= 头像在线裁剪 (v1.8.0) ================= */
.crop-wrap{display:flex;gap:18px;align-items:flex-start}
.crop-stage{position:relative;flex:1;min-width:0;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface2);border:1px solid var(--border2);cursor:grab;touch-action:none;outline:none}
.crop-stage.grabbing{cursor:grabbing}
.crop-stage:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.crop-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.crop-stage::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 33.4% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 66.7% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 0 33.4%/100% 1px no-repeat,linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 0 66.7%/100% 1px no-repeat}
.crop-stage::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);box-shadow:0 0 0 999px rgba(6,9,18,.38)}
.crop-side{width:112px;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.crop-lb{font-size:11.5px;color:var(--muted);font-weight:600}
.crop-preview{width:84px;height:84px;border-radius:50%;border:1px solid var(--border2);box-shadow:var(--shadow);background:var(--surface2)}
.crop-meta{font-size:11px;color:var(--faint);text-align:center}
.crop-tip{font-size:11px;text-align:center}
.crop-tools{display:flex;align-items:center;gap:6px;margin-top:16px}
.crop-tools input[type=range]{-webkit-appearance:none;appearance:none;flex:1;width:auto;min-width:40px;height:4px;padding:0;border:none;border-radius:99px;background:var(--border2);box-shadow:none;cursor:pointer}
.crop-tools input[type=range]:focus{box-shadow:none}
.crop-tools input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2.5px solid var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.35);cursor:grab}
.crop-tools input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--accent);border:2.5px solid var(--surface);box-shadow:0 1px 5px rgba(0,0,0,.35);cursor:grab}
.crop-zoom{font-size:11.5px;color:var(--muted);width:42px;text-align:right;flex:none}
.crop-sep{width:1px;height:18px;background:var(--border2);margin:0 4px;flex:none}
.crop-foot-hint{margin-right:auto;font-size:11.5px;color:var(--faint);align-self:center}
@media (max-width:560px){
  .crop-wrap{flex-direction:column;align-items:stretch}
  .crop-stage{flex:none;width:100%}
  .crop-side{width:100%;flex-direction:row;justify-content:flex-start;gap:12px}
  .crop-preview{width:64px;height:64px}
  .crop-tip,.crop-foot-hint{display:none}
  .crop-tools{gap:4px}
  .crop-tools .btn-icon{padding:6px}
  .crop-zoom{width:36px}
}

/* ================= 时光相册 (v1.9.0) ================= */
.ph-hero{position:relative;display:flex;align-items:center;gap:26px;padding:26px 28px;margin-bottom:16px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),color-mix(in srgb,var(--accent2) 7%,var(--surface)) 55%,var(--surface));box-shadow:var(--shadow);overflow:hidden}
.ph-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(430px 210px at 88% -50%,color-mix(in srgb,var(--accent2) 26%,transparent),transparent 70%),radial-gradient(380px 230px at 4% 140%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 72%)}
.ph-hero::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.ph-hero-tx{position:relative;z-index:1;flex:1;min-width:0}
.ph-title{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;letter-spacing:.01em}
.ph-title svg{color:var(--accent);flex:none}
.ph-sub{margin-top:7px;font-size:13px;color:var(--muted)}
.ph-hero-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.ph-collage{position:relative;flex:none;width:252px;height:152px;z-index:1}
.ph-frame{position:absolute;width:112px;height:134px;padding:6px 6px 22px;background:#fdfdfb;border-radius:4px;box-shadow:0 12px 28px -12px rgba(8,12,30,.5);transition:transform .3s cubic-bezier(.2,.7,.3,1.2)}
.ph-frame img{width:100%;height:100%;object-fit:cover;border-radius:2px;background:#e8ecf4;display:block}
.ph-frame.f0{left:0;top:12px;transform:rotate(-7deg)}
.ph-frame.f1{left:68px;top:0;transform:rotate(2deg);z-index:2}
.ph-frame.f2{left:136px;top:16px;transform:rotate(8deg)}
.ph-hero:hover .ph-frame.f0{transform:rotate(-10deg) translate(-4px,-5px)}
.ph-hero:hover .ph-frame.f1{transform:rotate(0deg) translateY(-7px)}
.ph-hero:hover .ph-frame.f2{transform:rotate(11deg) translate(5px,-3px)}
.ph-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ph-bar label{font-size:12px;color:var(--muted);flex:none}
.ph-bar .spacer{flex:1}
.ph-count{font-size:12px;color:var(--faint)}
.ph-seg{display:inline-flex;border:1px solid var(--border2);border-radius:8px;overflow:hidden;background:var(--surface);flex:none}
.ph-seg button{border:none;background:none;padding:7px 13px;font-size:12.5px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.ph-seg button:hover{color:var(--text);background:var(--surface2)}
.ph-seg button.active{background:var(--accent-soft);color:color-mix(in srgb,var(--accent) 62%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.ph-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:18px;align-items:start}
.ph-rail{position:sticky;top:0;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 170px);overflow-y:auto;padding:2px}
.ph-month{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--border);border-radius:11px;background:var(--surface);cursor:pointer;text-align:left;transition:all .15s;flex:none}
.ph-month:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));transform:translateX(2px)}
.ph-month.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.ph-month img{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--surface2);flex:none;display:block}
.ph-month .lb{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-month.active .lb{color:var(--accent)}
.ph-month .ct{font-size:11px;color:var(--faint);background:var(--surface2);border:1px solid var(--border);padding:1px 7px;border-radius:99px;flex:none}
.ph-month.active .ct{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:var(--surface)}
.ph-main{min-width:0}
.ph-mhead{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:14px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.ph-mtitle{font-size:16px;font-weight:700}
.ph-mcount{font-size:12px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);padding:2px 9px;border-radius:99px}
.ph-mhead .spacer{flex:1}
.ph-grid{columns:4 210px;column-gap:14px}
.ph-grid.compact{columns:6 150px;column-gap:10px}
.ph-card{position:relative;break-inside:avoid;margin:0 0 14px;border-radius:12px;overflow:hidden;background:var(--surface2);border:1px solid var(--border);cursor:zoom-in;box-shadow:var(--shadow);animation:fadeIn .3s}
.ph-grid.compact .ph-card{margin-bottom:10px;border-radius:9px}
.ph-card img{width:100%;display:block;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.ph-card:hover img{transform:scale(1.045)}
.ph-noimg{display:flex;align-items:center;justify-content:center;height:130px;color:var(--faint)}
.ph-noimg.in-rail{width:40px;height:40px;border-radius:8px;background:var(--surface2);flex:none}
.ph-noimg.in-frame{height:100%;border-radius:2px;background:#e8ecf4}
.ph-ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;background:linear-gradient(180deg,rgba(8,11,22,.42),transparent 34%,transparent 52%,rgba(8,11,22,.78));opacity:0;transition:opacity .18s;color:#fff}
.ph-card:hover .ph-ov,.ph-card:focus-within .ph-ov{opacity:1}
.ph-qa{position:absolute;top:8px;right:8px;display:flex;gap:5px}
.qa-btn{width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(10,14,26,.55);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .13s}
.qa-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.ph-nm{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ph-dt{font-size:10.5px;opacity:.82;margin-top:2px}
.ph-sentinel{display:flex;align-items:center;justify-content:center;padding:18px;color:var(--faint)}
.ph-sentinel.busy::before{content:'';width:20px;height:20px;border-radius:50%;border:2.5px solid var(--border2);border-top-color:var(--accent);animation:spin .7s linear infinite}
.ph-end{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px;font-size:12px;color:var(--faint)}
.ph-end svg{color:var(--ok)}

/* ---------- 灯箱 ---------- */
.lb-mask{position:fixed;inset:0;z-index:250;background:radial-gradient(120% 120% at 50% 0%,rgba(13,18,34,.94),rgba(4,6,13,.985));backdrop-filter:blur(8px);display:flex;flex-direction:column;animation:fadeIn .16s;color:#e8edf7}
.lb-top{display:flex;align-items:center;gap:8px;padding:12px 16px;flex:none}
.lb-tt{min-width:0;flex:0 1 auto}
.lb-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.lb-meta{font-size:11.5px;color:#93a0ba;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.lb-top .spacer{flex:1}
.lb-counter{font-size:12px;color:#93a0ba;margin-right:6px;flex:none}
.lb-btn{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#dfe6f3;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .13s;flex:none;font-size:11.5px}
.lb-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.lb-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lb-btn:disabled{opacity:.32;pointer-events:none}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;cursor:grab}
.lb-stage.zoomed{cursor:move}
.lb-stage.dragging{cursor:grabbing}
.lb-img{max-width:calc(100% - 90px);max-height:calc(100% - 20px);object-fit:contain;border-radius:4px;box-shadow:0 24px 80px -20px rgba(0,0,0,.8);user-select:none;-webkit-user-drag:none;will-change:transform}
.lb-stage.loading .lb-img{opacity:0}
.lb-stage.loading::after{content:'';position:absolute;width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.16);border-top-color:var(--accent2);animation:spin .7s linear infinite}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:64px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(12,16,30,.5);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:all .15s;opacity:.75}
.lb-nav:hover{background:rgba(255,255,255,.16);opacity:1}
.lb-nav:disabled{opacity:.18;pointer-events:none}
.lb-nav.prev{left:14px}
.lb-nav.next{right:14px}
.lb-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px 16px;flex:none;flex-wrap:wrap}
.lb-zoom{font-size:12px;color:#93a0ba;width:48px;text-align:center;flex:none}
.lb-sep{width:1px;height:20px;background:rgba(255,255,255,.16);margin:0 4px;flex:none}
.lb-prog{width:110px;height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;flex:none}
.lb-prog-i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.lb-hint{font-size:11px;color:#6c7893;margin-left:8px}
.lb-info{position:absolute;top:0;right:0;bottom:0;width:290px;background:rgba(13,18,33,.92);backdrop-filter:blur(14px);border-left:1px solid rgba(255,255,255,.12);padding:20px 18px;transform:translateX(102%);transition:transform .24s cubic-bezier(.2,.7,.3,1);z-index:6;overflow-y:auto}
.lb-mask.info-open .lb-info{transform:translateX(0)}
.lb-info::-webkit-scrollbar{width:8px}
.lb-info::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:4px}
.lb-info::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34)}
.lb-info-t{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.lb-info-t::before{content:'';width:4px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.lb-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px}
.lb-row .k{color:#8b96ad;flex:none;width:62px}
.lb-row .v{min-width:0;word-break:break-all;color:#dfe6f3}
.lb-info .btn-ghost{border-color:rgba(255,255,255,.2);color:#dfe6f3;background:rgba(255,255,255,.05)}
.lb-info .btn-ghost:hover{background:rgba(255,255,255,.13)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes lbprog{from{width:0}to{width:100%}}
@media (max-width:900px){
  .ph-layout{grid-template-columns:1fr}
  .ph-rail{position:static;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
  .ph-month{flex:none}
  .ph-month .lb{max-width:110px}
  .ph-month:hover{transform:none}
  .ph-collage{width:212px;height:132px}
  .ph-frame{width:96px;height:116px}
  .ph-frame.f1{left:58px}
  .ph-frame.f2{left:116px}
}
@media (max-width:560px){
  .ph-hero{flex-direction:column;align-items:stretch;padding:20px 18px;gap:16px}
  .ph-title{font-size:20px}
  .ph-collage{width:100%;height:118px}
  .ph-frame{width:92px;height:112px}
  .ph-frame.f0{left:6%}
  .ph-frame.f1{left:36%}
  .ph-frame.f2{left:66%}
  .ph-grid{columns:2 140px;column-gap:10px}
  .ph-grid.compact{columns:3 100px;column-gap:8px}
  .ph-card{margin-bottom:10px}
  .ph-ov{opacity:1;background:linear-gradient(180deg,transparent 55%,rgba(8,11,22,.72))}
  .ph-qa{display:none}
  .ph-mhead{padding:8px 12px}
  .ph-mtitle{font-size:14px}
  .lb-top{padding:10px 10px;flex-wrap:wrap}
  .lb-name,.lb-meta{max-width:62vw}
  .lb-img{max-width:calc(100% - 16px)}
  .lb-nav{width:38px;height:52px}
  .lb-nav.prev{left:6px}
  .lb-nav.next{right:6px}
  .lb-hint{display:none}
  .lb-prog{width:70px}
  .lb-info{width:100%;border-left:none;border-top:1px solid rgba(255,255,255,.12)}
}

/* ================= 应用中心 / 导航精简 (v1.10.0) ================= */
.nav-app-sub{padding-left:26px;font-size:13px;position:relative}
.nav-app-sub::before{content:'';position:absolute;left:15px;top:50%;width:7px;height:1.5px;border-radius:1px;background:var(--border2)}
.nav-app-sub.active::before{background:var(--accent)}
.ctx-menu-user{min-width:232px}
.um-head{display:flex;align-items:center;gap:10px;padding:9px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:5px}
.um-head .avatar-wrap{width:36px;height:36px}
.um-id{min-width:0}
.um-name{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
.um-sub{font-size:11.5px;color:var(--faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-hero{position:relative;display:flex;align-items:center;gap:22px;padding:26px 28px;margin-bottom:20px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),color-mix(in srgb,var(--accent2) 7%,var(--surface)) 55%,var(--surface));box-shadow:var(--shadow);overflow:hidden}
.ac-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(430px 210px at 88% -50%,color-mix(in srgb,var(--accent2) 26%,transparent),transparent 70%),radial-gradient(380px 230px at 4% 140%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 72%)}
.ac-hero::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.ac-hero-tx{position:relative;z-index:1;flex:1;min-width:0}
.ac-hero-title{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;letter-spacing:.01em}
.ac-hero-title svg{color:var(--accent);flex:none}
.ac-hero-sub{margin-top:7px;font-size:13px;color:var(--muted);max-width:560px;line-height:1.65}
.ac-hero-badge{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:94px;height:94px;border-radius:22px;background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid var(--border);backdrop-filter:blur(6px);box-shadow:var(--shadow)}
.ac-hero-badge b{font-size:32px;font-weight:800;line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ac-hero-badge span{font-size:11px;color:var(--muted);margin-top:3px}
.ac-section{margin-bottom:18px}
.ac-section-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:12px}
.ac-section-t::before{content:'';width:4px;height:14px;border-radius:2px;background:var(--grad)}
.ac-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:16px;align-items:start}
.ac-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;animation:fadeIn .3s}
.ac-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--app-grad)}
.ac-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.ac-card-top{display:flex;gap:16px;align-items:flex-start}
.ac-icon{width:56px;height:56px;border-radius:15px;background:var(--app-grad);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 10px 22px -10px rgba(15,30,80,.55)}
.ac-info{flex:1;min-width:0}
.ac-name{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;flex-wrap:wrap}
.ac-tag{font-size:10.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:1px 8px;border-radius:99px}
.ac-desc{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.65}
.ac-pin{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;border:1px solid var(--border2);background:var(--surface);color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s}
.ac-pin:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.ac-pin.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent)}
.ac-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.ac-chip{font-size:11px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);padding:3px 10px;border-radius:99px}
.ac-preview{position:relative;height:132px;margin-top:16px;border-radius:12px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 7%,var(--surface2)),var(--surface2));border:1px solid var(--border);overflow:hidden}
.ac-pframe{position:absolute;top:16px;width:92px;height:102px;padding:5px 5px 16px;background:#fdfdfb;border-radius:4px;box-shadow:0 10px 24px -12px rgba(8,12,30,.5);transition:transform .3s cubic-bezier(.2,.7,.3,1.2)}
.ac-pframe img{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;background:#e8ecf4}
.ac-pframe.p0{left:7%;transform:rotate(-6deg)}
.ac-pframe.p1{left:29%;top:9px;transform:rotate(3deg);z-index:2}
.ac-pframe.p2{left:51%;top:20px;transform:rotate(-3deg);z-index:3}
.ac-pframe.p3{left:73%;top:11px;transform:rotate(7deg)}
.ac-card:hover .ac-pframe.p0{transform:rotate(-9deg) translateY(-4px)}
.ac-card:hover .ac-pframe.p1{transform:rotate(1deg) translateY(-6px)}
.ac-card:hover .ac-pframe.p2{transform:rotate(-1deg) translateY(-3px)}
.ac-card:hover .ac-pframe.p3{transform:rotate(10deg) translateY(-5px)}
.ac-preview.empty{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--faint);font-size:12.5px}
.ac-preview-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--faint);background:#e8ecf4;border-radius:2px}
.ac-mtile{width:100%;height:100%;border-radius:2px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.94)}
.ac-mtile svg{filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.ac-card-foot{display:flex;align-items:center;gap:12px;margin-top:18px}
.ac-stat{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);min-width:0}
.ac-stat svg{color:var(--accent);flex:none}
.ac-card-foot .spacer{flex:1}
.ac-about{display:flex;gap:12px;padding:16px 18px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:12.5px;line-height:1.7;margin-top:6px}
.ac-about>svg{flex:none;color:var(--accent);margin-top:2px}
.ac-about b{color:var(--text);font-size:13px}
.ac-about p{margin-top:4px}
@media (max-width:900px){
  .ac-hero-badge{width:78px;height:78px;border-radius:18px}
  .ac-hero-badge b{font-size:26px}
  .ac-pframe{width:80px;height:92px}
}
@media (max-width:820px){
  .nav-app-sub{padding-left:10px}
  .nav-app-sub::before{display:none}
}
@media (max-width:560px){
  .ac-hero{flex-direction:column;align-items:flex-start;padding:20px 18px;gap:14px}
  .ac-hero-title{font-size:20px}
  .ac-hero-badge{flex-direction:row;width:auto;height:auto;padding:8px 16px;gap:9px;border-radius:12px}
  .ac-hero-badge b{font-size:20px}
  .ac-hero-badge span{margin-top:0}
  .ac-card{padding:18px 16px}
  .ac-card-top{flex-wrap:wrap}
  .ac-pin{order:3;width:100%;justify-content:center}
  .ac-preview{height:112px}
  .ac-pframe{width:72px;height:86px;top:13px}
  .ac-pframe.p0{left:3%}
  .ac-pframe.p1{left:25%}
  .ac-pframe.p2{left:47%}
  .ac-pframe.p3{left:64%}
  .ac-card-foot{flex-wrap:wrap;gap:10px}
  .ac-card-foot .spacer{display:none}
  .ac-card-foot .btn{width:100%;justify-content:center}
  .trash-btn span{display:none}
  .trash-btn{padding:5px 8px}
}

/* ================= 媒体中心 (v1.11.0) ================= */
.md-hero,.md-bar,.md-recent,.md-main{--md-ac:#e23a9d;--md-ac2:#a855f7;--md-ac3:#22d3ee}
.md-hero{position:relative;display:flex;align-items:center;gap:26px;padding:26px 28px;margin-bottom:16px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(120deg,color-mix(in srgb,var(--md-ac) 14%,var(--surface)),color-mix(in srgb,var(--md-ac2) 9%,var(--surface)) 55%,var(--surface));box-shadow:var(--shadow);overflow:hidden}
.md-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(430px 210px at 88% -50%,color-mix(in srgb,var(--md-ac) 28%,transparent),transparent 70%),radial-gradient(380px 230px at 4% 140%,color-mix(in srgb,var(--md-ac2) 20%,transparent),transparent 72%)}
.md-hero::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#a855f7,#e23a9d,#f43f5e)}
.md-hero-tx{position:relative;z-index:1;flex:1;min-width:0}
.md-title{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;letter-spacing:.01em}
.md-title svg{color:var(--md-ac);flex:none}
.md-sub{margin-top:7px;font-size:13px;color:var(--muted)}
.md-hero-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.md-hero .btn-primary{background:linear-gradient(135deg,#a855f7,#e23a9d);box-shadow:0 2px 12px -2px rgba(226,58,157,.6)}
.md-hero-art{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:20px}
.md-eq{display:flex;align-items:flex-end;gap:5px;height:62px}
.md-eq i{width:8px;border-radius:4px;background:linear-gradient(180deg,#e23a9d,#a855f7);transform-origin:bottom;animation:mdeq 1.1s ease-in-out infinite}
.md-eq i:nth-child(1){height:46%;animation-delay:-.1s}
.md-eq i:nth-child(2){height:78%;animation-delay:-.4s}
.md-eq i:nth-child(3){height:100%;animation-delay:-.7s}
.md-eq i:nth-child(4){height:62%;animation-delay:-.25s}
.md-eq i:nth-child(5){height:84%;animation-delay:-.55s}
.md-hero-disc{position:relative;width:84px;height:84px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#170f2b 0 2px,#221640 2px 4px);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -12px rgba(0,0,0,.55),inset 0 0 0 3px rgba(255,255,255,.06);animation:mdspin 9s linear infinite}
.md-hero-disc::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(226,58,157,.4),transparent 38%,rgba(168,85,247,.4),transparent 72%)}
.md-hero-disc::after{content:'';position:absolute;z-index:1;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e23a9d,#a855f7);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.md-hero-disc svg{position:relative;z-index:2;width:18px;height:18px;color:#fff}

.md-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.md-bar label{font-size:12px;color:var(--muted);flex:none}
.md-bar .spacer{flex:1}
.md-tabs{display:inline-flex;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:4px;flex:none}
.md-tab{display:inline-flex;align-items:center;gap:7px;border:none;background:none;padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s}
.md-tab:hover{color:var(--text)}
.md-tab.active{background:var(--surface);color:var(--md-ac);box-shadow:var(--shadow)}
.md-tab-n{font-size:10.5px;padding:1px 7px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);color:var(--faint)}
.md-tab.active .md-tab-n{background:color-mix(in srgb,var(--md-ac) 14%,transparent);border-color:color-mix(in srgb,var(--md-ac) 30%,transparent);color:var(--md-ac)}
.md-view{display:inline-flex;border:1px solid var(--border2);border-radius:8px;overflow:hidden;background:var(--surface);flex:none}
.md-view-btn{border:none;background:none;width:32px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:all .15s}
.md-view-btn:hover{color:var(--text);background:var(--surface2)}
.md-view-btn.active{background:color-mix(in srgb,var(--md-ac) 14%,transparent);color:var(--md-ac)}
.md-count{font-size:12px;color:var(--faint)}

.md-recent{margin-bottom:18px}
.md-recent-t{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;margin-bottom:10px}
.md-recent-t svg{color:var(--md-ac)}
.md-recent-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.md-recent-row::-webkit-scrollbar{height:8px}
.md-recent-row::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--md-ac) 40%,var(--border2));border-radius:4px}
.md-recent-row::-webkit-scrollbar-thumb:hover{background:var(--md-ac)}
.md-rec-card{flex:none;width:172px;scroll-snap-align:start;border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:8px;cursor:pointer;text-align:left;transition:all .16s;box-shadow:var(--shadow)}
.md-rec-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--md-ac) 45%,var(--border));box-shadow:var(--shadow-lg)}
.md-rec-poster{position:relative;height:84px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.94);overflow:hidden}
.md-rec-poster svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.md-rec-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.35)}
.md-rec-prog i{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#e23a9d)}
.md-rec-nm{font-size:12px;font-weight:600;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-rec-time{font-size:10.5px;color:var(--faint);margin-top:2px}

.md-main{min-width:0}
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.md-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);cursor:pointer;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s;animation:fadeIn .3s}
.md-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--md-ac) 40%,var(--border))}
.md-poster{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,hsl(var(--md-h) 70% 46%),hsl(calc(var(--md-h) + 40) 72% 34%));overflow:hidden}
.md-poster-gen{color:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;transition:transform .3s}
.md-card:hover .md-poster-gen{transform:scale(1.12)}
.md-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.md-poster.has-frame .md-poster-gen{display:none}
.md-play-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,6,18,.34);opacity:0;transition:opacity .18s;color:#fff}
.md-play-ov svg{width:50px;height:50px;padding:13px;border-radius:50%;background:rgba(226,58,157,.92);box-shadow:0 8px 24px -6px rgba(0,0,0,.6)}
.md-card:hover .md-play-ov{opacity:1}
.md-dur{position:absolute;right:8px;bottom:8px;font-size:11px;padding:2px 7px;border-radius:6px;background:rgba(6,4,14,.74);color:#fff;backdrop-filter:blur(4px)}
.md-kind{position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:rgba(6,4,14,.55);color:#fff;backdrop-filter:blur(4px)}
.md-card-info{padding:11px 13px 13px}
.md-nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--faint);margin-top:4px}
.md-meta .dot{opacity:.6}
.md-grid.list{grid-template-columns:1fr;gap:8px}
.md-grid.list .md-card{display:flex;align-items:center;gap:14px;border-radius:11px}
.md-grid.list .md-card:hover{transform:translateX(3px)}
.md-grid.list .md-poster{width:112px;flex:none}
.md-grid.list .md-play-ov svg{width:34px;height:34px;padding:8px}
.md-grid.list .md-card-info{flex:1;min-width:0;padding:10px 14px 10px 0}
.md-grid.list .md-kind{display:none}
.md-sentinel{display:flex;align-items:center;justify-content:center;padding:18px;color:var(--faint)}
.md-sentinel.busy::before{content:'';width:20px;height:20px;border-radius:50%;border:2.5px solid var(--border2);border-top-color:var(--md-ac);animation:spin .7s linear infinite}
.md-end{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px;font-size:12px;color:var(--faint)}
.md-end svg{color:var(--ok)}

/* ---------- 内置播放器 ---------- */
.md-player{position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;background:radial-gradient(120% 120% at 50% 0%,rgba(22,11,34,.97),rgba(5,3,10,.99));backdrop-filter:blur(10px);color:#ece7f6;animation:fadeIn .18s;--md-ac:#e23a9d;--md-ac2:#a855f7;--md-ac3:#22d3ee}
.md-pl-top{display:flex;align-items:center;gap:8px;padding:12px 16px;flex:none;border-bottom:1px solid rgba(255,255,255,.07)}
.md-pl-tt{min-width:0;flex:0 1 auto}
.md-pl-name{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.md-pl-meta{font-size:11.5px;color:#9b8fb5;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.md-pl-top .spacer{flex:1}
.md-pl-counter{font-size:12px;color:#9b8fb5;margin-right:6px;flex:none}
.md-pl-btn{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:#e6def3;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .13s;flex:none}
.md-pl-btn:hover{background:rgba(226,58,157,.25);border-color:rgba(226,58,157,.5);transform:translateY(-1px)}
.md-pl-body{flex:1;min-height:0;display:flex;position:relative}
.md-pl-stagewrap{flex:1;min-width:0;display:flex;flex-direction:column}
.md-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#040208}
.md-video{width:100%;height:100%;object-fit:contain;outline:none}
.md-player.is-audio .md-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.md-audio-vis{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:radial-gradient(80% 80% at 50% 42%,rgba(168,85,247,.18),transparent 70%)}
.md-player.is-audio .md-audio-vis{display:flex}
.md-disc{position:relative;width:184px;height:184px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px -18px rgba(0,0,0,.8),inset 0 0 0 4px rgba(255,255,255,.07);animation:mdspin 12s linear infinite}
.md-disc::before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.16) 0 3px,transparent 3px 6px)}
.md-disc-label{position:relative;z-index:2;width:66px;height:66px;border-radius:50%;background:rgba(8,4,16,.84);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.16)}
.md-disc::after{content:'';position:absolute;z-index:3;width:10px;height:10px;border-radius:50%;background:#0a0612;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.md-player:not(.playing) .md-disc{animation-play-state:paused}
.md-audio-eq{display:flex;align-items:flex-end;gap:6px;height:46px}
.md-audio-eq i{width:7px;border-radius:4px;background:linear-gradient(180deg,var(--md-ac3),var(--md-ac),var(--md-ac2));transform-origin:bottom;animation:mdeq 1s ease-in-out infinite}
.md-audio-eq i:nth-child(1){height:55%;animation-delay:-.15s}
.md-audio-eq i:nth-child(2){height:85%;animation-delay:-.45s}
.md-audio-eq i:nth-child(3){height:100%;animation-delay:-.75s}
.md-audio-eq i:nth-child(4){height:70%;animation-delay:-.3s}
.md-audio-eq i:nth-child(5){height:92%;animation-delay:-.6s}
.md-audio-eq i:nth-child(6){height:60%;animation-delay:-.2s}
.md-audio-eq i:nth-child(7){height:80%;animation-delay:-.5s}
.md-player:not(.playing) .md-audio-eq i{animation-play-state:paused;transform:scaleY(.3)}
.md-audio-nm{font-size:14px;font-weight:600;color:#cbbfe0;max-width:70vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-buffer{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(4,2,8,.42);z-index:4}
.md-stage.buffering .md-buffer{display:flex}
.md-spin{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--md-ac);animation:spin .7s linear infinite}
.md-bigplay{position:absolute;z-index:5;width:78px;height:78px;border-radius:50%;border:none;background:rgba(226,58,157,.92);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 40px -8px rgba(226,58,157,.6);transition:all .18s}
.md-bigplay:hover{transform:scale(1.07);background:var(--md-ac)}
.md-player.playing .md-bigplay,.md-stage.buffering .md-bigplay{opacity:0;pointer-events:none;transform:scale(.8)}
.md-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:64px;border-radius:12px;border:1px solid rgba(255,255,255,.13);background:rgba(12,8,22,.5);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;opacity:.72}
.md-nav:hover{opacity:1;background:rgba(226,58,157,.3)}
.md-nav.prev{left:14px}
.md-nav.next{right:14px}
.md-err{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(6,3,12,.92);color:#cbbfe0;text-align:center;padding:20px}
.md-err svg{color:var(--md-ac)}
.md-err p{font-size:13.5px}
.md-pl-bar{flex:none;padding:10px 16px 14px;background:linear-gradient(180deg,rgba(10,6,18,.4),rgba(8,4,14,.88));border-top:1px solid rgba(255,255,255,.07)}
.md-seekrow{display:flex;align-items:center;gap:12px}
.md-time{font-size:11.5px;color:#9b8fb5;flex:none;min-width:42px}
.md-seekrow .md-time:last-child{text-align:right}
.md-seek{position:relative;flex:1;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.md-seek::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:5px;border-radius:99px;background:rgba(255,255,255,.14)}
.md-seek-buf{position:absolute;left:0;top:50%;transform:translateY(-50%);height:5px;border-radius:99px;background:rgba(255,255,255,.22);width:0;pointer-events:none}
.md-seek-prog{position:absolute;left:0;top:50%;transform:translateY(-50%);height:5px;border-radius:99px;background:linear-gradient(90deg,var(--md-ac3),var(--md-ac),var(--md-ac2));width:0;pointer-events:none}
.md-seek-thumb{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(226,58,157,.4),0 2px 6px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none;transition:transform .12s}
.md-seek:hover .md-seek-thumb{transform:translate(-50%,-50%) scale(1.2)}
.md-seek-tip{position:absolute;bottom:22px;left:0;transform:translateX(-50%);font-size:11px;padding:3px 8px;border-radius:6px;background:rgba(8,4,14,.94);border:1px solid rgba(255,255,255,.14);color:#fff;opacity:0;transition:opacity .12s;pointer-events:none;white-space:nowrap}
.md-seek:hover .md-seek-tip{opacity:1}
.md-ctrlrow{display:flex;align-items:center;gap:6px;margin-top:8px}
.md-ctrlrow .spacer{flex:1}
.md-ctrl{position:relative;width:36px;height:36px;border-radius:9px;border:1px solid transparent;background:none;color:#d8cfe8;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .13s;flex:none}
.md-ctrl:hover{background:rgba(255,255,255,.1);color:#fff}
.md-ctrl.on{color:var(--md-ac);background:rgba(226,58,157,.16)}
.md-ctrl.md-play{width:44px;height:44px;background:linear-gradient(135deg,var(--md-ac2),var(--md-ac));color:#fff;border:none;box-shadow:0 8px 22px -8px rgba(226,58,157,.7)}
.md-ctrl.md-play:hover{filter:brightness(1.1)}
.md-ctrl.md-speed{width:auto;padding:0 12px;font-size:12.5px;font-weight:700;border:1px solid rgba(255,255,255,.16)}
.md-one{position:absolute;top:1px;right:2px;font-size:8px;font-weight:700;background:var(--md-ac);color:#fff;border-radius:99px;padding:0 3px;line-height:1.5}
.md-volwrap{display:flex;align-items:center;gap:4px;margin-left:4px}
.md-vol{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:5px;border-radius:99px;background:rgba(255,255,255,.22);cursor:pointer;transition:width .2s,opacity .2s}
.md-volwrap:hover .md-vol,.md-vol:focus{width:80px;opacity:1}
.md-vol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(226,58,157,.4);cursor:pointer}
.md-vol::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:#fff;cursor:pointer}
.md-speed-wrap{position:relative;flex:none}
.md-speed-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);background:rgba(14,8,24,.97);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:5px;display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:all .16s;box-shadow:0 18px 44px -12px rgba(0,0,0,.8);backdrop-filter:blur(12px);z-index:10;min-width:92px}
.md-speed-menu.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.md-speed-menu button{border:none;background:none;color:#d8cfe8;font-size:12.5px;padding:7px 12px;border-radius:7px;cursor:pointer;text-align:left;transition:all .12s;white-space:nowrap}
.md-speed-menu button:hover{background:rgba(255,255,255,.1);color:#fff}
.md-speed-menu button.active{background:rgba(226,58,157,.22);color:var(--md-ac);font-weight:700}
.md-playlist{flex:none;width:0;overflow:hidden;border-left:1px solid rgba(255,255,255,.08);background:rgba(10,6,18,.6);display:flex;flex-direction:column;transition:width .24s cubic-bezier(.2,.7,.3,1)}
.md-player.pl-open .md-playlist{width:300px}
.md-pl-head{display:flex;align-items:center;gap:8px;width:300px;padding:14px 16px;font-size:13px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.08);flex:none}
.md-pl-head svg{color:var(--md-ac)}
.md-pl-head .mono{margin-left:auto;font-size:11px;color:#9b8fb5;font-weight:400}
.md-pl-x{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:4px;border:none;border-radius:8px;background:rgba(255,255,255,.06);color:#cbbfe0;cursor:pointer;transition:all .14s}
.md-pl-x:hover{background:rgba(226,58,157,.25);color:#fff}
.md-pl-x svg{color:inherit}
.md-pl-list{width:300px;flex:1;min-height:0;overflow-y:auto;padding:8px}
.md-pl-list::-webkit-scrollbar{width:8px}
.md-pl-list::-webkit-scrollbar-thumb{background:rgba(226,58,157,.4);border-radius:4px}
.md-pl-list::-webkit-scrollbar-thumb:hover{background:rgba(226,58,157,.6)}
.md-pl-item{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;padding:9px 10px;border-radius:9px;cursor:pointer;text-align:left;color:#cbbfe0;transition:all .12s;margin-bottom:2px}
.md-pl-item:hover{background:rgba(255,255,255,.07);color:#fff}
.md-pl-item.active{background:rgba(226,58,157,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(226,58,157,.4)}
.md-pl-idx{flex:none;width:22px;font-size:11px;color:#8b7fa5;display:flex;align-items:center;justify-content:center}
.md-pl-item.active .md-pl-idx{color:var(--md-ac)}
.md-pl-ic{flex:none;display:flex;color:#9b8fb5}
.md-pl-item.active .md-pl-ic{color:var(--md-ac)}
.md-pl-nm{flex:1;min-width:0;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-pl-dur{flex:none;font-size:11px;color:#8b7fa5}
@keyframes mdeq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes mdspin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .md-hero-art{gap:14px}
  .md-hero-disc{width:70px;height:70px}
  .md-eq{height:52px}
  .md-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:13px}
  .md-player.pl-open .md-playlist{width:260px}
  .md-pl-head,.md-pl-list{width:260px}
}
@media (max-width:560px){
  .md-hero{flex-direction:column;align-items:stretch;padding:20px 18px;gap:16px}
  .md-title{font-size:20px}
  .md-hero-art{justify-content:center}
  .md-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .md-card-info{padding:9px 11px 11px}
  .md-nm{font-size:12px}
  .md-grid.list .md-poster{width:88px}
  .md-rec-card{width:150px}
  .md-bar{gap:8px}
  .md-tabs{order:1;width:100%;justify-content:space-between}
  .md-tab{flex:1;justify-content:center;padding:6px 8px}
  .md-pl-top{padding:10px;flex-wrap:wrap}
  .md-pl-name,.md-pl-meta{max-width:62vw}
  .md-nav{width:38px;height:52px}
  .md-nav.prev{left:6px}
  .md-nav.next{right:6px}
  .md-disc{width:140px;height:140px}
  .md-pl-bar{padding:8px 10px 12px}
  .md-ctrlrow{flex-wrap:wrap;justify-content:center;gap:4px}
  .md-ctrlrow .spacer{display:none}
  .md-ctrl{width:32px;height:32px}
  .md-ctrl.md-play{width:40px;height:40px}
  .md-vol{width:64px;opacity:1}
  .md-player.pl-open .md-playlist{position:absolute;right:0;top:0;bottom:0;width:min(300px,86vw);z-index:8;box-shadow:-20px 0 60px rgba(0,0,0,.6)}
  .md-pl-head,.md-pl-list{width:min(300px,86vw)}
}