:root { --bg:#fff; --fg:#111; --muted:#666; --border:#e5e5e5; --accent:#111; --ok:#0aa84f; --warn:#c96; }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.app-header{ padding:32px 16px 8px; text-align:center }
h1{ margin:0; font-weight:600; letter-spacing:-0.02em }
.subtitle{ color:var(--muted); margin:6px 0 0 }
.container{ max-width:1000px; margin:0 auto; padding:16px }
.controls{ border:1px solid var(--border); border-radius:12px; padding:16px; }
.control-row{ margin:12px 0 }
label{ display:block; font-weight:600; margin-bottom:6px }
small{ color:var(--muted) }
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px }
.uploader{ margin:18px 0 }
.drop-zone{ border:2px dashed var(--border); border-radius:12px; padding:24px; text-align:center; transition:border-color .15s ease, background .15s ease }
.drop-zone.drag{ border-color:var(--fg); background:#fafafa }
.btn{ border:1px solid var(--fg); background:transparent; color:var(--fg); padding:10px 14px; border-radius:8px; cursor:pointer; transition:transform .06s ease, background .15s, color .15s, border-color .15s }
.btn:hover{ transform:translateY(-1px) }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none }
.btn.primary{ background:var(--fg); color:#fff; }
.queue{ margin-top:14px; display:grid; gap:10px }
.item{ border:1px solid var(--border); border-radius:10px; padding:10px; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center }
.item .meta{ font-size:14px; color:var(--muted) }
.progress{ height:6px; background:#f0f0f0; border-radius:999px; overflow:hidden }
.bar{ height:100%; width:0%; background:var(--accent); transition:width .15s linear }
.badge{ font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border) }
.badge.ok{ border-color:var(--ok); color:var(--ok) }
.badge.warn{ border-color:var(--warn); color:var(--warn) }
.actions{ display:flex; gap:10px; align-items:center; margin:10px 0 24px }
.status{ color:var(--muted) }
.app-footer{ text-align:center; padding:16px; color:var(--muted); border-top:1px solid var(--border) }
.toggle{ display:flex; gap:8px; align-items:center; user-select:none; cursor:pointer }
#sizeRow{ transition:opacity .15s ease }