:root {
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--bg-tertiary: #2a2a2a;
--accent: #CF1A37;
--accent-dim: #a01528;
--text-primary: #ffffff;
--text-secondary: #aaaaaa;
--border: #333333;
--blue: #0066FF;
--ok: #3ddc84;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
font-family: Arial, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
}

.top-banner {
background: var(--accent);
padding: 0 20px;
height: 48px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

.banner-title {
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1;
}

.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

.sub {
color: var(--text-secondary);
font-size: .85em;
line-height: 1.6;
margin-bottom: 20px;
max-width: 70ch;
}

.sub code { font-family: var(--mono); color: var(--text-primary); }

.section {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
}

.section-title {
font-size: 1.3em;
font-weight: bold;
margin-bottom: 15px;
color: var(--accent);
display: flex;
justify-content: space-between;
align-items: center;
}

button, select, input[type=number] {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
font-family: Arial, sans-serif;
font-size: .85em;
text-transform: uppercase;
letter-spacing: 1px;
transition: all .2s;
}

button:hover:not(:disabled), select:hover { border-color: #4a4a4a; background: #3a3a3a; }
button:active:not(:disabled) { background: var(--blue); }
button:disabled { opacity: .3; cursor: not-allowed; }
select:focus, input[type=number]:focus { outline: none; border-color: var(--blue); }

button.action-button {
background: var(--accent);
border-color: var(--accent);
border-radius: 6px;
padding: 10px 20px;
font-size: .95em;
font-weight: bold;
text-transform: none;
letter-spacing: normal;
}

button.action-button:hover:not(:disabled) { background: #e02342; border-color: #e02342; transform: translateY(-1px); }
button.action-button:active:not(:disabled) { background: var(--accent-dim); transform: translateY(0); }
button.action-button:disabled { background: #333; border-color: #333; color: #666; }

button.secondary { background: #444; border-color: #444; }
button.secondary:hover:not(:disabled) { background: #666; border-color: #666; }

.field { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.field > label { min-width: 5.5rem; color: var(--text-secondary); font-size: .75em;
text-transform: uppercase; letter-spacing: 1px; }
.field > select { flex: 1; min-width: 0; }

.button-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 15px; }
.button-row > label { color: var(--text-secondary); font-size: .75em; text-transform: uppercase; letter-spacing: 1px; }
.button-row > select { flex: 1; min-width: 12rem; }

.button-row > input[type=number] { padding: 8px 10px; }

.status-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.pill {
display: inline-block;
padding: 4px 12px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--bg-primary);
color: var(--text-secondary);
font-size: .75em;
text-transform: uppercase;
letter-spacing: 1px;
}

.pill.busy { border-color: var(--text-secondary); color: var(--text-primary); }
.pill.live { border-color: var(--ok); color: var(--ok); }

.device-info {
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 4px;
padding: 10px 14px;
margin-top: 12px;
font-size: .85em;
color: var(--text-secondary);
line-height: 1.6;
}

.device-info:empty { display: none; }

.file-upload-area {
border: 2px dashed var(--accent);
border-radius: 8px;
padding: 36px 20px;
text-align: center;
cursor: pointer;
transition: all .3s;
background: var(--bg-primary);
color: var(--text-secondary);
}

.file-upload-area:hover { border-color: #e02342; background: #151515; }
.file-upload-area.over { border-color: #e02342; background: #2a1a1a; }

.upload-prompt .icon { font-size: 3em; margin-bottom: 10px; }
.upload-prompt .lead { font-size: 1.2em; color: var(--text-primary); margin-bottom: 8px; }
.upload-prompt .hint { font-size: .9em; }

#log {
font: 12px/1.7 var(--mono);
white-space: pre-wrap;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 4px;
padding: 12px 14px;
min-height: 8rem;
max-height: 22rem;
overflow: auto;
color: var(--text-secondary);
}

#log .err { color: #ff5566; font-weight: 600; }
#log .ok { color: var(--ok); font-weight: 600; }

.option { display: flex; align-items: center; gap: 8px; cursor: pointer;
color: var(--text-secondary); font-size: .75em;
text-transform: uppercase; letter-spacing: 1px; }
.option input[type=checkbox] { width: 16px; height: 16px; cursor: pointer;
accent-color: var(--accent); }
.option code { font-family: var(--mono); color: var(--text-primary);
text-transform: none; letter-spacing: normal; }
.option:has(input:disabled) { opacity: .3; cursor: not-allowed; }

.pill .name { font-family: var(--mono); text-transform: none; letter-spacing: normal; }

details.advanced { margin-top: 24px; border-top: 1px solid var(--border);
padding-top: 16px; }
details.advanced > summary { cursor: pointer; color: var(--text-secondary);
font-size: .8em; text-transform: uppercase;
letter-spacing: 2px; font-weight: 600;
list-style-position: inside; }
details.advanced > summary::marker { color: var(--accent); }
details.advanced[open] > summary { margin-bottom: 8px; }
details.advanced .section { margin-top: 8px; }

@media (max-width: 768px) {
.container { padding: 12px; }
.section { padding: 15px; }
.field { flex-direction: column; align-items: stretch; }
.field > label { min-width: 0; }
}