:root{ --padX:24px; }
*{ box-sizing: border-box; }

html,body{
  height:100%;
  min-width:1200px;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Gradient jen pro Home page – bez opakování */
body.home-page{
  min-height: 100vh;
  position: relative;
  background: none !important; /* žádný background přímo na body */
}

/* Tohle je skutečný gradient co vidíš */
body.home-page::before{
  content: "";
  position: fixed;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  z-index: -1;           /* za celým obsahem */
  background: linear-gradient(180deg, #c5eee7 0%, #aee5dc 44%, #ffc893 100%);
  background-repeat: no-repeat;
  background-size: cover;
}
.brand-bar{ display:flex; align-items:center; gap:10px; padding:16px var(--padX); position:relative; }
.brand-mark{ height:30px; width:auto; display:inline-block; vertical-align:middle; }
.brand{ font-size:23px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#111; }

/* Center nav with orange bubble hover */
.nav-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:20px;
  display:flex;
  gap:16px;
  align-items:center;
}
.nav-link{
  position:relative; display:inline-block; text-decoration:none; color:#111;
  padding:6px 12px; border-radius:999px; font-weight:600; -webkit-tap-highlight-color:transparent;
}
.nav-link::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:#ff7a1a; opacity:0; transform:scale(.85);
  transition: opacity .18s ease, transform .18s ease; z-index:-1;
}
.nav-link:hover::before, .nav-link:focus-visible::before{ opacity:.35; transform:scale(1); }
/* Products dropdown */
.nav-item-products {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-item-products .nav-products {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  padding:6px 12px; border-radius:999px; font-weight:600; -webkit-tap-highlight-color:transparent;
}

/* Rozbalovací okno pod Products */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0px;
  min-width: 220px;
  padding: 8px 0;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  display: none;
  z-index: 80;
}

/* Zobrazit při najetí myší na Products */
.nav-item-products:hover .nav-dropdown {
  display: block;
}

/* Linky uvnitř dropdownu */
.nav-dropdown-link {
  display: inline-block;
  padding: 8px 14px;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  border-radius: 999px;
  margin: 2px 12px;
}
.nav-dropdown-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ff7a1a;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .18s ease, transform .18s ease;
  z-index: -1;
}

.nav-dropdown-link:hover::before,
.nav-dropdown-link:focus-visible::before {
  opacity: .35;
  transform: scale(1);
}

/* Hide burger on desktop */
.burger{ display:none; }

/* Footer always at bottom */
.spacer{ flex:1 1 auto; }
.site-footer{
  padding:12px 0;
  border-top:0;
}
.site-footer .container{ padding:0 var(--padX); color:rgba(0,0,0,.62); font-size:13px; }

/* Animace loga/textu */
.brand-mark{ will-change: transform; backface-visibility:hidden; transform: translateZ(0); }
.brand .c{ opacity:0; display:inline-block; transform: translateY(6px); }
.brand-bar.do-anim .brand .c{ animation: sky_charIn .35s ease-out var(--d, 0s) 1 forwards; }
.brand-bar.do-anim .brand-mark{
  animation: sky_spin360pure 1.8s cubic-bezier(.2,.8,.2,1) var(--logoDelay, 0s) 1 both;
}
@keyframes sky_spin360pure{ 0%{ transform: rotate(-360deg); opacity:0; } 100%{ transform: rotate(0deg); opacity:1; } }
@keyframes sky_charIn{ 0%{ opacity:0; transform: translateY(6px); } 100%{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .brand-bar.do-anim .brand-mark{ animation:none !important; }
  .brand-bar.do-anim .brand .c{ animation:none !important; opacity:1 !important; transform:none !important; }
}


/* --- HERO (desktop) --- */
.hero-wrap{
  display:flex; align-items:flex-start; justify-content:center;
  padding: 0px 16px 10px;
}
#landing-hero.hero-wrap{
  padding-top: 60px;  /* nastavíš si sám podle oka */
}
.hero-inner{
  width: 100%;
  max-width: 980px;
  text-align: center;
}
/* Speciální layout pro Home hero – štít vlevo, text vpravo */
body[data-view="home"] #landing-hero .hero-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  text-align:left;
}

