:root{--bg:#0f1714;--panel:#17221d;--fg:#e8efe9;--muted:#93a69b;--accent:#5fd39a;--live:#ff4d4d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent)}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1040px;margin:0 auto;padding:18px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--fg);text-decoration:none}
.dot{width:10px;height:10px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px rgba(255,77,77,.18)}
nav a{margin-left:16px;color:var(--muted);text-decoration:none}
nav a.on{color:var(--fg)}
nav a.lang{border:1px solid #2c3d34;border-radius:14px;padding:2px 10px}
main{max-width:1040px;margin:0 auto;padding:0 20px 40px}
.hero h1{font-size:34px;line-height:1.2;margin:12px 0 10px}
.hero p{max-width:720px;color:#c9d6cd}
.note{font-size:14px;color:var(--muted)!important}
.section{font-size:20px;margin:30px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.cam{background:var(--panel);border-radius:12px;overflow:hidden}
.cam h3{margin:12px 14px 2px;font-size:17px}
.cam p{margin:0 14px 14px;color:var(--muted);font-size:14px}
.screen{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,#35546a 0%,#7b97a6 45%,#d9e3e6 46%,#4d6b55 47%,#22352a 100%)}
.screen.s2{background:linear-gradient(170deg,#1f3550 0%,#6d8fb0 40%,#f1f4f6 41%,#9aa9b3 55%,#3c4d45 100%)}
.screen.s3{background:linear-gradient(175deg,#47637d 0%,#a9c0cf 50%,#6f8f5c 51%,#3f5c35 100%);filter:grayscale(.6)}
.badge{position:absolute;top:10px;left:10px;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}
.badge.live{background:var(--live);color:#fff}
.badge.off{background:#44514a;color:#d5ddd8}
.res{position:absolute;right:10px;bottom:10px;font-size:12px;background:rgba(0,0,0,.55);padding:2px 7px;border-radius:5px}
.videos{list-style:none;padding:0;margin:0}
.videos li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--panel);border-radius:10px;padding:12px 16px;margin:10px 0}
.videos span{color:var(--muted);font-size:14px}
footer{max-width:1040px;margin:0 auto;padding:20px;color:var(--muted);font-size:14px}