/* =============================================
   CloudDrive — Master Stylesheet
   ============================================= */
:root {
  --bg:#070b14;--bg2:#0d1220;--bg3:#141929;--bg4:#1c2336;--bg5:#232b40;
  --blue:#3b82f6;--indigo:#6366f1;--cyan:#06b6d4;--green:#10b981;
  --amber:#f59e0b;--rose:#f43f5e;--violet:#8b5cf6;
  --text:#e8eeff;--text2:#8892b0;--text3:#445577;
  --border:rgba(99,102,241,.15);--bdrH:rgba(99,102,241,.4);
  --r:14px;--r2:20px;--sb:255px;--tb:64px;--sh:0 8px 40px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px;}

/* AUTH */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;position:relative;overflow:hidden;}
.auth-orb{position:fixed;border-radius:50%;pointer-events:none;}
.orb1{width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.15),transparent 70%);top:-100px;left:-100px;}
.orb2{width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,.1),transparent 70%);bottom:-80px;right:-80px;}
.login-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r2);padding:40px 36px;width:100%;max-width:420px;position:relative;z-index:1;}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.logo-icon{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--indigo),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.login-logo span{font-family:'Syne',sans-serif;font-size:1.35rem;font-weight:800;}
.login-tabs{display:flex;background:var(--bg3);border-radius:10px;padding:3px;margin-bottom:22px;}
.ltab{flex:1;text-align:center;padding:8px;border-radius:7px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--text2);transition:all .18s;user-select:none;}
.ltab.active{background:var(--bg4);color:var(--text);}
.login-err{background:rgba(244,63,94,.1);border:1.5px solid rgba(244,63,94,.25);border-radius:9px;padding:10px 13px;color:var(--rose);font-size:.82rem;margin-bottom:14px;display:none;}
.login-err.show{display:block;}
.fg{margin-bottom:15px;}
.flbl{display:block;font-size:.75rem;font-weight:700;color:var(--text2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.7px;}
.finp{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s;}
.finp:focus{border-color:var(--indigo);}
.finp::placeholder{color:var(--text3);}
select.finp{cursor:pointer;}
.btn-login{width:100%;padding:13px;background:linear-gradient(135deg,var(--indigo),var(--blue));border:none;border-radius:11px;color:#fff;font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.3px;margin-top:2px;}
.btn-login:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 22px rgba(99,102,241,.4);}
.login-hint{text-align:center;margin-top:16px;font-size:.78rem;color:var(--text3);}

/* APP LAYOUT */
body:not(.auth-body){display:flex;flex-direction:column;height:100vh;overflow:hidden;}
#topbar{height:var(--tb);background:rgba(7,11,20,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 18px;position:relative;z-index:100;flex-shrink:0;}
.t-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;color:var(--text);}
.t-search-wrap{flex:1;max-width:360px;position:relative;}
.t-si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;}
.t-search{width:100%;background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;padding:8px 14px 8px 34px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.85rem;outline:none;transition:border-color .2s;}
.t-search:focus{border-color:var(--indigo);}
.t-search::placeholder{color:var(--text3);}
.t-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.t-btn{background:var(--bg3);border:1.5px solid var(--border);border-radius:9px;width:35px;height:35px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:all .18s;text-decoration:none;}
.t-btn:hover{background:var(--bg4);color:var(--text);}
.t-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;position:relative;color:#fff;text-decoration:none;}
.t-avatar-badge{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--green);border:2px solid var(--bg);}
#menu-tog{display:none;background:var(--bg3);border:1.5px solid var(--border);border-radius:8px;width:35px;height:35px;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);}
#body-row{display:flex;flex:1;overflow:hidden;}
#sidebar{width:var(--sb);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:14px 9px;overflow-y:auto;transition:transform .3s;z-index:90;}
.s-section{margin-bottom:18px;}
.s-lbl{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text3);padding:0 8px;margin-bottom:8px;}
.s-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;cursor:pointer;color:var(--text2);font-size:.84rem;font-weight:500;transition:all .15s;user-select:none;text-decoration:none;}
.s-item:hover{background:var(--bg3);color:var(--text);}
.s-item.active{background:rgba(99,102,241,.14);color:#a5b4fc;}
.s-badge{margin-left:auto;background:var(--indigo);color:#fff;font-size:.62rem;font-weight:700;padding:2px 6px;border-radius:8px;min-width:18px;text-align:center;}
.s-count{margin-left:auto;color:var(--text3);font-size:.73rem;}
.s-bar{height:5px;background:var(--bg4);border-radius:3px;}
.s-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--indigo),var(--cyan));transition:width .5s;}
#main{flex:1;overflow-y:auto;padding:22px 26px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .18s;border:none;outline:none;white-space:nowrap;text-decoration:none;}
.btn-prim{background:linear-gradient(135deg,var(--indigo),var(--blue));color:#fff;}
.btn-prim:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 5px 18px rgba(99,102,241,.4);}
.btn-sec{background:var(--bg3);color:var(--text2);border:1.5px solid var(--border);}
.btn-sec:hover{background:var(--bg4);color:var(--text);}
.btn-danger{background:rgba(244,63,94,.1);color:var(--rose);border:1.5px solid rgba(244,63,94,.2);}
.btn-wa{background:#25D366;color:#fff;border:none;}
.btn-wa:hover{opacity:.9;}

/* TOOLBAR */
#toolbar{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap;}
#tb-right{margin-left:auto;display:flex;gap:8px;align-items:center;}
.view-tog{background:var(--bg3);border:1.5px solid var(--border);border-radius:9px;display:flex;overflow:hidden;}
.vbtn{padding:7px 12px;cursor:pointer;color:var(--text3);font-size:.85rem;transition:all .15s;border:none;background:none;}
.vbtn.active{background:var(--bg4);color:var(--text);}

/* BREADCRUMB */
#breadcrumb{display:flex;align-items:center;gap:5px;margin-bottom:16px;flex-wrap:wrap;}
.b-item{font-size:.84rem;color:var(--text2);cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;text-decoration:none;}
.b-item:hover{background:var(--bg3);color:var(--text);}
.b-item.cur{color:var(--text);font-weight:600;}
.b-sep{color:var(--text3);font-size:.8rem;}

/* FILE SECTIONS */
.fm-section{margin-bottom:26px;}
.fm-sec-hdr{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.fm-sec-hdr h3{font-family:'Syne',sans-serif;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);}
.fm-cnt{font-size:.73rem;color:var(--text3);background:var(--bg3);padding:2px 8px;border-radius:8px;border:1px solid var(--border);}
.fm-sec-line{flex:1;height:1px;background:var(--border);}

/* FILE GRID */
.fg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:11px;}
.fg-grid.list-v{display:flex;flex-direction:column;gap:3px;}
.f-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r);padding:15px 13px;cursor:pointer;transition:all .18s;position:relative;user-select:none;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--text);}
.f-card:hover{background:var(--bg3);border-color:var(--bdrH);transform:translateY(-2px);box-shadow:var(--sh);}
.f-card.sel{background:rgba(99,102,241,.1);border-color:var(--indigo);}
.f-card.drag-over-folder{background:rgba(245,158,11,.1)!important;border-color:var(--amber)!important;transform:scale(1.03)!important;}
.f-card.dragging{opacity:.35;}
.fi{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;}
.fn{font-size:.78rem;font-weight:600;text-align:center;word-break:break-all;color:var(--text);max-width:100%;line-height:1.3;}
.fm-sub{font-size:.68rem;color:var(--text3);}
.f-menu{position:absolute;top:7px;right:7px;opacity:0;background:var(--bg5);border:none;border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:opacity .15s;font-size:1rem;line-height:1;}
.f-card:hover .f-menu{opacity:1;}
.fg-grid.list-v .f-card{flex-direction:row;align-items:center;padding:9px 13px;border-radius:9px;gap:12px;transform:none!important;}
.fg-grid.list-v .f-card:hover{transform:none!important;}
.fg-grid.list-v .fi{width:36px;height:36px;font-size:1.1rem;flex-shrink:0;border-radius:8px;}
.fg-grid.list-v .fn{text-align:left;flex:1;}
.fg-grid.list-v .fm-sub{min-width:60px;text-align:right;}
.fg-grid.list-v .f-menu{position:static;opacity:1;flex-shrink:0;}
.ic-folder{background:rgba(245,158,11,.12);}
.ic-pdf{background:rgba(244,63,94,.12);}
.ic-img{background:rgba(6,182,212,.12);}
.ic-doc{background:rgba(59,130,246,.12);}
.ic-xls{background:rgba(16,185,129,.12);}
.ic-vid{background:rgba(139,92,246,.12);}
.ic-aud{background:rgba(251,113,133,.12);}
.ic-zip{background:rgba(156,163,175,.12);}
.ic-oth{background:rgba(99,102,241,.12);}

