:root{
  --bg:#0ea5e9; --text:#0b1220; --muted:#6b7280; --border:#e5e7eb; --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f7fafc;color:var(--text);}
header,footer{padding:0.75rem 1rem;background:#fff;border-bottom:1px solid var(--border);} 
header h1{margin:0;font-size:1.2rem}
header small{color:var(--muted)}
header .brand{display:flex;align-items:center;gap:0.5rem}
main{padding:1rem;display:flex;flex-direction:column;gap:0.75rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:0.75rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
label{display:block;margin-bottom:0.5rem}
input,textarea,select{width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:8px}
.actions{display:flex;gap:0.5rem;align-items:center;margin-top:0.5rem}
.btn{background:var(--bg);color:#fff;border:none;border-radius:8px;padding:0.5rem 0.75rem;cursor:pointer}
.btn-secondary{background:#111827;color:#fff}
.hidden{display:none}
nav#modes{display:flex;gap:0.5rem;padding:0.25rem}
nav#modes button{background:#fff;border:1px solid var(--border);border-radius:8px;padding:0.4rem 0.6rem;cursor:pointer}
nav#modes button[aria-selected="true"]{background:var(--bg);color:#fff}
video#camera{width:100%;max-height:240px;background:#000;border-radius:10px}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;justify-content:space-between;gap:0.5rem;padding:0.4rem;border-bottom:1px dashed var(--border)}
footer{border-top:1px solid var(--border)}