body[data-view="home"] #landing-hero .hero-copy{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}

body[data-view="home"] #landing-hero .hero-title,
body[data-view="home"] #landing-hero .hero-sub{
  max-width:520px;
}

body[data-view="home"] #landing-hero .hero-actions{
  justify-content:flex-start;
}

/* U štítu už nechceme margin-top a minus margin-left */
body[data-view="home"] #landing-hero .hero-branding{
  margin-top:0;
  margin-left:0;
  flex:0 0 auto;
  display:flex;
  justify-content:center;
}

.hero-title{
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .01em;
  color:#111;
}
.hero-sub{
  margin: 0;
  max-width: 880px;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.45;
  opacity: .9;
}

.nav-right{
  position:absolute;
  right:var(--padX);
  top:20px;
  display:flex;
  align-items:center;
  gap:12px;
}

.btn-signin{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 14px; border-radius:10px; background:#111; color:#fff; text-decoration:none; font-weight:600; }
.btn-signin:hover{ filter:brightness(.92); }

/* Language popover (desktop) */
.lang{ position:relative; display:inline-flex; align-items:center; gap:6px; font-weight:700; cursor:default; }
.lang .globe{ width:16px; height:16px; }
.lang .code{ color:#111; letter-spacing:.02em; }
.lang-menu{ z-index: 1000; position:absolute; top:calc(100% + 8px); right:0; min-width:140px; padding:8px; border-radius:12px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06); display:none; flex-direction:column; gap:4px;  }
.lang-item{ appearance:none; border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; }
.lang-item:hover{ background:rgba(0,0,0,.06); }
.lang-desktop:hover .lang-menu{ z-index: 1000; display:flex; }
.lang-desktop::after{ content:""; position:absolute; top:100%; right:0; width:180px; height:12px; pointer-events:auto; }


/* Enforce single desktop language indicator (right side only) */
@media (min-width: 768px){
  .lang-desktop{ display:none !important; }
  .nav-right .lang-desktop{ display:inline-flex !important; }
}



/* Guard: hide mobile language control on desktop */
@media (min-width: 768px){
  .lang-mobile{ display:none !important; }
}



/* === FAQ Modal (desktop) === */
.faq-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:5000; }
.faq-modal.show{ display:flex; }
.faq-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.38); }
.faq-card{ position:relative; width:min(880px, 92vw); max-height:82vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); padding:22px 22px 18px; }
.faq-title{ margin:0 0 12px; font-size:22px; font-weight:800; }
.faq-close{ position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:10px; background:#111; color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.faq-close:hover{ filter:brightness(.92); }
.faq-list details{ margin:6px 0; padding:10px 12px; border-radius:10px; background:#f7f7f8; }
.faq-list summary{ cursor:pointer; font-weight:700; }
.faq-list p{ margin:8px 0 0; }


/* === Pricing headline: match HERO on desktop === */
#pricing-section .headline{
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .01em;
}
/* === Mobile-only tweaks (telefon / tablet, desktop bez změny) === */
@media screen and (max-width: 900px) {

  /* 1) Zmenšit „mezerník“ nad Pricing/Verified – .spacer už netlačí vše dolů */
  .spacer {
    flex: 0 0 24px !important; /* místo flex:1 1 auto; */
  }

  /* 2) Pricing sekce – ať není tak utopená dole */
  #pricing-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
  }

  /* 3) Verified sekce – taky ji trochu vytáhnout nahoru */
  #verified-section {
    margin-top: 24px !important;
    padding-top: 16px !important;
  }
}
/* Touch devices – vytáhnout Pricing a Verified nahoru pod header */
html.touch-device .spacer{
  flex:0 0 24px !important;      /* místo velkého prázdného místa */
}

html.touch-device #pricing-section{
  margin-top:16px !important;
  padding-top:16px !important;
}

html.touch-device #verified-section{
  margin-top:16px !important;
  padding-top:16px !important;
}

/* Hero landing CTA styles */
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:24px;
  flex-wrap:wrap;
}

/* Wrapper pod tlačítky */
.hero-branding{
  margin-top:18px;
  display:flex;
  justify-content:flex-start;   /* zarovnání doleva v rámci hero-inner */
  margin-left:-90px;            /* klidně si doladíš */
}

