/* =========================
   SENTI – základní styl (vyčištěno)
   ========================= */

/* Kompatibilita se staršími "flash-*" hláškami */
.flash-success{
  background: #e7f9ef;
  border: 1px solid #b5e5c2;
  color: #1e6b3c;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 15px;
}
.flash-error{
  background: #ffeaea;
  border: 1px solid #f5b5b5;
  color: #b11a1a;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 15px;
}

:root{
      --bg-cream: #f8f5f2;
      --bg-egg:   #fbfaf8;
      --ink:      #0a0a0a;
      --muted:    #6b6b6b;
      --line:     rgba(10,10,10,.12);
      --elev:     rgba(255,255,255,.65);
      --gold:     #bfa27a;
      --gold-2:   #d6c3a3;
      --focus:    #111;
      --radius:   18px;
      --shadow-sm: 0 2px 12px rgba(0,0,0,.06);
      --shadow-md: 0 10px 30px rgba(0,0,0,.10);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--ink);
      background: var(--bg-cream);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
      line-height:1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering:optimizeLegibility;
    }

    /* ===== Hedvábný / vlnící se „šátek“ ===== */

    /* Umožní animovat úhel conic-gradientu (Chrome/Edge/Opera/Safari podporují) */
    @property --a {
      syntax: '<angle>';
      inherits: false;
      initial-value: 0deg;
    }

    .backdrop{
      position: fixed;
      inset: 0;
      overflow: hidden;
      z-index: -1;
      /* jemná papírová základna */
      background:
        radial-gradient(1200px 700px at 10% 10%, #F8F5F2 0%, var(--bg-egg) 50%, transparent 80%),
        radial-gradient(900px 600px at 80% 30%, #EDE3D8 0%, var(--bg-egg) 50%, transparent 90%);
    }

    /* Dvě živé vrstvy, které se nezávisle vlní */
    .backdrop::before,
    .backdrop::after{
      content:"";
      position:absolute;
      inset:-60% -25%;
      filter: blur(40px);
      opacity:.7;
      will-change: background-position, transform, opacity;
      transform: translateZ(0);
      mix-blend-mode: screen; /* tip: pro decentnější efekt zkus multiply */
    }


/* VRSTVA 1 – výraznější vlnění (cappuccino/latte tón, teplejší a výraznější) */
.backdrop::before {
  --a: 0deg;
  background:
    /* rotující „hedvábné“ pásy – silnější, do hněda */
    conic-gradient(from var(--a) at 50% 45%,
      rgba(234,216,198,0.55) 0% 18%,   /* Latte Base */
      rgba(210,183,152,0.55) 18% 36%,  /* Cappuccino */
      rgba(183,149,110,0.50) 36% 54%,  /* Caramel Roast */
      rgba(155,121,87,0.48) 54% 72%,   /* Mocha */
      rgba(194,160,120,0.52) 72% 90%,  /* Golden Coffee */
      rgba(234,216,198,0.55) 90% 100%),/* Latte Base */

    /* VELKÝ TOP FLEK – nad horní hranou */
    radial-gradient(1400px 900px at 50% -10%,
      rgba(234,216,198,0.65), transparent 70%),

    /* VELKÝ BOTTOM FLEK – přesah dolů */
    radial-gradient(1600px 1000px at 50% 110%,
      rgba(183,149,110,0.60), transparent 72%),

    /* další měkké plochy */
    radial-gradient(1100px 800px at 20% 35%,
      rgba(210,183,152,0.55), transparent 65%),
    radial-gradient(1000px 700px at 80% 65%,
      rgba(155,121,87,0.50), transparent 62%);

  background-repeat: no-repeat;
  background-size: 260% 260%, auto, auto, auto, auto;

  animation:
    spinA 36s linear infinite,
    driftA 18s ease-in-out infinite alternate;
}

/* VRSTVA 2 – jemnější, teplejší doplněk */
.backdrop::after {
  --a: 120deg;
  opacity: .65;
  background:
    conic-gradient(from var(--a) at 50% 50%,
      rgba(194,160,120,0.50) 0% 20%,   /* Golden Coffee */
      rgba(183,149,110,0.48) 20% 40%,  /* Caramel Roast */
      rgba(210,183,152,0.50) 40% 60%,  /* Cappuccino */
      rgba(155,121,87,0.45) 60% 80%,   /* Mocha */
      rgba(234,216,198,0.50) 80% 100%),/* Latte Base */

    radial-gradient(1500px 1000px at 45% -15%,
      rgba(234,216,198,0.60), transparent 72%),
    radial-gradient(1500px 1000px at 55% 115%,
      rgba(183,149,110,0.55), transparent 72%),
    radial-gradient(1000px 800px at 15% 70%,
      rgba(194,160,120,0.50), transparent 62%);

  background-repeat: no-repeat;
  background-size: 260% 260%, auto, auto, auto;

  animation:
    spinB 46s linear infinite,
    driftB 22s ease-in-out infinite alternate;
}

	/* Rotace conic gradientů */
	@keyframes spinA { to { --a: 360deg; } }
	@keyframes spinB { to { --a: -360deg; } }

	/* Větší vertikální drift, aby to „dýchalo“ po CELOÉ výšce */
	@keyframes driftA {
	  0% {
	    background-position:
	      0% 0%,      /* conic */
	      50% -5%,    /* top */
	      50% 105%,   /* bottom */
	      20% 35%,
	      80% 65%;
	    transform: scale(1.04) translate3d(-1%, -2%, 0) rotate(0.2deg);
	  }
	  100% {
	    background-position:
	      100% 100%,
	      48% -12%,
	      52% 112%,
	      15% 40%,
	      85% 60%;
	    transform: scale(1.05) translate3d(1%, 2%, 0) rotate(-0.3deg);
	  }
	}
	@keyframes driftB {
	  0% {
	    background-position:
	      100% 0%,
	      52% -18%,
	      48% 118%,
	      12% 72%;
	    transform: scale(1.03) translate3d(1%, -1%, 0) rotate(0deg);
	  }
	  100% {
	    background-position:
	      0% 100%,
	      48% -8%,
	      52% 108%,
	      18% 68%;
	    transform: scale(1.04) translate3d(-1%, 1%, 0) rotate(0.2deg);
	  }
	}

    /* Volitelný jemný „papír“ šum */
    .noise{
      position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; mix-blend-mode:multiply;
      background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?>\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\
<filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter>\
<rect width="100" height="100" filter="url(%23n)" opacity="0.5"/></svg>');
      background-size: 100px 100px;
    }

    /* ===== Zbytek tvého UI beze změny ===== */

    .container{ width:min(1080px, 92vw); margin: 0 auto; padding: 0; position:relative; z-index:1; }
    .stack{ display:grid; gap:24px; }

    h1,h2,h3{
      font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      line-height:1.15;
      letter-spacing:.2px;
      color: var(--ink);
      margin:0 0 .5em 0;
    }
    h1{ font-weight:700; font-size: clamp(36px, 6vw, 56px); }
    h2{ font-weight:600; font-size: clamp(26px, 3.8vw, 36px); }
    h3{ font-weight:600; font-size: clamp(20px, 2.4vw, 24px); }

    p{ color: var(--muted); margin: 0 0 1em 0; /*max-width: 70ch*/; }

	.senti-prose p { max-width: 70ch; }

    .kicker{
      text-transform: uppercase;
      letter-spacing:.16em;
      font-size:.82rem;
      color: var(--muted);
    }
    .divider{
      height:1px; background: linear-gradient(90deg, transparent, var(--line), transparent);
      margin: 16px 0 24px;
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.9), var(--elev));
      border: 1px solid rgba(10,10,10,.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow-md);
      padding: 28px;
      backdrop-filter: blur(6px);
    }

    .card--login{ max-width: 520px; margin: 24px auto; }

    .text-right {text-align: right}
    .text-shadowed {color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5)}

    .field{ display:grid; gap:8px}
    .label{
      font-size:.9rem; color:#222; font-weight:500; letter-spacing:.02em;
      display:flex; align-items:center; justify-content:space-between;
    }
    .hint{ font-size:.78rem; color:var(--muted); font-weight:400; }

    .input, .textarea, .select{
      width:100%;
      border:1px solid rgba(10,10,10,.15);
      border-radius: calc(var(--radius) - 6px);
      background:#fff;
      padding: 12px 14px;
      font: inherit;
      color: var(--ink);
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .textarea{ min-height: 120px; resize: vertical; }
    .select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; }

    .input:focus, .textarea:focus, .select:focus{
      outline: none;
      border-color: var(--focus);
      box-shadow: 0 0 0 3px rgba(0,0,0,.1);
    }
    .input::placeholder, .textarea::placeholder{ color:#9a9a9a; }

    .chk{
      display:flex; gap:10px; align-items:center; font-size:.95rem; color:#222;
    }
    .chk input{
      width:18px; height:18px; border-radius:4px; border:1px solid rgba(10,10,10,.25);
      appearance:none; display:inline-grid; place-items:center; background:#fff; cursor:pointer;
      transition: all .2s ease;
    }
    .chk input:checked{
      background: var(--ink);
      border-color: var(--ink);
      box-shadow: inset 0 0 0 3px #fff;
    }

    .btn{
      --btn-bg: #0a0a0a;
      --btn-fg: #fff;
      --btn-bd: #0a0a0a;
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px; padding: 12px 18px; min-height:44px;
      font-weight:600; letter-spacing:.02em;
      border-radius: calc(var(--radius) - 8px);
      border:1px solid var(--btn-bd);
      color: var(--btn-fg);
      background: var(--btn-bg);
      box-shadow: 0 8px 18px rgba(0,0,0,.12);
      transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
      cursor:pointer;
      text-decoration: none;
      font-size: 15px!important;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.14); }
    .btn:active{ transform: translateY(0); box-shadow: var(--shadow-sm); }
    .btn--ghost{
      --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(10,10,10,.32);
      backdrop-filter: blur(2px);
    }
    .btn--gold{
      --btn-bg: linear-gradient(180deg, var(--gold-2), var(--gold));
      --btn-fg:#111; --btn-bd: rgba(191,162,122,.5);
      box-shadow: 0 8px 22px rgba(191,162,122,.28);
    }

    a{ color: var(--ink); text-underline-offset: 3px; }
    a.link{ color: var(--ink); border-bottom:1px solid var(--ink); text-decoration:none; padding-bottom:2px; }
    a.link:hover{ opacity:.8 }

    .grid-2{ display:grid; gap:16px; grid-template-columns: 1fr 1fr; }
    @media (max-width:640px){ .grid-2{ grid-template-columns: 1fr; } }
    .space{ height:14px;}

    /* Respektuj reduced motion */
    @media (prefers-reduced-motion: reduce){
      .backdrop::before, .backdrop::after { animation: none !important; }
      .btn { transition: none; }
    }


