:root {
  color-scheme: light;
  --background: #f3f4f6;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #d1d5db;
  --primary: #111827;
  --primary-hover: #1f2937;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --success: #047857;
  --success-bg: #ecfdf5;
  --warning: #92400e;
  --shadow: 0 16px 40px rgba(17, 24, 39, 0.10);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body {
  min-height: 100%; margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #e5e7eb 0, var(--background) 260px);
}
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100%, 760px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.controller-shell { width: min(100%, 620px); }
.app-header { margin-bottom: 20px; }
.eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; color: var(--muted); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.8rem, 8vw, 2.8rem); line-height: 1.08; }
h1 span { display: inline-block; font-weight: 500; color: #374151; }
.subtitle { margin-bottom: 4px; font-weight: 650; }
.version { margin-bottom: 0; color: var(--muted); font-size: .92rem; }
.camera-card, .photo-card, .connection-card, .controller-card {
  background: var(--surface); border: 1px solid rgba(209,213,219,.9); border-radius: 22px; padding: 16px; box-shadow: var(--shadow);
}
.camera-card, .photo-card { margin-top: 18px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
h2 { margin-bottom: 4px; font-size: 1.15rem; }
.status { margin-bottom: 0; color: var(--muted); font-size: .9rem; }
.status.success { color: var(--success); }
.status.error { color: var(--danger); }
.badge { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; font-size: .78rem; font-weight: 750; }
.badge-idle { color: #4b5563; background: #f3f4f6; }
.badge-waiting { color: var(--warning); background: #fffbeb; }
.badge-connected { color: var(--success); background: var(--success-bg); }
.badge-error { color: var(--danger); background: var(--danger-bg); }
.explanation { color: #4b5563; line-height: 1.65; }
.viewfinder { position: relative; width: 100%; min-height: 300px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: #030712; }
video { width: 100%; height: 100%; display: block; object-fit: contain; background: #030712; }
.camera-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 24px; text-align: center; color: #d1d5db; background: radial-gradient(circle at center, #1f2937, #030712 72%); }
.camera-placeholder p { margin: 0; }
.camera-icon { font-size: 3.4rem; line-height: 1; }
.hidden { display: none !important; }
.flash-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: white; }
.flash-overlay.active { animation: flash 180ms ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 16px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 12px; padding: 10px 14px; text-decoration: none; cursor: pointer; transition: transform 120ms ease, background 120ms ease, opacity 120ms ease; }
.button:active { transform: scale(.98); }
.button:disabled { cursor: not-allowed; opacity: .42; }
.button-primary { color: white; background: var(--primary); }
.button-primary:hover:not(:disabled) { background: var(--primary-hover); }
.button-secondary { color: var(--text); background: #f9fafb; border-color: var(--border); }
.button-danger { color: var(--danger); background: var(--danger-bg); border-color: #fecaca; }
.button-wide { width: 100%; }
.shutter-button { width: 72px; height: 72px; padding: 6px; border: 4px solid #d1d5db; border-radius: 50%; background: transparent; cursor: pointer; }
.shutter-button span { display: block; width: 100%; height: 100%; border-radius: 50%; background: white; box-shadow: inset 0 0 0 1px #9ca3af; }
.shutter-button:not(:disabled):active span { transform: scale(.9); }
.shutter-button:disabled { opacity: .35; cursor: not-allowed; }
#capturedPhoto { width: 100%; max-height: 70vh; display: block; object-fit: contain; border-radius: 14px; background: #111827; }
.photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.save-note, .small-note { margin: 12px 2px 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.qr-layout { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; margin-bottom: 16px; }
.qr-code { min-height: 180px; display: grid; place-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.qr-code img, .qr-code canvas { max-width: 100%; height: auto !important; }
.detail-label { margin-bottom: 4px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.room-code { margin-bottom: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: .12em; }
.room-details .button { margin-top: 14px; }
.controller-main { display: grid; place-items: center; padding: 12px 0 18px; }
.camera-absent-panel { width: 100%; min-height: 170px; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; color: #9ca3af; border-radius: 16px; background: #111827; }
.camera-absent-panel p { max-width: 360px; margin-bottom: 0; line-height: 1.55; }
.control-icon { font-size: 3rem; }
.remote-shutter { width: 112px; height: 112px; margin: 24px 0 10px; padding: 8px; border: 5px solid #9ca3af; border-radius: 50%; background: #e5e7eb; cursor: pointer; }
.remote-shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #9ca3af; }
.remote-shutter:not(:disabled):active span { transform: scale(.88); }
.remote-shutter:disabled { opacity: .38; cursor: not-allowed; }
.capture-result { min-height: 24px; margin-bottom: 0; color: var(--muted); font-weight: 650; text-align: center; }
.capture-result.success { color: var(--success); }
.capture-result.error { color: var(--danger); }
.connection-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.connection-details div { padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #f9fafb; }
.connection-details span { display: block; color: var(--muted); font-size: .76rem; }
.connection-details strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
footer { padding: 22px 4px 0; text-align: center; color: var(--muted); font-size: .82rem; }
footer p { margin-bottom: 0; }
@media (orientation: landscape) and (max-height: 560px) { .app-shell { width: min(100%, 1000px); } .viewfinder { aspect-ratio: 16 / 9; min-height: 220px; } }
@media (max-width: 520px) { .qr-layout { grid-template-columns: 1fr; } .qr-code { width: min(100%, 220px); margin: 0 auto; } }
@media (max-width: 480px) { .controls { gap: 8px; } .button { padding-inline: 10px; font-size: .9rem; } .shutter-button { width: 68px; height: 68px; } }

.toggle-row { display:flex; align-items:center; gap:10px; margin:12px 0 16px; padding:12px; border:1px solid var(--border); border-radius:12px; background:#f9fafb; cursor:pointer; }
.toggle-row input { width:20px; height:20px; }
.connection-path { margin:10px 0 0; color:var(--muted); font-size:.86rem; }
.connection-path strong { color:var(--text); }
.connection-details { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.institution-line{margin:0 0 .35rem;font-size:.95rem;letter-spacing:.04em}.institution-line strong{font-weight:800;color:#0f766e;margin-right:.2rem}.technical-card{margin-top:1rem;padding:1rem 1.1rem;border:1px solid #dbe3ea;border-radius:16px;background:#f8fafc;color:#475569;font-size:.9rem;line-height:1.75}.technical-card h2{margin:0 0 .45rem;color:#1f2937;font-size:1rem}.technical-card p{margin:.25rem 0}footer a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}


.preview-panel { width: 100%; }
.preview-panel video { width: 100%; min-height: 170px; max-height: 56vh; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 16px; background: #030712; }
.preview-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; }
.preview-countdown { min-width: 76px; color: var(--warning); font-size: .9rem; text-align: right; }
.preview-active .preview-actions { grid-template-columns: minmax(0, 1fr) auto; }
footer .institution-line { margin-bottom: .35rem; }