/* EMPTY */
.empty-sec{text-align:center;padding:36px 20px;color:var(--text3);background:var(--bg2);border:1.5px dashed var(--border);border-radius:var(--r2);}
.ei{font-size:2.5rem;opacity:.3;margin-bottom:10px;}
.empty-sec p{font-size:.83rem;}
.empty-msg{color:var(--text3);font-size:.83rem;text-align:center;padding:14px;}
.empty-msg a{color:var(--indigo);}

/* DASHBOARD */
.dash-greeting{margin-bottom:22px;}
.dash-greeting h2{font-family:'Syne',sans-serif;font-size:1.45rem;font-weight:700;margin-bottom:4px;}
.dash-greeting p{color:var(--text2);font-size:.88rem;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
.stat-card{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r2);padding:20px;transition:all .2s;position:relative;overflow:hidden;}
.stat-card:hover{transform:translateY(-3px);border-color:var(--bdrH);box-shadow:var(--sh);}
.stat-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:12px;}
.stat-val{font-family:'Syne',sans-serif;font-size:1.7rem;font-weight:800;line-height:1;margin-bottom:4px;}
.stat-lbl{font-size:.78rem;color:var(--text2);font-weight:500;}
.stat-sub{font-size:.71rem;color:var(--text3);margin-top:3px;}
.stat-card.c-blue .stat-icon{background:rgba(59,130,246,.15);}.stat-card.c-blue .stat-val{color:var(--blue);}
.stat-card.c-violet .stat-icon{background:rgba(139,92,246,.15);}.stat-card.c-violet .stat-val{color:var(--violet);}
.stat-card.c-indigo .stat-icon{background:rgba(99,102,241,.15);}.stat-card.c-indigo .stat-val{color:var(--indigo);}
.stat-card.c-cyan .stat-icon{background:rgba(6,182,212,.15);}.stat-card.c-cyan .stat-val{color:var(--cyan);}
.stat-card.c-green .stat-icon{background:rgba(16,185,129,.15);}.stat-card.c-green .stat-val{color:var(--green);}
.stat-card.c-amber .stat-icon{background:rgba(245,158,11,.15);}.stat-card.c-amber .stat-val{color:var(--amber);}
.stat-card.c-rose .stat-icon{background:rgba(244,63,94,.15);}.stat-card.c-rose .stat-val{color:var(--rose);}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px;}
.dash-panel{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r2);padding:20px;}
.dash-panel h3{font-family:'Syne',sans-serif;font-size:.92rem;font-weight:700;margin-bottom:14px;}
.type-list{display:flex;flex-direction:column;gap:10px;}
.type-row{display:flex;align-items:center;gap:10px;}
.type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.type-name{font-size:.82rem;color:var(--text2);flex:1;}
.type-bar-wrap{flex:2;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;}
.type-bar{height:100%;border-radius:3px;transition:width .6s;}
.type-cnt{font-size:.73rem;color:var(--text3);min-width:24px;text-align:right;}
.recent-list{display:flex;flex-direction:column;gap:5px;}
.recent-row{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;transition:background .15s;cursor:pointer;}
.recent-row:hover{background:var(--bg3);}
.recent-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.recent-info{flex:1;min-width:0;}
.recent-name{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.recent-meta{font-size:.71rem;color:var(--text3);}
.recent-size{font-size:.73rem;color:var(--text3);white-space:nowrap;}

/* MODALS */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;}
.mc{background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r2);padding:26px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;}
.mc.lg{max-width:820px;}
.mc h2{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin-bottom:16px;}
.mf{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}
#up-zone{border:2px dashed var(--border);border-radius:14px;padding:34px 20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:13px;}
#up-zone:hover,#up-zone.dov{border-color:var(--indigo);background:rgba(99,102,241,.05);}
.up-i{font-size:2rem;margin-bottom:9px;}
#up-zone p{color:var(--text2);font-size:.87rem;}
#up-zone small{color:var(--text3);font-size:.75rem;}
.prog-item{margin-bottom:9px;}
.prog-lbl{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text2);margin-bottom:4px;}
.prog-bar{height:5px;background:var(--bg4);border-radius:3px;}
.prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--indigo),var(--cyan));transition:width .3s;}
.share-row{display:flex;gap:8px;margin-bottom:11px;}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#25D366;color:#fff;border:none;border-radius:10px;padding:11px 16px;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;transition:opacity .2s;}
.wa-btn:hover{opacity:.9;}
#prev-content{max-height:62vh;overflow:auto;background:var(--bg);border-radius:10px;}
#prev-content img{max-width:100%;border-radius:8px;display:block;}
#prev-content iframe{width:100%;height:58vh;border:none;border-radius:8px;}
#prev-content video{width:100%;border-radius:8px;display:block;}

