/* =====================================================
   Mediabook Layout (VI/26)
   Súbor: mediabook/layout.css
   UTF-8
   ===================================================== */


    :root{
      --mb-banner-w: 450px;
      --mb-banner-h: 300px;
      --mb-banner-r: 5px;
      --mb-banner-gap: 0px;
      --mb-banner-right-visible: 16px;
      --mb-banner-right-hidden: calc(-1 * var(--mb-banner-w));
      --mb-brand: #ffc875;
      --mb-bg: rgba(9,11,15,.88);
      --mb-bg-2: rgba(20,25,31,.96);
      --mb-line: rgba(255,255,255,.08);
      --mb-text: #f4f7fb;
      --mb-muted: #b5c1ce;
      --mb-shadow: 0 14px 40px rgba(0,0,0,.35);
      --mb-fade: 70px;
      --mb-tab-h: 42px;
      --mb-usko-w: 74px;
      --mb-slide-ms: 1000ms;
      --mb-voice: 0.045;
      --mb-bottom-h: 36px;
      --mb-content-h: calc(var(--mb-banner-h) - var(--mb-tab-h) - var(--mb-bottom-h));
      --mb-start-top: 200px;
      --mb-link: #B16363;
      --mb-link-hover: #CB7272;
      --mb-link-underline: rgba(128,0,0,.38);
      --mb-link-underline-hover: rgba(177,99,99,.56);
    }

    *{box-sizing:border-box;}
    html,body{margin:0;padding:0;font-family:Inter,Segoe UI,Arial,sans-serif;}

    #KontMBBannerWrap{
      position:fixed;
      top:var(--mb-start-top);
      right:var(--mb-banner-right-hidden);
      z-index:2147482000;
      display:flex;
      align-items:stretch;
      gap:var(--mb-banner-gap);
      transition:right var(--mb-slide-ms) cubic-bezier(.19,1,.22,1), top 420ms cubic-bezier(.22,1,.36,1);
      will-change:right, top;
      touch-action:none;
      user-select:none;
      -webkit-user-select:none;
      max-width:min(100vw, calc(var(--mb-banner-w) + var(--mb-usko-w) + 24px));
    }
    #KontMBBannerWrap.is-open{ right:var(--mb-banner-right-visible); }

    #KontMBBanner{
      position:relative;
      width:var(--mb-banner-w);
      height:var(--mb-banner-h);
      border-radius:var(--mb-banner-r);
      overflow:hidden;
      background:
        radial-gradient(circle at 0% 0%, rgba(255,200,117,.16), transparent 36%),
        radial-gradient(circle at 100% 100%, rgba(0,210,255,.13), transparent 32%),
        linear-gradient(180deg, var(--mb-bg), var(--mb-bg-2));
      box-shadow:var(--mb-shadow);
      border:1px solid rgba(255,255,255,.06);
      opacity:0;
      visibility:hidden;
      transform:translateX(16px) scale(.985);
      transition:opacity 520ms ease, transform 520ms ease, visibility 0s linear 520ms;
      color:var(--mb-text);
    }
    #KontMBBannerWrap.is-open #KontMBBanner,
    #KontMBBannerWrap.force-banner #KontMBBanner{
      opacity:1;
      visibility:visible;
      transform:translateX(0) scale(1);
      transition:opacity 420ms ease, transform 420ms ease, visibility 0s linear 0s;
    }

    #KontMBBannerUsko{
      width:var(--mb-usko-w);
      min-width:var(--mb-usko-w);
      height:var(--mb-banner-h);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:stretch;
      background:transparent;
      box-shadow:none;
      overflow:visible;
      pointer-events:auto;
    }
    #KontMBBannerUskoUp,
    #KontMBBannerUskoDown{
      flex:1 1 auto;
      width:100%;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      background:transparent;
    }
    #KontMBBannerUskoButton{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:transparent;
      border:none;
      padding:0;
      margin:0;
      cursor:pointer;
      touch-action:manipulation;
      outline:none;
      transform-origin:center center;
    }
    #KontMBBannerUskoButton img{
      display:block;
      max-width:100%;
      height:auto;
      transition:transform 220ms ease, filter 220ms ease, opacity 220ms ease;
      filter:drop-shadow(0 3px 8px rgba(0,0,0,.22));
    }
    #KontMBBannerUskoButton:hover img{ transform:translateX(2px) scale(1.03); filter:drop-shadow(0 5px 12px rgba(0,0,0,.28)); }
    #KontMBBannerUskoButton:active img{ transform:scale(.96); }

    .usko-clock{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-variant-numeric:tabular-nums;
      letter-spacing:.06em;
      font-size:18px;
      font-weight:700;
      color:#f4f6fb;
      text-shadow:0 1px 8px rgba(0,0,0,.32);
      pointer-events:none;
      mix-blend-mode:screen;
      z-index:3;
    }
    .usko-clock .hours{display:inline-block; min-width:2ch; text-align:right;}
    .usko-clock .colon{padding:0 .1em;}
    .usko-clock .minutes{display:inline-block; min-width:2ch; text-align:left; transition:color 180ms ease, opacity 180ms ease;}
    .usko-clock.prehour .minutes{color:#8f98a1; animation:mbMinuteBlink 800ms steps(1) infinite;}
    .usko-clock.hourpulse .hours{animation:mbHourPulse 1200ms ease-in-out infinite;}
    @keyframes mbMinuteBlink{50%{opacity:.25;}}
    @keyframes mbHourPulse{0%,100%{transform:scale(1); color:#fff;}50%{transform:scale(1.12); color:#ffcf87;}}

    .usko-arrows-wrap{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:visible;
      z-index:1;
      cursor:grab;
    }
    .usko-arrows-wrap.dragging{cursor:grabbing;}
    .usko-arrows-img,
    .usko-arrows-overlay{
      max-width:none;
      width:auto;
      height:auto;
      object-fit:contain;
      user-select:none;
      -webkit-user-drag:none;
      pointer-events:none;
    }
    .usko-arrows-img{opacity:.1; transition:opacity 220ms ease, transform 220ms ease;}
    .usko-arrows-overlay{
      position:absolute;
      opacity:.2;
      transition:opacity 220ms ease, clip-path 220ms ease, transform 220ms ease;
      filter:drop-shadow(0 2px 7px rgba(255,255,255,.12));
    }
    .usko-arrows-wrap:hover .usko-arrows-img{opacity:.23;}
    .usko-arrows-wrap:hover .usko-arrows-overlay{opacity:.9;}

    #mbRingHolder{
      position:absolute;
      top:8px;
      right:8px;
      width:52px;
      height:52px;
      opacity:0;
      visibility:hidden;
      transition:opacity 240ms ease, visibility 0s linear 240ms;
      z-index:20;
      filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
    }
    #mbRingHolder.active{
      opacity:.1;
      visibility:visible;
      transition:opacity 240ms ease, visibility 0s linear 0s;
    }
    #mbRingSvg{transform:rotate(-90deg); width:100%; height:100%;}
    #mbRingTrack{fill:none; stroke:rgba(255,255,255,.12); stroke-width:6;}
    #mbRingBar{fill:none; stroke:#ffc875; stroke-width:6; stroke-linecap:round; transition:stroke 120ms linear;}
    #mbRingLabel{
      position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:700; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.45);
    }
    #mbRingHolder.alert #mbRingBar{stroke:#ff4040;}
    #mbRingHolder.alert{opacity:.8 !important;}

    .mb-tabs-shell{
      position:relative;
      height:var(--mb-tab-h);
      border-bottom:1px solid var(--mb-line);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      overflow:hidden;
    }
    .mb-tabs-shell::before,
    .mb-tabs-shell::after{
      content:"";
      position:absolute;
      top:0; bottom:0;
      width:var(--mb-fade);
      pointer-events:none;
      z-index:3;
    }
    .mb-tabs-shell::before{left:0; background:linear-gradient(90deg, rgba(11,14,18,.98), rgba(11,14,18,0));}
    .mb-tabs-shell::after{right:0; background:linear-gradient(270deg, rgba(11,14,18,.98), rgba(11,14,18,0));}
    .mb-tabs{
      height:100%;
      display:flex;
      align-items:center;
      gap:6px;
      overflow-x:auto;
      overflow-y:hidden;
      scroll-behavior:smooth;
      padding:0 76px 0 76px;
      scrollbar-width:none;
      -ms-overflow-style:none;
      white-space:nowrap;
      position:relative;
    }
    .mb-tabs::-webkit-scrollbar{display:none;}
    .mb-tab{
      appearance:none;
      border:none;
      background:transparent;
      color:var(--mb-muted);
      height:100%;
      padding:0 12px;
      cursor:pointer;
      font-size:13px;
      font-weight:700;
      letter-spacing:.02em;
      position:relative;
      isolation:isolate;
      white-space:nowrap;
      flex:0 0 auto;
      touch-action:manipulation;
    }
    .mb-tab::after{
      content:"";
      position:absolute;
      left:12px; right:12px; bottom:3px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, transparent, var(--mb-brand), transparent);
      transform:scaleX(.2);
      opacity:0;
      transition:transform 220ms ease, opacity 220ms ease;
    }
    .mb-tab:hover{color:#fff;}
    .mb-tab.active{color:#fff;}
    .mb-tab.active::after{opacity:1; transform:scaleX(1);}

    .tab-share{
      position:absolute;
      left:50%; top:50%; transform:translate(-50%,-50%);
      display:flex; gap:8px; align-items:center; justify-content:center;
      opacity:0; pointer-events:none; transition:opacity 240ms ease;
      z-index:2;
    }
    .mb-tab.active.show-share .tab-share{ opacity:1; pointer-events:auto; }
    .share-icon{
      width:20px; height:20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,.10); color:#fff; text-decoration:none; backdrop-filter:blur(4px);
      border:1px solid rgba(255,255,255,.14); transition:transform 180ms ease, opacity 180ms ease, filter 180ms ease, background 180ms ease;
      opacity:.8;
    }
    .share-icon svg{width:12px; height:12px; fill:currentColor; display:block;}
    .share-icon:hover{opacity:1; transform:translateY(-1px) scale(1.08); filter:saturate(1.15);}
    .share-icon.fb{color:#8fb4ff;}
    .share-icon.fb:hover{background:rgba(24,119,242,.22);}
    .share-icon.wa{color:#84ff9d;}
    .share-icon.wa:hover{background:rgba(37,211,102,.22);}

    .mb-panels{
      position:relative;
      height:var(--mb-content-h);
      overflow:hidden;
    }
    .mb-panel{
      position:absolute; inset:0;
      opacity:0; visibility:hidden; transform:translateX(8px);
      transition:opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms;
      overflow:auto;
      padding:12px 12px 10px;
      color:var(--mb-text);
      scrollbar-width:thin;
      scrollbar-color:rgba(255,255,255,.15) transparent;
    }
    .mb-panel.active{
      opacity:1; visibility:visible; transform:translateX(0); transition:opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
    }
    .mb-panel::-webkit-scrollbar{width:10px;height:10px;}
    .mb-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:999px; border:3px solid transparent; background-clip:padding-box;}
    .mb-panel::-webkit-scrollbar-track{background:transparent;}

    .panel-text-only{
      min-height:100%; display:flex; align-items:center; justify-content:center; text-align:center; color:#d5ddea;
      font-size:15px; letter-spacing:.02em;
    }

    .profile-list{display:flex; flex-direction:column; gap:8px;}
    .profile-toggle{
      width:100%; border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden;
      background:rgba(255,255,255,.02);
    }
    .profile-toggle summary{
      list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
      padding:10px 12px; width:100%; position:relative; font-style:italic; color:#fff;
      transition:background 220ms ease, opacity 220ms ease;
      user-select:none;
    }
    .profile-toggle summary::-webkit-details-marker{display:none;}
    .profile-toggle[open] summary{
      background:linear-gradient(180deg, rgba(255,200,117,.48), rgba(255,200,117,.16));
      opacity:.5;
    }
    .toggle-chevron{
      width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px;
      transition:transform 220ms ease;
    }
    .profile-toggle[open] .toggle-chevron{ transform:rotate(90deg); }
    .toggle-heading{flex:1 1 auto; min-width:0;}
    .toggle-body{
      padding:0 12px 12px 40px; color:#eaf0f7; line-height:1.45; overflow-wrap:anywhere;
    }
    .toggle-body p{margin:.35em 0;}

    .h-scroller{
      display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; scroll-snap-type:x proximity;
      scrollbar-width:none; -ms-overflow-style:none;
    }
    .h-scroller::-webkit-scrollbar{display:none;}
    .media-card{
      min-width:198px; max-width:198px; flex:0 0 198px; scroll-snap-align:start;
      display:flex; flex-direction:column; gap:10px; align-items:center;
    }
    .media-visual{
      position:relative;
      width:198px;
      height:112px;
      border-radius:14px;
      overflow:visible;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 24px rgba(0,0,0,.22);
    }
    .media-visual.has-channel{margin-bottom:14px;}
    .media-link{
      display:block;
      position:absolute;
      inset:0;
      z-index:1;
      text-decoration:none;
      border-radius:14px;
      overflow:hidden;
    }
    .media-cover,
    .media-channel-logo{
      position:absolute; transition:transform 220ms ease, opacity 220ms ease;
    }
    .media-cover{ inset:0; width:100%; height:100%; object-fit:cover; }
    .media-link:hover .media-cover{ transform:scale(1.1); }
    .pill-ribbon,
    .pill-bottom{
      position:absolute; display:flex; align-items:center; justify-content:center;
      color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.28); z-index:2;
      pointer-events:none; backdrop-filter:blur(2px);
    }
    .pill-ribbon{
      top:10px; left:8px; min-width:52px; height:16px; padding:0 12px; border-radius:999px;
      font-size:10px; transform:rotate(-12deg); font-weight:700;
    }
    .pill-bottom{
      left:10px; right:10px; bottom:10px; min-height:25px; padding:4px 10px; border-radius:8px;
      font-size:14px; font-weight:700; text-align:center;
      max-width:calc(100% - 20px); overflow:hidden;
      white-space:nowrap; text-overflow:ellipsis;
    }
    .media-channel-logo{
      width:auto;
      height:auto;
      max-width:188px;
      max-height:66px;
      opacity:.86;
      object-fit:contain;
      display:block;
      position:relative;
    }
    .media-link::after{
      content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 24%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.48) 100%); z-index:1;
    }
    .channel-link{
      position:absolute;
      z-index:4;
      left:50%;
      bottom:-10px;
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      pointer-events:auto;
      border:none !important;
      padding:0;
      outline:none;
      overflow:visible;
      background:transparent;
    }
    .channel-link:hover .media-channel-logo,
    .channel-link:focus-visible .media-channel-logo{
      opacity:1;
      transform:scale(1.08);
      filter:drop-shadow(0 3px 12px rgba(0,0,0,.3));
    }
    .channel-link:focus-visible{border-radius:10px; box-shadow:0 0 0 2px rgba(255,200,117,.5);}

    .param-row{display:flex; gap:10px; justify-content:center; width:100%;}
    .param-circle{
      width:30px; height:30px; border-radius:999px; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center;
      border:1px solid rgba(255,255,255,.08); font-size:11px; font-weight:700; text-align:center; padding:3px; line-height:1.05;
    }
    .param-circle.large{width:35px; height:35px; font-size:11px;}
    .param-circle[data-empty="1"]{color:rgba(255,255,255,.65);}

    .mb-footer{
      position:absolute; left:0; right:0; bottom:0; height:var(--mb-bottom-h); display:flex; align-items:center; justify-content:space-between;
      padding:0 12px; border-top:1px solid var(--mb-line); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
      font-size:12px; color:#d8e0ea; gap:10px;
    }
    .footer-left, .footer-right{display:flex; align-items:center; gap:10px; min-width:0;}
    .footer-right{justify-content:flex-end; flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
    .share-main{display:flex; align-items:center; gap:8px;}
    .version-text{color:#e7edf6; opacity:.86;}

    .mb-status{
      position:absolute; left:12px; right:12px; bottom:calc(var(--mb-bottom-h) + 10px);
      font-size:12px; color:#cfd8e3; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:8px 10px;
      opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity 240ms ease, transform 240ms ease;
      z-index:21;
    }
    .mb-status.show{opacity:1; transform:translateY(0);}

    .mb-panel a:not(.share-icon):not(.media-link):not(.channel-link),
    .footer-right a{
      color:var(--mb-link);
      text-decoration:none;
      border-bottom:1px solid var(--mb-link-underline);
      transition:color 160ms ease, border-color 160ms ease;
    }
    .mb-panel a:not(.share-icon):not(.media-link):not(.channel-link):hover,
    .mb-panel a:not(.share-icon):not(.media-link):not(.channel-link):focus-visible,
    .footer-right a:hover,
    .footer-right a:focus-visible{
      color:var(--mb-link-hover);
      border-bottom-color:var(--mb-link-underline-hover);
      outline:none;
    }

    .hidden{display:none!important;}

    @media (max-width: 740px){
      :root{
        --mb-banner-w: min(92vw, 450px);
        --mb-banner-h: min(72vh, 420px);
        --mb-usko-w: min(18vw, 76px);
        --mb-bottom-h: 42px;
        --mb-content-h: calc(var(--mb-banner-h) - var(--mb-tab-h) - var(--mb-bottom-h));
        --mb-banner-right-visible: 8px;
      }
      #KontMBBannerWrap{max-width:calc(100vw - 8px);}
      .mb-panel{padding:10px 10px 8px;}
      .media-card{min-width:186px; max-width:186px; flex-basis:186px;}
      .media-visual{width:186px; height:105px;}
      .mb-tabs{padding-left:74px; padding-right:74px;}
      .media-channel-logo{max-width:176px; max-height:62px;}
      .channel-link{bottom:-8px;}
      .media-visual.has-channel{margin-bottom:12px;}
    }

    @media (prefers-reduced-motion: reduce){
      *,*::before,*::after{animation:none!important; transition-duration:.01ms!important; scroll-behavior:auto!important;}
    }