/* Samotný štít na Home – logohome1.png */
.hero-branding .hero-shield{
  height:620px;                 /* výška štítu, můžeš zmenšit/zvětšit */
  max-width:70vw;
  width:auto;
  display:block;

  opacity:0;
  transform:translateY(18px) scale(0.96);
  will-change:transform, opacity;
}

.hero-btn{
  padding:10px 24px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
}
.hero-btn-secondary{
  background:#111;
  color:#fff;
}

/* Jednoduchá animace objevení štítu na Home */
@keyframes heroShieldFadeUp {
  0% {
    opacity:0;
    transform:translateY(24px) scale(0.94);
  }
  100% {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Štít se objeví po animaci buttonů */
body[data-view="home"] #landing-hero .hero-branding .hero-shield{
  animation:heroShieldFadeUp 1.8s cubic-bezier(.22,.7,.26,1) 2.2s forwards;
}

/* respektování reduced motion */
@media (prefers-reduced-motion: reduce){
  body[data-view="home"] #landing-hero .hero-branding .hero-shield{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* Animace nadpisů a buttonů na Home */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Nadpis */
body[data-view="home"] #landing-hero .hero-title {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0s;
}

/* Podnadpis – 0.4s po nadpisu */
body[data-view="home"] #landing-hero .hero-sub {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.4s;
}

/* První button – 0.8s po startu */
body[data-view="home"] #landing-hero .hero-actions > *:nth-child(1) {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.8s;
}

/* Druhý button – 1.2s po startu */
body[data-view="home"] #landing-hero .hero-actions > *:nth-child(2) {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 1.2s;
}



/* Třetí button – 1.6s po startu */
body[data-view="home"] #landing-hero .hero-actions > *:nth-child(3) {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 1.6s;
}
/* ============================= */
/* Home hero stagger animation   */
/* ============================= */
/* ============================= */
/* Home logo 3D flip animace     */
/* ============================= */
@keyframes heroShieldFadeUp {
  0% {
    opacity:0;
    transform:translateY(24px) scale(0.94);
  }
  100% {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Štít se objeví po animaci buttonů */
body[data-view="home"] #landing-hero .hero-branding .hero-shield{
  animation:heroShieldFadeUp 1.8s cubic-bezier(.22,.7,.26,1) 2.2s forwards;
}

/* respektování reduced motion */
@media (prefers-reduced-motion: reduce){
  body[data-view="home"] #landing-hero .hero-branding .hero-shield{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* animace loga po načtení Home – navazuje na buttony */
body[data-view="home"] #landing-hero .hero-branding .logo-flip{
  opacity: 0;
  transform: translateY(8px) scale(0.96) rotateY(0deg);
  transform-origin: center;
  will-change: transform, opacity;
  /* 5s = pomalejší, klidná animace; 1.2s delay po buttonech */
  animation: heroHomeLogoFlip 5s cubic-bezier(.22,.7,.26,1) 1.2s forwards;
}


/* respektování reduced motion */
@media (prefers-reduced-motion: reduce){
  body[data-view="home"] #landing-hero .hero-branding .logo-flip{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* animace se spustí vždy, když je body v režimu "home" */
body[data-view="home"] #landing-hero .logo-flip{
  opacity: 0;
  transform: translateY(8px) scale(0.95) rotateY(0deg);
  will-change: transform, opacity;
  animation: heroHomeLogoFlip 3.0s cubic-bezier(.22,.7,.26,1) 1.4s forwards;
  /* 3.0s = pomalejší, klidná otočka; 1.4s zpoždění po buttonech */
}

/* Respektování reduced motion – vypne efekty */
@media (prefers-reduced-motion: reduce){
  body[data-view="home"] #landing-hero .logo-flip{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================= */
/* Home shield 3D intro animace  */
/* ============================= */

@keyframes heroShieldSpin3D {
  0% {
    opacity: 0;
    transform: scale(0.9) rotateY(-360deg);
    transform-origin: center;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
  }
}

/* Štít – pomalý fade-in + 3D otočka po načtení Home */
body[data-view="home"] #landing-hero .hero-branding img {
  opacity: 0;
  transform: scale(0.9) rotateY(-360deg);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  animation: heroShieldSpin3D 2.6s cubic-bezier(.22,.7,.26,1) 1.4s forwards;
}

/* Pro lidi s omezenou animací – vypneme efekty */
@media (prefers-reduced-motion: reduce){
  body[data-view="home"] #landing-hero .hero-branding img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Nadpis */
body[data-view="home"] #landing-hero .hero-title {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0s;
}

/* Podnadpis – 0.4s po nadpisu */
body[data-view="home"] #landing-hero .hero-sub {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.4s;
}

