/* Smart 500 styling */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height:1.4; }
.container { max-width: 1000px; margin: 32px auto; padding: 0 16px; }
h1 { margin: 0 0 4px; font-size: 28px; }
.sub { margin: 0 0 20px; color: #6b7280; }
form { display: grid; gap: 12px; margin-bottom: 12px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.dropzone { border: 2px dashed #9ca3af; padding: 22px; border-radius: 12px; text-align: center; cursor: pointer; position: relative; outline: none; }
.dropzone:focus { box-shadow: 0 0 0 3px rgba(99,102,241,.35); }
.dropzone.dragover { border-color: #6366f1; background: rgba(99,102,241,.08); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-instructions { pointer-events: none; }
.dz-types { color:#6b7280; margin-top: 6px; font-size: 14px; }
.dz-filename { margin-top: 8px; font-weight: 600; }
label.lang { display:flex; gap:8px; align-items:center; }
label.lang span { min-width: 120px; color:#6b7280; }
select, button, textarea, input[type="number"] { padding: 10px 12px; border-radius: 10px; border:1px solid #cfd6e4; font-size: 16px; }
button { cursor: pointer; font-weight: 600; }
.status { margin: 8px 0; color:#6b7280; }
.queue { margin-top: 16px; }
.legend { display:flex; gap:8px; margin: 8px 0; flex-wrap: wrap; }
.pill { border-radius: 999px; padding: 2px 8px; font-size: 12px; border:1px solid #e5e7eb; }
.pill.pending{ background:#f3f4f6; }
.pill.run{ background:#eff6ff; }
.pill.ok{ background:#ecfdf5; }
.pill.err{ background:#fef2f2; }
.file-list { list-style: none; padding-left: 0; display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:8px; }
.file-list li { border:1px solid #e5e7eb; border-radius: 10px; padding:8px; font-size: 14px; }
.file-list .meta { color:#6b7280; font-size:12px; }
.file-list .st { font-weight:600; }
.overall { display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.overall-bar { flex:1; height: 10px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.overall-bar > #overallFill { height:100%; width:0%; background: linear-gradient(90deg, #6366f1, #22c55e); transition: width .15s ease; }
.result { margin-top: 16px; }
.result .item { border:1px solid #e5e7eb; border-radius: 12px; padding:12px; margin: 10px 0; }
.result .item h3 { margin: 0 0 6px; font-size: 16px; }
.result .item textarea { width: 100%; min-height: 140px; resize: vertical; }
.result .item .row { display:flex; gap:8px; align-items:center; margin-bottom: 6px; flex-wrap: wrap; }
.actions { display:flex; gap:8px; margin-bottom: 8px; }
footer { margin-top: 28px; color:#9ca3af; }