/* TRASSIR Cloud AI — тест-фронт по макету (дарк-тема, бренд #6555f1). */
:root {
  --bg: #0e0f13; --bg-side: #1a1c21; --bg-main: #141518; --panel: #1b1d22; --panel-2: #21242b;
  --elev: #202329; --line: rgba(255,255,255,.06); --line-2: rgba(255,255,255,.1);
  --brand: #6555f1; --brand-l: #8e82f6; --brand-d: #5649cd; --brand-a: #a399f7;
  --tint: rgba(101,85,241,.14); --tint-b: rgba(101,85,241,.35);
  --ink: #f0f0f2; --ink-2: #d4d7dd; --muted: #787f8c; --muted-2: #a1a5af;
  --ok: #33a657; --err: #ef6a70; --warn: #ec6e29; --info: #1c6de5;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, "Segoe UI", system-ui, sans-serif; color: var(--ink);
       background: var(--bg); -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
.muted { color: var(--muted); } .mono { font-family: var(--mono); }
.err { color: var(--err); margin-top: 10px; min-height: 18px; font-size: 14px; }
h1,h2,h3 { margin: 0 0 12px; font-weight: 600; letter-spacing: -.2px; }
button { cursor: pointer; font: inherit; color: inherit; }
input, select { font: inherit; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 11px;
  background: #16181c; color: var(--ink); }
input::placeholder { color: #6b7280; }
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); }
.btn { border: 0; border-radius: 11px; padding: 11px 18px; font-weight: 600; font-size: 14px; }
.btn-brand { background: var(--brand); color: #fff; } .btn-brand:hover { background: var(--brand-d); }
.btn-soft { background: var(--tint); color: var(--brand-a); border: 1px solid var(--tint-b); }
.btn-soft:hover { background: rgba(101,85,241,.22); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted-2); }
.icon-btn:hover { background: var(--panel-2); } .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ЛОГИН */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: radial-gradient(900px 600px at 18% 12%, #2a2466 0%, transparent 55%),
              radial-gradient(800px 600px at 86% 90%, #122a4a 0%, transparent 55%), #0c0d11; }
.login-logo { height: 30px; filter: brightness(0) invert(1); opacity: .95; }
.login-card { width: 360px; background: #fff; color: #1d1f24; border-radius: 18px; padding: 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.login-card h1 { color: #1d1f24; font-size: 20px; } .login-card .sub { color: #888e9b; font-size: 13px; margin: 0 0 20px; }
#login-form { display: grid; gap: 14px; }
#login-form label { display: grid; gap: 6px; font-size: 13px; color: #626979; font-weight: 500; }
#login-form input { background: #fff; color: #1d1f24; border-color: #e0e1e4; }
#login-form input:focus { box-shadow: 0 0 0 3px #e0ddfc; }
.pw { position: relative; } .pw input { width: 100%; } .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; font-size: 15px; opacity: .6; }
#login-form .btn { margin-top: 4px; }
.login .err { text-align: center; }

/* LAYOUT */
.layout { display: flex; height: 100vh; overflow: hidden; }

/* САЙДБАР */
.sidebar { width: 272px; flex-shrink: 0; background: var(--bg-side); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 14px 16px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 4px; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, var(--brand-l), var(--brand-d));
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(101,85,241,.4); flex-shrink: 0; }
.brand-row { display: flex; align-items: center; gap: 7px; } .brand-logo { height: 14px; filter: brightness(0) invert(1); }
.brand-ai { color: var(--brand-a); font-weight: 600; font-size: 13.5px; }
.brand-org { font-size: 11px; color: var(--muted); margin-top: 1px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px; padding: 11px 13px;
  background: var(--tint); border: 1px solid var(--tint-b); border-radius: 12px; color: #c9c2fb; font-size: 14px; font-weight: 500; }
.agent-btn:hover { background: rgba(101,85,241,.22); } .agent-btn span:first-of-type { flex: 1; text-align: left; }
.kbd { font-family: var(--mono); font-size: 11px; color: #8b86b8; border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; }
.nav { margin-top: 16px; display: flex; flex-direction: column; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: transparent;
  border: 0; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--muted-2); text-align: left; }
.nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item span { flex: 1; } .nav-item:hover { background: rgba(255,255,255,.05); color: var(--ink-2); }
.nav-item.active { background: var(--tint); color: #fff; } .nav-item.active svg { stroke: var(--brand-a); }
.badge-num { background: var(--err); color: #fff; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex: 0 0 auto !important; }
.spacer { flex: 1; }
.sys { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #16181c; border: 1px solid var(--line);
  border-radius: 11px; margin-bottom: 10px; }
.sys-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 9px var(--ok); flex-shrink: 0; }
.sys-t { font-size: 12.5px; color: var(--ink-2); } .sys-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.account-wrap { position: relative; }
.account { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; background: transparent;
  border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.account:hover { background: rgba(255,255,255,.04); }
.avatar { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, var(--brand-l), var(--brand-d));
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; }
.account-info { flex: 1; min-width: 0; } .acc-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-role { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background: var(--elev);
  border: 1px solid var(--line-2); border-radius: 14px; padding: 7px; box-shadow: 0 18px 44px rgba(0,0,0,.55); z-index: 50; }
.account-mi { display: flex; width: 100%; padding: 9px 10px; background: transparent; border: 0; border-radius: 9px; font-size: 13.5px; color: var(--err); text-align: left; }
.account-mi:hover { background: rgba(255,255,255,.05); }

/* MAIN */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-main); }
.topbar { display: flex; align-items: center; gap: 14px; padding: 16px 30px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.title-wrap { flex: 1; min-width: 0; } .view-title { font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.view-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.live-pill { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: rgba(0,144,45,.12);
  border: 1px solid rgba(0,144,45,.3); border-radius: 9px; font-size: 12.5px; color: #7fd49a; font-weight: 500; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.content { flex: 1; overflow-y: auto; padding: 24px 30px 70px; }
.view { max-width: 1100px; margin: 0 auto; }

/* AI-поиск */
.ai-search { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; margin-bottom: 22px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; text-align: left; }
.ai-search:hover { border-color: rgba(132,119,244,.5); background: var(--panel-2); }
.ai-ph { flex: 1; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-tag { font-size: 11.5px; color: var(--brand-a); background: rgba(101,85,241,.18); padding: 3px 10px; border-radius: 20px; }

/* плитки камер */
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cam { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: .15s; }
.cam:hover { border-color: var(--tint-b); box-shadow: 0 8px 26px rgba(0,0,0,.4); transform: translateY(-1px); }
.cam-thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, #15171c, #1d2026); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.cam-thumb svg { width: 38px; height: 38px; stroke: #3a3f48; fill: none; stroke-width: 1.5; }
.cam-snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #15171c; }
.cam-thumb .live-badge { position: absolute; top: 8px; left: 8px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.55); z-index: 2; }
.cam-body { padding: 11px 13px; } .cam .name { font-weight: 600; font-size: 14px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam .meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.st-streaming { color: var(--ok); } .st-streaming .dot { background: var(--ok); }
.st-ready { color: var(--info); } .st-ready .dot { background: var(--info); }
.st-offline { color: var(--err); } .st-offline .dot { background: var(--err); }
.st-nosig { color: var(--warn); } .st-nosig .dot { background: var(--warn); }
.st-check { color: var(--muted); } .st-check .dot { background: var(--muted); }
.live-badge.st-streaming { color: #7fd49a; } .live-badge.st-nosig { color: #f3a877; }
.live-badge.st-offline { color: var(--err); } .live-badge.st-check { color: var(--muted); }
.tag { background: rgba(255,255,255,.06); border-radius: 7px; padding: 2px 8px; font-size: 11.5px; color: var(--muted-2); }
.tag.paid { background: rgba(0,144,45,.14); color: #7fd49a; } .tag.rec { background: rgba(236,110,41,.14); color: #f3a877; }
/* Пошаренные камеры — явный маркер: лента на превью + тег с владельцем + рамка плитки */
.cam-thumb .cam-shared { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 6px; background: rgba(101,85,241,.85); color: #fff; }
.tag.shared { background: rgba(101,85,241,.16); color: #b3a9fb; }
.cam.is-shared { box-shadow: inset 0 0 0 1px rgba(101,85,241,.45); }

/* архив / события / биллинг / онбординг */
.arc-ctrls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted-2); }
.chips, .timeline { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.chip { background: #16181c; border: 1px solid var(--line-2); border-radius: 20px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.frag { background: var(--tint); border: 1px solid var(--tint-b); border-radius: 10px; padding: 8px 12px; font-size: 13px; cursor: pointer; color: #c9c2fb; }
.frag:hover { background: rgba(101,85,241,.22); } .arc-export { margin-top: 14px; }

/* ===== Визуальный таймлайн архива (плеер) ===== */
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tl-day { font-size: 15px; font-weight: 600; }
.tl-zoom { display: flex; gap: 6px; }
.tl-zbtn { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 9px; background: #16181c;
  border: 1px solid var(--line-2); color: var(--ink-2); font-size: 16px; font-weight: 600; line-height: 1; }
.tl-zbtn:hover { background: var(--panel-2); border-color: var(--tint-b); }
.tl-zbtn.tl-zall { font-size: 13px; font-weight: 500; }
.tl-wrap { user-select: none; -webkit-user-select: none; }
.tl-track { position: relative; height: 56px; border-radius: 12px; touch-action: none;
  background: repeating-linear-gradient(90deg, #16181c 0, #16181c 100%);
  border: 1px solid var(--line-2); overflow: hidden; cursor: crosshair; }
.tl-frags { position: absolute; inset: 0; pointer-events: none; }
.tl-frag { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, var(--brand-l), var(--brand-d));
  opacity: .82; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tl-sel { position: absolute; top: 0; bottom: 0; background: rgba(101,85,241,.22);
  border-left: 2px solid var(--brand-a); border-right: 2px solid var(--brand-a); box-sizing: border-box; }
.tl-handle { position: absolute; top: 0; bottom: 0; width: 16px; background: var(--brand-a);
  cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.tl-handle::after { content: ""; width: 2px; height: 22px; background: rgba(0,0,0,.45); border-radius: 2px; }
.tl-handle.start { left: -8px; border-radius: 8px 0 0 8px; }
.tl-handle.end { right: -8px; border-radius: 0 8px 8px 0; }
.tl-scrubber { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--err);
  box-shadow: 0 0 8px var(--err); pointer-events: none; display: none; }
.tl-ruler { position: relative; height: 18px; margin-top: 6px; }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; color: var(--muted);
  font-family: var(--mono); white-space: nowrap; }
.tl-tick::before { content: ""; position: absolute; top: -6px; left: 50%; width: 1px; height: 5px; background: var(--line-2); }
.tl-readout { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 12px 0 4px; font-size: 13px; }
.tl-range { font-family: var(--mono); color: var(--ink-2); }
.tl-tzhint { font-size: 11.5px; }
.tl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* ряд редактирования (Set Start/End + пресеты) визуально отделён от ряда действий */
.tl-toolbar-edit { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tl-setbtn { font-size: 13px; padding: 8px 13px; }
.tl-presets { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: 2px; }
.tl-presets .chip { padding: 7px 13px; }            /* чуть крупнее под тач, наследуют .chip */
.tl-presets .chip:hover { border-color: var(--tint-b); }
.tl-size { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tl-fmt { font-size: 12px; color: var(--muted); }
.tl-buffer-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }
.m-hdr-actions { display: flex; align-items: center; gap: 8px; }
.m-archive { font-size: 13px; padding: 8px 14px; }
.tl-speed { display: inline-flex; background: #16181c; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.tl-sp { padding: 8px 13px; background: transparent; border: 0; color: var(--muted-2); font-size: 13px; font-weight: 600;
  border-right: 1px solid var(--line-2); }
.tl-sp:last-child { border-right: 0; }
.tl-sp.active { background: var(--tint); color: #fff; }
.tl-warn { font-size: 12px; color: var(--warn) !important; }
.tl-progress { height: 6px; border-radius: 4px; background: rgba(255,255,255,.06); margin-top: 14px; overflow: hidden; }
.tl-progress i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.tl-status { margin-top: 8px; font-size: 13px; min-height: 16px; }
.tl-stage { position: relative; margin-top: 8px; }
.tl-preview { width: 100%; max-width: 760px; border-radius: 14px; margin-top: 8px; display: block; background: #000;
  aspect-ratio: 16/9; object-fit: contain; }
.summary { background: linear-gradient(120deg, rgba(101,85,241,.16), rgba(101,85,241,.03)); border: 1px solid var(--tint-b);
  border-radius: 18px; padding: 22px 24px; margin-bottom: 22px; position: relative; overflow: hidden; }
.summary h3 { display: flex; align-items: center; gap: 10px; } .summary .stat-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.stat { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 11px; padding: 10px 15px; min-width: 104px; }
.stat .n { font-family: var(--mono); font-size: 21px; font-weight: 600; } .stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 12px; }
.ev { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px;
  transition: border-color .15s, transform .15s; }
.ev img, .ev-noimg { width: 88px; height: 62px; object-fit: cover; border-radius: 8px; background: #16181c; flex-shrink: 0; }
.ev-info { min-width: 0; display: flex; flex-direction: column; }
.ev .d { font-size: 13.5px; font-weight: 500; } .ev .t { color: var(--muted); font-size: 12px; margin-top: 3px; }
/* кликабельная карточка события (камера пишет архив) — подсветка + стрелка «архив →» */
.ev.clickable { cursor: pointer; }
.ev.clickable:hover { border-color: var(--tint-b); transform: translateY(-2px); }
.ev.no-arc { opacity: .72; }
.ev-arc { color: var(--brand-l); font-size: 12px; font-weight: 600; margin-top: auto; padding-top: 4px; }
.ev-noarc { color: var(--muted); font-size: 11.5px; margin-top: auto; padding-top: 4px; }
/* пустое / ошибочное состояние списка событий */
.ev-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 16px; background: rgba(255,255,255,.02); }
.ev-empty-ic { font-size: 30px; color: var(--brand-l); opacity: .55; margin-bottom: 10px; }
.ev-empty .muted { margin-top: 6px; font-size: 13px; }
.ev-error { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* подпись «обнаруженные события из видеоаналитики» над списком (fallback-источник, не живой фид) */
.ev-detected-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); font-style: italic;
  margin: -2px 0 4px; }
.table { display: grid; gap: 4px; margin-top: 12px; }
.trow { display: grid; grid-template-columns: 1.5fr 1fr .6fr .6fr auto; gap: 8px; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: 10px; align-items: center; font-size: 14px; background: #16181c; }
.bal-big { font-size: 30px; font-weight: 700; font-family: var(--mono); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 5px 12px; font-size: 14px; margin: 10px 0; }
.kv b { color: var(--muted); font-weight: 500; }
.player { width: 100%; max-width: 760px; border-radius: 14px; margin-top: 14px;
  background: #000; aspect-ratio: 16 / 9; object-fit: contain; }

/* ===== LIVE-плеер: оболочка с постером, оверлеями и пилюлей статуса ===== */
.live-wrap { position: relative; width: 100%; max-width: 760px; margin: 14px 0 0; }
.live-wrap .player { margin-top: 0; display: block; }
.live-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28); border-radius: 14px; pointer-events: none; }
.live-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--brand-l); animation: live-rot .8s linear infinite; }
@keyframes live-rot { to { transform: rotate(360deg); } }
.live-pill-cam { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.1); }
.live-pill-cam .dot { width: 7px; height: 7px; border-radius: 50%; margin: 0; display: inline-block; }
.live-pill-cam.st-streaming .dot { animation: blink 2s ease-in-out infinite; }
.live-unmute { position: absolute; bottom: 12px; right: 12px; z-index: 3; padding: 7px 13px; border: 0; border-radius: 10px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.14); }
.live-unmute:hover { background: rgba(0,0,0,.8); }
.live-retry { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
  padding: 10px 20px; border: 0; border-radius: 11px; background: var(--brand); color: #fff; font-size: 14px; font-weight: 600; }
.live-retry:hover { background: var(--brand-d); }

/* модалка */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 60; }
.modal-card { width: min(860px, 94vw); max-height: 92vh; overflow: auto; background: var(--bg-side); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--elev); color: #fff;
  padding: 12px 20px; border-radius: 12px; z-index: 100; font-size: 14px; border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.spinner { color: var(--muted); padding: 22px; text-align: center; }
.scov { color: var(--brand-a); }

/* AI-поиск по кадрам */
.ai-card { width: min(720px, 94vw); }
.ai-form { display: flex; align-items: center; gap: 10px; position: relative; margin-top: 6px; }
.ai-form-ic { position: absolute; left: 13px; pointer-events: none; }
.ai-form #ai-q { flex: 1; padding-left: 40px; font-size: 14.5px; }
.ai-hint { font-size: 12.5px; color: var(--muted); margin: 9px 2px 4px; }
.ai-results { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.ai-rcount { font-size: 12px; color: var(--muted); margin-bottom: 2px; line-height: 1.4; }
.ai-note { font-size: 12.5px; color: #f3b577; background: rgba(236,110,41,.1); border: 1px solid rgba(236,110,41,.28);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 4px; line-height: 1.45; }
.ai-bar i.hi { background: #33a657; } .ai-bar i.mid { background: var(--brand); } .ai-bar i.lo { background: #5b606b; }
.ai-hit { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line);
  border-radius: 13px; padding: 13px 15px; transition: border-color .15s, background .15s; }
.ai-hit:hover { border-color: var(--tint-b); background: var(--panel-2); }
.ai-thumb-wrap { position: relative; flex: 0 0 auto; width: 150px; height: 90px; border-radius: 10px; overflow: hidden;
  background: #0c0d10; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.ai-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-noimg { position: absolute; font-size: 11px; color: var(--muted); } .ai-thumb-wrap.noimg .ai-thumb { display: none; }
.ai-score { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--mono); font-size: 14px; font-weight: 600; padding: 3px 8px; border-radius: 8px; backdrop-filter: blur(4px); }
.ai-score span { font-size: 9px; font-weight: 500; opacity: .8; }
.ai-score.hi { background: rgba(28,60,38,.85); color: #6ed18f; border: 1px solid rgba(51,166,87,.4); }
.ai-score.mid { background: rgba(43,38,90,.85); color: var(--brand-a); border: 1px solid var(--tint-b); }
.ai-score.lo { background: rgba(20,21,24,.85); color: var(--muted-2); border: 1px solid var(--line-2); }
.ai-hit-body { flex: 1; min-width: 0; }
.ai-cap { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.ai-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; font-size: 12px; }
.tag.rec { background: rgba(51,166,87,.14); color: #6ed18f; }
/* фокус с клавиатуры на кликабельных результатах/карточках (a11y) */
.ai-hit:focus-visible, .an-card:focus-visible, .ev.clickable:focus-visible, .cam:focus-visible {
  outline: none; border-color: var(--brand-l); box-shadow: 0 0 0 3px var(--tint); }
/* словесная метка релевантности рядом с баром — мгновенно читается без расшифровки % */
.ai-bar { display: flex; align-items: center; gap: 9px; background: transparent; height: auto; margin: 9px 0 2px; overflow: visible; }
.ai-bar-track { flex: 1 1 auto; min-width: 0; height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.ai-bar-track i { display: block; height: 100%; border-radius: 3px; }
.ai-bar-lbl { font-size: 11px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.ai-bar-lbl.hi { color: #6ed18f; } .ai-bar-lbl.mid { color: var(--brand-a); } .ai-bar-lbl.lo { color: var(--muted); }
/* слабые («ближайшие по смыслу») кадры визуально приглушены — чтоб не путать с уверенными */
.ai-hit.lvl-lo { opacity: .82; } .ai-hit.lvl-lo:hover, .ai-hit.lvl-lo:focus-visible { opacity: 1; }
/* разделитель «уверенные ↓ ближайшие» внутри выдачи */
.ai-sep { display: flex; align-items: center; gap: 12px; margin: 6px 2px 2px; font-size: 12px; color: var(--muted); }
.ai-sep::before, .ai-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.ai-sep span { flex: 0 0 auto; }
.ai-weak { display: flex; flex-direction: column; gap: 9px; }
.ai-more { width: 100%; margin: 2px 0; padding: 10px; background: #16181c; border: 1px solid var(--line-2);
  border-radius: 11px; color: var(--brand-a); font-size: 13px; font-weight: 600; }
.ai-more:hover { background: var(--panel-2); border-color: var(--tint-b); }
/* пустая выдача AI-поиска — единый стиль с empty-state остальных вьюх */
.ai-empty { text-align: center; padding: 38px 16px; color: var(--muted); }
.ai-empty-ic { font-size: 30px; color: var(--brand-l); opacity: .55; margin-bottom: 8px; }
.ai-empty .muted { margin-top: 6px; font-size: 13px; }

/* ===== ЕДИНЫЕ пустые / ошибочные состояния (все вьюхи) ===== */
.empty-state { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 16px; background: rgba(255,255,255,.02); }
.empty-state.slim { padding: 26px 16px; border: 0; background: transparent; }
.empty-ic { font-size: 30px; color: var(--brand-l); opacity: .55; margin-bottom: 10px; line-height: 1; }
.empty-state .muted { margin-top: 6px; font-size: 13px; }
.state-error { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 6px 0; }

/* Галерея проанализированных кадров */
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.an-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .15s, transform .12s; }
.an-card:hover { border-color: var(--tint-b); transform: translateY(-2px); }
.an-thumb-wrap { position: relative; aspect-ratio: 16 / 9; background: #0c0d10; display: flex; align-items: center; justify-content: center; }
.an-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.an-thumb-wrap.noimg .an-thumb { display: none; }
.an-ir { position: absolute; top: 7px; right: 7px; font-size: 10px; font-weight: 600; color: #cdd2da;
  background: rgba(0,0,0,.6); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 6px; }
.an-body { padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.an-cap { font-size: 13px; color: var(--ink-2); line-height: 1.42;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.an-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; margin-top: auto; }
.clickable { cursor: pointer; }
.event-ctrls { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.event-ctrls .sp { padding: 7px 13px; } .event-ctrls a { text-decoration: none; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #2a2d34; border-radius: 6px; border: 2px solid var(--bg-main); }

/* ===================== ТАЙМЛАПС ===================== */
/* Форма «Создать таймлапс» в Архиве */
.tl-make .tl-make-lead { font-size: 13px; margin: 4px 0 16px; line-height: 1.5; }
.tlf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tlf-field { display: grid; gap: 6px; font-size: 13px; color: var(--muted-2); font-weight: 500; }
.tlf-field input, .tlf-field select { width: 100%; }
.tlf-dur { display: flex; align-items: center; gap: 8px; }
.tlf-dur input { width: 72px; } .tlf-dur span { color: var(--muted); font-size: 13px; }
.tlf-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.tlf-readout { margin-top: 14px; }
.tlf-calc { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--ink-2); }
.tlf-calc b { color: var(--brand-a); }
.tlf-note { margin-top: 8px; font-size: 12.5px; color: #7fd49a; }
.tlf-err { margin-top: 8px; }

/* Раздел «Таймлапсы» — карточки задач */
.tl-jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tlj { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; }
.tlj-thumb-wrap { position: relative; aspect-ratio: 16 / 9; background: #0c0d10; }
.tlj-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.tlj-noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12.5px; }
.tlj-chip { position: absolute; top: 8px; left: 8px; font-size: 11.5px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; backdrop-filter: blur(4px); }
.tlj-chip.st-queued { background: rgba(255,255,255,.12); color: var(--ink-2); border: 1px solid var(--line-2); }
.tlj-chip.st-run { background: rgba(101,85,241,.85); color: #fff; border: 1px solid var(--tint-b); }
.tlj-chip.st-done { background: rgba(28,60,38,.85); color: #6ed18f; border: 1px solid rgba(51,166,87,.45); }
.tlj-chip.st-err { background: rgba(60,28,30,.85); color: var(--err); border: 1px solid rgba(239,106,112,.4); }
.tlj-body { padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tlj-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlj-meta { font-size: 12px; color: var(--muted-2); } .tlj-meta.muted { color: var(--muted); }
.tlj-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.tlj-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .4s ease; }
.tlj-err { font-size: 12.5px; }
.tlj-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.tlj-dl { text-decoration: none; } .tlj-actions .btn { padding: 9px 14px; font-size: 13px; }
.tlj-del { width: 36px; height: 36px; margin-left: auto; }
.tlj-player { margin-top: 8px; } .tlj-player video { width: 100%; border-radius: 10px; background: #000; }

/* гамбургер и затемнение — только мобайл/таблет (на десктопе скрыты) */
.nav-toggle { display: none; flex-shrink: 0; }
.nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 39; }

/* ===================== ТАБЛЕТ ≤768px ===================== */
@media (max-width: 768px) {
  /* сайдбар → off-canvas драйвер слева, выезжает по .nav-open */
  .layout { position: relative; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: 280px;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .app.nav-open .sidebar, #app.nav-open .sidebar { transform: translateX(0); }
  .nav-toggle { display: inline-flex; }
  /* основная область занимает всю ширину */
  .main { width: 100%; }
  .topbar { padding: 12px 16px; gap: 10px; }
  .content { padding: 18px 16px 64px; }
  .view-title { font-size: 18px; }
  /* плитки и галереи — компактнее, минимум 2 в ряд там, где помещается */
  .cam-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .an-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .tl-jobs-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .events { grid-template-columns: 1fr; }
  /* модалки — почти на весь экран, прокручиваемые */
  .modal { place-items: stretch; }
  .modal-card { width: 100%; max-width: none; max-height: 100vh; height: 100%; border-radius: 0;
    padding: 18px 16px; border: 0; }
  .ai-card { width: 100%; }
  .ai-results { max-height: none; }
}

/* ===================== ТЕЛЕФОН ≤600px ===================== */
@media (max-width: 600px) {
  .login-card { width: 100%; max-width: 360px; }
  .topbar { padding: 11px 13px; }
  .content { padding: 14px 13px 60px; }
  /* плитки камер и кадров — одна колонка */
  .cam-grid { grid-template-columns: 1fr; }
  .an-grid { grid-template-columns: 1fr; }
  /* AI-поиск: подсказка в плейсхолдере короче по высоте, тег AI остаётся */
  .ai-search { padding: 12px 14px; }
  /* AI-форма в модалке — кнопка под полем (чтоб не сжимать ввод) */
  .ai-form { flex-wrap: wrap; }
  .ai-form #ai-q { flex: 1 0 100%; min-width: 0; }
  .ai-form .btn { flex: 1 0 100%; }
  .ai-form-ic { top: 14px; }  /* прижать лупу к строке ввода, не к центру обёрнутой формы */
  /* результат AI-поиска — превью над текстом */
  .ai-hit { flex-direction: column; }
  .ai-thumb-wrap { width: 100%; height: 160px; }
  /* таблица тарифов — стопкой, без 5-колоночной сетки */
  .trow { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .trow span:nth-child(2), .trow span:nth-child(5) { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv b { margin-top: 6px; }
  /* блок управления (архив/онбординг): элементы на всю ширину, тач-таргеты */
  .arc-ctrls { flex-direction: column; align-items: stretch; }
  .arc-ctrls select, .arc-ctrls input, .arc-ctrls button { width: 100%; }
  /* таймлайн: толще трек и ручки под палец, тулбар стопкой */
  .tl-track { height: 64px; }
  .tl-handle { width: 22px; }
  .tl-handle.start { left: -11px; } .tl-handle.end { right: -11px; }
  /* Тулбар на телефоне: deliberate перенос в строки (не один длинный столбец) — много контролов.
     Ряд действий (скорость + предпросмотр + скачать) стопкой во всю ширину; ряд редактирования
     (Set Start/End + пресеты) — сеткой 2-в-ряд, тач-таргеты читаемы и нажимаемы. */
  .tl-toolbar-act { flex-direction: column; align-items: stretch; }
  .tl-toolbar-act .tl-speed { width: 100%; } .tl-sp { flex: 1; text-align: center; padding: 12px 0; }
  .tl-toolbar-act .btn { width: 100%; }
  .tl-fmt, .tl-warn { text-align: center; width: 100%; }
  /* ряд редактирования: Set Start/End в строку, пресеты ниже отдельной строкой */
  .tl-toolbar-edit { display: flex; flex-wrap: wrap; gap: 8px; }
  .tl-toolbar-edit .tl-setbtn { flex: 1 1 30%; padding: 12px 8px; }     /* «← К эфиру»/«Начало»/«Конец» в ряд */
  .tl-presets { flex: 1 1 100%; }                                        /* пресеты — своя строка */
  .tl-presets .chip { flex: 1 1 auto; text-align: center; padding: 11px 10px; }
  .tl-size { text-align: center; width: 100%; }
  .tl-preview { max-width: 100%; }
  /* видеоплеер не вылезает за экран */
  .player { max-width: 100%; }
  .live-wrap { max-width: 100%; }
  /* тач-таргеты ≥44px у ключевых кнопок */
  .btn { padding: 13px 18px; }
  .icon-btn { width: 44px; height: 44px; }
  .nav-item { padding: 12px 12px; }
  .summary { padding: 18px 16px; }
  .stat { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .event-ctrls { flex-direction: column; align-items: stretch; }
  .event-ctrls a, .event-ctrls .btn { text-align: center; }
  /* таймлапс: форма и карточки — одна колонка, кнопки во всю ширину */
  .tlf-grid { grid-template-columns: 1fr; }
  .tlf-actions { flex-direction: column; align-items: stretch; }
  .tlf-actions .btn { width: 100%; text-align: center; }
  .tl-jobs-grid { grid-template-columns: 1fr; }
}

/* ---------- Новый плеер в попапе (iframe-модалка, не фуллскрин) ---------- */
.player-modal { position: fixed; inset: 0; background: rgba(11, 15, 26, .55); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.player-modal.open { display: flex; }
.player-modal-card { width: min(1480px, 96vw); height: min(900px, 94vh); background: #1a1c22; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .55); }
.player-frame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 720px) { .player-modal { padding: 0; } .player-modal-card { width: 100vw; height: 100vh; border-radius: 0; } }