/* První button – 0.8s po startu */
body[data-view="home"] #landing-hero .hero-actions > *:nth-child(1) {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 0.8s;
}

/* Druhý button – 1.2s po startu */
body[data-view="home"] #landing-hero .hero-actions > *:nth-child(2) {
  opacity: 0;
  animation: heroFadeUp 0.6s ease forwards;
  animation-delay: 1.2s;
}
#pricing-section {
  padding-top: 0px;   /* tady si to doladíš */
}
#pricing-section {
  margin-top: -10px; /* klidně -10, -20, -80... */
}
/* Social Performance Scan – platform select */
#social-section .social-platform-select {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}

#social-section .social-btn {
  display: flex;
  align-items: center;
  gap: 12px;

  background: #000;
  color: #fff;

  border: none;
  border-radius: 14px;

  padding: 20px 28px;
  min-width: 240px;

  font-size: 18px;
  font-weight: 600;

  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

#social-section .social-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0.95;
}

#social-section .social-icon {
  width: 22px;
  height: 22px;
  display: block;
}
/* === Social Performance Scan layout tuning (ONLY this section) === */

/* posune celý obsah hero níž pod header */
#social-section .hero-inner {
  padding-top: 140px; /* zvětši třeba na 160px když chceš ještě níž */
}

/* větší hlavní nadpis */
#social-section .hero-title {
  font-size: 56px;   /* zvětši třeba na 60px */
  line-height: 1.1;
}

/* větší a čitelnější podtext + hezká šířka */
#social-section .hero-sub {
  font-size: 20px;
  margin-top: 16px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* posune buttony níž (víc prostoru pod textem) */
#social-section .social-platform-select {
  margin-top: 52px; /* zvětši na 64px když chceš buttony ještě níž */
}

/* větší buttony */
#social-section .social-btn {
  min-width: 280px;   /* zvětši třeba na 300px */
  padding: 24px 36px; /* zvětši padding pro ještě větší button */
  font-size: 18px;
}

/* lehce větší ikonky */
#social-section .social-icon {
  width: 24px;
  height: 24px;
}
/* === Social Performance Scan animations === */

/* výchozí skrytý stav */
#social-section .hero-title,
#social-section .hero-sub,
#social-section .social-btn {
  opacity: 0;
}

/* NADPIS */
#social-section.animate .hero-title {
  animation: fadeUp 0.6s ease forwards;
}

/* PODNADPIS (malé zpoždění) */
#social-section.animate .hero-sub {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 0.4s;
}

/* BUTTONY – výchozí pozice zleva */
#social-section .social-btn {
  transform: translateX(-40px);
}

/* BUTTONY – animace */
#social-section.animate .social-btn {
  animation: slideInLeft 0.5s ease forwards;
}

/* zpoždění pro jednotlivé buttony */
#social-section.animate .social-btn:nth-child(1) {
  animation-delay: 0.8s;
}

#social-section.animate .social-btn:nth-child(2) {
  animation-delay: 1.3s;
}

#social-section.animate .social-btn:nth-child(3) {
  animation-delay: 1.8s;
}

/* KEYFRAMES */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#social-section .social-help {
  margin-top: 28px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#social-section .social-help-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

#social-section .social-help-text {
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 14px;
  opacity: 0.9;
}

#social-section .social-help-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 12px auto;
  max-width: 640px;
  text-align: left;
}

#social-section .social-help-list li {
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 15px;
}

