:root {
    --bg: #0f1410;
    --fg: #e8efe6;
    --muted: #8a9a8c;
    --accent: #3d8f4a;
    --danger: #c45a4a;
    --font: "Segoe UI", "PT Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; height: 100%;
    background: var(--bg); color: var(--fg); font-family: var(--font);
    overflow: hidden;
}
#app { display: flex; flex-direction: column; height: 100%; }
.bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0.85rem; border-bottom: 1px solid #243028;
}
main { flex: 1; display: flex; flex-direction: column; padding: 0.6rem; gap: 0.6rem; min-height: 0; }
.viewfinder {
    flex: 1; min-height: 0; background: #000; position: relative; overflow: hidden;
}
#video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.controls { display: flex; gap: 0.5rem; }
.primary, .ghost {
    font: inherit; cursor: pointer; border: 0; padding: 0.85rem 1rem; touch-action: manipulation;
}
.primary {
    flex: 1; background: var(--accent); color: #fff; font-size: 1.2rem; font-weight: 600;
}
.primary.is-stop { background: var(--danger); }
.ghost {
    background: #1c2620; color: var(--fg); border: 1px solid #2a3830; min-width: 3rem;
}
.mode-row {
    display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
    color: var(--muted); font-size: 0.9rem;
}
.mode-row input[type="number"] {
    width: 3.5rem; background: #1c2620; color: var(--fg);
    border: 1px solid #2a3830; padding: 0.25rem 0.35rem;
}
.stats {
    display: flex; flex-wrap: wrap; gap: 0.85rem; color: var(--muted); font-size: 0.85rem;
}
.status { margin-left: auto; }
.status.ok { color: var(--accent); }
.status.err { color: var(--danger); }

dialog {
    border: 1px solid #2a3830; background: #152019; color: var(--fg);
    width: min(420px, calc(100vw - 1.5rem)); padding: 0;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
#settings-form { display: grid; gap: 0.65rem; padding: 1rem; }
#settings-form h2 { margin: 0; font-size: 1.1rem; }
#settings-form label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); }
#settings-form input {
    padding: 0.5rem; border: 1px solid #2a3830; background: #0f1410; color: var(--fg); font: inherit;
}
.actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.hint { min-height: 1.2em; margin: 0; font-size: 0.85rem; color: var(--muted); }