:root{
  --bg:#0b1220;
  --panel:#0f1b33;
  --panel2:#0d162c;
  --text:#e8eefc;
  --muted:#9fb0d0;
  --line:#1e2b4e;
  --blue:#2563eb;
  --blue2:#1d4ed8;
  --danger:#ef4444;
  --ok:#22c55e;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 14px;
  --radius2: 18px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1100px 700px at 20% -20%, rgba(37,99,235,.35), transparent 60%),
              radial-gradient(900px 700px at 90% 0%, rgba(34,197,94,.12), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family:var(--font);
}
a{color:inherit; text-decoration:none}
.hidden{display:none !important}
.grow{flex:1}
.sep{width:1px;height:28px;background:var(--line);margin:0 8px}

#app{height:100%;display:flex;flex-direction:column}
.topbar{
  height:62px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.brand{display:flex;align-items:center;gap:10px;min-width:230px}
.brand.small{min-width:auto}
.logo{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(59,130,246,1));
  box-shadow: 0 10px 20px rgba(37,99,235,.35);
}
.brandtext .title{font-weight:700;letter-spacing:.2px}
.brandtext .sub{font-size:12px;color:var(--muted);margin-top:1px}

.searchwrap{flex:1;display:flex;justify-content:center}
.search{
  width:min(720px, 100%);
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}
.search:focus{border-color:rgba(37,99,235,.6); box-shadow:0 0 0 4px rgba(37,99,235,.18)}

.topactions{display:flex;align-items:center;gap:8px}
.btn{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color:var(--text);
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  user-select:none;
}
.btn:hover{background: rgba(255,255,255,0.10)}
.btn:active{transform:translateY(1px)}
.btn.primary{background: linear-gradient(180deg, var(--blue), var(--blue2)); border-color: rgba(37,99,235,.6)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.35)}
.btn.small{padding:7px 10px; border-radius:10px; font-size:13px}
.btn.icon{padding:9px 10px; width:40px; justify-content:center}

