:root { color-scheme: dark; --bg:#17181f; --panel:#202126; --panel-2:#292a31; --text:#f5f5f7; --muted:#a5a7b0; --line:#353740; --blue:#4b8dff; --blue-dark:#2571f4; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--text); font:15px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:radial-gradient(circle at 5% 0%,#3c241f 0,transparent 27rem),var(--bg); }
button,input { font:inherit; } button { cursor:pointer; border:0; } button:focus-visible,input:focus-visible { outline:2px solid #8db8ff; outline-offset:2px; }
.app { display:grid; grid-template-columns:272px minmax(0,1fr); min-height:100vh; }
.sidebar { display:flex; flex-direction:column; gap:8px; padding:24px 16px 16px; background:linear-gradient(160deg,rgba(68,43,36,.84),rgba(25,25,31,.96) 50%,#19191f); border-right:1px solid rgba(255,255,255,.06); }
.brand { display:flex; align-items:center; gap:10px; margin:0 12px 14px; font-size:22px; font-weight:750; letter-spacing:-.03em; }
.brand-mark { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; color:white; font-weight:800; font-size:20px; background:linear-gradient(145deg,#609bff,#1d62e2); box-shadow:0 6px 14px #0d2c6b80; }
.primary-btn,.create-btn,.secondary-btn,.sort-btn,.grid-btn,.nav-item,.profile,.logout,.link-btn,.text-btn { transition:transform .15s, background .15s, border-color .15s; }
.primary-btn { display:flex; justify-content:center; align-items:center; gap:9px; min-height:44px; padding:0 16px; color:#fff; border-radius:12px; font-weight:700; background:linear-gradient(180deg,#5b98ff,#3078f4); box-shadow:0 7px 18px #10387955; }
.primary-btn:hover { transform:translateY(-1px); background:#4b8dff; }
.create-btn { min-height:40px; color:#f1f1f4; border-radius:11px; font-weight:650; background:rgba(255,255,255,.13); }
.create-btn:hover,.nav-item:hover,.profile:hover { background:rgba(255,255,255,.12); }
.nav { display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.nav-item { display:flex; align-items:center; gap:12px; min-height:38px; padding:0 12px; text-align:left; color:#e4e4e7; border-radius:10px; background:transparent; font-weight:600; }
.nav-item.active { background:rgba(255,255,255,.15); }
.side-footer { margin-top:auto; border-top:1px solid rgba(255,255,255,.09); padding-top:12px; }
.profile { display:flex; width:100%; align-items:center; gap:10px; padding:8px; color:var(--text); border-radius:11px; text-align:left; background:transparent; font-weight:650; }
.avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:#8251d8; font-size:13px; }.dots{margin-left:auto;color:var(--muted)}
.logout { width:100%; padding:8px 12px; color:var(--muted); text-align:left; background:transparent; border-radius:9px; }.logout:hover{color:#fff;background:rgba(255,255,255,.08)}
.content { position:relative; padding:28px 34px; min-width:0; border-radius:20px 0 0 0; background:#202126; overflow:hidden; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.topbar h1{margin:0;font-size:23px;letter-spacing:-.025em}.breadcrumbs{min-height:20px;color:var(--muted);font-size:13px}.crumb{color:var(--muted);background:transparent;padding:0}.crumb:hover{color:#fff}.sep{margin:0 7px;color:#777984}
.toolbar{display:flex;gap:8px}.sort-btn,.grid-btn{height:36px;padding:0 13px;color:#e7e7ea;border-radius:10px;background:#3a3b43;font-weight:650}.grid-btn{font-size:21px;padding:0 12px}.sort-btn:hover,.grid-btn:hover{background:#4a4b54}
.file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:22px 16px; max-width:1050px; margin-top:30px; }.file-card { min-width:0; padding:8px; border-radius:13px; color:var(--text); background:transparent; text-align:left; }.file-card:hover { background:#31323a; }.folder-icon { position:relative; width:76px; height:58px; margin-bottom:9px; border-radius:8px 9px 11px 11px; background:linear-gradient(#ffe189,#f6bd4c); box-shadow:inset 0 -5px 0 #e5a93d,0 7px 13px #0003; }.folder-icon:before { content:""; position:absolute; left:4px; top:-8px; width:31px; height:15px; border-radius:7px 8px 0 0; background:#ffdc78; }.file-icon { display:grid; place-items:center; width:76px; height:58px; margin-bottom:9px; border-radius:11px; color:#c4d5ff; font-size:26px; background:#303d57; }.file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}.file-kind{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.empty { display:grid; place-items:center; max-width:440px; margin:14vh auto 0; padding:36px; text-align:center; border:1px dashed #4a4d58; border-radius:20px; background:#27282f; }.empty-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:10px;border-radius:17px;color:#a9c7ff;background:#2f4b77;font-size:29px}.empty h2{margin:0;font-size:20px}.empty p{margin:8px 0 20px;color:var(--muted)}.empty-upload{width:max-content}
.drop-hint { position:absolute; inset:18px; z-index:2; display:none; place-items:center; border:2px dashed #79a8ff; border-radius:18px; color:#d9e7ff; font-size:20px; font-weight:700; background:#1d4d9b55; pointer-events:none; }.dropping .drop-hint{display:grid}.dropping .file-grid,.dropping .empty{opacity:.25}
.auth-shell { display:grid; min-height:100vh; place-items:center; padding:20px; background:radial-gradient(circle at 20% 10%,#59352d 0,transparent 30rem),#191a20; }.auth-card { width:min(100%,420px); padding:36px; border:1px solid #3b3d47; border-radius:22px; background:#25262d; box-shadow:0 25px 70px #0007; }.auth-logo{display:flex;align-items:center;gap:9px;font-size:20px;font-weight:750}.auth-card h1{margin:26px 0 5px;letter-spacing:-.03em}.auth-card>p{color:var(--muted)}.auth-form{display:grid;gap:14px;margin-top:25px}.auth-form label,.dialog label{display:grid;gap:7px;font-weight:650}.auth-form input,.dialog input{width:100%;padding:11px 12px;color:#fff;border:1px solid #4a4c57;border-radius:10px;background:#181920}.secondary-btn{min-height:42px;padding:0 14px;color:#e6e7eb;border:1px solid #474954;border-radius:11px;background:#303139;font-weight:650}.secondary-btn:hover{background:#3b3c45}.link-btn,.text-btn{padding:0;color:#98bdff;background:transparent;font-weight:650}.link-btn{width:100%;margin:18px 0 0}.switcher{text-align:center;margin-top:23px}.auth-note{min-height:20px;margin:12px 0 0;color:#ffb4a8;font-size:13px}.dialog{width:min(100% - 30px,400px);padding:0;color:var(--text);border:1px solid #484a55;border-radius:18px;background:#292a31;box-shadow:0 20px 70px #000a}.dialog::backdrop{background:#0009}.dialog>form,.dialog>div{display:grid;gap:18px;padding:25px}.dialog h2{margin:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.profile-name{margin:-10px 0 0;color:var(--muted)}.muted{color:var(--muted)}.full{width:100%}.toast{position:fixed;right:22px;bottom:22px;z-index:10;max-width:min(370px,calc(100% - 44px));padding:12px 15px;color:#fff;border:1px solid #4b4e5b;border-radius:11px;background:#30323b;box-shadow:0 12px 35px #0008;transform:translateY(120px);opacity:0;transition:.25s}.toast.show{transform:translateY(0);opacity:1}.toast.error{border-color:#b85a57;background:#542f34}
@media(max-width:720px){.app{display:block}.sidebar{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:10px 14px;background:#202126}.brand{margin:0;font-size:18px}.nav,.side-footer{display:none}.primary-btn,.create-btn{min-height:38px}.create-btn{padding:0 10px}.content{min-height:calc(100vh - 59px);padding:22px 16px;border-radius:0}.topbar h1{font-size:21px}.sort-btn span{display:none}.file-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:14px 8px}.folder-icon,.file-icon{width:64px;height:51px}.empty{margin-top:10vh;padding:27px 20px}.auth-card{padding:28px 22px}}


/* File cards and preview */
[hidden] { display:none !important; }
.folder-icon { display:block; width:96px; height:72px; }
.file-icon,.file-thumb { display:grid; place-items:center; width:112px; height:82px; margin-bottom:9px; overflow:hidden; border-radius:11px; color:#c4d5ff; font-size:22px; font-weight:750; background:#303d57; }
.file-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.file-card:hover .file-thumb img { transform:scale(1.04); }
.preview-dialog { width:min(1100px,calc(100% - 30px)); height:min(820px,calc(100% - 30px)); max-width:none; max-height:none; padding:0; color:var(--text); border:1px solid #454751; border-radius:18px; background:#17181d; box-shadow:0 28px 90px #000d; }
.preview-dialog::backdrop { background:#000b; }
.preview-shell { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100%; }
.preview-header,.preview-footer { display:flex; align-items:center; gap:16px; padding:14px 18px; background:#25262d; }
.preview-header { justify-content:space-between; border-bottom:1px solid #383a43; }
.preview-header h2 { min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; }
.preview-close { width:36px; height:36px; color:#ddd; border-radius:10px; background:#3a3b43; font-size:25px; line-height:1; }
.preview-close:hover { background:#4a4b55; }
.preview-body { display:grid; min-height:0; place-items:center; overflow:auto; padding:20px; background:#111217; }
.preview-body img,.preview-body video { display:block; max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 10px 45px #0008; }
.preview-body iframe { width:100%; height:100%; border:0; border-radius:8px; background:#fff; }
.preview-body audio { width:min(620px,100%); }
.preview-body pre { width:100%; height:100%; margin:0; overflow:auto; padding:20px; color:#e7e9ee; border-radius:10px; background:#1d1f26; white-space:pre-wrap; word-break:break-word; }
.preview-message { color:var(--muted); text-align:center; }
.preview-footer { justify-content:flex-end; border-top:1px solid #383a43; }
.preview-download { min-height:38px; color:#fff; text-decoration:none; }
@media(max-width:720px) { .folder-icon{width:76px;height:58px}.file-icon,.file-thumb{width:92px;height:68px}.preview-dialog{width:100%;height:100%;max-width:100%;max-height:100%;border:0;border-radius:0}.preview-body{padding:10px} }

.preview-stage { position:relative; min-height:0; overflow:hidden; }
.preview-body { width:100%; height:100%; }
.preview-nav { position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:46px; height:62px; color:#fff; border-radius:13px; background:#30323dcc; box-shadow:0 8px 25px #0007; font-size:39px; line-height:1; transform:translateY(-50%); }
.preview-nav:hover { background:#464853; }
.preview-nav:disabled { opacity:.2; cursor:default; }
.preview-prev { left:14px; }
.preview-next { right:14px; }
@media(max-width:720px) { .preview-nav{width:39px;height:54px}.preview-prev{left:7px}.preview-next{right:7px} }

.file-grid.list-view { grid-template-columns:1fr; gap:4px; max-width:none; }
.file-grid.list-view .file-card { display:grid; grid-template-columns:48px minmax(0,1fr) 170px; align-items:center; gap:12px; width:100%; min-height:58px; padding:7px 12px; }
.file-grid.list-view .folder-icon,.file-grid.list-view .file-icon,.file-grid.list-view .file-thumb { grid-row:1; width:44px; height:40px; margin:0; }
.file-grid.list-view .folder-icon:before { width:20px; height:9px; top:-4px; }
.file-grid.list-view .file-name { grid-column:2; grid-row:1; }
.file-grid.list-view .file-kind { grid-column:3; grid-row:1; margin:0; text-align:right; }
@media(max-width:720px) { .file-grid.list-view .file-card{grid-template-columns:44px minmax(0,1fr)}.file-grid.list-view .file-kind{display:none} }