:root{
  --bg:#f6f7f9; --surface:#fff; --surface-2:#eef0f3; --border:#d8dbe0;
  --text:#1a1c1f; --text-muted:#5b6068;
  --accent:#6a45e0; --accent-contrast:#fff;
  --ok:#1f9d55; --warn:#c77700; --danger:#d23b3b;
  --radius:14px; --tap:44px; --shadow:0 2px 8px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#141518; --surface:#18191B; --surface-2:#1f2124; --border:#2b2e33;
    --text:#EDEEF0; --text-muted:#9aa0a8;
    --accent:#6f52e6; --ok:#3ecf8e; --warn:#e0a137; --danger:#ff6b6b;
    --shadow:0 2px 10px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px;margin:0 auto;padding:16px}
header.app{display:flex;align-items:center;gap:12px;padding:8px 0 16px}
.logo{font-size:32px;line-height:1}
h1{font-size:1.25rem;margin:0}
.sub{color:var(--text-muted);font-size:.85rem;margin:2px 0 0}

.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{flex:1;min-height:var(--tap);border:1px solid var(--border);background:var(--surface);
  color:var(--text);border-radius:var(--radius);cursor:pointer;font-size:1rem}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-contrast);border-color:transparent}
.tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.banner{padding:10px 14px;border-radius:var(--radius);background:var(--surface-2);
  border:1px solid var(--border);margin-bottom:16px;font-size:.9rem}
.banner.ok{border-color:var(--ok)}
.banner.err{border-color:var(--danger);color:var(--danger)}

.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:720px){ .grid.two{grid-template-columns:1fr 1fr} }

.camera{position:relative;width:100%;aspect-ratio:4/3;background:#000;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.camera.small{aspect-ratio:1/1;max-width:260px}
.camera video,.camera canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camera canvas{pointer-events:none}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.check{display:flex;align-items:center;gap:8px;min-height:var(--tap);color:var(--text-muted);cursor:pointer}
.check input{width:20px;height:20px}

.btn{min-height:var(--tap);padding:0 16px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:1rem;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-contrast);border-color:transparent}
.btn.small{min-height:36px;padding:0 10px;font-size:.85rem;margin-top:8px}
.btn.danger{color:var(--danger);border-color:var(--danger);background:transparent}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;
  background:var(--surface);display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--text-muted)}
input{min-height:var(--tap);padding:0 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--bg);color:var(--text);font-size:1rem}
input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.h2{font-size:1rem;margin:4px 0 8px}
.muted{color:var(--text-muted);font-size:.9rem}
.bad{color:var(--danger)}
.empty{padding:16px;display:block}

.door{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:24px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface-2);text-align:center;min-height:200px}
.door.open{background:color-mix(in srgb,var(--ok) 18%,var(--surface));border-color:var(--ok)}
.door.unknown{background:color-mix(in srgb,var(--warn) 18%,var(--surface));border-color:var(--warn)}
.door .big{font-size:48px;line-height:1}

.people{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.person{border:1px solid var(--border);border-radius:var(--radius);padding:10px;
  background:var(--surface);text-align:center}
.person img{width:96px;height:96px;object-fit:cover;border-radius:50%;background:var(--surface-2)}
.pname{font-weight:600;margin-top:6px;word-break:break-word}

.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:280px;overflow:auto}
.log li{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface)}
.log img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.log span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log time{margin-left:auto;color:var(--text-muted);font-variant-numeric:tabular-nums;flex:none}

.foot{margin-top:24px;border-top:1px solid var(--border);padding-top:12px}
[hidden]{display:none !important}

/* двери */
.doors-shared{margin-top:22px;border-top:1px solid var(--border);padding-top:16px}
.doors{display:flex;gap:12px;flex-wrap:wrap}
.doorTile{flex:1;min-width:130px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:16px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface-2);text-align:center;transition:background .2s,border-color .2s}
.doorTile.open{background:color-mix(in srgb,var(--ok) 18%,var(--surface));border-color:var(--ok)}
.doorTile .big{font-size:40px;line-height:1}
.reason{margin:14px 0}
.reason.bad{color:var(--danger)}

/* бенч сценариев */
.scen-group{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid var(--border)}
.scen-group:first-child{padding-top:0}
.scen-group:last-child{border-bottom:0;padding-bottom:0}
.scen-group>strong{font-size:1rem}
.scen-preview{max-width:160px;border-radius:10px;border:1px solid var(--border);margin-top:4px}
.or{text-align:center;color:var(--text-muted);font-size:.85rem;margin:6px 0}
label.btn{display:inline-flex;align-items:center;justify-content:center}
.w-apt{max-width:90px}
.w-code{max-width:130px}
.gcode{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:2px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:2px 8px;margin-top:6px;display:inline-block}

/* тосты */
.toasts{position:fixed;left:0;right:0;bottom:12px;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none;padding:0 12px;z-index:50}
.toast{background:var(--text);color:var(--bg);padding:10px 14px;border-radius:10px;
  font-size:.9rem;max-width:520px;box-shadow:var(--shadow)}

/* тревога «цуцики» */
.alarm{max-width:100%;text-align:center;font-weight:800;color:var(--danger);
  font-size:clamp(48px,16vw,110px);line-height:1.05;margin:6px 0}
@media (prefers-reduced-motion: no-preference){
  .alarm{animation:alarmPulse .5s ease-in-out infinite alternate}
}
@keyframes alarmPulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.12);opacity:1}}