:root{
  --bg:#0c0d0f;
  --panel:#121317;
  --muted:#1a1c22;
  --text:#e7e9ee;
  --text-dim:#a9adb7;
  --accent:#b0b6bf;
  --online:#32d74b;
  --magenta:#ff2ea6;
  --white:#ffffff;
  --border:#222632;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, Manrope, Rubik, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* === TOPBAR (верхнее меню) === */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1200px; margin:0 auto;
  padding:10px 16px;
  display:flex; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:40px;height:40px}
.title{font-weight:700; letter-spacing:0.6px}
.badge{font-size:12.5px;color:var(--text-dim)}
.icom .i{color:var(--white);font-weight:700}
.icom .com{color:var(--magenta);font-weight:800;letter-spacing:0.5px}

.nav{display:flex; gap:8px; margin-left:auto}
.nav-link{
  display:block; padding:8px 12px; color:var(--text); text-decoration:none;
  border:1px solid transparent; border-radius:10px;
}
.nav-link:hover{background:var(--muted)}
.nav-link.active{border-color:var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0))}

/* Burger */
.burger{
  display:none; background:transparent; border:0; padding:8px; cursor:pointer;
}
.burger span{display:block;width:28px;height:2px;background:var(--text);margin:6px 0;border-radius:1px}

/* === LAYOUT: одна колонка (плеер, затем список) === */
.layout.vertical{
  max-width:1200px; margin:0 auto;
  padding:16px; display:flex; flex-direction:column; gap:16px;
}

.player-wrap{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}
.player-wrap.compact{ /* короче секция — только высота плеера и подпись */
  padding-bottom:10px;
}
.player{
  width:100%;
  aspect-ratio:16/9; /* фикс. высота плеера */
  background:#000;
  border-radius:12px;
  overflow:hidden;
}
.player.flash { box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset; }
.now-playing{
  margin-top:10px;
  display:flex; align-items:center; gap:8px;
  color:var(--text-dim); font-size:14px;
}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#666}
.dot.online{ background:var(--online); box-shadow:0 0 10px rgba(50,215,75,.6) }

.list-wrap{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  display:flex; flex-direction:column; gap:12px;
}
.list-toolbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between
}
.tabs{display:flex;gap:8px}
.tab{
  background:var(--muted); border:1px solid var(--border);
  color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer;
}
.tab.active{outline:2px solid var(--border)}
.search{
  background:#0e1014;color:var(--text);
  border:1px solid var(--border); border-radius:10px; padding:8px 12px; min-width:180px;
}

.camera-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.camera-item{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center;
  padding:10px; border:1px solid var(--border); border-radius:12px; background:#0f1116;
}
.status{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:13px}
.cam-title{font-weight:600}
.cam-desc{color:var(--text-dim); font-size:13px}
.play-btn, .fav-btn{
  appearance:none; border:1px solid var(--border); background:var(--muted); color:var(--text);
  padding:10px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
}
.play-btn:hover, .fav-btn:hover{ filter:brightness(1.1) }

/* Icons */
.icon{width:18px;height:18px;display:inline-block}
.icon.play{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="%23fff" d="M6 4l10 5-10 5z"/></svg>') no-repeat center/contain; background:#fff}
.icon.star{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path fill="%23fff" d="M9 1l2.2 4.5L16 6l-3.5 3.4L13 15l-4-2.2L5 15l.5-5.6L2 6l4.8-.5z"/></svg>') no-repeat center/contain; background:#aab0bb}
.icon.star.filled{background:var(--magenta)}

/* Contacts */
.contacts-layout{ padding:16px; }
.cards{ display:grid; gap:12px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; }
.card-icon{font-size:26px}
.card-title{margin:8px 0 6px}
.card-text{color:var(--text-dim); margin:0}
.map-wrap{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}

.map-embed{
  background:#0f1116;
  border:1px dashed var(--border);
  border-radius:12px;
  padding:8px;
  overflow:hidden; /* обрезаем углы у iframe */
}

/* Адаптивное соотношение сторон */
.map-ratio{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;   /* можно 4/3 или 21/9 */
  max-height:70vh;
}

.map-ratio iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block;
  border-radius:8px;
}

@media (max-width:1024px){
  .map-ratio{ aspect-ratio: 4 / 3; }
}

/* Responsive */
@media (max-width: 1024px){
  .nav{display:none}
  .topbar.open .nav{
    display:flex; position:absolute; left:0; right:0; top:56px; gap:8px;
    background:var(--panel); padding:12px 16px; border-bottom:1px solid var(--border);
  }
  .burger{display:block}
  .cards{ grid-template-columns: 1fr; }
}

/* ==== REC-точка на логотипе (пульсация) ==== */
.logo-wrap{
  position: relative;
  width: 40px;  /* под размеры .logo */
  height: 40px;
  flex: 0 0 40px;
}
.rec-dot{
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  background: #ff3b30;          /* красная точка */
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,59,48,0.7);
  animation: recPulse 1.6s ease-out infinite;
}
.rec-dot::after{
  content: 'REC';
  position: absolute;
  left: 12px; top: -3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ff3b30;
  text-transform: uppercase;
  opacity: .95;
}
@keyframes recPulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,59,48,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
@media (max-width: 480px){
  /* на очень узких экранах уберём подпись REC, оставим точку */
  .rec-dot::after{ display: none; }
  .card-text a, .card-text { word-break: break-word; }
}