#social-section .social-help-note {
  font-size: 14px;
  opacity: 0.75;
}
/* Social help text – výchozí skrytý stav */
#social-section .social-help {
  opacity: 0;
  transform: translateY(20px);
}
/* Social help text – objeví se až po posledním buttonu */
#social-section.animate .social-help {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 2.3s; /* po posledním buttonu */
}
#social-section .social-app-placeholder,
#social-youtube-section .social-app-placeholder,
#social-instagram-section .social-app-placeholder,
#social-tiktok-section .social-app-placeholder {
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  opacity: 0.75;
}
/* === Social Upload UI (Skyphaze style) === */

/* posuneme platform sekce níž, ať to není nacpané nahoře */
#social-youtube-section .hero-inner,
#social-instagram-section .hero-inner,
#social-tiktok-section .hero-inner {
  padding-top: 140px; /* zvyš na 160px pokud chceš níž */
}

/* větší title/sub */
#social-youtube-section .hero-title,
#social-instagram-section .hero-title,
#social-tiktok-section .hero-title {
  font-size: 56px;
  line-height: 1.1;
}

#social-youtube-section .hero-sub,
#social-instagram-section .hero-sub,
#social-tiktok-section .hero-sub {
  font-size: 18px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

/* karta */
#social-section .social-upload-card,
#social-youtube-section .social-upload-card,
#social-instagram-section .social-upload-card,
#social-tiktok-section .social-upload-card {
  margin: 34px auto 0 auto;
  max-width: 760px;
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 22px 22px;
  backdrop-filter: blur(8px);
}

/* upload title/sub uvnitř karty */
#social-section .social-upload-title,
#social-youtube-section .social-upload-title,
#social-instagram-section .social-upload-title,
#social-tiktok-section .social-upload-title {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 800;
}

#social-section .social-upload-sub,
#social-youtube-section .social-upload-sub,
#social-instagram-section .social-upload-sub,
#social-tiktok-section .social-upload-sub {
  margin: 0 0 14px 0;
  font-size: 16px;
  opacity: 0.85;
}

/* dropzone */
#social-section .social-dropzone,
#social-youtube-section .social-dropzone,
#social-instagram-section .social-dropzone,
#social-tiktok-section .social-dropzone {
  display: block;
  cursor: pointer;
}

/* SKRYJEME default input tak, aby nebyl vidět "Vybrat soubor / Soubor nevybrán" */
#social-section .social-dropzone input[type="file"],
#social-youtube-section .social-dropzone input[type="file"],
#social-instagram-section .social-dropzone input[type="file"],
#social-tiktok-section .social-dropzone input[type="file"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#social-section .social-dropzone-inner,
#social-youtube-section .social-dropzone-inner,
#social-instagram-section .social-dropzone-inner,
#social-tiktok-section .social-dropzone-inner {
  border: 2px dashed rgba(0,0,0,0.20);
  border-radius: 16px;
  padding: 26px;
  text-align: center;
  background: rgba(255,255,255,0.25);
}

#social-section .social-dropzone-title,
#social-youtube-section .social-dropzone-title,
#social-instagram-section .social-dropzone-title,
#social-tiktok-section .social-dropzone-title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}

#social-section .social-dropzone-hint,
#social-youtube-section .social-dropzone-hint,
#social-instagram-section .social-dropzone-hint,
#social-tiktok-section .social-dropzone-hint {
  font-size: 14px;
  opacity: 0.75;
}

/* náš "Choose file" řádek */
#social-section .social-file-row,
#social-youtube-section .social-file-row,
#social-instagram-section .social-file-row,
#social-tiktok-section .social-file-row {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

#social-section .social-file-btn,
#social-youtube-section .social-file-btn,
#social-instagram-section .social-file-btn,
#social-tiktok-section .social-file-btn {
  background: #000;
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#social-section .social-file-name,
#social-youtube-section .social-file-name,
#social-instagram-section .social-file-name,
#social-tiktok-section .social-file-name {
  font-size: 14px;
  opacity: 0.8;
}

/* tlačítka Back / Continue ve stylu */
#social-section .social-upload-actions,
#social-youtube-section .social-upload-actions,
#social-instagram-section .social-upload-actions,
#social-tiktok-section .social-upload-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

