:root{
  --bg:#F6F8FC; --surface:#fff; --text:#0F172A; --muted:#64748B;
  --border:#E2E8F0; --primary:#2F6FED; --primaryH:#255AD0;
  --danger:#EF4444; --shadow: 0 10px 30px rgba(2,6,23,.08);
  --r:12px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--bg)}
a{color:inherit; text-decoration:none}
button, input{font-family:inherit}

.app{display:grid; grid-template-columns: 260px 1fr; min-height:100vh}
.sidebar{
  background:var(--surface); border-right:1px solid var(--border);
  padding:18px 14px; display:flex; flex-direction:column; gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--border); border-radius:12px;
}
.logo{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--primary), #76A3FF);
}
.brand b{font-size:14px}
.nav{display:flex; flex-direction:column; gap:6px}
.nav button{
  width:100%; text-align:left; border:1px solid transparent; background:transparent;
  padding:10px 12px; border-radius:10px; cursor:pointer; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.nav button.active{
  background:rgba(47,111,237,.10);
  border-color: rgba(47,111,237,.22);
  color:var(--text);
}
.nav .dot{
  width:8px; height:8px; border-radius:999px; background:var(--border);
}
.nav button.active .dot{background:var(--primary)}

.storage{
  margin-top:auto;
  border:1px solid var(--border); border-radius:12px; padding:12px;
  background: linear-gradient(180deg, #fff, #fbfcff);
}
.storage .row{display:flex; justify-content:space-between; align-items:center}
.bar{height:8px; background:#EEF2FF; border-radius:999px; overflow:hidden; margin-top:8px}
.bar > i{display:block; height:100%; width:25%; background:var(--primary); border-radius:999px}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid var(--border);
  background:rgba(246,248,252,.85); backdrop-filter: blur(10px);
}
.titlewrap{display:flex; flex-direction:column; gap:2px}
.title{font-size:18px; font-weight:700}
.subtitle{font-size:12px; color:var(--muted)}
.actions{display:flex; gap:10px; align-items:center}
.search{
  width:min(440px, 45vw);
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  padding:10px 12px; border-radius:12px;
}
.search input{border:none; outline:none; width:100%; font-size:14px}
.btn{
  border:none; cursor:pointer; border-radius:12px; padding:10px 14px;
  font-weight:600; font-size:14px;
}
.btn.primary{background:var(--primary); color:#fff}
.btn.primary:hover{background:var(--primaryH)}
.btn.ghost{background:var(--surface); border:1px solid var(--border); color:var(--text)}
.btn.danger{background:#fff; border:1px solid rgba(239,68,68,.35); color:var(--danger)}
.btn.danger:hover{border-color:rgba(239,68,68,.6)}
.pill{
  padding:8px 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); font-size:12px;
}

.content{padding:22px; display:flex; flex-direction:column; gap:14px}
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.card .head{
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
.card .body{padding:16px}
.drop{
  border:1.5px dashed rgba(47,111,237,.35);
  background: rgba(47,111,237,.06);
  border-radius:14px; padding:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.drop .hint{color:var(--muted); font-size:13px}
.drop .big{font-weight:700}
.drop input{display:none}

table{width:100%; border-collapse:collapse; font-size:14px}
th, td{padding:12px 10px; border-bottom:1px solid var(--border); vertical-align:middle}
th{color:var(--muted); font-weight:600; text-align:left; font-size:12px}
tr:hover td{background:rgba(2,6,23,.02)}
.file{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.ico{
  width:30px; height:30px; border-radius:10px; background:#EEF2FF;
  display:grid; place-items:center; color:var(--primary); font-weight:800; font-size:12px;
  border:1px solid rgba(47,111,237,.18);
  flex:0 0 auto;
}
.file .name{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.muted{color:var(--muted); font-size:13px}
.rowActions{display:flex; gap:8px; justify-content:flex-end}
.badge{
  font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px solid var(--border); color:var(--muted); background:#fff;
}

.timeline{display:flex; flex-direction:column; gap:10px}
.event{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border:1px solid var(--border); border-radius:14px;
  background: linear-gradient(180deg, #fff, #fbfcff);
}
.eico{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--border); background:#fff;
  flex:0 0 auto;
}
.event b{display:block}
.event .meta{color:var(--muted); font-size:12px; margin-top:4px}

.grid2{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px}
.profileTop{display:flex; gap:14px; align-items:center}
.avatar{
  width:54px; height:54px; border-radius:18px;
  background: linear-gradient(135deg, #111827, #475569);
}
.kvs{display:grid; grid-template-columns: 140px 1fr; gap:10px; font-size:14px}
.switch{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border:1px solid var(--border); border-radius:12px;
}
.toggle{
  width:44px; height:26px; border-radius:999px; background:#E5E7EB; position:relative;
  border:1px solid var(--border);
}
.toggle::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:999px; background:#fff; box-shadow:0 6px 18px rgba(2,6,23,.18);
  transition:.18s;
}
.toggle.on{background: rgba(47,111,237,.22); border-color: rgba(47,111,237,.35)}
.toggle.on::after{left:21px; background:var(--primary)}
.hidden{display:none !important}

/* responsive */
@media (max-width: 980px){
  .app{grid-template-columns: 84px 1fr}
  .brand b, .brand span, .storage .row span:last-child, .subtitle{display:none}
  .brand{justify-content:center}
  .nav button{justify-content:center}
  .nav button span{display:none}
  .storage{padding:10px}
  .search{width:min(320px, 45vw)}
  .grid2{grid-template-columns: 1fr}
}
@media (max-width: 680px){
  .topbar{flex-direction:column; align-items:stretch}
  .actions{justify-content:space-between}
  .search{width:100%}
  .content{padding:14px}
  th:nth-child(3), td:nth-child(3),
  th:nth-child(4), td:nth-child(4){display:none} /* hide type & size on mobile */
}