/* Fusium Drive — design ported from the Fusium Drive mock (Object Sans, navy/blue light theme). */
@font-face { font-family:'Object Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/ObjectSans-Regular.woff2') format('woff2'),url('fonts/ObjectSans-Regular.woff') format('woff'); }
@font-face { font-family:'Object Sans'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/ObjectSans-Regular.woff2') format('woff2'),url('fonts/ObjectSans-Regular.woff') format('woff'); }
@font-face { font-family:'Object Sans'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/ObjectSans-Bold.woff2') format('woff2'),url('fonts/ObjectSans-Bold.woff') format('woff'); }
@font-face { font-family:'Object Sans'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/ObjectSans-Bold.woff2') format('woff2'),url('fonts/ObjectSans-Bold.woff') format('woff'); }
@font-face { font-family:'Object Sans'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/ObjectSans-Heavy.woff2') format('woff2'),url('fonts/ObjectSans-Heavy.woff') format('woff'); }
@font-face { font-family:'Object Sans'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/ObjectSans-Slanted.woff2') format('woff2'); }

:root{
  --bg:#E7ECEF; --navy:#274C77; --navy-dark:#1F3C61; --blue:#6096BA; --blue-light:#A3CEF1;
  --ink:#233248; --muted:#6E7E8E; --muted2:#9DA9B5; --muted3:#A6B2BD;
  --panel:#fff; --fill:#F2F5F8; --fill2:#EBF1F6; --fill3:#E4EDF4;
  --line:rgba(39,76,119,.12); --line2:rgba(39,76,119,.2); --err:#C0392B;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{font-family:'Object Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
input,button,textarea,select{font-family:inherit;}
::selection{background:rgba(96,150,186,.28);}
.hidden{display:none !important;}
a{color:#346089;}
@keyframes db-fade{from{opacity:0}to{opacity:1}}
@keyframes db-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes db-rise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
@keyframes db-shimmer{0%{background-position:-380px 0}100%{background-position:380px 0}}
@keyframes db-spin{to{transform:rotate(360deg)}}
.shimmer{background:linear-gradient(90deg,#DCE3E8 0%,#EDF1F4 50%,#DCE3E8 100%);background-size:760px 100%;animation:db-shimmer 1.4s linear infinite;}
.spin{display:inline-block;width:17px;height:17px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:db-spin .7s linear infinite;}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.04fr 1fr;background:var(--bg);}
.brandpanel{position:relative;background:var(--navy);color:#EAF1F7;padding:52px 56px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
.brandpanel .topbar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--blue-light);}
.brandpanel .blob1{position:absolute;right:-120px;bottom:-120px;width:380px;height:380px;border-radius:50%;background:rgba(163,206,241,.1);}
.brandpanel .blob2{position:absolute;right:70px;top:-90px;width:240px;height:240px;border-radius:50%;background:rgba(96,150,186,.22);}
.brandlogo{display:flex;align-items:baseline;gap:11px;position:relative;}
.brandlogo .name{font-size:25px;font-weight:800;letter-spacing:-.03em;}
.brandlogo .tag{font-size:10.5px;font-weight:700;letter-spacing:.32em;color:#9DBFDA;text-transform:uppercase;}
.brand-kicker{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#8FB4D4;margin-bottom:26px;}
.brand-h1{font-weight:800;font-size:54px;line-height:1.03;letter-spacing:-.035em;margin:0;}
.brand-h1 em{color:var(--blue-light);font-style:normal;}
.brand-sub{margin:28px 0 0;font-size:15.5px;line-height:1.6;color:#C3D6E7;max-width:36ch;}
.brand-foot{position:relative;display:flex;justify-content:space-between;align-items:flex-end;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#7FA6C6;}
.authwrap{display:flex;align-items:center;justify-content:center;padding:44px 28px;}
.authcard{width:100%;max-width:384px;animation:db-rise .5s cubic-bezier(.2,.7,.2,1) both;}
.mobilebrand{display:none;align-items:baseline;gap:10px;margin-bottom:30px;}
.mobilebrand .name{font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--navy);}
.mobilebrand .tag{font-size:10px;font-weight:700;letter-spacing:.3em;color:#8B97A3;text-transform:uppercase;}
.auth-kicker{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#8B97A3;margin-bottom:14px;}
.auth-h2{font-weight:800;margin:0 0 8px;font-size:33px;line-height:1.05;letter-spacing:-.03em;color:var(--ink);}
.auth-p{margin:0 0 28px;font-size:14.5px;color:var(--muted);}
.field-label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.field{width:100%;height:48px;padding:0 15px;border-radius:10px;border:1px solid var(--line2);background:#fff;font-size:14.5px;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease;}
.field:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(96,150,186,.22);}
.field.err{border-color:var(--err);}
.field-err{font-size:12px;color:var(--err);margin-top:7px;}
.row-end{display:flex;justify-content:flex-end;margin:14px 0 20px;}
.link{font-size:13px;color:#346089;text-decoration:none;font-weight:600;cursor:pointer;background:none;border:none;padding:0;}
.btn-primary{width:100%;height:50px;border:none;border-radius:10px;background:var(--navy);color:#fff;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s ease,transform .08s ease;box-shadow:0 12px 26px -12px rgba(39,76,119,.7);}
.btn-primary:hover{background:var(--navy-dark);}
.btn-primary:active{transform:translateY(1px);}
.btn-primary:disabled{opacity:.7;cursor:default;}
.auth-foot{text-align:center;margin-top:18px;font-size:13px;color:var(--muted);}
.auth-note{margin:18px 0 0;font-size:12.5px;color:var(--muted2);line-height:1.5;text-align:center;}

/* ---------- App shell ---------- */
.app{display:flex;height:100vh;width:100%;background:var(--bg);animation:db-fade .3s ease both;}
.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(20,30,45,.42);z-index:55;}
.sidebar{width:250px;flex:none;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px;}
.sidebar .logo{display:flex;align-items:baseline;gap:9px;padding:2px 8px 24px;}
.sidebar .logo .name{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--navy);}
.sidebar .logo .tag{font-size:9.5px;font-weight:700;letter-spacing:.3em;color:var(--muted2);text-transform:uppercase;}
.side-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted3);padding:0 9px 10px;}
.nav{display:flex;flex-direction:column;gap:1px;}
.navbtn{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:10px 11px;border:none;border-radius:9px;cursor:pointer;font-size:14px;font-weight:600;text-align:left;background:transparent;color:#4A5A6A;transition:background .14s ease,color .14s ease;}
.navbtn:hover{background:#EEF2F5;}
.navbtn.active{background:var(--fill3);color:var(--navy);}
.navbtn .marker{position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--blue);opacity:0;}
.navbtn.active .marker{opacity:1;}
.navbtn svg{flex:none;}
.side-spacer{flex:1;}
.timeline{margin-top:14px;max-height:34vh;overflow:auto;padding-right:4px;}
.timeline .yr{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted3);padding:10px 9px 4px;}
.tlbtn{display:flex;justify-content:space-between;width:100%;background:transparent;color:#4A5A6A;border:0;border-radius:7px;padding:6px 9px;font-size:13px;font-weight:600;cursor:pointer;}
.tlbtn:hover{background:#EEF2F5;}
.tlbtn.active{background:var(--blue);color:#fff;}
.tlbtn .n{color:var(--muted2);}
.tlbtn.active .n{color:#EAF1F7;}
.storage{padding:15px 14px;}
.storage .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.storage .lab{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);}
.storage .pct{font-size:12px;font-weight:600;color:var(--muted);}
.storage .bar{height:5px;border-radius:3px;background:rgba(39,76,119,.12);overflow:hidden;margin-bottom:10px;}
.storage .barfill{height:100%;width:0;background:var(--blue);border-radius:3px;transition:width .4s ease;}
.storage .sub{font-size:12px;font-weight:500;color:var(--muted2);}

.maincol{flex:1;min-width:0;display:flex;flex-direction:column;}
.header{height:66px;flex:none;border-bottom:1px solid var(--line);background:rgba(255,255,255,.82);backdrop-filter:blur(10px);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:5;}
.menubtn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:1px solid rgba(39,76,119,.16);background:#fff;color:var(--ink);cursor:pointer;flex:none;}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;}
.crumb{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.spacer{flex:1;}
.searchwrap{position:relative;display:flex;align-items:center;}
.searchwrap svg{position:absolute;left:12px;pointer-events:none;}
.search{width:220px;height:38px;padding:0 12px 0 34px;border-radius:9px;border:1px solid rgba(39,76,119,.15);background:var(--fill);font-size:13.5px;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;}
.search:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(96,150,186,.2);}
.viewtoggle{display:flex;align-items:center;padding:3px;gap:2px;border-radius:9px;border:1px solid rgba(39,76,119,.15);background:var(--fill);flex:none;}
.vtbtn{width:32px;height:30px;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--muted2);transition:background .14s,color .14s;}
.vtbtn.active{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(39,76,119,.18);}
.iconbtn{height:38px;padding:0 13px;display:flex;align-items:center;gap:8px;border-radius:9px;border:1px solid rgba(39,76,119,.15);background:#fff;color:#4A5A6A;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .14s ease;flex:none;}
.iconbtn:hover{background:var(--fill);}
.avatar{width:38px;height:38px;border-radius:9px;border:none;cursor:pointer;background:var(--navy);color:#EAF1F7;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.popover{position:absolute;right:0;top:46px;z-index:41;background:#fff;border:1px solid rgba(39,76,119,.14);border-radius:12px;box-shadow:0 20px 44px -18px rgba(20,30,45,.4);padding:6px;animation:db-pop .14s ease both;}
.popover .head{padding:9px 10px 11px;border-bottom:1px solid rgba(39,76,119,.1);margin-bottom:5px;}
.popover .head .k{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted3);margin-bottom:4px;}
.popover .head .v{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.popitem{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:none;background:none;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);text-align:left;}
.popitem:hover{background:var(--fill);}
.backdrop-click{position:fixed;inset:0;z-index:40;}

.content{flex:1;overflow-y:auto;padding:30px 30px 64px;}
.content-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:16px;}
.content-head h1{margin:0;font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--ink);}
.count-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);white-space:nowrap;padding-bottom:3px;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:24px 20px;}
.cell{cursor:pointer;transition:transform .14s ease;}
.cell:hover{transform:translateY(-3px);}
.cell .well{position:relative;aspect-ratio:4/3;background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 0 0 1px rgba(39,76,119,.12);transition:box-shadow .16s ease;}
.cell:hover .well{box-shadow:0 12px 30px -16px rgba(20,30,45,.42),0 0 0 1px rgba(39,76,119,.18);}
.cell .well img{position:relative;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s;}
.cell .well img.loaded{opacity:1;}
.play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,30,45,.26);}
.play-badge .circle{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;color:var(--navy);box-shadow:0 6px 18px rgba(0,0,0,.35);}
.cell .name{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:12px 2px 0;}
.cell .meta{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-top:5px;padding:0 2px;}

.listhead{display:flex;align-items:center;gap:16px;padding:0 14px 11px;border-bottom:1px solid rgba(39,76,119,.18);font-size:10px;font-weight:700;color:var(--muted2);letter-spacing:.14em;text-transform:uppercase;}
.listrow{display:flex;align-items:center;gap:16px;padding:12px 14px;cursor:pointer;border-bottom:1px solid rgba(39,76,119,.08);border-radius:8px;transition:background .12s ease;}
.listrow:hover{background:#fff;}
.listrow .nm{flex:1;min-width:0;display:flex;align-items:center;gap:13px;}
.listrow .iconwell{width:34px;height:34px;border-radius:8px;background:var(--fill);display:flex;align-items:center;justify-content:center;flex:none;color:var(--blue);}
.listrow .nm span{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.listmeta{width:150px;font-size:12.5px;font-weight:500;color:#8593A0;}
.listsize{width:92px;text-align:right;font-size:12.5px;font-weight:500;color:#8593A0;}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:76px 20px;animation:db-fade .3s ease both;}
.empty .ic{width:72px;height:72px;border-radius:18px;background:#fff;border:1px solid rgba(39,76,119,.14);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--blue);}
.empty .t{font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);margin-bottom:9px;}
.empty .s{font-size:14px;color:var(--muted);max-width:36ch;line-height:1.55;}
.status{padding:18px;text-align:center;color:var(--muted2);font-size:13px;}

/* ---------- Viewer ---------- */
.viewer{position:fixed;inset:0;z-index:90;background:#15233A;display:flex;flex-direction:column;animation:db-fade .22s ease both;}
.v-top{display:flex;align-items:center;gap:16px;padding:18px 22px;flex:none;z-index:3;}
.v-name{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#EAF1F7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.v-meta{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7E94AC;margin-top:4px;}
.v-idx{font-size:12px;font-weight:600;letter-spacing:.12em;color:#7E94AC;flex:none;}
.v-tbtn{width:40px;height:40px;border-radius:9px;border:1px solid rgba(234,241,247,.18);background:rgba(234,241,247,.06);color:#EAF1F7;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .14s ease;}
.v-tbtn:hover{background:rgba(234,241,247,.16);}
.v-tbtn.plain{border:none;}
.v-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px;}
.v-nav{position:absolute;width:50px;height:50px;border-radius:50%;border:1px solid rgba(234,241,247,.18);background:rgba(21,35,58,.6);backdrop-filter:blur(6px);color:#EAF1F7;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:4;transition:background .14s,transform .12s;}
.v-nav:hover{background:rgba(96,150,186,.55);transform:scale(1.06);}
.v-nav.prev{left:20px;} .v-nav.next{right:20px;}
.v-img{max-width:min(100%,1400px);max-height:78vh;object-fit:contain;display:block;border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.2,.7,.2,1);cursor:zoom-in;}
.v-img.zoom{transform:scale(1.7);cursor:zoom-out;}
.v-video{width:100%;max-height:70vh;display:block;background:#000;border-radius:10px;}
.v-cap{flex:none;text-align:center;padding:10px 20px 22px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7E94AC;}

/* ---------- File preview modal ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:80;background:rgba(20,30,45,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;animation:db-fade .16s ease both;}
.modal{width:100%;max-width:372px;background:#fff;border-radius:16px;padding:34px 30px 28px;box-shadow:0 40px 80px -28px rgba(20,30,45,.55);text-align:center;animation:db-rise .26s cubic-bezier(.2,.7,.2,1) both;}
.modal .mic{width:78px;height:78px;border-radius:16px;background:var(--fill);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:#5C6B7A;}
.modal .mname{font-size:19px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.modal .mmeta{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted2);margin-top:8px;}
.modal .mbox{margin-top:22px;padding:15px;border-radius:11px;background:var(--fill);font-size:13px;color:var(--muted);line-height:1.5;}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--navy);color:#EAF1F7;padding:12px 18px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:0 18px 40px -16px rgba(20,30,45,.6);z-index:120;animation:db-pop .18s ease both;max-width:min(90vw,440px);}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .login{grid-template-columns:1fr;}
  .brandpanel{display:none;}
  .mobilebrand{display:flex;}
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .24s ease;z-index:60;box-shadow:0 24px 70px rgba(20,30,45,.3);}
  .sidebar.open{transform:none;}
  .drawer-backdrop.show{display:block;}
  .menubtn{display:inline-flex;}
  .grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .search{width:116px;}
  .listmeta,.listsize{display:none;}
  .hidesm{display:none;}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;}}