/* CTX */
#ctx{position:fixed;background:var(--bg3);border:1.5px solid var(--border);border-radius:12px;padding:6px;z-index:500;min-width:188px;box-shadow:var(--sh);}
.cx{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:.83rem;color:var(--text2);transition:all .12s;}
.cx:hover{background:var(--bg4);color:var(--text);}
.cx.danger{color:var(--rose);}
.cx.danger:hover{background:rgba(244,63,94,.1);}
.cx-sep{height:1px;background:var(--border);margin:4px 0;}

/* NOTIF */
#notifs{position:fixed;bottom:22px;right:22px;z-index:1000;display:flex;flex-direction:column;gap:7px;pointer-events:none;}
.ntf{background:var(--bg3);border:1.5px solid var(--border);border-radius:11px;padding:11px 15px;font-size:.83rem;color:var(--text);display:inline-flex;align-items:center;gap:9px;pointer-events:all;box-shadow:var(--sh);animation:nin .25s ease;}
.ntf.ok{border-color:rgba(16,185,129,.4);}
.ntf.err{border-color:rgba(244,63,94,.4);}
@keyframes nin{from{transform:translateX(80px);opacity:0}to{transform:translateX(0);opacity:1}}

/* RESPONSIVE */
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}.dash-row{grid-template-columns:1fr;}}
@media(max-width:768px){
  :root{--sb:0px;}
  #sidebar{position:fixed;left:0;top:var(--tb);height:calc(100vh - var(--tb));width:260px;transform:translateX(-260px);}
  #sidebar.open{transform:translateX(0);box-shadow:8px 0 32px rgba(0,0,0,.6);}
  #menu-tog{display:flex;}
  #main{padding:14px 14px 82px;}
  .t-search-wrap{display:none;}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:9px;}
  .fg-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));}
  .mc.lg{max-width:96vw;}
  .btn span{display:none;}
  .btn{padding:9px 10px;}
  #mobile-nav{display:flex;}
}
@media(min-width:769px){#mobile-nav{display:none;}}
#mobile-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(7,11,20,.95);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:90;padding:7px 0 10px;display:none;}
.mn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:5px;color:var(--text3);font-size:.6rem;transition:color .15s;text-decoration:none;}
.mn-item.active{color:#a5b4fc;}
#sb-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:89;}
#sb-ov.show{display:block;}