:root {
  --bg: #0f1115;
  --panel: #151824;
  --text: #dfe2ee;
  --muted: #9aa0b4;
  --accent: #6aa3ff;
  --danger: #ff6a6a;
  --border: #23283b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: rgba(15,17,21,0.9); backdrop-filter: blur(6px);
}
.brand { font-weight: 700; letter-spacing: 0.6px; }
.badge {
  font-size: 12px; color: var(--muted); border: 1px dashed var(--border);
  padding: 4px 8px; border-radius: 6px;
}
.container { max-width: 900px; margin: 24px auto; padding: 0 16px; }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 16px; margin-bottom: 16px;
}
.panel h2 { margin: 0 0 12px 0; font-size: 16px; color: var(--text); }

.upload-form { display: flex; gap: 10px; align-items: center; }
.upload-form input[type=file] {
  color: var(--muted); max-width: 60%;
}
.upload-form button {
  background: var(--accent); color: #0b1221; border: none;
  padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.upload-form button:hover { filter: brightness(1.05); }

.file-list { list-style: none; margin: 0; padding: 0; }
.file-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.file-row:first-child { border-top: none; }
.file-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.file-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { color: var(--muted); font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.file-actions { display: flex; gap: 8px; }
.btn {
  padding: 6px 10px; border-radius: 8px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border); color: var(--text); background: transparent;
}
.btn-ghost:hover { background: #1b2030; }
.btn-danger { border-color: #3a1f24; color: #ffd8d8; }
.btn-danger:hover { background: #2a0f14; color: #fff; }

.empty {
  color: var(--muted); padding: 20px; text-align: center; border: 1px dashed var(--border);
  border-radius: 8px; background: #131726;
}

.footer {
  color: var(--muted);
  padding: 20px; text-align: center; border-top: 1px solid var(--border); margin-top: 24px;
}