#social-section .social-btn,
#social-youtube-section .social-btn,
#social-instagram-section .social-btn,
#social-tiktok-section .social-btn {
  background: #000;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#social-section .social-btn.ghost,
#social-youtube-section .social-btn.ghost,
#social-instagram-section .social-btn.ghost,
#social-tiktok-section .social-btn.ghost {
  background: #000; /* chceš-li ghost jako outline, řekni a změním */
  color: #fff;
}

#social-section .social-btn.primary[disabled],
#social-youtube-section .social-btn.primary[disabled],
#social-instagram-section .social-btn.primary[disabled],
#social-tiktok-section .social-btn.primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

#social-section .social-upload-note,
#social-youtube-section .social-upload-note,
#social-instagram-section .social-upload-note,
#social-tiktok-section .social-upload-note {
  margin: 12px 0 0 0;
  font-size: 13px;
  opacity: 0.7;
  text-align: center;
}
/* === Social Results App (header + footer stay, everything else hidden) === */
#social-results-section.social-app {
  padding: 120px 20px 80px;
}

#social-results-section .social-app-inner {
  max-width: 1100px;
  margin: 0 auto;
}

#social-results-section .social-app-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

#social-results-section .social-app-title {
  font-size: 54px;
  line-height: 1.05;
  margin: 0;
}

#social-results-section .social-app-meta {
  margin: 10px 0 0 0;
  font-size: 16px;
  opacity: 0.8;
  max-width: 820px;
}

/* Insights cards */
#social-results-section .social-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 22px;
}

@media (max-width: 980px) {
  #social-results-section .social-insights {
    grid-template-columns: 1fr;
  }
}

#social-results-section .insight-card {
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(8px);
}

#social-results-section .insight-title {
  margin: 0 0 8px 0;
  font-weight: 900;
  font-size: 16px;
}

#social-results-section .insight-text {
  margin: 0 0 10px 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

#social-results-section .insight-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  opacity: 0.8;
}

#social-results-section .badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  font-weight: 700;
}

/* Table */
#social-results-section .social-table-wrap {
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(8px);
}

#social-results-section .social-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

#social-results-section .social-table-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

#social-results-section .social-table-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#social-results-section .social-filter,
#social-results-section .social-sort {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 10px 12px;
  background: rgba(255,255,255,0.55);
  font-size: 14px;
}

#social-results-section .social-table-scroll {
  overflow: auto;
  border-radius: 14px;
}

#social-results-section .social-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

#social-results-section .social-table th,
#social-results-section .social-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 13px;
  vertical-align: top;
}

#social-results-section .social-table th {
  text-align: left;
  font-weight: 900;
  background: rgba(0,0,0,0.03);
}

#social-results-section .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}

#social-results-section .status strong {
  font-weight: 900;
}
/* =========================
   SKYPhaze Social Results UI
   ========================= */
#social-results-section .social-shell{ max-width: 980px; margin: 0 auto; padding: 0 16px; }
/* Video scan: wider layout (centered) */
#social-results-section.is-video-scan .social-shell{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (max-width: 1100px){
  #social-results-section.is-video-scan .social-shell{
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
  }
}


#social-results-section .social-title{ font-size: clamp(34px, 4vw, 56px); font-weight: 900; margin: 8px 0 8px; letter-spacing: -0.02em; }
#social-results-section .social-meta{ opacity: .85; margin: 0 0 14px; }

#social-results-section .glass{
  background: rgba(255,255,255,0.30);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(8px);
}

#social-results-section .row{ display:flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
#social-results-section .col{ flex: 1 1 260px; }

#social-results-section .kpis{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
@media (max-width: 980px){ #social-results-section .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#social-results-section .kpi .kpi-label{ font-size: 12px; opacity: .8; margin: 0 0 4px; }
#social-results-section .kpi .kpi-val{ font-size: 18px; font-weight: 900; margin: 0; }

#social-results-section .social-btn{
  background: rgba(0,0,0,0.90);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}
#social-results-section .social-btn.ghost{
  background: rgba(255,255,255,0.35);
  color: rgba(0,0,0,0.90);
  border: 1px solid rgba(0,0,0,0.12);
}

