:root { --gap: 12px; --radius: 14px; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; background: #0b0e14; color: #f4f4f6; }
header { padding: 24px; border-bottom: 1px solid #2a2f3a; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
h1 { font-size: clamp(18px, 3vw, 22px); margin: 0; letter-spacing: 0.2px; }
main { padding: 24px; max-width: 1200px; margin: 0 auto; display: grid; gap: 24px; }
.panel { background: #121826; border: 1px solid #2a2f3a; border-radius: var(--radius); padding: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hint { color: #c8cbd3; opacity: .85; }
.btn { background: #2b65f2; color: white; border: none; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: #2a2f3a; border: 1px solid #3a4150; color: #e4e7ee; }
.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 860px) { .grid { grid-template-columns: 1fr 1fr; } }
.filecard { background: #0f1421; border: 1px solid #2a2f3a; border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.filehead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.fname { font-weight: 650; word-break: break-all; }
.fsize { opacity: .85; font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 10px; -webkit-appearance: none; appearance: none; }
progress::-webkit-progress-bar { background:#1c2333; border-radius: 20px; }
progress::-webkit-progress-value { background:#2b65f2; border-radius: 20px; }
.pill { display:inline-block; padding: 3px 8px; border-radius: 999px; background: #1f2534; border: 1px solid #2f3646; font-size: 12px; }
.tag { background: #21421e; border-color: #2f6e28; }
.warn { color: #ffd38a; }
code { background:#141a2a; padding: 2px 6px; border-radius: 6px; border:1px solid #25304a; }
.footer { color:#aab1be; font-size: 13px; }
.empty { opacity: .7; font-style: italic; }

/* New layout helpers */
.controls { display: grid; gap: 12px; }
.controls-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.controls-row.hidden { display: none; }
.space-between { justify-content: space-between; }
.section-head { display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }