:root{--c:#2596be;--c2:#1f7fa1;--bg:#eef7fc;--panel:#ffffffef;--card:#f5fbff;--txt:#0d2d3b;--muted:#43687a;--line:#2596be40;--r:18px;--s:0 16px 35px rgba(22,61,80,.14);--danger:#d14f5f}
*{box-sizing:border-box}
body{margin:0;font-family:Manrope,Segoe UI,sans-serif;font-size:14px;color:var(--txt);background:radial-gradient(circle at 15% 10%,#d7eff8 0,#eef7fc 52%,#dceffa 100%);min-height:100vh;animation:fadeIn .5s ease both}
.bg-orb{position:fixed;filter:blur(55px);z-index:0}.orb-a{width:260px;height:260px;border-radius:50%;background:#2596be33;top:-40px;left:-20px}.orb-b{width:280px;height:280px;border-radius:50%;background:#2ca7d633;right:-50px;bottom:-80px}
.app{position:relative;z-index:1;max-width:1680px;margin:0 auto;padding:20px;display:grid;gap:12px;animation:riseIn .6s cubic-bezier(.22,.61,.36,1) both}
.glass{background:linear-gradient(160deg,#fffffffa,#f1f9fffa);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--s);backdrop-filter:blur(10px)}
.top{padding:14px 16px;display:flex;justify-content:space-between;align-items:center}.top h1{margin:0;font-family:Sora,Manrope,sans-serif;font-size:clamp(1.1rem,1.8vw,1.65rem)}.top-right{display:flex;gap:8px;align-items:center}.user-pill{padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.brand{display:flex;align-items:center;gap:10px}
.brand-gif{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.login-grid{display:grid;grid-template-columns:minmax(320px,560px) minmax(300px,1fr);gap:16px;align-items:stretch}
.login-wrap{max-width:none;padding:24px}.login-head h2{margin:0 0 4px;font-family:Sora,Manrope,sans-serif}.login-head p{margin:0 0 14px;color:var(--muted)}.login-form{display:grid;gap:12px}.login-form label{display:grid;gap:6px;font-size:.95rem}.login-form input{width:100%}
.remember{display:flex !important;align-items:center;gap:8px}
.remember input{width:auto}
.login-summary{padding:24px;display:grid;gap:14px}
.summary-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.summary-item{background:#f5fbff;border:1px solid var(--line);border-radius:12px;padding:12px;display:grid}
.summary-item strong{font-size:1.35rem}
.summary-tree{border:1px solid var(--line);border-radius:12px;padding:12px;background:#f9fcff;max-height:240px;overflow:auto}
.sum-node{padding:5px 6px;border-radius:8px}
.sum-node.child{margin-left:12px;background:#ffffff8f}
input,select,button{border-radius:10px;border:1px solid var(--line);padding:9px 10px;font-size:.86rem;font-family:inherit}input,select{background:#f8fcff;color:var(--txt)}#picker{width:100%;max-width:100%;display:block}
.layout{display:grid;grid-template-columns:minmax(290px,350px) 1fr;gap:16px}
.sidebar,.main{padding:16px}
.sidebar h3{margin:2px 0 10px;font-family:Sora,Manrope,sans-serif;font-size:1.9rem;line-height:1.15}
.drop{border:2px dashed #70bdd88f;border-radius:14px;padding:18px;text-align:center;margin-bottom:10px;background:linear-gradient(180deg,#ffffff,#edf8ff);font-size:1.02rem}
.drop.drag{background:#2596be1f;border-color:#7ad2ee}
.progress{height:10px;background:#0b27421a;border-radius:999px;overflow:hidden;margin-top:10px}.bar{height:100%;width:0;background:linear-gradient(90deg,var(--c),#35c0ef)}.muted{color:var(--muted)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;align-items:stretch}
.actions .btn{width:100%;min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap}
#btnZip,#btnShare{grid-column:1 / -1}
.btn{font-weight:800;cursor:pointer;margin:0;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s cubic-bezier(.2,.8,.2,1),filter .22s ease}.btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 14px rgba(37,150,190,.18);filter:saturate(1.05)}
.btn-primary,.btn-secondary,.btn-danger,.btn-ghost,.btn-ui{background:linear-gradient(120deg,#2f90b2,#36a8cf);color:#fff}
.btn-ui{padding:5px 7px;border-radius:8px;font-size:.76rem;white-space:nowrap}
.btn-ui.danger{background:linear-gradient(120deg,#c14958,#df6674)}
.main-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}.main-actions{display:flex;align-items:center;gap:10px}.breadcrumb{display:flex;gap:6px;flex-wrap:wrap}.crumb{background:#e9f6fc;border:1px solid var(--line);padding:4px 8px;border-radius:10px;font-size:.8rem;cursor:pointer}
.explorer{display:grid;grid-template-columns:1fr;gap:12px}
.tree{border:1px solid var(--line);border-radius:12px;background:#f7fbff;padding:10px;display:grid;gap:8px;align-content:start;margin-top:4px}
.tree-windows{margin-top:14px;background:#0f1722;color:#e7edf5;border-color:#2b3746}
.tree-windows .tree-head{color:#b6c5d8}
.tree-windows .tree-node{background:#111b28;color:#e7edf5;border:1px solid #243346}
.tree-windows .tree-node.active{background:#2a3647}
.tree-head{font-weight:800;color:#1d4c61;padding:4px 6px}
.tree-node{text-align:left;background:#fff;border:1px solid #b8d8e866;padding:7px 10px;border-radius:8px;cursor:pointer;line-height:1.25}
.tree-children{margin-left:10px;padding-left:8px;border-left:2px solid #d8eaf3;display:grid;gap:6px}
.tree-node.child-node{background:#ffffff;border-color:#d8eaf3}
.tree-node,.crumb,.details-row,.glass{transition:all .22s cubic-bezier(.2,.8,.2,1)}
.tree-node:hover,.crumb:hover{transform:translateX(2px)}
.tree-node.active{background:#dff1fb}
.file-list{display:grid;gap:8px}
.details-view{border:1px solid var(--line);border-radius:12px;background:#fafdff;padding:10px}
.upload-bar{display:flex;justify-content:flex-end;margin-bottom:8px}
.upload-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.upload-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.upload-actions .btn{width:auto;white-space:nowrap}
.picker-wrap{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;background:#eef8fd;border:1px solid var(--line);border-radius:10px;font-weight:700}
.picker-wrap input{padding:0;border:none;background:transparent;font-size:.84rem}
.details-head,.details-row{display:grid;grid-template-columns:36px minmax(260px,1.5fr) 120px 120px 180px 220px;gap:10px;align-items:center}
.details-head > span,.details-row > span{min-width:0}
.col-select{display:flex;justify-content:center}
.col-actions{min-width:200px;max-width:220px}
.col-actions .row-actions{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto}
.col-actions .row-actions .btn{flex:0 0 auto}
.details-head{font-weight:800;color:#1d4c61;border-bottom:1px solid var(--line);padding-bottom:8px}
.details-row{padding:8px 0;border-bottom:1px solid #2596be20}
.icon-btn,.name-link{background:none;border:none;padding:0;text-align:left;cursor:pointer;color:#0d2d3b}
.name-link{font-weight:700}
.row-actions{display:flex;gap:4px;flex-wrap:nowrap}
.site-footer{padding:14px 20px;text-align:center;color:#1a5269;font-weight:700;letter-spacing:.2px}
.mobile-dock{display:none}
.context-menu{position:fixed;z-index:2500;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 15px 35px rgba(0,0,0,.2);padding:6px;display:grid;gap:4px}
.context-menu[hidden]{display:none}
.ctx-item{background:#f6fbff;border:1px solid #d6ebf5;border-radius:8px;padding:8px 10px;text-align:left;cursor:pointer}
.card{background:linear-gradient(180deg,#fafdff,#eef8fd);border:1px solid var(--line);padding:12px;border-radius:14px;display:grid;gap:9px}.card .title{display:flex;gap:8px;align-items:flex-start;font-weight:700;line-height:1.3;word-break:break-word}
.folder-card{background:linear-gradient(180deg,#f9fcff,#e9f3ff);border-color:#7eb2d966;box-shadow:inset 0 1px 0 #ffffff}
.file-card{background:linear-gradient(180deg,#ffffff,#f3f8fc)}
.preview{width:100%;aspect-ratio:16/10;background:#08121d;border-radius:10px;object-fit:cover}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.card-actions .full{grid-column:1/-1}.emoji-btn{font-size:1.1rem;line-height:1}
@media (max-width:1080px){.layout{grid-template-columns:1fr}.sidebar h3{font-size:1.6rem}.explorer{grid-template-columns:1fr}.login-grid{grid-template-columns:1fr}}
@media (max-width:700px){body{font-size:13px}.app{padding:10px}.top{align-items:flex-start;gap:8px;flex-direction:column}.top-right{width:100%;justify-content:space-between}.main-head{flex-direction:column;align-items:flex-start}.main-actions{width:100%;justify-content:space-between}.file-list{grid-template-columns:1fr}.brand-gif{width:44px;height:44px}.col-actions{min-width:220px;max-width:240px}.actions{grid-template-columns:1fr}.actions .btn{white-space:normal}}
@media (max-width:820px){
  .app{padding:10px;gap:10px}
  .glass{border-radius:14px}
  .top{padding:12px}
  .top h1{font-size:1.35rem}
  .login-wrap,.login-summary{padding:14px}
  .layout{display:block}
  .sidebar,.main{padding:12px}
  .main-head{position:sticky;top:0;z-index:3;background:#f4fbff;border-radius:10px;padding:8px}
  .details-head{display:none}
  .details-row{grid-template-columns:24px 30px 1fr;grid-template-areas:"chk icon name" ". . meta" ". . actions";gap:8px;padding:10px 0}
  .details-row input[type='checkbox']{grid-area:chk}
  .details-row .icon-btn{grid-area:icon}
  .details-row .name-link{grid-area:name;font-size:.98rem}
  .details-row .col-type,.details-row .col-size{grid-area:meta;font-size:.82rem;color:var(--muted)}
  .row-actions{grid-area:actions}
  .row-actions .btn{min-height:40px}
  .btn,.tree-node,.crumb,input,select{min-height:44px}
  .explorer{grid-template-columns:1fr}
  .tree{max-height:58vh;overflow:auto}
  .site-footer{padding-bottom:74px}
  .mobile-dock{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:#ffffffee;border-top:1px solid var(--line);backdrop-filter:blur(8px)}
  .dock-btn{border:none;border-right:1px solid var(--line);background:transparent;padding:12px 8px;font-weight:800;color:#1a4b60}
  .dock-btn:last-child{border-right:none}
  .dock-btn.active{background:#dff1fb}
}

.modal-overlay{position:fixed;inset:0;background:#03233466;display:grid;place-items:center;z-index:2000;padding:16px}
.modal-overlay[hidden]{display:none}
.modal-card{width:min(520px,100%);background:#ffffff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:12px;box-shadow:0 20px 40px rgba(0,0,0,.18)}
.col-opt{display:flex;align-items:center;gap:8px;padding:6px 2px}
.modal-card h4{margin:0;font-family:Sora,Manrope,sans-serif}
.modal-card p{margin:0;color:var(--muted)}
#modalInput{width:100%}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}
.share-wrap{display:grid;gap:10px}
.share-link{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#f4fbff;word-break:break-all;font-size:.82rem}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.share-btn{display:flex;align-items:center;justify-content:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#eef8fd;color:#0d2d3b;text-decoration:none;font-weight:700}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}