/* =========================
   ALERT – Error / Success / Info
   ========================= */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.015em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid transparent;
  backdrop-filter: blur(6px);
}

/* 🔴 Error */
.alert--error {
  background: linear-gradient(180deg, rgba(255,240,240,0.9), rgba(255,230,230,0.8));
  border-color: rgba(220, 50, 50, 0.25);
  color: #8a1c1c;
}

.alert--error svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #d93030;
  margin-top: 1px;
}

/* 🟢 Success */
.alert--success {
  background: linear-gradient(180deg, rgba(240,255,240,0.9), rgba(230,255,230,0.8));
  border-color: rgba(50,180,80,0.25);
  color: #185a2a;
}

/* 🔵 Info */
.alert--info {
  background: linear-gradient(180deg, rgba(240,248,255,0.9), rgba(225,240,255,0.8));
  border-color: rgba(50,120,200,0.25);
  color: #1e4a78;
}



/* ========== AUTH SPLIT LAYOUT ========== */
.grid-split {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;                  /* 🔹 defaultně NAHOŘE */
  justify-content: center;
  grid-template-columns: 1fr;
  padding: clamp(16px, 3vw, 24px) 0;
  min-height: 100vh;
  box-sizing: border-box;
}

/* PŘEPÍNAČ – vertical center (jen login page) */
.grid-split--center {
  align-items: center !important;
}