#social-results-section .tabs{ display:flex; gap:10px; margin: 12px 0 12px; }
#social-results-section .tab{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 10px 14px;
  background: rgba(255,255,255,0.35);
  font-weight: 900;
  cursor: pointer;
}
#social-results-section .tab.is-active{
  background: rgba(0,0,0,0.85);
  color: #fff;
  border-color: transparent;
}

#social-results-section .insights{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
@media (max-width: 980px){ #social-results-section .insights{ grid-template-columns: 1fr; } }
#social-results-section .ins-title{ font-weight: 900; margin: 0 0 6px; }
#social-results-section .ins-text{ margin: 0; opacity: .9; line-height: 1.45; font-size: 13px; }
#social-results-section .ins-meta{ margin-top: 10px; font-size: 12px; opacity: .8; display:flex; justify-content: space-between; gap: 10px; }

#social-results-section .deepdive{ margin: 12px 0 16px; }
#social-results-section .deepdive-head{ display:flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
#social-results-section .deepdive-hint{ margin:0; font-size: 12px; opacity: 0.75; }
#social-results-section .deepdive-body{
  max-height: 240px;
  overflow: auto;
  padding-right: 6px;
  display: grid;
  gap: 10px;
}
#social-results-section .dd-item{
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 12px;
}
#social-results-section .dd-title{ margin:0 0 6px 0; font-weight: 900; font-size: 13px; }
#social-results-section .dd-text{ margin:0; font-size: 13px; line-height: 1.45; opacity: 0.9; }

#social-results-section .table-head{ display:flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 8px 0 10px; }
#social-results-section .input{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 10px 14px;
  background: rgba(255,255,255,0.35);
  outline: none;
}
#social-results-section .select{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 10px 14px;
  background: rgba(255,255,255,0.35);
  outline: none;
}

#social-results-section table{ width:100%; border-collapse: collapse; }
#social-results-section th, #social-results-section td{ text-align:left; padding: 10px 10px; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 13px; }
#social-results-section th{ font-size: 12px; opacity: .8; font-weight: 900; }

#social-results-section .badge{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(0,0,0,0.10);
  font-weight: 900;
  font-size: 12px;
}
#social-results-section .b-strong{ background: rgba(0,0,0,0.85); color: #fff; border-color: transparent; }
#social-results-section .b-mixed{ }
#social-results-section .b-weak{ }

#social-results-section .raw-scroll{ overflow:auto; border-radius: 16px; border: 1px solid rgba(0,0,0,0.08); }
#social-results-section .raw-scroll table{ min-width: 900px; }
/* --- Status colors --- */
#social-results-section .badge.b-strong{
  background: rgba(16, 185, 129, 0.90); /* green */
  color: #fff;
  border-color: transparent;
}
#social-results-section .badge.b-mixed{
  background: rgba(245, 158, 11, 0.18); /* amber */
  color: rgba(0,0,0,0.92);
  border-color: rgba(245, 158, 11, 0.35);
}
#social-results-section .badge.b-weak{
  background: rgba(239, 68, 68, 0.18); /* red */
  color: rgba(0,0,0,0.92);
  border-color: rgba(239, 68, 68, 0.35);
}

/* Optional: subtle row tint by status */
#social-results-section tbody tr.is-strong{ background: rgba(16,185,129,0.06); }
#social-results-section tbody tr.is-mixed{  background: rgba(245,158,11,0.06); }
#social-results-section tbody tr.is-weak{   background: rgba(239,68,68,0.06); }
/* --- Table head layout fix (prevents overlap) --- */
#social-results-section .table-head{
  align-items: flex-start;
}
#social-results-section .table-head > div{
  flex: 1 1 320px; /* both sides can wrap nicely */
}
#social-results-section .table-head > div:last-child{
  justify-content: flex-end;
}
#social-results-section .table-head .badge{
  white-space: nowrap;
}
#social-results-section .table-head .input{
  min-width: 220px;
}
#social-results-section .table-head .select{
  min-width: 220px;
}
/* Hide status legend bubbles above table */
#social-results-section .status-legend,
#social-results-section .legend,
#social-results-section .badge-legend {
  display: none !important;
}
/* --- Signal coloring (weak/mixed/strong) --- */
#social-results-section .sig {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  border: 1px solid transparent;
}