.layout{flex:1;display:flex;min-height:0}
.sidebar{
  width:250px;
  border-right:1px solid var(--line);
  background: rgba(15,27,51,.35);
  backdrop-filter: blur(10px);
  display:flex;flex-direction:column;
}
.nav{padding:10px}
.navitem{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  color:var(--text);
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  display:flex;align-items:center;gap:10px;
}
.navitem:hover{background: rgba(255,255,255,0.06)}
.navitem.active{background: rgba(37,99,235,.18); border:1px solid rgba(37,99,235,.35)}
.navsep{height:10px}
.sidefoot{margin-top:auto;padding:10px;border-top:1px solid var(--line)}
.storage{font-size:12px;color:var(--muted)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.crumbs{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.breadcrumb{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.crumb{
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  font-size:13px;
}
.crumb:hover{background: rgba(255,255,255,0.10)}
.crumbsep{color:var(--muted);font-size:12px}
.selectionbar{display:flex;align-items:center;gap:8px}
.selectionbar #selCount{color:var(--muted);font-size:13px;margin-right:6px}

.items{flex:1;overflow:auto;padding:14px;gap:12px}
.items.grid{display:grid;grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));align-content:start}
.items.list{display:flex;flex-direction:column;gap:0;padding:0}
.listheader{
  display:grid;
  grid-template-columns: 1fr 160px 120px;
  padding:10px 14px;
  color:var(--muted);
  font-size:12px;
  border-bottom:1px solid var(--line);
}
.card{
  background: rgba(15,27,51,.55);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.item{
  padding:12px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:flex-start;
  position:relative;
}
.item:hover{border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04)}
.item.selected{outline:3px solid rgba(37,99,235,.35)}
.item .thumb{
  width:54px;height:54px;border-radius:14px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.item .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.item .meta{min-width:0}
.item .name{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .sub{font-size:12px;color:var(--muted);margin-top:4px}
.item .row{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--muted);font-size:12px}
.item .check{
  position:absolute;top:10px;right:10px;
  width:20px;height:20px;border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  display:none;align-items:center;justify-content:center;
}
.item.selectmode .check{display:flex}
.item.selected.selectmode .check{background: rgba(37,99,235,.35); border-color: rgba(37,99,235,.5)}

.item.listrow{
  display:grid;
  grid-template-columns: 1fr 160px 120px;
  padding:10px 14px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background: transparent;
  box-shadow:none;
  border-radius:0;
  border-left:none;border-right:none;border-top:none;
}
.item.listrow:hover{background: rgba(255,255,255,0.04)}
.item.listrow .left{
  display:flex;align-items:center;gap:10px;min-width:0
}
.item.listrow .thumb{width:30px;height:30px;border-radius:10px}
.item.listrow .name{font-weight:600}
.item.listrow .sub{margin-top:0}
.item.listrow .mod{color:var(--muted);font-size:13px}
.item.listrow .size{color:var(--muted);font-size:13px;text-align:right}
.item.listrow .check{top:50%;transform:translateY(-50%);right:12px}

.empty{
  padding:40px;
  text-align:center;
  color:var(--muted);
}
.emptyicon{
  width:76px;height:76px;border-radius:24px;
  background: rgba(37,99,235,.18);
  border:1px solid rgba(37,99,235,.35);
  margin:0 auto 12px auto;
}
.emptytitle{color:var(--text);font-weight:700;font-size:18px}
.emptysub{margin-top:6px;font-size:13px}

.details{
  width:320px;
  border-left:1px solid var(--line);
  background: rgba(15,27,51,.35);
  backdrop-filter: blur(10px);
  display:flex;flex-direction:column;
}
.detailstop{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
.detailstitle{font-weight:700}
.detailsbody{padding:12px;overflow:auto}
.kv{display:grid;grid-template-columns:90px 1fr;gap:8px 10px;font-size:13px}
.kv .k{color:var(--muted)}
.detailactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pill{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);font-size:12px;color:var(--muted)}

.modal{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  z-index:50;
}
.modalback{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(6px)}
.modalcard{
  position:relative;
  width:min(520px, calc(100% - 24px));
  border-radius: var(--radius2);
  background: rgba(15,27,51,.92);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  padding:14px;
}
.modaltitle{font-weight:800;font-size:16px;margin-bottom:10px}
.modalbody{color:var(--muted);font-size:13px}
.modalactions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.input{
  width:100%;
  margin-top:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color:var(--text);
  outline:none;
}
.input:focus{border-color:rgba(37,99,235,.6); box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.viewer{
  position:fixed;inset:0;
  z-index:60;
  display:flex;flex-direction:column;
}
.viewerback{position:absolute;inset:0;background:rgba(0,0,0,.70);backdrop-filter: blur(6px)}
.viewerbar{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  background: rgba(15,27,51,.75);
}
.viewername{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
.viewercontent{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow:auto;
}
.viewercontent img, .viewercontent video, .viewercontent iframe{
  max-width: min(1100px, 96vw);
  max-height: calc(100vh - 110px);
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  background:#000;
}
.viewercontent iframe{width:min(1100px, 96vw); height: calc(100vh - 140px); background:#111}

.sharepage{background: radial-gradient(1100px 700px at 25% -20%, rgba(37,99,235,.35), transparent 60%), var(--bg)}
.sharewrap{max-width:980px;margin:0 auto;padding:18px}
.sharehead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sharecard{border-radius: var(--radius2); background: rgba(15,27,51,.60); border:1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow); overflow:hidden}
.sharemeta{padding:14px;border-bottom:1px solid rgba(255,255,255,0.08)}
.sharetitle{font-weight:800;font-size:18px}
.sharesub{color:var(--muted);font-size:13px;margin-top:4px}
.sharepreview{padding:14px;display:flex;justify-content:center}
.sharepreview img,.sharepreview video,.sharepreview iframe{max-width:100%;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.12);box-shadow: var(--shadow);background:#000}
.sharepreview iframe{width:100%;height:70vh}
.sharelist{border-radius: var(--radius2); background: rgba(15,27,51,.60); border:1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow); padding:12px}
.shareitem{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px}
.shareitem:hover{background:rgba(255,255,255,0.05)}
.shareitemname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted{opacity:.85}

.i{display:inline-block;width:16px;height:16px}
.i:before{content:"";display:block;width:16px;height:16px;background-size:16px 16px;background-repeat:no-repeat;filter: drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.i-grid:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e8eefc"><path d="M2 2h5v5H2V2zm7 0h5v5H9V2zM2 9h5v5H2V9zm7 0h5v5H9V9z"/></svg>')}
.i-list:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e8eefc"><path d="M2 3h12v2H2V3zm0 4h12v2H2V7zm0 4h12v2H2v-2z"/></svg>')}
.i-folder:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e8eefc"><path d="M2 4a2 2 0 0 1 2-2h3l2 2h5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4z"/></svg>')}
.i-file:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e8eefc"><path d="M4 2h6l4 4v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm6 1.5V6h2.5L10 3.5z"/></svg>')}
.i-share:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e8eefc"><path d="M12 11a2 2 0 1 0-1.732-3H5.732a2 2 0 1 0 0 1h4.536A2 2 0 0 0 12 11zM6 5a2 2 0 1 0-1.732-3h6.536A2 2 0 1 0 12 5H6z"/></svg>')}
.i-clock:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e8eefc"><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm1-12H7v5l4 2 .8-1.6L9 7.8V4z"/></svg>')}
.i-trash:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e8eefc"><path d="M6 2h4l1 1h3v2H2V3h3l1-1zm-2 5h8l-1 9H5L4 7z"/></svg>')}
.i-x:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23e8eefc"><path d="M3.2 3.2 8 8l4.8-4.8 1.2 1.2L9.2 9.2l4.8 4.8-1.2 1.2L8 10.4l-4.8 4.8-1.2-1.2 4.8-4.8L2 4.4z"/></svg>')}

@media (max-width: 980px){
  .details{display:none !important}
}
@media (max-width: 720px){
  .brand{min-width:auto}
  .brandtext .sub{display:none}
  .topactions #sortBtn{display:none}
  .topactions #accountBtn{display:none}
  .sidebar{width:210px}
  .listheader{grid-template-columns:1fr 120px 80px}
  .item.listrow{grid-template-columns:1fr 120px 80px}
}
@media (max-width: 560px){
  .sidebar{display:none}
  .topbar{gap:10px}
  .searchwrap{justify-content:flex-start}
  .viewername{max-width:40vw}
}