:root {
  --bg:#080b12; --bg2:#0b1019; --panel:#0d1220; --card:#121a29; --card2:#16203200;
  --line:#1f2a3d; --line2:#27344b; --txt:#e8ecf3; --mut:#7d8aa0;
  --acc:#1e90ff; --acc2:#00c2ff; --glow:rgba(30,144,255,.40);
  --silver:linear-gradient(180deg,#ffffff,#cdd7e6 45%,#8fa1ba 70%,#5d6e86);
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--txt);
  font:14px/1.45 system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
[hidden]{ display:none !important; }
a { color:var(--acc); text-decoration:none; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#1c2738; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#27344b; }

/* ---------- brand ---------- */
.brand{ display:flex; align-items:center; gap:11px; }
.brand-img{ width:38px; height:38px; border-radius:9px; object-fit:cover;
  box-shadow:0 0 0 1px var(--line2),0 0 18px -4px var(--glow); }
.brand-fallback{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px; color:#fff; letter-spacing:-1px;
  background:radial-gradient(120% 120% at 30% 20%,#1a2740,#0a0f1a);
  box-shadow:0 0 0 1px var(--line2),0 0 18px -4px var(--glow); }
.brand-fallback .chev{ color:var(--acc2); margin-left:1px; text-shadow:0 0 8px var(--acc); }
.brand-words{ display:flex; flex-direction:column; line-height:1.05; }
.brand-words b{ font-size:16px; font-weight:800; letter-spacing:.6px;
  background:var(--silver); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-words span{ font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--acc2); }
.brand-lg .brand-img,.brand-lg .brand-fallback{ width:72px; height:72px; border-radius:16px; font-size:36px; }
.brand-lg .brand-words b{ font-size:22px; } .brand-lg .brand-words span{ font-size:11px; }

/* ---------- login ---------- */
#login{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.login-bgfx{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(40% 50% at 18% 22%,rgba(30,144,255,.18),transparent 70%),
    radial-gradient(45% 45% at 85% 80%,rgba(0,194,255,.14),transparent 70%),
    linear-gradient(180deg,#0a0f1a,#070a11);
}
.login-bgfx::after{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:42px 42px; -webkit-mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent 75%);
  mask-image:radial-gradient(60% 60% at 50% 40%,#000,transparent 75%); }
.login-card{ position:relative; z-index:1; width:330px; padding:30px 26px;
  background:linear-gradient(180deg,rgba(20,27,42,.92),rgba(12,17,28,.94));
  border:1px solid var(--line2); border-radius:18px; display:flex; flex-direction:column; gap:13px;
  box-shadow:0 30px 80px -30px #000,0 0 0 1px rgba(30,144,255,.06),inset 0 1px 0 rgba(255,255,255,.04); }
.login-card .brand{ justify-content:center; flex-direction:column; text-align:center; gap:10px; margin-bottom:6px; }
.login-card .brand-words{ align-items:center; }
.login-card input{ background:#0a0f1a; border:1px solid var(--line2); color:var(--txt);
  padding:11px 13px; border-radius:10px; font-size:14px; outline:none; transition:border-color .15s,box-shadow .15s; }
.login-card input:focus{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(30,144,255,.18); }

button{ cursor:pointer; font:inherit; }
.login-card button[type=submit]{ margin-top:4px; padding:11px; border:0; border-radius:10px; color:#fff; font-weight:700;
  background:linear-gradient(180deg,var(--acc),#1577e0); box-shadow:0 8px 22px -8px var(--glow); transition:filter .15s,transform .05s; }
.login-card button[type=submit]:hover{ filter:brightness(1.08); }
.login-card button[type=submit]:active{ transform:translateY(1px); }
.err{ color:#ff6b6b; min-height:1em; margin:2px 0 0; font-size:12.5px; text-align:center; }

/* ---------- app shell ---------- */
#app{ display:grid; grid-template-columns:250px 1fr; height:100vh; }
#sidebar{ background:linear-gradient(180deg,#0d1320,#0a0e18); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 14px; gap:14px; position:relative; }
#sidebar::after{ content:""; position:absolute; top:0; right:-1px; width:1px; height:100%;
  background:linear-gradient(180deg,transparent,var(--glow),transparent); opacity:.5; }
.side-label{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--mut); padding:0 6px; margin-top:6px; }
.proj-list{ display:flex; flex-direction:column; gap:6px; overflow:auto; flex:1; }
.proj{ display:flex; flex-direction:column; gap:2px; text-align:left; width:100%;
  background:transparent; border:1px solid transparent; color:var(--txt);
  padding:10px 12px; border-radius:11px; position:relative; transition:background .15s,border-color .15s; }
.proj:hover{ background:#121a29; border-color:var(--line); }
.proj.on{ background:linear-gradient(90deg,rgba(30,144,255,.16),rgba(30,144,255,.04)); border-color:rgba(30,144,255,.45); }
.proj.on::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--acc),var(--acc2)); box-shadow:0 0 10px var(--acc); }
.proj b{ font-size:14px; font-weight:650; }
.proj small{ color:var(--mut); font-size:11px; }
.logout{ background:#101725; border:1px solid var(--line2); color:#cdd7e6; padding:10px; border-radius:11px;
  transition:background .15s,color .15s; }
.logout:hover{ background:#16203a; color:#fff; }

/* ---------- main ---------- */
#main{ overflow:auto; display:flex; flex-direction:column; }
#topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:14px 20px;
  background:rgba(8,11,18,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.spacer{ flex:1; }
.crumbs{ display:flex; align-items:center; gap:4px; font-size:14px; flex-wrap:wrap; min-width:0; }
.crumbs a{ cursor:pointer; padding:3px 8px; border-radius:7px; }
.crumbs a:hover{ background:#121a29; }
.crumbs .sep{ color:#46536b; }
.crumbs .cur{ color:var(--mut); padding:3px 4px; }
.search{ width:230px; background:#0a0f1a; border:1px solid var(--line2); color:var(--txt);
  padding:9px 13px; border-radius:10px; font-size:13px; outline:none; transition:border-color .15s,box-shadow .15s; }
.search:focus{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(30,144,255,.15); width:260px; }
.seg{ display:flex; background:#0a0f1a; border:1px solid var(--line2); border-radius:10px; overflow:hidden; }
.seg button{ background:transparent; border:0; color:var(--mut); padding:8px 12px; font-size:12.5px; transition:.15s; }
.seg button.on{ background:linear-gradient(180deg,var(--acc),#1577e0); color:#fff; }
.zipbtn{ background:#101725; border:1px solid var(--line2); color:#cdd7e6; padding:8px 13px; border-radius:10px; font-size:12.5px; }
.zipbtn:hover{ background:#16203a; color:#fff; border-color:var(--acc); }

.chips{ display:flex; flex-wrap:wrap; gap:7px; padding:12px 20px 0; }
.chip{ cursor:pointer; border:1px solid var(--line2); background:#0e1626; color:var(--mut);
  padding:5px 12px; border-radius:20px; font-size:12px; user-select:none; transition:.15s; text-transform:capitalize; }
.chip:hover{ color:var(--txt); border-color:var(--line2); }
.chip.on{ background:linear-gradient(180deg,var(--acc),#1577e0); border-color:var(--acc); color:#fff; }
.status{ color:var(--mut); font-size:12px; padding:10px 20px 0; }

/* ---------- grid + cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:14px; padding:16px 20px 40px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:13px; overflow:hidden;
  cursor:pointer; display:flex; flex-direction:column; transition:transform .12s,border-color .15s,box-shadow .15s; }
.card:hover{ transform:translateY(-3px); border-color:rgba(30,144,255,.5); box-shadow:0 14px 30px -16px #000,0 0 22px -10px var(--glow); }
.view{ position:relative; width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:repeating-conic-gradient(#11161f 0% 25%,#161c28 0% 50%) 50%/22px 22px; }
.view canvas,.view svg,.view video,.view img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.view .icon{ font-size:44px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.view .ph{ color:var(--mut); font-size:11px; text-align:center; padding:8px; }
.folder .view{ background:radial-gradient(120% 120% at 50% 0%,#13203a,#0c1320); }
.meta{ padding:8px 10px; border-top:1px solid var(--line); }
.nm{ font-size:11.5px; word-break:break-all; line-height:1.25; max-height:2.5em; overflow:hidden; }
.sub{ display:flex; justify-content:space-between; align-items:center; margin-top:5px; }
.badge{ padding:1.5px 7px; border-radius:5px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.b-svga{ background:#3a2a52; color:#caa9ff; } .b-mp4,.b-webm,.b-mov,.b-m4v{ background:#1c3552; color:#9fd0ff; }
.b-lottie,.b-json{ background:#123a2c; color:#86e7b8; } .b-webp,.b-gif{ background:#52351a; color:#ffc890; }
.b-png,.b-jpg,.b-jpeg,.b-svg,.b-bmp{ background:#1d3a4f; color:#8fe0ff; }
.b-mp3,.b-wav,.b-ogg,.b-m4a,.b-aac{ background:#3a1f3a; color:#f0a8e8; }
.b-dir{ background:#243049; color:#cdd7e6; } .b-file{ background:#222b3d; color:#9aa6bc; }
.dl{ color:var(--mut); font-size:13px; padding:2px 4px; border-radius:6px; }
.dl:hover{ color:var(--acc2); background:#0e1626; }

/* ---------- modal ---------- */
#modal{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:rgba(4,6,11,.9); backdrop-filter:blur(6px); }
#modal.on{ display:flex; }
.modal-close{ position:absolute; top:18px; right:22px; background:#121a29; border:1px solid var(--line2);
  color:#fff; width:38px; height:38px; border-radius:10px; font-size:16px; }
.modal-close:hover{ border-color:var(--acc); }
.modal-box{ width:min(86vw,560px); }
.modal-view{ width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:repeating-conic-gradient(#11161f 0 25%,#161c28 0 50%) 50%/30px 30px; border-radius:16px; border:1px solid var(--line2); }
.modal-view video,.modal-view img,.modal-view canvas,.modal-view svg{ max-width:100%; max-height:100%; object-fit:contain; }
.modal-view pre{ margin:0; width:100%; height:100%; overflow:auto; padding:14px; font-size:12px;
  background:#0a0f1a; color:#cdd7e6; white-space:pre-wrap; word-break:break-word; }
.modal-name{ text-align:center; margin-top:12px; font-size:13px; word-break:break-all; color:#cdd7e6; }
.modal-name a{ margin-left:8px; }

/* ---------- responsive ---------- */
@media (max-width:760px){
  #app{ grid-template-columns:1fr; }
  #sidebar{ flex-direction:row; align-items:center; overflow-x:auto; padding:12px; }
  #sidebar .side-label{ display:none; }
  .proj-list{ flex-direction:row; flex:1; }
  .proj{ min-width:150px; }
  .logout{ white-space:nowrap; }
  .search{ width:130px; } .search:focus{ width:150px; }
}