:root{
      --header-dark:#081019;
      --header-dark-2:#101926;

      --blue-top:#0a3d59;
      --blue-mid:#0d5b82;
      --blue-bottom:#1078a7;

      --page-light:#eef2f6;
      --surface:#ffffff;
      --surface-2:#f7f9fb;
      --line:rgba(255,255,255,.16);
      --line-dark:rgba(10,20,35,.10);

      --text:#15202d;
      --muted:#627080;
      --white:#ffffff;
      --danger:#d83b3b;

      --shadow:0 12px 34px rgba(24, 38, 56, .10);
      --shadow-lg:0 24px 54px rgba(12,20,31,.20);

      --radius:24px;
      --transition:.25s ease;
      --maxw:1720px;

      --content-bg:#eff3f7;
      --content-card:#ffffff;
      --content-card-2:#f8fafc;
      --content-text:#131d28;
      --content-muted:#5f6d7b;
      --content-line:rgba(14,24,36,.10);
      --content-heading:#0f1722;
      --content-sub:#516170;

      --glass-bg:rgba(255,255,255,.72);
      --glass-border:rgba(255,255,255,.45);

      --control-bg:rgba(17,25,38,.72);
      --control-hover:rgba(17,25,38,.90);
    }

    html[data-theme="dark"]{
      --page-light:#0f141a;
      --text:#eef4fb;
      --muted:#a3b1c0;

      --content-bg:#0f141a;
      --content-card:#18212c;
      --content-card-2:#1d2733;
      --content-text:#eef4fb;
      --content-muted:#a9b7c6;
      --content-line:rgba(255,255,255,.10);
      --content-heading:#ffffff;
      --content-sub:#c6d1dd;

      --glass-bg:rgba(24,33,44,.82);
      --glass-border:rgba(255,255,255,.08);

      --shadow:0 12px 34px rgba(0,0,0,.22);
      --shadow-lg:0 24px 54px rgba(0,0,0,.35);

      --control-bg:rgba(14,19,28,.78);
      --control-hover:rgba(14,19,28,.96);
    }

    *{ box-sizing:border-box; }

    html,body{
      margin:0;
      padding:0;
      font-family:Inter, Arial, Helvetica, sans-serif;
      color:var(--text);
      background:var(--page-light);
    }

    body{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    button,input,textarea,select{ font:inherit; }

    .topbar{
      position:sticky;
      top:0;
      z-index:200;
      background:rgba(8,16,25,.88);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(255,255,255,.08);
      color:#fff;
    }

    .topbar-inner{
      max-width:var(--maxw);
      margin:0 auto;
      padding:14px 22px;
      display:flex;
      align-items:center;
      gap:16px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    .brand-mark{
      position:relative;
      width:16px;
      height:16px;
      border-radius:50%;
      background:#ff2d2d;
      flex:0 0 auto;
      box-shadow:0 0 0 2px rgba(255,255,255,.08);
    }

    .brand-mark::after{
      content:"";
      position:absolute;
      inset:-8px;
      border-radius:50%;
      border:2px solid rgba(216,59,59,.85);
      animation:pulseLive 1.8s infinite ease-out;
    }

    @keyframes pulseLive{
      0%{ transform:scale(.7); opacity:.95; }
      70%{ transform:scale(1.7); opacity:0; }
      100%{ transform:scale(1.7); opacity:0; }
    }

    .brand-title{
      font-size:18px;
      font-weight:900;
      line-height:1.1;
      letter-spacing:-0.02em;
    }

    .brand-sub{
      margin-top:3px;
      font-size:12px;
      color:rgba(255,255,255,.7);
    }

    .spacer{ flex:1 1 auto; }

    .header-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .ghost-btn,
    .user-btn,
    .user-menu button,
    .theme-toggle{
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.08);
      color:#fff;
      border-radius:16px;
      cursor:pointer;
      transition:var(--transition);
      font:inherit;
    }

    .ghost-btn,
    .theme-toggle,
    .user-btn{
      min-height:46px;
      padding:0 14px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      box-shadow:var(--shadow);
      white-space:nowrap;
      font-weight:800;
    }

    .ghost-btn:hover,
    .theme-toggle:hover,
    .user-btn:hover,
    .user-menu button:hover{
      background:rgba(255,255,255,.14);
      transform:translateY(-1px);
    }

    .ghost-btn.active{
      background:rgba(255,255,255,.20);
      border-color:rgba(255,255,255,.18);
    }

    .theme-toggle{
      width:46px;
      min-width:46px;
      padding:0;
      justify-content:center;
      border-radius:50%;
    }

    .theme-icon{
      width:22px;
      height:22px;
      display:block;
      position:relative;
    }

    .theme-icon-sun,
    html[data-theme="light"] .theme-icon-moon{
      display:none;
    }

    html[data-theme="light"] .theme-icon-sun{
      display:block;
    }

    html[data-theme="dark"] .theme-icon-moon{
      display:block;
    }

    .theme-icon svg{
      width:100%;
      height:100%;
      display:block;
      fill:none;
      stroke:#fff;
      stroke-width:1.9;
      stroke-linecap:round;
      stroke-linejoin:round;
    }

    .user-wrap{ position:relative; }

    .user-avatar{
      width:30px;
      height:30px;
      border-radius:50%;
      background:#fff;
      color:#0d2b3d;
      border:1px solid rgba(255,255,255,.16);
      display:grid;
      place-items:center;
      font-size:13px;
      font-weight:900;
      flex:0 0 auto;
    }

    .user-label{
      font-size:14px;
      font-weight:800;
    }

    .user-menu{
      position:absolute;
      right:0;
      top:calc(100% + 10px);
      width:240px;
      padding:10px;
      background:#0f1722;
      border:1px solid rgba(255,255,255,.08);
      border-radius:20px;
      box-shadow:var(--shadow-lg);
      display:none;
    }

    .user-menu.open{ display:block; }

    .user-menu-head{
      padding:8px 8px 12px;
      border-bottom:1px solid rgba(255,255,255,.08);
      margin-bottom:8px;
      color:#fff;
    }

    .user-menu-title{
      font-size:14px;
      font-weight:900;
    }

    .user-menu-sub{
      margin-top:4px;
      font-size:12px;
      color:rgba(255,255,255,.66);
    }

    .user-menu button{
      width:100%;
      text-align:left;
      padding:12px 12px;
      margin-top:6px;
      border-radius:14px;
    }

    .page{
      width:100%;
      flex:1 1 auto;
      background:var(--content-bg);
      transition:background var(--transition);
      position:relative;
    }

    .blue-zone{
      background:linear-gradient(180deg, var(--blue-top) 0%, var(--blue-mid) 58%, var(--blue-bottom) 100%);
      color:#fff;
      position:relative;
      overflow:hidden;
      transition:opacity .35s ease, transform .45s ease, filter .35s ease;
      isolation:isolate;
    }

    /* MOZGÓ HÁTTÉRKÉP RÉTEG */
    .blue-zone-bg{
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      overflow:hidden;
    }

    .blue-zone-slide{
      position:absolute;
      inset:-10%;
      background-position:center center;
      background-size:cover;
      background-repeat:no-repeat;
      opacity:0;
      transform:translateY(-8%) scale(1.08);
      filter:blur(2px) brightness(1.08) saturate(1.04);
      transition:
        opacity 2.8s ease,
        transform 14s ease;
      will-change:transform, opacity;
    }

    .blue-zone-slide.show{
      opacity:.34;
      transform:translateY(8%) scale(1.14);
    }

    .blue-zone-slide.hide{
      opacity:0;
      transform:translateY(14%) scale(1.16);
    }

    /* világos, üveges blur réteg */
    .blue-zone-glow{
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07) 36%, rgba(255,255,255,.03) 100%),
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.16), transparent 26%),
        radial-gradient(circle at 80% 15%, rgba(255,255,255,.10), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(255,255,255,.10), transparent 30%);
      backdrop-filter:blur(10px);
      mix-blend-mode:screen;
    }

    .blue-zone::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      background:
        radial-gradient(circle at left top, rgba(255,255,255,.08), transparent 30%),
        radial-gradient(circle at right top, rgba(255,255,255,.06), transparent 25%);
      pointer-events:none;
    }

    .hero{
      max-width:var(--maxw);
      margin:0 auto;
      padding:34px 22px 22px;
      position:relative;
      z-index:2;
    }

    .hero-box{
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
      gap:24px;
      align-items:stretch;
      padding:28px;
      border-radius:30px;
      background:linear-gradient(180deg, rgba(9,53,77,.82), rgba(13,91,130,.72));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:var(--shadow-lg);
      overflow:hidden;
      position:relative;
      backdrop-filter:blur(6px);
      z-index:2;
    }

    .hero-copy{
      position:relative;
      z-index:1;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.16);
      color:#fff;
      font-size:12px;
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
    }

    .eyebrow-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#fff;
    }

    .hero h1{
      margin:16px 0 0;
      font-size:44px;
      line-height:1.02;
      font-weight:900;
      letter-spacing:-0.04em;
      max-width:840px;
      color:#fff;
    }

    .hero p{
      margin:16px 0 0;
      max-width:760px;
      font-size:16px;
      line-height:1.65;
      color:rgba(255,255,255,.90);
    }

    .hero-note{
      margin-top:20px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .hero-chip{
      padding:10px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.14);
      font-size:13px;
      font-weight:700;
      color:#fff;
    }

    .hero-visual{
      min-width:0;
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      align-content:center;
    }

    .visual-card{
      aspect-ratio:16/10;
      border-radius:22px;
      overflow:hidden;
      background:#ddd;
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.25);
      position:relative;
    }

    .visual-card:nth-child(1){ transform:translateY(18px); }
    .visual-card:nth-child(2){ transform:translateY(-10px); }
    .visual-card:nth-child(3){ transform:translateY(8px); }
    .visual-card:nth-child(4){ transform:translateY(-16px); }

    .visual-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .content-stage{
      position:relative;
      z-index:2;
      transition:opacity .35s ease, transform .45s ease, filter .35s ease;
    }

    .page.player-open .blue-zone,
    .page.player-open .content-stage{
      opacity:0;
      transform:translateY(-18px) scale(.99);
      filter:blur(6px);
      pointer-events:none;
      user-select:none;
    }

    .section{
      max-width:var(--maxw);
      margin:0 auto;
      padding:0 22px 36px;
      position:relative;
      z-index:1;
      background:var(--content-bg);
      transition:background var(--transition);
    }

    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:16px;
      margin:26px 0 18px;
      flex-wrap:wrap;
      color:var(--content-heading);
    }

    .section-head-inner{
      display:flex;
      align-items:center;
      gap:16px;
      width:100%;
      max-width:100%;
    }

    .section-line{
      flex:0 0 360px;
      height:1px;
      background:var(--content-line);
    }

    .section-title-wrap{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
    }

    .section-title{
      margin:0;
      font-family:Georgia, "Times New Roman", serif;
      font-size:32px;
      font-weight:700;
      letter-spacing:-0.03em;
      color:var(--content-heading);
    }

    .section-sub{
      margin:0;
      font-size:12px;
      text-transform:uppercase;
      font-weight:800;
      color:var(--content-sub);
    }

    .player-layer{
      position:fixed;
      left:0;
      right:0;
      top:78px;
      bottom:0;
      z-index:150;
      padding:18px 22px 22px;
      pointer-events:none;
      opacity:0;
      transition:opacity .28s ease;
    }

    .player-layer.open{
      pointer-events:auto;
      opacity:1;
    }

    .player-backdrop{
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(7,11,18,.22), rgba(7,11,18,.58));
      backdrop-filter:blur(10px);
      opacity:0;
      transition:opacity .38s ease;
    }

    .player-layer.open .player-backdrop{
      opacity:1;
    }

    .player-panel{
      position:relative;
      max-width:var(--maxw);
      margin:0 auto;
      height:100%;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      transform:translateY(40px) scale(.94);
      transform-origin:center 30%;
      opacity:0;
      transition:transform .5s cubic-bezier(.16,.84,.24,1), opacity .34s ease;
    }

    .player-layer.open .player-panel{
      transform:translateY(0) scale(1);
      opacity:1;
    }

    .player-layout{
      width:100%;
      max-width:1180px;
      margin:0 auto;
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
      align-items:start;
    }

    .player-main{
      min-width:0;
      position:relative;
    }

    .player-shell{
      position:relative;
      width:100%;
      aspect-ratio:16/9;
      border-radius:30px;
      overflow:hidden;
      background:#000;
      box-shadow:0 30px 70px rgba(0,0,0,.38);
      border:1px solid rgba(255,255,255,.06);
    }

    .player-video{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      background:#000;
    }

    .player-gradient{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.26) 48%, rgba(0,0,0,.64));
      pointer-events:none;
      z-index:2;
    }

    .player-topbar{
      position:absolute;
      top:18px;
      left:18px;
      right:18px;
      z-index:4;
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:14px;
    }

    .player-topbar-left,
    .player-topbar-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .player-controls{
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
      z-index:4;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .player-controls-inner{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .live-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      height:44px;
      padding:0 16px;
      border-radius:999px;
      background:rgba(216,59,59,.96);
      color:#fff;
      font-size:13px;
      font-weight:900;
      box-shadow:0 10px 20px rgba(0,0,0,.18);
    }

    .live-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#fff;
    }

    .mode-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:44px;
      padding:0 16px;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      color:#0f2233;
      font-size:13px;
      font-weight:900;
      box-shadow:0 10px 20px rgba(0,0,0,.14);
    }

    .control{
      border:none;
      background:var(--control-bg);
      color:#fff;
      border-radius:999px;
      min-height:44px;
      min-width:44px;
      padding:0 15px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      backdrop-filter:blur(8px);
      transition:var(--transition);
      font-weight:800;
    }

    .control:hover{
      background:var(--control-hover);
      transform:translateY(-1px);
    }

    .control-label{
      font-size:13px;
      font-weight:800;
    }

    .player-meta{
      padding:18px 4px 0;
      color:#fff;
    }

    .player-title{
      margin:0;
      font-family:Georgia, "Times New Roman", serif;
      font-size:32px;
      font-weight:700;
      letter-spacing:-0.03em;
      line-height:1.15;
      color:#fff;
    }

    .player-lead{
      margin:10px 0 0;
      color:rgba(255,255,255,.84);
      font-size:14px;
      line-height:1.6;
      max-width:900px;
    }

    .player-side{
      min-width:0;
    }

    .info-card{
      padding:22px;
      border-radius:26px;
      background:var(--glass-bg);
      border:1px solid var(--glass-border);
      box-shadow:var(--shadow);
      color:#fff;
      backdrop-filter:blur(10px);
    }

    .info-card h3{
      margin:0;
      font-size:18px;
      font-weight:900;
      font-family:Georgia, "Times New Roman", serif;
    }

    .info-card p{
      margin:10px 0 0;
      color:rgba(255,255,255,.88);
      font-size:14px;
      line-height:1.65;
    }

    .info-list{
      margin:14px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }

    .info-list li{
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      border-radius:16px;
      padding:12px 14px;
      font-size:13px;
      line-height:1.5;
      color:rgba(255,255,255,.90);
    }

    .camera-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
      gap:24px 18px;
    }

    .camera-card{
      cursor:pointer;
      user-select:none;
      position:relative;
    }

    .camera-thumb{
      position:relative;
      width:100%;
      aspect-ratio:16/9;
      border-radius:24px;
      overflow:hidden;
      background:#000;
      box-shadow:var(--shadow);
      transition:transform var(--transition), box-shadow var(--transition);
      transform-origin:center center;
    }

    .camera-card:hover .camera-thumb{
      transform:translateY(-4px) scale(1.01);
      box-shadow:0 18px 38px rgba(35,41,52,.20);
    }

    .camera-preview{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      background:#000;
    }

    .camera-poster{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      z-index:2;
      transition:opacity .22s ease;
      background:#d9dde3;
    }

    .camera-card.playing .camera-poster{
      opacity:0;
      pointer-events:none;
    }

    .thumb-overlay{
      position:absolute;
      inset:0;
      z-index:3;
      background:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.20) 48%, rgba(0,0,0,.64)),
        radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 26%);
      pointer-events:none;
    }

    .thumb-top{
      position:absolute;
      top:14px;
      left:14px;
      right:14px;
      z-index:4;
      display:flex;
      justify-content:space-between;
      align-items:start;
      gap:10px;
    }

    .thumb-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      height:34px;
      padding:0 12px;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      color:#0e3f5b;
      font-size:12px;
      font-weight:900;
      box-shadow:0 10px 18px rgba(0,0,0,.12);
    }

    .thumb-badge-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:#0e84c1;
    }

    .thumb-play{
      width:52px;
      height:52px;
      border-radius:50%;
      background:rgba(255,255,255,.96);
      color:#111827;
      display:grid;
      place-items:center;
      font-size:18px;
      box-shadow:0 10px 20px rgba(0,0,0,.14);
      transition:transform var(--transition);
    }

    .camera-card:hover .thumb-play{
      transform:scale(1.06);
    }

    .thumb-bottom{
      position:absolute;
      left:16px;
      right:16px;
      bottom:16px;
      z-index:4;
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:12px;
    }

    .thumb-title{
      min-width:0;
      color:#fff;
    }

    .thumb-title h3{
      margin:0;
      font-size:20px;
      font-weight:900;
      letter-spacing:-0.02em;
      text-shadow:0 3px 14px rgba(0,0,0,.35);
    }

    .thumb-title span{
      display:block;
      margin-top:6px;
      font-size:12px;
      color:rgba(255,255,255,.86);
      font-weight:600;
    }

    .thumb-live{
      display:inline-flex;
      align-items:center;
      gap:7px;
      height:32px;
      padding:0 11px;
      border-radius:999px;
      background:rgba(216,59,59,.94);
      color:#fff;
      font-size:11px;
      font-weight:900;
      flex:0 0 auto;
    }

    .camera-info{
      display:flex;
      gap:12px;
      padding:14px 3px 0;
      align-items:flex-start;
      color:var(--content-text);
    }

    .camera-avatar{
      width:42px;
      height:42px;
      border-radius:50%;
      background:var(--content-card);
      color:#0d4160;
      display:grid;
      place-items:center;
      font-size:14px;
      font-weight:900;
      border:1px solid var(--content-line);
      flex:0 0 auto;
    }

    .camera-meta{
      min-width:0;
      flex:1 1 auto;
    }

    .camera-name{
      margin:0;
      font-size:17px;
      font-weight:900;
      line-height:1.3;
      letter-spacing:-0.02em;
      color:var(--content-heading);
    }

    .camera-desc{
      margin-top:6px;
      color:var(--content-muted);
      font-size:13px;
      line-height:1.5;
    }

    .empty{
      padding:28px;
      border:1px dashed var(--content-line);
      border-radius:24px;
      background:var(--content-card);
      color:var(--content-muted);
      text-align:center;
      font-size:15px;
    }

    .footer{
      margin-top:auto;
      border-top:1px solid rgba(255,255,255,.08);
      background:#0a0d12;
      color:rgba(255,255,255,.82);
    }

    .footer-inner{
      max-width:var(--maxw);
      margin:0 auto;
      padding:22px;
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr;
      gap:22px;
      align-items:start;
    }

    .footer h4{
      margin:0 0 10px;
      font-size:14px;
      font-weight:900;
      letter-spacing:-0.01em;
      color:#fff;
    }

    .footer p,
    .footer a{
      margin:0;
      font-size:14px;
      line-height:1.6;
      color:rgba(255,255,255,.72);
      text-decoration:none;
    }

    .footer a:hover{ color:#fff; }

    .footer-brand{
      font-size:15px;
      font-weight:900;
      color:#fff;
      margin-bottom:6px;
    }

    .hidden{ display:none !important; }

    @media (max-width:1180px){
      .hero-box{ grid-template-columns:1fr; }
      .player-layout{ grid-template-columns:1fr; }
      .footer-inner{ grid-template-columns:1fr; }
      .player-layer{
        top:78px;
        padding-bottom:18px;
      }
    }

    @media (max-width:860px){
      .section-head-inner{
        flex-direction:column;
        align-items:flex-start;
      }

      .section-line{
        flex:0 0 auto;
        width:100%;
      }
    }

    @media (max-width:720px){
      .topbar-inner,
      .hero,
      .section,
      .footer-inner,
      .player-layer{
        padding-left:14px;
        padding-right:14px;
      }

      .hero h1{ font-size:31px; }

      .hero-box{
        padding:20px;
        border-radius:24px;
      }

      .visual-card{ border-radius:16px; }

      .camera-grid{ grid-template-columns:1fr; }

      .player-shell{ border-radius:22px; }

      .player-title{ font-size:24px; }

      .control-label,
      .user-label{
        display:none;
      }

      .ghost-btn{
        padding:0 12px;
      }

      .player-layer{
        top:76px;
      }

      .blue-zone-slide.show{
        opacity:.26;
      }
    }

/* ===== CCTV multi-view (megfigyelés) ===== */
.cctv-overlay{
  position:fixed; inset:0; z-index:9999; background:#05080c;
  display:flex; flex-direction:column;
}
.cctv-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:rgba(8,14,22,.92);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:opacity .35s ease, transform .35s ease; z-index:2;
}
.cctv-overlay.controls-hidden .cctv-bar{ opacity:0; transform:translateY(-100%); pointer-events:none; }
.cctv-overlay.controls-hidden{ cursor:none; }
.cctv-title{ color:#dfe9f3; font-weight:800; letter-spacing:.3px; }
.cctv-exit{
  background:#16324a; color:#fff; border:0; padding:9px 16px;
  border-radius:10px; font-weight:800; cursor:pointer;
}
.cctv-exit:hover{ background:#1d4a6e; }
.cctv-grid{
  flex:1 1 auto; display:grid; gap:4px; padding:4px;
  grid-auto-rows:1fr; background:#05080c;
}
.cctv-cell{
  position:relative; background:#0a121c; border-radius:6px; overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.cctv-video{ width:100%; height:100%; object-fit:cover; display:block; background:#0a121c; }
.cctv-label{
  position:absolute; left:8px; bottom:8px; color:#eaf2fb;
  font-size:12px; font-weight:700; padding:3px 9px; border-radius:8px;
  background:rgba(5,8,12,.6); backdrop-filter:blur(4px);
}
.cctv-live{
  position:absolute; right:8px; top:8px; color:#ff5d5d;
  font-size:11px; font-weight:800; letter-spacing:.5px;
}

/* ===== Modern finomítások (2026) ===== */
.camera-card{
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
  will-change: transform;
}
.camera-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
}
.camera-thumb{ overflow:hidden; }
.camera-thumb .camera-poster,
.camera-thumb .camera-preview{
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.camera-card:hover .camera-poster{ transform: scale(1.04); }

.hero-visual .visual-card{
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.5);
}
.hero-visual .visual-card:hover{ transform: translateY(-3px) scale(1.01); }

.thumb-live, .cctv-live{ letter-spacing:.6px; }

/* Lágyabb, modernebb gombok */
.ghost-btn{ transition: background .2s ease, transform .15s ease, opacity .2s ease; }
.ghost-btn:active{ transform: translateY(1px); }

/* Topbar enyhe üveg-hatás */
.topbar{
  backdrop-filter: saturate(1.1) blur(8px);
}

/* Élő pötty finom lüktetés */
@keyframes smlPulse { 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.thumb-badge-dot{ animation: smlPulse 2.2s ease-in-out infinite; }

/* ===== Kamera megnyitás: csempe felemelkedik és kinagyítódik ===== */
.camera-card.opening{
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 36px 70px -22px rgba(0,0,0,.65);
  z-index: 6;
  transition: transform .4s cubic-bezier(.16,.84,.24,1), box-shadow .4s ease;
}
.camera-card.opening .camera-poster{ transform: scale(1.08); }

/* finom belépő a player metaadatra */
.player-layer.open .player-meta{
  animation: smlFadeUp .55s .12s both cubic-bezier(.16,.84,.24,1);
}
@keyframes smlFadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
/* live pötty lüktetés a lejátszóban */
.live-dot{ animation: smlPulse 1.8s ease-in-out infinite; }

/* ===== Mobil (álló) finomítás ===== */
html, body{ overflow-x:hidden; }

@media (max-width:720px){
  .player-controls-inner{ flex-wrap:wrap; gap:8px; }
  .player-meta{ padding-top:12px; }
  .player-title{ font-size:21px; }
  .player-lead{ font-size:14px; }
  .hero-visual{ gap:8px; }
}

@media (max-width:460px){
  .hero h1{ font-size:26px; }
  .camera-grid{ gap:14px; }
  .control{ padding:9px 11px; }
  .mode-pill{ font-size:12px; }
}

/* ===== Mobil FEKTETT (landscape) – a videó tölti ki a képet ===== */
@media (orientation:landscape) and (max-height:560px){
  .player-layer{ top:0; left:0; right:0; bottom:0; padding:0; z-index:300; }
  .player-backdrop{ display:none; }
  .player-panel{ height:100%; align-items:stretch; transform:none; }
  .player-layer.open .player-panel{ transform:none; }
  .player-layout{ height:100%; max-width:none; gap:0; }
  .player-main{ height:100%; display:flex; flex-direction:column; }
  .player-shell{
    aspect-ratio:auto;
    flex:1 1 auto;
    height:100%;
    border-radius:0;
    border:0;
    box-shadow:none;
  }
  .player-video{ object-fit:contain; background:#000; }
  /* fektetésben a videó a fontos: a leírást elrejtjük, a vezérlők maradnak */
  .player-meta{ display:none; }
  .player-topbar{ padding:8px 12px; }
  .player-controls{ padding:8px 12px; }
  .control-label{ display:none; }
}

/* Mozgásra érzékenyeknek: kevesebb animáció */
@media (prefers-reduced-motion: reduce){
  .camera-card, .camera-card.opening, .player-panel,
  .hero-visual .visual-card, .player-layer.open .player-meta{
    transition: none !important;
    animation: none !important;
  }
}

/* ===== ÚJ lejátszó: külön felpattanó kamera-div + panel ===== */
.player-panel{
  transform:none !important;
  opacity:1 !important;
  align-items:center;
  justify-content:center;
}
.player-stack{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

/* Kamera div */
.player-shell{
  width:100%;
  aspect-ratio:16/9;
  max-height:60vh;
  border-radius:24px;
  position:relative;
}
.player-video{ object-fit:contain; background:#000; }
.shell-top{
  position:absolute; left:0; right:0; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; z-index:3;
}
.shell-top .mode-pill,
.shell-top .live-pill{
  background:rgba(8,14,22,.55); backdrop-filter:blur(6px);
}

/* Panel kártya */
.player-panelcard{
  width:100%;
  background:var(--content-card);
  border:1px solid var(--content-line);
  border-radius:20px;
  padding:16px 18px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.55);
}
.player-panelcard .panel-head{ min-width:0; }
.player-panelcard .player-title{ margin:0; }
.player-panelcard .player-lead{ margin:6px 0 0; color:var(--content-muted); }
.panel-actions{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.panel-actions .control{ cursor:pointer; }
.control-close{ margin-left:auto; }

/* Külön felpattanás (staggered) */
.pop-cam{ opacity:0; transform: translateY(42px) scale(.92); }
.pop-panel{ opacity:0; transform: translateY(42px) scale(.96); }
.player-layer.open .pop-cam{
  animation: smlPop .52s .04s both cubic-bezier(.16,.84,.24,1);
}
.player-layer.open .pop-panel{
  animation: smlPop .52s .20s both cubic-bezier(.16,.84,.24,1);
}
@keyframes smlPop{
  from{ opacity:0; transform: translateY(42px) scale(.95); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Mobil (álló) */
@media (max-width:720px){
  .player-stack{ gap:12px; }
  .player-shell{ max-height:46vh; border-radius:18px; }
  .player-panelcard{ border-radius:16px; padding:14px; }
}

/* Mobil FEKTETT – videó kitölti, a gombok a videóra úsznak, leírás rejtve */
@media (orientation:landscape) and (max-height:560px){
  .player-stack{ height:100%; gap:0; max-width:none; position:relative; }
  .player-shell{ max-height:none; height:100%; aspect-ratio:auto; border-radius:0; border:0; box-shadow:none; }
  .player-panelcard{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(transparent, rgba(0,0,0,.62));
    border:0; border-radius:0; box-shadow:none; padding:8px 12px;
    flex-direction:row; align-items:center;
  }
  .player-panelcard .panel-head{ display:none; }
  .player-panelcard .panel-actions{ width:100%; justify-content:flex-end; }
  .pop-panel{ opacity:1; transform:none; }
  .player-layer.open .pop-panel{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .player-layer.open .pop-cam,
  .player-layer.open .pop-panel{ animation:none !important; opacity:1 !important; transform:none !important; }
  .pop-cam, .pop-panel{ opacity:1; transform:none; }
}

/* ===== Háttér-galéria: kék fátyol, ami időnként áttetsző lesz ===== */
.blue-zone-veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, var(--blue-top) 0%, var(--blue-mid) 58%, var(--blue-bottom) 100%);
  opacity:1;
}
/* Csak ha van galéria: a fátyol lassan lélegzik (kék <-> áttetsző) */
.blue-zone.has-gallery .blue-zone-veil{
  animation: smlVeil 26s ease-in-out infinite;
}
@keyframes smlVeil{
  0%, 100%{ opacity:.96; }
  42%, 58%{ opacity:.46; }   /* középen elvékonyodik -> átsejlik a kép */
}
/* galéria esetén a diák erősebben látszanak */
.blue-zone.has-gallery .blue-zone-slide.show{ opacity:.5; }
.blue-zone.has-gallery .blue-zone-slide{ filter:blur(1px) brightness(1.06) saturate(1.06); }

@media (prefers-reduced-motion: reduce){
  .blue-zone.has-gallery .blue-zone-veil{ animation:none; opacity:.8; }
}

/* ===== Visszafogott "Belépés" link ===== */
.login-quiet{
  display:inline-flex; align-items:center;
  min-height:38px; padding:0 12px;
  font-size:13px; font-weight:600;
  color:rgba(255,255,255,.72);
  background:transparent; border:1px solid rgba(255,255,255,.14);
  border-radius:12px; text-decoration:none; white-space:nowrap;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}
.login-quiet:hover{
  color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22);
}
html[data-theme="light"] .login-quiet{
  color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.28);
}

/* ===== Hero csempék: élő kamera + TV ===== */
.hero-visual .visual-card{ position:relative; cursor:default; }
.hero-visual .visual-card.tile-live,
.hero-visual .visual-card.tile-tv{ cursor:pointer; }
.hero-visual .visual-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  animation: smlKen 18s ease-in-out infinite alternate;
}
@keyframes smlKen{
  from{ transform:scale(1.02) translateY(0); }
  to{ transform:scale(1.12) translateY(-2%); }
}
.tile-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font:700 11px/1 system-ui; letter-spacing:.5px; color:#fff;
  background:rgba(8,14,22,.62); padding:6px 9px; border-radius:9px;
  backdrop-filter:blur(6px);
}
.tile-badge.live{ background:rgba(216,59,59,.85); }
.tile-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 12px 10px; color:#fff; font:700 13px/1.2 system-ui;
  background:linear-gradient(transparent, rgba(0,0,0,.6));
}
/* TV csempe arculat */
.tile-tv .tile-tvface{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(150deg, #0a3d59, #1078a7);
}
.tile-tvface-in{ text-align:center; color:#fff; }
.tile-tvface-in span{ display:block; font:800 18px system-ui; }
.tile-tvface-in small{ display:block; margin-top:4px; opacity:.85; font-size:12px; }
.tile-tv:hover .tile-tvface{ filter:brightness(1.08); }

@media (prefers-reduced-motion: reduce){
  .hero-visual .visual-card img{ animation:none; }
}

/* Mobil: a hero csempék is élményt adjanak */
@media (max-width:720px){
  .tile-cap{ font-size:12px; padding:14px 10px 8px; }
  .tile-tvface-in span{ font-size:16px; }
}

/* ===== Tűztorony logó (dupla kattintásra lila fény) ===== */
.brand-tower{
  width:26px; height:40px; display:block; flex:0 0 auto;
  color:#e9f1f8;                 /* sötét fejlécen jól látszó, minimal sziluett */
  cursor:pointer;
  transition: color .5s ease, filter .5s ease, transform .18s ease;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
html[data-theme="light"] .brand-tower{ color:#0b0e12; }  /* világos témán fekete */
.brand-tower:active{ transform:scale(.93); }
.brand-tower:focus-visible{ filter: drop-shadow(0 0 4px rgba(168,85,247,.6)); }

/* Kivilágított (lila) állapot */
.brand-tower.lit{
  color:#b15cff;
  filter:
    drop-shadow(0 0 5px rgba(177,92,255,.9))
    drop-shadow(0 0 13px rgba(149,76,233,.6))
    drop-shadow(0 0 26px rgba(124,58,237,.35));
  animation: smlTowerGlow 2.6s ease-in-out infinite;
}
@keyframes smlTowerGlow{
  0%,100%{ filter: drop-shadow(0 0 5px rgba(177,92,255,.85)) drop-shadow(0 0 12px rgba(149,76,233,.5)); }
  50%{     filter: drop-shadow(0 0 8px rgba(190,120,255,1)) drop-shadow(0 0 20px rgba(149,76,233,.75)); }
}
@media (prefers-reduced-motion: reduce){
  .brand-tower.lit{ animation:none; }
}

/* ===== Megfigyelés: kamera-választó ablak ===== */
.surv-select{ position:fixed; inset:0; z-index:260; display:none; }
.surv-select.open{ display:block; }
.surv-backdrop{ position:absolute; inset:0; background:rgba(5,10,16,.66); backdrop-filter:blur(3px); }
.surv-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, 92vw); max-height:86vh; display:flex; flex-direction:column;
  background:var(--content-card); border:1px solid var(--content-line);
  border-radius:20px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6); overflow:hidden;
  animation: smlPop .32s cubic-bezier(.16,.84,.24,1) both;
}
.surv-head{ display:flex; align-items:flex-start; gap:12px; padding:18px 18px 8px; }
.surv-titlewrap{ flex:1 1 auto; min-width:0; }
.surv-title{ margin:0; font-size:20px; color:var(--content-heading); }
.surv-sub{ margin:4px 0 0; color:var(--content-muted); font-size:13px; }
.surv-tools{ display:flex; align-items:center; gap:8px; padding:4px 18px 12px; }
.surv-count{ margin-left:auto; color:var(--content-muted); font-size:12px; font-weight:700; }
.surv-list{ overflow:auto; padding:8px 14px; display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; }
.surv-tile{
  position:relative; padding:0; border:2px solid transparent; border-radius:14px;
  overflow:hidden; aspect-ratio:16/10; cursor:pointer; background:#0b1420;
  transition:transform .15s ease, border-color .18s ease, box-shadow .18s ease; opacity:.6;
}
.surv-tile:hover{ transform:translateY(-2px); }
.surv-tile-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.surv-tile-name{
  position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:left;
  padding:14px 8px 6px; color:#fff; font:700 12px/1.2 system-ui;
  background:linear-gradient(transparent, rgba(0,0,0,.72)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.surv-tile-check{
  position:absolute; top:6px; right:6px; z-index:3; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:14px; font-weight:900; color:#fff;
  background:var(--blue-mid); box-shadow:0 2px 8px rgba(0,0,0,.4); opacity:0; transform:scale(.6);
  transition:opacity .15s ease, transform .15s ease;
}
/* kijelölt állapot */
.surv-tile.selected{ opacity:1; border-color:var(--blue-mid); box-shadow:0 8px 22px -10px rgba(0,0,0,.5); }
.surv-tile.selected .surv-tile-check{ opacity:1; transform:scale(1); }

@media (max-width:520px){
  .surv-list{ grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:8px; }
  .surv-dialog{ border-radius:16px; }
}