/* ≥768px: dvě kolony */
@media (min-width: 768px) {
  .grid-split {
    grid-template-columns: 1.2fr 1fr;  /* dvě části */
  }
}

.grid-left,
.grid-right {
  align-self: center; /* zarovná vertikálně v rámci gridu */

}

/* Levý sloupec (textový hero) */
.grid-left{
  display:grid;
  align-content: start;
  gap: 16px;
  min-height: 50%;
}
.grid-left .brand{ display:grid; gap:6px; margin-bottom: 4px; }

.brand__img{ height: 50px; width:auto; display:block; margin: 10Px 0}

.transcard{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(10,10,10,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  backdrop-filter: blur(6px);
  color: #3c3c3c;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Pravý sloupec (form v kartě) */
.grid-right{
  display:block;
}

/* Drobné úpravy spacingu uvnitř formuláře */
.auth-footer-links{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:12px;
}

/* Pěkné nadpisy (pokud je nemáš v base) */
.h2{ font-family:"Playfair Display", Georgia, serif; font-weight:600; font-size: clamp(22px, 2.6vw, 28px); margin:0 0 .25em; }




.lang-switch {text-align: right; font-size: 80%; margin: 10px 0}



/* === PROFIL – DVĚ SEKCE V JEDNOM GRIDU === */

.profile-layout {
  width: min(1080px, 92vw);
  margin: 60px auto;
  position: relative;
  z-index: 2; /* kvůli animovanému pozadí */
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* levá sekce - dominantní */
.profile-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* pravá sekce - lehce utlumená */
.profile-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: .78;
}

/* submit button dolů pod grid */
.profile-submit {
  grid-column: 1 / -1;
  margin-top: 20px;
  text-align: center;
}


/* === RESPONSIVNÍ VERZE (MOBIL) === */
@media (max-width: 820px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* pořadí – první personalita, pak osobní údaje */
  .profile-left {
    order: 1;
  }
  .profile-right {
    order: 2;
  }
}




.senti-player{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  padding: 16px;
  background: #fff;
}

.senti-player__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin-bottom: 10px;
}

.sp-btn{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
  touch-action: manipulation;
}
.sp-btn:hover{ background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.22); }
.sp-btn:active{ transform: scale(.97); }
.sp-btn[disabled]{ opacity:.35; pointer-events:none; }

