/* Тёмная тема в стиле старого ЛК lk.timelapsego.ru (base_new.html): градиентный фон, синие акценты, карточки #1e293b */
:root{--bg:#0f172a;--sur:#1e293b;--sur2:#334155;--ink:#f8fafc;--mut:#94a3b8;--line:#475569;--acc:#3b82f6;--acc-h:#2563eb;--acc2:rgba(59,130,246,.15);
--err:#f87171;--ok:#4ade80;--warn:#f59e0b;--red:#ef4444;--radius:12px;--shadow:0 10px 30px rgba(0,0,0,.4)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.5 'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
background:linear-gradient(135deg,#0a0f1a 0%,#1a2238 30%,#0f172a 70%,#080c14 100%) fixed}
a{color:var(--acc)}a:hover{color:#60a5fa}
h1{font-size:1.6rem;font-weight:600;margin:.2em 0 .8em;background:linear-gradient(45deg,var(--ink),#94a3b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2{font-size:1.15rem;margin:.2em 0 .6em}h3{font-size:1rem;margin:.6em 0 .3em}

/* шапка */
.top{position:sticky;top:0;z-index:100;display:flex;gap:24px;align-items:center;padding:.6rem 1.5rem;flex-wrap:wrap;
background:rgba(15,23,42,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}.logo{height:56px;width:auto}
.brand-text{font-size:1.5rem;font-weight:700;background:linear-gradient(45deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-text .hl{color:#ef4444;-webkit-text-fill-color:#ef4444}
.top nav{display:flex;gap:.5rem;flex-wrap:wrap}
.top nav a{color:var(--ink);text-decoration:none;padding:.5rem 1rem;border-radius:8px;font-weight:500;transition:all .2s}
.top nav a:hover{background:var(--acc2);color:var(--acc)}.top nav a.active{background:var(--acc);color:#fff}
.who{margin-left:auto;display:flex;gap:14px;align-items:center;color:var(--mut);font-size:.9rem}.who a{color:var(--mut)}
.who button.link{color:var(--ink);text-decoration:none;font-weight:500}

.wrap{max-width:1400px;margin:0 auto;padding:1.2rem 1rem}.foot{text-align:center;color:var(--mut);font-size:.8rem;padding:30px}

/* карточки, формы, кнопки */
.card{background:var(--sur);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:16px;box-shadow:var(--shadow)}
.narrow{max-width:440px;margin:50px auto}
.form label{display:block;margin:12px 0 5px;font-weight:500}
.form input,.form select,.inline input,.inline select,.cmpform input{padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;font:inherit;width:100%;
background:var(--sur2);color:var(--ink);color-scheme:dark}
.form input:focus,.form select:focus,.inline input:focus,.cmpform input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}.inline input,.inline select{width:auto;flex:1 1 120px}.inline.wrap{gap:6px}.inl{display:inline}
.btn{background:var(--acc);color:#fff;border:0;border-radius:8px;padding:.65rem 1.3rem;font:inherit;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s}
.btn:hover{background:var(--acc-h);color:#fff}.btn.ghost{background:var(--sur2);color:var(--ink)}.btn.ghost:hover{background:var(--line)}
.form .btn{margin-top:16px}button.link{background:none;border:0;color:var(--acc);cursor:pointer;font:inherit;padding:0;text-decoration:underline}form{margin:0}
.err{color:var(--err)}.note{background:var(--acc2);border-left:3px solid var(--acc);padding:8px 12px;border-radius:0 8px 8px 0}.muted{color:var(--mut)}.small{font-size:.85rem}
.tag{background:var(--sur2);border-radius:4px;padding:1px 8px;font-size:.75rem;color:var(--mut)}code{background:var(--sur2);padding:1px 6px;border-radius:4px}
.cred pre{background:#020617;color:#fff;padding:12px;border-radius:8px;font-size:1rem;user-select:all}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:900px){.cols{grid-template-columns:1fr}}
.list{list-style:none;padding:0;margin:0}.list li{padding:6px 0;border-bottom:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse}.tbl td,.tbl th{padding:8px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}.tbl th{color:var(--mut);font-weight:500}.acts form{display:inline;margin-right:10px}

/* ситуационный центр: плитки с рамкой по свежести снимка */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tile{display:block;background:#111827;border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.tile.fr-fresh{border-color:#16a34a;box-shadow:0 0 14px rgba(34,197,94,.35)}
.tile.fr-warn{border-color:var(--warn);box-shadow:0 0 14px rgba(245,158,11,.45)}
.tile.fr-old{border-color:var(--red);box-shadow:0 0 14px rgba(239,68,68,.5)}
.tile img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}.noimg{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--mut);background:#0b1220}
.cap{padding:8px 10px;display:flex;justify-content:space-between;gap:8px;font-size:.85rem;background:rgba(15,23,42,.9)}
.camname{min-width:0}.ts{color:var(--mut);white-space:nowrap;background:rgba(0,0,0,.5);padding:1px 8px;border-radius:6px;align-self:flex-start}.ts.stale{color:var(--err)}

/* камера: календарь + просмотр */
.camhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.actions{display:flex;gap:8px}
.camlayout{display:grid;grid-template-columns:290px 1fr;gap:18px}@media(max-width:800px){.camlayout{grid-template-columns:1fr}}
.cal{background:var(--sur);border:1px solid var(--line);border-radius:var(--radius);padding:12px;align-self:start;box-shadow:var(--shadow)}
.calnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.calnav a{text-decoration:none;font-size:1.3rem;padding:0 8px;color:var(--ink)}
.caldays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.caldays>span{color:var(--mut);font-size:.8rem;padding:4px 0}.caldays a,.caldays .no{display:block;padding:6px 0;border-radius:6px;text-decoration:none}
.caldays a.has{background:var(--acc2);color:var(--ink);font-weight:600}.caldays a.has:hover{background:rgba(59,130,246,.3)}.caldays a.sel{background:var(--acc);color:#fff}.caldays .no{color:#475569}
.viewer{background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.viewer img{width:100%;max-height:70vh;object-fit:contain;display:block;cursor:zoom-in}
.vbar{display:flex;justify-content:space-between;padding:8px 12px;color:#ddd;font-size:.9rem;background:var(--sur)}.vbar a{color:#fff}
.strip{display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-color:var(--line) transparent}
.th{flex:0 0 130px;border:2px solid transparent;border-radius:8px;padding:3px;background:var(--sur);cursor:pointer;text-align:center;font-size:.75rem;color:var(--mut)}
.th img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px;display:block}.th.sel{border-color:var(--acc);color:var(--acc);font-weight:600;box-shadow:0 0 10px rgba(59,130,246,.5)}
.cmpform{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:14px}.cmpform label{display:flex;flex-direction:column;font-size:.85rem;gap:4px}.cmpform input{width:auto}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:800px){.cmp{grid-template-columns:1fr}}
.cmp figure{margin:0;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.cmp img{width:100%;display:block}.cmp figcaption{color:#ddd;padding:6px 10px;font-size:.9rem;background:var(--sur)}.cmp figcaption a{color:#fff}
.rot90{transform:rotate(90deg)}.rot180{transform:rotate(180deg)}.rot270{transform:rotate(270deg)}
.chk{display:flex;gap:8px;align-items:center}.chk input{width:auto;accent-color:var(--acc)}.site{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.full{position:fixed;inset:0;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;z-index:200;cursor:zoom-out}.full img{max-width:100%;max-height:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ролики */
.rcard{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.rmain{flex:1;min-width:0}.racts{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.prog{height:8px;background:var(--sur2);border-radius:4px;overflow:hidden;margin:6px 0 2px;max-width:400px}.prog div{height:100%;background:var(--acc);transition:width .5s}
.st-failed{border-color:var(--red)}.st-completed{border-left:3px solid var(--ok)}.st-processing{border-left:3px solid var(--acc)}

/* слайдер времени суток на странице камеры */
.tslider{margin:0 0 10px}.tslider input{width:100%;accent-color:var(--acc);cursor:pointer;margin:0}
.tlabels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mut);padding:0 2px}@media(max-width:800px){.tlabels span:nth-child(even){display:none}}

/* сравнение: шторка поверх двух наложенных кадров */
.cmpover{--cut:50%;position:relative;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;max-height:75vh;user-select:none;touch-action:none}
.cmpover .ca,.cmpover .cb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cmpover .cb{clip-path:inset(0 0 0 var(--cut))}
.cmpover .noimg{aspect-ratio:auto}
.clab{position:absolute;bottom:12px;z-index:3;color:#fff;background:rgba(0,0,0,.7);padding:6px 10px;border-radius:6px;font-size:.85rem;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.1);pointer-events:none}
.clab.la{left:12px}.clab.lb{right:12px}
.cdiv{position:absolute;top:0;left:50%;width:3px;height:100%;margin-left:-1px;z-index:4;pointer-events:none;background:linear-gradient(to bottom,transparent,#cbd5e1,transparent);box-shadow:0 0 10px rgba(203,213,225,.5)}
.cdiv::before{content:'⋮';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:20px;background:rgba(15,23,42,.8);border-radius:50%;width:28px;height:28px;line-height:28px;text-align:center}
#crange{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5;-webkit-appearance:none;appearance:none;background:none}
#crange::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:100%}#crange::-moz-range-thumb{width:40px;height:100%;border:0}
.cmpwrap .cmp{display:none}.cmpwrap.side .cmp{display:grid}.cmpwrap.side .cmpover{display:none}
@media(max-width:800px){.clab{font-size:.72rem;padding:4px 6px;bottom:6px}.clab.la{left:6px}.clab.lb{right:6px}}

/* ситуационный центр: панель управления и полноэкранный режим */
.scpanel{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--sur);border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px;margin-bottom:14px;font-size:.9rem}
.scpanel .btn{padding:.45rem .9rem;font-size:.85rem}.scpanel input[type=number]{width:60px;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:var(--sur2);color:var(--ink);font:inherit;color-scheme:dark}
.scexit{display:none}
#sc.fs{background:#000;padding:8px;overflow:auto}
#sc.fsfake{position:fixed;inset:0;z-index:300}
#sc:fullscreen{width:100%;height:100%}
#sc.fs .grid{height:100%;grid-auto-rows:1fr;gap:8px;align-content:stretch}
#sc.fs .tile{display:flex;flex-direction:column;min-height:0;border-radius:8px}
#sc.fs .tile img,#sc.fs .tile .noimg{flex:1;min-height:0;aspect-ratio:auto;height:100%;object-fit:cover}
#sc.fs .tile:hover{transform:none}
#sc.fs .scexit{display:block;position:fixed;right:12px;top:12px;z-index:5;opacity:.6}#sc.fs .scexit:hover{opacity:1}
@media(max-width:800px){#sc.fs .grid{grid-template-columns:1fr 1fr!important;height:auto;grid-auto-rows:auto}#sc.fs .tile img{aspect-ratio:16/9;height:auto}}

/* плитки-переключатели камер и заголовки по центру (структура старого ЛК) */
h1.center{text-align:center}.center{text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1000px;margin:0 auto 18px;padding:12px;background:rgba(30,41,59,.6);border:1px solid var(--line);border-radius:var(--radius)}
.chip{display:inline-block;padding:.5rem 1rem;border-radius:8px;background:var(--sur);color:var(--ink);text-decoration:none;font-weight:500;border:1px solid transparent;transition:all .15s}
.chip:hover{background:var(--acc2);color:var(--acc)}.chip.active{background:rgba(59,130,246,.3);color:#60a5fa;font-weight:700;border-color:rgba(59,130,246,.5)}
.who a.active{color:var(--acc)}

/* админка: карточки камер */
.camcard{padding:1rem 1.2rem}.camhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.camlogin{font-size:1rem;margin-right:10px}.camstat{display:flex;gap:14px;flex-wrap:wrap;color:var(--mut)}.camstat b{color:var(--ink);font-weight:500}
.camgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:1000px){.camgrid{grid-template-columns:1fr}}
.fs{border:1px solid var(--line);border-radius:10px;padding:10px 14px 14px;margin:0;min-width:0}.fs legend{color:var(--mut);font-size:.8rem;padding:0 6px;text-transform:uppercase;letter-spacing:.04em}
.fs label{display:block;font-size:.8rem;color:var(--mut);margin-top:8px}.fs label input,.fs label select{display:block;width:100%;margin-top:4px;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.95rem;background:var(--sur2);color:var(--ink)}
.fs label input:focus,.fs label select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.fs .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.fs .chk-big{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--ink);margin-top:12px;padding:.5rem 0}.fs .chk-big input{width:18px;height:18px;margin:0;display:inline-block}
.camacts{display:flex;align-items:center;gap:16px;margin-top:12px}

.btn.danger{background:var(--err);color:#fff}.btn.danger:hover{filter:brightness(1.15)}details.danger{margin-top:12px}details.danger summary{cursor:pointer}

.card.doc{max-width:860px;margin:0 auto;line-height:1.55}.card.doc h1{font-size:1.5rem}.card.doc h2{margin-top:1.4em}.card.doc table{border-collapse:collapse;width:100%;margin:8px 0}.card.doc td,.card.doc th{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}.card.doc hr{border:0;border-top:1px solid var(--line);margin:1.5em 0}