#social-results-section .sig-strong { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.35); color: rgba(0,0,0,0.88); }
#social-results-section .sig-mixed  { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.35); color: rgba(0,0,0,0.88); }
#social-results-section .sig-weak   { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.35); color: rgba(0,0,0,0.88); }

/* Stronger emphasis when used as text highlight */
#social-results-section .t-strong { color: rgba(16,185,129,0.95); font-weight: 800; }
#social-results-section .t-mixed  { color: rgba(245,158,11,0.95); font-weight: 800; }
#social-results-section .t-weak   { color: rgba(239,68,68,0.95); font-weight: 800; }

/* Optional: add colored left border to cards/tiles */
#social-results-section .tile.is-strong, 
#social-results-section .card.is-strong { box-shadow: inset 4px 0 0 rgba(16,185,129,0.65); }
#social-results-section .tile.is-mixed,
#social-results-section .card.is-mixed  { box-shadow: inset 4px 0 0 rgba(245,158,11,0.65); }
#social-results-section .tile.is-weak,
#social-results-section .card.is-weak   { box-shadow: inset 4px 0 0 rgba(239,68,68,0.65); }


/* =========================
   Social Performance Scan – YouTube Video Scan layout (ONLY)
   ========================= */
#social-results-section.is-video-scan .video-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: start;
  /* Center the whole block on wide screens */
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 1024px){
  #social-results-section.is-video-scan .video-grid{ grid-template-columns: 1fr; }
}
#social-results-section.is-video-scan .video-right{ position: sticky; top: 110px; }
@media (max-width: 1024px){
  #social-results-section.is-video-scan .video-right{ position: static; top: auto; }
}
#social-results-section.is-video-scan .video-insights-wide{ grid-template-columns: 1fr; }

#social-results-section.is-video-scan .video-phone-card,
#social-results-section.is-video-scan .video-caption-card{ padding: 14px; }

#social-results-section.is-video-scan .video-phone-head{
  display:flex; justify-content: space-between; gap: 10px;
  align-items: baseline; margin-bottom: 10px;
}
#social-results-section.is-video-scan .video-phone-title{ font-weight: 900; }
#social-results-section.is-video-scan .video-phone-sub{ font-size: 12px; opacity: .75; }

#social-results-section.is-video-scan .video-phone{
  width: 100%; max-width: 280px; margin: 0 auto;
  background: rgba(0,0,0,0.88);
  border-radius: 26px; padding: 12px;
  position: relative;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
#social-results-section.is-video-scan .video-phone-notch{
  position:absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 46%; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
}
#social-results-section.is-video-scan .video-phone-screen{
  background: rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  display:flex; align-items:center; justify-content:center;
}
#social-results-section.is-video-scan .video-phone-img{
  width: 100%; height: 100%;
  object-fit: cover; display:block;
}
#social-results-section.is-video-scan .video-phone-empty{
  font-size: 12px; opacity: .8;
  color: rgba(255,255,255,0.85);
  padding: 18px; text-align:center;
}
#social-results-section.is-video-scan .video-phone-home{
  width: 34%; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  margin: 10px auto 2px;
}

#social-results-section.is-video-scan .video-cap-head{ margin-bottom: 10px; }
#social-results-section.is-video-scan .video-cap-title{ font-weight: 900; }
#social-results-section.is-video-scan .video-cap-sub{
  font-size: 12px; opacity: .75;
  margin-top: 4px; line-height: 1.35;
}
#social-results-section.is-video-scan .video-cap-box{
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 10px;
}
#social-results-section.is-video-scan .video-cap-text{
  width: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 13px;

  line-height: 1.45;
  color: rgba(0,0,0,0.92);
  font-weight: 700;
}
#social-results-section.is-video-scan .video-cap-foot{
  display:flex; justify-content: space-between;
  align-items:center; gap: 10px;
  margin-top: 8px;
}
#social-results-section.is-video-scan .video-cap-count{
  font-size: 12px;
  opacity: .8;
  font-weight: 900;
}