:root{
  --bg:#0e0f13;
  --fg:#e9eef3;
  --muted:#a7b0bb;
  --card:#151821;
  --accent:#4ba3ff;
  --accent-2:#6ee7b7;
  --border:#232735;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:980px;margin:0 auto;padding:24px}
header h1{margin:0 0 6px}
.sub{color:var(--muted);margin:0}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin:20px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

h2{margin:0 0 14px}

.row{display:flex;gap:12px}
.row input[type="text"], .row input[type="number"]{
  flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:#0c0e14; color:var(--fg); outline:none;
}
.row button{
  padding:12px 16px; border-radius:10px; border:1px solid var(--border);
  background:var(--accent); color:#001428; font-weight:600; cursor:pointer;
}
.row button:hover{filter:brightness(1.1)}

textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:#0c0e14; color:var(--fg); resize:vertical;
}

.list{display:grid; gap:10px; margin-top:14px}
.item{
  display:grid; gap:10px;
  border:1px solid var(--border); border-radius:12px; background:#0f1118; padding:10px 12px;
}
.item-head{display:flex;justify-content:space-between;gap:12px;align-items:center}
.item-title{font-weight:600}
.item-sub{color:var(--muted);font-size:.9rem}
.item-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-family:var(--mono);font-size:.8rem;padding:2px 8px;border-radius:999px;background:#141827;border:1px solid var(--border)}
.item-actions{display:flex;gap:8px;flex-wrap:wrap}
.item-actions button, .item-actions a{
  padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:#0c0e14; color:var(--fg);
  text-decoration:none; cursor:pointer;
}
.item-actions button:hover{background:#0f1320}

.or{color:var(--muted); text-align:center; margin:14px 0}

.drop{
  border:1px dashed var(--border);
  border-radius:12px;
  padding:18px;
  text-align:center;
  background:#0b0d12;
  position:relative;
}
.drop.drag{outline:3px dashed var(--accent); outline-offset:-8px}
.file-label{
  display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:#0f1118; cursor:pointer;
}
#file-input{display:none}

.tiny{font-size:.9rem; color:var(--muted)}
.mono{font-family:var(--mono)}

.stat-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
}
.stat-grid .k{display:block; color:var(--muted); font-size:.85rem}
progress{
  width:100%; height:12px; margin-top:12px; appearance:none;
  border:none; border-radius:8px; background:#0c0e14; overflow:hidden;
}
progress::-webkit-progress-bar{background:#0c0e14}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
progress::-moz-progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

.file-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.file{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0f1118;
}
.file .meta{display:flex; gap:10px; align-items:center}
.badge{
  font-family:var(--mono);
  font-size:.8rem; padding:2px 8px; border-radius:999px; background:#141827; border:1px solid var(--border);
}
.actions{display:flex; gap:8px}
.actions a, .actions button{
  padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:#0c0e14; color:var(--fg);
  text-decoration:none; cursor:pointer;
}
.actions button:hover, .actions a:hover{background:#0f1320}

.viewer{
  display:grid; gap:14px;
  padding:8px; background:#0f1118; border:1px solid var(--border); border-radius:12px;
}
.viewer video, .viewer audio, .viewer img{
  max-width:100%; border-radius:12px; outline:1px solid var(--border);
  background:#000;
}

.hidden{display:none}

@media (max-width:760px){
  .stat-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .row{flex-direction:column}
  .item-head{flex-direction:column; align-items:flex-start}
}