* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --bg: #1a1a2e; --bg2: #16213e; --bg3: #0f3460;
    --cyan: #00ffc6; --cyan-dim: #00c49a;
    --text: #e0e0e0; --text-dim: #999;
    --danger: #ff4757; --warn: #ffa502;
    --card-bg: #1e2a45; --border: #2a3a5c; --radius: 6px;
    --header-h: 48px;
}
body { font-family: -apple-system,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); height:100vh; overflow:hidden; }

/* ---- Header ---- */
.header { background:var(--bg2); border-bottom:1px solid var(--border); padding:0 16px; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; }
.header h1 { font-size:18px; color:var(--cyan); }
.user-area { display:flex; align-items:center; gap:10px; }
.user-area img { width:28px; height:28px; border-radius:50%; }
.user-area .name { font-size:13px; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border:none; border-radius:var(--radius); font-size:13px; cursor:pointer; transition:all .2s; white-space:nowrap; }
.btn-primary { background:var(--cyan); color:#111; font-weight:600; }
.btn-primary:hover { background:var(--cyan-dim); }
.btn-outline { background:transparent; border:1px solid var(--cyan); color:var(--cyan); }
.btn-outline:hover { background:rgba(0,255,198,.1); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:3px 8px; font-size:12px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }

/* ---- Dual Pane Layout ---- */
.main { display:flex; height:calc(100vh - var(--header-h) - 24px); }
.pane { flex:1; display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--border); }
.pane:last-child { border-right:none; }
.pane-header { background:var(--bg2); padding:8px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; min-height:36px; flex-shrink:0; }
.pane-header .pane-title { font-size:13px; color:var(--cyan); font-weight:600; }
.pane-header .pane-path { font-size:12px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.pane-body { flex:1; overflow-y:auto; }

/* ---- Tabs ---- */
.tabs { display:flex; gap:6px; padding:8px 12px; flex-wrap:wrap; border-bottom:1px solid var(--border); flex-shrink:0; }
.tab { padding:4px 12px; border-radius:14px; font-size:12px; cursor:pointer; border:1px solid var(--border); color:var(--text-dim); background:transparent; transition:all .2s; }
.tab.active { background:var(--cyan); color:#111; border-color:var(--cyan); font-weight:600; }
.tab:hover:not(.active) { border-color:var(--cyan); color:var(--cyan); }

/* ---- Sort Bar ---- */
.sort-bar { display:flex; gap:4px; padding:4px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sort-btn { padding:2px 10px; border-radius:10px; font-size:11px; cursor:pointer; border:1px solid transparent; color:var(--text-dim); background:transparent; transition:all .2s; }
.sort-btn.active { background:rgba(0,200,200,.15); color:var(--cyan); border-color:rgba(0,200,200,.3); font-weight:600; }
.sort-btn:hover:not(.active) { color:var(--text); background:rgba(255,255,255,.05); }

/* ---- File Row ---- */
.file-row { display:flex; align-items:center; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:background .15s; gap:10px; }
.file-row:hover { background:rgba(0,255,198,.05); }
.file-row.selected { background:rgba(0,255,198,.12); border-left:3px solid var(--cyan); }
.file-row .icon { font-size:18px; flex-shrink:0; width:24px; text-align:center; }
.file-row .fname { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-row .fmeta { font-size:11px; color:var(--text-dim); white-space:nowrap; }

/* ---- Share Card (left pane) ---- */
.share-row { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:background .15s; }
.share-row.has-cover { display:flex; gap:10px; align-items:flex-start; }
.share-row:hover { background:rgba(0,255,198,.05); }
.share-row.selected { background:rgba(0,255,198,.12); border-left:3px solid var(--cyan); }
.share-row .s-cover { width:80px; height:54px; flex-shrink:0; border-radius:4px; overflow:hidden; background:#111; }
.share-row .s-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.share-row .s-body { flex:1; min-width:0; }
.share-row .s-title { font-size:13px; font-weight:600; color:#fff; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-row .s-meta { font-size:11px; color:var(--text-dim); display:flex; gap:10px; flex-wrap:wrap; }
.share-row .s-meta span { display:inline-flex; align-items:center; gap:3px; }
.badge { display:inline-block; padding:1px 6px; border-radius:8px; font-size:10px; font-weight:600; }
.sharer-link { cursor:pointer; color:var(--cyan); transition:color .15s; }
.sharer-link:hover { color:#fff; text-decoration:underline; }

/* ---- User Stats Banner ---- */
.user-stats-banner { padding:12px 14px; background:rgba(0,255,198,.06); border-bottom:1px solid var(--cyan-dim); }
.user-stats-name { font-size:15px; font-weight:700; color:#fff; margin-bottom:6px; }
.user-stats-nums { display:flex; gap:16px; font-size:12px; color:var(--text-dim); }
.user-stats-nums b { color:var(--cyan); font-size:13px; }
.badge-cat { background:rgba(0,255,198,.15); color:var(--cyan); }

/* ---- Context Menu ---- */
.ctx-menu { position:fixed; background:var(--bg2); border:1px solid var(--cyan-dim); border-radius:var(--radius); padding:4px 0; min-width:160px; z-index:300; box-shadow:0 4px 20px rgba(0,0,0,.5); }
.ctx-item { padding:7px 16px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:background .15s; }
.ctx-item:hover { background:rgba(0,255,198,.1); color:var(--cyan); }
.ctx-sep { height:1px; background:var(--border); margin:4px 0; }

/* ---- Modal ---- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--cyan-dim); border-radius:10px; padding:24px; width:420px; max-width:92vw; max-height:85vh; overflow-y:auto; }
.modal h2 { font-size:16px; color:var(--cyan); margin-bottom:14px; }
.modal .close-btn { float:right; background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; }

/* ---- Form ---- */
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:12px; color:var(--text-dim); margin-bottom:3px; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--text); font-size:13px; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--cyan); }
.form-group textarea { resize:vertical; min-height:50px; }

/* ---- Login ---- */
.login-box { text-align:center; padding:20px; }
.login-box .qr-img { width:180px; height:180px; margin:12px auto; border:2px solid var(--cyan); border-radius:6px; background:#fff; }
.login-box .status { font-size:13px; color:var(--warn); margin-top:8px; }
.login-box .user-code { font-size:26px; font-weight:700; color:var(--cyan); letter-spacing:4px; margin:8px 0; }

/* ---- Player Modal ---- */
.player-modal video { width:100%; max-height:60vh; border-radius:var(--radius); background:#000; }

/* ---- Pagination ---- */
.pagination { display:flex; justify-content:center; gap:6px; padding:8px; }

/* ---- Toast ---- */
.toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--bg3); border:1px solid var(--cyan); color:var(--text); padding:8px 20px; border-radius:var(--radius); font-size:13px; z-index:999; opacity:0; transition:opacity .3s; pointer-events:none; }
.toast.show { opacity:1; }

/* ---- Top loading bar ---- */
#top-loader { position:fixed; top:0; left:0; height:2px; background:var(--cyan); z-index:9999; width:0; opacity:0; transition:width .3s ease, opacity .2s; pointer-events:none; }
#top-loader.active { opacity:1; animation:loader-progress 2s ease-in-out infinite; }
@keyframes loader-progress { 0%{width:0} 50%{width:70%} 100%{width:95%} }
#top-loader.done { width:100%; opacity:0; transition:width .15s, opacity .4s .15s; }

/* ---- Disabled overlay for pane during load ---- */
.pane-body.loading-dim { opacity:.5; pointer-events:none; transition:opacity .15s; }

/* ---- Misc ---- */
.loading { text-align:center; padding:30px; color:var(--text-dim); }
.spinner { display:inline-block; width:22px; height:22px; border:3px solid var(--border); border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty { text-align:center; padding:40px; color:var(--text-dim); font-size:13px; }

/* ---- Toolbar ---- */
.toolbar { display:flex; gap:6px; padding:6px 12px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; }

/* ---- Detail fields ---- */
.detail-field { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); display:flex; gap:10px; }
.detail-field .df-label { font-size:12px; color:var(--cyan); min-width:60px; flex-shrink:0; }
.detail-field .df-value { font-size:13px; color:var(--text); word-break:break-all; }

/* ---- Multi-select ---- */
.file-row .sel-box { width:16px; height:16px; border:1px solid var(--border); border-radius:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--cyan); }
.file-row.multi-sel .sel-box { border-color:var(--cyan); background:rgba(0,255,198,.15); }

/* ---- Share result ---- */
.share-result { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:10px; margin-top:8px; }
.share-result a { color:var(--cyan); }

/* ---- Status bar ---- */
.status-bar { font-size:11px; color:var(--text-dim); padding:4px 12px; border-top:1px solid var(--border); flex-shrink:0; display:flex; gap:16px; }

/* ---- Footer ---- */
.site-footer { position:fixed; bottom:0; left:0; right:0; height:24px; display:flex; align-items:center; justify-content:center; background:var(--bg2); border-top:1px solid var(--border); z-index:100; }
.site-footer a { font-size:11px; color:var(--text-dim); text-decoration:none; }
.site-footer a:hover { color:var(--cyan); text-decoration:underline; }

@media(max-width:768px) {
    .main { flex-direction:column; }
    .pane { border-right:none; border-bottom:1px solid var(--border); }
}