.sp-btn--play{
  width: 70px;
  height: 70px;
  border-color: rgba(0,0,0,.22);
}

.hidden{ display:none !important; }

.senti-player__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
  margin: 6px 0 12px;
}

.sp-time{
  display:flex;
  align-items:baseline;
  gap: 6px;
}
.sp-time__sep{ opacity:.5; }

.sp-vol{
  display:flex;
  align-items:center;
  gap: 8px;
}
.sp-vol__lbl{ opacity:.65; }
.sp-vol input[type="range"]{
  width: 160px;
  height: 18px;
  accent-color: #111;
}

.senti-player__progress{
  padding: 8px 0 4px;
}

.sp-track{
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
}

.sp-fill{
  position:absolute;
  top:0; left:0; bottom:0;
  width:0%;
  background: rgba(0,0,0,.85);
}

.sp-thumb{
  position:absolute;
  top: 50%;
  left: 0%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #111;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  pointer-events:none;
}

/* tablet / touch */
@media (min-width: 768px){
  .sp-btn{ width: 64px; height: 64px; }
  .sp-btn--play{ width: 78px; height: 78px; }
  .sp-vol input[type="range"]{ width: 220px; }
}
/* =========================
   MOBIL – nižší sticky průhledná hlavička
   (bezpečné: když třídy neexistují, nic se nestane)
   ========================= */
@media (max-width: 640px){
  .senti-pos__bar,
  .senti-topbar,
  .senti-header--sticky,
  header.sticky,
  header.is-sticky{
    padding: 8px 0 6px !important;
  }
  .senti-pos__bar .senti-title,
  .senti-topbar .senti-title,
  .senti-header--sticky .senti-title{
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
  }
  .senti-pos__bar .senti-subtitle,
  .senti-topbar .senti-subtitle,
  .senti-header--sticky .senti-subtitle{
    font-size: 13px;
    margin-top: 4px;
  }
}

input#agree {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  aspect-ratio: 1 / 1;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  accent-color: #000; /* případně tvoje barva */
}