*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --accent: #00d4aa;
    --accent-dim: rgba(0, 212, 170, 0.15);
    --accent-glow: rgba(0, 212, 170, 0.4);
    --bg: #0a0a0f;
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-hover: rgba(255, 255, 255, 0.07);
    --text-primary: #f0f0f5;
    --text-secondary: rgba(240, 240, 245, 0.5);
    --text-muted: rgba(240, 240, 245, 0.3);
    --radius: 16px;
    --radius-sm: 10px;
  }

/* ── Space Grotesk pre nadpisy ─── */
.header-title,
.hero-superhuman-title,
.hero-music-title,
.category-title,
.cat-card-title,
.home-card-title,
.home-greeting-hello,
.forza-hero-title,
.script-card-title,
.audio-tab-title,
.nl-wizard-title,
.video-modal-title,
.empty-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

  html, body {
    height: 100%;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
    background-image:
      radial-gradient(ellipse 60% 50% at 20% 0%, rgba(0, 212, 170, 0.07) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 80% 100%, rgba(100, 60, 200, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 50% 50%, rgba(0, 212, 170, 0.03) 0%, transparent 70%);
  }

  /* HEADER — explicitne body > header aby pravidlo NEZasiahlo nested headery
     (napr. <header class="news-header"> v news view). */
  body > header {
    flex-shrink: 0;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    z-index: 9000;
  }

  .header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .logo-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-title-img {
    height: 24px;
    width: auto;
    object-fit: contain;
    display: block;
  }

  /* Ikona/znak loga (prominend logo.png) — vľavo pred predelom a textovým logom */
  .header-brand-mark {
    height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
  }

  .header-brand {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
  }

  .header-brand-dot {
    color: var(--accent);
    font-size: 32px;
    line-height: 1;
    margin: 0 2px;
    transform: translateY(2px);
    display: inline-block;
  }

  .header-brand-end {
    color: var(--accent);
  }

  .header-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, #fff 30%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .header-divider {
    width: 1px;
    height: 24px;
    background: var(--glass-border);
  }

  .header-tagline {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .header-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(0,212,170,0.25);
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
  }

  /* SOURCES */
  .sources-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }

  .source-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 3px 10px;
    text-decoration: none;
    transition: all 0.15s;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .source-chip:hover {
    color: var(--accent);
    border-color: rgba(0,212,170,0.25);
    background: var(--accent-dim);
  }

  .source-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* LOADING STATUS */
  .loading-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
  }

  .loading-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse-dot 1s ease-in-out infinite;
    flex-shrink: 0;
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
  }

  /* MAIN LAYOUT */
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  /* LEFT PANEL */
  .left-panel {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px 20px 20px;
    overflow-y: auto;
    border-right: 1px solid var(--glass-border);
  }

  /* Full-width režim — Plán / Newsletter skryjú left panel a roztiahnu right na celú šírku */
  .main.sh-fullwidth .left-panel { display: none; }
  .main.sh-fullwidth .right-panel { flex: 1; }
  /* Zruš inner max-width na newsletter wizardi keď je full-width — nech využije celú šírku bez scrollu */
  .main.sh-fullwidth .newsletter-wizard {
    max-width: none;
    padding: 24px 32px;
  }

  .left-panel::-webkit-scrollbar { width: 4px; }
  .left-panel::-webkit-scrollbar-track { background: transparent; }
  .left-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

  /* GLASS CARD */
  .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px;
    transition: border-color 0.2s;
  }

  .glass-card:hover {
    border-color: rgba(255,255,255,0.13);
  }

  .card-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .card-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,212,170,0.3), transparent);
  }

  .topic-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .topic-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .topic-wrapper label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .context-wrapper {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 12px;
    margin-top: 2px;
  }

  .label-context {
    color: rgba(0,212,170,0.7) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-size: 11.5px !important;
  }

  .context-wrapper textarea {
    border-color: rgba(0,212,170,0.12);
    background: rgba(0,212,170,0.03);
  }

  .context-wrapper textarea:focus {
    border-color: rgba(0,212,170,0.35);
    background: rgba(0,212,170,0.05);
  }

  textarea {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    padding: 12px 14px;
    resize: none;
    min-height: 72px;
    field-sizing: content; /* moderné prehliadače: auto-grow podľa contentu, žiaden scroll */
    outline: none;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  /* Topic textareas v left paneli — väčší priestor */
  .topic-wrapper textarea { min-height: 84px; }
  .context-wrapper textarea { min-height: 96px; }

  textarea::placeholder { color: var(--text-muted); }

  textarea:focus {
    border-color: rgba(0,212,170,0.4);
    box-shadow: 0 0 0 3px rgba(0,212,170,0.08);
    background: rgba(255,255,255,0.06);
  }

  /* GENERATE BUTTON */
  .btn-generate {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #03110d;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
  }

  .btn-generate::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .btn-generate:hover::before { opacity: 1; }
  .btn-generate:hover { transform: translateY(-1px); }
  .btn-generate:active { transform: translateY(0); }
  .btn-generate:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

  /* SPINNER */
  .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(10,10,15,0.3);
    border-top-color: #0a0a0f;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
  }

  .btn-generate.loading .spinner { display: block; }
  .btn-generate.loading .btn-icon { display: none; }

  @keyframes spin { to { transform: rotate(360deg); } }

  /* CHECKLIST CARD */
  .checklist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .checklist-progress-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .checklist-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
  }

  .progress-bar-wrap {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    margin-bottom: 18px;
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #00b894);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    width: 0%;
  }

  .checklist-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.15s;
    user-select: none;
  }

  .checklist-item:hover { background: rgba(255,255,255,0.04); }

  .check-box {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .checklist-item.checked .check-box {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: none;
  }

  .check-icon {
    display: none;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }

  .checklist-item.checked .check-icon { display: block; }

  .check-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    transition: all 0.2s;
    flex-shrink: 0;
    min-width: 80px;
  }

  .checklist-item.checked .check-name {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,0.2);
  }

  .check-bar-wrap {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.07);
    border-radius: 2px;
    overflow: hidden;
  }

  .check-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #00b894);
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }

  .checklist-item.checked .check-bar-fill { width: 100%; }

  /* RIGHT PANEL */
  .right-panel {
    flex: 1;
    padding: 20px 20px 20px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .right-panel::-webkit-scrollbar { width: 4px; }
  .right-panel::-webkit-scrollbar-track { background: transparent; }
  .right-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

  /* EMPTY STATE */
  .empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--text-muted);
    text-align: center;
    width: 80%;
  }

  .empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    animation: float 4s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  .empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
  }

  .empty-sub {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.6;
  }

  /* SCRIPTS OUTPUT */
  .scripts-output {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .topic-section {}

  .topic-heading {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .topic-heading span {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .topic-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,212,170,0.3), transparent);
  }

  .scripts-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* SCRIPT CARD */
  .script-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
  }

  .script-card:hover {
    border-color: rgba(0,212,170,0.2);
    transform: translateY(-1px);
  }

  .script-card.broll-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
  }

  .script-card.broll-active::after {
    content: '🎬 B-Roll';
    position: absolute;
    top: -1px;
    right: 14px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: var(--bg-primary);
    padding: 0 6px;
    border-radius: 0 0 6px 6px;
    letter-spacing: 0.04em;
    line-height: 18px;
  }

  .script-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .script-card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .script-num {
    width: 20px;
    height: 20px;
    background: var(--accent-dim);
    border: 1px solid rgba(0,212,170,0.25);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--accent);
  }

  /* TOPIC DISCOVERY */
  .discovery-btns {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
  }

  .btn-discover {
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    letter-spacing: 0.02em;
  }

  .btn-discover:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
  .btn-discover.active { border-color: rgba(0,212,170,0.4); color: var(--accent); background: var(--accent-dim); }
  .btn-discover:disabled { opacity: 0.5; cursor: not-allowed; }

  .discovery-results { display: flex; flex-direction: column; gap: 6px; }

  .discovery-item {
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(240,240,245,0.75);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .discovery-item:hover {
    background: var(--accent-dim);
    border-color: rgba(0,212,170,0.25);
    color: var(--text-primary);
  }

  .discovery-item .di-arrow {
    color: var(--accent);
    font-size: 10px;
    margin-top: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
  }

  .discovery-item:hover .di-arrow { opacity: 1; }

  .discovery-empty {
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: center;
    padding: 12px 0;
  }

  .discovery-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 8px 0;
  }

  .ds-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse-dot 1s ease-in-out infinite;
  }

  /* MUSIC */
  .music-option {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 12px;
  }

  .music-option-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .music-field { margin-bottom: 12px; }

  .music-field-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
  }

  .music-field-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  .music-field-text {
    flex: 1;
    font-size: 12.5px;
    color: rgba(240,240,245,0.8);
    line-height: 1.55;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    resize: none;
    outline: none;
    overflow: hidden;
    transition: border-color 0.2s;
  }

  .music-field-text:focus { border-color: rgba(0,212,170,0.25); }

  /* CAPTION */
  .caption-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 16px;
  }

  .caption-text {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(240,240,245,0.85);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.75;
    padding: 8px;
    resize: none;
    outline: none;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
    min-height: 60px;
  }

  .caption-text:hover { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
  .caption-text:focus { border-color: rgba(0,212,170,0.25); background: rgba(255,255,255,0.03); }

  /* RIGHT PANEL TOGGLE — unified glass style */
  .rp-toggle-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.015);
    flex-wrap: wrap;
  }

  .rp-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .rp-toggle-main + .rp-toggle-strategy {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    margin-left: 12px;
    padding-left: 12px;
  }

  @media (max-width: 900px) {
    .rp-toggle-main + .rp-toggle-strategy {
      border-left: none;
      margin-left: 0;
      padding-left: 0;
    }
  }

  /* ── AVATAR TAB ── */
  .avatar-header { margin-bottom: 24px; }
  .avatar-title { font-size: 22px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
  .avatar-subtitle { font-size: 14px; color: var(--text-secondary); font-weight: 400; }

  .avatar-empty-state {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 640px;
    margin: 0 auto;
  }
  @media (max-width: 700px) {
    .avatar-empty-state { grid-template-columns: 1fr; max-width: 320px; }
  }

  .avatar-example-column,
  .avatar-upload-column { display: flex; flex-direction: column; gap: 10px; }

  .avatar-example-image {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    object-fit: cover;
    border: 1px solid var(--glass-border);
    display: block;
  }

  .avatar-column-label { font-size: 12px; color: var(--text-muted); text-align: center; letter-spacing: 0.02em; }

  .avatar-upload-zone {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    border: 2px dashed var(--glass-border);
    background: linear-gradient(135deg, var(--glass-bg) 0%, var(--accent-dim) 120%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    padding: 20px;
    text-align: center;
  }
  .avatar-upload-zone:hover {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--glass-bg) 0%, var(--accent-dim) 80%);
  }
  .avatar-upload-zone.drag-over {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent-dim) 0%, var(--accent-dim) 100%);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .avatar-upload-icon { font-size: 32px; opacity: 0.7; transition: transform 0.2s ease, opacity 0.2s ease; }
  .avatar-upload-zone:hover .avatar-upload-icon { opacity: 1; transform: scale(1.08); }
  .avatar-upload-text { font-size: 14px; font-weight: 500; color: var(--text-primary); }
  .avatar-upload-hint { font-size: 11px; color: var(--text-muted); letter-spacing: 0.02em; }

  .avatar-tip {
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .avatar-uploaded-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 320px;
    margin: 0 auto;
  }
  .avatar-uploaded-image {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
  }
  .avatar-uploaded-actions { display: flex; gap: 10px; width: 100%; }

  .btn-avatar-generate {
    flex: 1;
    padding: 14px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-avatar-generate:hover { transform: translateY(-1px); box-shadow: none; }

  .btn-avatar-change {
    padding: 14px 20px;
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-avatar-change:hover { background: var(--glass-hover); }

  .avatar-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 640px;
    margin: 0 auto 24px;
  }
  @media (max-width: 700px) {
    .avatar-results { grid-template-columns: 1fr; max-width: 320px; }
  }
  .avatar-result-card { display: flex; flex-direction: column; gap: 10px; }
  .avatar-result-image {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
  }
  .avatar-result-actions { display: flex; gap: 8px; }
  .btn-avatar-action {
    flex: 1;
    padding: 8px 12px;
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .btn-avatar-action:hover { background: var(--glass-hover); border-color: var(--accent); }

  .avatar-bulk-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
    flex-wrap: wrap;
  }

  .avatar-gallery { margin-top: 40px; max-width: 640px; margin-left: auto; margin-right: auto; }
  .avatar-gallery-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .avatar-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
  }
  .avatar-gallery-item {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .avatar-gallery-item:hover { border-color: var(--accent); transform: translateY(-2px); }
  .avatar-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .avatar-gallery-item-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .avatar-gallery-item:hover .avatar-gallery-item-actions { opacity: 1; }
  .btn-gallery-action {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn-gallery-action:hover { background: var(--accent); color: #0a0a0f; }

  /* ── PLANNER DASHBOARD ── */
  .planner-dashboard {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }
  .dashboard-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .dashboard-today {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent-dim) 0%, var(--glass-bg) 60%);
  }
  .dashboard-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .dashboard-today-type {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .dashboard-today-status {
    font-size: 13px;
    color: var(--text-secondary);
  }
  .btn-find-topic {
    align-self: flex-start;
    padding: 8px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: 'Inter', sans-serif;
  }
  .btn-find-topic:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }
  .dashboard-streak-number {
    font-size: 42px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .dashboard-streak-label {
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: lowercase;
  }
  .dashboard-streak-message {
    font-size: 12px;
    color: var(--text-primary);
    font-style: italic;
  }
  .dashboard-streak-progress {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
  }
  .planner-day-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); cursor: pointer; transition: background .2s, border .2s; margin-bottom: 6px; border: 1px solid var(--glass-border); }
  .planner-day-row.current-day {
    background: linear-gradient(90deg,
      rgba(0, 212, 170, 0.12) 0%,
      rgba(0, 212, 170, 0.04) 40%,
      var(--glass-bg) 100%
    ) !important;
    border-left: 3px solid var(--accent);
    padding-left: 13px;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 212, 170, 0.15);
  }
  @media (max-width: 900px) {
    .planner-dashboard { grid-template-columns: 1fr; }
  }

  .rp-toggle-btn {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
  }

  .rp-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.08);
  }

  .rp-toggle-btn.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: rgba(0, 212, 170, 0.3);
    box-shadow: none;
  }

  .rp-content { flex: 1; overflow-y: auto; position: relative; }
  .rp-content::-webkit-scrollbar { width: 4px; }
  .rp-content::-webkit-scrollbar-track { background: transparent; }
  .rp-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

  /* ARTICLE PREVIEW */
  .article-preview {
    padding: 28px 32px;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  .article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }

  .article-source {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(0,212,170,0.2);
    padding: 3px 10px;
    border-radius: 20px;
  }

  .article-link {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
  }
  .article-link:hover { color: var(--accent); }

  .article-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
  }

  .article-content {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(240,240,245,0.7);
    margin-bottom: 28px;
    white-space: pre-wrap;
  }

  .btn-use-topic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--accent), #00b894);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: none;
  }

  .btn-use-topic:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  .card-actions {
    display: flex;
    gap: 6px;
  }

  .btn-card {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-card:hover {
    background: var(--accent-dim);
    border-color: rgba(0,212,170,0.3);
    color: var(--accent);
  }

  .btn-card.copied {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
  }

  .script-text {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(240,240,245,0.85);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.75;
    padding: 8px;
    resize: none;
    outline: none;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
    min-height: 60px;
  }

  .script-text:hover {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
  }

  .script-text:focus {
    border-color: rgba(0,212,170,0.25);
    background: rgba(255,255,255,0.03);
  }

  .script-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid;
    transition: all 0.3s;
  }

  .stats-pill.ok   { color: var(--accent); border-color: rgba(0,212,170,0.3); background: rgba(0,212,170,0.08); }
  .stats-pill.warn { color: #f0b429;       border-color: rgba(240,180,41,0.3); background: rgba(240,180,41,0.07); }
  .stats-pill.bad  { color: #ff6b6b;       border-color: rgba(255,107,107,0.3); background: rgba(255,107,107,0.07); }

  /* RPN SECTIONS */
  .rpn-section { margin-bottom: 10px; }

  .rpn-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(0,212,170,0.2);
    padding: 2px 9px 2px 7px;
    border-radius: 5px;
    margin-bottom: 5px;
  }

  .rpn-label::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
  }

  .rpn-text {
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid rgba(0,212,170,0.15);
    border-radius: 0 4px 4px 0;
    color: rgba(240,240,245,0.85);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.75;
    padding: 4px 8px 4px 12px;
    resize: none;
    outline: none;
    overflow: hidden;
    transition: border-color 0.2s;
    min-height: 40px;
  }

  .rpn-text:focus { border-left-color: rgba(0,212,170,0.5); }

  /* Hook Rewriter */
  .rpn-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .btn-hook-rewrite {
    background: none;
    border: 1px solid rgba(0,212,170,0.25);
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 8px;
    color: var(--accent);
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .btn-hook-rewrite:hover { opacity: 1; background: var(--accent-dim); }
  .hook-rewriter-panel {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hook-alt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(0,212,170,0.05);
    border: 1px solid rgba(0,212,170,0.15);
    border-radius: var(--radius-sm);
  }
  .hook-alt-type {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    min-width: 88px;
    padding-top: 2px;
    flex-shrink: 0;
  }
  .hook-alt-text {
    flex: 1;
    font-size: 12.5px;
    color: var(--text-primary);
    line-height: 1.55;
  }
  .btn-use-hook {
    flex-shrink: 0;
    padding: 4px 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.15s;
    align-self: center;
  }
  .btn-use-hook:hover { opacity: 0.82; }

  .hook-rewriter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
  }

  .hook-rewriter-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .hook-panel-close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
  }

  .hook-panel-close:hover {
    background: #ff6b6b;
    border-color: #ff6b6b;
    color: #fff;
  }

  /* B-ROLL */
  .broll-script-block {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 16px;
  }

  .broll-section { margin-bottom: 14px; }

  .broll-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
    padding-left: 2px;
  }

  .broll-item {
    font-size: 12.5px;
    color: rgba(240,240,245,0.78);
    line-height: 1.5;
    padding: 6px 12px;
    background: rgba(255,255,255,0.025);
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
  }

  .broll-item:hover { background: rgba(255,255,255,0.05); }

  .broll-table { width: 100%; margin-top: 8px; }

  .broll-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 4px 0 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 4px;
  }

  .broll-table-header span:last-child { padding-left: 12px; }

  .broll-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: start;
  }

  .broll-row:last-child { border-bottom: none; }

  .broll-script-cell {
    font-size: 12.5px;
    color: rgba(240,240,245,0.55);
    font-style: italic;
    line-height: 1.55;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,0.06);
  }

  .broll-shot-cell {
    font-size: 12.5px;
    color: rgba(240,240,245,0.85);
    line-height: 1.55;
    padding-left: 12px;
  }

  /* HOOK RATING */
  .hook-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: all 0.3s;
  }
  .hook-badge.winner { color: #0a0a0f; background: var(--accent); border-color: var(--accent); box-shadow: none; }
  .hook-badge.good   { color: #f0b429; border-color: rgba(240,180,41,0.4); background: rgba(240,180,41,0.08); }
  .hook-badge.weak   { color: var(--text-muted); border-color: rgba(255,255,255,0.1); background: transparent; }
  .hook-badge.loading { color: var(--text-muted); border-color: rgba(255,255,255,0.08); background: transparent; animation: pulse-dot 1s ease-in-out infinite; }
  .hook-reason {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    max-width: 160px;
    line-height: 1.35;
  }

  /* SECTION DIVIDER */
  .section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .section-divider::before,
  .section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--glass-border);
  }

  /* SHIMMER / LOADING */
  /* ── AI LOADING BOX ── */
  .ai-loading-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
  }
  .ai-loading-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
    animation: loadingShine 2s ease-in-out infinite;
  }
  @keyframes loadingShine { 0%,100% { opacity:.3; } 50% { opacity:1; } }
  .ai-loading-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ai-loading-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    animation: iconPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--accent-glow));
  }
  @keyframes iconPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.15); opacity:.85; } }
  .ai-loading-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    transition: opacity .3s ease;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ai-loading-text.fade-out { opacity: 0; }
  .ai-loading-percent {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 36px;
    text-align: right;
  }
  .ai-loading-progress {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,.05);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .ai-loading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #00ffcc 100%);
    border-radius: 999px;
    width: 0%;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    box-shadow: none;
    position: relative;
  }
  .ai-loading-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.3) 50%, transparent 100%);
    animation: progressShimmer 1.5s linear infinite;
  }
  @keyframes progressShimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
  .ai-loading-subtext {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: .02em;
    margin-top: 2px;
  }

  .shimmer-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    overflow: hidden;
    position: relative;
  }

  .shimmer-line {
    height: 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
  }

  .shimmer-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
  }

  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .shimmer-line.short { width: 40%; }
  .shimmer-line.medium { width: 75%; }
  .shimmer-line.long { width: 95%; }
  .shimmer-line.header { height: 16px; width: 30%; margin-bottom: 16px; }

  /* ERROR */
  .error-card {
    background: rgba(255, 60, 60, 0.05);
    border: 1px solid rgba(255, 60, 60, 0.2);
    border-radius: var(--radius);
    padding: 20px;
    color: rgba(255, 120, 120, 0.9);
    font-size: 13px;
    line-height: 1.6;
  }

  .error-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255,100,100,1);
  }

  /* ── IDENTITA DASHBOARD ──────────────────────── */
  .identity-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 640px;
    margin: 0 auto;
  }
  @media (max-width: 700px) {
    .identity-dashboard { grid-template-columns: 1fr; max-width: 320px; }
  }
  .identity-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    min-height: 180px;
  }
  .identity-card:hover {
    border-color: var(--accent);
    background: var(--glass-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  .identity-card-photos {
    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(0,212,170,0.08) 100%);
  }
  .identity-card-voice {
    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(167,139,250,0.08) 100%);
  }
  .identity-card-icon { font-size: 32px; line-height: 1; }
  .identity-card-title { font-size: 18px; font-weight: 600; color: var(--text-primary); }
  .identity-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; flex: 1; }
  .identity-card-status {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .identity-card-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }
  .identity-card-status-dot.inactive { background: var(--text-muted); }
  .identity-card-arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .identity-card:hover .identity-card-arrow {
    transform: translateX(4px);
    color: var(--accent);
  }
  .identity-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.2s ease;
  }
  .identity-back-btn:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: var(--accent);
  }
  .identity-placeholder {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 24px;
    background: var(--glass-bg);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius);
  }
  .identity-placeholder-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.6; }
  .identity-placeholder-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
  .identity-placeholder-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

  /* ── VOICE FLOW ──────────────────────────────── */
  .voice-container {
    max-width: 640px;
    margin: 0 auto;
  }

  .voice-header {
    text-align: center;
    margin-bottom: 24px;
  }

  .voice-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
  }

  .voice-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
  }

  .voice-info-box {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.08) 0%, var(--glass-bg) 100%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
  }

  .voice-info-box strong {
    color: var(--text-primary);
    font-weight: 600;
  }

  .voice-text-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
  }

  .voice-text-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  .voice-text-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
    font-family: Georgia, 'Times New Roman', serif;
  }

  .voice-mic-hint {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 12px;
  }

  .voice-action-row {
    display: flex;
    gap: 12px;
    justify-content: center;
  }

  .btn-voice-record {
    padding: 16px 32px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .btn-voice-record:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  .btn-voice-secondary {
    padding: 16px 24px;
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-voice-secondary:hover {
    background: var(--glass-hover);
    border-color: var(--accent);
  }

  .btn-voice-danger {
    padding: 10px 18px;
    background: transparent;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-voice-danger:hover {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.6);
  }

  /* Recording state */
  .voice-recording-box {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, var(--glass-bg) 100%);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 20px;
  }

  .voice-recording-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ff4d4d;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    animation: voicePulse 1s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255, 77, 77, 0.8);
  }

  @keyframes voicePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
  }

  .voice-recording-label {
    font-size: 14px;
    font-weight: 600;
    color: #ff6b6b;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: inline-block;
    vertical-align: middle;
  }

  .voice-countdown {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    margin-bottom: 16px;
    line-height: 1;
  }

  .voice-countdown-subtext {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
  }

  .voice-progress {
    width: 100%;
    max-width: 400px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 auto 20px;
  }

  .voice-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #00ffcc 100%);
    border-radius: 999px;
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: none;
  }

  .voice-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 40px;
    margin-bottom: 20px;
  }

  .voice-wave-bar {
    width: 3px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.6;
    animation: voiceWave 1.2s ease-in-out infinite;
  }

  @keyframes voiceWave {
    0%, 100% { height: 8px; }
    50% { height: 30px; }
  }

  /* STOP button */
  .btn-voice-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5555 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px rgba(255,107,107,0.4);
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
  }

  .btn-voice-stop:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(255,107,107,0.55);
  }

  .btn-voice-stop:active {
    transform: translateY(0);
  }

  .voice-stop-icon {
    font-size: 14px;
  }

  /* Preview state */
  .voice-preview-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 28px 24px;
    margin-bottom: 20px;
    text-align: center;
  }

  .voice-preview-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
  }

  .voice-preview-player {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;
    display: block;
  }

  .voice-preview-duration {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
  }

  /* Ready state */
  .voice-ready-box {
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.08) 0%, var(--glass-bg) 100%);
    border: 1px solid rgba(0, 212, 170, 0.3);
    border-radius: var(--radius);
    padding: 28px 24px;
    margin-bottom: 20px;
    text-align: center;
  }

  .voice-ready-icon {
    font-size: 36px;
    margin-bottom: 12px;
  }

  .voice-ready-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
  }

  .voice-ready-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 20px;
  }

  .voice-ready-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-variant-numeric: tabular-nums;
  }

  /* ── VOICE GALLERY ──────────────────────────── */
  .voice-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }

  .voice-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.25s ease;
    position: relative;
  }

  .voice-item.is-default {
    border-color: var(--accent);
    box-shadow: none;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.06) 0%, var(--glass-bg) 70%);
  }

  .voice-item-icon {
    font-size: 28px;
    flex-shrink: 0;
  }

  .voice-item-info {
    flex: 1;
    min-width: 0;
  }

  .voice-item-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }

  .voice-item-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.2s ease;
    max-width: 240px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .voice-item-name:focus {
    background: rgba(255, 255, 255, 0.05);
    outline: 1px solid var(--accent);
    white-space: normal;
    overflow: visible;
  }

  .voice-item-default-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 212, 170, 0.12);
    border: 1px solid rgba(0, 212, 170, 0.3);
    flex-shrink: 0;
  }

  .voice-item-meta {
    font-size: 12px;
    color: var(--text-muted);
  }

  .voice-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }

  .btn-voice-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
  }

  .btn-voice-icon:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: var(--accent);
  }

  .btn-voice-icon.star-active {
    color: var(--accent);
    border-color: rgba(0, 212, 170, 0.4);
    background: rgba(0, 212, 170, 0.08);
  }

  .btn-voice-icon.btn-voice-icon-danger:hover {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.08);
  }

  .voice-empty-message {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    background: var(--glass-bg);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius);
  }

  /* Toast */
  .voice-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--accent);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }

  .voice-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ── AUDIO TAB ───────────────────────────────── */
  .audio-container {
    max-width: 640px;
    margin: 0 auto;
  }

  .audio-header {
    text-align: center;
    margin-bottom: 24px;
  }

  .audio-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
  }

  .audio-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
  }

  .audio-player-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 28px 24px;
    margin-bottom: 16px;
    text-align: center;
  }

  .audio-player {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 16px;
    display: block;
  }

  .audio-player-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 440px;
    margin: 0 auto;
  }

  .audio-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .btn-audio-secondary {
    padding: 12px 20px;
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-audio-secondary:hover {
    background: var(--glass-hover);
    border-color: var(--accent);
  }

  .btn-audio-next {
    padding: 10px 20px;
    background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.25);
  }

  .btn-audio-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(168, 85, 247, 0.45);
  }

  /* ── AUDIO TAB — VOICE LAB GALÉRIA ─────────────── */
  .audio-tab-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px;
  }

  .audio-tab-header {
    text-align: center;
    margin-bottom: 28px;
  }

  .audio-tab-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
  }

  .audio-tab-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
  }

  .audio-tab-subtitle strong {
    color: var(--accent);
    font-weight: 600;
  }

  .audio-cards-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .audio-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px 22px;
    transition: all 0.25s ease;
  }

  .audio-card:hover {
    border-color: rgba(0, 212, 170, 0.2);
  }

  .audio-card.has-audio {
    border-color: rgba(0, 212, 170, 0.35);
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.04) 0%, var(--glass-bg) 100%);
    box-shadow: none;
  }

  .audio-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .audio-card-number {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .audio-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .audio-card-meta-item {
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 9px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
  }

  .audio-card-badge {
    font-size: 11px;
    color: var(--accent);
    padding: 3px 9px;
    background: rgba(0, 212, 170, 0.15);
    border: 1px solid rgba(0, 212, 170, 0.3);
    border-radius: 999px;
    font-weight: 600;
  }

  .audio-card-preview {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-left: 2px solid var(--glass-border);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    opacity: 0.85;
  }

  .audio-card.has-audio .audio-card-preview {
    border-left-color: rgba(0, 212, 170, 0.4);
  }

  .audio-card-player {
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
  }

  .audio-card-audio {
    width: 100%;
    height: 40px;
    display: block;
    filter: invert(0.85) hue-rotate(160deg);
  }

  .audio-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .btn-audio-generate {
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-audio-generate:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  /* ── VOICE SETTINGS PANEL ───────────────────── */
  .voice-settings-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    overflow: hidden;
    transition: border-color 0.2s ease;
  }
  .voice-settings-panel:hover {
    border-color: rgba(0, 212, 170, 0.25);
  }

  .vs-toggle {
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    transition: background 0.2s ease;
  }
  .vs-toggle:hover { background: rgba(0, 212, 170, 0.04); }

  .vs-toggle-icon { font-size: 18px; }
  .vs-toggle-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .vs-toggle-hint {
    flex: 1;
    text-align: left;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
  }
  .vs-toggle-chevron {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.25s ease;
  }
  .vs-toggle-chevron.is-open {
    transform: rotate(180deg);
    color: var(--accent);
  }

  .vs-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .vs-body.is-open {
    max-height: 800px;
    border-top: 1px solid var(--glass-border);
  }

  .vs-section {
    padding: 18px 20px;
    border-bottom: 1px solid var(--glass-border);
  }
  .vs-section:last-child { border-bottom: none; }

  .vs-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
  }

  .vs-presets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .vs-preset-btn {
    padding: 12px 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-family: inherit;
  }
  .vs-preset-btn:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
  }
  .vs-preset-btn.is-active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }
  .vs-preset-icon { font-size: 20px; line-height: 1; }
  .vs-preset-label { font-size: 11px; font-weight: 700; }

  .vs-slider-row { margin-bottom: 16px; }
  .vs-slider-row:last-of-type { margin-bottom: 0; }

  .vs-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .vs-slider-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .vs-slider-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    background: var(--accent-dim);
    border-radius: 6px;
  }

  .vs-slider {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    margin: 4px 0;
  }
  .vs-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #0a0a0f;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--accent);
    transition: transform 0.15s ease;
  }
  .vs-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
  .vs-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #0a0a0f;
    cursor: pointer;
  }
  .vs-slider-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .vs-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
  }
  .vs-toggle-row input[type="checkbox"] { display: none; }
  .vs-toggle-switch {
    width: 40px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .vs-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.25s ease;
  }
  .vs-toggle-row input:checked ~ .vs-toggle-switch {
    background: rgba(0, 212, 170, 0.25);
    border-color: var(--accent);
  }
  .vs-toggle-row input:checked ~ .vs-toggle-switch::after {
    left: 20px;
    background: var(--accent);
    box-shadow: none;
  }
  .vs-toggle-text {
    flex: 1;
    font-size: 12px;
    color: var(--text-primary);
  }
  .vs-toggle-text strong { display: block; margin-bottom: 2px; }
  .vs-toggle-hint-inline { font-size: 11px; color: var(--text-muted); }

  .vs-footer {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.15);
    flex-wrap: wrap;
  }
  .vs-reset-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }
  .vs-reset-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
  }
  .vs-footer-hint { font-size: 11px; color: var(--text-muted); }

  /* Empty state — Voice Lab */
  .audio-empty-state {
    text-align: center;
    padding: 40px 24px;
    background: var(--glass-bg);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius);
  }
  .audio-empty-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.7; }
  .audio-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  .audio-empty-sub {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.5;
  }
  .audio-empty-sub strong { color: var(--accent); }

  /* No voice state */
  .audio-no-voice {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 24px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.06) 0%, var(--glass-bg) 100%);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius);
  }

  .audio-no-voice-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.7;
  }

  .audio-no-voice-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
  }

  .audio-no-voice-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
  }

  /* Error state */
  .audio-error {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 24px;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.06) 0%, var(--glass-bg) 100%);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--radius);
  }

  .audio-error-title {
    font-size: 16px;
    font-weight: 600;
    color: #ff6b6b;
    margin-bottom: 12px;
  }

  .audio-error-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: var(--radius-sm);
    text-align: left;
  }

  .audio-error-detail code {
    color: #ff9b9b;
    word-break: break-word;
    font-family: monospace;
    font-size: 11px;
  }

  /* Disabled audio button in script cards */
  .btn-card.btn-audio-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    position: relative;
  }

  .btn-card.btn-audio-disabled:hover::after {
    content: "Pre túto funkciu je potrebný voiceclone";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 15, 0.95);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    margin-bottom: 6px;
    z-index: 100;
    border: 1px solid var(--glass-border);
    pointer-events: none;
  }

  .btn-card.btn-audio-disabled:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(10, 10, 15, 0.95);
    margin-bottom: -4px;
    z-index: 100;
    pointer-events: none;
  }

  /* ── VOICE PLACEHOLDER / CLONE UPGRADE ──────────── */
  .voice-item.is-placeholder {
    opacity: 0.92;
    border-style: dashed;
  }

  .voice-item.is-placeholder .voice-item-icon {
    opacity: 0.5;
  }

  .voice-item-placeholder-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f0a93c;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(240, 169, 60, 0.08);
    border: 1px solid rgba(240, 169, 60, 0.3);
    flex-shrink: 0;
  }

  .btn-voice-clone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-voice-clone:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  /* ── NEWSLETTER WIZARD ──────────────────────── */
  .newsletter-wizard {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
  }

  .nl-wizard-header {
    margin-bottom: 32px;
  }

  .nl-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 500px;
    margin: 0 auto;
  }

  .nl-step {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.45;
    transition: opacity 0.25s ease;
  }

  .nl-step.is-active { opacity: 1; }
  .nl-step.is-done   { opacity: 0.7; }

  .nl-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
  }

  .nl-step.is-active .nl-step-num {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
  }

  .nl-step.is-done .nl-step-num {
    background: rgba(0,212,170,0.2);
    color: var(--accent);
    border-color: rgba(0,212,170,0.4);
  }

  .nl-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
  }

  .nl-step-divider {
    height: 1px;
    flex: 1;
    background: var(--glass-border);
    max-width: 60px;
  }

  .nl-step-divider.is-done {
    background: var(--accent);
    opacity: 0.4;
  }

  /* Phase body */
  .nl-phase-body {
    text-align: center;
  }

  .nl-phase-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
  }

  .nl-phase-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 32px;
  }

  /* Verticals grid */
  .nl-verticals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
  }

  @media (max-width: 900px) {
    .nl-verticals-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 500px) {
    .nl-verticals-grid { grid-template-columns: 1fr; }
  }

  .nl-vertical-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 160px;
  }

  .nl-vertical-card:hover {
    border-color: var(--v-color);
    background: var(--v-color-dim);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }

  .nl-vertical-card.is-selected {
    border-color: var(--v-color);
    background: var(--v-color-dim);
    box-shadow: 0 0 0 2px var(--v-color), 0 8px 24px rgba(0,0,0,0.3);
  }

  .nl-vertical-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 4px;
  }

  .nl-vertical-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }

  .nl-vertical-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
  }

  /* Placeholder (fázy 2/3 — dočasné) */
  .nl-placeholder-card {
    max-width: 400px;
    margin: 0 auto 24px;
    padding: 40px 24px;
    background: var(--glass-bg);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius);
  }

  .nl-placeholder-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.7;
  }

  .nl-placeholder-text {
    font-size: 14px;
    color: var(--text-secondary);
  }

  /* Back button */
  .btn-nl-back {
    padding: 10px 18px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-nl-back:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: var(--accent);
  }

  /* ── Fáza 2 ── */

  .nl-vertical-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    width: fit-content;
    margin: 0 auto 24px;
    letter-spacing: 0.02em;
  }

  .nl-vertical-chip-icon { font-size: 14px; }

  .nl-sections-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 620px;
    margin: 0 auto 24px;
  }

  .nl-section-toggle {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
  }

  .nl-section-toggle:hover {
    border-color: var(--glass-hover);
    background: var(--glass-hover);
  }

  .nl-section-toggle.is-on {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(0,212,170,0.06) 0%, var(--glass-bg) 100%);
    box-shadow: none;
  }

  .nl-section-toggle-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }

  .nl-section-toggle-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
  }

  .nl-section-toggle-texts { flex: 1; min-width: 0; }

  .nl-section-toggle-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
  }

  .nl-section-toggle-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
  }

  .nl-toggle-switch {
    width: 44px;
    height: 24px;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
  }

  .nl-toggle-switch-knob {
    width: 18px;
    height: 18px;
    background: var(--text-muted);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.25s ease, background 0.25s ease;
  }

  .nl-section-toggle.is-on .nl-toggle-switch {
    background: rgba(0,212,170,0.25);
    border-color: var(--accent);
  }

  .nl-section-toggle.is-on .nl-toggle-switch-knob {
    left: 22px;
    background: var(--accent);
    box-shadow: none;
  }

  .nl-warning {
    max-width: 620px;
    margin: -8px auto 16px;
    padding: 10px 14px;
    background: rgba(251,146,60,0.08);
    border: 1px solid rgba(251,146,60,0.3);
    border-radius: var(--radius-sm);
    color: #fb923c;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
  }

  .nl-phase-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
  }

  .btn-nl-next {
    padding: 10px 24px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-nl-next:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: none;
  }

  .btn-nl-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* ── NEWSLETTER PHASE 3 ─────────────────────── */
  .nl-content-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
  }

  .nl-content-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }

  .nl-content-icon {
    font-size: 18px;
    line-height: 1;
  }

  .nl-content-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .nl-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
  }

  .nl-field {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
  }

  .nl-field:focus {
    outline: none;
    border-color: var(--accent);
  }

  .nl-textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    line-height: 1.55;
  }

  .nl-textarea:focus {
    outline: none;
    border-color: var(--accent);
  }

  .nl-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .nl-url-num {
    width: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .nl-highlight-types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 4px;
  }

  .nl-highlight-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .nl-highlight-type:hover {
    border-color: rgba(0,212,170,0.4);
    background: rgba(0,212,170,0.06);
  }

  .nl-highlight-type.is-active {
    border-color: var(--accent);
    background: rgba(0,212,170,0.12);
    box-shadow: 0 0 0 1px var(--accent);
  }

  .nl-highlight-type-icon { font-size: 18px; line-height: 1; }
  .nl-highlight-type-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); }

  .nl-logo-upload {
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .nl-logo-upload:hover,
  .nl-logo-upload.drag-over {
    border-color: var(--accent);
    background: rgba(0,212,170,0.06);
  }

  .nl-logo-upload-icon { font-size: 24px; margin-bottom: 6px; }
  .nl-logo-upload-text { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
  .nl-logo-upload-hint { font-size: 11px; color: var(--text-muted); }

  .nl-logo-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
  }

  .nl-logo-preview img {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
    border-radius: 4px;
  }

  .btn-nl-logo-remove {
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
  }

  .btn-nl-logo-remove:hover { opacity: 1; }

  .btn-nl-generate {
    padding: 12px 32px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .btn-nl-generate:hover {
    transform: translateY(-2px);
    box-shadow: none;
  }

  .nl-loading-wrap {
    padding: 24px 0;
    text-align: center;
  }

  .nl-progress-log {
    margin-top: 16px;
    max-height: 120px;
    overflow-y: auto;
    text-align: left;
    padding: 0 4px;
  }

  .nl-log-entry {
    font-size: 12px;
    color: var(--text-muted);
    padding: 3px 0;
    animation: nlFadeIn 0.3s ease;
  }

  .nl-log-entry.done { color: var(--accent); }

  @keyframes nlFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Preview */
  #nlPreviewArea {
    margin-top: 20px;
    animation: nlFadeIn 0.4s ease;
  }

  .nl-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 2px;
  }

  .nl-preview-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
  }

  .nl-preview-actions {
    display: flex;
    gap: 8px;
  }

  .nl-preview-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: #f0f0f5;
  }

  .nl-preview-frame iframe {
    width: 100%;
    height: 600px;
    border: none;
    display: block;
  }

  .btn-nl-copy {
    padding: 7px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .btn-nl-copy:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .btn-nl-regenerate {
    padding: 7px 14px;
    background: rgba(0,212,170,0.1);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .btn-nl-regenerate:hover {
    background: rgba(0,212,170,0.2);
    box-shadow: none;
  }

  /* Error state */
  #nlErrorArea {
    margin-top: 20px;
    animation: nlFadeIn 0.3s ease;
  }

  .nl-error {
    text-align: center;
    padding: 32px 20px;
    background: rgba(248,113,113,0.06);
    border: 1px solid rgba(248,113,113,0.25);
    border-radius: var(--radius);
  }

  .nl-error-icon  { font-size: 32px; margin-bottom: 10px; }
  .nl-error-title { font-size: 15px; font-weight: 700; color: #f87171; margin-bottom: 6px; }
  .nl-error-msg   { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }

  /* ── VIDEO TAB ────────────────────────────── */
  .video-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
  }

  .video-header {
    text-align: center;
    margin-bottom: 28px;
  }

  .video-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
  }

  .video-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
  }

  .btn-video-goto-identity {
    margin-top: 16px;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-video-goto-identity:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  /* Script cards list */
  .video-scripts-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .video-script-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    transition: all 0.2s ease;
  }

  .video-script-card:hover {
    border-color: var(--glass-hover);
    background: var(--glass-hover);
  }

  .video-script-card.has-video {
    border-color: rgba(0,212,170,0.3);
    background: linear-gradient(135deg, rgba(0,212,170,0.04) 0%, var(--glass-bg) 100%);
  }

  .video-script-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .video-script-number {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .video-script-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .video-script-meta-item {
    font-size: 11px;
    color: var(--text-muted);
    padding: 3px 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
  }

  .video-script-badge {
    font-size: 11px;
    color: var(--accent);
    padding: 3px 8px;
    background: rgba(0,212,170,0.12);
    border-radius: 6px;
    font-weight: 600;
  }

  .video-script-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--glass-border);
  }

  .video-script-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .btn-video-generate-small,
  .btn-video-view,
  .btn-video-regenerate {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .btn-video-generate-small {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .btn-video-generate-small:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  .btn-video-view {
    background: var(--glass-bg);
    color: var(--text-primary);
  }

  .btn-video-view:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .btn-video-regenerate {
    background: transparent;
    color: var(--text-secondary);
  }

  .btn-video-regenerate:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: var(--accent);
  }

  /* ── VIDEO MODAL ────────────────────────────── */
  .video-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .video-modal-overlay.is-visible {
    opacity: 1;
  }

  .video-modal {
    background: #0f0f14;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.96);
    transition: transform 0.25s ease;
  }

  .video-modal-overlay.is-visible .video-modal {
    transform: scale(1);
  }

  .video-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }

  .video-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .video-modal-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
  }

  .video-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .video-modal-close:hover {
    background: #ff6b6b;
    border-color: #ff6b6b;
  }

  .video-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
  }

  .video-modal-section {
    margin-bottom: 22px;
  }

  .video-modal-section:last-child {
    margin-bottom: 0;
  }

  .video-modal-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
  }

  .video-modal-script-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 14px 16px;
    background: rgba(0,0,0,0.25);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--accent);
    max-height: 140px;
    overflow-y: auto;
    white-space: pre-wrap;
  }

  /* ── SCRIPT CARD ACTION TOOLBAR ─────────────────────────── */
  .script-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .script-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .script-action-btn:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: var(--accent);
    transform: translateY(-1px);
  }

  /* Audio + Video = fialový highlight */
  .script-action-highlight {
    background: linear-gradient(135deg, rgba(168,85,247,0.15) 0%, rgba(139,92,246,0.1) 100%);
    border-color: rgba(168,85,247,0.35);
    color: #c4b5fd;
    box-shadow: 0 0 12px rgba(168,85,247,0.15);
  }

  .script-action-highlight:hover {
    background: linear-gradient(135deg, rgba(168,85,247,0.25) 0%, rgba(139,92,246,0.18) 100%);
    border-color: rgba(168,85,247,0.6);
    color: #e9d5ff;
    box-shadow: 0 0 20px rgba(168,85,247,0.35);
    transform: translateY(-2px);
  }

  /* B-Roll = žlté tučné písmeno */
  .script-action-broll {
    font-size: 15px;
    font-weight: 900;
    color: #fbbf24;
    font-family: 'Georgia', 'DM Sans', serif;
    letter-spacing: 0.02em;
    min-width: 32px;
    padding: 6px 10px;
  }

  .script-action-broll:hover {
    color: #fcd34d;
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.4);
    text-shadow: 0 0 8px rgba(251,191,36,0.5);
  }

  /* Kopírovať — text vedľa ikonky, mierne odlíšený */
  .script-action-copy {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    margin-left: 6px;
  }

  /* Avatar picker grid */
  .video-avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }

  .video-avatar-card {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--glass-border);
    transition: all 0.2s ease;
    background: var(--glass-bg);
  }

  .video-avatar-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
  }

  .video-avatar-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
  }

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

  .video-avatar-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }

  /* Voice info */
  .video-voice-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(0,212,170,0.06);
    border: 1px solid rgba(0,212,170,0.2);
    border-radius: var(--radius-sm);
  }

  .video-voice-info-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .video-voice-info-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
  }

  .video-voice-info-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
  }

  /* Aspect ratio */
  .video-ratio-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .video-ratio-btn {
    padding: 12px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-family: inherit;
  }

  .video-ratio-btn:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
  }

  .video-ratio-btn.is-active {
    background: rgba(0,212,170,0.1);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }

  .video-ratio-label {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
  }

  .video-ratio-desc {
    font-size: 10px;
    opacity: 0.75;
  }

  /* Modal footer */
  .video-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
  }

  .btn-video-cancel {
    padding: 10px 18px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .btn-video-cancel:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
  }

  .btn-video-generate {
    padding: 10px 22px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .btn-video-generate:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  /* ── Video generation loader ── */
  .video-progress-log {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    max-height: 160px;
    overflow-y: auto;
    font-size: 12px;
    font-family: 'SF Mono', Monaco, monospace;
  }

  .video-log-entry {
    padding: 4px 0;
    color: var(--text-secondary);
    animation: videoLogFade 0.25s ease;
  }

  .video-log-entry.done {
    color: var(--accent);
  }

  @keyframes videoLogFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Video result player ── */
  .video-result-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  }

  .video-result-player {
    width: 100%;
    height: 100%;
    display: block;
  }

  .video-result-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .btn-video-download {
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .btn-video-download:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  .btn-video-copy-link {
    padding: 10px 20px;
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }

  .btn-video-copy-link:hover {
    background: var(--glass-hover);
    border-color: var(--accent);
  }

  /* ── Video error box ── */
  .video-error-box {
    padding: 16px;
    background: rgba(255,107,107,0.08);
    border: 1px solid rgba(255,107,107,0.3);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
  }

  .video-error-msg {
    font-size: 13px;
    color: #ff6b6b;
    line-height: 1.5;
    word-break: break-word;
  }

  .video-error-hints {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
  }

  .video-error-hints ul {
    margin: 8px 0 0;
    padding-left: 20px;
  }

  .video-error-hints li {
    margin-bottom: 4px;
  }

  /* ── Avatar Gender Modal ────────────────────── */
  .avatar-gender-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .avatar-gender-modal-overlay.is-visible {
    opacity: 1;
  }

  .avatar-gender-modal {
    position: relative;
    background: #0f0f14;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 480px;
    padding: 32px 28px 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.96);
    transition: transform 0.25s ease;
  }

  .avatar-gender-modal-overlay.is-visible .avatar-gender-modal {
    transform: scale(1);
  }

  .avatar-gender-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
  }

  .avatar-gender-close:hover {
    background: #ff6b6b;
    border-color: #ff6b6b;
    color: #fff;
  }

  .avatar-gender-modal-header {
    text-align: center;
    margin-bottom: 24px;
  }

  .avatar-gender-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
  }

  .avatar-gender-modal-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .avatar-gender-preview {
    width: 140px;
    height: 140px;
    margin: 0 auto 24px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
  }

  .avatar-gender-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .avatar-gender-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .avatar-gender-option {
    padding: 20px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-family: inherit;
  }

  .avatar-gender-option:hover {
    background: var(--glass-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: none;
  }

  .avatar-gender-option:active {
    transform: translateY(0);
  }

  .avatar-gender-emoji {
    font-size: 48px;
    line-height: 1;
  }

  .avatar-gender-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* ── AVATAR MODEL PICKER (v gender modale) ─────────────── */
  .avatar-model-section {
    margin-bottom: 16px;
  }

  .avatar-model-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
  }

  .avatar-model-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .avatar-model-option {
    padding: 12px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    color: var(--text-primary);
    font-family: inherit;
  }

  .avatar-model-option:hover {
    background: var(--glass-hover);
    border-color: var(--accent);
  }

  .avatar-model-option.is-active {
    background: rgba(0,212,170,0.08);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
  }

  .avatar-model-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-bottom: 2px;
  }

  .avatar-model-sub {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
  }

  /* ── PIPELINE PROGRESS BADGE ─────────────────────────────── */
  #scriptPipelineBadge {
    max-width: 900px;
    margin: 0 auto;
  }

  .pipeline-badge {
    padding: 22px 28px;
    background: linear-gradient(135deg, rgba(0,212,170,0.04) 0%, var(--glass-bg) 100%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    margin-bottom: 24px;
  }

  .pipeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pipeline-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pipeline-progress-text {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 10px;
    background: rgba(0,0,0,0.25);
    border-radius: 999px;
  }

  /* Track s kruhmi a čiarami */
  .pipeline-track {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 20px;
    padding: 0 4px;
  }

  .pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 64px;
  }

  /* Kruh */
  .pipeline-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: all 0.3s ease;
  }

  .pipeline-circle-icon {
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    font-family: 'Georgia', serif;
  }

  /* Stavy kruhov */
  .pipeline-circle-empty {
    background: rgba(255,255,255,0.05);
    border-color: var(--glass-border);
    color: var(--text-muted);
  }

  .pipeline-circle-partial {
    background: linear-gradient(135deg, rgba(251,191,36,0.2) 0%, rgba(251,191,36,0.1) 100%);
    border-color: #fbbf24;
    color: #fbbf24;
    box-shadow: 0 0 16px rgba(251,191,36,0.3);
  }

  .pipeline-circle-complete {
    background: linear-gradient(135deg, rgba(0,212,170,0.25) 0%, rgba(0,212,170,0.12) 100%);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: none;
  }

  .pipeline-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
  }

  .pipeline-count {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
  }

  /* Čiara medzi kruhmi */
  .pipeline-line {
    flex: 1;
    height: 2px;
    background: var(--glass-border);
    margin-top: 21px;
    min-width: 20px;
    transition: background 0.3s ease;
  }

  .pipeline-line-complete {
    background: var(--accent);
    box-shadow: none;
  }

  /* CTA box */
  .pipeline-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(168,85,247,0.08);
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
  }

  .pipeline-cta-label {
    font-size: 12px;
    font-weight: 700;
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .pipeline-cta-text {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
  }

  .pipeline-cta-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 12px rgba(168,85,247,0.3);
  }

  .pipeline-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(168,85,247,0.5);
  }

  /* Done state — zelená */
  .pipeline-cta-done {
    background: rgba(0,212,170,0.1);
    border-color: rgba(0,212,170,0.4);
    justify-content: center;
  }

  .pipeline-cta-done .pipeline-cta-icon {
    font-size: 20px;
  }

  .pipeline-cta-done .pipeline-cta-text {
    color: var(--accent);
    font-weight: 600;
    text-align: center;
    flex: 0;
  }

  /* Mobile responsive */
  @media (max-width: 680px) {
    .pipeline-badge {
      padding: 16px 18px;
    }

    .pipeline-track {
      gap: 2px;
    }

    .pipeline-step {
      min-width: 50px;
    }

    .pipeline-circle {
      width: 38px;
      height: 38px;
    }

    .pipeline-circle-icon {
      font-size: 15px;
    }

    .pipeline-label {
      font-size: 10px;
    }

    .pipeline-count {
      font-size: 9px;
    }

    .pipeline-line {
      min-width: 10px;
      margin-top: 18px;
    }

    .pipeline-cta {
      padding: 10px 12px;
    }
  }

  /* ── HOME SCREEN ─────────────────────────────────────────── */

  /* Container */
  .home-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
  }

  /* Greeting */
  .home-greeting {
    margin-bottom: 28px;
  }

  .home-greeting-hello {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }

  .home-greeting-question {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 400;
  }

  /* Bento grid — 4 stĺpce */
  .home-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 14px;
    align-items: stretch;
  }

  /* Base card */
  .home-card {
    position: relative;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .home-card:hover {
    transform: translateY(-4px);
  }

  .home-card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .home-card-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 12px;
  }

  .home-card-broll-icon {
    font-size: 36px;
    font-weight: 900;
    color: #fbbf24;
    font-family: 'Georgia', serif;
  }

  .home-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }

  .home-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
  }

  .home-card-cta {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    align-self: flex-start;
  }

  .home-card:hover .home-card-cta {
    opacity: 1;
  }

  /* Malé karty */
  .home-card-small {
    grid-row: 3 / 4;
    min-height: 120px;
  }

  .home-card-small .home-card-icon {
    font-size: 28px;
    margin-bottom: 8px;
  }

  .home-card-small .home-card-broll-icon {
    font-size: 28px;
  }

  .home-card-small .home-card-title {
    font-size: 15px;
    margin-bottom: 0;
  }

  .home-card-small .home-card-cta {
    font-size: 14px;
    position: absolute;
    top: 24px;
    right: 24px;
    margin: 0;
    opacity: 0.5;
  }

  .home-card-small:hover .home-card-cta {
    opacity: 1;
    transform: translateX(4px);
    transition: all 0.2s ease;
  }

  /* AVATAR karta — 2×2 vľavo */
  .home-card-avatar {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background: linear-gradient(135deg,
      rgba(168,85,247,0.25) 0%,
      rgba(99,102,241,0.15) 50%,
      rgba(0,212,170,0.1) 100%);
    border-color: rgba(168,85,247,0.35);
  }

  .home-card-avatar:hover {
    border-color: rgba(168,85,247,0.7);
    box-shadow: 0 20px 60px rgba(168,85,247,0.25);
  }

  .home-card-avatar .home-card-icon {
    font-size: 64px;
  }

  .home-card-avatar .home-card-title {
    font-size: 28px;
  }

  .home-card-avatar .home-card-desc {
    font-size: 15px;
  }

  /* VIDEO — pravý hore 2×1 */
  .home-card-video {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
    background: linear-gradient(135deg,
      rgba(255,107,107,0.2) 0%,
      rgba(251,146,60,0.12) 100%);
    border-color: rgba(255,107,107,0.3);
  }

  .home-card-video:hover {
    border-color: rgba(255,107,107,0.6);
    box-shadow: 0 12px 40px rgba(255,107,107,0.2);
  }

  /* SKRIPTY — pravý dole 2×1 */
  .home-card-scripts {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
    background: linear-gradient(135deg,
      rgba(0,212,170,0.2) 0%,
      rgba(34,211,238,0.1) 100%);
    border-color: rgba(0,212,170,0.3);
  }

  .home-card-scripts:hover {
    border-color: rgba(0,212,170,0.6);
    box-shadow: none;
  }

  /* Malé karty pozície */
  .home-card-music {
    grid-column: 1 / 2;
    background: linear-gradient(135deg, rgba(56,189,248,0.18) 0%, rgba(99,102,241,0.08) 100%);
  }

  .home-card-broll {
    grid-column: 2 / 3;
    background: linear-gradient(135deg, rgba(251,191,36,0.18) 0%, rgba(251,146,60,0.08) 100%);
  }

  .home-card-caption {
    grid-column: 3 / 4;
    background: linear-gradient(135deg, rgba(232,121,249,0.18) 0%, rgba(168,85,247,0.08) 100%);
  }

  .home-card-newsletter {
    grid-column: 4 / 5;
    background: linear-gradient(135deg, rgba(99,102,241,0.18) 0%, rgba(168,85,247,0.08) 100%);
  }

  /* Responsive — 2 stĺpce */
  @media (max-width: 900px) {
    .home-bento {
      grid-template-columns: repeat(2, 1fr);
    }

    .home-card-avatar {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      min-height: 200px;
    }

    .home-card-video,
    .home-card-scripts {
      grid-column: auto;
      grid-row: auto;
    }

    .home-card-small {
      grid-row: auto;
      grid-column: auto;
    }

    .home-card-music, .home-card-broll,
    .home-card-caption, .home-card-newsletter {
      grid-column: auto;
    }
  }

  /* Responsive — 1 stĺpec */
  @media (max-width: 560px) {
    .home-bento {
      grid-template-columns: 1fr;
    }

    .home-card-avatar {
      grid-column: 1;
    }

    .home-greeting-hello {
      font-size: 24px;
    }
  }

  /* ── USERNAME MODAL ─────────────────────────────────────── */
  .username-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .username-modal-overlay.is-visible { opacity: 1; }

  .username-modal {
    background: linear-gradient(135deg, #14141a 0%, #0a0a0f 100%);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px 32px 32px;
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .username-modal-overlay.is-visible .username-modal {
    transform: scale(1);
  }

  .username-modal-icon {
    font-size: 52px;
    margin-bottom: 16px;
  }

  .username-modal-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
  }

  .username-modal-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
  }

  .username-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    text-align: center;
    outline: none;
    margin-bottom: 16px;
    transition: all 0.2s ease;
    box-sizing: border-box;
  }

  .username-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  .btn-username-save {
    width: 100%;
    padding: 14px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-username-save:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }

  .btn-username-save:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ── AVATAR ONBOARDING MODAL — extends username-modal ─────────── */
  .avatar-onboarding-modal {
    max-width: 460px !important;
    position: relative;
  }

  .avatar-onboarding-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar-onboarding-close:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
    transform: rotate(90deg);
  }

  .avatar-onboarding-drop {
    margin: 8px 0 16px;
    padding: 28px 20px;
    border: 2px dashed rgba(255,255,255,0.18);
    border-radius: 16px;
    background: rgba(0,0,0,0.25);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .avatar-onboarding-drop:hover,
  .avatar-onboarding-drop.drag-over {
    border-color: var(--accent);
    background: rgba(0,212,170,0.06);
  }

  .avatar-onboarding-drop-icon {
    font-size: 36px;
    margin-bottom: 8px;
    opacity: 0.85;
  }
  .avatar-onboarding-drop-title {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 4px;
  }
  .avatar-onboarding-drop-title a {
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
  }
  .avatar-onboarding-drop-hint {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
  }

  #avatarOnboardingPreview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  #avatarOnboardingPreviewImg {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    box-shadow: none;
  }
  #avatarOnboardingChangeBtn {
    padding: 6px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  #avatarOnboardingChangeBtn:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
  }

  .avatar-onboarding-info {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
    text-align: center;
  }

  /* Biometrický SVG icon — biele line-art s subtle cyan glow */
  .avatar-onboarding-svg-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    filter: drop-shadow(0 0 12px rgba(0,212,255,0.45));
  }

  /* Preview stack — image centered with button below (vertical) */
  .avatar-onboarding-preview-stack {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* ── AVATAR PROFILE HERO (dashboard top) ─────────────────────── */
  .avatar-profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0 8px;
  }

  .avatar-profile-portrait {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #00d4ff;
    box-shadow: 0 0 40px rgba(0,212,255,0.35), inset 0 0 20px rgba(0,0,0,0.5);
    background: #000;
    margin-bottom: 16px;
  }
  .avatar-profile-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .avatar-profile-portrait-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #14141a 0%, #0a0a0f 100%);
    border-color: var(--glass-border);
    box-shadow: none;
  }

  .avatar-profile-portrait.is-generating {
    animation: avatar-portrait-pulse 1.6s ease-in-out infinite;
  }
  @keyframes avatar-portrait-pulse {
    0%, 100% { box-shadow: 0 0 40px rgba(0,212,255,0.35), inset 0 0 20px rgba(0,0,0,0.5); }
    50%      { box-shadow: 0 0 60px rgba(0,212,255,0.7),  inset 0 0 20px rgba(0,0,0,0.5); }
  }

  .avatar-profile-spinner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
  }
  .avatar-profile-spinner {
    font-size: 36px;
    animation: avatar-spinner-spin 1s linear infinite;
  }
  @keyframes avatar-spinner-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .avatar-profile-name {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
  }
  .avatar-profile-handle {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.7;
    font-family: 'Space Grotesk', monospace;
    margin-bottom: 14px;
  }

  .avatar-profile-status {
    margin: 4px 0 12px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
  }
  .avatar-profile-status.status-loading {
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.3);
    color: #00d4ff;
  }
  .avatar-profile-status.status-warn {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    color: #fbbf24;
    max-width: 420px;
    line-height: 1.4;
  }
  .avatar-profile-status.status-ok {
    background: rgba(0,212,170,0.1);
    border: 1px solid rgba(0,212,170,0.3);
    color: var(--accent);
  }

  .avatar-profile-regen {
    padding: 8px 16px;
    background: rgba(0,212,170,0.1);
    border: 1px solid rgba(0,212,170,0.3);
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .avatar-profile-regen:hover {
    background: rgba(0,212,170,0.2);
    transform: translateY(-1px);
    box-shadow: none;
  }

  /* ══════════════════════════════════════════════════════════════
     AVATAR GENERATION PROGRESS SCREEN — počas Nano Banana generácie
     ══════════════════════════════════════════════════════════════ */
  .avatar-progress-screen {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: radial-gradient(ellipse at center, rgba(0,30,60,0.25) 0%, transparent 70%);
  }
  .avatar-progress-content {
    text-align: center;
    max-width: 560px;
  }
  .avatar-progress-icon {
    display: inline-flex;
    margin-bottom: 28px;
    filter: drop-shadow(0 0 18px rgba(0,212,255,0.55));
    animation: avatar-progress-pulse 2.4s ease-in-out infinite;
  }
  @keyframes avatar-progress-pulse {
    0%,100% { transform: scale(1);    filter: drop-shadow(0 0 18px rgba(0,212,255,0.55)); }
    50%     { transform: scale(1.05); filter: drop-shadow(0 0 28px rgba(0,212,255,0.85)); }
  }
  .avatar-progress-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
  }
  .avatar-progress-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
  }
  .avatar-progress-desc strong {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .avatar-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .avatar-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00d4ff 0%, #00d4aa 100%);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(0,212,255,0.5);
  }
  .avatar-progress-percent {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    font-family: 'Space Grotesk', monospace;
    margin-bottom: 6px;
  }
  .avatar-progress-step {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ══════════════════════════════════════════════════════════════
     AVATAR STAGE — fullscreen layout (Step 4)
     centrálny portrét + 3 floating bubliny
     parent (#rpContent + .right-panel) má overflow:hidden cez panel.js
     ══════════════════════════════════════════════════════════════ */
  .avatar-stage {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    /* KRITICKÉ: žiadny background — img s mix-blend-mode bude blendovať priamo
       s page background (cez transparentný .right-panel a #rpContent). Akýkoľvek
       opaque/semi-opaque bg tu by spôsobil že čierne pixely obrázka by sa zmiešali
       s ním a vytvorili viditeľný "štvorec". */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Žiadny ::before glow zatiaľ — pridáme ho neskôr cez drop-shadow ktoré ide z img shape, nie zo štvorca. */

  /* Wrap pre meno + portrét — flex column, centrovaný cez stage flex-center.
     Žiadny position:absolute → bublinky/sloty fungujú nezávisle. */
  .avatar-stage-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  /* Meno avatara — Sacramento (elegantné podpisové script písmo), biele, menšie.
     text-transform: capitalize → "michal" → "Michal" automaticky.
     Alternatívy: 'Allura', 'Italianno' (oba sú v <head> načítané). */
  .avatar-stage-name {
    font-family: 'Sacramento', 'Brush Script MT', cursive;
    font-size: clamp(28px, 3vw, 46px);
    font-weight: 400;
    color: rgba(255,255,255,0.95);
    text-shadow:
      0 0 12px rgba(255,255,255,0.25),
      0 0 28px rgba(0,212,255,0.18);
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: capitalize;
    /* Mierne preklopenie cez vrch portrétu, ale jemnejšie než pri väčšom fonte */
    margin-bottom: -10px;
    z-index: 4;
    pointer-events: none;
    white-space: nowrap;
  }

  /* Centrálny portrét — bez position:absolute, bez transform → ŽIADNY stacking context.
     Centrovanie zaisťuje flex parent (.avatar-stage). mix-blend-mode na img potom
     môže blendovať s page background a ::before glow normálne. */
  .avatar-stage-portrait {
    position: relative;
    width: min(88vh, 820px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    flex-shrink: 0;
  }

  /* mix-blend-mode: screen na img.
     Per pixel: result = 1 - (1-base) * (1-blend).
     Black image pixel (0,0,0) screen-blended s page bg (dark) = page bg → black "zmizne".
     Cyan plexus body screen-blended s page bg = cyan zachované + boost.

     KEY: aby toto fungovalo, musí byť .avatar-stage TRANSPARENTNÉ (žiadny bg gradient),
     a parent reťaz (.right-panel, #rpContent, .main, body) tiež nesmie mať opaque bg
     priamo nad blend layerom. Inak img blenduje s nesprávnym backdrop-om.

     filter: contrast(1.3) — pushne mid-tone tmavé pixely na čisto čierne (lepšie zmiznú
     po blend) a jasné na ešte jasnejšie (plexus žiari viac). Reducuje viditeľný "kruh"
     okolo hlavy ktorý vznikal z mid-tone gradientových pixelov v avatar.png. */
  .avatar-stage-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
    filter: contrast(1.15);
  }
  .avatar-stage-portrait.is-generating {
    animation: stage-pulse 2s ease-in-out infinite;
  }
  @keyframes stage-pulse {
    0%,100% { filter: drop-shadow(0 0 60px rgba(0,212,255,0.35)); }
    50%     { filter: drop-shadow(0 0 100px rgba(0,212,255,0.7)); }
  }

  /* Portrait je clickable ale bez hover transform / blur animácií —
     mix-blend-mode: screen na transparentnom PNG by inak odhalil čierny štvorec
     pozadia keď sa zmení transform/filter. Klik proste prepne portrait okamžite. */
  .avatar-stage-portrait.is-clickable {
    pointer-events: auto;
    cursor: pointer;
  }

  .avatar-stage-spinner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
  }
  .avatar-stage-spinner {
    font-size: 48px;
    animation: avatar-spinner-spin 1s linear infinite;
  }

  .avatar-stage-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px dashed rgba(0,212,255,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    pointer-events: auto;
  }
  .avatar-stage-cta {
    padding: 14px 28px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .avatar-stage-cta:hover {
    transform: translateY(-2px);
    box-shadow: none;
  }

  /* SVG spojnice — pod bublinami, nad portrétom */
  .avatar-stage-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
  }

  /* ══════════════════════════════════════════════════════════════
     HERO SPLIT — biometric LEFT (glass card), Avatary + Akcie RIGHT.
     Equal-width columns, stretched heights, Avatary cards = LP cat-card style.
     ══════════════════════════════════════════════════════════════ */
  .avatar-stage-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
    padding: 24px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
  }

  /* LEFT — TESNÝ glass frame okolo biometric portrétu (žiadny extra padding navôkol) */
  .avatar-split-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 10px;
    min-width: 0;
  }
  /* Portrét fillne dostupný priestor (preserved aspect-ratio 1:1).
     max-width / max-height drží štvorec aj v širokom alebo vysokom containeri. */
  .avatar-split-left .avatar-stage-portrait {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    flex: 1;
    min-height: 0;
  }

  /* RIGHT — column s Avatary (compact top) + Akcie (substantial bottom) */
  .avatar-split-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /* Section card — base style */
  .avatar-section {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
  }
  .avatar-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    margin-bottom: 14px;
  }

  /* AVATARY section — kompaktná, hugs content (NEnaťahuje sa na celú výšku).
     Akcie pod ňou potom môžu zaberať väčšinu zostávajúceho priestoru. */
  .avatar-section-slots {
    flex-shrink: 0;
  }
  .avatar-section-slots .avatar-slots-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* Slot card — LP cat-card hero style, ale square (1:1) aspect — kompaktnejšie.
     Override pôvodné absolute positioning. */
  .avatar-section-slots .avatar-slot {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: auto;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    aspect-ratio: 1 / 1;
  }
  .avatar-section-slots .avatar-slot-active:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  }
  .avatar-section-slots .avatar-slot-active.avatar-slot-selected {
    border-color: var(--accent, #00d4aa);
    box-shadow: 0 0 0 2px rgba(0,212,170,0.45), 0 8px 24px rgba(0,0,0,0.45);
  }

  /* Hero image — full cover, top focus pre tváre */
  .avatar-slot-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
    transition: transform 0.4s ease;
  }
  .avatar-section-slots .avatar-slot-active:hover .avatar-slot-bg {
    transform: scale(1.04);
  }

  /* Bottom gradient overlay — fade to black, name + @tag inside */
  .avatar-slot-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 12px 12px;
    background: linear-gradient(to top,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.7) 45%,
      rgba(0,0,0,0.25) 80%,
      transparent 100%);
    z-index: 1;
  }
  .avatar-slot-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: capitalize;
  }
  .avatar-slot-tag {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-top: 3px;
    letter-spacing: 0.04em;
    font-weight: 500;
  }

  /* Empty / locked / add slots — same card shape, dashed border, centered icon */
  .avatar-section-slots .avatar-slot-empty,
  .avatar-section-slots .avatar-slot-locked,
  .avatar-section-slots .avatar-slot-add {
    border-style: dashed;
    border-color: rgba(255,255,255,0.13);
    background: rgba(255,255,255,0.02);
  }
  .avatar-section-slots .avatar-slot-add:hover {
    border-color: rgba(0,212,170,0.4);
    background: rgba(0,212,170,0.05);
  }
  .avatar-slot-empty-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 12px;
  }
  .avatar-slot-empty-content .avatar-slot-icon {
    font-size: 30px;
    opacity: 0.55;
    line-height: 1;
  }
  .avatar-slot-empty-content .avatar-slot-icon svg {
    width: 32px;
    height: 32px;
  }
  .avatar-slot-empty-content .avatar-slot-empty-label {
    font-size: 11.5px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
    font-weight: 500;
  }

  /* Delete tlačítko — top-right roh slotu */
  .avatar-section-slots .avatar-slot-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
  }

  /* AKCIE section — substantial, fills remaining vertical space */
  .avatar-section-actions {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .avatar-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
  }
  /* Buttony rovnomerne vyplňia zostávajúci priestor v Akcie sekcii */
  .avatar-action {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    width: 100%;
    flex: 1;
    min-height: 0;
  }
  .avatar-action:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(0, 212, 170, 0.32);
    transform: translateX(2px);
  }
  .avatar-action-icon {
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
  }
  .avatar-action-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .avatar-action-title {
    font-size: 17px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    line-height: 1.2;
    letter-spacing: 0.01em;
  }
  .avatar-action-desc {
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
    line-height: 1.2;
  }
  .avatar-action-arrow {
    font-size: 22px;
    color: rgba(255,255,255,0.3);
    transition: transform 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
  }
  .avatar-action:hover .avatar-action-arrow {
    color: var(--accent, #00d4aa);
    transform: translateX(3px);
  }

  /* Responsive — collapse na single column ked panel je úzky */
  @media (max-width: 1100px) {
    .avatar-stage-split {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 16px;
    }
    .avatar-section-slots .avatar-slot {
      aspect-ratio: 3 / 4;
    }
  }

  /* ══════════════════════════════════════════════════════════════
     NEURAL DOSSIER — FBI / classified case file layout
     Status bar + 2-col hero (scan + dossier) + capability matrix + training/voice row.
     Fits viewport without scroll. Monospace fonts pre IDs/hashe/markers.
     ══════════════════════════════════════════════════════════════ */
  .avatar-stage-dossier {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
    overflow: hidden;
  }

  /* ─── STATUS BAR (top strip) ─── */
  .dossier-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: rgba(0, 212, 170, 0.04);
    border: 1px solid rgba(0, 212, 170, 0.18);
    border-radius: 10px;
    font-size: 11px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  .dossier-id {
    color: var(--accent, #00d4aa);
    font-weight: 600;
    font-family: 'SF Mono', 'Courier New', monospace;
  }
  .dossier-divider {
    color: rgba(255, 255, 255, 0.2);
  }
  .dossier-pill {
    font-weight: 600;
    letter-spacing: 0.08em;
  }
  .dossier-pill-active {
    color: var(--accent, #00d4aa);
  }
  .dossier-pill-pending {
    color: #d97706;
  }
  .dossier-pill-pro {
    color: #d97706;
  }
  .dossier-pill-setup {
    color: rgba(255, 255, 255, 0.5);
  }
  .dossier-meta {
    margin-left: auto;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'SF Mono', 'Courier New', monospace;
  }

  /* ─── SECTION CARD base ─── */
  .avatar-stage-dossier .dossier-section {
    background: rgba(15, 20, 28, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .avatar-stage-dossier .dossier-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .dossier-section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .dossier-section-row .dossier-section-label {
    margin-bottom: 0;
  }
  .dossier-section-meta-tag {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'SF Mono', 'Courier New', monospace;
  }

  /* ─── HERO ROW: BIOMETRIC SCAN | IDENTITY DOSSIER | CAPABILITY MATRIX ─── */
  .dossier-hero-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.85fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
    /* POZN: ŽIADNY will-change ani transform ani z-index ani opacity-modifier —
       čokoľvek by vytvorilo stacking context by izolovalo mix-blend-mode: screen
       na portréte avatara a okolo plexus hlavy by sa zjavila čierna farba.
       Slide animácia funguje aj bez will-change hint-u. */
  }

  /* Avatar stage — plná šírka pre hero-row (scan/identita/matrix v originál
     veľkostiach). overflow:visible OVERRIDE na overflow:hidden z .avatar-stage
     parent class — umožní arrow vyčnievať z avatar-stage do parent priestoru
     (rpContent ktorý má v tomto layout naturálne miesto napravo/naľavo). */
  .avatar-stage-dossier {
    position: relative;
    overflow: visible;
  }

  /* ─── AVATAR PREV/NEXT — veľký chevron MIMO tiles (negatívny offset) ───
     Negatívny left/right offset → arrow vyčnieva za hranu avatar-stage-dossier
     do priestoru ktorý je za matrix/scan tiles. Žiadny overlap s tile-mi.
     Bez background/border — len veľký priehľadný cyan chevron. */
  .avatar-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    color: rgba(0, 212, 170, 0.85);
    cursor: pointer;
    font-size: 130px;
    font-weight: 200;
    line-height: 0.7;
    padding: 40px 16px;
    text-shadow: 0 0 18px rgba(0, 212, 170, 0.6);
    transition: color 0.18s ease, text-shadow 0.18s ease, transform 0.18s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  .avatar-nav:hover {
    color: #00ffd0;
    text-shadow: 0 0 32px rgba(0, 255, 208, 0.95), 0 0 12px rgba(0, 212, 170, 0.7);
    transform: translateY(-50%) scale(1.18);
  }
  .avatar-nav:active {
    transform: translateY(-50%) scale(0.92);
  }
  /* Negatívne offsety — chevron vyčnieva ZA hranu avatar-stage-dossier do parent
     #rpContent priestoru. Vďaka overflow:visible nie je clipped. Hero-row a
     všetky tiles zostávajú v originál veľkostiach. */
  .avatar-nav-prev { left: -80px; }
  .avatar-nav-next { right: -80px; }

  /* ─── DOSSIER SECTION HEADER — label vľavo, trash icon vpravo ─── */
  .dossier-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .dossier-section-header .dossier-section-label {
    margin-bottom: 0;
  }
  .dossier-trash-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }
  .dossier-trash-btn svg {
    width: 14px;
    height: 14px;
  }
  .dossier-trash-btn:hover {
    background: rgba(255, 80, 80, 0.18);
    border-color: rgba(255, 100, 100, 0.5);
    color: #ff8080;
  }

  /* BIOMETRIC SCAN — plexus avatar + grid + scan laser + landmark markers
     KRITICKÉ: section bg je transparentný aby mix-blend-mode: screen na portrétu
     blendoval s page bg (dark) priamo, nie s rgba(15,20,28,0.4) — inak by čierne
     pixely transparentnej PNG nezmizli a vznikol by viditeľný štvorec. */
  .dossier-section-scan {
    position: relative;
    background: transparent;
  }

  /* Scan section header — label vľavo, PRMD-ID + 🛡 BIOMETRIC LOCK pill vpravo.
     Nahradzuje pôvodný full-width status bar (zbytočná vrstva pod hlavným menu). */
  .dossier-scan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .dossier-scan-header .dossier-section-label {
    margin-bottom: 0;
  }
  .dossier-scan-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .dossier-scan-header-meta .dossier-id {
    font-size: 10px;
  }
  .dossier-scan-header-meta .dossier-pill {
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(0, 212, 170, 0.12);
    letter-spacing: 0.08em;
  }
  .dossier-scan-header-meta .dossier-pill-pending {
    background: rgba(217, 119, 6, 0.12);
  }
  .dossier-scan-stage {
    position: relative;
    flex: 1;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: transparent;
  }
  /* Boost contrast pre plexus glow — pôvodná tunená hodnota z centred verzie.
     Pushne mid-tone tmavé pixely na čistú čiernu (lepšie zmiznú po screen blend)
     a jasné cyan particles na ešte jasnejšie (plexus žiari viac). */
  .dossier-scan-stage .avatar-stage-portrait img {
    filter: contrast(1.3);
    /* Zoom into face — plexus PNG má veľa čierneho priestoru okolo hlavy,
       mix-blend-mode: screen ho schová, takže scale-up "kropuje" len neviditeľné
       okraje a face samotná sa približuje (+30%). */
    transform: scale(1.3);
    transform-origin: center center;
  }
  .dossier-scan-stage.is-clickable {
    cursor: pointer;
  }
  /* Subtle grid pattern overlay — sci-fi scan vibe.
     POZN: žiaden z-index — vytvoril by stacking context čo by izoloval
     mix-blend-mode na portrét img. Paint order ide podľa DOM-u (grid prvý). */
  .dossier-scan-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(0, 212, 170, 0.08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 212, 170, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
  }
  /* Portrait inside scan stage — 70% stage size (ponecháva breathing room
     pre landmark markery na okrajoch).
     KRITICKÉ: žiaden z-index! z-index by vytvoril stacking context a
     mix-blend-mode: screen na img by sa izoloval — blendoval by len s
     transparentným bg portrétu, nie s gridom. Portrait sa zobrazí nad grid
     podľa DOM order (grid prvý, portrét druhý). */
  .dossier-scan-stage .avatar-stage-portrait {
    position: relative;
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }

  /* LASER SCAN LINE — animuje sa zhora dole, glow trail */
  .dossier-scan-laser {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 212, 170, 0.6) 20%,
      var(--accent, #00d4aa) 50%,
      rgba(0, 212, 170, 0.6) 80%,
      transparent 100%);
    box-shadow: none;
    pointer-events: none;
    z-index: 5;
    animation: dossier-scan-line 4s ease-in-out infinite;
  }
  @keyframes dossier-scan-line {
    0%, 100% { top: 0%; opacity: 0; }
    8%       { opacity: 1; }
    50%      { top: calc(100% - 2px); opacity: 1; }
    58%      { opacity: 0; }
    65%, 99% { top: calc(100% - 2px); opacity: 0; }
  }

  /* Landmark markers — random per-character (deterministic z char.id).
     12 možných pozícií okolo tváre: 4 corners + 4 mid-sides + 4 internal zones.
     JS (avatar.js / generateBiometricLandmarks) vyberá 6–9 z poolu a každému
     priradí jednu pozíciu — výsledok deterministický pre daný char.id. */
  .dossier-scan-marker {
    position: absolute;
    font-size: 9px;
    font-family: 'SF Mono', 'Courier New', monospace;
    color: rgba(0, 212, 170, 0.7);
    letter-spacing: 0.04em;
    z-index: 4;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  }
  /* VŠETKY pozície sú EDGE-ONLY — markery nesmú zasahovať do face / hair /
     shoulders. Avatar má 1:1 portrait centrovaný cez stage; markery žijú
     na top / bottom / left / right okrajoch + na rohoch. */
  /* 4 corners */
  .dossier-scan-marker-tl { top: 8px;    left: 10px; }
  .dossier-scan-marker-tr { top: 8px;    right: 10px; }
  .dossier-scan-marker-bl { bottom: 8px; left: 10px; }
  .dossier-scan-marker-br { bottom: 8px; right: 10px; }
  /* 4 mid-sides */
  .dossier-scan-marker-t  { top: 8px;    left: 50%; transform: translateX(-50%); }
  .dossier-scan-marker-b  { bottom: 8px; left: 50%; transform: translateX(-50%); }
  .dossier-scan-marker-l  { top: 50%;    left: 10px; transform: translateY(-50%); }
  .dossier-scan-marker-r  { top: 50%;    right: 10px; transform: translateY(-50%); }
  /* 4 quarter-edge pozície — extra rozptyl po horných/dolných okrajoch */
  .dossier-scan-marker-t1 { top: 8px;    left: 25%; transform: translateX(-50%); }
  .dossier-scan-marker-t2 { top: 8px;    left: 75%; transform: translateX(-50%); }
  .dossier-scan-marker-b1 { bottom: 8px; left: 25%; transform: translateX(-50%); }
  .dossier-scan-marker-b2 { bottom: 8px; left: 75%; transform: translateX(-50%); }

  .dossier-scan-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'SF Mono', 'Courier New', monospace;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }

  /* IDENTITY DOSSIER — case file panel */
  .dossier-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .dossier-info-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 212, 170, 0.08);
    border: 1px solid var(--accent, #00d4aa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--accent, #00d4aa);
    font-size: 14px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  .dossier-info-name {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    text-transform: capitalize;
  }
  .dossier-info-tag {
    font-size: 12px;
    color: var(--accent, #00d4aa);
    font-family: 'SF Mono', 'Courier New', monospace;
    margin-top: 2px;
  }
  .dossier-info-table {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 14px;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
  }
  .dossier-info-table dt {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
  }
  .dossier-info-table dd {
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
  }
  .dossier-info-emphasize {
    color: var(--accent, #00d4aa);
    font-weight: 600;
  }
  .dossier-info-mono {
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 11.5px;
  }
  .dossier-info-ready {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
  }
  .dossier-info-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
  }
  .dossier-info-empty-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
  }
  .dossier-info-empty-cta {
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(0, 212, 170, 0.1);
    border: 1px solid rgba(0, 212, 170, 0.4);
    color: var(--accent, #00d4aa);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }
  .dossier-info-empty-cta:hover {
    background: rgba(0, 212, 170, 0.18);
    border-color: rgba(0, 212, 170, 0.6);
    transform: translateY(-1px);
  }

  /* ─── TRAINING DATA — embedded v Identity Dossier (pod table, nad READY) ─── */
  .dossier-info-train {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .dossier-info-train-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .dossier-info-train-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
  }
  .dossier-info-train-count {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent, #00d4aa);
    font-family: 'SF Mono', 'Courier New', monospace;
  }
  /* Grid auto-fit — všetky fotky sa zobrazia v compact mriežke */
  .dossier-info-train-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 6px;
  }
  .dossier-info-train-thumb {
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 170, 0.22);
    background: rgba(26, 35, 50, 0.5);
    transition: border-color 0.18s ease, transform 0.18s ease;
    cursor: pointer;
  }
  .dossier-info-train-thumb:hover {
    border-color: rgba(0, 212, 170, 0.55);
    transform: scale(1.05);
    z-index: 2;
  }
  .dossier-info-train-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  .dossier-info-train-num {
    position: absolute;
    bottom: 2px;
    left: 3px;
    font-size: 8px;
    font-family: 'SF Mono', 'Courier New', monospace;
    color: var(--accent, #00d4aa);
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.05em;
  }
  .dossier-info-train-empty {
    text-align: center;
    padding: 10px 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
  }

  /* ─── CREATIONS GALLERY — embedded v Identity Dossier (placeholder) ─── */
  /* Nahrádza pôvodnú TRAINING DATA sekciu v strede (training sa presunul do
     Capability Matrix). Tu má byť galéria výtvorov ktoré user spravil cez
     @meno injection v image/video generátoroch. Zatial empty state — tagging
     pri ukladaní výtvorov sa zavedie v ďalšom kole. */
  .dossier-info-creations {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .dossier-info-creations-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
  }
  .dossier-info-creations-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
  }
  .dossier-info-creations-count {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent, #00d4aa);
    font-family: 'SF Mono', 'Courier New', monospace;
  }
  .dossier-info-creations-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 14px;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
  }
  .dossier-info-creations-empty-icon {
    font-size: 28px;
    line-height: 1;
    /* SVG generation icon má vlastnú opacity v stroke (rgba 0.85) — žiadne
       extra container opacity, inak by sa nasčítalo a icon by zhasol. */
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dossier-info-creations-empty-icon svg {
    width: 34px;
    height: 34px;
  }
  .dossier-info-creations-empty-text {
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    max-width: 240px;
  }
  .dossier-info-creations-empty-text code {
    background: rgba(0, 212, 170, 0.12);
    color: var(--accent, #00d4aa);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Courier New', monospace;
    font-size: 10.5px;
  }

  /* AVATAR GALÉRIA grid — generation thumbs (image alebo video s ▶ badge) */
  .dossier-info-creations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
  }
  .dossier-info-creations-grid::-webkit-scrollbar { width: 4px; }
  .dossier-info-creations-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

  .dossier-info-creation-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .dossier-info-creation-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .dossier-info-creation-thumb:hover {
    transform: scale(1.05);
    border-color: rgba(0, 212, 170, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 2;
  }
  /* ▶ play badge pre video generácie — vpravo dole */
  .dossier-info-creation-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1px;
  }

  /* ─── PROMPT ATTENTION PULSE — krátka pulse animácia po navigácii do generátora ───
     Volaná z avatar.js → goToNanoBananaWithPromptBlink(). Po nav-i sa pridá class
     na <textarea id="nbPromptInput">, beží 3 cykly (~4.2s) a class sa odstráni.
     Box-shadow expanduje aby user hneď vedel "tu je prompt — píš". */
  @keyframes prompt-attention-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 212, 255, 0.22); }
  }
  .prompt-attention-pulse {
    animation: prompt-attention-pulse 1.4s ease-in-out 0s 3;
    border-color: rgba(0, 212, 255, 0.55) !important;
    transition: border-color 0.3s ease;
  }

  /* ─── TRAINING DATA LIGHTBOX — modal s thumbs (klik na "📚 Training data" tile) ─── */
  .training-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 9999;
  }
  .training-lightbox-overlay.is-visible {
    opacity: 1;
  }
  .training-lightbox-content {
    width: min(86vw, 880px);
    max-height: 84vh;
    background: rgba(15, 20, 28, 0.98);
    border: 1px solid rgba(0, 212, 170, 0.25);
    border-radius: 14px;
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  }
  .training-lightbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: 12px;
  }
  .training-lightbox-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .training-lightbox-meta {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
  }
  .training-lightbox-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    transition: color 0.15s;
  }
  .training-lightbox-close:hover {
    color: #fff;
  }
  .training-lightbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
  }
  .training-lightbox-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 170, 0.22);
    background: rgba(0, 0, 0, 0.35);
  }
  .training-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .training-lightbox-num {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 9.5px;
    font-family: 'SF Mono', 'Courier New', monospace;
    color: var(--accent, #00d4aa);
    background: rgba(0, 0, 0, 0.75);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
  }

  /* ─── CAPABILITY MATRIX (vertical stack v hero row, 5 tiles podseba) ─── */
  .dossier-cap-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
  }
  .dossier-cap {
    position: relative;        /* anchor pre prípadné absolute decorácie tile */
    overflow: hidden;
    background: rgba(15, 20, 28, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color 0.18s ease, transform 0.18s ease;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dossier-cap.is-clickable {
    cursor: pointer;
  }
  /* Unified hover — VŠETKY tiles "naplnia svetlom" + lift translateY rovnako.
     Predtým hover len menil border, light-fill efekt mala iba "Pridať avatara".
     Teraz je správanie konzistentné cez všetky kapability. Per-status overrides
     (red pre PENDING, cyan pre FEATURED) prepisujú farbu — zachovaná je ale
     intenzita "fill with light" feel-u. */
  .dossier-cap.is-clickable:hover {
    border-color: rgba(0, 212, 170, 0.5);
    background: rgba(0, 212, 170, 0.07);
    transform: translateY(-1px);
  }
  .dossier-cap-active {
    border-color: rgba(0, 212, 170, 0.32);
  }
  .dossier-cap-pro {
    opacity: 0.55;
  }
  /* PENDING (ČAKÁ) tile — red→orange border matching the ČAKÁ pill gradient
     a hot/top badge štýlu. Zhoduje sa Video avatar + Klon hlasu (oba ČAKÁ stav).
     Hover prepíše unified teal "fill with light" na red — light-fill efekt sa
     drží správnej farby statusu. */
  .dossier-cap-pending {
    border-color: rgba(239, 68, 68, 0.45);
  }
  .dossier-cap-pending.is-clickable:hover {
    border-color: rgba(239, 68, 68, 0.75);
    background: rgba(239, 68, 68, 0.08);
  }
  /* "Klon hlasu" featured tile — ambient breathing cyan glow.
     Trojvrstvový radial gradient ROVNOMERNE rozprestretý cez celú bubble:
       • base layer: široká cyan ellipse cez centrum (90% × 110%)
       • left accent: malý cyan gradient na ľavej strane
       • right accent: malý teal gradient na pravej strane
     Bez výrazného "hot spot" — celá bubble svieti uniformne. Dýcha v 5s cykle. */
  .dossier-cap-featured {
    isolation: isolate;            /* contain ::before stacking — žiadny leak na hover */
  }
  .dossier-cap-featured::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(ellipse 90% 110% at 50% 50%, rgba(0, 212, 255, 0.16) 0%, rgba(0, 212, 255, 0.08) 45%, transparent 80%),
      radial-gradient(ellipse 50% 80% at 18% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 65%),
      radial-gradient(ellipse 50% 80% at 82% 50%, rgba(0, 212, 170, 0.07) 0%, transparent 65%);
    pointer-events: none;
    animation: cap-featured-breath 5s ease-in-out infinite;
    z-index: 0;
  }
  /* Posuň reálny obsah nad ::before — bez tohto by ikona/text vyzerali matne. */
  .dossier-cap-featured > * {
    position: relative;
    z-index: 1;
  }
  /* Featured (Klon hlasu) — keď je AKTÍVNE: cyan border (premium feel).
     Keď je ČAKÁ: red→orange border si drží prednosť (status > featured),
     aby Klon hlasu vizuálne signalizoval "treba dotiahnuť" rovnako ako Video avatar. */
  .dossier-cap-featured {
    border-color: rgba(0, 212, 255, 0.25);
  }
  .dossier-cap-featured.is-clickable:hover {
    border-color: rgba(0, 212, 255, 0.55);
    background: rgba(0, 212, 255, 0.08);
  }
  /* PENDING override — vyššia špecificita než .dossier-cap-featured samotná,
     takže Klon hlasu v ČAKÁ stave dostane red border ako Video avatar.
     Hover light-fill tiež red (rovnako ako .dossier-cap-pending hover). */
  .dossier-cap-featured.dossier-cap-pending {
    border-color: rgba(239, 68, 68, 0.45);
  }
  .dossier-cap-featured.dossier-cap-pending.is-clickable:hover {
    border-color: rgba(239, 68, 68, 0.75);
    background: rgba(239, 68, 68, 0.08);
  }
  /* Breathing cycle — pri low point ide opacity na 0 (úplne neviditeľné) aby
     Klon hlasu tile vyzeral IDENTICKY ako ostatné tiles v dim fáze. Predtým
     0.35 zanechával trvalý cyan tint, čím tile vyčnieval aj keď nemal "dýchať". */
  @keyframes cap-featured-breath {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
  }

  /* "+ Pridať avatara" CTA tile — vizuálne IDENTICKÉ s ostatnými v rest stave.
     Žiadny dashed border, žiadna cyan tint v pozadí. Iba pill (NOVÉ) signalizuje
     že je to akcia. Hover správanie zdedené z .dossier-cap.is-clickable:hover
     (unified "fill with light" + translateY lift) — rovnaké ako ostatné. */
  .dossier-cap .dossier-pill-setup {
    color: var(--accent, #00d4aa);
    background: rgba(0, 212, 170, 0.14);
  }
  .dossier-cap-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  /* Capability tile icon — line-art SVG, grey-white (currentColor inherited),
     väčšie ako pôvodné emoji (28px). Display flex aby sa SVG zarovnalo on-baseline
     s pill-om napravo. */
  .dossier-cap-icon {
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Hover ikon na clickable tile sa rozsvieti — nadväzuje na hover transform */
    transition: color 0.18s ease;
  }
  .dossier-cap.is-clickable:hover .dossier-cap-icon {
    color: rgba(255, 255, 255, 0.95);
  }
  .dossier-cap-icon svg {
    width: 100%;
    height: 100%;
  }


  .dossier-cap .dossier-pill {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 999px;          /* full pill (zhoduje sa s TOP/Hot badge) */
    background: rgba(255, 255, 255, 0.04);
    letter-spacing: 0.08em;
    font-weight: 700;
  }
  .dossier-cap .dossier-pill-active {
    background: rgba(0, 212, 170, 0.12);
  }
  /* ČAKÁ pill — red→orange gradient + white text + subtle glow.
     Zhoduje sa s "TOP / HOT" badge štýlom z hlavného menu (.main-nav-menu-hot)
     a Hero category cards (.cat-card-badge-hot). Vizuálna konzistencia naprieč
     produktom — všetky "akcia required / featured" badge majú rovnaký vibe. */
  .dossier-cap .dossier-pill-pending {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.45);
  }
  /* PRO+ pill ostáva v amber (#d97706) — odlišený od ČAKÁ aby sa nezamiešal
     "v príprave" (PRO+) a "treba dotiahnuť" (ČAKÁ) signál. */
  .dossier-cap .dossier-pill-pro {
    background: rgba(217, 119, 6, 0.12);
  }
  .dossier-cap-title {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px;
  }
  .dossier-cap-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
  }

  /* ─── BOTTOM ROW: TRAINING DATA full width (Voice Print sa presunul do Identity Dossier) ─── */
  .dossier-bottom-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    flex-shrink: 0;
  }

  /* TRAINING DATA — 3 thumbs */
  .dossier-training-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .dossier-training-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: rgba(26, 35, 50, 0.5);
    border: 1px solid rgba(0, 212, 170, 0.18);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 6px;
  }
  .dossier-training-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
  }
  .dossier-training-thumb-empty {
    background: rgba(15, 20, 28, 0.4);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.1);
  }
  .dossier-training-label {
    font-size: 9px;
    color: var(--accent, #00d4aa);
    background: rgba(0, 0, 0, 0.65);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Courier New', monospace;
    letter-spacing: 0.05em;
    z-index: 1;
    position: relative;
  }

  /* VOICE PRINT */
  .dossier-section-voice {
    border-color: rgba(217, 119, 6, 0.25);
  }
  .dossier-section-voice.is-active {
    border-color: rgba(0, 212, 170, 0.3);
  }
  .dossier-voice-wave {
    width: 100%;
    height: 34px;
    margin-bottom: 8px;
  }
  .dossier-section-voice .dossier-voice-wave g {
    fill: #d97706;
    opacity: 0.55;
  }
  .dossier-section-voice.is-active .dossier-voice-wave g {
    fill: var(--accent, #00d4aa);
    opacity: 0.7;
    animation: dossier-voice-pulse 2s ease-in-out infinite;
  }
  @keyframes dossier-voice-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
  }
  .dossier-voice-btn {
    width: 100%;
    background: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.4);
    color: #d97706;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, border-color 0.18s ease;
  }
  .dossier-voice-btn:hover {
    background: rgba(217, 119, 6, 0.18);
    border-color: rgba(217, 119, 6, 0.6);
  }
  .dossier-section-voice.is-active .dossier-voice-btn {
    background: rgba(0, 212, 170, 0.08);
    border-color: rgba(0, 212, 170, 0.4);
    color: var(--accent, #00d4aa);
  }
  .dossier-section-voice.is-active .dossier-voice-btn:hover {
    background: rgba(0, 212, 170, 0.16);
    border-color: rgba(0, 212, 170, 0.6);
  }

  /* Status badge wrap — drobné upozornenie pre generating/failed */
  .avatar-stage-dossier .avatar-stage-status-wrap {
    flex-shrink: 0;
  }

  /* Responsive — collapse na úzkom panely */
  @media (max-width: 1280px) {
    .dossier-hero-row {
      grid-template-columns: 1.2fr 1fr;
    }
    .dossier-section-capabilities {
      grid-column: 1 / -1;
    }
    .dossier-cap-stack {
      flex-direction: row;
    }
  }
  @media (max-width: 900px) {
    .dossier-hero-row {
      grid-template-columns: 1fr;
    }
    .dossier-cap-stack {
      flex-direction: column;
    }
  }

  /* ── BUBLINY (3 floating cards) ───────────────────────────────── */
  .avatar-bubble {
    position: absolute;
    width: clamp(260px, 22vw, 320px);
    background: rgba(15,15,25,0.7);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 18px 20px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 3;
  }
  .avatar-bubble:hover {
    border-color: rgba(0,212,255,0.45);
    box-shadow: 0 0 30px rgba(0,212,255,0.18), 0 8px 32px rgba(0,0,0,0.4);
    transform: translateY(-2px);
  }
  .avatar-bubble:hover .avatar-bubble-arrow {
    color: #00d4ff;
    transform: translateX(2px);
  }

  .avatar-bubble-arrow {
    position: absolute;
    top: 16px;
    right: 18px;
    color: var(--text-secondary);
    font-size: 16px;
    transition: all 0.2s ease;
  }
  .avatar-bubble-icon {
    font-size: 22px;
    margin-bottom: 8px;
    opacity: 0.9;
  }
  .avatar-bubble-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }
  .avatar-bubble-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 12px;
    opacity: 0.85;
  }
  .avatar-bubble-status {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .avatar-bubble-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
    flex-shrink: 0;
  }
  .avatar-bubble-dot.inactive {
    background: rgba(255,255,255,0.2);
    box-shadow: none;
  }

  /* Layout (nový):
     ĽAVÁ STRANA (3 funkčné bubliny):
       • Hlas       — vľavo hore                (top:8%,  left:11%)
       • Superhuman — vľavo pod Hlasom          (top:36%, left:11%)
       • Postavy    — vľavo pod Superhumanom    (top:64%, left:11%)
     PRAVÁ STRANA (3 avatar sloty stacked):
       • Slot 1 — vpravo hore
       • Slot 2 — vpravo stred
       • Slot 3 — vpravo dole */
  .avatar-bubble-hlas       { top: 8%;  left:  11%; }
  .avatar-bubble-superhuman { top: 36%; left:  11%; }
  .avatar-bubble-postavy    { top: 64%; left:  11%; }

  /* ── AVATAR SLOTS (vpravo, stacked) ─────────────────────────────────
     Rovnaká bubble karta ako bubliny vľavo (Hlas, Superhuman, Postavy).
     Glass background, jemný border, basic 80px kruh hore + label + sub. */
  .avatar-slot {
    position: absolute;
    right: 11%;
    width: clamp(260px, 22vw, 320px);
    background: rgba(15,15,25,0.7);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 3;
    transition: all 0.25s ease;
  }
  .avatar-slot-1 { top: 8%;  }
  .avatar-slot-2 { top: 36%; }
  .avatar-slot-3 { top: 64%; }

  /* Basic kruh hore — 80px, solid border, drží image cover ALEBO silhouette ikonu. */
  .avatar-slot-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(0,212,255,0.25);
    background: rgba(0,212,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
  }
  .avatar-slot-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .avatar-slot-icon {
    font-size: 26px;
    color: rgba(0,212,255,0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .avatar-slot-icon svg {
    width: 36px;
    height: 36px;
    color: rgba(0,212,255,0.7);
  }
  /* Biometrická silueta — filled SVG, classic person shape. */
  .avatar-slot-logo-svg {
    width: 62%;
    height: 62%;
    color: rgba(0,212,255,0.65);
    display: block;
  }
  .avatar-slot-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    margin-bottom: 3px;
  }
  .avatar-slot-sub {
    font-size: 12px;
    color: var(--text-secondary);
  }

  /* Active slot (s avatarom) — clickable bubble, hover glow */
  .avatar-slot-active {
    cursor: pointer;
  }
  .avatar-slot-active:hover {
    border-color: rgba(0,212,255,0.45);
    box-shadow: 0 0 30px rgba(0,212,255,0.18), 0 8px 32px rgba(0,0,0,0.4);
    transform: translateY(-2px);
  }
  .avatar-slot-active .avatar-slot-circle {
    border-color: rgba(255,255,255,0.12);
    background: transparent;
  }

  /* Selected slot — silnejší tyrkysový border + glow ring + cyan label */
  .avatar-slot-active.avatar-slot-selected {
    border-color: rgba(0,212,255,0.7);
    box-shadow:
      0 0 0 2px rgba(0,212,255,0.35),
      0 0 32px rgba(0,212,255,0.28),
      0 8px 28px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, rgba(0,212,255,0.10) 0%, rgba(15,15,25,0.7) 60%);
  }
  .avatar-slot-active.avatar-slot-selected .avatar-slot-circle {
    border-color: rgba(0,212,255,0.85);
    box-shadow: 0 0 14px rgba(0,212,255,0.4);
  }
  .avatar-slot-active.avatar-slot-selected .avatar-slot-label {
    color: #00d4ff;
  }

  /* Empty slot — placeholder (creation flow), dashed border na kruhu */
  .avatar-slot-empty .avatar-slot-circle {
    border-style: dashed;
    border-color: rgba(0,212,255,0.35);
  }

  /* "+ Pridať" CTA slot */
  .avatar-slot-add {
    cursor: pointer;
  }
  .avatar-slot-add:hover {
    border-color: rgba(0,212,170,0.55);
    background: rgba(0,212,170,0.06);
    transform: translateY(-2px);
    box-shadow: none;
  }
  .avatar-slot-add:hover .avatar-slot-circle {
    border-color: rgba(0,212,170,0.6);
    background: rgba(0,212,170,0.08);
  }
  .avatar-slot-add:hover .avatar-slot-icon {
    color: var(--accent);
  }
  .avatar-slot-add .avatar-slot-icon {
    font-size: 28px;
    font-weight: 300;
    color: rgba(0,212,255,0.55);
  }

  /* Creating slot — staticky odlíšený border */
  .avatar-slot-creating {
    border-color: rgba(0,212,255,0.5);
    box-shadow: 0 0 0 1px rgba(0,212,255,0.15);
  }
  .avatar-slot-creating .avatar-slot-circle {
    border-color: rgba(0,212,255,0.6);
    background: rgba(0,212,255,0.06);
  }
  .avatar-slot-creating .avatar-slot-icon { color: #00d4ff; }
  .avatar-slot-creating .avatar-slot-label { color: #00d4ff; }

  /* Locked slot — sivé, vyšší tier */
  .avatar-slot-locked {
    opacity: 0.55;
    filter: grayscale(0.7);
    cursor: not-allowed;
  }
  .avatar-slot-locked .avatar-slot-circle {
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
  }
  .avatar-slot-locked .avatar-slot-icon {
    color: rgba(255,255,255,0.35);
    font-size: 18px;
  }
  .avatar-slot-locked .avatar-slot-label { color: var(--text-secondary); }
  .avatar-slot-locked .avatar-slot-sub {
    color: var(--text-muted);
    font-style: italic;
  }
  .avatar-slot-locked:hover { opacity: 0.75; }

  /* Delete button — top-right roh bubble karty, hover-revealed */
  .avatar-slot-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 0;
  }
  .avatar-slot-active:hover .avatar-slot-delete { opacity: 1; }
  .avatar-slot-delete:hover {
    background: #ef4444;
    border-color: #ef4444;
    transform: scale(1.1);
  }

  /* ── STATUS BADGE + ACTION BAR ────────────────────────────────── */
  .avatar-stage-status-wrap {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
  }
  .avatar-stage-status {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
  }
  .avatar-stage-status.status-loading {
    background: rgba(0,212,255,0.12);
    border: 1px solid rgba(0,212,255,0.35);
    color: #00d4ff;
  }
  .avatar-stage-status.status-warn {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.35);
    color: #fbbf24;
    max-width: 480px;
    line-height: 1.4;
  }
  .avatar-stage-status.status-ok {
    background: rgba(0,212,170,0.12);
    border: 1px solid rgba(0,212,170,0.35);
    color: var(--accent);
  }

  .avatar-stage-actions {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
  }
  .avatar-stage-btn {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--glass-border);
    background: rgba(15,15,25,0.6);
    color: var(--text-secondary);
    backdrop-filter: blur(10px);
  }
  .avatar-stage-btn-primary {
    background: rgba(0,212,170,0.12);
    border-color: rgba(0,212,170,0.4);
    color: var(--accent);
  }
  .avatar-stage-btn-primary:hover {
    background: rgba(0,212,170,0.22);
    transform: translateY(-1px);
    box-shadow: none;
  }
  .avatar-stage-btn-ghost:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.35);
    color: #ef4444;
  }

  /* ════════════════════════════════════════════════════════════
     INLINE PROFILE CREATION — kruh + form (state: idle, no profile)
     ════════════════════════════════════════════════════════════ */
  /* Stage je len kontajner — všetky deti (bubliny, sloty, center) sú absolute
     positioned. Center sa pripne k top:8% / bottom:8% takže rozhrania
     dokonale zarovnané s bubblami vľavo (top:8% — bottom:20%) a slotmi vpravo. */
  .avatar-stage-creation {
    padding: 0;
  }

  .profile-creation-center {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px;
    padding: 0 40px;
    /* Žiaden bottom: kontent začína pripnutý na top:8% (vrch bublín) a tečie
       prirodzene zhora dole s pevným gap-om. Form skončí podľa veľkosti
       kruhu — kompozícia "header → kruh → form" vyzerá ako jeden harmonický blok. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vh, 32px);
    z-index: 5;
  }

  .profile-creation-headline {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: -0.01em;
  }

  .profile-creation-sub {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.55;
    max-width: 540px;
  }
  .profile-creation-sub code {
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.25);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #00d4ff;
    font-family: 'JetBrains Mono', monospace;
  }

  /* Centrálny kruh — drop zone */
  .profile-drop-circle {
    width: clamp(280px, 36vh, 400px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px dashed rgba(0,212,255,0.35);
    background: radial-gradient(circle at center, rgba(0,212,255,0.05) 0%, rgba(0,0,0,0.3) 70%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* Väčší padding aby text nevychádzal cez kruhovú hranicu — kruh má najužšie miesto vľavo a vpravo */
    padding: 50px 70px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .profile-drop-circle::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,212,255,0.12);
    pointer-events: none;
  }
  .profile-drop-circle:hover {
    border-color: rgba(0,212,255,0.7);
    box-shadow: 0 0 50px rgba(0,212,255,0.15);
    transform: scale(1.015);
  }
  .profile-drop-circle.drag-over {
    border-color: var(--accent);
    background: radial-gradient(circle at center, rgba(0,212,170,0.12) 0%, rgba(0,0,0,0.3) 70%);
  }

  .profile-drop-icon { opacity: 0.85; }
  .profile-drop-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
  }
  .profile-drop-title a {
    color: #00d4ff;
    cursor: pointer;
    text-decoration: underline;
  }
  .profile-drop-hint {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
  }
  .profile-drop-counter {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
    padding-top: 4px;
  }

  /* Thumbnail grid vo vnútri kruhu (po uploade) */
  .profile-drop-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    gap: 8px;
    justify-content: center;
  }
  .profile-drop-thumb {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .profile-drop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .profile-drop-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .profile-drop-remove:hover { background: #ef4444; }
  .profile-drop-add {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1.5px dashed rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .profile-drop-add:hover {
    border-color: rgba(0,212,255,0.5);
    color: #00d4ff;
  }

  /* Form pod kruhom */
  .profile-creation-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 480px;
  }
  .profile-form-row {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 10px;
  }
  .profile-form-row input,
  .profile-form-row select {
    padding: 12px 14px;
    background: rgba(15,15,25,0.6);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
    width: 100%;
  }
  /* Custom select šípka — defaultná je v Chrome príliš vpravo a vyčnieva */
  .profile-form-row select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
    cursor: pointer;
  }
  .profile-form-row input:focus,
  .profile-form-row select:focus {
    outline: none;
    border-color: rgba(0,212,255,0.5);
    background: rgba(15,15,25,0.8);
  }
  .profile-form-row input::placeholder {
    color: var(--text-muted);
  }

  .profile-submit-btn {
    padding: 14px 24px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #00d4aa 0%, #00d4ff 100%);
    color: #000;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
  }
  .profile-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: none;
  }
  .profile-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .profile-form-hint {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding-top: 4px;
  }

  /* Rotujúce tipy pod button-om — bez bubliny, vystredené, jeden riadok.
     Klikateľné (nextAvatarTip) — cursor pointer + jemný hover boost. */
  .profile-creation-tip {
    margin-top: 8px;
    padding: 0;
    background: transparent;
    border: none;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
    opacity: 1;
    user-select: none;
  }
  .profile-creation-tip:hover {
    color: var(--text-primary);
  }
  .profile-creation-tip.is-fading {
    opacity: 0;
    transform: translateY(-3px);
  }
  .profile-creation-tip:empty {
    display: none;
  }
  .profile-tip-icon {
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
  }
  .profile-tip-text strong {
    color: var(--accent);
    font-weight: 700;
  }
  .profile-tip-text code {
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.25);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    color: #00d4ff;
    font-family: 'JetBrains Mono', monospace;
  }

  /* ════════════════════════════════════════════════════════════
     MASTER PICKER (state: picker) — plexus avatar + thumbnail row
     ════════════════════════════════════════════════════════════ */
  .avatar-stage-picker {
    flex-direction: column;
    gap: 24px;
    padding: 30px 40px;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
  }
  .avatar-stage-picker .avatar-stage-portrait {
    width: min(40vh, 320px);
    flex-shrink: 0;
  }

  /* ── Loading state pre picker portrait (kým fal Nano Banana ešte generuje) ── */
  /* Pulse animácia signalizuje "deje sa niečo", overlay text vysvetľuje čo. */
  .avatar-stage-picker .avatar-stage-portrait.is-loading {
    animation: stage-pulse 2s ease-in-out infinite;
  }
  .avatar-stage-picker .avatar-stage-portrait.is-loading img,
  .avatar-stage-picker .avatar-stage-portrait.is-failed  img {
    opacity: 0.4;     /* placeholder je menej viditeľný, overlay je dominantný */
    filter: contrast(1.15) blur(2px);
  }
  .avatar-stage-portrait-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #66d9ff;
    text-shadow: 0 0 12px rgba(102, 217, 255, 0.55), 0 0 24px rgba(102, 217, 255, 0.25);
    letter-spacing: 0.3px;
    pointer-events: none;
  }
  .avatar-stage-portrait-overlay.subtle {
    color: #ffb86a;
    text-shadow: 0 0 12px rgba(255, 184, 106, 0.5);
    font-size: 13px;
    font-weight: 500;
  }
  .profile-picker-panel {
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .profile-picker-headline {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
  }
  .profile-picker-sub {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 540px;
    line-height: 1.5;
  }
  .profile-picker-warning {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    color: #fbbf24;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 540px;
    text-align: center;
  }
  .profile-picker-warning.subtle {
    background: rgba(245,158,11,0.05);
    border: none;
    padding: 6px 10px;
    font-size: 11px;
  }
  /* Single-row layout — varianty + uploady do JEDNÉHO riadka, žiadny scroll.
     flex: 1 1 0 + min-width: 0 zaisťuje že sa thumby proporcionálne stiahnu
     keď je ich viac (napr. 6 = 2 AI + 4 uploady). */
  .profile-picker-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
    max-width: 1100px;
    justify-content: center;
  }
  .profile-picker-grid > .profile-picker-thumb {
    flex: 1 1 0;
    min-width: 0;
    max-width: 170px;
  }
  .profile-picker-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(15,15,25,0.5);
  }
  .profile-picker-thumb:hover {
    border-color: rgba(0,212,255,0.7);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,212,255,0.2);
  }
  .profile-picker-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .profile-picker-thumb-failed {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(245,158,11,0.6);
    font-size: 22px;
    cursor: not-allowed;
  }
  .profile-picker-thumb-failed:hover {
    transform: none;
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
  }
  .profile-picker-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fff;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 2;
  }
  .profile-picker-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .profile-picker-overlay span {
    background: var(--accent);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  .profile-picker-thumb:hover .profile-picker-overlay { opacity: 1; }
  .profile-picker-cancel {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
    font-family: inherit;
  }
  .profile-picker-cancel:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.35);
    color: #ef4444;
  }

  /* Master picker — code chip v sub texte */
  .profile-picker-sub code {
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.25);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #00d4ff;
    font-family: 'JetBrains Mono', monospace;
  }
  .profile-picker-sub strong {
    color: var(--text-primary);
    font-weight: 600;
  }

  /* Tip box — vysvetlenie čo robiť */
  .profile-picker-tip {
    background: rgba(0,212,170,0.06);
    border: 1px solid rgba(0,212,170,0.18);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 640px;
    text-align: left;
  }
  .profile-picker-tip strong {
    color: var(--accent);
  }

  /* Zoom button — vpravo hore na thumbe */
  .profile-picker-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
  }
  .profile-picker-zoom:hover {
    background: #00d4ff;
    color: #000;
    transform: scale(1.1);
  }

  /* ── LIGHTBOX preview overlay ───────────────────────────────────── */
  .profile-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 40px;
  }
  .profile-preview-overlay.is-visible { opacity: 1; }
  .profile-preview-content {
    position: relative;
    max-width: min(90vw, 800px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .profile-preview-content img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  }
  .profile-preview-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(15,15,25,0.95);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
    transition: all 0.2s;
  }
  .profile-preview-close:hover {
    background: #ef4444;
    transform: scale(1.05);
  }
  .profile-preview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .profile-preview-select,
  .profile-preview-back {
    padding: 12px 22px;
    border-radius: 999px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
  }
  .profile-preview-select {
    background: linear-gradient(135deg, #00d4aa 0%, #00d4ff 100%);
    color: #000;
  }
  .profile-preview-select:hover {
    transform: translateY(-1px);
    box-shadow: none;
  }
  .profile-preview-back {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
  }
  .profile-preview-back:hover {
    background: rgba(255,255,255,0.14);
  }

  /* Responsive — bubble + slot + face shrinking, vždy zachované zarovnanie. */
  @media (max-width: 1500px) {
    .avatar-bubble            { width: 220px; padding: 14px 16px 12px; }
    .avatar-stage-portrait    { width: min(78vh, 620px); }
    .avatar-bubble-hlas       { top: 6%;  left:  3%; }
    .avatar-bubble-superhuman { top: 36%; left:  3%; }
    .avatar-bubble-postavy    { top: 66%; left:  3%; }
    .avatar-slot              { right: 3%; width: 220px; padding: 14px 16px 12px; }
    .avatar-slot-1            { top: 6%;  }
    .avatar-slot-2            { top: 36%; }
    .avatar-slot-3            { top: 66%; }
    .avatar-slot-circle       { width: 64px; height: 64px; margin-bottom: 8px; }
    .avatar-slot-icon         { font-size: 22px; }
    .avatar-slot-label        { font-size: 14px; }
    .avatar-slot-sub          { font-size: 11px; }
  }
  @media (max-width: 1100px) {
    .avatar-bubble            { width: 195px; padding: 11px 13px 9px; }
    .avatar-bubble-hlas       { top: 3%;  left:  12px; }
    .avatar-bubble-superhuman { top: 35%; left:  12px; }
    .avatar-bubble-postavy    { top: 67%; left:  12px; }
    .avatar-slot              { right: 12px; width: 195px; padding: 11px 13px 9px; }
    .avatar-slot-1            { top: 3%;  }
    .avatar-slot-2            { top: 36%; }
    .avatar-slot-3            { top: 69%; }
    .avatar-slot-circle       { width: 56px; height: 56px; margin-bottom: 6px; }
    .avatar-slot-icon         { font-size: 18px; }
    .avatar-slot-label        { font-size: 13px; }
    .avatar-slot-sub          { font-size: 11px; }
    .avatar-stage-portrait    { width: min(64vh, 440px); }
    .profile-drop-circle      { width: clamp(240px, 30vh, 320px); }
    .profile-form-row         { grid-template-columns: 1fr; }
  }

  /* ── SELECT SCRIPT BUTTON — s pulse animáciou ───────────── */
  .btn-select-script {
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(0,212,170,0.18) 0%, rgba(0,212,170,0.1) 100%);
    border: 1px solid rgba(0,212,170,0.4);
    border-radius: 999px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    margin-right: 10px;
    box-shadow: none;
    animation: selectBtnPulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
  }

  .btn-select-script:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: none;
    transform: translateY(-1px);
    animation: none;
  }

  @keyframes selectBtnPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0,212,170,0.15); }
    50%      { box-shadow: 0 0 24px rgba(0,212,170,0.35); }
  }

  /* Skryť vo focus view (sme tam) */
  .script-card-focus .btn-select-script { display: none; }

  /* ── FOCUS MODE CONTAINER ────────────────────────────────── */
  .scripts-focus-container {
    padding: 24px 20px;
    max-width: 100%;
  }

  .btn-focus-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 20px;
    font-family: inherit;
  }

  .btn-focus-back:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
    border-color: var(--accent);
    transform: translateX(-3px);
  }

  /* ── FOCUSED SCRIPT CARD — "WOW MOMENT" ─────────────────── */
  .script-card-focus {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px 40px !important;
    background: linear-gradient(135deg,
      rgba(0,212,170,0.06) 0%,
      var(--glass-bg) 40%,
      rgba(168,85,247,0.04) 100%) !important;
    border: 2px solid rgba(0,212,170,0.35) !important;
    border-radius: 20px !important;
    box-shadow:
      0 30px 80px rgba(0,0,0,0.4),
      0 0 0 1px rgba(0,212,170,0.2);
    animation: focusFadeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
  }

  .script-card-focus .script-card-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0,212,170,0.15);
  }

  .script-card-focus .script-card-title {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .script-card-focus .script-num {
    width: 28px;
    height: 28px;
    font-size: 13px;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: none;
  }

  .script-card-focus .script-actions {
    gap: 8px;
  }

  .script-card-focus .script-action-btn {
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 10px;
  }

  .script-card-focus .script-action-copy {
    font-size: 12px;
    padding: 8px 14px;
  }

  @keyframes focusFadeIn {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
  }

  /* Text skriptu — väčší, čitateľný, dominant */
  .focus-script-text {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 8px 0;
    letter-spacing: 0.005em;
  }

  /* ── BLIKAJÚCA IKONKA — PULSE ANIMATION ─────────────────── */
  .pulse-blink-target {
    animation: pulseBlink 0.65s ease-in-out infinite !important;
    position: relative;
    z-index: 10;
  }

  @keyframes pulseBlink {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0,212,170,0.7), 0 0 16px rgba(0,212,170,0.3);
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 0 0 10px rgba(0,212,170,0), 0 0 28px rgba(0,212,170,0.6);
      background: #00e8bc;
      color: #fff;
    }
  }

/* ── HLAVNÉ MENU V HEADRI ────────────────────── */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;   /* na širokých monitoroch ostane menu centrované */
  gap: 4px;
  margin-left: 20px;
  flex: 1;
}

.main-nav-btn {
  position: relative;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
  text-transform: uppercase;
}

.main-nav-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.08);
}

.main-nav-btn.active {
  background: rgba(0, 212, 170, 0.12);
  color: var(--accent, #00d4aa);
  border-color: rgba(0, 212, 170, 0.35);
  box-shadow: none;
}

/* ── MAIN NAV DROPDOWN ─────────────────────── */
.main-nav-dropdown {
  position: relative;
  display: inline-block;
}

.main-nav-chevron {
  font-size: 9px;
  margin-left: 5px;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}

.main-nav-dropdown:hover .main-nav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.main-nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: rgba(15, 15, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 8px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.02);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s ease;
  pointer-events: none;
}

.main-nav-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.main-nav-dropdown:hover .main-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.main-nav-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.main-nav-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.main-nav-menu-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none;
}

.main-nav-menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.main-nav-menu-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.main-nav-menu-hot {
  padding: 1px 6px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.15em;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(239,68,68,0.5);
}

.main-nav-menu-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.03em;
  font-weight: 500;
}

/* SIGNATURE button — SUPERHUMAN */
.main-nav-btn-signature {
  padding-right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.main-nav-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: none;
}

/* "NOVÉ" mikro-badge pre nové sekcie v main-nav (HUDBA atď.) */
.main-nav-new {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(0, 212, 170, 0.18);
  border: 1px solid rgba(0, 212, 170, 0.5);
  color: #00d4aa;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 999px;
  text-transform: uppercase;
  animation: navNewPulse 2.4s ease-in-out infinite;
}
@keyframes navNewPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 212, 170, 0); }
  50%      { box-shadow: 0 0 8px rgba(0, 212, 170, 0.5); }
}

/* Responzívne — keď by menu bolo natlačené, zmenší sa padding */
@media (max-width: 1366px) {
  .main-nav-btn {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .main-nav-badge {
    font-size: 8px;
    padding: 2px 6px;
  }
}

@media (max-width: 1200px) {
  .main-nav { margin-left: 12px; gap: 2px; }
  .main-nav-btn { padding: 7px 10px; font-size: 10px; }
  .header-tagline { display: none; }
}

/* ── HEADER ACTIONS (bell + user) ───────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Bell */
.header-bell {
  position: relative;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.header-bell:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

.header-bell-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid #0a0a0f;
}

/* User badge */
.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: default;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.header-user:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.header-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4aa 0%, #0284c7 50%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: none;
}

.header-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.header-user-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.header-user-handle {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════════════════════
   USER MENU DROPDOWN — hover popup pod header-user pill-om
   ═══════════════════════════════════════════════════════════ */
.user-menu-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.02);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 10000;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  pointer-events: none;
}
.user-menu-dropdown[hidden] { display: none; }
.user-menu-dropdown-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Hover bridge — neviditeľná zóna medzi pill-om a popup-om aby sa nezatvoril */
.user-menu-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* ── HEADER sekcia popup-u — avatar + meno + plán ── */
.user-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.user-menu-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4aa 0%, #0284c7 50%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: none;
  overflow: hidden;
}
.user-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.user-menu-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.user-menu-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-handle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── KREDIT BAR ── */
.user-menu-credits {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.user-menu-credits-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.user-menu-credits-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.user-menu-credits-label svg { color: rgba(255, 255, 255, 0.85); }
.user-menu-credits-value {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}
.user-menu-credits-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.user-menu-credits-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease, background 0.3s ease;
}
.user-menu-credits-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

/* ── RANKING ROW — pozícia medzi creators ── */
.user-menu-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 10px 12px 2px;
  padding: 8px 12px;
  background: rgba(255, 200, 87, 0.08);
  border: 1px solid rgba(255, 200, 87, 0.22);
  border-radius: 9px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.user-menu-rank:hover {
  background: rgba(255, 200, 87, 0.14);
  border-color: rgba(255, 200, 87, 0.45);
}
.user-menu-rank svg { color: #ffc857; flex-shrink: 0; }
.user-menu-rank-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.user-menu-rank-text strong {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.user-menu-rank-sub {
  font-size: 10px;
  color: rgba(255, 200, 87, 0.85);
  letter-spacing: 0.02em;
}

/* ── UPGRADE CTA — náš teal accent ── */
.user-menu-upgrade {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 12px 12px 6px;
  padding: 11px 12px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 10px;
  cursor: pointer;
  color: #0a141a;
  text-align: left;
  transition: all 0.18s ease;
  box-shadow: none;
}
.user-menu-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: none;
  background: linear-gradient(135deg, rgba(0, 230, 185, 1) 0%, rgba(0, 200, 165, 1) 100%);
}
/* Paid-plan variant — neutrálnejší (nie nag) ale stále actionable */
.user-menu-upgrade-paid {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0.08) 100%);
  border-color: rgba(168, 85, 247, 0.4);
  color: #fff;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.15);
}
.user-menu-upgrade-paid:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(168, 85, 247, 0.14) 100%);
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 6px 22px rgba(168, 85, 247, 0.25);
}
.user-menu-upgrade-paid .user-menu-upgrade-icon,
.user-menu-upgrade-paid .user-menu-upgrade-arrow {
  color: #d8b4fe;
}
.user-menu-upgrade-paid .user-menu-upgrade-title { color: #fff; }
.user-menu-upgrade-paid .user-menu-upgrade-sub { color: rgba(216, 180, 254, 0.85); }
.user-menu-upgrade-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0a141a;
}
.user-menu-upgrade-texts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.user-menu-upgrade-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0a141a;
}
.user-menu-upgrade-sub {
  font-size: 10px;
  font-weight: 600;
  color: rgba(10, 20, 26, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-upgrade-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0a141a;
}

/* ── NAV položky ── */
.user-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 8px 8px;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.user-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.user-menu-item-icon {
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.7);
}
.user-menu-item:hover .user-menu-item-icon { color: #fff; }

.user-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 12px;
}

.user-menu-signout {
  margin: 8px;
  width: calc(100% - 16px);
  color: rgba(255, 120, 130, 0.9);
}
.user-menu-signout .user-menu-item-icon { color: rgba(255, 120, 130, 0.85); }

/* ═══════════════════════════════════════════════════════════
   USER PROFILE VIEW — kokpit so štatistikami + tabs
   ═══════════════════════════════════════════════════════════ */
.profile-view {
  flex: 1;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0,212,170,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(168,85,247,0.05) 0%, transparent 55%);
}
.profile-view::-webkit-scrollbar { width: 8px; }
.profile-view::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.profile-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 32px 80px;
}

/* ── HERO ──────────────────────────────────────────── */
.profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.profile-hero-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 auto;
  min-width: 0;
}
.profile-hero-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4aa 0%, #0284c7 50%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 34px;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: none;
}
.profile-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   AVATAR CROPPER — Instagram-style modal
   ═══════════════════════════════════════════════════════════ */
.avc-overlay {
  position: fixed;
  inset: 0;
  z-index: 26000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.avc-overlay.is-visible { opacity: 1; }
.avc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.avc-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 24px 24px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  transform: scale(0.96);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.avc-overlay.is-visible .avc-box { transform: scale(1); }

.avc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.avc-close:hover {
  background: rgba(255,80,100,0.15);
  border-color: rgba(255,80,100,0.4);
  color: #ff7c8a;
}

.avc-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 4px 0 0;
  text-align: center;
}
.avc-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  text-align: center;
  line-height: 1.4;
  max-width: 320px;
}

/* Stage — preview area with circular mask overlay */
.avc-stage {
  position: relative;
  background: #0a0a10;
  border-radius: 14px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.avc-stage:active { cursor: grabbing; }
.avc-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Mask — JEDEN kruh: teal border + tmavá vonkajšia zóna cez box-shadow */
.avc-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(0, 212, 170, 0.7);
  box-sizing: border-box;
  pointer-events: none;
  /* obrovský box-shadow stmavuje plochu MIMO kruhu (stage má overflow:hidden → orežu sa hrany) */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
/* Rect mask — 16:9 rámček vo VNÚTRI stage, s tmavým overlay vonku.
   Pozícia (top/left/width/height) sa setuje inline z JS na presné centrovanie. */
.avc-mask.avc-mask-rect {
  position: absolute;
  /* top/left/width/height z inline style */
  transform: none;        /* override .avc-mask transform */
  border-radius: 8px;
  border: 2px solid rgba(0, 212, 170, 0.85);
  /* obrovský box-shadow stmavuje plochu MIMO rámčeka */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
/* "Thumbnail" label v ľavom hornom rohu crop rámčeka — aby user vedel
   že TOTO je výrez ktorý sa stane thumbnailom. */
.avc-mask-label {
  position: absolute;
  top: 8px;
  left: 10px;
  background: rgba(0, 212, 170, 0.95);
  color: #052821;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  pointer-events: none;
}
/* Wide box pre rect mask — väčší modal aby sa zmestil 16:9 stage */
.avc-box.avc-box-wide {
  max-width: 600px;
}

/* Zoom slider */
.avc-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 4px 0;
}
.avc-zoom-ico {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  user-select: none;
}
.avc-zoom-ico-lg { font-size: 18px; }
.avc-zoom-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.avc-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00d4aa;
  border: 2px solid #0a141a;
  cursor: pointer;
  transition: transform 0.15s ease;
  box-shadow: 0 0 0 0 rgba(0,212,170,0.4);
}
.avc-zoom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(0,212,170,0.25);
}
.avc-zoom-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00d4aa;
  border: 2px solid #0a141a;
  cursor: pointer;
}

/* Actions */
.avc-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.avc-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}
.avc-btn-cancel {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
}
.avc-btn-cancel:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
/* Voliteľná tretia akcia v cropperi (napr. „Prerobiť cover") */
.avc-btn-extra {
  background: rgba(0,212,170,0.10);
  border-color: rgba(0,212,170,0.35);
  color: #00d4aa;
}
.avc-btn-extra:hover {
  background: rgba(0,212,170,0.18);
  color: #6ff0d5;
}
.avc-btn-apply {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border-color: rgba(0, 212, 170, 0.55);
  color: #0a141a;
  box-shadow: none;
}
.avc-btn-apply:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

@media (max-width: 420px) {
  .avc-box { max-width: calc(100vw - 32px); padding: 20px 18px; }
}
.profile-hero-meta { min-width: 0; }
.profile-hero-name {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.profile-hero-handle {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}
.profile-hero-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.profile-hero-plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid rgba(0, 212, 170, 0.35);
  border-radius: 999px;
  color: #00d4aa;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.profile-hero-plan svg { color: #00d4aa; }
.profile-hero-joined {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.03em;
}

.profile-hero-right { flex-shrink: 0; }
.profile-hero-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 10px;
  color: #0a141a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: none;
}
.profile-hero-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: none;
  background: linear-gradient(135deg, rgba(0, 230, 185, 1) 0%, rgba(0, 200, 165, 1) 100%);
}
.profile-hero-upgrade svg { color: #0a141a; }

/* ── STATS ROW ─────────────────────────────────────── */
.profile-stats-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .profile-stats-row { grid-template-columns: 1fr; }
}

/* Rank — samostatný riadok pod stats-row */
.profile-rank-row {
  margin-bottom: 32px;
}

/* Rank card — žltý accent */
.profile-stat-rank {
  background: linear-gradient(135deg, rgba(255,200,87,0.08) 0%, rgba(255,200,87,0.02) 100%);
  border-color: rgba(255,200,87,0.22);
}
.profile-stat-rank .profile-stat-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,200,87,0.85);
}
.profile-stat-rank .profile-stat-card-label svg {
  color: #ffc857;
}
.profile-stat-rank .profile-stat-card-value {
  color: #ffc857;
}
.profile-stat-rank-fill {
  background: linear-gradient(90deg, #ffc857, #ffb84a) !important;
}
.profile-stat-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 20px;
}
.profile-stat-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.profile-stat-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.profile-stat-card-value {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.profile-stat-card-of {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
}
.profile-stat-card-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.profile-stat-card-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.profile-stat-card-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

.profile-stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 4px 0 10px;
}
@media (max-width: 700px) {
  .profile-stat-tiles { grid-template-columns: repeat(2, 1fr); }
}
.profile-stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  text-align: center;
}
.profile-stat-tile svg { color: rgba(255,255,255,0.6); margin-bottom: 2px; }
.profile-stat-tile strong {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.profile-stat-tile span {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.03em;
}

/* ── TABS ──────────────────────────────────────────── */
.profile-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,0.5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  margin-bottom: -1px;
}
.profile-tab:hover {
  color: rgba(255,255,255,0.85);
}
.profile-tab.active {
  color: #00d4aa;
  border-bottom-color: #00d4aa;
}
.profile-tab-icon { display: inline-flex; align-items: center; }
.profile-tab.active .profile-tab-icon { color: #00d4aa; }

/* ── PLACEHOLDER (pre tabs Sprint 3+) ──────────────── */
.profile-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 16px;
}
.profile-placeholder-icon {
  font-size: 48px;
  opacity: 0.5;
  margin-bottom: 16px;
}
.profile-placeholder h2 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}
.profile-placeholder p {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  max-width: 500px;
  line-height: 1.5;
  margin: 0;
}

/* ── EMPTY STATE ───────────────────────────────────── */
.profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  color: rgba(255,255,255,0.55);
}
.profile-empty-icon {
  font-size: 56px;
  opacity: 0.4;
  margin-bottom: 16px;
}
.profile-empty h2 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}
.profile-empty p {
  font-size: 13px;
  max-width: 480px;
  line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE — MOJE SÚBORY TAB (Sprint 3)
   ═══════════════════════════════════════════════════════════ */
.profile-files-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.profile-files-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(255,255,255,0.75);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-files-chip:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}
.profile-files-chip.active {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.55);
  color: #00d4aa;
}
.profile-files-chip svg { color: currentColor; }
.profile-files-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.profile-files-chip.active .profile-files-chip-count {
  background: rgba(0, 212, 170, 0.22);
  color: #00d4aa;
}

/* ── GRID ──────────────────────────────────────────── */
.profile-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 700px) {
  .profile-files-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.profile-asset-tile {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}
.profile-asset-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 212, 170, 0.4);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(0, 212, 170, 0.15);
}
.profile-asset-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #0a0a10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile-asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-asset-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255,255,255,0.25);
}
.profile-asset-placeholder svg { width: 36px; height: 36px; }
.profile-asset-music { background: linear-gradient(135deg, #1a1530 0%, #2a1845 100%); color: rgba(168,85,247,0.6); }
.profile-asset-voice { background: linear-gradient(135deg, #102030 0%, #182030 100%); color: rgba(0,212,170,0.7); }
.profile-asset-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  background: rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  padding-left: 3px;
  pointer-events: none;
}

.profile-asset-info {
  padding: 10px 12px 12px;
}
.profile-asset-prompt {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
  word-break: break-word;
}
.profile-asset-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}
.profile-asset-engine { font-weight: 600; color: rgba(255,255,255,0.6); }
.profile-asset-dot { opacity: 0.5; }
.profile-asset-type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE — ASSET LIGHTBOX
   ═══════════════════════════════════════════════════════════ */
.profile-lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.profile-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: profileLbFadeIn 0.2s ease;
}
@keyframes profileLbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.profile-lb-box {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1080px;
  max-height: calc(100vh - 48px);
  width: 100%;
  background: rgba(15, 17, 22, 0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  animation: profileLbBoxIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes profileLbBoxIn {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.profile-lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.15s ease;
}
.profile-lb-close:hover {
  background: rgba(255,80,100,0.15);
  border-color: rgba(255,80,100,0.4);
  color: #ff7c8a;
}

.profile-lb-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: #050608;
  min-height: 300px;
  flex: 0 1 auto;
}
.profile-lb-media-img,
.profile-lb-media-video {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  display: block;
}
.profile-lb-media-cover {
  width: 240px;
  height: 240px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 16px;
}
.profile-lb-cover-placeholder {
  width: 240px;
  height: 240px;
  background: linear-gradient(135deg, #1a1530 0%, #2a1845 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(168,85,247,0.6);
  margin-bottom: 16px;
}
.profile-lb-cover-placeholder svg { width: 80px; height: 80px; }
.profile-lb-cover-voice {
  background: linear-gradient(135deg, #102030 0%, #1a3040 100%);
  color: rgba(0,212,170,0.7);
}
.profile-lb-media-audio {
  width: 100%;
  max-width: 480px;
  margin-top: 8px;
}
.profile-lb-noasset {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  padding: 40px;
  text-align: center;
}
.profile-lb-noasset-soft {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  padding: 16px;
}

.profile-lb-info {
  padding: 18px 24px 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
}
.profile-lb-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.profile-lb-badge {
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
}
.profile-lb-badge-type {
  background: rgba(0,212,170,0.12);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}
.profile-lb-badge-time {
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}

.profile-lb-prompt-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.profile-lb-prompt {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.profile-lb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-lb-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.profile-lb-action:hover {
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE — SECTION HELPERS
   ═══════════════════════════════════════════════════════════ */
.profile-sub-section { margin-bottom: 36px; }
.profile-section-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 14px 0;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE — PREDPLATNÉ TAB (Sprint 4)
   ═══════════════════════════════════════════════════════════ */
.profile-current-plan {
  background: linear-gradient(135deg, rgba(0,212,170,0.08) 0%, rgba(0,212,170,0.02) 100%);
  border: 1px solid rgba(0,212,170,0.25);
  border-radius: 14px;
  padding: 20px 22px;
}
.profile-current-plan-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.profile-current-plan-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.profile-current-plan-price {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
}
.profile-current-plan-renew { text-align: right; }
.profile-current-plan-renew-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 2px;
}
.profile-current-plan-renew-date {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.profile-current-plan-credits-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.profile-current-plan-credits-row strong {
  color: #00d4aa;
  font-size: 14px;
  font-weight: 800;
}
.profile-current-plan-credits-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.profile-current-plan-credits-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4aa, #00b491);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* ── PLANS GRID ────────────────────────────────────── */
.profile-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.profile-plan-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.profile-plan-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.profile-plan-card.is-popular {
  border-color: rgba(0,212,170,0.5);
  background: linear-gradient(180deg, rgba(0,212,170,0.07) 0%, rgba(255,255,255,0.03) 60%);
  box-shadow: none;
}
.profile-plan-card.is-current {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}
.profile-plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  background: #00d4aa;
  color: #0a141a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: none;
}
.profile-plan-head { margin-bottom: 12px; }
.profile-plan-name {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}
.profile-plan-tagline {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.profile-plan-price { margin-bottom: 6px; }
.profile-plan-price-num {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.profile-plan-price-period {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-left: 3px;
}
.profile-plan-price-free {
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
}
.profile-plan-credits {
  font-size: 12px;
  color: #00d4aa;
  font-weight: 600;
  margin-bottom: 14px;
}
.profile-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  flex: 1;
}
.profile-plan-features li {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
  margin-bottom: 7px;
}
.profile-plan-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #00d4aa;
  font-weight: 800;
}
.profile-plan-cta {
  width: 100%;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 9px;
  color: #0a141a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s ease;
}
.profile-plan-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: none;
}
.profile-plan-cta.is-current-cta {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  cursor: not-allowed;
}

/* ── PROMO ─────────────────────────────────────────── */
.profile-promo-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 20px;
}
.profile-promo-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.profile-promo-input {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  padding: 10px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-promo-input:focus {
  outline: none;
  border-color: rgba(0,212,170,0.5);
  background: rgba(0,0,0,0.4);
}
.profile-promo-btn {
  padding: 10px 18px;
  background: rgba(0,212,170,0.9);
  border: 1px solid rgba(0,212,170,0.6);
  border-radius: 9px;
  color: #0a141a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-promo-btn:hover {
  background: #00d4aa;
  transform: translateY(-1px);
}
.profile-promo-active-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.profile-promo-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
}

/* ── PAYMENT & INVOICES ────────────────────────────── */
.profile-payment-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px;
}
.profile-payment-method {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.profile-payment-method-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  flex-basis: 100%;
  margin-bottom: 4px;
}
.profile-payment-method-info {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  flex: 1;
}
.profile-payment-method-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  flex: 1;
}
.profile-payment-btn {
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-payment-btn:hover {
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}

.profile-invoices-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 8px;
}
.profile-invoices-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
}
.profile-invoices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.profile-invoices-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.profile-invoices-table td {
  padding: 10px;
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profile-invoice-status {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(0,212,170,0.15);
  color: #00d4aa;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-invoice-download {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
}
.profile-invoice-download:hover { color: #00d4aa; }

/* ═══════════════════════════════════════════════════════════
   PROFILE — POUŽITIE TAB (Sprint 5)
   ═══════════════════════════════════════════════════════════ */
.profile-usage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
}
.profile-usage-totals { text-align: right; }
.profile-usage-totals strong {
  font-size: 22px;
  font-weight: 800;
  color: #00d4aa;
  font-variant-numeric: tabular-nums;
}
.profile-usage-totals-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

.profile-usage-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 160px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.profile-usage-bar-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-width: 6px;
}
.profile-usage-bar {
  width: 100%;
  background: linear-gradient(180deg, rgba(0,212,170,0.7) 0%, rgba(0,212,170,0.25) 100%);
  border-radius: 3px 3px 0 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}
.profile-usage-bar:hover {
  background: linear-gradient(180deg, rgba(0,212,170,1) 0%, rgba(0,212,170,0.45) 100%);
}
.profile-usage-bar.is-today {
  background: linear-gradient(180deg, #00e6b8 0%, #00d4aa 100%);
  box-shadow: none;
}
.profile-usage-chart-axis {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px 0;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}

/* ── BREAKDOWN ─────────────────────────────────────── */
.profile-breakdown {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.profile-breakdown-row {
  display: grid;
  grid-template-columns: 28px 1fr 2fr 50px 90px;
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}
.profile-breakdown-row:last-child { border-bottom: none; }
.profile-breakdown-icon {
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
}
.profile-breakdown-label {
  color: #fff;
  font-weight: 600;
}
.profile-breakdown-bar {
  height: 7px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  overflow: hidden;
}
.profile-breakdown-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4aa, #0284c7);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.profile-breakdown-count {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-variant-numeric: tabular-nums;
}
.profile-breakdown-credits {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 700px) {
  .profile-breakdown-row { grid-template-columns: 24px 1fr 60px 70px; }
  .profile-breakdown-bar { display: none; }
}

/* ── RECENT TABLE ──────────────────────────────────── */
.profile-recent-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.profile-recent-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.profile-recent-row { cursor: pointer; transition: background 0.15s ease; }
.profile-recent-row:hover { background: rgba(0,212,170,0.05); }
.profile-recent-row td {
  padding: 11px 14px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profile-recent-row:last-child td { border-bottom: none; }
.profile-recent-time {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  white-space: nowrap;
}
.profile-recent-engine {
  font-weight: 600;
  white-space: nowrap;
}
.profile-recent-prompt {
  color: rgba(255,255,255,0.7);
  max-width: 0;
  word-break: break-word;
}
.profile-recent-type {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-recent-type-image { background: rgba(0,212,170,0.15); color: #00d4aa; }
.profile-recent-type-video { background: rgba(168,85,247,0.15); color: #a855f7; }
.profile-recent-type-music { background: rgba(251,191,36,0.15); color: #fbbf24; }
.profile-recent-type-voice { background: rgba(0,180,255,0.15); color: #38bdf8; }

/* ═══════════════════════════════════════════════════════════
   PROFILE — ÚČET TAB (Sprint 6)
   ═══════════════════════════════════════════════════════════ */
.profile-form-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 6px 4px;
}

/* Avatar upload row */
.profile-form-avatar-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
}
.profile-form-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4aa 0%, #0284c7 50%, #a855f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: none;
}
.profile-form-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-form-avatar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-form-avatar-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-form-avatar-btn:hover {
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}
.profile-form-avatar-btn-danger {
  color: rgba(255,120,130,0.85);
}
.profile-form-avatar-btn-danger:hover {
  background: rgba(255,80,100,0.1);
  border-color: rgba(255,80,100,0.4);
  color: #ff7c8a;
}
.profile-form-avatar-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  flex-basis: 100%;
  line-height: 1.5;
}

/* Form rows */
.profile-form-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profile-form-card > .profile-form-row:last-child { border-bottom: none; }
.profile-form-row-label {
  flex-basis: 140px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
}
.profile-form-row-value {
  flex: 1;
  font-size: 13px;
  color: #fff;
}
.profile-form-row-value-muted { color: rgba(255,255,255,0.5); }
.profile-form-row-action {
  padding: 7px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.profile-form-row-action:hover {
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}
/* Soft danger — destruktívny action ale bez drama (jemný red na hover) */
.profile-form-row-action-soft-danger {
  color: rgba(255, 130, 140, 0.85);
}
.profile-form-row-action-soft-danger:hover {
  background: rgba(255, 80, 100, 0.08);
  border-color: rgba(255, 80, 100, 0.35);
  color: #ff8a96;
}

/* Inline editable fields */
.profile-form-row-inline { align-items: flex-start; }
.profile-inline-input {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 10px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.15s ease;
}
.profile-inline-input:hover {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.profile-inline-input:focus {
  outline: none;
  background: rgba(0,212,170,0.05);
  border-color: rgba(0,212,170,0.4);
}
.profile-inline-input[readonly] {
  color: rgba(255,255,255,0.5);
  cursor: not-allowed;
}
.profile-inline-input[readonly]:hover { background: transparent; border-color: transparent; }
textarea.profile-inline-input { resize: vertical; min-height: 60px; line-height: 1.45; }
.profile-form-row-inline.is-readonly { opacity: 0.85; }
select.profile-inline-input {
  appearance: none;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Notification toggles */
.profile-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profile-form-card > .profile-toggle-row:last-child { border-bottom: none; }
.profile-toggle-text { flex: 1; min-width: 0; }
.profile-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.profile-toggle-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.profile-toggle {
  width: 38px;
  height: 22px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}
.profile-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.profile-toggle.is-on {
  background: #00d4aa;
  border-color: rgba(0,212,170,0.6);
}
.profile-toggle.is-on .profile-toggle-knob { transform: translateX(16px); }

/* Advanced collapsibles */
.profile-advanced-block {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.2s ease;
}
.profile-advanced-block[open] {
  border-color: rgba(0,212,170,0.2);
  background: rgba(0,212,170,0.03);
}
.profile-advanced-block summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  list-style: none;
  user-select: none;
}
.profile-advanced-block summary::-webkit-details-marker { display: none; }
.profile-advanced-block summary::before {
  content: '▸';
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-right: 8px;
  transition: transform 0.2s ease;
}
.profile-advanced-block[open] summary::before { transform: rotate(90deg); }
.profile-advanced-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  margin-left: auto;
}
.profile-advanced-body {
  padding: 0 18px 16px 36px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}
.profile-advanced-note {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin: 8px 0;
}
.profile-api-key-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.profile-api-key {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  padding: 8px 12px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  min-width: 220px;
}
.profile-social-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.profile-social-row:last-child { border-bottom: none; }
.profile-social-icon { font-size: 18px; width: 24px; text-align: center; }
.profile-social-label { flex: 1; font-size: 13px; }

/* Danger zone */
.profile-danger-title { color: rgba(255,120,130,0.85) !important; }
.profile-danger-card {
  background: rgba(255,80,100,0.04);
  border: 1px solid rgba(255,80,100,0.18);
  border-radius: 12px;
  padding: 6px 4px;
}
.profile-danger-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,120,130,0.1);
}
.profile-danger-card > .profile-danger-row:last-child { border-bottom: none; }
.profile-danger-row > div:first-child { flex: 1; }
.profile-danger-row-label {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.profile-danger-row-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}
.profile-danger-btn {
  padding: 8px 14px;
  background: rgba(255,80,100,0.1);
  border: 1px solid rgba(255,80,100,0.3);
  border-radius: 8px;
  color: rgba(255,120,130,0.95);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.profile-danger-btn:hover {
  background: rgba(255,80,100,0.18);
  border-color: rgba(255,80,100,0.5);
  color: #ff7c8a;
}
.profile-danger-btn-critical {
  background: rgba(255,80,100,0.18);
  border-color: rgba(255,80,100,0.5);
  color: #ff7c8a;
}
.profile-danger-btn-critical:hover {
  background: rgba(255,80,100,0.3);
  border-color: rgba(255,80,100,0.7);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   PROFILE — SPOLUPRÁCA TAB
   ═══════════════════════════════════════════════════════════ */
.profile-partner-hero {
  background: linear-gradient(135deg, rgba(168,85,247,0.1) 0%, rgba(0,212,170,0.06) 100%);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 14px;
  padding: 22px 24px;
}
.profile-partner-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
  letter-spacing: -0.005em;
}
.profile-partner-hero-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0;
}
.profile-partner-hero-desc strong {
  color: #00d4aa;
  font-weight: 700;
}

/* Affiliate link card */
.profile-affiliate-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 20px;
}
.profile-affiliate-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.profile-affiliate-input {
  flex: 1 1 280px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  padding: 11px 14px;
  color: #fff;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12px;
  cursor: pointer;
}
.profile-affiliate-input:focus { outline: none; border-color: rgba(0,212,170,0.5); }
.profile-affiliate-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 9px;
  color: #0a141a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-affiliate-copy-btn:hover {
  transform: translateY(-1px);
  box-shadow: none;
}
.profile-affiliate-copy-btn.is-copied {
  background: rgba(0,212,170,0.25);
  color: #00d4aa;
}
.profile-affiliate-copy-btn svg { color: currentColor; }

.profile-affiliate-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-affiliate-share-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-right: 4px;
}
.profile-share-btn {
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  color: rgba(255,255,255,0.8);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-share-btn:hover {
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}

/* Stats grid */
.profile-partner-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.profile-partner-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
}
.profile-partner-stat-icon {
  font-size: 22px;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.55);
}
.profile-partner-stat-icon svg { color: rgba(255,255,255,0.55); margin: 0 auto; }
.profile-partner-stat-num {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.profile-partner-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

.profile-partner-payout {
  display: flex;
  justify-content: flex-end;
}
.profile-partner-payout-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(140,70,210,0.9) 100%);
  border: 1px solid rgba(168,85,247,0.55);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 18px rgba(168,85,247,0.2);
}
.profile-partner-payout-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(168,85,247,0.35);
}
.profile-partner-payout-btn:disabled {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  cursor: not-allowed;
  box-shadow: none;
}

/* Intro text */
.profile-partner-intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  margin: 0 0 18px 0;
  max-width: 640px;
}

/* "Pripravujeme" pill v nadpise sekcie */
.profile-section-pill {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #d8b4fe;
  margin-left: 10px;
  vertical-align: middle;
  text-transform: none;
}

/* ── FLOW (Ako to funguje) ── */
.profile-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-flow-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.profile-flow-step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
}
.profile-flow-step-body { flex: 1; min-width: 0; }
.profile-flow-step-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}
.profile-flow-step-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.profile-flow-step-reward {
  background: linear-gradient(135deg, rgba(0,212,170,0.1) 0%, rgba(0,212,170,0.03) 100%);
  border-color: rgba(0,212,170,0.4);
}
.profile-flow-step-reward .profile-flow-step-num {
  background: rgba(0,212,170,0.2);
  border-color: rgba(0,212,170,0.5);
  font-size: 16px;
}
.profile-flow-step-reward .profile-flow-step-title { color: #00d4aa; }

/* ── STATS PREVIEW (mock) ── */
.profile-stats-preview {
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(168, 85, 247, 0.3);
  border-radius: 14px;
  padding: 18px 20px;
}
.profile-stats-preview-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.profile-stats-preview-card {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.profile-stats-preview-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.profile-stats-preview-num {
  font-size: 26px;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.profile-stats-preview-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
.profile-stats-preview-hint {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(168, 85, 247, 0.06);
  border-left: 2px solid rgba(168, 85, 247, 0.45);
  border-radius: 4px;
}

/* ── SHARE TEMPLATES ── */
.profile-share-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.profile-share-tpl {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden;
}
.profile-share-tpl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.profile-share-tpl-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.profile-share-tpl-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.profile-share-tpl-copy:hover {
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}
.profile-share-tpl-copy.is-copied {
  background: rgba(0,212,170,0.18);
  border-color: rgba(0,212,170,0.5);
  color: #00d4aa;
}
.profile-share-tpl-copy svg { color: currentColor; }
.profile-share-tpl-text {
  margin: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
  max-height: 180px;
  overflow-y: auto;
}

/* ── REFERRALS LIST (kto sa zaregistroval cez teba) ── */
.profile-referrals-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 24px;
}
.profile-referrals-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px;
}
.profile-referrals-empty-icon {
  font-size: 44px;
  opacity: 0.45;
  margin-bottom: 12px;
}
.profile-referrals-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.profile-referrals-empty-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  max-width: 480px;
}

/* Pre budúcu tabuľku — pripravené CSS */
.profile-referrals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.profile-referrals-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.profile-referrals-table td {
  padding: 11px 12px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ref-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ref-badge-active { background: rgba(0,212,170,0.15); color: #00d4aa; }
.ref-badge-pending { background: rgba(255,200,87,0.15); color: #ffc857; }

/* ── CLAIM FLOW (Ako dostaneš odmenu) ── */
.profile-claim-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.profile-claim-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.profile-claim-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,212,170,0.12);
  border: 1px solid rgba(0,212,170,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #00d4aa;
}
.profile-claim-step-body { flex: 1; min-width: 0; }
.profile-claim-step-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.profile-claim-step-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
}
.profile-claim-step-desc strong {
  color: #00d4aa;
  font-weight: 700;
}

/* ── BALANCE + PAYOUT ── */
.profile-claim-balance {
  background: linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(168,85,247,0.02) 100%);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 12px;
  padding: 18px 20px;
}
.profile-claim-balance-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.profile-claim-balance-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 140px;
}
.profile-claim-balance-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.profile-claim-balance-value {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.profile-claim-payout-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 22px;
  background: linear-gradient(135deg, rgba(168,85,247,0.95) 0%, rgba(140,70,210,0.9) 100%);
  border: 1px solid rgba(168,85,247,0.55);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 18px rgba(168,85,247,0.2);
  flex-shrink: 0;
}
.profile-claim-payout-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(168,85,247,0.35);
}
.profile-claim-payout-btn:disabled {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
  cursor: not-allowed;
  box-shadow: none;
}
.profile-claim-payout-hint {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  text-transform: none;
}

@media (max-width: 600px) {
  .profile-claim-balance-row { flex-direction: column; align-items: stretch; }
  .profile-claim-payout-btn { width: 100%; }
}
.profile-partner-steps {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 18px;
}
.profile-partner-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  transition: all 0.2s ease;
}
.profile-partner-step:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.profile-partner-step-icon {
  font-size: 30px;
  margin-bottom: 4px;
}
.profile-partner-step-content { display: flex; flex-direction: column; gap: 4px; }
.profile-partner-step-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
}
.profile-partner-step-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  line-height: 1.45;
}
.profile-partner-step-reward {
  background: linear-gradient(135deg, rgba(0,212,170,0.1) 0%, rgba(0,212,170,0.03) 100%);
  border-color: rgba(0,212,170,0.35);
}
.profile-partner-step-reward .profile-partner-step-title { color: #00d4aa; }
.profile-partner-step-reward .profile-partner-step-desc { color: rgba(0,230,185,0.85); }
.profile-partner-step-arrow {
  align-self: center;
  font-size: 22px;
  color: rgba(255,255,255,0.25);
  font-weight: 300;
  flex-shrink: 0;
}
.profile-partner-outro {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  margin: 4px 0 0 0;
  text-align: center;
  font-style: italic;
}

@media (max-width: 760px) {
  .profile-partner-steps {
    flex-direction: column;
    gap: 6px;
  }
  .profile-partner-step-arrow {
    transform: rotate(90deg);
    align-self: center;
  }
}

/* Rank card */
.profile-rank-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(255,200,87,0.1) 0%, rgba(255,200,87,0.03) 100%);
  border: 1px solid rgba(255,200,87,0.3);
  border-radius: 14px;
}
.profile-rank-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,200,87,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-rank-icon svg { width: 28px; height: 28px; color: #ffc857; }
.profile-rank-body { flex: 1; min-width: 0; }
.profile-rank-position {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.profile-rank-position strong {
  font-size: 28px;
  font-weight: 800;
  color: #ffc857;
  font-variant-numeric: tabular-nums;
}
.profile-rank-of {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}
.profile-rank-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.profile-rank-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc857, #ffb84a);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.profile-rank-hint {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}

@media (max-width: 600px) {
  .profile-rank-card { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE — POMOC TAB (Sprint 7)
   ═══════════════════════════════════════════════════════════ */
.profile-faq-list {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.profile-faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.profile-faq-item:last-child { border-bottom: none; }
.profile-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  transition: background 0.15s ease;
  user-select: none;
}
.profile-faq-item summary::-webkit-details-marker { display: none; }
.profile-faq-item summary::before {
  content: '▸';
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.profile-faq-item[open] summary::before { transform: rotate(90deg); }
.profile-faq-item summary:hover { background: rgba(255,255,255,0.03); }
.profile-faq-item[open] summary { color: #00d4aa; background: rgba(0,212,170,0.05); }
.profile-faq-answer {
  padding: 4px 18px 16px 36px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}

.profile-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.profile-help-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: all 0.18s ease;
}
.profile-help-card:hover {
  background: rgba(0,212,170,0.06);
  border-color: rgba(0,212,170,0.3);
  transform: translateY(-2px);
}
.profile-help-card-icon {
  width: 40px;
  height: 40px;
  background: rgba(0,212,170,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.profile-help-card-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.profile-help-card-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

.profile-feedback-box {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 18px 20px;
}
.profile-feedback-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 12px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.profile-feedback-input:focus {
  outline: none;
  border-color: rgba(0,212,170,0.4);
  background: rgba(0,0,0,0.4);
}
.profile-feedback-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 9px;
  color: #0a141a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
}
.profile-feedback-btn:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   AUTH MODAL — prihlásenie / registrácia / forgot
   ═══════════════════════════════════════════════════════════ */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 25000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.auth-modal-overlay.is-visible { opacity: 1; }
.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.auth-modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-modal-overlay.is-visible .auth-modal-box {
  transform: scale(1) translateY(0);
}
.auth-modal-box::-webkit-scrollbar { width: 6px; }
.auth-modal-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.auth-modal-close:hover {
  background: rgba(255,80,100,0.15);
  border-color: rgba(255,80,100,0.4);
  color: #ff7c8a;
}

.auth-modal-brand {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 20px;
}

.auth-modal-tabs {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 20px;
}
.auth-modal-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.55);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.auth-modal-tab:hover { color: rgba(255,255,255,0.85); }
.auth-modal-tab.is-active {
  background: rgba(0,212,170,0.15);
  color: #00d4aa;
}

.auth-modal-back { margin-bottom: 14px; }
.auth-modal-h2 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 6px 0 8px;
  text-align: center;
}
.auth-modal-p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin: 0 0 18px;
  line-height: 1.5;
}

/* ── FORM ──────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.auth-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.auth-field input[type="email"],
.auth-field input[type="text"],
.auth-field input[type="password"] {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 11px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.auth-field input:focus {
  outline: none;
  border-color: rgba(0,212,170,0.5);
  background: rgba(0,0,0,0.45);
}
.auth-field input::placeholder { color: rgba(255,255,255,0.3); }

.auth-password-wrap {
  position: relative;
}
.auth-password-wrap input { padding-right: 42px; }
.auth-pwd-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
.auth-pwd-toggle:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); }

.auth-strength {
  margin-top: 6px;
}
.auth-strength-bar {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.auth-strength-fill {
  height: 100%;
  width: 0;
  background: #ff5e8a;
  transition: width 0.2s ease, background 0.2s ease;
  border-radius: 2px;
}
.auth-strength-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
}

.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  line-height: 1.4;
}
.auth-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  cursor: pointer;
  accent-color: #00d4aa;
}
.auth-checkbox-row a { color: #00d4aa; text-decoration: none; }
.auth-checkbox-row a:hover { text-decoration: underline; }

.auth-link {
  background: transparent;
  border: none;
  color: #00d4aa;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.auth-link:hover { text-decoration: underline; }
.auth-link-small {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.auth-link-small:hover { color: #00d4aa; }

.auth-error {
  background: rgba(255,80,100,0.1);
  border: 1px solid rgba(255,80,100,0.3);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  color: #ff7c8a;
  line-height: 1.4;
}
.auth-success {
  background: rgba(0,212,170,0.1);
  border: 1px solid rgba(0,212,170,0.3);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  color: #00d4aa;
  line-height: 1.4;
}

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 10px;
  color: #0a141a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: none;
  margin-top: 4px;
}
.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: none;
}
.auth-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.auth-submit-arrow { font-size: 14px; font-weight: 700; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 4px 0;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

.auth-social-row { display: flex; flex-direction: column; gap: 8px; }
.auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.auth-social-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.2);
}
.auth-social-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}

.auth-modal-footer {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
}

/* HEADER login button — keď je odhlásený */
.header-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 999px;
  color: #0a141a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: none;
  flex-shrink: 0;
}
.header-signin-btn:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

@media (max-width: 480px) {
  .auth-modal-box { padding: 22px 20px; max-width: calc(100vw - 32px); }
}

/* ═══════════════════════════════════════════════════════════
   MEDIA GALLERY — dedikované Médiá view
   ═══════════════════════════════════════════════════════════ */

/* Header Médiá button (namiesto Free Plan pillu) */
.header-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  height: 32px;
}
.header-media-btn:hover {
  background: rgba(0, 212, 170, 0.1);
  border-color: rgba(0, 212, 170, 0.4);
  color: #00d4aa;
}
.header-media-btn svg { color: currentColor; }

/* ── VIEW ─────────────────────────────────────────── */
.media-view {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0,212,170,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(168,85,247,0.04) 0%, transparent 55%);
}
.media-view > .media-container { flex: 1; height: 100%; min-height: 0; max-width: 100%; }

.media-container {
  max-width: 1640px;
  margin: 0 auto;
  height: 100%;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  --media-tile-size: 160px;
}
@media (max-width: 900px) {
  .media-container { grid-template-columns: 200px 1fr; }
}
@media (max-width: 640px) {
  .media-container { grid-template-columns: 1fr; }
  .media-sidebar { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR (left rail) — filter + search
   ═══════════════════════════════════════════════════════════ */
.media-sidebar {
  background: rgba(0,0,0,0.25);
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 20px 12px 32px;
  overflow-y: auto;
  scrollbar-width: thin;
  height: 100%;
}
.media-sidebar::-webkit-scrollbar { width: 6px; }
.media-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.media-sidebar-search {
  position: relative;
  margin: 0 4px 16px;
}
.media-sidebar-search .media-search-input {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 9px 30px 9px 34px;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.media-sidebar-search .media-search-input:focus {
  outline: none;
  border-color: rgba(0,212,170,0.45);
  background: rgba(0,0,0,0.5);
}

.media-sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 12px 6px;
}

.media-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.media-sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  color: rgba(255,255,255,0.75);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.13s ease;
}
.media-sb-item:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.media-sb-item.is-active {
  background: rgba(0,212,170,0.1);
  color: #00d4aa;
}
.media-sb-icon {
  display: inline-flex;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
  font-size: 13px;
  color: currentColor;
}
.media-sb-icon svg { color: currentColor; }
.media-sb-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-sb-count {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.media-sb-item.is-active .media-sb-count { color: rgba(0,212,170,0.7); }

.media-sb-item-engine .media-sb-engine-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168,85,247,0.7), rgba(0,212,170,0.7));
  margin-left: 4px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   MAIN — topbar + content
   ═══════════════════════════════════════════════════════════ */
.media-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.media-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.media-topbar-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.media-topbar-title h1 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-topbar-count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.media-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.media-content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px 60px;
  scrollbar-width: thin;
}
.media-content::-webkit-scrollbar { width: 8px; }
.media-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
@media (max-width: 640px) {
  .media-topbar { padding: 14px 16px; }
  .media-content { padding: 16px 16px 60px; }
}

/* Zoom slider */
.media-zoom-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
}
.media-zoom-icon-sm, .media-zoom-icon-lg {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.media-zoom-icon-lg { font-size: 16px; }
.media-zoom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.media-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00d4aa;
  border: 2px solid #0a141a;
  cursor: pointer;
  transition: transform 0.15s ease;
  box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.4);
}
.media-zoom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 5px rgba(0, 212, 170, 0.28);
}
.media-zoom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00d4aa;
  border: 2px solid #0a141a;
  cursor: pointer;
}

/* (LEGACY toolbar styles — niektoré reused) */
.media-toolbar { display: none; }
.media-toolbar-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Search */
.media-search-wrap {
  position: relative;
  flex: 1 1 280px;
  max-width: 480px;
}
.media-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.4);
  display: flex;
}
.media-search-input {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 9px 36px 9px 36px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.media-search-input:focus {
  outline: none;
  border-color: rgba(0,212,170,0.45);
  background: rgba(0,0,0,0.45);
}
.media-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
}
.media-search-clear:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* Right-side controls */
.media-toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.media-fav-toggle, .media-select-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.media-fav-toggle:hover, .media-select-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.media-fav-toggle.is-active {
  background: rgba(255, 200, 87, 0.15);
  border-color: rgba(255, 200, 87, 0.5);
  color: #ffc857;
}
.media-fav-toggle.is-active svg { color: #ffc857; }
.media-select-toggle.is-active {
  background: rgba(0, 212, 170, 0.15);
  border-color: rgba(0, 212, 170, 0.5);
  color: #00d4aa;
}

.media-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.media-sort-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.media-sort-select {
  appearance: none;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 28px 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.media-sort-select:focus { outline: none; border-color: rgba(0,212,170,0.4); }

/* Chips */
.media-chips-row {
  align-items: center;
}
.media-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.media-chips-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px;
}
.media-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: rgba(255,255,255,0.7);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.media-chip:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.media-chip.is-active {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.5);
  color: #00d4aa;
}
.media-chip svg { color: currentColor; }
.media-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
  height: 16px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.media-chip.is-active .media-chip-count {
  background: rgba(0,212,170,0.22);
}

/* ── BULK BAR ─────────────────────────────────────── */
.media-bulk-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(0,212,170,0.12) 0%, rgba(0,180,145,0.06) 100%);
  border: 1px solid rgba(0,212,170,0.35);
  border-radius: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.media-bulk-count {
  font-size: 13px;
  font-weight: 700;
  color: #00d4aa;
}
.media-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.media-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.media-bulk-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(0,212,170,0.5);
}
.media-bulk-btn svg { color: currentColor; }
.media-bulk-btn-danger {
  color: rgba(255,120,130,0.95);
}
.media-bulk-btn-danger:hover {
  background: rgba(255,80,100,0.12);
  border-color: rgba(255,80,100,0.5);
  color: #ff7c8a;
}
.media-bulk-btn-cancel {
  color: rgba(255,255,255,0.5);
}

/* ── GROUPS ───────────────────────────────────────── */
.media-groups { display: flex; flex-direction: column; gap: 36px; }
.media-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.media-group-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.005em;
}
.media-group-count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
.media-group-check {
  width: 20px; height: 20px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.media-group-check:hover { border-color: rgba(0,212,170,0.5); }
.media-group-check.is-checked {
  background: #00d4aa;
  border-color: #00d4aa;
  color: #0a141a;
}

/* ── GRID — SQUARE tiles, dense layout ────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--media-tile-size, 160px), 1fr));
  gap: 10px;
}
@media (max-width: 700px) {
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
}

/* ── TILE — square s rounded corners ─────────────── */
.media-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,0.03);
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.media-tile:hover {
  transform: scale(1.02);
  border-color: rgba(0,212,170,0.45);
}
.media-tile.is-selectable { cursor: pointer; }
.media-tile.is-selected {
  border-color: #00d4aa;
  box-shadow: 0 0 0 1px rgba(0,212,170,0.4);
}

.media-tile-thumb {
  position: absolute;
  inset: 0;
  background: #0a0a10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
}
.media-tile-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media-tile-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: rgba(255,255,255,0.25);
}
.media-tile-placeholder svg { width: 30%; height: 30%; max-width: 48px; max-height: 48px; }
.media-tile-placeholder-music { background: linear-gradient(135deg, #1a1530 0%, #2a1845 100%); color: rgba(168,85,247,0.6); }
.media-tile-placeholder-voice { background: linear-gradient(135deg, #102030 0%, #182030 100%); color: rgba(0,212,170,0.7); }

/* Top-left checkbox in selection mode */
.media-tile-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.7);
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(4px);
  z-index: 3;
  transition: all 0.15s ease;
}
.media-tile.is-selected .media-tile-checkbox {
  background: #00d4aa;
  border-color: #00d4aa;
  color: #0a141a;
}

/* Top-right favorite star */
.media-tile-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px; height: 26px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.15s ease;
  z-index: 3;
  padding: 0;
  opacity: 0;
}
.media-tile:hover .media-tile-fav, .media-tile-fav.is-active { opacity: 1; }
.media-tile-fav:hover {
  background: rgba(255, 200, 87, 0.2);
  border-color: rgba(255, 200, 87, 0.55);
  color: #ffc857;
}
.media-tile-fav.is-active {
  background: rgba(255, 200, 87, 0.25);
  border-color: rgba(255, 200, 87, 0.6);
  color: #ffc857;
}
.media-tile-fav svg { width: 12px; height: 12px; }

/* Type pill (video/music/voice) bottom-right */
.media-tile-type-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 24px; height: 24px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.media-tile-type-pill svg { width: 12px; height: 12px; }

/* Hover overlay (prompt + engine) — gradient od dolu */
.media-tile-hover-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, transparent 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 2;
}
.media-tile:hover .media-tile-hover-overlay {
  opacity: 1;
  transform: translateY(0);
}
.media-tile-prompt {
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  margin-bottom: 4px;
}
.media-tile-meta {
  font-size: 9.5px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}

/* Topbar select toggle + sort */
.media-select-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.8);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.media-select-toggle:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.media-select-toggle.is-active {
  background: rgba(0,212,170,0.12);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}
.media-sort-wrap { display: inline-flex; align-items: center; }
.media-sort-select {
  appearance: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 26px 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.media-sort-select:focus { outline: none; border-color: rgba(0,212,170,0.4); }

/* ── Custom dropdown (sort) — nahradzuje native <select> ── */
.media-dd-wrap {
  position: relative;
  display: inline-flex;
}
.media-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 116px;
  justify-content: space-between;
}
.media-dd-trigger:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
.media-dd-wrap.is-open .media-dd-trigger {
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}
.media-dd-trigger-chevron {
  color: rgba(255,255,255,0.5);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.media-dd-wrap.is-open .media-dd-trigger-chevron {
  color: #00d4aa;
  transform: rotate(180deg);
}

.media-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  background: rgba(20, 22, 28, 0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 15000;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: mediaDdFadeIn 0.15s ease;
}
.media-dd-menu[hidden] { display: none; }
@keyframes mediaDdFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.media-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: all 0.13s ease;
}
.media-dd-item:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.media-dd-item.is-active {
  background: rgba(0,212,170,0.12);
  color: #00d4aa;
  font-weight: 700;
}
.media-dd-check {
  color: #00d4aa;
  font-weight: 800;
  font-size: 12px;
}

/* ── EMPTY STATE ──────────────────────────────────── */
.media-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 40px;
  color: rgba(255,255,255,0.55);
}
.media-empty-small { padding: 60px 30px; }
.media-empty-icon { font-size: 56px; opacity: 0.4; margin-bottom: 16px; }
.media-empty h2 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}
.media-empty p {
  font-size: 13px;
  max-width: 520px;
  line-height: 1.55;
  margin: 0 0 22px 0;
}
.media-empty-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.media-empty-cta {
  padding: 10px 18px;
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid rgba(0, 212, 170, 0.4);
  border-radius: 10px;
  color: #00d4aa;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.media-empty-cta:hover {
  background: rgba(0, 212, 170, 0.2);
  transform: translateY(-1px);
}

/* ── SIDE PANEL DETAIL (slide-out z prava) ────────── */
.media-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 18000;
  animation: mediaPanelFadeIn 0.22s ease;
}
@keyframes mediaPanelFadeIn { from { opacity: 0; } to { opacity: 1; } }

.media-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 42%;
  min-width: 480px;
  max-width: 720px;
  height: 100vh;
  background: rgba(15, 17, 22, 0.98);
  border-left: 1px solid rgba(255,255,255,0.1);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  z-index: 18500;
  display: flex;
  flex-direction: column;
  animation: mediaPanelSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes mediaPanelSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.media-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.media-panel-badge {
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.media-panel-badge-type {
  background: rgba(0,212,170,0.12);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}
.media-panel-close {
  margin-left: auto;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.media-panel-close:hover {
  background: rgba(255,80,100,0.15);
  border-color: rgba(255,80,100,0.4);
  color: #ff7c8a;
}

.media-panel-media {
  flex: 0 0 auto;
  padding: 22px;
  background: #050608;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 280px;
  max-height: 50vh;
}
.media-detail-img, .media-detail-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  display: block;
}
.media-detail-cover {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
}
.media-detail-cover-music {
  background: linear-gradient(135deg, #1a1530 0%, #2a1845 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(168,85,247,0.6);
}
.media-detail-cover-music svg { width: 72px; height: 72px; }
.media-detail-cover-voice {
  background: linear-gradient(135deg, #102030 0%, #1a3040 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,212,170,0.7);
}
.media-detail-cover-voice svg { width: 72px; height: 72px; }
.media-detail-audio { width: 100%; max-width: 420px; margin-top: 4px; }
.media-detail-noasset {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  padding: 30px;
  text-align: center;
  line-height: 1.5;
}
.media-detail-noasset-soft { color: rgba(255,255,255,0.4); font-size: 11.5px; padding: 16px; }
.media-detail-action {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(0,212,170,0.12);
  border: 1px solid rgba(0,212,170,0.4);
  border-radius: 7px;
  color: #00d4aa;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.media-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 24px;
}
.media-panel-meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.media-panel-meta {
  padding: 3px 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
}
.media-panel-meta-time {
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.media-panel-section { margin-bottom: 18px; }
.media-panel-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.media-panel-prompt {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px;
  padding: 12px 14px;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.media-panel-copy {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: rgba(255,255,255,0.7);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.media-panel-copy:hover {
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}

.media-panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.media-panel-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.9);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.media-panel-action:hover {
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
}
.media-panel-action.is-active {
  background: rgba(255, 200, 87, 0.12);
  border-color: rgba(255, 200, 87, 0.5);
  color: #ffc857;
}
.media-panel-action-danger { color: rgba(255,120,130,0.85); }
.media-panel-action-danger:hover {
  background: rgba(255,80,100,0.1);
  border-color: rgba(255,80,100,0.5);
  color: #ff7c8a;
}
.media-panel-action svg { color: currentColor; }

/* ── TOAST ────────────────────────────────────────── */
.media-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 17, 22, 0.98);
  border: 1px solid rgba(0,212,170,0.4);
  border-radius: 10px;
  padding: 11px 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  z-index: 30000;
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: none;
}
.media-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── MOBILE ───────────────────────────────────────── */
@media (max-width: 760px) {
  .media-container { padding: 20px 16px 60px; }
  .media-title { font-size: 26px; }
  .media-header { flex-direction: column; align-items: flex-start; }
  .media-toolbar-row { flex-direction: column; align-items: stretch; }
  .media-toolbar-actions { justify-content: flex-start; flex-wrap: wrap; }
  .media-search-wrap { max-width: none; }
  .media-side-panel { width: 100%; min-width: 0; }
  .media-bulk-bar { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE — MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .profile-container { padding: 20px 16px 60px; }
  .profile-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-hero-avatar { width: 64px; height: 64px; font-size: 26px; }
  .profile-hero-name { font-size: 24px; }
  .profile-hero-right { width: 100%; }
  .profile-hero-upgrade { width: 100%; justify-content: center; }
  .profile-stats-row { grid-template-columns: 1fr; gap: 10px; }
  .profile-tabs {
    margin: 0 -16px 20px;
    padding: 0 16px;
  }
  .profile-tab { padding: 10px 12px; font-size: 12px; }
  .profile-tab-label { display: inline; }
  /* Plans */
  .profile-plans-grid { grid-template-columns: 1fr; }
  /* Form rows */
  .profile-form-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .profile-form-row-label {
    flex-basis: 100%;
    margin-bottom: 4px;
  }
  /* Danger row */
  .profile-danger-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .profile-danger-btn { width: 100%; }
  /* Recent table — schovaj prompt column na mobile */
  .profile-recent-prompt { display: none; }
  /* Lightbox */
  .profile-lb-media { padding: 16px; }
  .profile-lb-info { padding: 14px 16px 18px; }
}
.user-menu-signout:hover {
  background: rgba(255, 80, 100, 0.08);
  color: #ff7c8a;
}
.user-menu-signout:hover .user-menu-item-icon { color: #ff7c8a; }

/* Mobile — full-width popup */
@media (max-width: 600px) {
  .user-menu-dropdown {
    width: calc(100vw - 24px);
    right: -12px;
  }
}

/* ── HEADER PILLS (credits + plan) ─────────────── */
.header-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
}

.header-pill:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.header-pill svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/* Credits pill — fialový akcent (diamant) */
.header-pill-credits {
  color: #A855F7;
}

.header-pill-credits .header-pill-value {
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.header-pill-credits .header-pill-suffix {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 500;
}

/* Pro plan pill — žlto-oranžový akcent (blesk) */
.header-pill-plan {
  color: #FBBF24;
}

.header-pill-plan .header-pill-plan-label {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Na menšej šírke skry suffix */
@media (max-width: 1300px) {
  .header-pill-credits .header-pill-suffix {
    display: none;
  }
}

@media (max-width: 1150px) {
  .header-pill-plan .header-pill-plan-label {
    display: none;
  }
}

@media (max-width: 1024px) {
  .header-pill-credits {
    display: none;
  }
}

/* Responzívne — na menších obrazovkách skry text, nechaj len avatar */
@media (max-width: 1200px) {
  .header-user-info { display: none; }
  .header-user { padding: 5px; }
}

@media (max-width: 980px) {
  .header-bell { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   HOME VIEW (default landing — Netflix style)
   ═══════════════════════════════════════════════════════════ */

.home-view {
  flex: 1;
  display: flex;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,212,170,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(168,85,247,0.05) 0%, transparent 55%);
}

/* Left panel (Home) */
.home-left {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 16px 24px 20px;
  border-right: 1px solid var(--glass-border);
  overflow-y: auto;
  overflow-x: hidden;
  /* Skrytý scrollbar — scroll funguje, lista nie je vidieť */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / staršie Edge */
}

.home-left::-webkit-scrollbar {  /* Chrome / Safari / nový Edge */
  width: 0;
  height: 0;
  display: none;
}

.home-left-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(255,255,255,0.65);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.home-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}

.home-nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(0,212,170,0.3);
  box-shadow: none;
}

.home-nav-icon {
  font-size: 15px;
  line-height: 1;
}

/* 3 placeholder dlaždice vľavo dole */
.home-left-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.home-tile-placeholder {
  height: 96px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  cursor: pointer;
}

.home-tile-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0,212,170,0.05) 0%,
    transparent 50%,
    rgba(168,85,247,0.04) 100%);
  pointer-events: none;
}

.home-tile-placeholder:hover {
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

/* Main content (Home) */
.home-main {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.home-main::-webkit-scrollbar { width: 6px; }
.home-main::-webkit-scrollbar-track { background: transparent; }
.home-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ── HERO SPLIT ────────────────────────────── */
.home-hero {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* SUPERHUMAN hero karta */
.hero-superhuman {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0,212,170,0.25);
  box-shadow: 0 25px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,212,170,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
  aspect-ratio: 900 / 560;
}

.hero-superhuman:hover {
  transform: translateY(-3px);
  border-color: rgba(0,212,170,0.55);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,212,170,0.25);
}

.hero-superhuman-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/superman-hero.webp?v=20260807a');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0a0a0f;
  transition: transform 0.5s ease;
}

.hero-superhuman:hover .hero-superhuman-bg {
  transform: scale(1.03);
}

.hero-superhuman-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 45%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.75) 40%,
    rgba(0,0,0,0.35) 75%,
    transparent 100%);
  pointer-events: none;
}

.hero-superhuman-content {
  position: relative;
  z-index: 2;
  padding: 24px 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
  max-width: 70%;
}

.hero-superhuman-eyebrow { margin-bottom: 4px; }

.hero-badge-signature {
  display: inline-block;
  padding: 5px 11px;
  background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  border-radius: 999px;
  box-shadow: none;
}

.hero-superhuman-title {
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
  background: linear-gradient(135deg, #fff 0%, #a7f3d0 40%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 30px rgba(0,212,170,0.3);
}

.hero-superhuman-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
}

/* "POWERED BY" eyebrow s horizontálnymi čiarkami po stranách */
.hero-powered-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 6px;
}
.hero-powered-line {
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.22);
}
.hero-powered-text {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* "powered by" rad — Claude × HeyGen × ElevenLabs logá v originálnych farbách, bez ohraničenia */
.hero-superhuman-powered {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 0;
}

.hero-powered-logo {
  height: 26px;
  width: auto;
  display: block;
}

.hero-powered-logo-sm {
  height: 14px;
}

.hero-powered-x {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
}

/* HUDBA karta */
.hero-music {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(168,85,247,0.3);
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.hero-music:hover {
  transform: translateY(-3px);
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 40px rgba(168,85,247,0.2);
}

.hero-music-bg {
  position: absolute;
  inset: 0;
  background-image: url('../audio.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0a0a0f;
  transition: transform 0.5s ease;
}

.hero-music:hover .hero-music-bg {
  transform: scale(1.03);
}

.hero-music::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 45%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.75) 40%,
    rgba(0,0,0,0.35) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-music-content {
  position: relative;
  z-index: 2;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  gap: 10px;
}

.hero-badge-soon {
  display: inline-block;
  padding: 5px 11px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.hero-music-title {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
  background: linear-gradient(135deg, #fff 0%, #f9a8d4 50%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-music-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin: 0;
  max-width: 92%;
}

/* Vizualizér — 12 stĺpcov animovaných */
.hero-music-viz {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 36px;
  margin-top: 10px;
}

.hero-music-viz span {
  width: 4px;
  background: linear-gradient(to top, #a855f7, #ec4899);
  border-radius: 2px;
  animation: musicViz 1.2s ease-in-out infinite;
  opacity: 0.8;
}

.hero-music-viz span:nth-child(1)  { height: 40%; animation-delay: 0s;   }
.hero-music-viz span:nth-child(2)  { height: 70%; animation-delay: 0.1s; }
.hero-music-viz span:nth-child(3)  { height: 55%; animation-delay: 0.2s; }
.hero-music-viz span:nth-child(4)  { height: 90%; animation-delay: 0.3s; }
.hero-music-viz span:nth-child(5)  { height: 45%; animation-delay: 0.4s; }
.hero-music-viz span:nth-child(6)  { height: 75%; animation-delay: 0.5s; }
.hero-music-viz span:nth-child(7)  { height: 60%; animation-delay: 0.2s; }
.hero-music-viz span:nth-child(8)  { height: 85%; animation-delay: 0.1s; }
.hero-music-viz span:nth-child(9)  { height: 50%; animation-delay: 0.3s; }
.hero-music-viz span:nth-child(10) { height: 95%; animation-delay: 0s;   }
.hero-music-viz span:nth-child(11) { height: 65%; animation-delay: 0.4s; }
.hero-music-viz span:nth-child(12) { height: 35%; animation-delay: 0.5s; }

@keyframes musicViz {
  0%, 100% { transform: scaleY(0.5); }
  50%       { transform: scaleY(1.1); }
}

/* ── KATEGÓRIE (VIDEO / GRAFIKA) ───────────── */
.home-category {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.category-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.category-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  margin: 0;
}

.category-eyebrow {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Karta v kategórii */
.cat-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.cat-card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.cat-card-bg { position: absolute; inset: 0; }

/* VIDEO karty — modré/fialové tóny */
.cat-card-video .cat-card-bg {
  background:
    radial-gradient(circle at 30% 30%, rgba(56,189,248,0.3) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(168,85,247,0.25) 0%, transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
}

.cat-card-video:hover { box-shadow: 0 20px 50px rgba(56,189,248,0.2); }

/* GRAFIKA karty — warm tóny */
.cat-card-image .cat-card-bg {
  background:
    radial-gradient(circle at 30% 30%, rgba(251,146,60,0.25) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(236,72,153,0.25) 0%, transparent 60%),
    linear-gradient(135deg, #1a0b2e 0%, #431407 100%);
}

.cat-card-image:hover { box-shadow: 0 20px 50px rgba(251,146,60,0.2); }

.cat-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 20px;
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.75) 40%,
    rgba(0,0,0,0.35) 75%,
    transparent 100%);
  z-index: 2;
}

.cat-card-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 4px;
}

.cat-card-title {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.cat-card-image-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 0.5s ease;
}

.cat-card.has-image:hover .cat-card-image-bg {
  transform: scale(1.05);
}

.cat-card.has-image .cat-card-bg {
  opacity: 0;
}

.cat-card.has-image .cat-card-content {
  z-index: 2;
}

.cat-card-video-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 0.5s ease;
}

.cat-card.has-video:hover .cat-card-video-loop {
  transform: scale(1.05);
}

.cat-card.has-video .cat-card-bg {
  opacity: 0;
}

.cat-card.has-video .cat-card-content {
  z-index: 2;
}

.cat-card.has-video .cat-card-badge-hot {
  z-index: 3;
}

.cat-card-badge-hot {
  position: absolute;
  top: 12px; right: 12px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.15em;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 0 16px rgba(239,68,68,0.5);
}

/* Responsive */
@media (max-width: 1200px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .home-left { width: 200px; }
  .home-hero { grid-template-columns: 1fr; }
  .hero-superhuman-title { font-size: 40px; }
  .hero-music-title { font-size: 36px; }
}

/* ═══════════════════════════════════════════════════════════
   BREAKING NEWS (left panel homescreen)
   ═══════════════════════════════════════════════════════════ */

.home-breaking {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.home-breaking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.home-breaking-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.breaking-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  margin-left: 2px;
}

.home-breaking-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #ef4444;
  padding: 3px 8px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 999px;
}

.home-breaking-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: pulseLive 1.8s ease-in-out infinite;
}

@keyframes pulseLive {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.home-breaking-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── TOP CREATORS (left panel — pod Breaking) ───── */
.home-creators {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.home-creators-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.home-creators-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}

.home-creators-period {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  font-weight: 500;
}

.home-creators-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.creator-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.creator-item:hover {
  background: rgba(255,255,255,0.04);
}

.creator-rank {
  width: 22px;
  font-size: 13px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.creator-item.is-podium .creator-rank {
  font-size: 16px;
}

.creator-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.creator-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.creator-handle {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creator-points {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.home-creators-footer {
  padding: 6px 4px 2px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.home-creators-hint {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
  line-height: 1.4;
  display: block;
  text-align: center;
}

.breaking-item {
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  width: 100%;
}

.breaking-item:last-child { border-bottom: none; }

.breaking-item:hover { background: rgba(255,255,255,0.04); }

.breaking-item-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
}

.breaking-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  flex-shrink: 0;
}

.breaking-item-time {
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.breaking-item-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breaking-item:hover .breaking-item-title { color: var(--accent); }

.home-breaking-more {
  margin-top: 4px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-breaking-more:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,212,170,0.05);
}

/* Subline „Aktualizované pred X min" — vykreslené cez data-subline atribút */
.home-breaking-more[data-subline]:not([data-subline=""])::after {
  content: attr(data-subline);
  display: block;
  margin-top: 4px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255,255,255,0.35);
}
.home-breaking-more[data-refreshing="1"] {
  opacity: 0.6;
  pointer-events: none;
}
.home-breaking-more[data-refreshing="1"]::after {
  content: "Aktualizujem…";
}

/* ═══════════════════════════════════════════════════════════
   NEWS FULL PAGE
   ═══════════════════════════════════════════════════════════ */

.news-view {
  flex: 1;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(251,191,36,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(239,68,68,0.04) 0%, transparent 50%);
}

.news-view::-webkit-scrollbar { width: 6px; }
.news-view::-webkit-scrollbar-track { background: transparent; }
.news-view::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.news-container {
  max-width: none;
  margin: 0;
  padding: 40px 44px 60px;
}

.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 20px;
  flex-wrap: wrap;
}

.news-eyebrow {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.2em;
  font-weight: 600;
  margin-bottom: 8px;
}

.news-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news-title .breaking-dot {
  width: 16px;
  height: 16px;
  margin-left: 4px;
}

.news-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin: 12px 0 0;
  max-width: 600px;
  line-height: 1.5;
}

/* ═══ NEWSROOM: rubriky · čítanie · v skratke ═══ */
.news-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 320px;
  gap: 44px;
  align-items: start;
}

.news-rail-inner {
  position: sticky;
  top: 24px;
}

.news-rail-left  { border-right: 1px solid rgba(255,255,255,0.07); padding-right: 20px; }
.news-rail-right { border-left:  1px solid rgba(255,255,255,0.07); padding-left: 24px; }

.news-rail-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.news-rail-head + * + .news-rail-head { margin-top: 32px; }

/* ─── Ľavý pruh: rubriky ─── */
.news-railcats { display: flex; flex-direction: column; }

.news-railcat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  padding: 7px 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.news-railcat:hover { color: rgba(255,255,255,0.85); }
.news-railcat.is-active { color: var(--accent); font-weight: 600; }
.news-railcat-count { font-size: 11px; color: rgba(255,255,255,0.25); }
.news-railcat.is-active .news-railcat-count { color: var(--accent); opacity: 0.7; }

.news-rail-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.news-status-age {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

.news-status-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: color 0.2s ease;
}

.news-status-btn:hover:not(:disabled) { color: var(--accent); }
.news-status-btn:disabled { cursor: default; opacity: 0.5; }

/* ─── Spoločné meta: KATEGÓRIA · zdroj · dátum ─── */
.news-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
}

.news-cat { color: var(--accent); }
.news-src { text-transform: none; letter-spacing: 0.02em; }
.news-meta-sep { font-style: normal; opacity: 0.35; }

/* ─── Vedúca správa ─── */
.news-stream { display: block; }

.news-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  column-gap: 44px;
  align-items: start;
  padding: 26px 30px 30px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.news-lead:hover {
  border-color: rgba(0,212,170,0.35);
  background: rgba(255,255,255,0.04);
}

.news-lead .news-meta { grid-column: 1 / -1; }

.news-lead-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
}

/* Deck — vedľa titulku, ako v novinách */
.news-lead-excerpt {
  font-size: 15px;
  color: rgba(255,255,255,0.62);
  line-height: 1.6;
  margin: 20px 0 0;
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,0.1);
}

/* ─── Feed: riadky, žiadne karty ─── */
.news-feed { margin-top: 8px; }

/* Dátumový predel — „Dnes", „Včera", „31. júl" */
.news-daymark {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-top: 26px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.news-daymark:first-child { margin-top: 14px; }

.news-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 150px;
  gap: 24px;
  padding: 20px 0 20px 16px;
  margin-left: -16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: border-left-color 0.2s ease;
}

.news-row:last-child { border-bottom: none; }
.news-row:hover { border-left-color: var(--accent); }
.news-row:hover .news-row-title { color: #fff; }
.news-row:hover .news-row-src { color: rgba(255,255,255,0.55); }

/* Zdroj vpravo — zaplní šírku a nechá text úzky */
.news-row-src {
  align-self: center;
  text-align: right;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.news-row-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.04em;
}

.news-row-time { color: rgba(255,255,255,0.24); }

.news-row-main { min-width: 0; }

.news-row-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 8px 0 0;
  transition: color 0.2s ease;
}

.news-row-excerpt {
  font-size: 13px;
  color: rgba(255,255,255,0.48);
  line-height: 1.55;
  margin: 6px 0 0;
  max-width: 72ch;
}

.news-empty {
  padding: 60px 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.35);
}

/* ─── Pravý pruh: v skratke + zdroje ─── */
.news-briefs { display: flex; flex-direction: column; }

.news-brief {
  display: block;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 12px 0 12px 10px;
  margin-left: -10px;
  border-left: 2px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-left-color 0.15s ease;
}

.news-brief:last-child { border-bottom: none; }
.news-brief:hover { border-left-color: var(--accent); }
.news-brief:hover .news-brief-title { color: #fff; }

.news-brief-when {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 4px;
}

.news-brief-title {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.72);
  transition: color 0.15s ease;
}

.news-srclist { display: flex; flex-direction: column; }

.news-srcrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

.news-srcrow-count { font-size: 11px; color: rgba(255,255,255,0.25); }

@media (max-width: 1400px) {
  .news-layout { grid-template-columns: 170px minmax(0, 1fr) 280px; gap: 32px; }
  .news-row { grid-template-columns: 88px minmax(0, 1fr); }
  .news-row-src { display: none; }
}

@media (max-width: 1080px) {
  .news-layout { grid-template-columns: 1fr; gap: 28px; }
  .news-rail-inner { position: static; }
  .news-rail-left,
  .news-rail-right { border: none; padding: 0; }
  .news-rail-left { order: -1; }
  .news-railcats { flex-direction: row; flex-wrap: wrap; gap: 0 20px; }
  .news-rail-status { flex-direction: row; align-items: center; gap: 14px; margin-top: 14px; }
  .news-lead { grid-template-columns: 1fr; }
  .news-lead-excerpt { padding-left: 0; border-left: none; margin-top: 12px; }
}

@media (max-width: 800px) {
  .news-container { padding: 28px 20px 48px; }
  .news-title { font-size: 40px; }
  .news-lead { padding: 20px; }
  .news-lead-title { font-size: 26px; }
  .news-row { grid-template-columns: 1fr; gap: 6px; }
  .news-row-when { flex-direction: row; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   SUPERHUMAN DOMOV — onboarding layout
   ═══════════════════════════════════════════════════════════ */

.sh-home {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 8px 4px 40px;
}

/* HERO */
.sh-home-hero {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 212, 170, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(168, 85, 247, 0.06) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 56px 36px;
  position: relative;
  overflow: hidden;
}

.sh-home-hero-eyebrow {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 12px;
}

.sh-home-hero-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 14px;
  color: #fff;
  letter-spacing: -0.01em;
}

.sh-home-hero-title-accent {
  background: linear-gradient(135deg, #fff 0%, #a7f3d0 40%, #38bdf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sh-home-hero-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 560px;
}

.sh-home-hero-cta {
  padding: 13px 26px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.sh-home-hero-cta:hover {
  transform: scale(1.03);
}

/* SECTIONS */
.sh-home-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sh-home-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 0 4px;
}

.sh-home-section-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.12em;
  margin: 0;
}

.sh-home-section-eyebrow {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* PIPELINE */
.sh-pipeline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow-x: auto;
}

.sh-pipeline::-webkit-scrollbar { height: 4px; }
.sh-pipeline::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sh-pipeline-step {
  flex: 1 0 auto;
  min-width: 76px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 22px 10px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.55);
  font-family: inherit;
}

.sh-pipeline-step:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: translateY(-2px);
}

.sh-pipeline-step.is-done {
  background: rgba(0, 212, 170, 0.08);
  border-color: rgba(0, 212, 170, 0.25);
  color: var(--accent);
}

.sh-pipeline-step.is-current {
  background: rgba(0, 212, 170, 0.12);
  border-color: var(--accent);
  color: #fff;
  box-shadow: none;
}

.sh-pipeline-step.is-final {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(236, 72, 153, 0.06));
  border-color: rgba(168, 85, 247, 0.25);
}

.sh-pipeline-step.is-final:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.12));
  border-color: rgba(168, 85, 247, 0.55);
}

.sh-pipeline-step-icon {
  font-size: 20px;
  line-height: 1;
}

.sh-pipeline-step.is-done .sh-pipeline-step-icon {
  font-size: 18px;
  font-weight: 900;
}

.sh-pipeline-step-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sh-pipeline-arrow {
  color: rgba(255, 255, 255, 0.15);
  font-size: 14px;
  flex-shrink: 0;
  user-select: none;
}

/* EXPLAINER CARDS */
.sh-explainer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .sh-explainer-grid { grid-template-columns: 1fr; }
}

.sh-explainer-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 30px 22px 28px;
  position: relative;
  transition: border-color 0.2s ease;
}

.sh-explainer-card:hover {
  border-color: rgba(255,255,255,0.12);
}

.sh-explainer-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: all 0.25s ease;
}

.sh-explainer-card:hover .sh-explainer-icon {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px);
}

.sh-explainer-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sh-explainer-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.sh-explainer-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SPLIT LAYOUT — Hero vľavo + Avatar karta vpravo
   ═══════════════════════════════════════════════════════════ */
.sh-home-split {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1200px) {
  .sh-home-split {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   AVATAR CARD — nový vertikálny layout v split gride
   ═══════════════════════════════════════════════════════════ */
.sh-avatar-card {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px 24px 22px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

.sh-avatar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(0,212,170,0.08) 0%, transparent 50%);
  pointer-events: none;
}

.sh-avatar-card > * {
  position: relative;
  z-index: 1;
}

.sh-avatar-card:hover {
  background: linear-gradient(135deg,
    rgba(0,212,170,0.05) 0%,
    rgba(255,255,255,0.02) 100%);
  border-color: rgba(0,212,170,0.4);
  transform: translateY(-2px);
  box-shadow: none;
}

.sh-avatar-card-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sh-avatar-card-img {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(0,212,170,0.15), rgba(168,85,247,0.1));
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
}

.sh-avatar-card-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.01) 100%);
  border: 1px dashed rgba(255,255,255,0.15);
  position: relative;
}

.sh-avatar-card-empty-icon {
  font-size: 36px;
  opacity: 0.5;
}

.sh-avatar-card-empty-q {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,212,170,0.15);
  border: 1px solid rgba(0,212,170,0.3);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.sh-avatar-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.sh-avatar-card-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-avatar-card-handle {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.sh-avatar-card-voice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  width: fit-content;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.sh-avatar-card-voice-icon {
  font-size: 11px;
  line-height: 1;
}

.sh-avatar-card-voice-ok {
  color: var(--accent);
  background: rgba(0,212,170,0.1);
  border-color: rgba(0,212,170,0.25);
}

.sh-avatar-card-voice-missing {
  color: rgba(251,191,36,0.9);
  background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.2);
}

.sh-avatar-card-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 50%,
    transparent 100%);
}

.sh-avatar-card-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sh-avatar-card-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
}

.sh-avatar-card-stat-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.sh-avatar-card-stat-text strong {
  color: #fff;
  font-weight: 800;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.sh-avatar-card-empty-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  text-align: center;
  padding: 8px 0;
}

.sh-avatar-card-cta {
  margin-top: auto;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.sh-avatar-card:hover .sh-avatar-card-cta {
  background: rgba(0,212,170,0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.sh-avatar-card-cta-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.sh-avatar-card:hover .sh-avatar-card-cta-primary {
  background: var(--accent);
  color: #fff;
  transform: scale(1.02);
  box-shadow: none;
}

/* MODALS */
.sh-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.sh-modal {
  background: #14141c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 32px 32px 28px;
  max-width: 540px;
  width: 100%;
  position: relative;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.sh-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sh-modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.sh-modal-eyebrow {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 8px;
}

.sh-modal-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.sh-modal-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin: 0 0 24px;
}

.sh-modal-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 600px) {
  .sh-modal-choices { grid-template-columns: 1fr; }
}

.sh-modal-choice {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px 18px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  color: #fff;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}

.sh-modal-choice:hover {
  background: rgba(0, 212, 170, 0.05);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.sh-modal-choice-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.sh-modal-choice-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.sh-modal-choice-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  flex: 1;
}

/* FINAL modal */
.sh-modal-final {
  max-width: 580px;
}

.sh-final-thumbnail {
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0 20px;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1a0b2e 0%, #2d1b4e 50%, #1e1b4b 100%);
  position: relative;
}

.sh-final-thumbnail-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.sh-final-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  padding-left: 4px;
}

.sh-final-duration {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  font-weight: 600;
}

.sh-final-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sh-final-list li {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  padding-left: 4px;
}

.sh-final-cta {
  width: 100%;
  padding: 14px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  color: rgba(255,255,255,0.65);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  cursor: not-allowed;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   ONBOARDING BLINK HIGHLIGHT
   ═══════════════════════════════════════════════════════════ */
@keyframes shBlinkGlow {
  0%, 100% {
    border-color: rgba(0, 212, 170, 0.35);
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0);
  }
  50% {
    border-color: rgba(0, 212, 170, 0.9);
    box-shadow: 0 0 24px 4px rgba(0, 212, 170, 0.35);
  }
}
.sh-blink-highlight {
  animation: shBlinkGlow 1.6s ease-in-out infinite;
  border-color: rgba(0, 212, 170, 0.6) !important;
  position: relative;
  z-index: 5;
}

/* ═══════════════════════════════════════════════════════════
   TÉMA TAB INTRO (náhradná obrazovka pre Article view)
   ═══════════════════════════════════════════════════════════ */
.sh-theme-intro {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 8px 40px;
  text-align: center;
}
.sh-theme-icon-wrap {
  display: inline-flex;
  margin: 8px auto 20px;
}
.sh-theme-icon {
  font-size: 52px;
  line-height: 1;
  animation: shFloat 3.2s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(0, 212, 170, 0.35));
}
@keyframes shFloat {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
.sh-theme-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.sh-theme-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin: 0 0 36px;
  line-height: 1.5;
}
.sh-theme-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  text-align: left;
}
.sh-theme-option {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 26px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.sh-theme-option:hover {
  background: linear-gradient(135deg,
    rgba(0, 212, 170, 0.05) 0%,
    rgba(255,255,255,0.02) 100%);
  border-color: rgba(0, 212, 170, 0.4);
  transform: translateY(-2px);
}
.sh-theme-option-num {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.sh-theme-option-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sh-theme-option-icon {
  font-size: 22px;
  line-height: 1;
}
.sh-theme-option-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.005em;
}
.sh-theme-option-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0 0 10px;
}
.sh-theme-option-desc strong { color: #fff; font-weight: 700; }
.sh-theme-option-desc em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}
.sh-theme-option-tip {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 12px;
  line-height: 1.5;
}
.sh-theme-option-tip strong { color: var(--accent); }
.sh-theme-option-tip em {
  color: rgba(255,255,255,0.85);
  font-style: normal;
  font-weight: 600;
}
.sh-theme-option-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.sh-theme-option:hover .sh-theme-option-cta {
  opacity: 1;
  transform: translateX(4px);
}
.sh-theme-option-1 .sh-theme-option-num { color: rgba(0, 212, 170, 0.4); }
.sh-theme-option-2 .sh-theme-option-num { color: rgba(168, 85, 247, 0.4); }

/* ═══════════════════════════════════════════════════════════
   DISCOVERY DETAIL (inline náhľad témy v ľavom paneli)
   ═══════════════════════════════════════════════════════════ */
.discovery-detail {
  padding: 4px 2px;
}
.discovery-detail-back {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0 0 12px;
  transition: color 0.15s ease;
}
.discovery-detail-back:hover { color: var(--accent); }
.discovery-detail-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.35;
}
.discovery-detail-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  margin-bottom: 14px;
}
.discovery-detail-use {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  margin-bottom: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.discovery-detail-use:hover {
  transform: scale(1.02);
  box-shadow: none;
}
.discovery-detail-tip {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}
.discovery-detail-tip strong { color: var(--accent); }
.discovery-detail-tip em {
  color: rgba(255,255,255,0.75);
  font-style: normal;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   TOPIC DETAIL V PRAVOM PANELI (po kliku Discovery témy)
   ═══════════════════════════════════════════════════════════ */
.sh-topic-detail {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 8px 40px;
}
.sh-topic-detail-back,
.sh-topic-confirm-back {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: all 0.18s ease;
}
.sh-topic-detail-back:hover,
.sh-topic-confirm-back:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}
.sh-topic-detail-eyebrow {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 10px;
}
.sh-topic-detail-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.sh-topic-detail-desc {
  font-size: 14.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0 0 28px;
}
.sh-topic-detail-actions {
  margin-bottom: 20px;
}
.sh-topic-detail-use {
  padding: 14px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}
.sh-topic-detail-use:hover {
  transform: scale(1.02);
  box-shadow: none;
}
.sh-topic-detail-tip {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
}
.sh-topic-detail-tip strong { color: var(--accent); }
.sh-topic-detail-tip em {
  color: rgba(255,255,255,0.85);
  font-style: normal;
  font-weight: 600;
}
/* Loading state */
.sh-topic-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 60px 20px;
}
.sh-topic-detail-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: shTopicSpin 0.8s linear infinite;
}
@keyframes shTopicSpin {
  to { transform: rotate(360deg); }
}
.sh-topic-detail-loading-text {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════
   TOPIC CONFIRMATION (po kliku "Použiť túto tému")
   ═══════════════════════════════════════════════════════════ */
.sh-topic-confirm {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 8px;
  text-align: center;
}
.sh-topic-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 18px;
  box-shadow: none;
}
.sh-topic-confirm-eyebrow {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.2em;
  font-weight: 700;
  margin-bottom: 12px;
}
.sh-topic-confirm-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.25;
}
.sh-topic-confirm-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin: 0 0 32px;
  line-height: 1.55;
}
.sh-topic-confirm-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 28px;
  text-align: left;
}
.sh-topic-confirm-option {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  align-items: flex-start;
}
.sh-topic-confirm-option-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sh-topic-confirm-option-text {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
}
.sh-topic-confirm-option-text strong {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.sh-topic-confirm-option-text em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

/* ─ TIP DŇA KARTA V ĽAVOM PANELI ─ */
.tip-card {
  padding: 14px 16px 12px;
  margin-top: 14px;
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.05) 0%,
    rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(251, 191, 36, 0.15);
  position: relative;
  overflow: hidden;
}
.tip-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(251, 191, 36, 0.4) 50%,
    transparent 100%);
}
.tip-header {
  margin-bottom: 10px;
}
.tip-badge {
  font-size: 10px;
  color: #fbbf24;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.tip-content {
  transition: opacity 0.3s ease;
}
.tip-fading {
  opacity: 0;
}
.tip-text {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   NANO BANANA PRO PAGE
   ═══════════════════════════════════════════════════════════ */

/* Základné rozloženie stránky generátora. Písané na RODINU, nie na ID —
   predtým to mali len #nanoBananaView a #gptImageView, takže Seedream, Reve
   a každý novo pridaný model sa správali inak. Nový model teraz nepotrebuje
   v CSS ani riadok: stačí trieda image-tool-view / video-tool-view v HTML.
   overflow-y: auto tu zámerne nie je — stránka fituje do viewportu sama
   a scrollbar by bol zbytočný. */
.image-tool-view,
.video-tool-view {
  flex: 1;
  min-height: 0;
}

.nb-page {
  max-width: none;
  margin: 0;
  padding: 20px 22px 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* HEADER */
.nb-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nb-back {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  padding: 8px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nb-back:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}

.nb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.nb-bc-item {
  color: rgba(255,255,255,0.4);
}

.nb-bc-sep {
  color: rgba(255,255,255,0.25);
}

.nb-bc-current {
  color: var(--accent);
}

.nb-header-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nb-badge {
  background: linear-gradient(135deg, #F59E0B, #EF4444);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.nb-tech {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* MODEL PICKER — dropdown v hlavičke (nahrádza tab strip) */
.nb-model-picker {
  position: relative;
  display: inline-block;
}

.nb-model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: 'Space Grotesk', inherit;
  color: #fff;                       /* biely text — konzistentne všade */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nb-model-trigger:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
.nb-model-trigger.open {
  background: rgba(0, 212, 170, 0.08);
  border-color: rgba(0, 212, 170, 0.35);
}

.nb-model-chevron {
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.2s ease;
  color: currentColor;
}
.nb-model-trigger.open .nb-model-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.nb-model-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 1;
  color: currentColor;
}
.nb-model-tab-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.nb-model-tab-label {
  line-height: 1;
}

/* Dropdown panel */
.nb-model-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 220px;
  padding: 6px;
  background: #0e0e14;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: nbModelDropdownIn 0.14s ease-out;
}
.nb-model-dropdown[hidden] { display: none; }

@keyframes nbModelDropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nb-model-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Space Grotesk', inherit;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nb-model-dropdown-item:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.nb-model-dropdown-item.active {
  color: var(--accent);
  background: rgba(0, 212, 170, 0.08);
}
.nb-model-check {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
}

@media (max-width: 600px) {
  .nb-model-dropdown {
    min-width: 180px;
  }
}

/* STUDIO LAYOUT — 3 stĺpce: sidebar (presets) + controls + gallery */
.nb-studio {
  display: grid;
  grid-template-columns: 220px 460px 1fr;
  gap: 16px;
  margin-bottom: 0;
  align-items: stretch;
  height: calc(100vh - 170px);
  min-height: 560px;
  max-height: calc(100vh - 170px);
}

@media (max-width: 1400px) {
  .nb-studio { grid-template-columns: 200px 440px 1fr; gap: 14px; }
}

@media (max-width: 1100px) {
  .nb-studio {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
  .nb-sidebar { display: none; }
}

/* LEFT PANEL: CONTROLS — má pevnú max výšku z gridu (.nb-studio), takže obsah
   ktorý sa nezmestí (napr. Seedance s tier + audio toggle + cena + Generovať)
   musí byť scrollable. overflow-y: auto namiesto hidden — user sa vždy dostane
   na Generovať tlačidlo. Kompozícia sa zachová: CTA sekcia má `margin-top: auto`
   takže sa drží na spodku scroll area. */
.nb-controls {
  background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  /* Žiadny scroll — content musí vždy vyzerať rovnako vo všetkých enginoch.
     Po kompresii textarea + odstránení cost-label-u sa Seedance/Veo zmestia. */
  overflow: visible;
  min-height: 0;
}

/* CTA sekcia stláčaná na spodok aby Generate bolo vždy dole */
.nb-controls .nb-cta-section {
  margin-top: auto;
}

/* Kompaktné tlačidlá v controls paneli — nescrollujú.
   Aspect má 5 buttons (1:1, 4:3, 3:4, 16:9, 9:16) → menší padding+gap aby sedelo do riadka. */
.nb-controls .nb-aspect-btn  { padding: 7px 4px; gap: 5px; font-size: 10.5px; }
.nb-controls .nb-count-btn   { padding: 7px 8px; }

.nb-controls::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.5), transparent);
}

.nb-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
}

.nb-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

.nb-label-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.nb-prompt-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: none; /* žiadne ručné zväčšovanie — pevná výška, vnútorný scroll */
  height: 115px;
  max-height: 115px;
  overflow-y: auto;
  min-height: 90px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.nb-prompt-input:focus {
  outline: none;
  border-color: rgba(0, 212, 170, 0.4);
  background: rgba(0,0,0,0.4);
}

.nb-prompt-input::placeholder {
  color: rgba(255,255,255,0.3);
}

.nb-prompt-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 7px 11px;
  background: rgba(255,255,255,0.025);
  border-left: 2px solid rgba(249,115,22,0.5);
  border-radius: 0 8px 8px 0;
}
.nb-prompt-hint strong {
  color: var(--accent, #00d4aa);
  font-weight: 700;
}

/* ── Enhance hint — krátka správa pod prompt-om počas Vylepšujem… fázy ── */
.nb-enhance-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #00d4aa);
  letter-spacing: 0.02em;
  margin-top: 6px;
  padding-left: 2px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.25s ease;
}
.nb-enhance-hint.visible {
  opacity: 1;
  max-height: 24px;
}

/* ── Enhance pulse — krátky 2× ping na aspect/duration/tier picker buttons ──
   Ukazuje user-ovi že tieto settings boli práve zachytené do enhance payload-u.
   Subtle, 2 pulses, 1s celkovo. */
@keyframes nb-enhance-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 212, 170, 0);   }
  35%  { box-shadow: 0 0 0 6px rgba(0, 212, 170, 0.45); }
  70%  { box-shadow: 0 0 0 0   rgba(0, 212, 170, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(0, 212, 170, 0);   }
}
.nb-enhance-pulse {
  animation: nb-enhance-pulse 0.55s ease-out 2;
  position: relative;
  z-index: 2;
}

.nb-prompt-hint strong {
  color: var(--accent);
}

/* REFERENCES */
.nb-refs-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;          /* pevný 1 riadok — pri viacerých refs sa scrolluje horizontálne */
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;        /* miesto pre tenký scrollbar */
  scrollbar-width: thin;
}
.nb-refs-row::-webkit-scrollbar { height: 6px; }
.nb-refs-row::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

.nb-ref-thumb {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #000;
  flex-shrink: 0;
}

/* Krátky flash efekt po pridaní novej referencie (paste z clipboardu / upload) */
.nb-ref-thumb.nb-ref-flash {
  animation: nbRefFlash 0.7s ease-out;
}

@keyframes nbRefFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85), 0 0 0 0 rgba(34, 197, 94, 0.6);
    border-color: rgba(34, 197, 94, 1);
    transform: scale(1.08);
  }
  60% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25), 0 0 12px 2px rgba(34, 197, 94, 0.45);
    border-color: rgba(34, 197, 94, 0.7);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 0 0 0 rgba(34, 197, 94, 0);
    border-color: rgba(255,255,255,0.1);
    transform: scale(1);
  }
}

.nb-ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nb-ref-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}

.nb-ref-remove:hover {
  background: #ef4444;
  border-color: #ef4444;
}

.nb-ref-index {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', inherit;
}

.nb-ref-add {
  width: 70px;
  height: 70px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.2s ease;
  font-family: inherit;
  flex-shrink: 0;
  padding: 0;
}

.nb-ref-add:hover {
  background: rgba(0, 212, 170, 0.06);
  border-color: rgba(0, 212, 170, 0.3);
  color: var(--accent);
}

.nb-ref-add-plus {
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
}

.nb-ref-add-label {
  font-size: 9px;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}

.nb-refs-hint {
  font-size: 10.5px;
  color: rgba(255,255,255,0.4);
  line-height: 1.35;
  padding: 5px 8px;
  background: rgba(0, 212, 170, 0.04);
  border-left: 2px solid rgba(0, 212, 170, 0.3);
  border-radius: 4px;
  margin-top: 4px;
}

/* ASPECT + COUNT */
.nb-aspect-buttons,
.nb-count-buttons {
  display: flex;
  gap: 6px;
}

.nb-aspect-btn {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 9px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.nb-aspect-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.nb-aspect-btn.active {
  background: rgba(0, 212, 170, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.nb-aspect-icon {
  background: currentColor;
  opacity: 0.7;
}

.nb-aspect-1-1  { width: 12px; height: 12px; border-radius: 2px; }
.nb-aspect-16-9 { width: 16px; height: 9px;  border-radius: 2px; }
.nb-aspect-9-16 { width: 9px;  height: 16px; border-radius: 2px; }
.nb-aspect-3-2  { width: 15px; height: 10px; border-radius: 2px; }
.nb-aspect-2-3  { width: 10px; height: 15px; border-radius: 2px; }


.nb-count-btn {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Space Grotesk', inherit;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nb-count-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.nb-count-btn.active {
  background: rgba(0, 212, 170, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* CTA SECTION */
.nb-cta-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.nb-credits-info {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-align: center;
}

.nb-credits-info strong {
  color: var(--accent);
  font-family: 'Space Grotesk', inherit;
  font-weight: 800;
}

.nb-generate-btn {
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  text-transform: uppercase;
  width: 100%;
}

.nb-generate-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.nb-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* RIGHT PANEL: PREVIEW */
.nb-preview {
  background: #0a0a0f;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 560px;
  position: relative;
}

@media (max-width: 1100px) {
  .nb-preview {
    height: auto;
    min-height: 500px;
  }
}

.nb-preview-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.nb-preview-empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.3;
}

.nb-preview-empty-title {
  font-family: 'Space Grotesk', inherit;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}

.nb-preview-empty-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.nb-preview-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.nb-preview-results {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nb-preview-warning {
  font-size: 12px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
}

.nb-preview-grid {
  flex: 1;
  display: grid;
  gap: 12px;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.nb-preview-count-one .nb-preview-grid {
  grid-template-columns: 1fr;
}
.nb-preview-count-two .nb-preview-grid {
  grid-template-columns: 1fr 1fr;
}
.nb-preview-count-four .nb-preview-grid {
  grid-template-columns: 1fr 1fr;
}

.nb-preview-item {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
}

.nb-preview-results .nb-preview-img {
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  display: block;
  background: transparent;
  border-radius: 0;
  margin: 0;
}

.nb-preview-count-one .nb-preview-img {
  max-height: 820px;
}

.nb-preview-count-two .nb-preview-img,
.nb-preview-count-four .nb-preview-img {
  max-height: 480px;
}

.nb-preview-item-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nb-preview-item:hover .nb-preview-item-actions {
  opacity: 1;
}

.nb-preview-btn {
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.nb-preview-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.nb-preview-actions-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.nb-preview-action {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nb-preview-action:hover {
  background: rgba(0, 212, 170, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.nb-preview-action-clear:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
  color: #ef4444;
}

/* GALLERY */
.nb-gallery-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.nb-gallery-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.nb-gallery-title {
  font-family: 'Space Grotesk', inherit;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -0.005em;
}

.nb-gallery-count {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

/* Row-based masonry (Flickr / Higgsfield style) — každý riadok má rovnakú výšku,
   šírka per item podľa skutočného aspect ratio. Žiadny stretch, žiadny crop. */
.nb-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  --row-h: 240px;
}

.nb-gallery-item {
  position: relative;
  height: var(--row-h);
  flex-grow: 0;             /* items NErastú — držia svoju prirodzenú šírku */
  flex-shrink: 0;
  flex-basis: var(--row-h); /* default 1:1 (skeletony bez data-aspect) */
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
/* Aspect-ratio specific šírky — width = výška × aspect_ratio */
.nb-gallery-item[data-aspect="1:1"]   { flex-basis: var(--row-h); }
.nb-gallery-item[data-aspect="16:9"]  { flex-basis: calc(var(--row-h) * 16/9); }
.nb-gallery-item[data-aspect="9:16"]  { flex-basis: calc(var(--row-h) * 9/16); }
.nb-gallery-item[data-aspect="4:3"]   { flex-basis: calc(var(--row-h) * 4/3); }
.nb-gallery-item[data-aspect="3:4"]   { flex-basis: calc(var(--row-h) * 3/4); }
.nb-gallery-item[data-aspect="21:9"]  { flex-basis: calc(var(--row-h) * 21/9); }
.nb-gallery-item[data-aspect="3:2"]   { flex-basis: calc(var(--row-h) * 3/2); }
.nb-gallery-item[data-aspect="2:3"]   { flex-basis: calc(var(--row-h) * 2/3); }

.nb-gallery-item:hover {
  transform: scale(1.02);
  border-color: rgba(0, 212, 170, 0.4);
}

.nb-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nb-gallery-item-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nb-gallery-item:hover .nb-gallery-item-overlay {
  opacity: 1;
}

.nb-gallery-item-btn {
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.nb-gallery-item-btn svg {
  width: 16px;
  height: 16px;
}

.nb-gallery-item-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.nb-gallery-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 16px;
}

.nb-gallery-empty-icon {
  font-size: 42px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.nb-gallery-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}

.nb-gallery-empty-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* MODAL (preset dialog, results, preview) */
.nb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: nbFadeIn 0.2s ease;
}

.nb-modal-backdrop-solid {
  background: rgba(0, 0, 0, 0.9);
}

@keyframes nbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nb-modal {
  background: #12121a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px;
  max-width: 500px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  animation: nbSlideUp 0.25s ease;
}

@keyframes nbSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.nb-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.nb-modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.nb-modal-eyebrow {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 8px;
}

.nb-modal-title {
  font-family: 'Space Grotesk', inherit;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.25;
}

.nb-modal-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 16px;
  line-height: 1.55;
}

.nb-modal-warning {
  font-size: 12px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
}

.nb-modal-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 20px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.nb-modal-input:focus {
  outline: none;
  border-color: var(--accent);
}

.nb-modal-input-error {
  border-color: #ef4444 !important;
  animation: nbShake 0.4s ease;
}

@keyframes nbShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.nb-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.nb-modal-cancel,
.nb-modal-apply {
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  letter-spacing: 0.03em;
}

.nb-modal-cancel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}

.nb-modal-cancel:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.nb-modal-apply {
  background: var(--accent);
  color: #fff;
}

.nb-modal-apply:hover {
  transform: scale(1.03);
  box-shadow: none;
}

/* LOADING MODAL */
.nb-loading {
  text-align: center;
  padding: 40px 30px;
  max-width: 420px;
}

.nb-loading-spinner {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nb-loading-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid rgba(0, 212, 170, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: nbSpin 1.2s linear infinite;
}

@keyframes nbSpin {
  to { transform: rotate(360deg); }
}

.nb-banana {
  font-size: 36px;
  color: var(--accent);
  animation: nbBounce 1.5s ease-in-out infinite;
}

.nb-banana svg {
  display: block;
}

@keyframes nbBounce {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-4px) rotate(10deg); }
}

.nb-loading-title {
  font-family: 'Space Grotesk', inherit;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.nb-loading-phase {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
  transition: opacity 0.3s ease;
}

.nb-loading-status {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}

.nb-loading-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.nb-loading-stop {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 10px;
  font-family: 'Space Grotesk', inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nb-loading-stop:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.7);
  color: #fff;
  transform: translateY(-1px);
}

.nb-loading-stop:active {
  transform: translateY(0);
}

.nb-loading-stop-icon {
  font-size: 11px;
  line-height: 1;
}

/* PREVIEW MODAL */
.nb-modal-preview {
  max-width: 800px;
  padding: 20px;
}

.nb-preview-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 16px;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
}

.nb-preview-prompt {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.03);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  line-height: 1.5;
  font-family: 'Monaco', 'Courier New', monospace;
  max-height: 120px;
  overflow-y: auto;
}

/* PREVIEW MAIN (obsah nad tray-om) */
.nb-preview-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px;
}

.nb-preview-main .nb-preview-empty,
.nb-preview-main .nb-preview-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}

/* RECENT TRAY */
.nb-tray {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 18px 18px;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}

.nb-tray-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nb-tray-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

.nb-tray-count {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
}

.nb-tray-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.nb-tray-scroll::-webkit-scrollbar {
  height: 6px;
}

.nb-tray-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.nb-tray-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.nb-tray-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

.nb-tray-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  background: #000;
  transition: all 0.2s ease;
}

.nb-tray-thumb:hover {
  border-color: rgba(0, 212, 170, 0.4);
  transform: scale(1.05);
}

.nb-tray-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nb-tray-actions {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.nb-tray-thumb:hover .nb-tray-actions {
  opacity: 1;
}

.nb-tray-btn {
  width: 24px;
  height: 24px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}

.nb-tray-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* REFERENCE THUMBS — clickable + mention hint */
.nb-ref-thumb {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #000;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nb-ref-thumb:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}

.nb-ref-mention-hint {
  position: absolute;
  inset: 0;
  background: rgba(0, 212, 170, 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-family: 'Monaco', 'Courier New', monospace;
  pointer-events: none;
}

.nb-ref-thumb:hover .nb-ref-mention-hint {
  opacity: 1;
}

/* @MENTION DROPDOWN */
.nb-mention-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #161622;
  border: 1px solid rgba(0, 212, 170, 0.3);
  border-radius: 10px;
  padding: 6px;
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: nbFadeIn 0.15s ease;
}

.nb-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.nb-mention-item.nb-mention-active {
  background: rgba(0, 212, 170, 0.12);
}

.nb-mention-item img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #000;
}

.nb-mention-info {
  flex: 1;
  min-width: 0;
}

.nb-mention-tag {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  line-height: 1.2;
}

.nb-mention-label {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  line-height: 1.2;
  margin-top: 2px;
}

/* Mobile responsive */
@media (max-width: 700px) {
  .nb-tray-thumb { width: 60px; height: 60px; }
  .nb-ref-thumb { width: 60px; height: 60px; }
}

/* ═══════════════════════════════════════════════════════════
   RESOLUTION SELECTOR (1K / 2K / 4K)
   ═══════════════════════════════════════════════════════════ */

.nb-resolution-buttons {
  display: flex;
  gap: 6px;
}

.nb-resolution-btn {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Space Grotesk', inherit;
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.nb-resolution-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.nb-resolution-btn.active {
  background: rgba(0, 212, 170, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 212, 170, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   FULLSCREEN LIGHTBOX
   ═══════════════════════════════════════════════════════════ */

.nb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.nb-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: background 0.2s ease;
}

.nb-lightbox.nb-lightbox-open .nb-lightbox-backdrop {
  background: rgba(0, 0, 0, 0.92);
}

.nb-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.nb-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.nb-lightbox-counter {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.06em;
}

.nb-lightbox-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-height: 92vh;
  overflow-y: auto;            /* poistka — keby sa obsah nezmestil, scrolluje (tlačidlá vždy dostupné) */
  padding: 4px 6px;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nb-lightbox.nb-lightbox-open .nb-lightbox-inner {
  opacity: 1;
  transform: scale(1);
}

.nb-lightbox-img-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nb-lightbox-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-lightbox-img {
  max-width: min(88vw, 920px);
  max-height: 58vh;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  background: #000;
}

.nb-lightbox-nav {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.nb-lightbox-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}

.nb-lightbox-nav:disabled {
  opacity: 0.22;
  cursor: not-allowed;
}

.nb-lightbox-info {
  text-align: center;
  max-width: 660px;
  width: 100%;
}

.nb-lightbox-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 7px;
}

/* ═══ Lightbox GLASS panel (prompt + akcie) — ladí so zvyškom webu ═══ */
.nb-lb-panel {
  width: 100%;
  max-width: min(92vw, 820px);   /* dosť široký, nech 6 tlačidiel ide do 1 riadku */
  margin: 0 auto;
  text-align: left;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 18px;
}
.nb-lb-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.nb-lb-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.nb-lb-iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: 9px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nb-lb-iconbtn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
}
.nb-lb-iconbtn svg { width: 13px; height: 13px; }
.nb-lb-prompt {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}
/* Dlhý prompt: zbalený na 3 riadky s jemným fade dole (nie tvrdý strih) */
.nb-lb-prompt-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.nb-lb-seeall {
  margin-top: 7px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.nb-lb-seeall:hover { text-decoration: underline; }
.nb-lb-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 14px 0;
}
.nb-lb-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
}
.nb-lb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  border-radius: 11px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.nb-lb-btn svg { width: 16px; height: 16px; opacity: 0.8; }
.nb-lb-btn:hover {
  background: var(--accent-dim);
  border-color: rgba(0, 212, 170, 0.45);
}
.nb-lb-btn:hover svg { opacity: 1; }
.nb-lb-btn:active { transform: scale(0.96); }
.nb-lb-btn-danger:hover {
  background: rgba(255, 80, 90, 0.14);
  border-color: rgba(255, 80, 90, 0.45);
}
/* Mini info riadok pod tlačidlami — Model · Kvalita · Rozlíšenie */
.nb-lb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  font-size: 12px;
  color: var(--text-secondary);
}
.nb-lb-meta b {
  font-weight: 700;
  color: var(--accent);
}
.nb-lb-meta-sep { color: var(--text-muted); }

.nb-lightbox-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.nb-lightbox-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 9px 16px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nb-lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nb-lightbox-btn-danger {
  border-color: rgba(239, 68, 68, 0.25);
  color: rgba(255, 100, 100, 0.8);
}

.nb-lightbox-btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ff6060;
}

@media (max-width: 600px) {
  .nb-lightbox-img { max-height: 55vh; }
  .nb-lightbox-nav { width: 36px; height: 36px; font-size: 20px; }
  .nb-lightbox-actions { gap: 6px; }
  .nb-lightbox-btn { padding: 8px 12px; font-size: 12px; }
}


/* ═══════════════════════════════════════════════
   OPENART-STYLE GALLERY PANEL (right column)
   ═══════════════════════════════════════════════ */

.nb-gallery-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.nb-gallery-panel .nb-gallery-header {
  margin-bottom: 14px;
  flex-shrink: 0;
}

.nb-gallery-panel .nb-gallery-grid {
  overflow-y: auto;
  align-content: flex-start;       /* riadky pri vrchu pri flex-wrap */
  padding-right: 0;
  padding-bottom: 12px;
  gap: 14px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* Schovaný scrollbar (WebKit) — scroll funguje cez kolieskom myši */
.nb-gallery-panel .nb-gallery-grid::-webkit-scrollbar {
  display: none;
}

/* SKELETON — rotujúca ikona modelu počas generovania */
.nb-gallery-item.nb-skel {
  background: radial-gradient(circle at center, rgba(0, 212, 170, 0.08) 0%, rgba(0, 212, 170, 0.02) 60%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(0, 212, 170, 0.3);
  cursor: default;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nb-gallery-item.nb-skel:hover {
  transform: none;
  border-color: rgba(0, 212, 170, 0.3);
}
.nb-skel-spinner {
  width: 56px;
  height: 56px;
  font-size: 40px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nbSkelPulse 1.4s ease-in-out infinite;
}
.nb-skel-spinner svg,
.nb-skel-spinner img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}
@keyframes nbSkelPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.4; transform: scale(0.82); }
}

/* Stop button inside skeleton card — top-right × */
.nb-skel-stop-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.92);
  border: none;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.nb-skel-stop-btn:hover {
  background: rgba(185, 28, 28, 1);
  transform: scale(1.12);
}

/* ═══════════════════════════════════════════════
   SIDEBAR (left rail) — Presets / Templates / Prompts
   ═══════════════════════════════════════════════ */
.nb-sidebar {
  background: linear-gradient(135deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
  /* Skryjeme scrollbar — ak by sa nezmestilo (veľmi malá obrazovka), scroll
     funguje ďalej, len nie je vidieť. */
  scrollbar-width: none;
}
.nb-sidebar::-webkit-scrollbar { display: none; }
.nb-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Vyplní zvyšok výšky aby presety vykryli celý sidebar bez zbytočného miesta */
  flex: 1 1 auto;
}
/* Items v section rovnomerne rozdelia priestor */
.nb-sidebar-section > .nb-sidebar-item {
  flex: 1 1 auto;
  min-height: 32px;
  max-height: 44px;
}
.nb-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 6px 4px;
}
.nb-sidebar-item {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.75);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.nb-sidebar-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
  color: #fff;
}
.nb-sidebar-item.is-stub {
  color: rgba(255,255,255,0.35);
  cursor: not-allowed;
  font-style: italic;
}
.nb-sidebar-item.is-stub:hover {
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,0.35);
}
.nb-sidebar-icon {
  width: 18px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Líniové (stroke) ikony — decentné monochromatické, akcent až na aktívnom presete */
  color: rgba(255,255,255,0.5);
  transition: color 0.15s ease;
}
.nb-sidebar-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nb-sidebar-item:hover .nb-sidebar-icon { color: rgba(255,255,255,0.8); }
.nb-sidebar-item.is-active .nb-sidebar-icon { color: var(--accent, #00d4aa); }

/* ─── ACTIVE preset state ──────────────────────────── */
.nb-sidebar-item.is-active {
  background: rgba(0,212,170,0.10);
  border-color: rgba(0,212,170,0.55);
  color: #fff;
  font-weight: 600;
}
.nb-sidebar-item.is-active:hover {
  background: rgba(0,212,170,0.14);
  border-color: rgba(0,212,170,0.7);
}
.nb-sidebar-item-check {
  margin-left: auto;
  color: var(--accent, #00d4aa);
  font-size: 12px;
  font-weight: 700;
}
.nb-sidebar-item-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sub-label (group) — Foto-realistické / Animované / Štýl / Pohyb.
   Tyrkysové so žiarou, aby skupiny vizuálne oddelili zoznam (nesplýval). */
.nb-sidebar-sublabel {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent, #00d4aa);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 6px 2px;
  margin-top: 12px;
  text-shadow: 0 0 12px rgba(0,212,170,0.55), 0 0 4px rgba(0,212,170,0.4);
}
/* Prvá skupina hneď pod hlavným "Presety" labelom — bez veľkej medzery navrchu */
.nb-sidebar-label + .nb-sidebar-sublabel { margin-top: 4px; }
.nb-sidebar-sublabel:first-child { margin-top: 0; padding-top: 0; }

/* ─── PROMPT LIBRARY list items ─────────────────────── */
.nb-pl-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.78);
  font-family: inherit;
  font-size: 11.5px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition: all 0.15s ease;
  position: relative;
}
.nb-pl-item:hover {
  background: rgba(0,212,170,0.06);
  border-color: rgba(0,212,170,0.3);
  color: #fff;
}
.nb-pl-item-text {
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  word-break: break-word;
}
.nb-pl-item-fav {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.nb-pl-item-fav:hover { color: #ffc857; }
.nb-pl-item-fav.is-favorited { color: #ffc857; }
.nb-pl-item-del {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.25);
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.nb-pl-item:hover .nb-pl-item-del { opacity: 1; }
.nb-pl-item-del:hover { color: #ff5e5e; }

.nb-pl-empty {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 8px 10px;
  font-style: italic;
  text-align: center;
  line-height: 1.45;
}

/* ─── PROMPT LIBRARY POPOVER (nad textareou) ─────────── */
.nb-pl-toggle-wrap {
  position: relative;
  display: inline-block;
}
.nb-pl-toggle {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}
.nb-pl-toggle:hover {
  background: rgba(0,212,170,0.12);
  border-color: rgba(0,212,170,0.4);
  color: #fff;
}
.nb-pl-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(20, 22, 28, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px;
  width: 380px;
  max-height: 460px;
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,0.7);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nb-pl-popover[hidden] { display: none; }
.nb-pl-popover-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nb-pl-popover-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 6px 2px;
}
.nb-pl-popover::-webkit-scrollbar { width: 6px; }
.nb-pl-popover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

/* ─── Model dropdown — Kling sub-menu ───────────────── */
.nb-model-dropdown-row {
  position: relative;
  display: block;
}
.nb-model-dropdown-row.has-submenu > .nb-model-dropdown-item::after {
  content: '▸';
  margin-left: auto;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  padding-left: 6px;
}
.nb-model-submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 6px);
  background: rgba(20, 22, 28, 0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 6px;
  min-width: 210px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  display: none;
  z-index: 1000;
}
/* Pridáme malú „mostíkovú" zónu medzi rodičom a submenu aby hover nepukol */
.nb-model-submenu::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 100%;
}
.nb-model-dropdown-row.has-submenu:hover > .nb-model-submenu,
.nb-model-submenu:hover {
  display: block;
}
.nb-model-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
}
.nb-model-submenu-item:hover {
  background: rgba(0,212,170,0.10);
  color: #fff;
}
.nb-model-submenu-item.active {
  background: rgba(0,212,170,0.12);
  color: #fff;
  font-weight: 600;
}
.nb-model-submenu-item-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  background: rgba(255,200,87,0.18);
  color: #ffc857;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.nb-model-submenu-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 6px;
}
.nb-model-submenu-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  padding: 6px 10px 2px;
}

/* ═══════════════════════════════════════════════
   GALLERY SIZE SLIDER (zoom out / in)
   ═══════════════════════════════════════════════ */
.nb-gallery-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nb-gallery-size-slider {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nb-gallery-size-slider .nb-size-icon {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  user-select: none;
}
.nb-gallery-size-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.nb-gallery-size-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 212, 170, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.nb-gallery-size-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.nb-gallery-size-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 212, 170, 0.6);
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════
   SUNO PAGE — track gallery cards
   ═══════════════════════════════════════════════════════════ */

.suno-gallery-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: none;
}
.suno-gallery-list::-webkit-scrollbar { display: none; }

.suno-track-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: border-color 0.2s, transform 0.15s;
}
.suno-track-card:hover {
  border-color: rgba(0,212,170,0.35);
  transform: translateY(-1px);
}

.suno-track-cover {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.suno-track-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.suno-track-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  opacity: 0.5;
}

.suno-track-play {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.95);
  color: #fff;
  border: none;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.15s, background 0.2s;
}
.suno-track-play:hover { transform: scale(1.1); background: #00d4aa; }

.suno-track-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.suno-track-title {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suno-track-meta {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

.suno-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 6px;
}

.suno-track-action {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
  font-family: inherit;
}
.suno-track-action:hover {
  background: rgba(0,212,170,0.12);
  border-color: rgba(0,212,170,0.45);
  color: #fff;
  transform: translateY(-1px);
}
.suno-track-action-del:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.5);
  color: #fff;
  transform: translateY(-1px);
}

/* Icon-only varianta — štvorec, väčšie SVG, čistý vzhľad */
.suno-action-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
}
.suno-action-icon svg {
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,0.85);
  transition: color 0.15s ease;
}
.suno-action-icon:hover svg {
  color: #fff;
}
.suno-action-icon.suno-track-action-del svg {
  color: rgba(255,255,255,0.7);
}
.suno-action-icon.suno-track-action-del:hover svg {
  color: #fff;
}

/* Favorite (srdiečko) — prázdne sivé, plné červené po kliku */
.suno-action-fav svg {
  color: rgba(255,255,255,0.7);
  transition: color 0.18s ease, transform 0.18s ease;
}
.suno-action-fav:hover svg {
  color: #ff6b8a;
  transform: scale(1.08);
}
.suno-action-fav.is-fav svg {
  color: #ef4444;
}
.suno-action-fav.is-fav:hover svg {
  color: #f87171;
}
.suno-action-fav.is-fav {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.35);
}
.suno-action-fav.is-fav:hover {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.55);
  transform: translateY(-1px);
}
@keyframes sunoFavPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.suno-action-fav.is-fav svg {
  animation: sunoFavPop 0.32s ease;
}

/* Info button — používa ikony/info.png */
.suno-action-info img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  opacity: 0.78;
  filter: brightness(0) invert(1);   /* biele tónovanie z čiernej PNG */
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  user-select: none;
}
.suno-action-info:hover img {
  opacity: 1;
  transform: scale(1.06);
}

/* MP3 button — ostáva textový, ale väčší */
.suno-action-mp3 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 14px;
}

/* Loading skeleton */
.suno-track-loading { opacity: 0.85; }
.suno-skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: sunoSkelShimmer 1.6s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suno-skel-spinner {
  font-size: 28px;
  animation: sunoSkelPulse 1.6s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suno-skel-spinner img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
@keyframes sunoSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes sunoSkelPulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.4; transform: scale(0.82); }
}

/* Pills row label */
.nb-row-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  align-self: center;
  margin-right: 4px;
}

/* Toggle (instrumental) */
.nb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  user-select: none;
}
.nb-toggle input[type="checkbox"] {
  appearance: none;
  width: 36px;
  height: 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.nb-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.nb-toggle input[type="checkbox"]:checked {
  background: rgba(0,212,170,0.9);
}
.nb-toggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

/* Single-line gloss input (Suno title atď.) — match nb-prompt-input štýl */
.nb-text-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 11px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.nb-text-input:focus {
  border-color: rgba(0, 212, 170, 0.4);
  background: rgba(0,0,0,0.4);
}
.nb-text-input::placeholder { color: rgba(255,255,255,0.3); }

/* ── Suno track loading: vinyl + progress ring + stop btn ── */
.suno-track-card.suno-track-loading {
  position: relative;
  opacity: 1;   /* prebíja .suno-track-loading { opacity: 0.85 } — chceme plný kontrast */
}

/* Cover container — rezim s progress ringom okolo platne */
.suno-cover-loading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);   /* žiadny shimmer skel */
  overflow: visible;
}

/* SVG progress ring — absolutne polohovaný cez celý cover */
.suno-progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.suno-progress-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 2.5;
}
.suno-progress-arc {
  fill: none;
  stroke: var(--accent, #00d4aa);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.4s ease-out, stroke 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(0, 212, 170, 0.45));
}

/* Wrapper okolo vinyl SVG — väčšia platňa, sedí tesne dovnútra ringu */
.suno-cover-vinyl-wrap {
  position: relative;
  width: 75%;
  height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.suno-cover-vinyl-wrap .suno-vinyl {
  width: 100%;
  height: 100%;
  display: block;
  animation: sunoVinylSpin 5s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
@keyframes sunoVinylSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ✓ overlay — skrytý, ukáže sa pri data-loading-done="1" */
.suno-cover-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--accent, #00d4aa);
  text-shadow: 0 0 16px rgba(0,212,170,0.5);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 2;
}

/* DONE state — pre prvú kartu po FIRST_SUCCESS */
.suno-track-card[data-loading-done="1"] .suno-cover-vinyl-wrap .suno-vinyl {
  animation-play-state: paused;
  opacity: 0.35;
  filter: none;
  transition: opacity 0.4s ease;
}
.suno-track-card[data-loading-done="1"] .suno-cover-check {
  opacity: 1;
  transform: scale(1);
}
.suno-track-card[data-loading-done="1"] .suno-progress-arc {
  stroke: var(--accent, #00d4aa);
  filter: drop-shadow(0 0 10px rgba(0,212,170,0.7));
}
.suno-track-card[data-loading-done="1"] .suno-track-meta {
  color: var(--accent, #00d4aa);
  font-weight: 600;
}

/* Percent text pod meta — tabular numerals pre stable šírku */
.suno-loading-pct {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.suno-track-card[data-loading-done="1"] .suno-loading-pct {
  color: rgba(0, 212, 170, 0.8);
}

/* Stop button na loading kartičke (top-right roh) */
.suno-track-stop {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.85);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.suno-track-stop:hover {
  background: #dc2626;
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.6);
}

/* Cover hotových tracks — kliknutím prehráva, jemný hover */
.suno-track-card:not(.suno-track-loading) .suno-track-cover {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.suno-track-card:not(.suno-track-loading) .suno-track-cover:hover {
  transform: scale(1.04);
  box-shadow: none;
}

/* Suno-specifické výšky pre Štýl a Text piesne */
/* Štýl — dosť veľký aby väčšina interpret-promptov vyšla bez scrollu,
   ale pri dlhých promptoch sa scroll povolí (predtým overflow:hidden blokoval). */
.suno-style-area {
  height: 140px !important;
  min-height: 140px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
}
.suno-lyrics-area {
  height: 160px !important;
  min-height: 160px !important;
  max-height: 220px !important;
}

/* Compact pill (used for vocal gender + model) */
.nb-pill {
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.nb-pill:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.nb-pill.is-active {
  background: rgba(0,212,170,0.15);
  border-color: rgba(0,212,170,0.5);
  color: #00d4aa;
}

/* ═══════════════════════════════════════════════════════════
   POSTAVY (CHARACTER GALLERY) — KROK 1 KOSTRA
   ═══════════════════════════════════════════════════════════ */

.postavy-container {
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.postavy-header {
  margin-bottom: 32px;
}

.postavy-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.postavy-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  max-width: 600px;
}

.postavy-empty {
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
}

.postavy-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.postavy-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}

.postavy-empty-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.postavy-create-btn {
  background: var(--accent, #00d4aa);
  color: #0a0a0a;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}

.postavy-create-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: none;
}

.postavy-create-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── POSTAVY: MODAL ──────────────────────────── */
.char-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.char-modal {
  background: linear-gradient(135deg, #1a1a1c, #131315);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.char-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.char-modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.char-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.char-modal-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}

.char-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .char-modal-grid { grid-template-columns: 1fr; }
}

/* ── POSTAVY: DROP ZONE ──────────────────────── */
.char-drop-zone {
  background: rgba(255,255,255,0.025);
  border: 1.5px dashed rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 220px;
  cursor: pointer;
  transition: all 0.2s;
}

.char-drop-zone:hover, .char-drop-zone.drag-over {
  background: rgba(0, 212, 170, 0.05);
  border-color: rgba(0, 212, 170, 0.4);
}

.char-drop-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.char-drop-title {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}

.char-drop-title a {
  color: var(--accent, #00d4aa);
  cursor: pointer;
  text-decoration: underline;
}

.char-drop-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

.char-drop-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.char-preview-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.char-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.char-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.char-preview-add {
  width: 64px;
  height: 64px;
  border: 1.5px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
}

.char-preview-add:hover {
  border-color: var(--accent, #00d4aa);
  color: var(--accent, #00d4aa);
}

/* ── POSTAVY: FORM ──────────────────────────── */
.char-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.char-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
  font-weight: 600;
}

.char-field input, .char-field select {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
}

.char-field input:focus, .char-field select:focus {
  outline: none;
  border-color: var(--accent, #00d4aa);
  background: rgba(0, 212, 170, 0.04);
}

.char-info-note {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}

.char-submit-btn {
  margin-top: auto;
  background: var(--accent, #00d4aa);
  color: #0a0a0a;
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.char-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: none;
}

.char-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── POSTAVY: LOADING STATE ────────────────── */
.postavy-loading {
  text-align: center;
  padding: 80px 24px;
}

.postavy-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--accent, #00d4aa);
  border-radius: 50%;
  margin: 0 auto 24px;
  animation: postavyspin 0.9s linear infinite;
}

@keyframes postavyspin {
  to { transform: rotate(360deg); }
}

.postavy-loading-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.postavy-loading-step {
  font-size: 13px;
  color: var(--accent, #00d4aa);
  margin-bottom: 16px;
}

.postavy-loading-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

/* ── POSTAVY KROK 3: HEADER s akciou ── */
.postavy-header-with-action {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.postavy-header-with-action .postavy-create-btn {
  flex-shrink: 0;
}

/* ── POSTAVY KROK 3: GALLERY GRID ── */
.char-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.char-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

.char-card:hover {
  border-color: rgba(0, 212, 170, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.char-card-image {
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
  position: relative;
}

.char-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: rgba(255,255,255,0.7);
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
}

.char-card:hover .char-card-delete {
  opacity: 1;
}

.char-card-delete:hover {
  background: #ef4444;
  color: #fff;
}

.char-card-meta {
  padding: 12px 14px;
}

.char-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.char-card-trigger {
  font-size: 11px;
  color: var(--accent, #00d4aa);
  font-family: 'SF Mono', Menlo, monospace;
}

/* ── POSTAVY KROK 3: MASTER PICKER ── */
.char-variants-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}

.char-variant {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.06);
  transition: all 0.2s;
  background: #111;
}

.char-variant:hover {
  border-color: var(--accent, #00d4aa);
  transform: translateY(-2px);
  box-shadow: none;
}

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

.char-variant-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.85));
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

.char-variant:hover .char-variant-overlay {
  opacity: 1;
}

.char-variant-badge {
  background: var(--accent, #00d4aa);
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.char-variant-failed {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
  cursor: default;
}

.char-variant-error {
  font-size: 12px;
  color: rgba(239, 68, 68, 0.7);
}

.char-picker-actions {
  margin-top: 24px;
  text-align: center;
}

.char-cancel-btn {
  background: transparent;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.char-cancel-btn:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* ── POSTAVY KROK 4: @mention dropdown — character items ── */
.nb-mention-item-character {
  border-left: 2px solid var(--accent, #00d4aa);
  padding-left: 8px;
}

.nb-mention-item-character img {
  border-radius: 50%;  /* okrúhly avatar pre postavy, ref images zostávajú square */
}

.nb-mention-item-character .nb-mention-label {
  color: var(--accent, #00d4aa);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   VIDEO ENGINE — Seedance 2.0 a budúce video generátory
   ═══════════════════════════════════════════════════════════ */

/* Aspect ikony pre 4:3, 3:4, 21:9 (doplnok k existujúcim) */
.nb-aspect-4-3  { width: 14px; height: 10px; border-radius: 2px; }
.nb-aspect-3-4  { width: 10px; height: 14px; border-radius: 2px; }
.nb-aspect-21-9 { width: 19px; height: 8px;  border-radius: 2px; }

/* Aspect row pre video — wrap pre 6 tlačidiel */
.vd-aspect-row {
  flex-wrap: wrap;
  gap: 6px;
}
.vd-aspect-btn {
  flex: 0 0 auto;
  min-width: 52px;
}

/* Duration buttons — rovnaké ako nb-count-btn */
.vd-duration-btn {
  font-weight: 700;
}

/* Tier picker — 2 karty vedľa seba */
.vd-tier-row {
  display: flex;
  gap: 8px;
}
.vd-tier-btn {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  color: #fff;
}
.vd-tier-btn:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.07);
}
.vd-tier-btn.active {
  border-color: var(--accent, #00d4aa);
  background: rgba(0, 212, 170, 0.1);
}
.vd-tier-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.vd-tier-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  line-height: 1.3;
}
.vd-tier-price {
  font-size: 11px;
  color: var(--accent, #00d4aa);
  font-weight: 600;
  margin-top: 2px;
}

/* Generate button — disabled stav */
.nb-generate-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
}
.nb-generate-btn:disabled:hover {
  transform: none;
}

/* Gallery — video item */
.vd-gallery-item {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.vd-thumb-placeholder {
  width: 100%;
  height: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: rgba(255,255,255,0.04);
}
.vd-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: rgba(255,255,255,0.9);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.vd-gallery-item:hover .vd-play-overlay {
  opacity: 1;
}
.vd-item-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 7px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  pointer-events: none;
}

/* Loading overlay — fullscreen nad studio */
.vd-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 10, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.vd-loading-box {
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(0, 212, 170, 0.3);
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.vd-loading-icon {
  font-size: 52px;
  animation: nbSkelPulse 1.4s ease-in-out infinite;
  line-height: 1;
}
.vd-loading-phase {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  min-height: 22px;
}
.vd-loading-timer {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent, #00d4aa);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.vd-loading-tip {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
  max-width: 280px;
}
.vd-loading-stop {
  margin-top: 6px;
  background: rgba(220, 38, 38, 0.15);
  border: 1.5px solid rgba(220, 38, 38, 0.5);
  color: #fc8181;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.vd-loading-stop:hover {
  background: rgba(220, 38, 38, 0.3);
  border-color: rgba(220, 38, 38, 0.8);
}

/* ── Resolution picker ── */
.vd-resolution-row {
  flex-wrap: wrap;
  gap: 6px;
}
.vd-resolution-btn {
  position: relative;
  font-weight: 700;
}
.vd-res-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 9px;
  background: var(--accent, #00d4aa);
  color: #0a0a0a;
  border-radius: 4px;
  padding: 1px 3px;
  font-weight: 800;
  line-height: 1.4;
}
.vd-res-disabled {
  opacity: 0.3;
  cursor: not-allowed !important;
}
.vd-res-disabled:hover {
  border-color: rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ── Advanced / Negative prompt ── */
.vd-advanced-toggle {
  padding-top: 0;
  gap: 0;
}
.vd-advanced-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  transition: color 0.2s;
}
.vd-advanced-btn:hover {
  color: rgba(255,255,255,0.8);
}
.vd-advanced-chevron {
  margin-left: auto;
  font-size: 10px;
}
.vd-advanced-section {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 4px;
}
.vd-neg-prompt {
  min-height: 52px;
  font-size: 12px !important;
}

/* ── Extended video badge ── */
.vd-extended-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(0, 212, 170, 0.85);
  color: #0a0a0a;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

/* ── Extend modal ── */
.vd-extend-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10,10,10,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.vd-extend-modal {
  background: rgba(18,18,18,0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 32px;
  width: min(480px, 92vw);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vd-extend-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.vd-extend-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.vd-extend-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vd-extend-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.vd-extend-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.vd-extend-confirm {
  flex: 1;
  font-size: 13px !important;
  padding: 10px 18px !important;
}

/* Lightbox — video player */
.vd-lightbox-video-wrap {
  max-width: min(90vw, 900px);
  max-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vd-lightbox-video {
  max-width: 100%;
  max-height: 58vh;
  border-radius: 10px;
  background: #000;
  outline: none;
}

/* ═══════════════════════════════════════════════════════════
   KLING MOTION CONTROL — upload zóny, orientation, preview
   ═══════════════════════════════════════════════════════════ */

/* Prompt textarea — vzdušná výška, využije voľný priestor */
#klingMotionView .nb-prompt-input {
  height: 110px;
  min-height: 90px;
  max-height: 140px;
}

/* Controls majú dosť voľného miesta — väčšie gapy a vzdušnejšie sekcie */
#klingMotionView .nb-section { gap: 8px; }
#klingMotionView .nb-prompt-hint { display: none; }

/* Väčšie upload zóny — vyplnia priestor a vyzerajú dôstojne */
#klingMotionView .km-upload-zone {
  height: 80px;
}
#klingMotionView .km-upload-filled img,
#klingMotionView .km-upload-filled video {
  width: 72px;
  height: 60px;
}

/* Vzdušnejšie tier buttons */
#klingMotionView .vd-tier-btn {
  padding: 12px 12px;
}

/* ── Upload zóna — kompaktný horizontálny layout ── */
.km-upload-zone {
  position: relative;
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  height: 60px;
  display: flex;
  align-items: center;
}
.km-upload-zone:hover {
  border-color: rgba(0, 212, 170, 0.45);
  background: rgba(0, 212, 170, 0.04);
}

/* Empty state — horizontal */
.km-upload-empty {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  pointer-events: none;
  width: 100%;
}
.km-upload-icon {
  font-size: 20px;
  line-height: 1;
  opacity: 0.5;
  flex-shrink: 0;
}
.km-upload-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.km-upload-label {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  line-height: 1.2;
}
.km-upload-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  line-height: 1.2;
}

/* Filled state — thumbnail left + info right */
.km-upload-filled {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}
.km-upload-filled img,
.km-upload-filled video {
  width: 56px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  display: block;
}
.km-upload-filled-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.km-upload-filled-name {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.km-upload-filled-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
}
.km-upload-delete {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.8);
  border: none;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.km-upload-delete:hover { background: #dc2626; }

/* Duration badge */
.km-duration-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent, #00d4aa);
}

/* ── Orientation picker ── */
.km-orient-row {
  display: flex;
  gap: 8px;
}
.km-orient-btn {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  color: #fff;
}
.km-orient-btn:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.07);
}
.km-orient-btn.active {
  border-color: var(--accent, #00d4aa);
  background: rgba(0, 212, 170, 0.1);
}
.km-orient-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.km-orient-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  line-height: 1.3;
}

/* Orientation warning */
.km-orient-warning {
  font-size: 10.5px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
  padding: 7px 10px;
  line-height: 1.5;
}
.km-orient-warning strong { color: #fde68a; }

/* ── Advanced: toggle + slider ── */
.km-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  user-select: none;
}
.km-toggle-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent, #00d4aa);
  cursor: pointer;
}
.km-slider-row {
  margin-top: 8px;
}
.km-slider {
  width: 100%;
  height: 4px;
  accent-color: var(--accent, #00d4aa);
  cursor: pointer;
  border-radius: 2px;
  margin-top: 4px;
}

/* Gallery grid má vlastný flex: 1 aby vyplnil zvyšok nb-gallery-panel */
.nb-gallery-panel .nb-gallery-grid {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   SUNO — Track details modal
   ═══════════════════════════════════════════════════════════ */

.suno-details-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.suno-details-overlay.suno-details-open { opacity: 1; }

.suno-details-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 10, 0.78);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.suno-details-modal {
  position: relative;
  background: linear-gradient(135deg, rgba(20,22,28,0.98) 0%, rgba(14,16,22,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: min(560px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(0, 212, 170, 0.06);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.suno-details-overlay.suno-details-open .suno-details-modal {
  transform: scale(1);
}

.suno-details-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.suno-details-close:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #fff;
}

/* Header — cover + title + pills */
.suno-details-header {
  display: flex;
  gap: 16px;
  padding: 24px 26px 18px 26px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: center;
}
.suno-details-cover {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.suno-details-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(255,255,255,0.4);
}
.suno-details-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.suno-details-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
  line-height: 1.25;
  letter-spacing: -0.01em;
  word-break: break-word;
}
.suno-details-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.suno-details-pill {
  font-size: 10.5px;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Body — sekcie */
.suno-details-body {
  padding: 18px 26px 26px 26px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.suno-details-body::-webkit-scrollbar { width: 6px; }
.suno-details-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.suno-details-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.suno-details-label {
  font-size: 10.5px;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.suno-details-content {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  word-break: break-word;
}
.suno-details-lyrics {
  white-space: pre-wrap;
  font-family: 'Space Grotesk', inherit;
  max-height: 320px;
  overflow-y: auto;
}
.suno-details-lyrics::-webkit-scrollbar { width: 5px; }
.suno-details-lyrics::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════
   SUNO MINI PLAYER — bottom-right floating pill (Spotify style)
   ═══════════════════════════════════════════════════════════ */
.suno-mini-player {
  position: fixed;
  bottom: 9px;
  right: 22px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: linear-gradient(135deg, rgba(22,24,30,0.96) 0%, rgba(14,16,22,0.96) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,212,170,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: sunoMiniSlideIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.suno-mini-player[hidden] { display: none; }
.suno-mini-player:hover {
  box-shadow:
    0 16px 48px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,212,170,0.18);
}

@keyframes sunoMiniSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Točiaci sa vinyl s coverom ako label v strede */
.suno-mini-vinyl-wrap {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}
.suno-mini-vinyl-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #2a2c34 0%, #15161b 60%, #0a0a0f 100%);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.1);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
/* Veľmi jemný outline kým hrá — len 1px ring, žiadny blur halo */
.suno-mini-player.is-playing .suno-mini-vinyl-disc {
  box-shadow:
    0 3px 10px rgba(0,0,0,0.5),
    0 0 0 1px rgba(167, 139, 250, 0.45);
}
.suno-mini-vinyl-grooves {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0px, transparent 2.5px,
      rgba(255,255,255,0.05) 2.5px, rgba(255,255,255,0.05) 3.5px);
  pointer-events: none;
}
/* Cover ako label v strede vinylu — vnútri disc, točí sa s ním */
.suno-mini-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 0 2.5px #0a0a0f;            /* center hole effect */
  z-index: 2;
}
.suno-mini-vinyl-wrap:hover .suno-mini-vinyl-disc {
  box-shadow:
    0 3px 10px rgba(0,0,0,0.5),
    0 0 0 2px rgba(0,212,170,0.7);
}

/* Rotácia vinylu kým hrá — cover NEnáslede vďaka separátnej pozícii */
.suno-mini-player.is-playing .suno-mini-vinyl-disc {
  animation: sunoMiniSpin 4s linear infinite;
}
@keyframes sunoMiniSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Info stĺpec (title + bars) */
.suno-mini-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;          /* nie clickable — len vinyl naviguje */
}
.suno-mini-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

/* Author "@username" pod titulkom — pop-star feeling, song je tvoj */
.suno-mini-author {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Akčné tlačidlá vpravo */
.suno-mini-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.suno-mini-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  font-family: inherit;
  padding: 0;
}
.suno-mini-play {
  background: var(--accent, #00d4aa);
  color: #fff;
  border-color: transparent;
}
.suno-mini-play:hover {
  transform: scale(1.1);
  box-shadow: none;
}
.suno-mini-close:hover {
  background: rgba(220,38,38,0.25);
  border-color: rgba(220,38,38,0.5);
  color: #fff;
}

/* Section markers v texte piesne — [Verse 1], [Chorus], [Bridge]… */
.suno-lyrics-section {
  display: inline-block;
  margin: 14px 0 6px 0;
  padding: 3px 10px;
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid rgba(0, 212, 170, 0.3);
  border-radius: 999px;
  color: var(--accent, #00d4aa);
  font-size: 11px;
  font-weight: 700;
  font-family: 'Space Grotesk', inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Prvá sekcia hneď na začiatku bez horného marginu */
.suno-details-lyrics > .suno-lyrics-section:first-child {
  margin-top: 0;
}

/* Empty state pre instrumental tracky */
.suno-details-lyrics-empty {
  color: rgba(255,255,255,0.4);
  font-style: italic;
  font-family: 'Inter', inherit;
}

/* ═══════════════════════════════════════════════════════════
   SUNO — Glass audio player (play/pause + seek bar)
   ═══════════════════════════════════════════════════════════ */
/* Clean player — single row, vertikálne vystredené play btn + seek + time */
.suno-player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 10px 0;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.suno-player.is-playing {
  background: linear-gradient(135deg, rgba(0,212,170,0.10) 0%, rgba(0,212,170,0.02) 100%);
  border-color: rgba(0,212,170,0.25);
  box-shadow: none;
}

.suno-player-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent, #00d4aa);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  padding: 0;
  box-shadow: none;
}
.suno-player-btn:hover {
  transform: scale(1.08);
  box-shadow: none;
}
.suno-player-btn:active { transform: scale(0.96); }
.suno-player-icon {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

/* Time display vpravo — kompaktný, monospace pre stabilné číslice */
.suno-player-time {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.suno-player-time-sep {
  opacity: 0.4;
  margin: 0 1px;
}
.suno-player-time-total {
  color: rgba(255,255,255,0.45);
}

/* ── Track title + rename ── */
.suno-track-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.suno-track-title-wrap .suno-track-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
.suno-track-rename-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s, color 0.15s;
}
.suno-track-card:hover .suno-track-rename-btn {
  opacity: 1;
}
.suno-track-rename-btn:hover {
  background: rgba(0,212,170,0.15);
  color: var(--accent, #00d4aa);
}
.suno-rename-input {
  width: 100%;
  background: rgba(0,212,170,0.08);
  border: 1.5px solid rgba(0,212,170,0.45);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.suno-rename-input:focus {
  border-color: var(--accent, #00d4aa);
  box-shadow: 0 0 0 3px rgba(0,212,170,0.18);
}

/* ── Actions row split (left = creation, right = utility) ── */
.suno-track-actions-left,
.suno-track-actions-right {
  display: flex;
  gap: 6px;
  align-items: center;
}
.suno-track-actions-right {
  margin-left: auto;
}

/* ── Prompt modal (Extend / Cover / Vocal Removal confirm) ── */
.suno-prompt-modal {
  width: min(520px, 92vw);
}
.suno-prompt-header {
  padding: 24px 26px 14px 26px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.suno-prompt-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.suno-prompt-subtitle {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.suno-prompt-subtitle strong {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.suno-prompt-fields {
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.suno-prompt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.suno-prompt-label {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.suno-prompt-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #fff;
  font-family: inherit;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.suno-prompt-input:focus {
  border-color: rgba(0,212,170,0.45);
  background: rgba(0,0,0,0.4);
}
.suno-prompt-hint-text {
  font-size: 10.5px;
  color: rgba(255,255,255,0.4);
  line-height: 1.4;
}
.suno-prompt-hint-text strong { color: var(--accent, #00d4aa); }
.suno-prompt-actions {
  padding: 14px 26px 22px 26px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.suno-prompt-cancel,
.suno-prompt-submit {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.suno-prompt-cancel {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.suno-prompt-cancel:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.suno-prompt-submit {
  background: var(--accent, #00d4aa);
  color: #fff;
}
.suno-prompt-submit:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

/* Suno — sidebar v štandardnej šírke (rovnako ako ostatné stránky) */
.suno-sidebar-artists .nb-sidebar-section { width: 100%; }

/* ── Search box (Spotify) ── */
.suno-search-row {
  position: relative;
  margin-bottom: 12px;
}
.suno-search-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #fff;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.suno-search-input::placeholder {
  color: rgba(255,255,255,0.35);
}
.suno-search-input:focus {
  border-color: rgba(0,212,170,0.45);
  background: rgba(0,212,170,0.05);
}

.suno-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(20,22,28,0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.suno-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.suno-search-result:last-child { border-bottom: none; }
.suno-search-result:hover {
  background: rgba(0,212,170,0.08);
}

.suno-search-result-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.08);
}
.suno-search-result-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.suno-search-result-initial {
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
  font-family: 'Space Grotesk', inherit;
}

.suno-search-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertikálne na úrovni stredu coveru */
  gap: 2px;
}
.suno-search-result-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suno-search-result-genres {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.suno-search-loading,
.suno-search-empty {
  padding: 14px;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
}

/* Skryť scrollbar v Suno sidebare — scroll funguje, len lišta nie je vidieť */
.suno-sidebar-artists {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.suno-sidebar-artists::-webkit-scrollbar { display: none; }  /* WebKit */

/* Jemný pulz pri hoveri / scrolovaní v paneli interpretov */
.suno-sidebar-artists:hover {
  animation: sunoSidebarPulse 2.4s ease-in-out infinite;
  border-color: rgba(0, 212, 170, 0.18);
}
@keyframes sunoSidebarPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(0,212,170,0.06),
                0 0 14px rgba(0,212,170,0.04);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(0,212,170,0.18),
                0 0 28px rgba(0,212,170,0.14);
  }
}

/* Bubble grid — 2 stĺpce, viac riadkov pod sebou */
.suno-artists-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 8px;
  padding-top: 6px;
}

.suno-artist-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease;
  font-family: inherit;
  min-width: 0;
}
.suno-artist-bubble:hover {
  background: rgba(255,255,255,0.04);
}

.suno-artist-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.1);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  flex-shrink: 0;
}
.suno-artist-bubble:hover .suno-artist-avatar {
  border-color: var(--accent, #00d4aa);
  transform: scale(1.06);
  box-shadow: none;
}
.suno-artist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.suno-artist-initial {
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  font-family: 'Space Grotesk', inherit;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.suno-artist-name {
  font-size: 10.5px;
  color: rgba(255,255,255,0.7);
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.suno-artist-bubble:hover .suno-artist-name {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   SUNO STUDIO — Extend / Cover / Stems modal (~700px centered)
   ═══════════════════════════════════════════════════════════ */
.suno-studio-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.suno-studio-overlay.suno-studio-open { opacity: 1; }

.suno-studio-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.suno-studio-modal {
  position: relative;
  width: min(700px, 94vw);
  max-height: 88vh;
  background: linear-gradient(135deg, rgba(22,24,30,0.98) 0%, rgba(14,16,22,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6),
              0 0 0 1px rgba(0,212,170,0.06);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.suno-studio-overlay.suno-studio-open .suno-studio-modal { transform: scale(1); }

.suno-studio-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 2;
}
.suno-studio-close:hover {
  background: rgba(220,38,38,0.25);
  color: #fff;
  border-color: rgba(220,38,38,0.4);
}

/* Header */
.suno-studio-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 28px 20px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.suno-studio-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,212,170,0.14) 0%, rgba(167,139,250,0.14) 100%);
  border: 1px solid rgba(0,212,170,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
}
.suno-studio-icon svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.suno-studio-header-info { flex: 1; min-width: 0; }
.suno-studio-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.suno-studio-track {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Operation tabs */
.suno-studio-ops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.suno-studio-op {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: left;
}
.suno-studio-op:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}
.suno-studio-op.active {
  background: rgba(0,212,170,0.12);
  border-color: rgba(0,212,170,0.45);
  box-shadow: 0 0 0 3px rgba(0,212,170,0.08);
}
.suno-studio-op-icon {
  flex-shrink: 0;
  line-height: 1;
  color: rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.suno-studio-op-icon svg {
  display: block;
}
.suno-studio-op.active .suno-studio-op-icon {
  color: var(--accent, #00d4aa);
}
.suno-studio-op:hover .suno-studio-op-icon {
  color: #fff;
}
.suno-studio-op.active:hover .suno-studio-op-icon {
  color: var(--accent, #00d4aa);
}
.suno-studio-op-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.suno-studio-op-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.suno-studio-op-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body — form / progress / success / error */
.suno-studio-body {
  padding: 22px 28px 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.suno-studio-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.suno-studio-label {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.suno-studio-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: #fff;
  font-family: inherit;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.suno-studio-input:focus {
  border-color: rgba(0,212,170,0.45);
  background: rgba(0,0,0,0.4);
}
.suno-studio-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
}

/* Vocal info */
.suno-studio-vocal-info {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 4px;
}
.suno-studio-vocal-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.suno-studio-vocal-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}
.suno-studio-vocal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.suno-studio-vocal-list li {
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}
.suno-studio-vocal-list strong { color: var(--accent, #00d4aa); }

/* Actions row */
.suno-studio-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.suno-studio-cancel,
.suno-studio-submit {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.suno-studio-cancel {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.suno-studio-cancel:hover {
  background: rgba(255,255,255,0.09);
  color: #fff;
}
.suno-studio-submit {
  background: var(--accent, #00d4aa);
  color: #fff;
}
.suno-studio-submit:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

/* Progress state */
.suno-studio-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 20px;
}
.suno-studio-progress-spinner {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sunoSkelPulse 1.6s ease-in-out infinite;
}
.suno-studio-progress-spinner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.suno-studio-progress-text {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.suno-studio-progress-time {
  font-size: 11.5px;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* Success / Error */
.suno-studio-success,
.suno-studio-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 8px 16px;
  text-align: center;
}
.suno-studio-success-icon { font-size: 38px; }
.suno-studio-success-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
}
.suno-studio-success-msg {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-width: 480px;
}

.suno-studio-error-icon { font-size: 32px; }
.suno-studio-error-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(248, 113, 113, 0.95);
  font-family: 'Space Grotesk', inherit;
}
.suno-studio-error-msg {
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-width: 480px;
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  word-break: break-word;
}

/* Seek bar — flex: 1 vyplní stred medzi play btn a časom */
.suno-player-seek {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: 0;
  transition: height 0.15s ease;
}
.suno-player-seek:hover { height: 6px; }
.suno-player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent, #00d4aa);
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.suno-player-seek::-webkit-slider-thumb:hover { transform: scale(1.25); }
.suno-player-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent, #00d4aa);
  box-shadow: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   VIDEO ENGINE — Mode Tiles (Kling sidebar)
   Vertikálne dlaždice s gradientom, ako LP video karty.
   ═══════════════════════════════════════════════════════════ */
.vd-mode-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px;
}

.vd-mode-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  font-family: inherit;
  text-align: left;
}
.vd-mode-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}

.vd-mode-tile-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(56,189,248,0.30) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(168,85,247,0.25) 0%, transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  transition: filter 0.25s ease, transform 0.5s ease;
}
.vd-mode-tile:hover .vd-mode-tile-bg {
  transform: scale(1.04);
}

/* Per-mode farebné variácie (jemné odlíšenie) */
.vd-mode-tile-flf .vd-mode-tile-bg {
  background:
    radial-gradient(circle at 25% 30%, rgba(56,189,248,0.35) 0%, transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(99,102,241,0.30) 0%, transparent 55%),
    linear-gradient(135deg, #0c1424 0%, #1a1d3a 100%);
}
.vd-mode-tile-elements .vd-mode-tile-bg {
  background:
    radial-gradient(circle at 30% 30%, rgba(168,85,247,0.35) 0%, transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(236,72,153,0.25) 0%, transparent 55%),
    linear-gradient(135deg, #15102e 0%, #2a103a 100%);
}
.vd-mode-tile-multishot .vd-mode-tile-bg {
  background:
    radial-gradient(circle at 30% 25%, rgba(244,114,182,0.30) 0%, transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(56,189,248,0.30) 0%, transparent 55%),
    linear-gradient(135deg, #1a0f2e 0%, #0c2236 100%);
}

.vd-mode-tile-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px 16px;
  z-index: 2;
  background: linear-gradient(to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.78) 50%,
    rgba(0,0,0,0.40) 85%,
    transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vd-mode-tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.1;
}

.vd-mode-tile-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  /* Sivobiely odtieň — emoji desaturované, jemne presvetlené */
  filter: grayscale(1) brightness(1.5) contrast(0.85) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.vd-mode-tile-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.vd-mode-tile-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
  margin-top: 8px;
}

/* Active state — outline + jemný glow */
.vd-mode-tile.active {
  border-color: var(--accent, #00d4aa);
  box-shadow: 0 0 0 1px var(--accent, #00d4aa);
}
.vd-mode-tile.active::after {
  content: '✓';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent, #00d4aa);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   VIDEO ENGINE — Multi-shot indicator (locked ON toggle)
   ═══════════════════════════════════════════════════════════ */
.vd-multishot-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(244,114,182,0.10) 0%, rgba(56,189,248,0.10) 100%);
  border: 1px solid rgba(244,114,182,0.25);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.vd-multishot-indicator::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(244,114,182,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.vd-multishot-icon {
  font-size: 16px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
  z-index: 1;
}
.vd-multishot-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  flex: 1;
  z-index: 1;
}
.vd-multishot-toggle {
  width: 36px;
  height: 20px;
  background: var(--accent, #00d4aa);
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  cursor: not-allowed;
  opacity: 0.95;
  z-index: 1;
}
.vd-multishot-toggle.is-locked::after {
  content: '🔒';
  position: absolute;
  top: -7px;
  right: -8px;
  font-size: 10px;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.vd-multishot-knob {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}
.vd-multishot-status {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent, #00d4aa);
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   VIDEO ENGINE — Video upload (O1 Edit / O1 Reference)
   ═══════════════════════════════════════════════════════════ */
.vd-video-upload {
  position: relative;
  width: 100%;
  border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.vd-video-upload:hover {
  border-color: rgba(0,212,170,0.5);
  background: rgba(0,212,170,0.04);
}
.vd-video-upload-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.vd-video-upload-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,212,170,0.15);
  color: var(--accent, #00d4aa);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vd-video-upload-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vd-video-upload-label {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
}
.vd-video-upload-hint {
  font-size: 10.5px;
  color: rgba(255,255,255,0.5);
  line-height: 1.2;
}
.vd-video-upload-filled {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}
.vd-video-upload-filled video {
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  background: #000;
}
.vd-video-upload-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vd-video-upload-name {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-video-upload-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.vd-video-upload-dur {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(0,212,170,0.15);
  color: var(--accent, #00d4aa);
  border-radius: 6px;
  font-weight: 700;
}
.vd-video-upload-delete {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.vd-video-upload-delete:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.5);
  color: #fff;
}

/* Single-line rotating tip pod promptom — kompaktný */
.nb-prompt-hint em {
  color: rgba(167,139,250,0.9);
  font-style: normal;
  font-weight: 500;
}
.nb-prompt-hint code {
  display: inline-block;
  padding: 0 5px;
  background: rgba(0,212,170,0.12);
  color: rgba(0,212,170,0.95);
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-size: 10.5px;
}
.nb-prompt-tip-bullet {
  color: rgba(249,115,22,0.9);
  margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════
   🔥 ENHANCE TIP BANNER — vrch každej generation stránky
   ═══════════════════════════════════════════════════════════ */
.nb-enhance-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg,
    rgba(255,107,53,0.08) 0%,
    rgba(249,115,22,0.06) 50%,
    rgba(239,68,68,0.05) 100%);
  border: 1px solid rgba(249,115,22,0.22);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  position: relative;
  overflow: hidden;
}
.nb-enhance-tip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(249,115,22,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.nb-enhance-tip-icon {
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(249,115,22,0.4));
  z-index: 1;
}
.nb-enhance-tip-text {
  z-index: 1;
  position: relative;
}
.nb-enhance-tip-text strong {
  color: #fff;
  font-weight: 700;
}
.nb-enhance-tip-text .nb-fire-inline {
  display: inline-block;
  padding: 1px 7px;
  background: linear-gradient(135deg, #ff6b35 0%, #f97316 50%, #ef4444 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: 1px;
  margin: 0 2px;
  box-shadow: 0 2px 6px rgba(249,115,22,0.4);
}

/* ═══════════════════════════════════════════════════════════
   🔥 FIRE BUTTON — Enhance prompt cez Claude
   ═══════════════════════════════════════════════════════════ */
.nb-prompt-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.nb-prompt-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nb-prompt-fire {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: linear-gradient(135deg, #ff6b35 0%, #f97316 50%, #ef4444 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease;
  font-family: inherit;
}
.nb-prompt-fire:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(249,115,22,0.5);
}
.nb-prompt-fire:active {
  transform: translateY(0);
}
.nb-prompt-fire:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}
.nb-prompt-fire-spinner {
  display: inline-block;
  animation: nbFireSpin 1.2s linear infinite;
}
@keyframes nbFireSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.nb-prompt-undo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.nb-prompt-undo:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}

/* HOT badge na mode tiles (rovnaký style ako na home cards) */
.vd-mode-tile-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.15em;
  border-radius: 999px;
  z-index: 4;
  box-shadow: 0 4px 12px rgba(239,68,68,0.4);
  pointer-events: none;
}
/* Skry HOT badge keď je dlaždica aktívna (✓ je na rovnakej pozícii) */
.vd-mode-tile.active .vd-mode-tile-badge {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   VIDEO ENGINE — Audio toggle
   ═══════════════════════════════════════════════════════════ */
.vd-audio-toggle {
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.vd-audio-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.vd-audio-toggle-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.vd-audio-toggle-label input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.vd-audio-toggle-label input[type="checkbox"]:checked {
  background: var(--accent, #00d4aa);
}
.vd-audio-toggle-label input[type="checkbox"]:checked::before {
  transform: translateX(16px);
}
.vd-audio-toggle-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.vd-audio-toggle-icon { font-size: 14px; }
.vd-audio-toggle-meta {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   FILMOVÉ ŠTÚDIO (Cinematic Studio)
   ───────────────────────────────────────────────────────────
   Prefix .cs-* všade. Reuse design tokenov (--accent, --glass-bg,
   --glass-border, --radius). Žiadne inline styles v JS rendereroch.
   ═══════════════════════════════════════════════════════════ */

/* cinematicStudioView je flex child v body (vedľa header) — existing pattern.
   body má overflow: hidden, takže scroll musí žiť vnútri view. View je flex
   column s overflow: hidden, content (list / editor) vypĺňa s flex:1 a má
   vlastnú scrollable area. */
#cinematicStudioView {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg, #0a0a0f);
  color: var(--text-primary, #f0f0f5);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── PROJECT LIST SCREEN ───────────────────────────────── */
/* Scrollable area — fill parent (cinematicStudioView) a overflow-y auto pre
   dlhé zoznamy projektov. min-height: 0 je kritické vo flex containeri. */
.cs-list-screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 60px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  /* Full-width layout — children sa nestriktujú na 1200px box. */
}
.cs-list-screen > * {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0;
}
.cs-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.cs-list-header-text {
  flex: 1;
  min-width: 0;
}
.cs-list-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  color: var(--text-primary, #f0f0f5);
}
.cs-list-subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, rgba(240,240,245,0.5));
  max-width: 560px;
  margin: 0;
}

/* Empty state — centered create CTA, žiadny grid */
.cs-list-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}
.cs-create-card-large {
  width: min(420px, 90%);
  min-height: 240px;
  padding: 40px;
  font-size: 16px;
}

/* Standard grid — create card + project cards */
.cs-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* CREATE CARD — distinct accent treatment vs project cards */
.cs-create-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 4 / 5;
  min-height: 220px;
  padding: 24px;
  background: var(--accent-dim, rgba(0,212,170,0.15));
  border: 2px dashed var(--accent, #00d4aa);
  border-radius: var(--radius, 16px);
  color: var(--accent, #00d4aa);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.cs-create-card:hover {
  background: rgba(0, 212, 170, 0.22);
  border-color: rgba(0, 212, 170, 0.85);
  transform: translateY(-2px);
}
.cs-create-card-plus {
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent, #00d4aa);
}
.cs-create-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cs-create-card-sub {
  font-size: 12px;
  color: rgba(0, 212, 170, 0.7);
  font-weight: 500;
}

/* PROJECT CARD */
.cs-card {
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 220px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius, 16px);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
}
.cs-card:hover {
  background: var(--glass-hover, rgba(255,255,255,0.07));
  border-color: rgba(0, 212, 170, 0.35);
  transform: translateY(-2px);
}
.cs-card-thumb {
  flex: 1 1 auto;
  min-height: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.35);
}
.cs-card-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.18);
}
.cs-card-body {
  flex: 0 0 auto;
  padding: 14px 16px 16px;
  background: rgba(10, 10, 15, 0.72);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-card-meta {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary, rgba(240,240,245,0.5));
  letter-spacing: 0.04em;
}
.cs-card-meta-sep {
  opacity: 0.4;
}
.cs-card-time {
  font-size: 11px;
  color: var(--text-muted, rgba(240,240,245,0.3));
}

/* Delete × — visible iba na hover karty */
.cs-card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
  z-index: 2;
}
.cs-card:hover .cs-card-delete {
  opacity: 1;
  transform: scale(1);
}
.cs-card-delete:hover {
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  border-color: rgba(239, 68, 68, 0.9);
}

/* ─── NEW PROJECT MODAL ─────────────────────────────────── */
.cs-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
}
.cs-modal-overlay.is-visible {
  opacity: 1;
}
.cs-modal {
  width: min(90vw, 520px);
  background: rgba(15, 20, 28, 0.98);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius, 16px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.cs-modal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-primary, #f0f0f5);
}
.cs-modal-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.15s;
}
.cs-modal-close:hover {
  color: #fff;
}
.cs-modal-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-modal-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary, rgba(240,240,245,0.5));
}
/* Modal label modifiers — voliteľný marker (sivý pill) + Director Brain badge (teal pill).
   Použité v Krok 2 (Postavy) — fotky sú teraz voliteľné, popis prichádza z AI návrhu. */
.cs-modal-label-optional {
  margin-left: 6px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-size: 10px;
  color: rgba(240, 240, 245, 0.5);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cs-modal-label-badge {
  margin-left: 6px;
  padding: 2px 7px;
  background: rgba(0, 212, 170, 0.15);
  color: #00d4aa;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.cs-modal-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  color: var(--text-primary, #f0f0f5);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.cs-modal-input:focus {
  outline: none;
  border-color: var(--accent, #00d4aa);
  background: rgba(0, 0, 0, 0.5);
}
.cs-modal-aspect-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Style preset picker — 3×2 grid s 6 presetmi (photoreal / cinematic / Pixar /
   cartoon / anime / auto). Aktívna karta má teal border + tinted background. */
.cs-style-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.cs-style-btn {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: rgba(240, 240, 245, 0.7);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cs-style-btn:hover {
  background: var(--glass-hover, rgba(255,255,255,0.07));
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-primary, #f0f0f5);
}
.cs-style-btn-active {
  background: rgba(0, 212, 170, 0.1);
  border-color: rgba(0, 212, 170, 0.5);
  color: var(--text-primary, #f0f0f5);
}
.cs-style-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.cs-style-sub {
  font-size: 11px;
  color: rgba(240, 240, 245, 0.4);
  line-height: 1.3;
}
.cs-style-btn-active .cs-style-sub {
  color: rgba(240, 240, 245, 0.6);
}
@media (max-width: 540px) {
  .cs-style-picker {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cs-modal-aspect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  color: var(--text-secondary, rgba(240,240,245,0.5));
  font-family: inherit;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cs-modal-aspect:hover {
  background: var(--glass-hover, rgba(255,255,255,0.07));
  border-color: rgba(0, 212, 170, 0.35);
}
.cs-modal-aspect-active {
  background: var(--accent-dim, rgba(0,212,170,0.15));
  border-color: var(--accent, #00d4aa);
  color: var(--accent, #00d4aa);
}
.cs-modal-aspect-glyph {
  background: currentColor;
  opacity: 0.6;
  border-radius: 2px;
}
.cs-modal-aspect-glyph-16-9 { width: 32px; height: 18px; }
.cs-modal-aspect-glyph-9-16 { width: 18px; height: 32px; }
.cs-modal-aspect-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.cs-modal-aspect-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cs-modal-hint {
  font-size: 11px;
  color: var(--text-muted, rgba(240,240,245,0.3));
  line-height: 1.4;
}
.cs-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px;
  border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}

/* ─── BUTTONS (shared) ──────────────────────────────────── */
.cs-btn {
  padding: 10px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
  border: 1px solid transparent;
}
.cs-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cs-btn-primary {
  background: var(--accent, #00d4aa);
  color: #0a0a0f;
  border-color: var(--accent, #00d4aa);
}
.cs-btn-primary:hover:not(:disabled) {
  background: rgba(0, 212, 170, 0.85);
  box-shadow: none;
}
.cs-btn-ghost {
  background: transparent;
  color: var(--text-secondary, rgba(240,240,245,0.5));
  border-color: var(--glass-border, rgba(255,255,255,0.08));
}
.cs-btn-ghost:hover:not(:disabled) {
  background: var(--glass-hover, rgba(255,255,255,0.07));
  color: var(--text-primary, #f0f0f5);
}
.cs-btn-run {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  color: #fff;
  border-color: transparent;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 10px 20px;
}
.cs-btn-run:hover:not(:disabled) {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   CINEMATIC STUDIO — COMPACT EDITOR SHELL
   ───────────────────────────────────────────────────────────
   Kompaktný chrome — ~140px namiesto pôvodných ~520px:
     • cs-topbar     ~50px  — back link + title + meta + mode + RUN + export icon
     • autopilot-bar ~varies (iba ak beží)
     • cs-stepper    ~50px  — 7 compact step pills (number + label, žiadne ikony)
     • cs-step-content — flex:1, jediná scrollable area
     • cs-floating-next — fixed bottom-right (nahrádza sticky footer)
   ═══════════════════════════════════════════════════════════ */

.cs-editor-screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  gap: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  position: relative;             /* anchor pre cs-floating-next */
}

/* ─── SLIM TOPBAR ───────────────────────────────────────── */
.cs-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.cs-topbar-back {
  color: rgba(240, 240, 245, 0.5);
  cursor: pointer;
  transition: color 0.15s ease;
  user-select: none;
}
.cs-topbar-back:hover { color: #f0f0f5; }
.cs-topbar-divider {
  color: rgba(240, 240, 245, 0.2);
}
.cs-topbar-projname {
  font-weight: 600;
  color: #f0f0f5;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.cs-topbar-meta {
  color: rgba(240, 240, 245, 0.4);
  font-size: 12px;
  white-space: nowrap;
}
.cs-topbar-spacer { flex: 1; }

/* MODE TOGGLE — kompaktný (in topbar) */
.cs-mode-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 2px;
  gap: 0;
}
.cs-mode-toggle button {
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  color: rgba(240, 240, 245, 0.5);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-mode-toggle button:hover { color: #f0f0f5; }
.cs-mode-toggle button.active {
  background: rgba(0, 212, 170, 0.15);
  color: #00d4aa;
}
/* Legacy alias (cs-mode-btn / cs-mode-btn-active) — pre prípadné cudzie volania.
   Nový kód používa nested `.cs-mode-toggle button.active` cez triedu `active`. */
.cs-mode-btn-active {
  background: rgba(0, 212, 170, 0.15);
  color: #00d4aa;
}

/* RUN button — kompaktný oranžový gradient */
.cs-run-btn {
  background: linear-gradient(135deg, #ff6b35, #ff4747);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cs-run-btn:hover:not(:disabled) {
  box-shadow: 0 0 14px rgba(255, 107, 53, 0.5);
  transform: translateY(-1px);
}
.cs-run-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Compact icon button (export / future actions) */
.cs-topbar-icon {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  padding: 6px 10px;
  border-radius: 14px;
  cursor: pointer;
  color: rgba(240, 240, 245, 0.6);
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-topbar-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f0f0f5;
}

/* ─── COMPACT STEPPER (no icons) ─────────────────────────── */
.cs-stepper {
  display: flex;
  gap: 6px;
  padding: 10px 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  overflow-x: auto;
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
}
.cs-step {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  color: rgba(240, 240, 245, 0.5);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.cs-step:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f0f0f5;
  transform: none;
}
.cs-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 1;
  flex-shrink: 0;
  color: inherit;
}
.cs-step-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.cs-step-check {
  color: #00d4aa;
  font-size: 12px;
  margin-left: auto;
  flex-shrink: 0;
  position: static;        /* override predošlý absolute placement */
  top: auto;
  right: auto;
}
.cs-step.done,
.cs-step-done {
  color: rgba(0, 212, 170, 0.7);
  background: rgba(0, 212, 170, 0.06);
  border-color: rgba(0, 212, 170, 0.18);
}
.cs-step.done .cs-step-num,
.cs-step-done .cs-step-num {
  background: rgba(0, 212, 170, 0.15);
  color: #00d4aa;
}
.cs-step.active,
.cs-step-active {
  background: rgba(0, 212, 170, 0.08);
  border-color: rgba(0, 212, 170, 0.4);
  color: #f0f0f5;
  padding: 8px 12px;          /* reset z predošlého padding-compensation */
}
.cs-step.active .cs-step-num,
.cs-step-active .cs-step-num {
  background: #00d4aa;
  color: #0a0a0f;
  opacity: 1;
}
.cs-step.pending,
.cs-step-pending {
  opacity: 0.7;
}
/* Hide any leftover icons z predošlého stepperu */
.cs-step-icon { display: none; }

/* ─── STEP CONTENT — SCROLLABLE AREA ───────────────────── */
.cs-step-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 60px 100px;    /* bottom = miesto pre floating button */
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
}
.cs-step-content > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ─── STEP CONTENT INLINE HEAD ───────────────────────────
   Náhrada za predošlé veľké step headery — kompaktný inline row:
   TITLE [✓ HOTOVO] · meta            spacer            [⟲ Action]
   ──────────────────────────────────────────────────────── */
.cs-step-content-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  flex-wrap: wrap;
}
.cs-step-content-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  color: #f0f0f5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}
.cs-step-content-badge {
  background: rgba(0, 212, 170, 0.15);
  color: #00d4aa;
  padding: 3px 9px;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cs-step-content-meta {
  color: rgba(240, 240, 245, 0.4);
  font-size: 12px;
}
.cs-step-content-spacer { flex: 1; }
.cs-step-content-action {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(240, 240, 245, 0.7);
  font-family: inherit;
  font-size: 12px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-step-content-action:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f0f0f5;
}

/* ─── Placeholder card (kroky bez modulu) ────────────────── */
.cs-step-placeholder {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  min-height: 50vh;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius, 16px);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cs-step-placeholder-icon {
  font-size: 56px;
  line-height: 1;
  opacity: 0.85;
}
.cs-step-placeholder-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--text-primary, #f0f0f5);
}
.cs-step-placeholder-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, rgba(240,240,245,0.5));
  margin: 0;
}
.cs-step-placeholder-desc strong {
  color: var(--text-primary, #f0f0f5);
  font-weight: 600;
}
.cs-step-placeholder-hint {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted, rgba(240,240,245,0.3));
  margin: 0;
  max-width: 480px;
}

/* ─── FLOATING NEXT BUTTON (nahrádza sticky footer) ──────── */
.cs-floating-next {
  position: fixed;
  bottom: 24px;
  right: 32px;
  background: #00d4aa;
  color: #0a0a0f;
  border: none;
  padding: 12px 20px;
  border-radius: 24px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 100;
}
.cs-floating-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.cs-floating-finish {
  background: linear-gradient(135deg, #ff6b35, #ff4747);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.cs-floating-finish:hover {
  box-shadow: 0 12px 28px rgba(255, 107, 53, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ─── EDITOR FOOTER (legacy — už sa nepoužíva) ───────────── */
/* HTML editor screen už nerenderuje cs-editor-footer (nahradené cs-floating-next).
   Pravidlá necháme pre prípadné externé reference, ale display: none aby sa
   nevynáral žiadny zvyšok ak by sa náhodou znova objavil. */
.cs-editor-footer {
  display: none;
}

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 900px) {
  .cs-topbar {
    padding: 10px 20px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cs-topbar-projname { max-width: 180px; }
  .cs-topbar-meta { font-size: 11px; }
  .cs-stepper {
    padding: 10px 20px;
    gap: 4px;
  }
  .cs-step {
    padding: 7px 8px;
    gap: 6px;
  }
  .cs-step-label {
    font-size: 10px;
  }
  .cs-step-content {
    padding: 16px 20px 100px;
  }
  .cs-list-screen {
    padding: 24px 20px 60px;
  }
  .cs-floating-next {
    right: 16px;
    bottom: 16px;
    padding: 10px 18px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   FILMOVÉ ŠTÚDIO — KROK 1 (SKRIPT)
   ───────────────────────────────────────────────────────────
   3 stavy: Empty (textarea + CTA), Generating (overlay), Done
   (analysis + script editor + scenes breakdown). Plus Error state.
   Riadi sa cez _step1UI v cinematic-studio-view.js.
   ═══════════════════════════════════════════════════════════ */

.cs-step1 {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Pri done state nech step-content card nemá centered placeholder padding —
   dáme priestor pre viacero komponentov pod sebou. */
/* (Pôvodný :has() override pre step 1 layout je odstránený — .cs-step-content
   už nie je flex-center kontajner, je to scrollable area s natural flow.) */

.cs-step1-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-step1-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--text-primary, #f0f0f5);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cs-step1-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(0, 212, 170, 0.18);
  border: 1px solid rgba(0, 212, 170, 0.45);
  border-radius: 999px;
  color: var(--accent, #00d4aa);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cs-step1-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, rgba(240,240,245,0.5));
  margin: 0;
  max-width: 640px;
}
.cs-step1-intro strong {
  color: var(--text-primary, #f0f0f5);
  font-weight: 600;
}

/* ─── STATE A: Textarea + CTA ───────────────────────────── */
.cs-step1-textarea {
  width: 100%;
  min-height: 200px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  color: var(--text-primary, #f0f0f5);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.cs-step1-textarea:focus {
  outline: none;
  border-color: var(--accent, #00d4aa);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.12);
}
.cs-step1-textarea::placeholder {
  color: rgba(240, 240, 245, 0.25);
  font-style: italic;
}

.cs-step1-cta-row {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}
.cs-step1-button-enhance {
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--accent, #00d4aa) 0%, #06b6d4 100%);
  color: #0a0a0f;
  border: none;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cs-step1-button-enhance:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: none;
}
.cs-step1-button-enhance:active:not(:disabled) {
  transform: translateY(0);
}
.cs-step1-button-enhance:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── STATE B: Loading overlay ──────────────────────────── */
.cs-loading-overlay {
  position: absolute;
  inset: -20px;
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(8px);
  border-radius: var(--radius, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.cs-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px;
  text-align: center;
}
.cs-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-loading-msg {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-primary, #f0f0f5);
  transition: opacity 0.2s ease, transform 0.2s ease;
  min-height: 22px;
}
.cs-loading-msg.is-fading {
  opacity: 0;
  transform: translateY(-3px);
}
.cs-loading-cancel {
  margin-top: 4px;
  padding: 7px 18px;
  font-size: 12px;
}

/* ─── Krok 1 polished sections (script-section / collapsible / copy) ─────
   Pridané v Fix Krok 1 UI Polish — analýza ako key-value rows, raw/cinematic
   script ako collapsible boxy s "Kopírovať" tlačidlom, scény ako card list.
*/
.cs-script-section {
  margin-bottom: 20px;
}
.cs-script-section-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(0, 212, 170, 0.7);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cs-analysis-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.cs-analysis-row:last-child { border-bottom: none; }
.cs-analysis-key {
  font-size: 11px;
  color: rgba(240, 240, 245, 0.5);
  font-weight: 500;
  padding-top: 1px;
  letter-spacing: 0.03em;
}
.cs-analysis-value {
  font-size: 13px;
  color: var(--text-primary, #f0f0f5);
  font-weight: 500;
  line-height: 1.45;
}

/* Collapsible boxy — header s arrow + title + spacer + akcia, body s max-height
   transition. Default collapsed (max-height: 0). `.expanded` triggers open. */
.cs-collapsible {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.cs-collapsible-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.cs-collapsible-header:hover {
  background: rgba(255, 255, 255, 0.02);
}
.cs-collapsible-icon {
  font-size: 10px;
  color: rgba(240, 240, 245, 0.4);
  transition: transform 0.2s ease;
  width: 12px;
  display: inline-block;
  text-align: center;
}
.cs-collapsible.expanded .cs-collapsible-icon {
  transform: rotate(90deg);
}
.cs-collapsible-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-primary, #f0f0f5);
  text-transform: uppercase;
}
.cs-collapsible-spacer { flex: 1; }
.cs-collapsible-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.cs-collapsible.expanded .cs-collapsible-body {
  max-height: 1200px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.cs-script-pre {
  padding: 16px;
  margin: 0;
  font-family: 'Courier New', 'Courier', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(240, 240, 245, 0.8);
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 500px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.18);
}

/* Copy button — teal accent, flash to "Skopírované" cez .copied class */
.cs-btn-copy {
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.22);
  color: #00d4aa;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cs-btn-copy:hover {
  background: rgba(0, 212, 170, 0.15);
  border-color: rgba(0, 212, 170, 0.4);
}
.cs-btn-copy.copied {
  background: rgba(0, 212, 170, 0.25);
  border-color: rgba(0, 212, 170, 0.5);
  color: #fff;
}

/* ─── STATE C: Analysis card (legacy) ───────────────────── */
.cs-analysis-card {
  padding: 18px 20px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-analysis-card-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(240,240,245,0.4));
}
.cs-analysis-summary {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary, #f0f0f5);
}
.cs-analysis-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.cs-analysis-grid dt {
  color: var(--text-secondary, rgba(240,240,245,0.55));
  font-weight: 500;
  letter-spacing: 0.04em;
}
.cs-analysis-grid dd {
  margin: 0;
  color: var(--text-primary, #f0f0f5);
  font-weight: 500;
}

/* ─── STATE C: Cinematic script editor ──────────────────── */
.cs-script-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-script-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cs-script-editor-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(240,240,245,0.4));
}
.cs-btn-small {
  padding: 6px 14px;
  font-size: 12px;
}
.cs-script-editor {
  width: 100%;
  min-height: 140px;        /* znížené zo 200 — kompaktnejší editor, viac priestoru pre scenes */
  max-height: 320px;        /* cap aby textarea nevypchala celú viewport pri veľkom scripte */
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  color: var(--text-primary, #f0f0f5);
  font-family: 'Courier New', 'SF Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  white-space: pre-wrap;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cs-script-editor:focus {
  outline: none;
  border-color: var(--accent, #00d4aa);
  box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.12);
}

/* ─── STATE C: Scenes breakdown ─────────────────────────── */
.cs-scenes-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-scenes-empty {
  padding: 18px;
  text-align: center;
  color: var(--text-muted, rgba(240,240,245,0.4));
  font-size: 13px;
  font-style: italic;
  border: 1px dashed var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
}
.cs-scene-card {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  border-left: 3px solid rgba(0, 212, 170, 0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-scene-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-scene-letter {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent, #00d4aa);
  text-transform: uppercase;
}
.cs-scene-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
}
.cs-scene-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, rgba(240,240,245,0.55));
}

.cs-shot-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border, rgba(255,255,255,0.06));
}
.cs-shot-list-empty {
  font-size: 12px;
  color: var(--text-muted, rgba(240,240,245,0.35));
  font-style: italic;
  padding: 4px 0;
}
.cs-shot-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 4px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary, rgba(240,240,245,0.65));
  cursor: default;
  transition: background 0.15s ease;
}
.cs-shot-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.cs-shot-bullet {
  color: rgba(0, 212, 170, 0.65);
  font-size: 10px;
  flex-shrink: 0;
}
.cs-shot-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #f0f0f5);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cs-shot-type {
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #00d4aa);
  padding: 1px 6px;
  background: rgba(0, 212, 170, 0.1);
  border-radius: 4px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.cs-shot-sep {
  color: var(--text-muted, rgba(240,240,245,0.3));
  flex-shrink: 0;
}
.cs-shot-desc {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Sanity warning bar (totalShots > 12) ──────────────── */
.cs-warning-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: var(--radius-sm, 10px);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(252, 211, 77, 0.95);
}
.cs-warning-icon {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}
.cs-warning-text {
  flex: 1;
}
.cs-warning-text strong {
  color: #fff;
}
.cs-warning-link {
  color: rgba(252, 211, 77, 1);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cs-warning-link:hover {
  color: #fff;
}

/* ─── ERROR STATE ───────────────────────────────────────── */
.cs-error-card {
  width: 100%;
  max-width: 520px;
  margin: 24px auto;
  padding: 32px 28px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.cs-error-icon {
  width: 56px;
  height: 56px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #fca5a5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 300;
}
.cs-error-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: 0.04em;
}
.cs-error-msg {
  font-size: 13px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  margin: 0;
  max-width: 420px;
  line-height: 1.5;
}
.cs-error-detail {
  font-size: 12px;
  color: var(--text-muted, rgba(240,240,245,0.4));
  margin: 4px 0 0;
  line-height: 1.5;
}
.cs-error-detail-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text-muted, rgba(240,240,245,0.4));
  line-height: 1.7;
}
.cs-error-detail-list li::before {
  content: '• ';
  color: rgba(239, 68, 68, 0.6);
}
.cs-error-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 720px) {
  .cs-step1 {
    gap: 16px;
  }
  .cs-step1-textarea,
  .cs-script-editor {
    min-height: 160px;
    font-size: 13px;
  }
  .cs-shot-row {
    flex-wrap: wrap;
  }
  .cs-shot-desc {
    width: 100%;
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════
   FILMOVÉ ŠTÚDIO — KROKY 2-5 (Storyboard, Postavy, Rekvizity, Prostredie)
   ───────────────────────────────────────────────────────────
   Shared asset gallery + step-specific layouts. Prefix .cs-* všade,
   reuse design tokens.
   ═══════════════════════════════════════════════════════════ */

/* ─── KROK 2: STORYBOARD ─────────────────────────────────── */
.cs-storyboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
}
.cs-storyboard-toolbar-status {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-secondary, rgba(240,240,245,0.55));
}
.cs-storyboard-fail {
  color: #ef4444;
  font-weight: 600;
}

/* Storyboard SHEET — single-image preview blok nad gridom per-shot kariet. */
.cs-storyboard-sheet-wrap {
  margin-bottom: 20px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 14px;
}
.cs-storyboard-sheet-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.cs-storyboard-sheet-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 212, 170, 0.8);
}
.cs-storyboard-sheet-meta {
  font-size: 11px;
  color: rgba(240, 240, 245, 0.4);
}
.cs-storyboard-sheet-img {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 8px;
  background: #1a1a22;
  cursor: zoom-in;
  display: block;
  transition: transform 0.2s ease;
}
.cs-storyboard-sheet-img:hover {
  transform: scale(1.005);
}

.cs-storyboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cs-storyboard-card {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.cs-storyboard-card:hover {
  border-color: rgba(0, 212, 170, 0.35);
  transform: translateY(-1px);
}
.cs-storyboard-card-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0a0f;
  overflow: hidden;
}
.cs-storyboard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: contrast(1.1) brightness(0.95);
  transition: opacity 0.18s ease;
}
.cs-storyboard-img:hover {
  opacity: 0.92;
}
.cs-storyboard-skeleton {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  color: var(--text-muted, rgba(240,240,245,0.3));
  font-size: 11px;
  flex-direction: column;
  gap: 6px;
}
.cs-storyboard-skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,212,170,0.08) 50%, transparent 100%);
  animation: cs-shimmer 1.6s ease-in-out infinite;
}
@keyframes cs-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.cs-storyboard-pending {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted, rgba(240,240,245,0.3));
  font-size: 12px;
}
.cs-storyboard-pending-icon {
  font-size: 24px;
  opacity: 0.4;
}
.cs-storyboard-error {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.08);
  border: none;
  color: #fca5a5;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.cs-storyboard-error:hover {
  background: rgba(239, 68, 68, 0.15);
}
.cs-storyboard-error-icon {
  font-size: 24px;
  font-weight: 300;
}
.cs-storyboard-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 4px;
}
.cs-storyboard-card-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #f0f0f5);
}
.cs-storyboard-card-type {
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, #00d4aa);
  background: rgba(0, 212, 170, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.cs-storyboard-card-desc {
  padding: 0 12px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary, rgba(240,240,245,0.5));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs-storyboard-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 10px 10px;
  margin-top: auto;
}
.cs-icon-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cs-icon-btn:hover:not(:disabled) {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.4);
  color: var(--accent, #00d4aa);
}
.cs-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cs-icon-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.cs-step2-empty-meta {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, rgba(240,240,245,0.4));
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════
   INLINE PROGRESS — SKELETON SYSTEM (Fix C)
   ───────────────────────────────────────────────────────────
   Nahrádza fullscreen modal overlay v Krok 2/3/5/6. Mini progress
   widget vyrenderuje sa do `#csProgressInlineSlot` v step-content
   render-i. Skeleton karty pre per-item placeholder + hot-swap.
   ═══════════════════════════════════════════════════════════ */

/* Mini progress widget (inline, nad gridom) */
.cs-inline-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.22);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 12px;
}
.cs-inline-progress-icon {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 212, 170, 0.3);
  border-top-color: #00d4aa;
  border-radius: 50%;
  animation: cs-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes cs-spin {
  to { transform: rotate(360deg); }
}
.cs-inline-progress-label {
  color: var(--text-primary, #f0f0f5);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-inline-progress-bar {
  width: 120px;
  height: 6px;
  background: rgba(0, 212, 170, 0.15);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.cs-inline-progress-fill {
  height: 100%;
  background: #00d4aa;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.cs-inline-progress-count {
  font-size: 11px;
  color: rgba(240, 240, 245, 0.55);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cs-inline-progress-cancel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(240, 240, 245, 0.7);
  font-family: inherit;
  font-size: 11px;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-inline-progress-cancel:hover {
  background: rgba(255, 100, 100, 0.1);
  color: #ff6b6b;
}

/* Skeleton card — generic placeholder pre item v generation */
.cs-skeleton-card {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.cs-skeleton-card.generating {
  border-color: rgba(0, 212, 170, 0.4);
  box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.1);
}
.cs-skeleton-card.rendered {
  border-color: rgba(0, 212, 170, 0.3);
}
.cs-skeleton-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.02) 100%
  );
  background-size: 200% 100%;
  animation: cs-shimmer 1.5s infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: 32px;
}
@keyframes cs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.cs-skeleton-card.generating .cs-skeleton-image {
  background: rgba(0, 212, 170, 0.05);
  animation: none;
}
.cs-skeleton-card.generating .cs-skeleton-image::before {
  content: '';
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 212, 170, 0.3);
  border-top-color: #00d4aa;
  border-radius: 50%;
  animation: cs-spin 0.8s linear infinite;
}
.cs-skeleton-image[data-aspect="9:16"] { aspect-ratio: 9 / 16; }
.cs-skeleton-image[data-aspect="4:3"]  { aspect-ratio: 4 / 3; }
.cs-skeleton-image[data-aspect="1:1"]  { aspect-ratio: 1 / 1; }

/* Status pill */
.cs-skeleton-status {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
}
.cs-skeleton-status.pending    { color: rgba(255, 255, 255, 0.4); }
.cs-skeleton-status.generating { color: #00d4aa; }
.cs-skeleton-status.rendered {
  background: rgba(0, 212, 170, 0.15);
  color: #00d4aa;
  border: 1px solid rgba(0, 212, 170, 0.3);
}
.cs-skeleton-status.failed {
  background: rgba(255, 100, 100, 0.15);
  color: #ff6b6b;
}

/* Skeleton meta block (text rows under image) */
.cs-skeleton-meta {
  padding: 10px 12px;
}
.cs-skeleton-meta-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
}
.cs-skeleton-meta-sub {
  font-size: 11px;
  color: rgba(240, 240, 245, 0.5);
  margin-top: 2px;
}

/* ─── PROGRESS OVERLAY (legacy fullscreen — pre autopilot fallback) ───── */
.cs-progress-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9000;
}
.cs-progress-overlay.is-visible {
  opacity: 1;
}
.cs-progress-content {
  width: min(90vw, 360px);
  padding: 28px 24px;
  background: rgba(15, 20, 28, 0.98);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius, 16px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.cs-progress-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-progress-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary, #f0f0f5);
}
.cs-progress-counter {
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 13px;
  color: var(--accent, #00d4aa);
  letter-spacing: 0.04em;
}
.cs-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cs-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #00d4aa) 0%, #06b6d4 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.cs-progress-hint {
  font-size: 12px;
  color: var(--text-muted, rgba(240,240,245,0.4));
  min-height: 16px;
}
.cs-progress-cancel {
  margin-top: 4px;
  padding: 6px 16px;
  font-size: 12px;
}

/* ─── LIGHTBOX ────────────────────────────────────────────── */
.cs-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9500;
}
.cs-lightbox-overlay.is-visible {
  opacity: 1;
}
.cs-lightbox-img {
  max-width: min(90vw, 1400px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.cs-lightbox-caption {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 720px;
  text-align: center;
  line-height: 1.5;
}
.cs-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.cs-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
}
/* Lightbox carousel nav (Fix D) — ← → buttony + counter v spodku */
.cs-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cs-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-50%) scale(1.05);
}
.cs-lightbox-prev { left: 24px; }
.cs-lightbox-next { right: 24px; }
.cs-lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 14px;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}

/* ─── SHARED MODAL (override existing cs-modal pre asset use) ─ */
.cs-modal-overlay-asset .cs-modal-asset {
  width: min(92vw, 560px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.cs-modal-overlay-wide .cs-modal-asset {
  width: min(92vw, 760px);
}
.cs-modal-asset .cs-modal-body {
  overflow-y: auto;
}
.cs-modal-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}

/* Tabs in modal (Rekvizity AI / Upload) */
.cs-modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.cs-modal-tab {
  background: transparent;
  border: none;
  padding: 10px 16px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cs-modal-tab:hover {
  color: var(--text-primary, #f0f0f5);
}
.cs-modal-tab-active {
  color: var(--accent, #00d4aa);
  border-bottom-color: var(--accent, #00d4aa);
}

/* ─── UPLOAD SLOTS (character/prop reference photos) ─────── */
.cs-upload-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cs-upload-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm, 10px);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border: 1px dashed var(--glass-border, rgba(255,255,255,0.12));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.cs-upload-slot-empty:hover {
  border-color: var(--accent, #00d4aa);
  background: rgba(0, 212, 170, 0.06);
}
.cs-upload-slot-plus {
  font-size: 24px;
  font-weight: 300;
  color: var(--text-muted, rgba(240,240,245,0.4));
}
.cs-upload-slot-filled {
  border-style: solid;
  cursor: default;
}
.cs-upload-slot-filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-upload-slot-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-upload-slot-remove:hover {
  background: rgba(239, 68, 68, 0.85);
}

.cs-prop-upload-btn {
  width: 100%;
  padding: 14px;
}

/* ─── SUGGESTION CARDS (Director Brain návrhy) ────────────── */
.cs-suggestions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(0, 212, 170, 0.04);
  border: 1px solid rgba(0, 212, 170, 0.18);
  border-radius: var(--radius-sm, 10px);
}
.cs-suggestions-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent, #00d4aa);
  text-transform: uppercase;
}
.cs-suggestion-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
}
.cs-suggestion-icon {
  font-size: 18px;
  line-height: 1.3;
  flex-shrink: 0;
}
.cs-suggestion-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cs-suggestion-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
}
.cs-suggestion-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary, #f0f0f5);
}
.cs-suggestion-meta {
  font-size: 11px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  font-family: 'SF Mono', 'Courier New', monospace;
}

/* ─── ASSET GALLERY (Characters, Props) ──────────────────── */
.cs-asset-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-asset-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cs-asset-section-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-muted, rgba(240,240,245,0.4));
  text-transform: uppercase;
}
.cs-asset-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.cs-asset-card {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.cs-asset-card:hover {
  border-color: rgba(0, 212, 170, 0.35);
  transform: translateY(-1px);
}
.cs-asset-card-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0a0a0f;
  cursor: pointer;
  overflow: hidden;
}
.cs-asset-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.18s ease;
}
.cs-asset-card-thumb:hover img {
  opacity: 0.92;
}
.cs-asset-card-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.15);
}
.cs-asset-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
  text-transform: uppercase;
}
.cs-asset-card-badge-import {
  background: rgba(0, 212, 170, 0.2);
  border-color: rgba(0, 212, 170, 0.5);
  color: var(--accent, #00d4aa);
}
.cs-asset-card-badge-ai {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.45);
  color: #c4b5fd;
}
.cs-asset-card-body {
  padding: 10px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cs-asset-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-asset-card-tag {
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 11px;
  color: var(--accent, #00d4aa);
  letter-spacing: 0.04em;
}
.cs-asset-card-meta {
  font-size: 11px;
  color: var(--text-secondary, rgba(240,240,245,0.5));
  font-family: 'SF Mono', 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-asset-card-meta-empty {
  color: var(--text-muted, rgba(240,240,245,0.3));
  font-style: italic;
}
.cs-asset-card-actions {
  display: flex;
  gap: 6px;
  padding: 6px 10px 10px;
  margin-top: auto;
  justify-content: space-between;
  align-items: center;
}

.cs-asset-add-card {
  aspect-ratio: 1 / 1;
  min-height: 180px;
  background: transparent;
  border: 1px dashed rgba(0, 212, 170, 0.4);
  border-radius: var(--radius-sm, 10px);
  color: var(--accent, #00d4aa);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.cs-asset-add-card:hover {
  background: rgba(0, 212, 170, 0.07);
  border-color: rgba(0, 212, 170, 0.7);
  transform: translateY(-1px);
}
.cs-asset-add-plus {
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
}
.cs-asset-add-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.cs-import-row {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}

/* ─── IMPORT MODAL GRID ──────────────────────────────────── */
.cs-import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.cs-import-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
}
.cs-import-card:hover:not(.cs-import-card-done) {
  border-color: rgba(0, 212, 170, 0.45);
  transform: translateY(-1px);
}
.cs-import-card-done {
  opacity: 0.5;
  cursor: not-allowed;
}
.cs-import-card-thumb {
  aspect-ratio: 1 / 1;
  background: #0a0a0f;
  overflow: hidden;
}
.cs-import-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.cs-import-card-thumb div {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: rgba(255, 255, 255, 0.15);
}
.cs-import-card-name {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
  text-align: center;
}
.cs-import-card-status {
  padding: 0 10px 8px;
  font-size: 10px;
  text-align: center;
  color: var(--accent, #00d4aa);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── PER-SHOT ASSIGNMENT DIALOG ─────────────────────────── */
.cs-assign-subtitle {
  font-size: 12px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  margin-bottom: 12px;
}
.cs-assign-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}
.cs-assign-empty {
  padding: 18px;
  text-align: center;
  color: var(--text-muted, rgba(240,240,245,0.4));
  font-size: 13px;
  font-style: italic;
}
.cs-assign-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-size: 13px;
}
.cs-assign-row:hover {
  background: rgba(0, 212, 170, 0.05);
  border-color: rgba(0, 212, 170, 0.3);
}
.cs-assign-row input {
  flex-shrink: 0;
  accent-color: var(--accent, #00d4aa);
}
.cs-assign-row-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary, #f0f0f5);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cs-assign-row-type {
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, #00d4aa);
  background: rgba(0, 212, 170, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.cs-assign-row-sep {
  color: var(--text-muted, rgba(240,240,245,0.3));
  flex-shrink: 0;
}
.cs-assign-row-desc {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary, rgba(240,240,245,0.65));
}

/* ─── SKIP TOGGLE ─────────────────────────────────────────── */
.cs-skip-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-skip-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #f0f0f5);
}
.cs-skip-toggle input {
  accent-color: var(--accent, #00d4aa);
}

/* ─── KROK 5: ENVIRONMENTS ──────────────────────────────── */
.cs-env-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-env-card {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-left: 3px solid rgba(0, 212, 170, 0.45);
  border-radius: var(--radius-sm, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-env-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-env-letter {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent, #00d4aa);
  text-transform: uppercase;
}
.cs-env-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #f0f0f5);
}
.cs-env-card-visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0f;
  border-radius: 8px;
  overflow: hidden;
}
.cs-env-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.cs-env-img:hover {
  opacity: 0.95;
}
.cs-env-skeleton {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  flex-direction: column;
  gap: 8px;
  color: var(--text-muted, rgba(240,240,245,0.3));
  font-size: 12px;
}
.cs-env-skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,212,170,0.08) 50%, transparent 100%);
  animation: cs-shimmer 1.6s ease-in-out infinite;
}
.cs-env-skeleton-label {
  position: relative;
  z-index: 1;
}
.cs-env-skeleton-icon {
  font-size: 28px;
  opacity: 0.5;
}
.cs-env-skeleton-pending {
  flex-direction: column;
}
.cs-env-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-env-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary, #f0f0f5);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.cs-env-desc:hover {
  background: rgba(255, 255, 255, 0.03);
}
.cs-env-desc-edit {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent, #00d4aa);
  border-radius: 6px;
  color: var(--text-primary, #f0f0f5);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.cs-env-shots-line {
  font-size: 11px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  font-family: 'SF Mono', 'Courier New', monospace;
  padding: 0 8px;
}
.cs-env-shots-empty {
  color: var(--text-muted, rgba(240,240,245,0.3));
  font-style: italic;
}
.cs-env-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

/* ─── TOAST STACK ─────────────────────────────────────────── */
.cs-toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9800;
  pointer-events: none;
}
.cs-toast {
  pointer-events: auto;
  padding: 12px 16px;
  background: rgba(15, 20, 28, 0.95);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: var(--radius-sm, 10px);
  color: var(--text-primary, #f0f0f5);
  font-size: 13px;
  line-height: 1.4;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cs-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cs-toast-info {
  border-left: 3px solid var(--accent, #00d4aa);
}
.cs-toast-warn {
  border-left: 3px solid #f59e0b;
}
.cs-toast-error {
  border-left: 3px solid #ef4444;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .cs-storyboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-asset-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
@media (max-width: 540px) {
  .cs-storyboard-grid {
    grid-template-columns: 1fr;
  }
  .cs-upload-slots {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════
   CINEMATIC STUDIO — KROKY 6, 7 + AUTO-PILOT + TEMPLATES + EXPORT
   ═══════════════════════════════════════════════════════════ */

/* ─── TEMPLATE GRID (new project modal) ──────────────────── */
.cs-modal-overlay-newproject .cs-modal-newproject {
  width: min(92vw, 720px);
  max-height: 90vh;
}
.cs-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.cs-template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  font-family: inherit;
  text-align: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cs-template-card:hover {
  background: var(--glass-hover, rgba(255,255,255,0.07));
  border-color: rgba(0, 212, 170, 0.4);
  transform: translateY(-1px);
}
.cs-template-active {
  background: var(--accent-dim, rgba(0,212,170,0.15));
  border-color: var(--accent, #00d4aa);
  color: var(--accent, #00d4aa);
}
.cs-template-icon {
  font-size: 32px;
  line-height: 1;
}
.cs-template-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.cs-template-meta {
  font-size: 10px;
  color: var(--text-muted, rgba(240,240,245,0.4));
  font-family: 'SF Mono', 'Courier New', monospace;
  letter-spacing: 0.04em;
}
.cs-template-active .cs-template-meta {
  color: rgba(0, 212, 170, 0.7);
}

/* ─── KROK 6: FINAL SHOTS ────────────────────────────────── */
.cs-final-shots-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-final-shot-card {
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.18s ease;
}
.cs-final-shot-card:hover {
  border-color: rgba(0, 212, 170, 0.25);
}
.cs-final-shot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-final-shot-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cs-final-shot-status {
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}
.cs-final-shot-status-rendered    { background: rgba(0, 212, 170, 0.18); color: var(--accent, #00d4aa); }
.cs-final-shot-status-generating  { background: rgba(0, 212, 255, 0.18); color: #67e8f9; animation: cs-pulse 1.4s ease-in-out infinite; }
.cs-final-shot-status-notes_ready { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
.cs-final-shot-status-failed      { background: rgba(239, 68, 68, 0.2);  color: #fca5a5; }
.cs-final-shot-status-pending     { background: rgba(255, 255, 255, 0.05); color: rgba(255,255,255,0.4); }
@keyframes cs-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

.cs-final-shot-body {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.cs-final-shot-visual {
  aspect-ratio: 16 / 9;
  background: #0a0a0f;
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  position: relative;
}
.cs-final-shot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
.cs-final-shot-img:hover {
  opacity: 0.95;
}
.cs-final-shot-skeleton {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted, rgba(240,240,245,0.3));
  font-size: 12px;
}
.cs-final-shot-skeleton-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(0,212,170,0.08) 50%, transparent 100%);
  animation: cs-shimmer 1.6s ease-in-out infinite;
}
.cs-final-shot-skeleton-label {
  position: relative;
  z-index: 1;
}
.cs-final-shot-pending {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted, rgba(240,240,245,0.35));
  font-size: 12px;
}
.cs-final-shot-pending-icon {
  font-size: 28px;
  opacity: 0.5;
}

.cs-final-shot-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-final-shot-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary, #f0f0f5);
}
.cs-final-shot-sketch-mini {
  display: inline-block;
  width: 80px;
  height: 45px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  align-self: flex-start;
}
.cs-final-shot-sketch-mini img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.1) brightness(0.95);
}

.cs-notes-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 8px;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cs-notes-toggle:hover {
  background: rgba(167, 139, 250, 0.16);
  border-color: rgba(167, 139, 250, 0.5);
}
.cs-notes-toggle-badge {
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  padding: 1px 6px;
  background: rgba(167, 139, 250, 0.22);
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.cs-notes-toggle-badge-empty {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted, rgba(240,240,245,0.4));
}

/* ─── DIRECTOR'S NOTES PANEL (expandable) ────────────────── */
.cs-director-notes-panel {
  background: rgba(167, 139, 250, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: var(--radius-sm, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-director-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cs-director-notes-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #c4b5fd;
  text-transform: uppercase;
}
.cs-director-notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-director-notes-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.cs-director-notes-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(196, 181, 253, 0.8);
  text-transform: uppercase;
  padding-top: 8px;
}
.cs-director-notes-value,
.cs-director-notes-why {
  width: 100%;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: var(--text-primary, #f0f0f5);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  min-height: 50px;
  transition: border-color 0.15s ease;
}
.cs-director-notes-value:focus,
.cs-director-notes-why:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.6);
}
.cs-director-notes-why {
  font-style: italic;
  color: var(--text-secondary, rgba(240,240,245,0.6));
}
.cs-director-notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px;
  text-align: center;
}
.cs-director-notes-empty-text {
  font-size: 13px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  font-style: italic;
}
.cs-director-notes-hint {
  font-size: 11px;
  color: var(--text-muted, rgba(240,240,245,0.4));
  line-height: 1.45;
  padding-top: 6px;
  border-top: 1px solid rgba(167, 139, 250, 0.15);
}

/* ─── MODEL PICKER (radio buttons) ───────────────────────── */
.cs-final-shot-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--glass-border, rgba(255,255,255,0.06));
}
.cs-final-shot-actions-left,
.cs-final-shot-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cs-model-pick-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted, rgba(240,240,245,0.45));
  text-transform: uppercase;
}
.cs-model-pick-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  cursor: pointer;
}
.cs-model-pick-radio input {
  accent-color: var(--accent, #00d4aa);
}
.cs-model-pick-radio:hover {
  color: var(--text-primary, #f0f0f5);
}

/* ─── KROK 7: ANIMATION ──────────────────────────────────── */
.cs-anim-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-anim-card .cs-final-shot-visual {
  aspect-ratio: 16 / 9;
}
.cs-video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0a0a0f;
}
.cs-anim-poster {
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: brightness(0.7);
}
.cs-anim-duration-badge {
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  background: rgba(0, 212, 255, 0.16);
  color: #67e8f9;
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.cs-anim-motion-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
}
.cs-anim-motion-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted, rgba(240,240,245,0.45));
  text-transform: uppercase;
  padding-top: 2px;
}
.cs-anim-motion-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-primary, #f0f0f5);
}
.cs-anim-motion-edit {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent, #00d4aa);
  border-radius: 8px;
  color: var(--text-primary, #f0f0f5);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.cs-anim-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 12px;
}
.cs-anim-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cs-anim-cta-row {
  display: flex;
  justify-content: center;
  padding: 8px 0 0;
}

/* ─── AUTO-PILOT BAR (sticky pod headerom) ───────────────── */
.cs-autopilot-bar {
  flex-shrink: 0;
  z-index: 10;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.18) 0%, rgba(6, 182, 212, 0.18) 100%);
  border: 1px solid rgba(0, 212, 170, 0.45);
  border-radius: var(--radius-sm, 10px);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.cs-autopilot-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cs-autopilot-icon {
  font-size: 18px;
  animation: cs-rocket-pulse 1.6s ease-in-out infinite;
}
@keyframes cs-rocket-pulse {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-2px) rotate(-12deg); }
}
.cs-autopilot-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--accent, #00d4aa);
  text-transform: uppercase;
}
.cs-autopilot-msg {
  font-size: 13px;
  color: var(--text-primary, #f0f0f5);
  flex: 1;
  min-width: 0;
}
.cs-autopilot-progress {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  overflow: hidden;
}
.cs-autopilot-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #00d4aa) 0%, #67e8f9 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.cs-autopilot-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cs-autopilot-pct {
  font-family: 'SF Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #00d4aa);
  letter-spacing: 0.06em;
}

/* ─── COMPLETION SCREEN (autopilot done) ─────────────────── */
.cs-completion-screen {
  width: min(92vw, 520px) !important;
  padding: 32px 28px !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cs-completion-icon {
  font-size: 56px;
  line-height: 1;
}
.cs-completion-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--accent, #00d4aa);
}
.cs-completion-sub {
  font-size: 14px;
  color: var(--text-secondary, rgba(240,240,245,0.6));
  margin: 0;
}
.cs-completion-list {
  margin: 8px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-primary, #f0f0f5);
  text-align: left;
}
.cs-completion-list li {
  padding-left: 4px;
}
.cs-completion-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* ─── EXPORT BUTTON + EXPORT MODAL ───────────────────────── */
.cs-export-button {
  background: linear-gradient(135deg, var(--accent, #00d4aa) 0%, #06b6d4 100%);
  color: #0a0a0f;
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 11px 24px;
}
.cs-export-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: none;
}
.cs-export-toolbar-btn {
  margin-left: auto;
}
.cs-card-export {
  position: absolute;
  top: 10px;
  right: 50px; /* place vedľa delete × button */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 212, 170, 0.35);
  border-radius: 50%;
  color: var(--accent, #00d4aa);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
  z-index: 2;
}
.cs-card:hover .cs-card-export {
  opacity: 1;
  transform: scale(1);
}
.cs-card-export:hover {
  background: rgba(0, 212, 170, 0.85);
  color: #0a0a0f;
  border-color: var(--accent, #00d4aa);
}
.cs-export-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  font-size: 13px;
  margin-bottom: 12px;
}
.cs-export-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary, rgba(240,240,245,0.6));
  font-family: 'SF Mono', monospace;
  letter-spacing: 0.04em;
}
.cs-export-stats-row > span:last-child {
  color: var(--accent, #00d4aa);
  font-weight: 600;
}
.cs-export-progress-wrap {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-export-progress-text {
  font-size: 12px;
  color: var(--text-secondary, rgba(240,240,245,0.55));
  text-align: center;
  font-family: 'SF Mono', monospace;
}

/* ─── Responsive — collapse final shot body to single column ─ */
@media (max-width: 800px) {
  .cs-final-shot-body {
    grid-template-columns: 1fr;
  }
  .cs-director-notes-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .cs-director-notes-label {
    padding-top: 0;
  }
  .cs-template-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .cs-template-grid {
    grid-template-columns: 1fr;
  }
  .cs-anim-controls-row {
    flex-direction: column;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL — MODERN SCROLLBAR (teal accent)
   Override default OS scrollbars across the app. Aplikuje sa
   na všetky scrollable elementy (vrátane window, panels, gallery,
   cinematic studio scroll areas). Lokálne scrollbar styles
   (.left-panel, .right-panel, .rp-content, .home-left, .home-main,
   .news-view atď.) sú konkrétnejšie a ostávajú v platnosti.
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 170, 0.25);
  border-radius: 4px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 170, 0.5);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 212, 170, 0.25) transparent;
}
/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Cinematic Studio
   ═══════════════════════════════════════════════════════════ */

/* Homepage banner */
.home-imax-banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 36px 40px;
  margin: 24px 0;
  background: linear-gradient(135deg, #0a0e14 0%, #1a1f2e 50%, #2d1b3d 100%);
  border: 1px solid rgba(0, 212, 170, 0.25);
  transition: all 0.25s ease;
  cursor: pointer;
}
.home-imax-banner:hover {
  border-color: rgba(0, 212, 170, 0.55);
  transform: translateY(-2px);
  box-shadow: none;
}
.home-imax-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 212, 170, 0.15), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(180, 80, 220, 0.12), transparent 50%);
  pointer-events: none;
}
.home-imax-content { position: relative; z-index: 1; }
.home-imax-eyebrow { margin-bottom: 12px; }
.home-imax-title {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 8px 0 4px 0;
}
.home-imax-subtitle {
  font-size: 18px;
  color: #00d4aa;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 16px 0;
  text-transform: uppercase;
}
.home-imax-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  max-width: 720px;
  line-height: 1.5;
  margin: 0 0 20px 0;
}
.home-imax-cta {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, #00d4aa, #00a382);
  color: #0a0e14;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 14px;
}

/* Main ATELIÉR view — bežný flex child v body (rovnako ako #nanoBananaView, #klingView atď).
   ŽIADNY position: fixed / z-index — inak prekryje nav menu dropdowny. */
#imaxView {
  flex: 1;
  min-height: 0;
  background: #0a0e14;
  overflow: hidden;
}
.imax-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: rgba(255,255,255,0.92);
}

/* Topbar — len v project view, minimal */
.imax-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  /* Drž rovnakú výšku ako keď tam boli tlačidlá (Späť + Pokračovať) — teraz
     je v topbare iba text, ale výška ostáva konzistentná. */
  min-height: 62px;
}
.imax-topbar-left { display: flex; align-items: center; gap: 14px; }
.imax-topbar-right { display: flex; align-items: center; gap: 8px; }
.imax-logo { display: flex; align-items: baseline; gap: 8px; }
.imax-logo-name { font-size: 20px; font-weight: 900; letter-spacing: 0.05em; color: #fff; }
.imax-logo-sub { font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.15em; text-transform: uppercase; }
.imax-topbar-title {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.imax-topbar-title-icon {
  width: 20px;
  height: 20px;
  color: #00d4aa;   /* plná tyrkysová z ATELIÉR brandingu */
  flex-shrink: 0;
  display: inline-block;
}

/* Home tlačidlo — vedie do ATELIÉR project dashboardu */
.imax-topbar-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.imax-topbar-home:hover {
  background: rgba(0, 212, 170, 0.10);
  border-color: rgba(0, 212, 170, 0.4);
  color: #00d4aa;
  transform: scale(1.05);
}
.imax-topbar-home:active {
  transform: scale(0.97);
}
.imax-topbar-home-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Vertikálny oddeľovač medzi home ikonkou a klapkou + názvom */
.imax-topbar-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  margin: 0 4px;
}

/* "Pokračovať →" pulz na krokoch 2-5 — jemný glow + scale aby user vedel
   kam má kliknúť, lebo dolné CTA tam už nieje (scroll). */
.imax-btn.imax-btn-pulse {
  position: relative;
  color: #00d4aa;
  border-color: rgba(0, 212, 170, 0.35);
  background: rgba(0, 212, 170, 0.06);
  animation: imaxBtnPulse 2.4s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.imax-btn.imax-btn-pulse:hover:not(:disabled) {
  /* Hover = pulz prestane blikať + klasické jemné zväčšenie.
     !important držia zelenú identitu — bez nich by .imax-btn:hover prepísal
     background bielym overlay-om. */
  animation: none;
  transform: scale(1.03);
  background: rgba(0, 212, 170, 0.06) !important;
  border-color: rgba(0, 212, 170, 0.45) !important;
  box-shadow: none;
  color: #00d4aa !important;
}
.imax-btn.imax-btn-pulse:active:not(:disabled) {
  transform: scale(0.98);
}
@keyframes imaxBtnPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.0);
    border-color: rgba(0, 212, 170, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0, 212, 170, 0.08), 0 0 14px rgba(0, 212, 170, 0.25);
    border-color: rgba(0, 212, 170, 0.55);
  }
}

/* Stepper */
.imax-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  scrollbar-width: thin;
}
/* Späť tlačidlo vľavo — medzera k prvému kroku */
.imax-stepper-back {
  margin-right: 14px;
  flex-shrink: 0;
}
/* Steps wrapper — rozprestrieť medzi Späť a Pokračovať, scrollable ak je málo miesta */
.imax-stepper-steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Pokračovať tlačidlo úplne vpravo */
.imax-stepper-fwd {
  margin-left: 14px;
  flex-shrink: 0;
}
/* Delete projekt — úplne vpravo v stepper riadku */
.imax-stepper-delete {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 100, 110, 0.22);
  border-radius: 8px;
  color: rgba(255, 160, 170, 0.85);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 140ms ease;
}
.imax-stepper-delete svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.imax-stepper-delete:hover {
  background: rgba(255, 80, 100, 0.12);
  border-color: rgba(255, 80, 100, 0.55);
  color: #ff8a98;
}
.imax-stepper-delete:active { transform: scale(0.97); }
@media (max-width: 900px) {
  .imax-stepper-delete { padding: 7px 10px; }
  .imax-stepper-delete span { display: none; }
}
.imax-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: inherit;
}
.imax-step:hover:not(:disabled):not(.is-locked) {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}
.imax-step.is-current {
  background: rgba(0, 212, 170, 0.15);
  border-color: rgba(0, 212, 170, 0.6);
  color: #00d4aa;
  font-weight: 600;
}
.imax-step.is-done { color: rgba(255,255,255,0.85); }
.imax-step.is-done .imax-step-icon { opacity: 0.6; }
.imax-step.is-locked { opacity: 0.35; cursor: not-allowed; }
.imax-step-icon { font-size: 14px; }
.imax-step-label { font-weight: 500; }
.imax-step-sep { color: rgba(255,255,255,0.2); padding: 0 6px; font-size: 14px; }

/* Stage (scrollable content area) */
.imax-stage {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px 60px 40px;
}

/* Step header */
.imax-step-header { margin-bottom: 24px; max-width: 800px; }
.imax-step-eyebrow {
  font-size: 11px;
  color: #00d4aa;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.imax-film-done-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 212, 170, 0.16);
  border: 1px solid rgba(0, 212, 170, 0.5);
  color: #00d4aa;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
}
.imax-step-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
  color: #fff;
}
.imax-step-desc {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* Cards */
.imax-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px;
}
.imax-card-add {
  background: transparent;
  border: 1.5px dashed rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 18px;
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  font-family: inherit;
  font-size: 14px;
  transition: all 0.15s;
  min-height: 280px;
}
.imax-card-add:hover {
  border-color: rgba(0, 212, 170, 0.5);
  color: #00d4aa;
  background: rgba(0, 212, 170, 0.04);
}
.imax-add-icon { font-size: 36px; line-height: 1; }
.imax-add-label { font-weight: 500; }

/* Labels & inputs */
.imax-label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.15em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.imax-label-sm { font-size: 10px; margin: 12px 0 6px 0; }
.imax-label-hint {
  color: rgba(0, 212, 170, 0.7);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-left: 8px;
  text-transform: none;
}
.imax-textarea, .imax-input, .imax-select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.imax-textarea:focus, .imax-input:focus, .imax-select:focus {
  border-color: rgba(0, 212, 170, 0.6);
}
.imax-textarea { resize: vertical; line-height: 1.5; }
.imax-textarea-lg {
  font-size: 16px;
  padding: 16px;
  min-height: 92px;       /* nižšie, nech sa „Kvalita filmu" zmestí do okna bez scrollu */
  overflow: hidden;       /* žiadny scroll-bar — text sa zobrazí celý */
  resize: none;           /* bez drag-handle, fit-content auto-grow */
  field-sizing: content;  /* moderné Chromium auto-grow podľa obsahu */
}

/* KROK 1 (Príbeh) — kompaktnejší layout, aby výber „Kvalita filmu" bol vidno
   bez scrollu hneď pri otvorení nového filmu. Scoped len na .imax-step1. */
.imax-step1 .imax-step-header { margin-bottom: 14px; }
.imax-step1 .imax-step-title  { font-size: 30px; margin-bottom: 6px; }
.imax-step1 .imax-step-desc   { font-size: 14px; line-height: 1.4; }
.imax-step1 .imax-card        { padding: 14px; }
.imax-step1 .imax-preset-card { margin-top: 10px; }
.imax-step1 .imax-textarea-lg { min-height: 84px; }
/* Odrež spodný 60px padding .imax-stage pre Krok 1 — inak pretlačí obsah tesne
   za spodok okna a naskočí scrollbar aj keď sú karty celé vidno. */
.imax-step1 { margin-bottom: -52px; }

/* Krok 1 vyplní CELÚ výšku okna: karta s príbehom rastie a zaberie priestor,
   ktorý zvýši po hlavičke a po pruhu Formát/Štýl/Dĺžka. Žiadne prázdno dole,
   žiadny scroll — škáluje s výškou obrazovky. */
.imax-step1 { display: flex; flex-direction: column; min-height: 100%; }
.imax-step1 .imax-story-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.imax-step1 .imax-story-card .imax-textarea-lg {
  flex: 1 1 auto;
  min-height: 140px;
  field-sizing: fixed;   /* vypni auto-grow podľa obsahu — riadi to flex */
  overflow-y: auto;
}
.imax-textarea-mono { font-family: monospace; font-size: 12px; line-height: 1.5; }
.imax-input-sm, .imax-select-sm { padding: 6px 10px; font-size: 13px; width: auto; }
.imax-select-inline {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  margin-left: 6px;
}
.imax-textarea-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
}
.imax-hint { color: rgba(255,255,255,0.45); }
.imax-counter { color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; }

/* Buttons */
.imax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.imax-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.imax-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.imax-btn-primary {
  background: var(--accent, #00d4aa);
  border: none;
  color: #03110d;
  font-weight: 700;
}
/* Hover = jemné zväčšenie ~3%, gradient zostáva (reaffirm aby prebil .imax-btn:hover
   ktoré inak overrideuje na sivú). Match-uje pattern z .imax-step1-generate. */
.imax-btn-primary:hover:not(:disabled) {
  background: var(--accent, #00d4aa);
  transform: scale(1.03);
  filter: brightness(1.05);
}
.imax-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}
.imax-btn-secondary {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.3);
  color: #00d4aa;
}
.imax-btn-ghost { background: transparent; border-color: rgba(255,255,255,0.08); }
.imax-btn-danger { color: #ff7c7c; }
.imax-btn-danger:hover:not(:disabled) { background: rgba(255, 80, 80, 0.1); border-color: rgba(255, 80, 80, 0.3); }
.imax-btn-lg { padding: 14px 28px; font-size: 15px; }
.imax-btn-sm { padding: 6px 12px; font-size: 12px; }
.imax-btn-full { width: 100%; }

/* Actions row */
.imax-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.imax-actions-hint { flex: 1; color: rgba(255,255,255,0.45); font-size: 13px; text-align: center; }

/* Chips */
.imax-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
.imax-chip-cam { color: #b3e5ff; border-color: rgba(140, 200, 255, 0.2); }
.imax-chip-dur { color: #ffd96a; border-color: rgba(255, 200, 80, 0.2); }
.imax-chip-model { color: #c89aff; border-color: rgba(200, 140, 255, 0.2); }
.imax-chip-refs  { color: #b3e5b3; border-color: rgba(140, 220, 140, 0.2); }
.imax-chip-music { color: #ff9ec7; border-color: rgba(255, 140, 200, 0.2); }

/* Chip-style trigger button — vyzerá ako chip, otvára custom dropdown */
.imax-chip-select {
  display: inline-flex;
  align-items: center;
  padding: 4px 24px 4px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.2;
  transition: background-color 0.15s, border-color 0.15s;
  position: relative;
}
.imax-chip-select:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

/* Chevron (custom ::after) — používa currentColor takže matchne chip farbu */
.imax-chip-select::after {
  content: '';
  position: absolute;
  right: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  opacity: 0.75;
}

/* Per-kind farby */
.imax-chip-select.imax-chip-dur   { color: #ffd96a; border-color: rgba(255, 200, 80, 0.35); padding-left: 28px; }
.imax-chip-select.imax-chip-model { color: #c89aff; border-color: rgba(200, 140, 255, 0.3); }
.imax-chip-select.imax-chip-refs  { color: #b3e5b3; border-color: rgba(140, 220, 140, 0.3); }

/* Duration — clock ikonka vľavo */
.imax-chip-select.imax-chip-dur {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffd96a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='6.5'/><path d='M8 4v4l2.5 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: left 9px center;
  background-size: 11px;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Custom dropdown (glassmorphism, ako main-nav-menu)
   ═══════════════════════════════════════════════════════════ */
.imax-dd {
  position: relative;
  display: inline-block;
}

.imax-dd-menu[hidden] { display: none !important; }

.imax-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 92px;
  background: rgba(15, 15, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: imax-dd-in 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes imax-dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.imax-dd-item {
  background: transparent;
  border: none;
  padding: 7px 14px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.imax-dd-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.imax-dd-item.is-selected {
  background: rgba(0, 212, 170, 0.18);
  color: #00d4aa;
  font-weight: 700;
}
.imax-dd-item.is-selected:hover {
  background: rgba(0, 212, 170, 0.25);
}

.imax-dd-trigger-text {
  display: inline-block;
}

/* Vlastná dĺžka filmu: kompaktný popover nad ovládaním. Deväť možností v
   jednom stĺpci presahovalo viewport a zbytočne zväčšovalo stránku. */
.imax-dd-custom-length { z-index: 30; }
.imax-dd-menu.imax-dd-menu-duration {
  top: auto;
  bottom: calc(100% + 9px);
  left: auto;
  right: 0;
  width: 292px;
  min-width: 292px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
}
.imax-dd-menu-duration .imax-dd-item {
  min-width: 0;
  min-height: 54px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.025);
}
.imax-dd-menu-duration .imax-dd-item:hover {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
}
.imax-dd-menu-duration .imax-dd-item.is-selected {
  border-color: rgba(0,212,170,.38);
  background: rgba(0,212,170,.14);
  box-shadow: inset 0 0 0 1px rgba(0,212,170,.08);
}
.imax-dd-item-label { display: block; }
.imax-dd-item-sub {
  display: block;
  color: #737c88;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .025em;
}
.imax-dd-item.is-selected .imax-dd-item-sub { color: #78dcca; }

@media (max-width: 620px) {
  .imax-dd-menu.imax-dd-menu-duration {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 14px;
    width: auto;
    min-width: 0;
    z-index: 500;
  }
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Shot image / video delete button (hover overlay)
   ═══════════════════════════════════════════════════════════ */
.imax-shot-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: all 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
}
.imax-shot-img:hover .imax-shot-delete-btn,
.imax-shot-vid:hover .imax-shot-delete-btn {
  opacity: 1;
}
.imax-shot-delete-btn:hover {
  background: rgba(255, 80, 80, 0.85);
  border-color: rgba(255, 100, 100, 0.7);
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Version history nav arrows (‹ / ›) na shot image/video
   Zobrazia sa len ak má asset 2+ verzie (po regenerácii). Hover-reveal
   ako delete tlačidlo; ‹ vľavo, › vpravo, oba vertikálne v strede.
   N/M label dole v strede.
   ═══════════════════════════════════════════════════════════ */
.imax-shot-ver-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  font-weight: 400;
}
.imax-shot-ver-prev { left: 10px; }
.imax-shot-ver-next { right: 10px; }
.imax-shot-img:hover .imax-shot-ver-btn,
.imax-shot-vid:hover .imax-shot-ver-btn {
  opacity: 1;
}
.imax-shot-ver-btn:hover {
  background: rgba(80, 160, 255, 0.85);
  border-color: rgba(140, 190, 255, 0.7);
  transform: translateY(-50%) scale(1.08);
}
.imax-shot-ver-label {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  padding: 4px 10px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  pointer-events: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.imax-shot-img:hover .imax-shot-ver-label,
.imax-shot-vid:hover .imax-shot-ver-label {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Step header s row layoutom (title vľavo, akcia vpravo)
   ═══════════════════════════════════════════════════════════ */
.imax-step-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  flex-wrap: wrap;
}
.imax-step-header-row .imax-step-header-text {
  flex: 1;
  min-width: 0;
  max-width: 800px;
}

/* White pill button — pre sekundárne akcie ktoré nemajú byť tak vizuálne hlasné
   ako primárny zelený CTA */
.imax-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #0a0e14;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 6px;
}
.imax-pill-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.12);
}
.imax-pill-btn:active {
  transform: translateY(0);
}
.imax-pill-btn-icon {
  font-size: 15px;
  line-height: 1;
}

/* Plan section head — "Shoty" title + Prerobiť plán button v jednom riadku */
.imax-plan-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}
.imax-plan-section-head .imax-section-title {
  margin: 0;
}

/* Plan shot card — image prompt read-only preview */
.imax-shot-plan-prompt-readonly {
  background: rgba(0, 0, 0, 0.3);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: monospace;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 8px 0 0 0;
  max-height: 400px;
  overflow-y: auto;
}

/* (Legacy margin/align odstránené — Krok 2 buttons sú teraz v .imax-shot-plan-actions
   flex row, takže margin-top by len rozbil zarovnanie. Štýly riadi .imax-shot-plan-actions.) */

/* Step 6 shot production card — expand for image prompt + refs + refine */
.imax-shot-prod-details {
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.imax-shot-prod-details > summary {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 0;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.imax-shot-prod-details-body {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.imax-shot-prod-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.imax-shot-prod-refine {
  align-self: flex-start;
}

/* Plan meta */
.imax-plan-meta {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Sections */
.imax-section { margin: 32px 0; max-width: 1400px; }
/* Plán + Shoty step — full šírka, využiť celý priestor */
.imax-step2 .imax-section,
.imax-step7 .imax-section { max-width: none; }
.imax-step2 .imax-shots-list { width: 100%; }
.imax-section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px 0;
  color: #fff;
}
.imax-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.imax-section-header .imax-section-title { margin: 0; }

/* Empty state */
.imax-empty {
  padding: 60px 20px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}

/* Shot plan card (Step 2) — segmenty idú pod sebou (blok), panely vnútri
   segmentu sú v mriežke 2 vedľa seba. */
.imax-shots-list { display: block; }
.imax-seg-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .imax-seg-panels { grid-template-columns: 1fr; }
}
.imax-shot-plan-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.imax-shot-plan-num {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00d4aa, #00a382);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #0a0e14;
  font-size: 16px;
}
.imax-shot-plan-body { flex: 1; min-width: 0; }
.imax-shot-plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.imax-shot-plan-label {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: 6px;
  flex: 1;
  min-width: 200px;
  font-family: inherit;
  outline: none;
}
.imax-shot-plan-label:hover { background: rgba(255,255,255,0.04); }
.imax-shot-plan-label:focus { background: rgba(0,0,0,0.3); border-color: rgba(0, 212, 170, 0.5); }
/* Static (read-only) varianta — bez hover/focus efektov, bez input-paddingu
   aby zarovnal s description ktorý začína na X=0 v body */
.imax-shot-plan-label-static {
  display: inline-block;
  align-self: center;
  padding: 0;
}
.imax-shot-plan-label-static:hover,
.imax-shot-plan-label-static:focus {
  background: transparent !important;
  border-color: transparent !important;
}
.imax-shot-plan-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.imax-shot-plan-desc {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.imax-shot-plan-details { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 12px; }
.imax-shot-plan-details > summary {
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 0;
  user-select: none;
}
.imax-shot-plan-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 12px 0;
  flex-wrap: wrap;
}
.imax-shot-plan-controls .imax-label-sm { margin: 0 4px 0 0; }
.imax-shot-plan-sfx {
  margin: 12px 0;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
.imax-shot-plan-sfx code {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}

/* ═══════════════════════════════════════════════════════════
   STEP 2 — Inline-editable shot cards + Drag handle + Add button
   ═══════════════════════════════════════════════════════════ */

/* Grip handle — ľavá kolóna s číslom + ⋮⋮ dots. Drag začína iba tu,
   takže input/textarea sú plne editovateľné (text-select nepustí drag). */
.imax-shot-plan-grip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: grab;
  user-select: none;
  flex: 0 0 36px;
  padding-top: 2px;
}
.imax-shot-plan-grip:active { cursor: grabbing; }
.imax-shot-plan-grip-dots {
  color: rgba(255,255,255,0.25);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  transition: color 0.15s;
}
.imax-shot-plan-grip:hover .imax-shot-plan-grip-dots { color: rgba(0,212,170,0.7); }

/* Editable title — vyzerá ako static text, na hover/focus jemný border */
.imax-shot-plan-title-input {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 7px 10px;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: all 0.15s;
  margin-bottom: 8px;
}
.imax-shot-plan-title-input::placeholder { color: rgba(255,255,255,0.30); font-weight: 600; }
.imax-shot-plan-title-input:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.imax-shot-plan-title-input:focus {
  background: rgba(0,212,170,0.05);
  border-color: rgba(0,212,170,0.5);
}

/* Editable description — auto-resize textarea */
.imax-shot-plan-desc-input {
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 10px 12px;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  resize: none;             /* manual resize off — auto-resize cez JS */
  overflow: hidden;
  box-sizing: border-box;
  transition: all 0.15s;
  min-height: 70px;
  margin-bottom: 12px;
}
.imax-shot-plan-desc-input::placeholder { color: rgba(255,255,255,0.30); }
.imax-shot-plan-desc-input:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.imax-shot-plan-desc-input:focus {
  background: rgba(0,212,170,0.04);
  border-color: rgba(0,212,170,0.5);
}
.imax-shot-plan-replan-hint {
  margin: -4px 0 10px;
  color: #d1ef17;
  font-size: 12px;
  line-height: 1.35;
}

/* Action row — Prerobiť + Zmazať. Oba buttons majú IDENTICKÉ rozmery
   (padding, height, border, font) aby boli vizuálne symetrické. flex:1
   ich rovnomerne rozdistribuuje cez celú šírku body. */
.imax-shot-plan-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.imax-shot-plan-actions > .imax-btn {
  flex: 1 1 0;                  /* rovnomerné rozdelenie šírky */
  min-height: 34px;             /* zhodná výška */
  padding: 7px 14px;            /* override .imax-btn-sm aby boli oba rovnaké */
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}
.imax-shot-plan-actions > .imax-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.20);
}
/* Delete varianta — len farba textu/hover, geometria zhodná s regen */
.imax-shot-plan-delete {
  color: rgba(255,120,120,0.85) !important;
}
.imax-shot-plan-actions > .imax-shot-plan-delete:hover:not(:disabled) {
  background: rgba(255,80,80,0.10) !important;
  border-color: rgba(255,80,80,0.35) !important;
  color: #ff8585 !important;
}

/* Drag-and-drop visual states */
.imax-shot-plan-dragging {
  opacity: 0.35;
  transform: scale(0.98);
}
.imax-shot-plan-dropover {
  border-color: rgba(0,212,170,0.55) !important;
  background: rgba(0,212,170,0.06) !important;
  box-shadow: 0 0 0 2px rgba(0,212,170,0.18) inset;
}

/* "+ Pridať shot" button — last child v shots-list */
.imax-shot-plan-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 20px;
  background: rgba(255,255,255,0.015);
  border: 2px dashed rgba(255,255,255,0.10);
  border-radius: 10px;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  transition: all 0.18s ease;
  font-family: inherit;
  min-height: 140px;
}
.imax-shot-plan-add:hover {
  background: rgba(0,212,170,0.05);
  border-color: rgba(0,212,170,0.45);
  color: #00d4aa;
  transform: translateY(-1px);
}
.imax-shot-plan-add-icon {
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  color: inherit;
}
.imax-shot-plan-add-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.imax-shot-plan-add-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
}
.imax-shot-plan-add:hover .imax-shot-plan-add-hint { color: rgba(0,212,170,0.7); }

/* Grid layouts */
.imax-grid {
  display: grid;
  gap: 16px;
  max-width: 1400px;
}
.imax-grid-2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.imax-grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Entity card */
.imax-entity-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.imax-entity-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.imax-entity-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imax-entity-img-empty { color: rgba(255,255,255,0.35); flex-direction: column; gap: 8px; }
.imax-entity-empty-icon { font-size: 48px; opacity: 0.5; }
.imax-entity-empty-label { font-size: 12px; }
.imax-entity-img-loading { flex-direction: column; gap: 12px; }
.imax-entity-img-error { background: rgba(255, 80, 80, 0.1); color: #ff7c7c; flex-direction: column; gap: 8px; font-size: 12px; padding: 12px; text-align: center; }
.imax-entity-img-regen {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.imax-entity-card:hover .imax-entity-img-regen { opacity: 1; }
.imax-entity-version-nav { bottom: 8px; }
.imax-cref-analysis {
  margin-top: 8px;
  color: #88d9c9;
  font-size: 11px;
  line-height: 1.4;
}
.imax-cref-analysis-error { color: #ff9a9a; }
.imax-entity-meta { display: flex; flex-direction: column; gap: 8px; }
.imax-entity-name {
  width: 100%;
  padding: 6px 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}
.imax-entity-desc {
  width: 100%;
  padding: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  resize: vertical;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
  box-sizing: border-box;
}
.imax-entity-source {
  font-size: 11px;
  color: #00d4aa;
  padding: 4px 8px;
  background: rgba(0, 212, 170, 0.08);
  border-radius: 4px;
}
.imax-entity-actions { display: flex; flex-direction: column; gap: 6px; }

/* Step 6 — shots production */
/* ATELIÉR 1.0 — karty pod sebou (frame + video bunky vedľa seba v karte). */
.imax-shots-grid { display: flex; flex-direction: column; gap: 16px; width: 100%; }
/* ATELIÉR 2.0 — dva shoty vedľa seba (pure-t2v karta má len video stĺpec). */
.imax-shots-grid-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .imax-shots-grid-v2 { grid-template-columns: 1fr; } }
.imax-shot-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px;
}
.imax-shot-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.imax-shot-num {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, #00d4aa, #00a382);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  color: #0a0e14;
  font-size: 14px;
}
.imax-shot-label { font-size: 15px; font-weight: 600; color: #fff; flex: 1; min-width: 140px; }
.imax-shot-desc { color: rgba(255,255,255,0.7); font-size: 13px; margin: 6px 0 12px 0; line-height: 1.5; }
.imax-shot-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
/* Pure t2v — shot má už len VIDEO stĺpec (frame bunka zrušená). Karta je v
   2-stĺpcovej mriežke shotov, takže video vyplní bunku bez roztiahnutia. */
.imax-shot-cells-video-only { grid-template-columns: 1fr; }
@media (max-width: 900px) { .imax-shot-cells { grid-template-columns: 1fr; } }
/* Príbeh box sa roztiahne podľa výšky obrazovky — celý KROK 1 vyplnený, bez
   prázdna dole a bez scrollu (škáluje s viewportom na akomkoľvek monitore). */
/* KROK 1 vyplní celú výšku stage-u: príbeh box rastie a zaberie len priestor,
   ktorý zvýši po formáte/štýle/kvalite — všetko vidno, bez scrollu aj bez prázdna. */
.imax-step1 { display: flex; flex-direction: column; min-height: 100%; }
.imax-step1 .imax-story-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.imax-step1 .imax-story-card .imax-textarea { flex: 1 1 auto; min-height: 96px; resize: none; }
/* ── KVALITA FILMU (KROK 1) — dlaždice s $ v pravom hornom rohu ── */
.imax-quality-card { margin-top: 12px; }
.imax-quality-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
@media (max-width: 560px) { .imax-quality-row { grid-template-columns: 1fr; } }
.imax-quality-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.10); transition: all .12s ease; }
.imax-quality-tile:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.05); }
.imax-quality-tile.is-selected { border-color: #d1ef17; background: rgba(209,239,23,.10); box-shadow: 0 0 0 1px rgba(209,239,23,.30); }
.imax-quality-cost { position: absolute; top: 9px; right: 12px; font-size: 14px; font-weight: 800; letter-spacing: .5px; color: #4b5563; }
.imax-quality-tile.is-selected .imax-quality-cost { color: #d1ef17; }
.imax-quality-label { font-size: 14px; font-weight: 700; color: #f3f4f6; padding-right: 34px; }
.imax-quality-desc { font-size: 11px; color: #9aa2ad; }
/* ── KROK 2 (plán) — multishot vizuálne odlíšenie ── */
.imax-shot-plan-card-multi { border-color: rgba(209,239,23,.45) !important; box-shadow: inset 0 0 0 1px rgba(209,239,23,.14); }
.imax-shot-plan-num-multi { background: #d1ef17 !important; color: #14161a !important; }
.imax-shot-plan-fmt-row { margin: 6px 0 8px; }
.imax-plan-fmt-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; }
.imax-plan-fmt-single { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1; }
.imax-plan-fmt-multi { background: rgba(209,239,23,.14); border: 1px solid rgba(209,239,23,.5); color: #d1ef17; }
/* ── Formát záberu (jeden / multishot) ── */
.imax-chip-format { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #cbd5e1; }
.imax-chip-format.imax-chip-multishot { background: rgba(209,239,23,.12); border-color: rgba(209,239,23,.4); color: #d1ef17; }
.imax-shot-format-hint { font-size: 11px; line-height: 1.4; color: #8a929c; margin: 2px 0 6px; }
/* ── ATELIÉR VERSION CHOOSER (1.0 / 2.0) ── */
.atelier-chooser-overlay { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; }
.atelier-chooser-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
.atelier-chooser-box { position: relative; width: min(680px, 92vw); background: rgba(18,20,26,.97);
  border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 28px; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.atelier-chooser-title { font-size: 22px; font-weight: 800; letter-spacing: .14em; color: #f3f4f6; text-align: center; }
.atelier-chooser-sub { font-size: 13px; color: #9aa2ad; text-align: center; margin: 4px 0 20px; }
.atelier-chooser-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .atelier-chooser-tiles { grid-template-columns: 1fr; } }
.atelier-chooser-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 18px; border-radius: 16px; cursor: pointer; background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.12); transition: all .15s ease; }
.atelier-chooser-tile:hover { border-color: #00d4aa; background: rgba(0,212,170,.08); transform: translateY(-2px); }
.atelier-chooser-tile-v2:hover { border-color: #d1ef17; background: rgba(209,239,23,.08); }
.atelier-chooser-ver { font-size: 26px; font-weight: 900; color: #00d4aa; line-height: 1; }
.atelier-chooser-tile-v2 .atelier-chooser-ver { color: #d1ef17; }
.atelier-chooser-name { font-size: 15px; font-weight: 700; color: #f3f4f6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atelier-chooser-badge { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px;
  background: rgba(209,239,23,.14); border: 1px solid rgba(209,239,23,.4); color: #d1ef17; }
.atelier-chooser-desc { font-size: 12px; line-height: 1.5; color: #9aa2ad; }
/* ── COVER FILMU (Netflix dlaždica, 21:9) ── */
.imax-cover-section { margin-bottom: 20px; }
.imax-cover-card { display: grid; grid-template-columns: minmax(300px, 460px) 1fr; gap: 22px; align-items: center;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 16px; }
.imax-cover-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 21/9;
  display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); }
.imax-cover-img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.imax-cover-img.imax-shot-img-empty { flex-direction: column; gap: 6px; color: #6b7280; font-size: 30px; }
.imax-cover-img.imax-shot-img-empty .imax-shot-img-empty-label { font-size: 12px; }
.imax-cover-side { display: flex; flex-direction: column; gap: 8px; }
.imax-cover-eyebrow { font-size: 11px; letter-spacing: .12em; color: #8a929c; }
.imax-cover-title { font-size: 24px; font-weight: 800; letter-spacing: .02em; color: #f3f4f6; line-height: 1.1; }
.imax-cover-hint { font-size: 12px; line-height: 1.5; color: #9aa2ad; margin: 2px 0 6px; max-width: 46ch; }
.imax-cover-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.imax-cover-model-row { display: flex; align-items: center; gap: 8px; }
.imax-cover-model-lbl { font-size: 11px; letter-spacing: .04em; color: #8a929c; white-space: nowrap; }
.imax-cover-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .imax-cover-card { grid-template-columns: 1fr; align-items: stretch; } }
.imax-shot-cell { display: flex; flex-direction: column; gap: 8px; }
.imax-shot-cell .imax-shot-img,
.imax-shot-cell .imax-shot-vid { margin-top: 0; }
/* Button vždy na spodku cell-y (push to bottom) aby image/video stred sedel */
.imax-shot-cell > button:last-child { margin-top: auto; }

/* ─── Per-shot visibility toggle (eye icon v hlavičke shotu) ─── */
.imax-shot-eye-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.imax-shot-eye-btn:hover {
  background: rgba(0,212,170,0.12);
  border-color: rgba(0,212,170,0.4);
  color: #00d4aa;
  transform: scale(1.06);
}
.imax-shot-eye-btn svg {
  display: block;
}

/* Hidden state — card ostáva PLNÁ veľkost (description + image/video pruh),
   len opacity sa znižuje (ako vypnutá vrstva v Photoshope / disabled clip v Premiere).
   Layout/štruktúra sa nezmení → user vidí čo skrýva, len je to "stlmené". */
.imax-shot-card-hidden {
  background: rgba(255,255,255,0.015);
  border-style: dashed;
  border-color: rgba(255,255,255,0.10);
}
.imax-shot-card-hidden > *:not(.imax-shot-card-head) {
  opacity: 0.35;
  filter: grayscale(0.6);
  pointer-events: none;             /* nedá sa kliknúť na disabled obsah */
  transition: opacity 0.18s ease, filter 0.18s ease;
}
.imax-shot-card-hidden:hover > *:not(.imax-shot-card-head) {
  opacity: 0.55;
  filter: grayscale(0.3);
}
.imax-shot-card-hidden .imax-shot-num {
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.06));
  color: rgba(255,255,255,0.55);
}
.imax-shot-card-hidden .imax-shot-label {
  text-decoration: line-through;
  color: rgba(255,255,255,0.55);
}
.imax-shot-card-hidden .imax-shot-eye-btn {
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.45);
}
.imax-shot-card-hidden .imax-shot-eye-btn:hover {
  background: rgba(0,212,170,0.12);
  color: #00d4aa;
}

/* Pill badge "SKRYTÝ" — vedľa label v hlavičke */
.imax-shot-hidden-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   KROK 7 — FILM (Netflix-style player)
   ═══════════════════════════════════════════════════════════ */
.imax-step7-edit {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* ═══ Filmový prehrávač ═══ */
.imax-cinema {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.imax-cinema-screen {
  position: relative;
  background: #000;
  width: 80%;
  max-width: 1100px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
}
.imax-cinema-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.52), transparent 28%),
    linear-gradient(0deg, rgba(0,0,0,.38), transparent 25%);
}

.imax-cinema-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: #000;
}
.imax-cinema-video.is-active {
  display: block;
}
.imax-film-player-brand,
.imax-film-player-title {
  position: absolute;
  left: 22px;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.imax-film-player-brand {
  top: 18px;
  color: rgba(255,255,255,.88);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
}
.imax-film-player-brand span { color: #00d4aa; font-size: 14px; }
.imax-film-player-title {
  top: 42px;
  color: #fff;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 700;
}
.imax-cinema-empty {
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 180, 100, 0.85);
  font-size: 14px;
}

.imax-cinema-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 80%;
  max-width: 1100px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  flex-wrap: nowrap;
}
@media (max-width: 900px) {
  .imax-cinema-screen,
  .imax-cinema-controls { width: 100%; }
  .imax-film-player-brand,
  .imax-film-player-title { left: 14px; }
}

/* Transport tlačidlá — skip back, skip fwd */
.imax-tl-ctrl-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.imax-tl-ctrl-btn:hover {
  background: rgba(0, 212, 170, 0.15);
  color: #00d4aa;
  transform: scale(1.04);
}

/* Play tlačidlo už definované — len doplníme presné rozmery + override aby
   sedelo s transport bar-om. */
.imax-cinema-controls .imax-tl-play-btn {
  width: 38px;
  height: 38px;
  font-size: 14px;
  flex-shrink: 0;
}

/* Time display monospace */
.imax-tl-time {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 6px;
  flex-shrink: 0;
}

/* Scrubber bar — tenký, flex-grow aby vyplnil priestor */
.imax-tl-scrubber {
  flex: 1;
  height: 28px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  min-width: 60px;
}
.imax-tl-scrubber::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  transform: translateY(-50%);
}
.imax-tl-scrubber-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  background: linear-gradient(90deg, #00d4aa, #00a382);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}
.imax-tl-scrubber-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00d4aa;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: transform 0.1s ease;
}
.imax-tl-scrubber:hover .imax-tl-scrubber-thumb {
  transform: translate(-50%, -50%) scale(1.2);
}

/* Mute button — používa imax-tl-ctrl-btn ale s slightly different colors */
.imax-tl-mute-btn {
  flex-shrink: 0;
}

/* Volume slider */
.imax-tl-volume {
  width: 70px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.imax-tl-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00d4aa;
  cursor: grab;
  border: 2px solid rgba(0, 0, 0, 0.4);
}
.imax-tl-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00d4aa;
  cursor: grab;
  border: 2px solid rgba(0, 0, 0, 0.4);
}

/* Shot label — current shot info, pravý okraj */
.imax-tl-shot-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  flex-shrink: 1;
  padding-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Na užších obrazovkách (pod 900px) zväčšiť na 70% aby bolo čitateľné */
@media (max-width: 900px) {
  .imax-cinema-screen { width: 80%; }
}

/* PREVIEW player (legacy — nahradené cinema theme; držíme pre fallback) */
.imax-tl-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00d4aa;
  border: none;
  color: #0a0e14;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.imax-tl-play-btn:hover {
  transform: scale(1.06);
}
.imax-tl-time {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}

/* TIMELINE wrapper — scroll-x */
.imax-tl-wrap {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

/* Ruler — time markers */
.imax-tl-ruler {
  position: relative;
  height: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.imax-tl-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.imax-tl-tick-label {
  position: absolute;
  left: 4px;
  top: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Track rows */
.imax-tl-track {
  position: relative;
  height: 68px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.imax-tl-track-video {
  height: 80px;
  background: linear-gradient(180deg, rgba(0, 212, 170, 0.04), transparent);
}
.imax-tl-track-music {
  height: 40px;
  background: rgba(120, 90, 255, 0.04);
  position: relative;
}
/* Stopa Efekty — krátke diegetické zvuky (ElevenLabs Sound Effects) položené
   na konkrétnu sekundu. Hudba je samostatná stopa vyššie. */
.imax-tl-track-sfx {
  height: 34px;
  background: rgba(0, 212, 170, 0.045);
  position: relative;
}
.imax-tl-sfx-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.imax-tl-sfx-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.imax-tl-sfx-empty {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  pointer-events: none;
}
.imax-tl-sfx-clip {
  position: absolute;
  top: 5px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(0, 212, 170, 0.18);
  border: 1px solid rgba(0, 212, 170, 0.4);
  overflow: hidden;
  box-sizing: border-box;
}
.imax-tl-sfx-clip.is-pending {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  border-style: dashed;
}
.imax-tl-sfx-clip.is-error {
  background: rgba(255, 80, 80, 0.14);
  border-color: rgba(255, 80, 80, 0.42);
}
.imax-tl-sfx-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imax-tl-sfx-del {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 2px;
}
.imax-tl-sfx-del:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Music track row (Phase 2 ElevenLabs)
   ═══════════════════════════════════════════════════════════ */
/* Empty state — kliknuteľný button + hint */
.imax-tl-music-empty {
  position: absolute;
  top: 50%;
  left: 0;
  padding-left: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}
.imax-tl-music-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}

/* Generating state — malý spinner + progress + tiny ✕ cancel */
.imax-tl-music-generating {
  position: absolute;
  top: 50%;
  left: 0;
  padding-left: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(180, 160, 255, 0.95);
}
.imax-tl-music-progress {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.imax-tl-music-cancel {
  background: rgba(255, 100, 100, 0.12);
  border: 1px solid rgba(255, 100, 100, 0.28);
  color: #ff8080;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  cursor: pointer;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.imax-tl-music-cancel:hover {
  background: rgba(255, 80, 80, 0.4);
}

/* Tiny spinner pre generating state — diskrétne kolečko v music track row */
.imax-spinner-tiny {
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(180, 140, 255, 0.2);
  border-top-color: #c9a8ff;
  border-radius: 50%;
  animation: imax-spin 0.8s linear infinite;
}
@keyframes imax-spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.imax-tl-music-error {
  position: absolute;
  top: 50%;
  left: 0;
  padding-left: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ff9090;
  font-size: 12px;
}

/* Ready state — fialový bar so styles label, volume slider, version nav.
   Drag handler na celom clipe (okrem .imax-tl-music-actions ktoré stopPropagationujú). */
.imax-tl-music-clip {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(140, 100, 255, 0.32),
    rgba(180, 130, 255, 0.18));
  border: 1px solid rgba(180, 140, 255, 0.35);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 14px;
  min-width: 80px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.imax-tl-music-clip:active {
  cursor: grabbing;
}

/* Waveform wrapper — full duration audio width, ale klip má overflow:hidden
   takže keď waveform translateX(-trimStartPx), viditeľná časť je iba "trimmed slice". */
.imax-tl-music-waveform-wrap {
  position: absolute;
  inset: 6px 0;
  pointer-events: none;
  z-index: 0;
  /* Section markers position absolute voči tomuto wrap-u, takže transform ich
     posúva spolu s waveform-om — zostávajú zarovnané s audio peakmi. */
}
.imax-tl-music-clip {
  overflow: hidden;   /* oreže waveform pri trim-e */
}
/* Waveform — SVG filled path symmetrický okolo center line (DAW-style ako Premiere /
   Audacity / Logic Pro). */
.imax-tl-music-waveform {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(220, 200, 255, 0.55);
}
.imax-tl-music-waveform svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* TRIM HANDLES — vertikálne čiary na ľavom/pravom kraji klipu. Drag = orez audia. */
.imax-tl-music-trim-handle {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 6px;
  background: rgba(255, 255, 255, 0.18);
  cursor: ew-resize;
  z-index: 3;
  transition: background 0.12s;
}
.imax-tl-music-trim-handle:hover {
  background: rgba(200, 168, 255, 0.85);
}
.imax-tl-music-trim-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 14px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 1px;
}
.imax-tl-music-trim-handle-left  { left: 0; border-radius: 6px 0 0 6px; }
.imax-tl-music-trim-handle-right { right: 0; border-radius: 0 6px 6px 0; }

/* FADE OVERLAYS — diagonal gradient mask (in: čierno → priehľadné, out: priehľadné → čierno) */
.imax-tl-music-fade {
  position: absolute;
  top: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.imax-tl-music-fade-in {
  left: 0;
  background: linear-gradient(90deg, rgba(15, 10, 30, 0.85) 0%, rgba(15, 10, 30, 0) 100%);
}
.imax-tl-music-fade-out {
  right: 0;
  background: linear-gradient(270deg, rgba(15, 10, 30, 0.85) 0%, rgba(15, 10, 30, 0) 100%);
}

/* Trimmed label — drobný "(z 0:35)" badge ukazuje plnú vs orezanú dĺžku */
.imax-tl-music-trimmed {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  margin-left: 4px;
}

/* FADE HANDLES — drobné kruhové body na hornej hrane bar-u. Drag dovnútra
   predĺži fade duration. Vždy viditeľné, aj keď fade je 0 (handle sa drží
   na kraji a user ho vytiahne dovnútra). */
.imax-tl-music-fade-handle {
  position: absolute;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.95);
  cursor: ew-resize;
  z-index: 4;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s, background 0.12s;
}
.imax-tl-music-fade-handle:hover {
  background: #00ffd0;
  transform: translateX(-50%) scale(1.2);
}
/* IN handle posicionuje od ľavej (left:fadeInPx) — translateX(-50%) ho centruje na danú pixel pozíciu */
.imax-tl-music-fade-handle-in {
  /* left set via inline style */
}
.imax-tl-music-fade-handle-out {
  /* right set via inline style — pre out musíme transform-ovať doprava */
  transform: translateX(50%);
}
.imax-tl-music-fade-handle-out:hover {
  transform: translateX(50%) scale(1.2);
}


/* Section markers — vertikálne čiary kde začínajú novú sekciu plánu
   (build → climax → outro). Pomáha visualne overiť dynamiku. */
.imax-tl-music-section-marker {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 1;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* (Dead — controls boli presunuté von z baru do .imax-tl-music-header.
   Selektor zostáva ako no-op pre prípad budúcich úprav v bar-e.) */
/* HEADER row — controls VONKU z music bar-u. Thin strip nad music track row.
   Obsahuje názov žánru + dĺžku + version nav + volume + regen + delete.
   Tým nič neprekrýva waveform bar a aj koniec songu je vždy vidieť. */
.imax-tl-music-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 12px;
  margin-top: 2px;
  background: rgba(120, 90, 255, 0.06);
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid rgba(180, 140, 255, 0.15);
  font-size: 11.5px;
  position: relative;
  z-index: 1;
}
.imax-tl-music-title {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.imax-tl-music-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Music track row pod header-om — bez top borderu, plynule navnedáva na header */
.imax-tl-music-header + .imax-tl-track-music {
  border-radius: 0 0 6px 6px;
  margin-bottom: 2px;
}
.imax-tl-music-ver-btn {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 1px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.imax-tl-music-ver-btn:hover {
  background: rgba(140, 100, 255, 0.7);
  border-color: rgba(180, 140, 255, 0.8);
}
.imax-tl-music-ver-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 3px;
}
.imax-tl-music-volume {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  outline: none;
}
.imax-tl-music-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9a8ff;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.8);
}
.imax-tl-music-volume::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9a8ff;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.8);
}
.imax-tl-music-vol-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  min-width: 30px;
  text-align: right;
}
.imax-tl-music-action-btn {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.12s;
}
.imax-tl-music-action-btn:hover {
  background: rgba(140, 100, 255, 0.6);
  border-color: rgba(180, 140, 255, 0.7);
}
.imax-tl-music-delete:hover {
  background: rgba(255, 80, 80, 0.7);
  border-color: rgba(255, 100, 100, 0.7);
}

/* Spinner small */
.imax-spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(180, 140, 255, 0.2);
  border-top-color: #c9a8ff;
}

/* CLIPS — proporcionálna šírka, drag handles */
.imax-tl-clip {
  position: absolute;
  top: 6px;
  bottom: 6px;
  background: linear-gradient(180deg, rgba(0, 212, 170, 0.22), rgba(0, 212, 170, 0.12));
  border: 1px solid rgba(0, 212, 170, 0.4);
  border-radius: 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: move;
  user-select: none;
  transition: background 0.15s ease;
}
.imax-tl-clip:hover {
  background: linear-gradient(180deg, rgba(0, 212, 170, 0.3), rgba(0, 212, 170, 0.18));
}
.imax-tl-clip-empty {
  background: rgba(255, 100, 100, 0.12);
  border-color: rgba(255, 100, 100, 0.35);
  cursor: not-allowed;
}
.imax-tl-clip-thumb {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  opacity: 0.5;
  pointer-events: none;
}
.imax-tl-clip-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imax-tl-clip-body {
  position: relative;
  z-index: 1;
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  pointer-events: auto;
  cursor: grab;
}
.imax-tl-clip-body:active { cursor: grabbing; }
.imax-tl-clip-label {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imax-tl-clip-dur {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Trim handles — drag the edges */
.imax-tl-clip-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  cursor: ew-resize;
  z-index: 2;
  transition: background 0.15s ease;
}
.imax-tl-clip-handle:hover {
  background: #00d4aa;
}
.imax-tl-clip-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1px;
}
.imax-tl-clip-handle-left  { left: 0;  border-radius: 6px 0 0 6px; }
.imax-tl-clip-handle-right { right: 0; border-radius: 0 6px 6px 0; }

/* PLAYHEAD — absolute vertical line */
.imax-tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff5f6d;
  /* Pointer events ENABLED — user môže grab-núť čiaru a drag-núť. Wider hit area
     cez ::after invisible padder (16px celkom šírka kliku). */
  pointer-events: auto;
  cursor: ew-resize;
  z-index: 10;
  box-shadow: 0 0 6px rgba(255, 95, 109, 0.6);
}
.imax-tl-playhead::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -5px;
  width: 12px;
  height: 12px;
  background: #ff5f6d;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 95, 109, 0.8);
  cursor: ew-resize;
}
/* Invisible expanded hit area pre ľahšie chytenie 2px čiary */
.imax-tl-playhead::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7px;
  right: -7px;
}
.imax-tl-playhead:hover {
  background: #ff7a87;
  box-shadow: 0 0 10px rgba(255, 95, 109, 0.9);
}
.imax-tl-playhead:hover::before {
  transform: scale(1.15);
}
.imax-tl-playhead.is-dragging {
  background: #ff7a87;
}
.imax-tl-playhead.is-dragging::before {
  transform: scale(1.25);
}

/* Click-to-seek overlay — invisible, captures clicks on timeline area */
.imax-tl-clickoverlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 26px;   /* iba na ruler — clipy zostávajú interaktívne */
  z-index: 5;
  cursor: pointer;
}

/* Shot edit row — input "Popíš zmenu..." + Upraviť tlačidlo pod frame-om */
.imax-shot-edit-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 2px 0 4px;
}
.imax-shot-edit-input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-width: 0;
}
.imax-shot-edit-input::placeholder {
  color: rgba(255, 255, 255, 0.32);
  font-style: italic;
}
.imax-shot-edit-input:focus {
  border-color: rgba(0, 212, 170, 0.5);
  background: rgba(0, 212, 170, 0.05);
}
.imax-shot-edit-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.imax-shot-edit-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Resync bar — zobrazí sa hore v Kroku 6 keď sú pending video gen-y */
.imax-resync-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, rgba(0, 212, 170, 0.06), rgba(120, 90, 255, 0.06));
  border: 1px solid rgba(0, 212, 170, 0.18);
  border-radius: 12px;
}
.imax-resync-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.imax-resync-bar .imax-btn {
  flex-shrink: 0;
}

.imax-shot-cell-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  min-height: 28px;   /* zhodná výška s VIDEO labelom ktorý má select inline */
}
.imax-shot-cell-label-row {
  gap: 10px;
  flex-wrap: wrap;
}
.imax-shot-img, .imax-shot-vid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.imax-shot-img img, .imax-shot-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.imax-shot-img-empty, .imax-shot-vid-empty {
  color: rgba(255,255,255,0.35); font-size: 12px;
  flex-direction: column; gap: 8px; text-align: center; padding: 12px;
}
.imax-shot-img-empty > div:first-child { font-size: 36px; opacity: 0.4; }
.imax-shot-img-loading, .imax-shot-vid-loading {
  flex-direction: column; gap: 10px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  text-align: center;
  padding: 14px;
}
.imax-shot-img-progress {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
  max-width: 80%;
}
.imax-shot-img-error, .imax-shot-vid-error {
  flex-direction: column; gap: 6px; padding: 14px;
  background: rgba(255, 80, 80, 0.08);
  color: #ff7c7c; font-size: 12px;
  text-align: center;
}
.imax-shot-prompts { margin-top: 12px; }
.imax-shot-prompts > summary {
  cursor: pointer; color: rgba(255,255,255,0.5);
  font-size: 11px; padding: 4px 0; user-select: none;
}
.imax-shot-prompt-block {
  background: rgba(0,0,0,0.3);
  padding: 12px;
  border-radius: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}
.imax-shot-prompt-block pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.5;
  margin: 6px 0 12px 0;
  color: rgba(255,255,255,0.85);
}
.imax-shot-prompt-block code {
  display: inline-block; padding: 1px 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px; font-size: 11px;
}

/* Music card */
.imax-card-music { padding: 16px; }
.imax-music-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.imax-music-player {
  padding: 16px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  margin: 8px 0;
  text-align: center;
}
.imax-music-loading, .imax-music-empty, .imax-music-error {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.imax-music-error { color: #ff7c7c; }
.imax-music-title { margin-top: 8px; color: rgba(255,255,255,0.8); font-size: 13px; }
.imax-music-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Avatar picker modal */
.imax-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
}
.imax-modal {
  background: #11161f;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  max-width: 720px;
  width: 100%;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.imax-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.imax-modal-header h3 { margin: 0; font-size: 16px; color: #fff; }
.imax-modal-close {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}
.imax-modal-body { padding: 20px; overflow-y: auto; }
.imax-avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.imax-avatar-pick {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  transition: all 0.15s;
}
.imax-avatar-pick:hover {
  border-color: rgba(0, 212, 170, 0.5);
  background: rgba(0, 212, 170, 0.06);
}
.imax-avatar-pick img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; border-radius: 6px;
  display: block;
  background: rgba(0,0,0,0.3);
}
.imax-avatar-pick-name {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  color: rgba(255,255,255,0.85);
}

/* Spinner */
.imax-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(0, 212, 170, 0.2);
  border-top-color: #00d4aa;
  border-radius: 50%;
  animation: imax-spin 0.8s linear infinite;
}
@keyframes imax-spin { to { transform: rotate(360deg); } }
.imax-loading-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 8px; }
.imax-error-icon { font-size: 24px; }
.imax-error-msg { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Netflix-style Dashboard
   ═══════════════════════════════════════════════════════════ */
.netflix-dashboard {
  /* full-bleed — vystúpi z rodičovského .imax-stage paddingu (32px 40px) */
  margin: -32px -40px -60px;
  padding-bottom: 60px;
}
@media (max-width: 900px) {
  .netflix-dashboard { margin: -32px -28px -60px; }
}

/* ── HERO (cinematic banner) ──────────────────────────── */
.netflix-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .netflix-hero { min-height: 420px; }
}
.netflix-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s ease-out;
  /* 10% sharpen (SVG unsharp-mask kernel, def v renderDashboard) + 10% sýtosť.
     Sharpen ide LEN na image layer (gradient overlay je samostatný element
     .netflix-hero-overlay → žiadny banding na gradient prechode). */
  filter: url(#heroSharpen) saturate(1.10);
  -webkit-filter: url(#heroSharpen) saturate(1.10);
}
/* Gradient overlay — samostatná vrstva NAD image, POD content. Žiadny filter
   tu nepôsobí → čistý gradient bez posterization. */
.netflix-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Filmový prechod pri automatickom alebo ručnom prepnutí Hero. */
.netflix-hero.is-leaving .netflix-hero-bg,
.netflix-hero.is-leaving .netflix-hero-overlay,
.netflix-hero.is-leaving .netflix-hero-content {
  animation: netflixHeroFadeOut 180ms ease-in both;
}
.netflix-hero.is-entering .netflix-hero-bg,
.netflix-hero.is-entering .netflix-hero-overlay {
  animation: netflixHeroFadeIn 420ms ease-out both;
}
.netflix-hero.is-entering .netflix-hero-content {
  animation: netflixHeroContentIn 460ms ease-out both;
}
@keyframes netflixHeroFadeIn {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes netflixHeroFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes netflixHeroContentIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .netflix-hero.is-entering .netflix-hero-bg,
  .netflix-hero.is-entering .netflix-hero-overlay,
  .netflix-hero.is-entering .netflix-hero-content {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   SHOT PICKER MODAL — vyber shot pre hero thumbnail
   ═══════════════════════════════════════════════════════════ */
.imax-shot-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 27500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.imax-shot-picker-overlay.is-visible { opacity: 1; }
.imax-shot-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.imax-shot-picker-box {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 64px);
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 28px 30px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  transform: scale(0.96);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.imax-shot-picker-overlay.is-visible .imax-shot-picker-box { transform: scale(1); }

.imax-shot-picker-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.imax-shot-picker-close:hover {
  background: rgba(255,80,100,0.18);
  border-color: rgba(255,80,100,0.55);
  color: #ff8a98;
}

.imax-shot-picker-h {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  padding-right: 40px;
}
.imax-shot-picker-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin: 0 0 22px;
  line-height: 1.5;
}

.imax-shot-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding-right: 6px;
  margin-right: -6px;
}

.imax-shot-picker-card {
  background: rgba(255,255,255,0.025);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #fff;
  overflow: hidden;
  transition: background 220ms ease, border-color 220ms ease, transform 200ms ease;
}
.imax-shot-picker-card:hover {
  background: rgba(0, 212, 170, 0.06);
  border-color: rgba(0, 212, 170, 0.45);
  transform: translateY(-2px);
}
.imax-shot-picker-card.is-current {
  background: rgba(0, 212, 170, 0.08);
  border-color: rgba(0, 212, 170, 0.55);
}
.imax-shot-picker-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #0a0a14;
}
.imax-shot-picker-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 212, 170, 0.92);
  color: #052821;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.imax-shot-picker-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px 12px;
}
.imax-shot-picker-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.15);
  color: #00d4aa;
  font-size: 11.5px;
  font-weight: 800;
  flex-shrink: 0;
}
.imax-shot-picker-title {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .imax-shot-picker-box { padding: 22px 18px; }
  .imax-shot-picker-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .imax-shot-picker-h { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   TRAILER LIGHTBOX — Netflix-style full-screen video player
   ═══════════════════════════════════════════════════════════ */
.imax-trailer-lightbox {
  position: fixed;
  inset: 0;
  z-index: 27000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.imax-trailer-lightbox.is-visible { opacity: 1; }
.imax-trailer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}
.imax-trailer-stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  transform: scale(0.96);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.imax-trailer-lightbox.is-visible .imax-trailer-stage { transform: scale(1); }
.imax-trailer-video {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 10px;
  display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,0.75);
  outline: none;
}
.imax-trailer-title {
  position: absolute;
  top: -42px;
  left: 4px;
  color: rgba(255,255,255,0.88);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.imax-trailer-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 5;
  width: 44px;
  height: 44px;
  background: rgba(10, 12, 18, 0.7);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 180ms ease, border-color 180ms ease, transform 140ms ease;
}
.imax-trailer-close:hover {
  background: rgba(255, 80, 100, 0.22);
  border-color: rgba(255, 80, 100, 0.55);
  transform: scale(1.08);
}
.imax-trailer-close:active { transform: scale(0.94); }

/* ─── Project player — vlastné ovládanie (jedna lišta cez celý film) ─── */
.imax-player-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.80), rgba(0,0,0,0.32) 58%, transparent);
  border-radius: 0 0 10px 10px;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.imax-trailer-stage.is-idle .imax-player-bar { opacity: 0; }
.imax-trailer-stage.is-idle { cursor: none; }
.imax-trailer-stage .imax-trailer-video { cursor: pointer; }
.imax-player-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  background: none; border: none; border-radius: 8px;
  color: #fff; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.imax-player-btn:hover { background: rgba(255,255,255,0.16); }
.imax-player-btn:active { transform: scale(0.92); }
.imax-player-btn svg { width: 22px; height: 22px; display: block; }
.imax-player-time {
  flex: 0 0 auto;
  min-width: 40px;
  text-align: center;
  color: rgba(255,255,255,0.86);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.imax-player-seek {
  position: relative;
  flex: 1 1 auto;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.imax-player-seek-track {
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.26);
  overflow: hidden;
}
.imax-player-seek-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--accent, #00d4aa);
  border-radius: 3px;
}
.imax-player-seek-knob {
  position: absolute;
  top: 50%; left: 0%;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.imax-player-seek:hover .imax-player-seek-knob { opacity: 1; }

@media (max-width: 700px) {
  .imax-trailer-lightbox { padding: 16px; }
  .imax-trailer-close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .imax-trailer-title { font-size: 14px; top: -28px; }
  .imax-player-bar { gap: 8px; padding: 28px 10px 12px; }
  .imax-player-time { min-width: 34px; font-size: 11px; }
}
.netflix-hero:hover .netflix-hero-bg {
  transform: scale(1.04);   /* subtle parallax na hover */
}

/* Náhľad filmu — pravý horný roh, viditeľný na hover */
.netflix-hero-edit-btn {
  /* Pozícia rieši rodičovský .netflix-hero-corner-actions */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(10, 12, 18, 0.72);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms ease, transform 220ms ease, background 180ms ease, border-color 180ms ease;
}
.netflix-hero:hover .netflix-hero-edit-btn {
  opacity: 1;
  transform: translateY(0);
}
.netflix-hero-edit-btn:hover {
  background: rgba(0, 212, 170, 0.18);
  border-color: rgba(0, 212, 170, 0.55);
  color: #fff;
}
.netflix-hero-edit-btn:disabled {
  cursor: wait;
  opacity: 0.58;
  background: rgba(10, 12, 18, 0.78);
  border-color: rgba(255,255,255,0.12);
}
.netflix-hero:hover .netflix-hero-edit-btn:disabled {
  opacity: 0.72;
}
.netflix-hero-edit-btn svg {
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .netflix-hero-edit-btn {
    opacity: 1;          /* na mobile vždy viditeľné (no hover) */
    transform: none;
    padding: 7px 12px;
    font-size: 11.5px;
  }
  .netflix-hero-edit-btn span { display: none; } /* len ikona */
}

.netflix-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 64px 64px 70px;
  width: 100%;
}

/* Hero carousel — stále dostupný, automatické striedanie dopĺňa manuálne šípky. */
.netflix-hero-switcher {
  position: absolute;
  right: 22px;
  bottom: 24px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(8, 10, 15, 0.70);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.netflix-hero:hover .netflix-hero-switcher,
.netflix-hero-switcher:focus-within {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.netflix-hero-switcher-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255,255,255,0.92);
  font: 400 29px/1 Arial, sans-serif;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.netflix-hero-switcher-btn:hover {
  color: #00d4aa;
  background: rgba(255,255,255,0.10);
  transform: scale(1.06);
}
.netflix-hero-switcher-btn:focus-visible {
  outline: 2px solid #00d4aa;
  outline-offset: 1px;
}
.netflix-hero-switcher-count {
  min-width: 42px;
  text-align: center;
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .netflix-hero-switcher {
    right: 14px;
    bottom: 14px;
    padding: 4px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .netflix-hero-switcher-btn { width: 29px; height: 29px; font-size: 26px; }
  .netflix-hero-switcher-count { min-width: 36px; font-size: 11px; }
}
@media (max-width: 900px) {
  .netflix-hero-content { padding: 40px 24px 36px; }
}

.netflix-hero-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.35em;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.netflix-hero-badge-brand {
  font-weight: 900;
  color: #00d4aa;
  letter-spacing: 0.35em;
}
.netflix-hero-badge-orig {
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: 12px;
}

.netflix-hero-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px 0;
  letter-spacing: -0.02em;
  line-height: 0.96;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
  text-transform: uppercase;     /* Netflix-style — vždy CAPS */
}

.netflix-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
  font-weight: 500;
}
.nfx-meta-genre {
  color: #00d4aa;
  font-weight: 700;
}

.netflix-hero-desc {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin: 0 0 24px 0;
  max-width: 580px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
@media (max-width: 900px) {
  .netflix-hero-desc { font-size: 14px; }
}

.netflix-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.netflix-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.18s ease;
  border: none;
}
.netflix-btn svg { flex-shrink: 0; }

.netflix-btn-play {
  background: #fff;
  color: #0a0a14;
  box-shadow: 0 4px 18px rgba(255,255,255,0.18);
}
.netflix-btn-play:hover {
  background: rgba(255,255,255,0.85);
  transform: translateY(-1px);
}

.netflix-btn-list {
  background: rgba(110, 110, 110, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
}
.netflix-btn-list:hover {
  background: rgba(110, 110, 110, 0.75);
  transform: translateY(-1px);
}

/* ── ROW (horizontal scrollable list) ─────────────────── */
.netflix-row {
  padding: 28px 64px 4px;
}
@media (max-width: 900px) {
  .netflix-row { padding: 22px 24px 4px; }
}
.netflix-row-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px 0;
  letter-spacing: -0.005em;
}

/* Track — natívny horizontal scroll (žiadne arrows).
   Padding navrch + boky = priestor pre hover scale(1.05) tile-ov aby
   sa nedostali za hranicu track-u (overflow-x:auto by ich klipol). */
/* Netflix-style row wrapper s hover arrows. Šípky sa zobrazia iba pri hover
   na wrap a iba ak existuje overflow (controllered z JS pomocou is-at-start /
   is-at-end class na wrapper-e). */
.netflix-row-scroll-wrap {
  position: relative;
}
.netflix-scroll-arrow {
  position: absolute;
  top: 14px;
  bottom: 28px;
  width: 56px;
  background: linear-gradient(to right, rgba(10,10,16,0.85) 0%, rgba(10,10,16,0) 100%);
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 0.22s ease, background 0.2s ease;
}
.netflix-scroll-arrow svg { transition: transform 0.18s ease; }
.netflix-scroll-arrow:hover svg { transform: scale(1.18); }
.netflix-scroll-arrow-left { left: 0; }
.netflix-scroll-arrow-right {
  right: 0;
  background: linear-gradient(to left, rgba(10,10,16,0.85) 0%, rgba(10,10,16,0) 100%);
}
/* Visible iba pri hover wrap-u — ale skry ak je pri okraji (is-at-start / is-at-end) */
.netflix-row-scroll-wrap:hover .netflix-scroll-arrow { opacity: 1; }
.netflix-row-scroll-wrap.is-at-start .netflix-scroll-arrow-left { opacity: 0 !important; pointer-events: none; }
.netflix-row-scroll-wrap.is-at-end .netflix-scroll-arrow-right { opacity: 0 !important; pointer-events: none; }
/* Ak nie je čo scrollovať (oba at-start + at-end súčasne = no overflow), skry obe */
.netflix-row-scroll-wrap.is-at-start.is-at-end .netflix-scroll-arrow { display: none; }
@media (hover: none) {
  /* Touch zariadenia — šípky nepotrebujeme, swipe sufices */
  .netflix-scroll-arrow { display: none; }
}

.netflix-row-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;          /* explicitne — niektoré browsery clip-uju Y pri x:auto */
  scroll-behavior: smooth;
  padding: 14px 18px 36px;
  margin: 0 -18px;              /* offset paddingu aby vizuálne začínalo na rovnakom X */
  scrollbar-width: none;
}
.netflix-row-track::-webkit-scrollbar { display: none; }

/* ── TILE (landscape) ─────────────────────────────────── */
.netflix-tile {
  flex: 0 0 auto;
  width: 290px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: #fff;
  transition: transform 0.28s cubic-bezier(0.18, 0.7, 0.27, 1);
  font-family: inherit;
}
.netflix-tile:hover {
  transform: scale(1.02) translateY(-1px);
  z-index: 3;
  position: relative;
}
@media (max-width: 700px) {
  .netflix-tile { width: 220px; }
}

.netflix-tile-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 6px;
  background-color: #0a0a14;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: box-shadow 0.28s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.netflix-tile:hover .netflix-tile-thumb {
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,255,255,0.18);
}
.netflix-tile-emoji {
  font-size: 52px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.netflix-tile-emoji svg {
  width: 64px;
  height: 64px;
}
@media (max-width: 700px) {
  .netflix-tile-emoji svg { width: 48px; height: 48px; }
  .netflix-tile-emoji { font-size: 40px; }
}

.netflix-tile-info {
  padding: 10px 4px 4px;
}
.netflix-tile-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.netflix-tile-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 3px;
  font-weight: 500;
}

/* "Add new" tile (teal) */
.netflix-tile-add .netflix-tile-thumb-add {
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(0,212,170,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.netflix-tile-add-icon {
  font-size: 60px;
  font-weight: 300;
  color: rgba(0,212,170,0.7);
  line-height: 1;
}
.netflix-tile-add:hover .netflix-tile-thumb-add {
  background: rgba(0,212,170,0.08);
  border-color: rgba(0,212,170,0.7);
}

/* ── EMPTY TILE — dashed placeholder (purple default + teal variant) ── */
.netflix-tile-empty .netflix-tile-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 220ms ease, border-color 220ms ease;
}
.netflix-tile-empty-icon {
  transition: color 220ms ease, transform 220ms ease;
}
/* Purple variant (default) */
.netflix-tile-thumb-empty.is-purple {
  background: rgba(139, 92, 246, 0.04);
  border: 1.5px dashed rgba(139, 92, 246, 0.32);
}
.netflix-tile-thumb-empty.is-purple .netflix-tile-empty-icon {
  color: rgba(139, 92, 246, 0.55);
}
.netflix-tile-empty:hover .netflix-tile-thumb-empty.is-purple {
  background: rgba(139, 92, 246, 0.09);
  border-color: rgba(139, 92, 246, 0.55);
}
.netflix-tile-empty:hover .netflix-tile-thumb-empty.is-purple .netflix-tile-empty-icon {
  color: rgba(167, 139, 250, 0.85);
  transform: scale(1.05);
}
/* Teal variant */
.netflix-tile-thumb-empty.is-teal {
  background: rgba(0, 212, 170, 0.04);
  border: 1.5px dashed rgba(0, 212, 170, 0.36);
}
.netflix-tile-thumb-empty.is-teal .netflix-tile-empty-icon {
  color: rgba(0, 212, 170, 0.65);
}
.netflix-tile-empty:hover .netflix-tile-thumb-empty.is-teal {
  background: rgba(0, 212, 170, 0.10);
  border-color: rgba(0, 212, 170, 0.65);
}
.netflix-tile-empty:hover .netflix-tile-thumb-empty.is-teal .netflix-tile-empty-icon {
  color: rgba(0, 212, 170, 0.95);
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════
   "Čo Ateliér robí za teba" — BRUTAL INFOGRAPHIC pod 9:16
   ───────────────────────────────────────────────────────────
   - Šírka napasovaná na presný offset .netflix-row (64px desktop / 24px mobile)
   - Separator (gradient line) ako predel od 9:16 reels riadku
   - 4 process steps s big numbers + arrows medzi
   - Scroll target pre hero "?" help button (id="atelierFeaturesSection")
   ═══════════════════════════════════════════════════════════ */
.atelier-features-section {
  padding: 0 64px 32px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .atelier-features-section { padding: 0 24px 28px; }
}

/* Predelovač — jemný gradient line */
.atelier-features-divider {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0, 212, 170, 0) 0%,
    rgba(0, 212, 170, 0.35) 15%,
    rgba(139, 92, 246, 0.35) 50%,
    rgba(0, 212, 170, 0.35) 85%,
    rgba(0, 212, 170, 0) 100%);
  margin-bottom: 36px;
}

/* Header — heading + kicker (kicker POD heading-om) nad gridom */
.atelier-features-header {
  margin-bottom: 28px;
}
.atelier-features-heading {
  /* Rovnaký font ako hero tituly (F1: VÍŤAZNÉ KOLO, JA A CHILLI) */
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.0;
  margin: 0 0 10px 0;
}
.atelier-features-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #00d4aa;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0;
}

/* Grid — 4 rovnaké stĺpce na desktope */
.atelier-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}

/* Karta — minimal, brutal, s big numbers */
.atelier-feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 26px 22px 26px;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
  overflow: visible;
}
.atelier-feature-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(0, 212, 170, 0.32);
  transform: translateY(-3px);
}

/* Veľké číslo 01/02/03/04 — outline štýl, prominentné */
.atelier-feature-num {
  font-family: 'Inter', sans-serif;
  font-size: 56px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 212, 170, 0.55);
  text-stroke: 1.5px rgba(0, 212, 170, 0.55);
  margin-bottom: 14px;
}
.atelier-feature-card:hover .atelier-feature-num {
  -webkit-text-stroke-color: rgba(0, 212, 170, 0.9);
  text-stroke-color: rgba(0, 212, 170, 0.9);
}

/* SVG ikona — biela line-style (Lucide), ladí s ostatnými ikonami v dashboarde */
.atelier-feature-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.92);
  transition: color 220ms ease, transform 220ms ease;
}
.atelier-feature-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.atelier-feature-card:hover .atelier-feature-icon {
  color: #fff;
  transform: scale(1.06);
}
.atelier-feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: #00d4aa;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.atelier-feature-text {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.55;
}

/* Arrow medzi krokmi — vystupuje z karty doprava, prepája na ďalšiu */
.atelier-feature-arrow {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  font-size: 22px;
  color: rgba(0, 212, 170, 0.45);
  font-weight: 900;
  z-index: 2;
  pointer-events: none;
}

/* Desktop 4-stĺpec layout (4×2 grid pre 8 kariet) — schovaj arrow na koncoch
   riadkov (4. a 8. karta, lebo by smerovala mimo grid). */
.atelier-feature-card:nth-child(4) .atelier-feature-arrow,
.atelier-feature-card:nth-child(8) .atelier-feature-arrow {
  display: none;
}

@media (max-width: 1100px) {
  .atelier-features-grid { grid-template-columns: repeat(2, 1fr); }
  /* 2-stĺpec layout — schovaj arrow vo všetkých pravých kartách (každá 2.) */
  .atelier-feature-card:nth-child(2n) .atelier-feature-arrow { display: none; }
  /* Reset: zobraz arrow na 1., 3., 5., 7. (lavá stĺpec) — keďže grid je 2-col,
     arrow pointuje na ďalší krok v rovnakom riadku */
  .atelier-feature-card:nth-child(2n+1) .atelier-feature-arrow { display: block; }
}
@media (max-width: 600px) {
  .atelier-features-grid { grid-template-columns: 1fr; }
  .atelier-feature-arrow { display: none; }
  .atelier-features-heading { font-size: 24px; }
  .atelier-feature-num { font-size: 44px; }
}

/* ── Hero corner actions (? + náhľad filmu) ── */
.netflix-hero-corner-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Help "?" button — okrúhly, decentný, scrollne na features */
.netflix-hero-help-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(10, 12, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms ease, transform 220ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.netflix-hero:hover .netflix-hero-help-btn {
  opacity: 1;
  transform: translateY(0);
}
.netflix-hero-help-btn:hover {
  background: rgba(0, 212, 170, 0.22);
  border-color: rgba(0, 212, 170, 0.6);
  color: #fff;
}
@media (max-width: 700px) {
  .netflix-hero-help-btn { opacity: 1; transform: none; width: 30px; height: 30px; font-size: 13px; }
}

/* ── POSTER TILE — fake "Netflix poster" pre projekty bez thumbnailu ── */
.netflix-poster-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  box-shadow: inset 0 -120px 80px -60px rgba(0,0,0,0.5);
}
.netflix-poster-brand {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #00d4aa;
  color: #0a0a14;
  padding: 3px 8px;
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}
.netflix-poster-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 36px 20px 24px;
  line-height: 1.05;
  font-size: calc(28px * var(--poster-font-scale, 1));
  text-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
  word-break: break-word;
  max-width: 100%;
}
@media (max-width: 700px) {
  .netflix-poster-title { font-size: calc(20px * var(--poster-font-scale, 1)); padding: 24px 14px 18px; }
}

/* hover — poster sa "rozsvieti" */
.netflix-tile-poster:hover .netflix-poster-thumb {
  box-shadow: inset 0 -120px 80px -60px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.55);
}

/* Uppercase title modifier (pre 9:16 ORIGINALS row tile titles) */
.netflix-tile-title.is-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 9:16 ORIGINALS — clean dashed tile bez ikony, bez textu pod.
   Iba farebný (teal/purple) dashed rámček. */
.netflix-tile-thumb-empty.netflix-reels-empty-clean {
  aspect-ratio: 9 / 16;
  /* Žiadny obsah — len dashed border + colored background z .is-teal / .is-purple */
}
.netflix-tile-thumb-empty.netflix-reels-empty-clean .netflix-tile-empty-icon {
  display: none;
}

/* Title-only poster — projekt má názov ale ešte žiadny shot.
   Gradient background z žánrového poolu, žiadna fotka. */
.netflix-poster-title-only .netflix-reels-poster-thumb,
.netflix-poster-title-only .netflix-landscape-poster-thumb {
  position: relative;
  /* Inline background: gradient z _pickPosterGradient */
}
/* Hover — subtle scale na cele tile zostáva, plus jemný highlight */
.netflix-poster-title-only:hover .netflix-reels-poster-thumb,
.netflix-poster-title-only:hover .netflix-landscape-poster-thumb {
  filter: brightness(1.08) saturate(1.05);
}
/* Skry gradient overlay element na title-only posteroch — gradient je už background */
.netflix-poster-title-only .netflix-reels-poster-gradient,
.netflix-poster-title-only .netflix-landscape-poster-gradient {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY POSTER — fialový dashed placeholder s brand + title VNÚTRI
   ───────────────────────────────────────────────────────────
   Použité pre:
   - User projekty bez thumbnailu (16:9 alebo 9:16 variant)
   - "+ Nový film" CTA tile
   - Fake placeholders v "9:16 ORIGINALS" row
   Žiadny info-below text → rovnaká výška ako Netflix posteri.
   ═══════════════════════════════════════════════════════════ */
.netflix-empty-poster {
  /* dedí .netflix-tile */
}
.netflix-empty-poster-thumb {
  position: relative;
  background: rgba(139, 92, 246, 0.04);
  border: 1.5px dashed rgba(139, 92, 246, 0.32);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 220ms ease, border-color 220ms ease;
}
.netflix-empty-poster-thumb.is-landscape { aspect-ratio: 16 / 9; }
.netflix-empty-poster-thumb.is-portrait  { aspect-ratio: 9 / 16; }
.netflix-empty-poster:hover .netflix-empty-poster-thumb {
  background: rgba(139, 92, 246, 0.09);
  border-color: rgba(139, 92, 246, 0.55);
}
/* Teal variant pre showcase reels placeholders */
.netflix-empty-poster.is-teal .netflix-empty-poster-thumb {
  background: rgba(0, 212, 170, 0.04);
  border-color: rgba(0, 212, 170, 0.36);
}
.netflix-empty-poster.is-teal .netflix-empty-poster-icon {
  color: rgba(0, 212, 170, 0.55);
}
.netflix-empty-poster.is-teal:hover .netflix-empty-poster-thumb {
  background: rgba(0, 212, 170, 0.10);
  border-color: rgba(0, 212, 170, 0.65);
}

/* "+ Nový film" CTA variant — teal accents */
.netflix-empty-poster .netflix-tile-thumb-add {
  background: rgba(0, 212, 170, 0.05);
  border-color: rgba(0, 212, 170, 0.4);
}
.netflix-empty-poster:hover .netflix-tile-thumb-add {
  background: rgba(0, 212, 170, 0.10);
  border-color: rgba(0, 212, 170, 0.7);
}

/* Icon wrap — vycentruje clapperboard / + ikonu v hornej polovici */
.netflix-empty-poster-icon-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.netflix-empty-poster-icon {
  color: rgba(139, 92, 246, 0.55);
  transition: color 220ms ease, transform 220ms ease;
}
.netflix-empty-poster:hover .netflix-empty-poster-icon {
  color: rgba(167, 139, 250, 0.85);
  transform: scale(1.05);
}
.netflix-empty-poster .netflix-tile-add-icon {
  font-size: 56px;
  font-weight: 300;
  color: rgba(0, 212, 170, 0.7);
  line-height: 1;
}

/* Content block — brand + title + sub na spodku thumb area */
.netflix-empty-poster-content {
  padding: 8px 12px 14px;
  text-align: center;
  flex-shrink: 0;
}
.netflix-empty-poster-brand {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.netflix-empty-poster-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "+ Nový film" title — teal */
.netflix-empty-poster-title.is-add-title {
  color: #00d4aa;
  letter-spacing: 0.04em;
}
.netflix-empty-poster-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  margin-top: 3px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE POSTER — Netflix-style cover pre 16:9 user projekty
   ───────────────────────────────────────────────────────────
   Rovnaký font-pool logic ako 9:16 poster, len menšia typografia
   (menej vertikálneho miesta — 290×163px) a gradient o niečo menej
   agresívny.
   ═══════════════════════════════════════════════════════════ */
.netflix-landscape-poster {
  /* dedí .netflix-tile — width 290px */
}
.netflix-landscape-poster-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #0a0a14;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.28s ease;
}
.netflix-landscape-poster:hover .netflix-landscape-poster-thumb {
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 0 2px rgba(0,212,170,0.45);
}
.netflix-landscape-poster-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,0.6) 75%,
    rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}
/* LANDSCAPE — brand top-left, title centered/bottom (Netflix layout) */
.netflix-landscape-poster-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.netflix-landscape-poster-brand {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 800;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.netflix-landscape-poster-title {
  /* font-family / weight / style / text-transform / letter-spacing inline z JS */
  position: absolute;
  left: 0; right: 0;
  bottom: 14px;
  padding: 0 14px;
  text-align: center;
  font-size: calc(32px * var(--poster-font-mult, 1));
  color: #fff;
  line-height: 0.95;
  text-shadow: 0 3px 14px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.8);
  word-break: break-word;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0, "calt" 0, "swsh" 0, "salt" 0;
}

/* ═══════════════════════════════════════════════════════════
   REELS POSTER — Netflix-style cover s gradient + brand + title
   ───────────────────────────────────────────────────────────
   Aplikuje sa na 9:16 user projekty s thumbnailom. Cinematic font
   sa setuje inline z JS (deterministicky podľa žánru + project ID).
   ═══════════════════════════════════════════════════════════ */
.netflix-reels-poster {
  /* dedí .netflix-tile-portrait — width 200px */
}
.netflix-reels-poster-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  background-size: cover;
  background-position: center;
  background-color: #0a0a14;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.28s ease;
}
.netflix-reels-poster:hover .netflix-reels-poster-thumb {
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 0 0 2px rgba(0,212,170,0.45);
}

/* Gradient overlay — tmavnenie spodku pre čitateľnosť textov */
.netflix-reels-poster-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}

/* PORTRAIT — brand + title spolu v spodnom strede (pôvodný look) */
.netflix-reels-poster-content {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  padding: 16px 12px 18px;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.netflix-reels-poster-brand {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.netflix-reels-poster-title {
  /* font-family / font-weight / font-style / text-transform / letter-spacing inline z JS */
  font-size: calc(38px * var(--poster-font-mult, 1));
  color: #fff;
  line-height: 0.95;
  text-shadow: 0 3px 14px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.75);
  word-break: break-word;
  max-width: 100%;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0, "calt" 0, "swsh" 0, "salt" 0;
}

/* ── TILE — portrait (9:16) ───────────────────────────── */
.netflix-tile-portrait { width: 200px; }
.netflix-tile-portrait .netflix-tile-thumb {
  aspect-ratio: 9 / 16;
}
@media (max-width: 700px) {
  .netflix-tile-portrait { width: 140px; }
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Dashboard (project picker) — LEGACY (back-compat)
   ═══════════════════════════════════════════════════════════ */
.imax-dashboard { max-width: 1400px; }

/* ── EMPTY STATE HERO (žiadne projekty zatiaľ) ─────────── */
.imax-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.imax-powered-by {
  text-align: right;
  flex-shrink: 0;
}
.imax-powered-by-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.imax-powered-by-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.imax-powered-by-logos img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(0.3);
  transition: all 0.2s ease;
}
.imax-powered-by-logos img:hover { opacity: 1; filter: none; transform: scale(1.15); }

/* Big CTA hero — keď je galéria prázdna */
.imax-hero-cta {
  position: relative;
  display: block;
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.08) 0%, rgba(0, 90, 80, 0.04) 100%);
  border: 2px dashed rgba(0, 212, 170, 0.35);
  border-radius: 24px;
  padding: 56px 40px;
  margin: 32px 0 48px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.imax-hero-cta:hover {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.14) 0%, rgba(0, 90, 80, 0.07) 100%);
  border-color: rgba(0, 212, 170, 0.6);
  transform: translateY(-2px);
  box-shadow: none;
}
.imax-hero-cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 200%;
  background: radial-gradient(ellipse at center,
    rgba(0, 212, 170, 0.2) 0%,
    rgba(0, 212, 170, 0.06) 30%,
    transparent 60%);
  transform: translate(-50%, -50%);
  filter: blur(40px);
  animation: imaxHeroGlow 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes imaxHeroGlow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}
.imax-hero-cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.imax-hero-cta-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.18);
  border: 1px solid rgba(0, 212, 170, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 300;
  color: #00d4aa;
  margin-bottom: 6px;
  animation: imaxHeroIconFloat 3.5s ease-in-out infinite;
}
@keyframes imaxHeroIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.imax-hero-cta-title {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.imax-hero-cta-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 520px;
  line-height: 1.55;
}
.imax-hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.95) 0%, rgba(0, 180, 145, 0.9) 100%);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 999px;
  color: #0a141a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-top: 10px;
  box-shadow: none;
  transition: all 0.18s ease;
}
.imax-hero-cta:hover .imax-hero-cta-btn {
  transform: translateY(-1px);
  box-shadow: none;
  background: linear-gradient(135deg, rgba(0, 230, 185, 1) 0%, rgba(0, 200, 165, 1) 100%);
}
.imax-hero-cta-btn svg { color: currentColor; transition: transform 0.18s ease; }
.imax-hero-cta:hover .imax-hero-cta-btn svg { transform: translateX(4px); }

/* ── FEATURES SECTION ─────────────────────────────────── */
.imax-features-section { margin-bottom: 48px; }
.imax-features-title, .imax-starters-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 18px 0;
}
.imax-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .imax-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .imax-features-grid { grid-template-columns: 1fr; } }

.imax-feature-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 22px 20px;
  transition: all 0.2s ease;
}
.imax-feature-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(0, 212, 170, 0.3);
  transform: translateY(-2px);
}
.imax-feature-card-icon {
  font-size: 30px;
  margin-bottom: 8px;
}
.imax-feature-card-step {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00d4aa;
  margin-bottom: 6px;
}
.imax-feature-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
  letter-spacing: -0.005em;
}
.imax-feature-card p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  margin: 0;
}

/* ── STARTERS (sample príbehy) ────────────────────────── */
.imax-starters-section { margin-bottom: 48px; }
.imax-starters-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: -10px 0 16px 0;
}
.imax-starters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.imax-starter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}
.imax-starter:hover {
  background: rgba(0, 212, 170, 0.07);
  border-color: rgba(0, 212, 170, 0.4);
  transform: translateY(-2px);
}
.imax-starter-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.imax-starter-label {
  flex: 1;
  min-width: 0;
}
.imax-starter-arrow {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 700;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.imax-starter:hover .imax-starter-arrow {
  color: #00d4aa;
  transform: translateX(4px);
}

.imax-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

/* "Nový projekt" tile */
.imax-project-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.08), rgba(0, 212, 170, 0.02));
  border: 1.5px dashed rgba(0, 212, 170, 0.4);
  cursor: pointer;
  font-family: inherit;
  color: #00d4aa;
  transition: all 0.2s;
  border-radius: 14px;
}
.imax-project-new:hover {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.15), rgba(0, 212, 170, 0.05));
  border-color: rgba(0, 212, 170, 0.7);
  transform: translateY(-2px);
}
.imax-project-new-icon {
  font-size: 56px;
  font-weight: 200;
  line-height: 1;
  color: #00d4aa;
  margin-bottom: 4px;
}
.imax-project-new-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
}
.imax-project-new-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* Existing project tile */
.imax-project-tile {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.imax-project-tile:hover {
  border-color: rgba(0, 212, 170, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.imax-project-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.4);
  overflow: hidden;
}
.imax-project-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.imax-project-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: rgba(255,255,255,0.25);
}
.imax-project-thumb-icon {
  font-size: 48px;
  opacity: 0.4;
}

.imax-project-status-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.5);
  color: #fff;
}
.imax-project-status-draft   { background: rgba(120,120,120,0.7); color: #fff; }
.imax-project-status-plan    { background: rgba(255, 180, 60, 0.85); color: #1a1505; }
.imax-project-status-preprod { background: rgba(140, 100, 220, 0.85); color: #fff; }
.imax-project-status-shots   { background: rgba(0, 200, 230, 0.85); color: #001b22; }
.imax-project-status-done    { background: linear-gradient(135deg, #00d4aa, #00a382); color: #0a0e14; }

.imax-project-meta {
  padding: 14px 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.imax-project-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.imax-project-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.imax-project-tile-delete {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s;
  backdrop-filter: blur(6px);
}
.imax-project-tile:hover .imax-project-tile-delete { opacity: 1; }
.imax-project-tile-delete:hover {
  background: rgba(255, 80, 80, 0.85);
}

/* Stiahnutie assetov projektu do ZIP-u — rovnaká dlaždicová akcia ako kôš,
   len o jedno miesto vľavo. */
.imax-project-tile-download {
  position: absolute;
  top: 10px; right: 48px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s;
}
.imax-project-tile:hover .imax-project-tile-download { opacity: 1; }

/* Vytvorenie náhľadu filmu — tretia dlaždicová akcia, vľavo od sťahovania. */
.imax-project-tile-cover {
  position: absolute;
  top: 10px; right: 86px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s;
}
.imax-project-tile:hover .imax-project-tile-cover { opacity: 1; }
.imax-project-tile-cover:hover {
  background: rgba(0, 212, 170, 0.85);
}
.imax-project-tile-download:hover {
  background: rgba(0, 212, 170, 0.85);
}

.imax-dashboard-empty-hint {
  margin-top: 32px;
  padding: 20px;
  text-align: center;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.1);
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Global Background Badge
   ───────────────────────────────────────────────────────────
   Plávajúci indikátor — viditeľný kdekoľvek v appke keď ATELIÉR
   robí nieco na pozadí (plán, entity, shoty, video, hudba).
   ═══════════════════════════════════════════════════════════ */

.imax-global-badge {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 14px;
  background: linear-gradient(135deg, #0e1620 0%, #182232 100%);
  border: 1px solid rgba(0, 212, 170, 0.45);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  min-width: 220px;
  max-width: 320px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: imax-badge-slide-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.imax-global-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 212, 170, 0.85);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

@keyframes imax-badge-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.imax-global-badge-spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 2.5px solid rgba(0, 212, 170, 0.25);
  border-top-color: #00d4aa;
  border-radius: 50%;
  animation: imax-spin 0.8s linear infinite;
}

.imax-global-badge-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.imax-global-badge-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #00d4aa;
  text-transform: uppercase;
}

.imax-global-badge-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imax-global-badge-arrow {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
  transition: transform 0.2s, color 0.2s;
}
.imax-global-badge:hover .imax-global-badge-arrow {
  color: #00d4aa;
  transform: translate(2px, -2px);
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Step 1 Presets (aspect ratio + style)
   ═══════════════════════════════════════════════════════════ */
.imax-preset-card { margin-top: 14px; }

.imax-preset-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.imax-preset-row-styles {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.imax-preset-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  color: rgba(255,255,255,0.85);
  text-align: left;
  transition: all 0.15s;
  position: relative;
}

.imax-preset-tile:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(0, 212, 170, 0.35);
  transform: translateY(-1px);
}

.imax-preset-tile.is-selected {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.18), rgba(0, 212, 170, 0.06));
  border-color: #00d4aa;
  box-shadow: 0 0 0 1px #00d4aa;
}

.imax-preset-tile.is-selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  color: #00d4aa;
  font-weight: 700;
  font-size: 13px;
}

.imax-preset-emoji {
  font-size: 22px;
  line-height: 1;
}

.imax-preset-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.imax-preset-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Cancel button (zaseknutá entita)
   ═══════════════════════════════════════════════════════════ */
.imax-entity-cancel-btn {
  margin-top: 10px;
  padding: 5px 12px;
  background: rgba(255, 80, 80, 0.18);
  border: 1px solid rgba(255, 100, 100, 0.45);
  color: #ffb3b3;
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.imax-entity-cancel-btn:hover {
  background: rgba(255, 80, 80, 0.35);
  border-color: rgba(255, 120, 120, 0.7);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Compact preset row (merge format + style)
   ═══════════════════════════════════════════════════════════ */
.imax-preset-row-mixed {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
}

/* "Vygenerovať plán" tlačidlo zarovnané v rovnakom riadku ako preset tily, vpravo */
.imax-step1-generate {
  margin-left: auto;
  align-self: stretch;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
/* Hover = klasické jemné zväčšenie (~3%), žiadna zmena farby.
   !important držia zelený gradient lebo .imax-btn:hover má vyššiu špecificitu
   než .imax-btn-primary a default-ne by overrode-ovalo background bielou. */
.imax-step1-generate:hover:not(:disabled) {
  transform: scale(1.03);
  background: linear-gradient(135deg, #00d4aa, #00a382) !important;
  border-color: transparent !important;
}
.imax-step1-generate:active:not(:disabled) {
  transform: scale(0.98);
}
@media (max-width: 720px) {
  .imax-step1-generate { width: 100%; margin-left: 0; padding: 12px; }
}

.imax-preset-divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.12);
  margin: 2px 6px;
}

.imax-preset-tile-sm {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  transition: all 0.15s;
  position: relative;
}

.imax-preset-tile-sm:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 212, 170, 0.4);
  color: #fff;
  transform: translateY(-1px);
}

.imax-preset-tile-sm.is-selected {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.22), rgba(0, 212, 170, 0.08));
  border-color: #00d4aa;
  color: #fff;
  box-shadow: 0 0 0 1px #00d4aa;
}

.imax-preset-tile-sm .imax-preset-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* ── KROK 6 — storyboard karty (jeden segment = jeden board) ── */
.imax-sb-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; margin-bottom: 14px; overflow: hidden;
}
.imax-sb-card[open] {
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.imax-sb-card-summary {
  min-height: 68px; padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none; user-select: none;
  background: linear-gradient(90deg, rgba(0,212,170,.035), transparent 45%);
}
.imax-sb-card-summary::-webkit-details-marker { display: none; }
.imax-sb-card-summary:hover { background-color: rgba(255,255,255,.025); }
.imax-sb-summary-main {
  display: flex; flex-direction: column; gap: 3px; min-width: 150px;
}
.imax-sb-summary-status {
  margin-left: auto; display: flex; align-items: center; justify-content: flex-end;
  gap: 7px; flex-wrap: wrap;
}
.imax-sb-status {
  padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035); color: #737c88;
  font-size: 10px; font-weight: 700; letter-spacing: .025em;
}
.imax-sb-status.is-ready {
  color: #6de0c7; border-color: rgba(0,212,170,.24); background: rgba(0,212,170,.08);
}
.imax-sb-status.is-working {
  color: #f2c66d; border-color: rgba(242,198,109,.24); background: rgba(242,198,109,.08);
}
.imax-sb-card-body { padding: 0 16px 16px; border-top: 1px solid rgba(255,255,255,.06); }
.imax-sb-card-body > .imax-seg-synopsis { margin-top: 12px; }
.imax-sb-workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.imax-sb-stage {
  min-width: 0; padding: 12px; border-radius: 13px;
  background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.06);
}
.imax-sb-stage-head {
  min-height: 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; color: #e5e7eb; font-size: 12px; font-weight: 800;
}
.imax-sb-stage-head span:last-child {
  color: #737c88; font-size: 10px; font-weight: 650; text-align: right;
}
.imax-sb-img {
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px;
  overflow: hidden; background: rgba(0,0,0,.3); margin: 10px 0 12px;
  display: flex; align-items: center; justify-content: center;
}
.imax-sb-img.imax-sb-img-portrait {
  width: min(100%, 292px);
  aspect-ratio: 9/16;
  margin-left: auto;
  margin-right: auto;
}
.imax-sb-img img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; background: #0b0d10; }
.imax-sb-version-nav {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
  background: rgba(5,7,11,.82); backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
}
.imax-sb-version-nav button {
  width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  font-size: 18px; line-height: 1;
}
.imax-sb-version-nav button:hover:not(:disabled) { background: rgba(0,212,170,.22); color: #62e6cb; }
.imax-sb-version-nav button:disabled { opacity: .28; cursor: default; }
.imax-sb-version-nav span {
  min-width: 34px; color: #cbd5e1; font-size: 10px; font-weight: 750; text-align: center;
  font-variant-numeric: tabular-nums;
}
.imax-sb-action-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.imax-sb-action-row .imax-btn { width: 100%; min-width: 0; }
.imax-sb-outdated {
  margin: -3px 0 9px; padding: 7px 9px; border-radius: 8px;
  background: rgba(242,198,109,.08); border: 1px solid rgba(242,198,109,.18);
  color: #d9b96f; font-size: 10.5px; line-height: 1.35;
}
.imax-sb-img.imax-shot-img-empty { flex-direction: column; gap: 8px; color: #6b7280; font-size: 34px; }
.imax-sb-img.imax-shot-img-empty .imax-shot-img-empty-label { font-size: 12.5px; }
.imax-sb-panels { margin-top: 12px; }
.imax-sb-panels > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: #8a929c;
  padding: 6px 0; letter-spacing: .02em; user-select: none;
}
.imax-sb-panels > summary:hover { color: #cbd5e1; }
.imax-sb-panel-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 0;
  border-top: 1px solid rgba(255,255,255,.05); font-size: 12px;
}
.imax-sb-panel-num { font-weight: 800; color: #00d4aa; min-width: 22px; }
.imax-sb-panel-tc  { font-variant-numeric: tabular-nums; color: #8a929c; min-width: 118px; }
.imax-sb-panel-cap { color: #cbd5e1; flex: 1; min-width: 0; }
/* ── KROK 7 — zoznam úsekov filmu (timeline zrušená) ── */
.imax-film-list { margin: 22px 0 8px; }
.imax-film-row {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.imax-film-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.imax-film-row-vid {
  width: 100%; border-radius: 10px; display: block; background: #0b0d10; max-height: 420px;
}
.imax-film-row-empty {
  padding: 26px; text-align: center; color: #6b7280; font-size: 13px;
  background: rgba(0,0,0,.25); border-radius: 10px;
}
.imax-tl-wrap-musiconly { margin-top: 8px; overflow-x: auto; }
.imax-film-dl { margin-top: 18px; }
.imax-film-notice {
  width: min(100%, 1100px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 12px;
  background: rgba(245, 158, 11, .08);
  color: #f6c768;
  font-size: 13px;
  font-weight: 650;
}
.imax-film-music {
  width: min(100%, 1100px);
  margin: 4px auto 0;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
}
.imax-film-music.is-ready { border-color: rgba(0, 212, 170, .24); }
.imax-film-music.is-error { border-color: rgba(255, 92, 110, .3); }
.imax-film-music-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 212, 170, .12);
  color: #00d4aa;
  font-size: 22px;
  font-weight: 800;
}
.imax-film-music.is-error .imax-film-music-icon {
  color: #ff7184;
  background: rgba(255, 92, 110, .12);
}
.imax-film-music-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.imax-film-music-copy strong {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 750;
}
.imax-film-music-copy span {
  color: #8d96a3;
  font-size: 12px;
  line-height: 1.45;
}
.imax-film-music-actions,
.imax-film-music-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.imax-film-music-controls button {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: #dbe2ea;
  cursor: pointer;
}
.imax-film-music-controls button:hover:not(:disabled) {
  color: #00d4aa;
  border-color: rgba(0, 212, 170, .35);
}
.imax-film-music-controls button:disabled { opacity: .3; cursor: default; }
.imax-film-music-controls > span {
  min-width: 34px;
  color: #7f8996;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.imax-film-music-controls input[type="range"] { width: 92px; accent-color: #00d4aa; }
@media (max-width: 700px) {
  .imax-film-notice,
  .imax-film-music { align-items: flex-start; flex-wrap: wrap; }
  .imax-film-music-copy { min-width: calc(100% - 64px); }
  .imax-film-music-actions,
  .imax-film-music-controls { width: 100%; justify-content: flex-end; }
}

/* ── KROK 6b — video zo storyboardu ── */
.imax-sb-img video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0b0d10; }
.imax-sb-video { margin: 0; }
.imax-sb-video-head {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #8a929c;
}
.imax-sb-refmap {
  margin-top: 8px; font-size: 11px; color: #6b7280; line-height: 1.6;
}
.imax-sb-refmap b { color: #00d4aa; font-weight: 700; }
.imax-sb-prompt {
  margin: 8px 0 0; padding: 12px; max-height: 340px; overflow: auto;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.6;
  color: #cbd5e1; white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 900px) {
  .imax-sb-workspace { grid-template-columns: 1fr; }
  .imax-sb-summary-status { display: none; }
}
@media (max-width: 620px) {
  .imax-sb-card-summary { padding: 12px; gap: 9px; }
  .imax-sb-card-body { padding: 0 10px 12px; }
  .imax-sb-summary-main { min-width: 0; flex: 1; }
  .imax-sb-stage { padding: 9px; }
  .imax-sb-panel-row { align-items: flex-start; flex-wrap: wrap; }
  .imax-sb-panel-tc { min-width: 94px; }
  .imax-sb-panel-cap { flex-basis: 100%; padding-left: 32px; }
  .imax-sb-action-row { grid-template-columns: 1fr; }
}
/* ── KROK 2 — segmenty (15s) a panely storyboardu ── */
.imax-seg-block { margin-bottom: 22px; }
.imax-seg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.imax-seg-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; padding: 4px 9px; border-radius: 6px;
  background: rgba(0,212,170,.14); border: 1px solid rgba(0,212,170,.45); color: #00d4aa;
}
.imax-seg-title { font-size: 15px; font-weight: 700; color: #f3f4f6; }
.imax-seg-meta { font-size: 11px; font-weight: 600; color: #8a929c; letter-spacing: .02em; }
.imax-seg-meta-off { color: #f0b429; }
.imax-seg-synopsis { font-size: 12.5px; line-height: 1.5; color: #9aa2ad; margin: 0 0 10px; max-width: 70ch; }
.imax-panel-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
.imax-chip-shottype { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1; font-weight: 800; letter-spacing: .06em; }
.imax-chip-seg { background: rgba(0,212,170,.12); border: 1px solid rgba(0,212,170,.4); color: #00d4aa; }
.imax-panel-caption-input {
  width: 100%; margin-top: 8px; padding: 7px 10px; border-radius: 8px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.09);
  color: #cbd5e1; font-size: 12px; font-style: italic; letter-spacing: .01em;
}
.imax-panel-caption-input:focus { outline: none; border-color: rgba(0,212,170,.5); background: rgba(0,0,0,.4); }
.imax-panel-caption-input::placeholder { color: #5c646e; }
/* Dĺžka filmu — sekundy pod názvom (Krátky / 15s) */
.imax-preset-tile-len { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.15; }
.imax-preset-tile-len .imax-preset-sub {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: #8a929c; opacity: .95;
}
.imax-preset-tile-len.is-selected .imax-preset-sub { color: #d7fff4; }

/* Selected tile už nemá ✓ ikonku — vizuálne stačí gradient + glow */
.imax-preset-tile-sm.is-selected::after { content: none; }

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Character custom references (max 3 per character)
   ═══════════════════════════════════════════════════════════ */
.imax-cref-section {
  margin: 4px 0 6px 0;
}

.imax-cref-section-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.imax-cref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 6px;
}

.imax-cref-item {
  position: relative;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  overflow: hidden;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.imax-cref-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: rgba(0, 0, 0, 0.5);
}

.imax-cref-label {
  width: 100%;
  padding: 3px 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  font-family: inherit;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.imax-cref-label:focus {
  border-color: rgba(0, 212, 170, 0.45);
}

.imax-cref-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.85;
  transition: all 0.15s;
}
.imax-cref-remove:hover {
  background: rgba(255, 80, 80, 0.85);
  opacity: 1;
}

.imax-cref-add {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px dashed rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  aspect-ratio: 1 / 1.15;
  transition: all 0.15s;
}
.imax-cref-add:hover {
  border-color: rgba(0, 212, 170, 0.45);
  color: #00d4aa;
  background: rgba(0, 212, 170, 0.04);
}
.imax-cref-add-count {
  font-size: 9px;
  opacity: 0.6;
  letter-spacing: 0.1em;
}

.imax-cref-full {
  grid-column: 1 / -1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 4px;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Stepper checkmark + step status hint
   ═══════════════════════════════════════════════════════════ */
.imax-step-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background: #00d4aa;
  color: #0a0e14;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

.imax-step.is-done .imax-step-check {
  background: #00d4aa;
  color: #0a0e14;
}

/* Status hint pre kroky 3-5 (počet generovaných položiek) */
.imax-step-status {
  margin-top: 22px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Title input (názov filmu v Kroku 1)
   Vizuálne identické s .imax-textarea-lg pre konzistenciu.
   ═══════════════════════════════════════════════════════════ */
.imax-title-bubble {
  width: 100%;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.imax-title-bubble:focus {
  border-color: rgba(0, 212, 170, 0.6);
}

.imax-title-bubble::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Refine video prompt button + badge
   ═══════════════════════════════════════════════════════════ */
.imax-refined-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  background: rgba(0, 212, 170, 0.15);
  border: 1px solid rgba(0, 212, 170, 0.45);
  border-radius: 4px;
  color: #00d4aa;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.imax-shot-prompt-actions {
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Dashboard hero intro + shelf
   Kompaktný left-aligned design — Tvoje projekty musia byť hneď viditeľné
   ═══════════════════════════════════════════════════════════ */
.imax-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  text-align: left;
  padding: 4px 0 12px;
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .imax-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.imax-hero-text {
  min-width: 0;
}

.imax-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(0, 212, 170, 0.9);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.imax-hero-title {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0 0 10px 0;
  color: #fff;
  background: linear-gradient(135deg, #fff 0%, rgba(0, 212, 170, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.imax-hero-tagline {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}

.imax-hero-body {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  max-width: 640px;
  margin: 0;
}
.imax-hero-body strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* SHELF — plávajúce ikony nad svietiacou líniou (kompaktný) */
.imax-shelf {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 22px;
  padding: 12px 16px 14px;
  flex-shrink: 0;
}

.imax-shelf-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: imax-shelf-float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0, 212, 170, 0.2));
}

.imax-shelf-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes imax-shelf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.imax-shelf-surface {
  position: absolute;
  bottom: 4px;
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(0, 212, 170, 0.3) 18%,
    rgba(0, 212, 170, 0.65) 50%,
    rgba(0, 212, 170, 0.3) 82%,
    transparent 100%);
  box-shadow: none;
}

/* "Tvoje projekty" — prominentný, viditeľný, neskrýva sa */
.imax-projects-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 8px 0 6px 0;
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Custom confirm / alert modal (glassmorphism)
   Nahrádza native window.confirm() / window.alert() ktoré
   vyzerajú ako "Windows hláška".
   ═══════════════════════════════════════════════════════════ */
.imax-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 10, 16, 0.62);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.14s ease;
}
.imax-modal-overlay.imax-modal-shown { opacity: 1; }
.imax-modal-overlay.imax-modal-leaving { opacity: 0; }

.imax-modal {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(180deg, rgba(22, 24, 32, 0.96), rgba(15, 17, 24, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 26px 26px 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(8px) scale(0.985);
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
  position: relative;
}
.imax-modal-overlay.imax-modal-shown .imax-modal {
  transform: translateY(0) scale(1);
}

.imax-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}

.imax-modal-body {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.55;
  margin-bottom: 22px;
  white-space: pre-wrap;
  word-break: break-word;
}

.imax-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.imax-modal-actions .imax-btn {
  min-width: 96px;
}
.imax-modal-prompt { max-width: 560px; }
.imax-modal-prompt .imax-modal-body { margin-bottom: 12px; }
.imax-modal-textarea {
  width: 100%; min-height: 132px; resize: vertical; padding: 12px 13px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.28); color: #f3f4f6;
  font: 500 13px/1.55 inherit; outline: none;
}
.imax-modal-textarea:focus {
  border-color: rgba(0,212,170,.48);
  box-shadow: 0 0 0 3px rgba(0,212,170,.08);
}
.imax-modal-textarea.is-invalid { border-color: rgba(255,95,109,.65); }
.imax-modal-textarea::placeholder { color: #69717d; }
.imax-modal-prompt-hint {
  margin: 7px 1px 18px; color: #737c88; font-size: 10.5px; line-height: 1.4;
}

/* Danger variant — top accent + červenkastý confirm button */
.imax-modal.imax-modal-danger::before {
  content: "";
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 95, 95, 0.55), transparent);
  border-radius: 2px;
}
.imax-modal.imax-modal-danger .imax-modal-btn-confirm {
  background: linear-gradient(135deg, #ff5f6d, #c1373d);
  color: #fff;
  border-color: rgba(255, 95, 109, 0.45);
}
.imax-modal.imax-modal-danger .imax-modal-btn-confirm:hover {
  background: linear-gradient(135deg, #ff6b78, #d04149);
  box-shadow: 0 8px 24px rgba(255, 95, 109, 0.28);
}

@media (max-width: 540px) {
  .imax-modal { padding: 22px 20px 18px; border-radius: 16px; }
  .imax-modal-title { font-size: 16px; }
  .imax-modal-body { font-size: 13px; }
  .imax-modal-actions .imax-btn { flex: 1; min-width: 0; }
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Cinematic loading modal
   (rotujúce film flavor texty + indeterminate progress)
   ═══════════════════════════════════════════════════════════ */
.imax-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 212, 170, 0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(120, 90, 255, 0.07), transparent 45%),
    rgba(6, 8, 12, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.imax-loading-overlay.imax-loading-shown { opacity: 1; }
.imax-loading-overlay.imax-loading-leaving { opacity: 0; }

.imax-loading-modal {
  width: 100%;
  max-width: 620px;
  text-align: center;
  background: linear-gradient(180deg, rgba(22, 24, 32, 0.96), rgba(15, 17, 24, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 42px 44px 34px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
  transform: translateY(10px) scale(0.985);
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.imax-loading-overlay.imax-loading-shown .imax-loading-modal {
  transform: translateY(0) scale(1);
}

/* Top accent — jemný film-grade prúžok */
.imax-loading-modal::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 212, 170, 0.55) 30%,
    rgba(120, 90, 255, 0.55) 70%,
    transparent);
  border-radius: 2px;
  filter: blur(0.3px);
}

/* Cinematic AI ikona — clapperboard v strede + orbitujúce neuróny okolo */
.imax-loading-icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Clapperboard v strede — jemný pulz */
.imax-loading-clapper {
  width: 48px;
  height: 48px;
  color: #00d4aa;
  filter: drop-shadow(0 0 12px rgba(0, 212, 170, 0.45));
  animation: imaxClapperPulse 2.6s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes imaxClapperPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(0, 212, 170, 0.35)); }
  50%      { transform: scale(1.05); filter: drop-shadow(0 0 18px rgba(0, 212, 170, 0.6)); }
}
/* Orbit container — pomalý rotation okolo clapperboardu */
.imax-loading-orbit {
  position: absolute;
  inset: 0;
  animation: imaxOrbitSpin 9s linear infinite;
}
@keyframes imaxOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Neuróny — 6 dots na orbite, každý s vlastným pulzom + glow */
.imax-loading-neuron {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d4aa;
  top: 50%;
  left: 50%;
  margin: -4px 0 0 -4px;
  box-shadow: none;
  animation: imaxNeuronBlink 2.2s ease-in-out infinite;
}
.imax-loading-neuron-1 { transform: translate(48px, 0); animation-delay: 0s; }
.imax-loading-neuron-2 { transform: rotate(60deg)  translate(48px); background: #785aff; box-shadow: 0 0 8px rgba(120, 90, 255, 0.8), 0 0 16px rgba(120, 90, 255, 0.4); animation-delay: 0.37s; }
.imax-loading-neuron-3 { transform: rotate(120deg) translate(48px); animation-delay: 0.73s; }
.imax-loading-neuron-4 { transform: rotate(180deg) translate(48px); background: #785aff; box-shadow: 0 0 8px rgba(120, 90, 255, 0.8), 0 0 16px rgba(120, 90, 255, 0.4); animation-delay: 1.1s; }
.imax-loading-neuron-5 { transform: rotate(240deg) translate(48px); animation-delay: 1.47s; }
.imax-loading-neuron-6 { transform: rotate(300deg) translate(48px); background: #785aff; box-shadow: 0 0 8px rgba(120, 90, 255, 0.8), 0 0 16px rgba(120, 90, 255, 0.4); animation-delay: 1.83s; }
@keyframes imaxNeuronBlink {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.imax-loading-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 4px;
}

.imax-loading-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 26px;
  letter-spacing: 0.01em;
  line-height: 1.5;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.imax-loading-flavor {
  font-size: 14px;
  color: rgba(0, 212, 170, 0.92);
  font-weight: 500;
  min-height: 22px;
  margin-bottom: 18px;
  font-style: italic;
  letter-spacing: 0.01em;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.imax-loading-flavor.imax-loading-flavor-out {
  opacity: 0;
  transform: translateY(4px);
}

.imax-loading-progress {
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 22px;
  position: relative;
}
.imax-loading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00d4aa, #785aff);
  border-radius: 100px;
  transition: width 0.4s cubic-bezier(0.3, 0.8, 0.3, 1);
  position: relative;
  box-shadow: none;
}
.imax-loading-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent);
  animation: imaxLoadingShimmer 1.6s linear infinite;
}
@keyframes imaxLoadingShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* "Vedel si, že?" card — zaujímavosti o AI filme */
.imax-loading-fact-card {
  margin-top: 6px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.imax-loading-fact-card::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(120, 90, 255, 0.4),
    rgba(0, 212, 170, 0.4),
    transparent);
}
.imax-loading-fact-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(120, 90, 255, 0.85);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.imax-loading-fact {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  min-height: 42px;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.imax-loading-fact.imax-loading-fact-out {
  opacity: 0;
  transform: translateY(6px);
}

/* ═══════════════════════════════════════════════════════════
   ATELIÉR — Image Lightbox (click-to-zoom)
   ═══════════════════════════════════════════════════════════ */
.imax-entity-img-clickable,
.imax-shot-img-clickable {
  cursor: zoom-in;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.imax-entity-img-clickable:hover,
.imax-shot-img-clickable:hover {
  filter: brightness(1.06);
}

.imax-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(4, 5, 9, 0.92);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px 60px;
  opacity: 0;
  transition: opacity 0.18s ease;
  cursor: zoom-out;
}
.imax-lightbox-overlay.imax-lightbox-shown { opacity: 1; }
.imax-lightbox-overlay.imax-lightbox-leaving { opacity: 0; }

.imax-lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: zoom-out;
}
.imax-lightbox-img {
  max-width: min(94vw, 1800px);
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: default;
  display: block;
  user-select: none;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.22s ease;
}
.imax-lightbox-overlay.imax-lightbox-shown .imax-lightbox-img {
  transform: scale(1);
  opacity: 1;
}
/* Video varianta — rovnaké rozmery + animation ako img */
.imax-lightbox-video {
  max-width: min(94vw, 1800px);
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  display: block;
  background: #000;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.22s ease;
}
.imax-lightbox-overlay.imax-lightbox-shown .imax-lightbox-video {
  transform: scale(1);
  opacity: 1;
}
.imax-lightbox-caption {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 600px;
  padding: 0 12px;
  cursor: zoom-out;
}

.imax-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, transform 0.16s ease, color 0.16s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}
.imax-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .imax-lightbox-overlay { padding: 20px 12px 40px; }
  .imax-lightbox-close { top: 12px; right: 14px; width: 36px; height: 36px; }
  .imax-lightbox-img { max-height: calc(100vh - 100px); border-radius: 8px; }
}

@media (max-width: 600px) {
  .imax-loading-modal { padding: 30px 22px 24px; border-radius: 18px; }
  .imax-loading-icon { width: 92px; height: 92px; }
  .imax-loading-clapper { width: 40px; height: 40px; }
  .imax-loading-neuron-1 { transform: translate(40px, 0); }
  .imax-loading-neuron-2 { transform: rotate(60deg)  translate(40px); }
  .imax-loading-neuron-3 { transform: rotate(120deg) translate(40px); }
  .imax-loading-neuron-4 { transform: rotate(180deg) translate(40px); }
  .imax-loading-neuron-5 { transform: rotate(240deg) translate(40px); }
  .imax-loading-neuron-6 { transform: rotate(300deg) translate(40px); }
  .imax-loading-title { font-size: 18px; }
  .imax-loading-fact { font-size: 12.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   VOICE CLONE — 3 CONCEPT REDIZAJN (Klon hlasu FBI dossier style)
   ───────────────────────────────────────────────────────────────────────
   A — Voice Print Dossier (split, ako Avatar dashboard)
   B — Biometric Scan Sequence (5-step sci-fi flow)
   C — Audio Clearance Briefing (document/redacted FBI dossier)
   + shared switcher tabs, mood chips, archive grid
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SUNO TRACK BROKEN STATE (audio fail-load handler) ────────────── */
.suno-track-broken {
  border-color: rgba(255, 107, 107, 0.35) !important;
}
.suno-track-broken-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 6px 0;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.12) 0%, rgba(255, 107, 107, 0.04) 100%);
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.suno-broken-icon {
  font-size: 14px;
  color: #ff8a8a;
}
.suno-broken-text {
  flex: 1;
  color: rgba(255, 200, 200, 0.9);
  font-weight: 500;
}
.suno-broken-retry {
  padding: 5px 12px;
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 5px;
  color: #ff8a8a;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.3px;
}
.suno-broken-retry:hover:not(:disabled) {
  background: rgba(255, 107, 107, 0.25);
  border-color: rgba(255, 107, 107, 0.8);
  color: #ffffff;
}
.suno-broken-retry:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── SUPERSKRIPT · CREATOR HUB ─────────────────────────── */
.creator-hub {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: clamp(250px, 30vh, 300px) 58px minmax(0, 1fr);
  overflow: hidden;
  background: #080b0b;
  color: #f4f7f6;
}
.creator-hub-hero {
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 30px clamp(28px, 5vw, 76px);
  border-bottom: 1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(90deg, #050807 0%, rgba(5,10,9,.86) 34%, rgba(4,12,11,.12) 67%, rgba(3,8,7,.2) 100%),
    url('../images/superman-hero1.png') center right / cover no-repeat; /* TODO krok 6: grafika este nie je prenesena (u nas su WebP) */
}
.creator-hub-hero-copy { width: min(680px, 62%); }
.creator-hub-eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.creator-hub-hero h1 {
  margin: 13px 0 12px;
  font-size: clamp(38px, 4vw, 54px);
  line-height: .97;
  letter-spacing: -.055em;
  font-weight: 700;
}
.creator-hub-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0;
  position: relative;
  z-index: 2;
  background-color: #090d0c !important;
  border-top: 1px solid rgba(0,212,170,.22);
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.creator-hub-stages .sh-pipeline-arrow,
.creator-hub-stages .sh-pipeline-step-icon { display: none; }
.creator-hub-stages .sh-pipeline-step {
  min-width: 0;
  min-height: 58px;
  height: 58px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.07);
  border-radius: 0;
  background: #090d0c !important;
  box-shadow: none;
  color: rgba(255,255,255,.42);
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  transform: none;
}
.creator-hub-stages .sh-pipeline-step:hover { transform: none; background: #0d1211 !important; }
.creator-hub-stages .sh-pipeline-step:first-child { border-left: 1px solid rgba(255,255,255,.07); }
.creator-hub-stages .sh-pipeline-step.is-current { color: #fff; box-shadow: inset 0 2px var(--accent); }
.creator-hub-stages .sh-pipeline-step.is-done { color: rgba(255,255,255,.75); }
.creator-hub-stages .sh-pipeline-step-label { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.creator-hub-workspace {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(330px, 33.333333%) 1fr;
  overflow: hidden;
}
.creator-hub-compose {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px clamp(24px, 3vw, 42px) 24px;
  border-right: 1px solid rgba(255,255,255,.11);
}
.creator-hub-field {
  min-height: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.creator-hub-field label { display: block; margin-bottom: 7px; color: #f6f8f7; font-size: 14px; font-weight: 700; }
.creator-hub-field textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  flex: 1 1 auto;
  padding: 9px 12px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 4px;
  outline: none;
  background: rgba(255,255,255,.035);
  color: #f5f7f6;
  font: inherit;
  font-size: 13px;
}
.creator-hub-field textarea:focus { border-color: rgba(0,212,170,.7); background: rgba(0,212,170,.025); }
.creator-hub-field p,
.superscript-field-help { margin: 6px 0 0; color: rgba(220,230,227,.48); font-size: 11px; line-height: 1.35; }
.creator-hub-field p::before,
.superscript-field-help::before { content: '◦'; margin-right: 7px; color: var(--accent); }
.creator-hub-generate {
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: #03120f;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  flex: 0 0 auto;
}
.creator-hub-briefing {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) repeat(3, auto);
  padding: 24px clamp(28px, 4vw, 58px);
  overflow: hidden;
}
.creator-hub-briefing > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.creator-hub-briefing h2 { margin: 7px 0 0; font-size: clamp(29px, 3vw, 43px); letter-spacing: -.035em; }
.creator-hub-briefing > header span { color: rgba(255,255,255,.38); font-size: 11px; }
.creator-hub-briefing-lead {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) minmax(190px, .75fr);
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  min-height: 0;
}
.creator-hub-briefing-image {
  min-height: 130px;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,212,170,.18), rgba(255,255,255,.025) 55%, rgba(0,212,170,.08));
}
.creator-hub-story-type { margin: 2px 0 12px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.creator-hub-briefing h3 { margin: 0 0 12px; font-size: clamp(21px, 2.2vw, 31px); line-height: 1.08; letter-spacing: -.025em; }
.creator-hub-briefing-lead p { margin: 0; color: rgba(231,238,236,.57); font-size: 13px; line-height: 1.55; }
.creator-hub-briefing-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.creator-hub-briefing-row span { color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .11em; }
.creator-hub-briefing-row strong { font-size: 14px; font-weight: 600; }
.superscript-editor-fields { background: transparent; backdrop-filter: none; border: 0; border-radius: 0; padding: 0; }
.superscript-editor-fields:hover { border-color: transparent; }

@media (max-width: 900px) {
  .creator-hub { height: auto; min-height: 100%; display: block; overflow: visible; }
  .creator-hub-hero-copy { width: min(680px, 78%); }
  .creator-hub-workspace { height: auto; display: grid; grid-template-columns: 1fr; overflow: visible; }
  .creator-hub-compose { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); }
  .creator-hub-briefing { height: auto; display: block; overflow: visible; }
}
@media (max-width: 640px) {
  .creator-hub-hero { min-height: 360px; padding: 36px 22px; background-position: 64% center; }
  .creator-hub-hero-copy { width: 100%; }
  .creator-hub-hero h1 { font-size: 42px; }
  .creator-hub-stages { padding: 0; }
  .creator-hub-stages .sh-pipeline-step { padding: 0 4px; justify-content: center; text-align: center; }
  .creator-hub-stages .sh-pipeline-step-label { font-size: 8px; }
  .creator-hub-briefing-lead { grid-template-columns: 1fr; }
  .creator-hub-briefing-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ── SUPERSKRIPT · BRIEFING HOME ────────────────────────── */
.briefing-story-row { min-width:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; padding:16px 20px 8px 0; border:0; border-right:1px solid rgba(255,255,255,.1); background:transparent; color:inherit; text-align:left; cursor:pointer; }
.briefing-story-row+.briefing-story-row { padding-left:20px; }
.briefing-story-row:last-child { border-right:0; padding-right:0; }
.briefing-story-row span { color:var(--accent); font-size:8px; font-weight:800; letter-spacing:.13em; }
.briefing-story-row strong { color:rgba(244,247,246,.84); font-size:12px; line-height:1.38; }
.briefing-story-row small { color:rgba(255,255,255,.3); font-size:9px; }
.briefing-story-row:hover strong { color:#fff; }

/* Domov zostáva pôvodný Hero Hub; mení sa iba pracovná plocha na dvojstranový briefing. */
.creator-hub { grid-template-rows:clamp(250px,30vh,300px) 58px minmax(0,1fr); }
.creator-hub-briefing-panel { min-width:0; min-height:0; overflow:hidden; background:#080b0b; }
.briefing-page { min-width:0; min-height:0; display:flex; flex-direction:column; padding:20px clamp(26px,3.2vw,50px) 22px; overflow:hidden; }
.briefing-page-single { height:100%; }
.briefing-page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.32); }
.briefing-page-header span { color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.15em; }
.briefing-page-header h2 { margin:5px 0 0; color:#f4f7f6; font-size:clamp(24px,2.35vw,36px); line-height:1; letter-spacing:-.04em; }
.briefing-page-header small { color:rgba(255,255,255,.36); font-size:9px; text-align:right; }
.briefing-feed-status { display:block; margin-top:5px; color:rgba(255,255,255,.3); font-size:7px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.briefing-feed-status.is-loading { color:var(--accent); }
.briefing-feed-status.is-error { color:#d99a9a; }
.briefing-pick { position:absolute; z-index:2; top:9px; right:9px; width:20px; height:20px; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:3px; background:rgba(255,255,255,.035); color:rgba(255,255,255,.42); font:inherit; font-size:11px; line-height:18px; cursor:pointer; }
.briefing-pick:hover { border-color:var(--accent); background:rgba(0,212,170,.08); color:var(--accent); }
.briefing-feed-loading { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.4); font-size:11px; }
.briefing-feed-loading button { padding:7px 10px; border:1px solid rgba(255,255,255,.18); border-radius:3px; background:transparent; color:rgba(255,255,255,.65); font:inherit; font-size:8px; font-weight:800; letter-spacing:.1em; cursor:pointer; }
.briefing-feed-loading button:hover { border-color:var(--accent); color:var(--accent); }
@media(max-width:900px){#rpContent:has(>.creator-hub){overflow-y:auto!important}.creator-hub{height:auto;min-height:100%;display:block;overflow:visible}.creator-hub-briefing-panel{display:block;overflow:visible}.briefing-page-single{height:auto}}
@media(max-width:640px){.briefing-page-header{align-items:flex-start}}

/* Superskript home: four editorial picks + creator consistency */
.briefing-header-meta { display:flex; align-items:center; gap:18px; }
.briefing-header-meta small { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.briefing-header-meta .briefing-feed-status { display:inline-flex; margin:0; }
.briefing-header-meta button { padding:0 0 2px; border:0; border-bottom:1px solid rgba(255,255,255,.2); background:transparent; color:rgba(255,255,255,.42); font:inherit; font-size:8px; font-weight:800; letter-spacing:.1em; cursor:pointer; }
.briefing-header-meta button:hover { border-color:var(--accent); color:var(--accent); }
.briefing-focus-grid { min-height:0; flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1.9fr) minmax(300px,.8fr); gap:clamp(30px,4vw,64px); }
.briefing-feature-pair { min-width:0; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; padding:14px 0; }
.briefing-feature-story { position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; padding:14px 42px 12px 20px; }
.briefing-feature-story:nth-child(odd) { padding-left:0; border-right:1px solid var(--accent); }
.briefing-feature-story:nth-child(even) { padding-right:0; }
.briefing-feature-story:nth-child(-n+2) { border-bottom:1px solid var(--accent); }
.briefing-feature-story:nth-child(n+3) { padding-top:18px; }
.briefing-feature-category { color:var(--accent); font-size:8px; font-weight:800; letter-spacing:.12em; }
.briefing-feature-story h3 { display:-webkit-box; overflow:hidden; margin:8px 0 7px; color:#f4f7f6; font-size:clamp(14px,1.2vw,18px); line-height:1.08; letter-spacing:-.02em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.briefing-feature-story p { display:-webkit-box; overflow:hidden; margin:0; color:rgba(244,247,246,.5); font-size:9px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.briefing-feature-meta { display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px; color:rgba(255,255,255,.28); font-size:8px; }
.briefing-feature-story .briefing-pick { top:12px; right:12px; }
.briefing-consistency { position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; margin:14px 0; padding:20px 18px 18px 30px; background:linear-gradient(105deg,rgba(0,212,170,.055),rgba(0,212,170,.012) 58%,transparent); box-shadow:inset 0 1px rgba(255,255,255,.045),inset 0 -1px rgba(255,255,255,.045); }
.briefing-consistency::before { content:""; position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--accent); }
.briefing-consistency-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.briefing-consistency-kicker { position:relative; display:inline-flex; align-items:center; min-height:27px; margin-left:-30px; padding:6px 18px 6px 30px; border:1px solid rgba(0,212,170,.34); border-left:0; background:rgba(0,212,170,.11); color:var(--accent); font-size:8px; font-weight:800; letter-spacing:.14em; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%); }
.briefing-consistency-stats { display:grid; grid-template-columns:1fr 1fr; margin-top:22px; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.1); }
.briefing-consistency-stats>div { padding:18px 10px 17px 0; }
.briefing-consistency-stats>div+div { padding-left:18px; border-left:1px solid rgba(255,255,255,.1); }
.briefing-consistency-stats strong { display:block; color:#f4f7f6; font-size:clamp(21px,2vw,30px); line-height:1; letter-spacing:-.035em; }
.briefing-consistency-stats span { display:block; margin-top:5px; color:rgba(255,255,255,.35); font-size:8px; }
.briefing-consistency-goal { margin-top:22px; }
.briefing-consistency-goal>div:first-child { display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.35); font-size:7px; font-weight:800; letter-spacing:.12em; }
.briefing-consistency-goal strong { color:#f4f7f6; font-size:9px; letter-spacing:.04em; }
.briefing-consistency-progress { height:3px; margin-top:9px; overflow:hidden; background:rgba(255,255,255,.1); }
.briefing-consistency-progress i { display:block; height:100%; background:var(--accent); }
.briefing-consistency-week-label { margin-top:22px; color:rgba(255,255,255,.28); font-size:7px; font-weight:800; letter-spacing:.12em; }
.briefing-consistency-week { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:9px; }
.briefing-consistency-week>div { text-align:center; }
.briefing-consistency-week span { display:block; height:4px; background:rgba(255,255,255,.1); }
.briefing-consistency-week .is-active span { background:var(--accent); }
.briefing-consistency-week small { display:block; margin-top:5px; color:rgba(255,255,255,.25); font-size:7px; text-transform:uppercase; }
.briefing-consistency-message { margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); }
.briefing-consistency-message p { margin:0 0 7px; color:#f4f7f6; font-size:14px; font-weight:700; line-height:1.28; }
.briefing-consistency-message small { display:block; max-width:310px; color:rgba(255,255,255,.36); font-size:9px; line-height:1.45; }

/* First-run personal feed setup */
.briefing-onboarding-backdrop { position:fixed; inset:0; z-index:10020; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(2,6,5,.82); backdrop-filter:blur(12px); }
.briefing-onboarding { width:min(720px,100%); max-height:calc(100vh - 48px); overflow-y:auto; padding:34px 38px 32px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:#0a0e0d; box-shadow:0 28px 80px rgba(0,0,0,.55); color:#f4f7f6; }
.briefing-onboarding-kicker,.briefing-onboarding-label,.briefing-onboarding-field>span { color:var(--accent); font-size:9px; font-weight:800; letter-spacing:.14em; }
.briefing-onboarding h2 { margin:9px 0 10px; font-size:clamp(30px,4vw,46px); line-height:1; letter-spacing:-.045em; }
.briefing-onboarding>p { max-width:570px; margin:0 0 25px; color:rgba(255,255,255,.52); font-size:13px; line-height:1.55; }
.briefing-onboarding-label { margin-bottom:10px; }
.briefing-onboarding-interests { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:23px; border-top:1px solid rgba(255,255,255,.1); border-left:1px solid rgba(255,255,255,.1); }
.briefing-onboarding-interests button { padding:11px 7px; border:0; border-right:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); background:transparent; color:rgba(255,255,255,.42); font:inherit; font-size:8px; font-weight:800; letter-spacing:.08em; cursor:pointer; }
.briefing-onboarding-interests button:hover { color:#fff; }
.briefing-onboarding-interests button.is-active { color:var(--accent); box-shadow:inset 0 -2px var(--accent); background:rgba(0,212,170,.025); }
.briefing-onboarding-field { display:block; margin-top:16px; }
.briefing-onboarding-field>span { display:block; margin-bottom:8px; }
.briefing-onboarding-field textarea,.briefing-onboarding-field input { width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,.14); border-radius:4px; outline:none; background:rgba(255,255,255,.025); color:#f4f7f6; font:inherit; font-size:12px; }
.briefing-onboarding-field textarea { min-height:82px; resize:vertical; }
.briefing-onboarding-field textarea:focus,.briefing-onboarding-field input:focus { border-color:rgba(0,212,170,.65); }
.briefing-onboarding-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:25px; }
.briefing-onboarding-actions button { padding:11px 15px; border-radius:4px; font:inherit; font-size:9px; font-weight:800; letter-spacing:.1em; cursor:pointer; }
.briefing-onboarding-cancel { border:1px solid rgba(255,255,255,.15); background:transparent; color:rgba(255,255,255,.55); }
.briefing-onboarding-save { border:1px solid var(--accent); background:var(--accent); color:#03120f; }
@media(max-width:900px){.briefing-focus-grid{grid-template-columns:1fr}.briefing-feature-pair{min-height:520px}.briefing-consistency{min-height:360px;padding:28px 18px 28px 28px}.briefing-consistency-kicker{margin-left:-28px;padding-left:28px}.briefing-onboarding-interests{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.briefing-feature-pair{display:block;min-height:0}.briefing-feature-story{min-height:205px;padding:24px 38px 24px 0;border-right:0!important;border-bottom:1px solid var(--accent)}.briefing-feature-story:last-child{border-bottom:0}.briefing-consistency{padding-left:20px}.briefing-onboarding{padding:28px 20px}.briefing-onboarding-interests{grid-template-columns:repeat(2,1fr)}}
@media(max-height:800px) and (min-width:901px){.briefing-feature-pair{padding:9px 0}.briefing-feature-story{padding-top:10px;padding-bottom:8px}.briefing-feature-story:nth-child(n+3){padding-top:12px}.briefing-feature-story p{-webkit-line-clamp:1}.briefing-consistency{margin:9px 0;padding-top:12px;padding-bottom:11px}.briefing-consistency-stats{margin-top:10px}.briefing-consistency-stats>div{padding-top:10px;padding-bottom:9px}.briefing-consistency-goal,.briefing-consistency-week-label{margin-top:11px}.briefing-consistency-message{padding-top:10px}}
@media(max-height:800px) and (min-width:901px){#superhumanView.superscript-step-view>.left-panel{padding-top:14px;padding-bottom:16px}#superhumanView.superscript-step-view .superscript-editor-fields{padding:14px 16px}#superhumanView.superscript-step-view .superscript-form-head{padding-bottom:10px}#superhumanView.superscript-step-view .superscript-form-head p{font-size:9px}#superhumanView.superscript-step-view .topic-wrapper{padding-top:10px;padding-bottom:9px}#superhumanView.superscript-step-view .topic-wrapper::before{top:12px}#superhumanView.superscript-step-view .topic-wrapper textarea,#superhumanView.superscript-step-view .topic-wrapper:first-child textarea{min-height:52px;padding:9px 11px}#superhumanView.superscript-step-view .superscript-field-help{display:none}#superhumanView.superscript-step-view .btn-generate{min-height:42px;margin-top:10px}}

/* ── SUPERSKRIPT · SHARED WORKFLOW + EDITORIAL OUTPUT ───── */
#superhumanView.superscript-step-view {
  display: grid;
  grid-template-columns: minmax(330px, 33.333333%) minmax(0, 1fr);
  grid-template-rows: 62px 58px minmax(0, 1fr);
  overflow: hidden;
}
.superscript-section-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 10px 28px;
  background: #080b0b;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.superscript-section-brand,
.superscript-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.superscript-section-brand { color: var(--accent); }
.superscript-section-title { color: rgba(255,255,255,.48); }
.superscript-workflow-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 58px;
  background: #090d0c;
  border-top: 1px solid rgba(0,212,170,.22);
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.superscript-workflow-step {
  position: relative;
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.07);
  background: #090d0c;
  color: rgba(255,255,255,.42);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}
.superscript-workflow-step:first-child { border-left: 1px solid rgba(255,255,255,.07); }
.superscript-workflow-step:hover { color: #fff; background: #0d1211; }
.superscript-workflow-step.is-active { color: #fff; box-shadow: inset 0 2px var(--accent); }
#superhumanView.superscript-step-view > .left-panel {
  grid-column: 1;
  grid-row: 3;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 22px clamp(20px, 2.4vw, 34px) 24px;
  gap: 0;
  display: flex;
  flex-direction: column;
  background: #080b0b;
  border-right: 1px solid rgba(255,255,255,.11);
}
#superhumanView.superscript-step-view .superscript-editor-fields {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#superhumanView.superscript-step-view .superscript-editor-fields .topic-group { flex:1 1 auto; }
#superhumanView.superscript-step-view .superscript-form-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:17px; border-bottom:1px solid rgba(255,255,255,.09); }
#superhumanView.superscript-step-view .superscript-form-head .card-label { margin:0 0 7px; color:var(--accent); }
#superhumanView.superscript-step-view .superscript-form-head p { max-width:300px; margin:0; color:rgba(244,247,246,.44); font-size:10px; line-height:1.45; }
#superhumanView.superscript-step-view .superscript-form-head>span { display:none; }
#superhumanView.superscript-step-view .topic-group { gap:0; }
#superhumanView.superscript-step-view .topic-wrapper { position:relative; gap:8px; padding:17px 0 16px 34px; border-bottom:1px solid rgba(255,255,255,.075); }
#superhumanView.superscript-step-view .topic-wrapper:last-child { padding-bottom:5px; border-bottom:0; }
#superhumanView.superscript-step-view .topic-wrapper::before { content:attr(data-step); position:absolute; top:19px; left:0; color:rgba(0,212,170,.54); font-size:8px; font-weight:800; letter-spacing:.08em; }
#superhumanView.superscript-step-view .topic-wrapper label { display:flex; align-items:center; gap:8px; color:rgba(244,247,246,.82); font-size:10px; letter-spacing:.02em; text-transform:none; }
#superhumanView.superscript-step-view .topic-wrapper label>span { color:var(--accent); font-size:8px; letter-spacing:.11em; text-transform:uppercase; }
#superhumanView.superscript-step-view .topic-wrapper textarea { min-height:66px; padding:12px 13px; border-color:rgba(255,255,255,.09); border-radius:4px; background:rgba(0,0,0,.14); font-size:13px; line-height:1.45; }
#superhumanView.superscript-step-view .topic-wrapper:first-child textarea { min-height:78px; }
#superhumanView.superscript-step-view .superscript-field-help { margin-top:0; font-size:9px; line-height:1.35; }
#superhumanView.superscript-step-view .superscript-field-help::before { display:none; }
#superhumanView.superscript-step-view .btn-generate { margin-top:14px; min-height:48px; border-radius:5px; font-size:12px; font-weight:800; letter-spacing:.08em; box-shadow:0 10px 26px rgba(0,212,170,.08); }
#superhumanView.superscript-step-view > .right-panel {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  background: #080b0b;
  overflow: hidden !important;
}
#superhumanView.superscript-step-view #rpContent {
  padding: 0 !important;
  overflow-y: auto !important;
}
#superhumanView.superscript-step-view .pipeline-badge,
#superhumanView.superscript-step-view #scriptPipelineBadge { display: none !important; }

#superhumanView.superscript-step-view .workflow-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(36px, 6vw, 88px);
  background: #080b0b;
}
#superhumanView.superscript-step-view .workflow-empty-kicker,
#superhumanView.superscript-step-view .workflow-error-label {
  margin-bottom: 15px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
#superhumanView.superscript-step-view .workflow-empty-title {
  max-width: 720px;
  color: #f4f7f6;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
}
#superhumanView.superscript-step-view .workflow-empty-sub {
  max-width: 590px;
  margin-top: 18px;
  color: rgba(244,247,246,.56);
  font-size: 15px;
  line-height: 1.6;
}
#superhumanView.superscript-step-view .workflow-error {
  margin: 24px 0 0;
  padding: 24px 0;
  border-top: 1px solid rgba(255,112,112,.38);
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: rgba(244,247,246,.72);
}
#superhumanView.superscript-step-view .workflow-error strong {
  display: block;
  color: #f4f7f6;
  font-size: 22px;
}
#superhumanView.superscript-step-view .workflow-error p { margin: 8px 0 0; line-height: 1.55; }

#superhumanView.superscript-step-view .topic-section {
  width: 100%;
  padding: 28px clamp(28px, 4vw, 58px) 50px;
}
#superhumanView.superscript-step-view .topic-heading {
  margin: 0;
  padding: 0 0 20px;
  color: #f4f7f6;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: none;
  border-bottom: 1px solid rgba(255,255,255,.26);
}
#superhumanView.superscript-step-view .topic-heading::after { display: none; }
#superhumanView.superscript-step-view .sources-row {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#superhumanView.superscript-step-view .scripts-grid { display: block; }
#superhumanView.superscript-step-view .script-card {
  margin: 18px 0 0;
  padding: 0 20px 18px;
  overflow: hidden;
  background: linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.009));
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 7px;
  box-shadow: 0 18px 46px rgba(0,0,0,.13);
  transform: none;
}
#superhumanView.superscript-step-view .script-card:hover {
  background: linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
  border-color: rgba(0,212,170,.2);
  transform: none;
}
#superhumanView.superscript-step-view .script-card-header {
  align-items: flex-start;
  margin: 0 -20px 6px;
  padding: 15px 20px;
  background: rgba(255,255,255,.018);
  border-bottom: 1px solid rgba(255,255,255,.075);
}
#superhumanView.superscript-step-view .script-card-title {
  color: #f4f7f6;
  font-size: 12px;
  letter-spacing: .11em;
}
#superhumanView.superscript-step-view .script-num {
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  font-size: 12px;
}
#superhumanView.superscript-step-view .btn-select-script {
  margin: 0 0 0 8px;
  padding: 0 0 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0,212,170,.6);
  border-radius: 0;
  box-shadow: none;
  color: var(--accent);
  font-size: 10px;
  animation: none;
}
#superhumanView.superscript-step-view .btn-select-script:hover {
  background: transparent;
  color: #fff;
  transform: none;
}
#superhumanView.superscript-step-view .script-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
#superhumanView.superscript-step-view .script-action-btn {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0 0 3px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.24);
  border-radius: 0;
  color: rgba(255,255,255,.67);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}
#superhumanView.superscript-step-view .script-action-btn:hover {
  background: transparent;
  border-color: var(--accent);
  color: #fff;
  transform: none;
}
#superhumanView.superscript-step-view .rpn-section { position:relative; display:grid; grid-template-columns:112px minmax(0,1fr); gap:18px; margin:10px 0 0; padding:14px 15px; background:rgba(0,0,0,.13); border:1px solid rgba(255,255,255,.065); border-radius:5px; }
#superhumanView.superscript-step-view .rpn-section::before { content:""; position:absolute; inset:9px auto 9px 0; width:2px; background:rgba(0,212,170,.42); }
#superhumanView.superscript-step-view .rpn-section:first-of-type { border-color:rgba(0,212,170,.18); background:rgba(0,212,170,.025); }
#superhumanView.superscript-step-view .rpn-label-row { align-self:start; flex-direction:column; align-items:flex-start; gap:8px; margin:3px 0 0; }
#superhumanView.superscript-step-view .rpn-label {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  font-size: 9px;
}
#superhumanView.superscript-step-view .rpn-label::before { display: none; }
#superhumanView.superscript-step-view .rpn-text {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(244,247,246,.84);
  font-size: 13px;
  line-height: 1.58;
}
#superhumanView.superscript-step-view .rpn-text:focus { background: rgba(255,255,255,.025); }
#superhumanView.superscript-step-view .btn-hook-rewrite {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(0,212,170,.38);
  border-radius: 0;
  background: transparent;
}
#superhumanView.superscript-step-view .script-stats { border-top: 0; padding-top: 5px; }
#superhumanView.superscript-step-view .hook-badge { border-radius: 2px; }

#superhumanView.superscript-step-view .broll-script-block { padding:0; overflow:hidden; background:transparent; border:0; border-radius:0; }
#superhumanView.superscript-step-view .broll-script-block>.script-card-header { margin:0 0 14px; padding:0 0 15px!important; background:transparent; border-bottom:1px solid rgba(255,255,255,.14); }
.broll-plan-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 14px; border:1px solid rgba(0,212,170,.16); border-radius:5px; background:rgba(0,212,170,.025); }
.broll-plan-summary>div { padding:11px 13px; border-left:1px solid rgba(255,255,255,.07); }
.broll-plan-summary>div:first-child { border-left:0; }
.broll-plan-summary span,.broll-plan-summary strong { display:block; }
.broll-plan-summary span { margin-bottom:5px; color:rgba(255,255,255,.31); font-size:7px; font-weight:800; letter-spacing:.12em; }
.broll-plan-summary strong { color:rgba(244,247,246,.86); font-size:11px; font-weight:650; }
#superhumanView.superscript-step-view .broll-section { margin:0 0 12px; padding:16px 18px 10px; background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.085); border-radius:6px; }
#superhumanView.superscript-step-view .broll-section>.rpn-label { margin:0 0 9px; color:var(--accent); }
#superhumanView.superscript-step-view .broll-table { margin:0; }
#superhumanView.superscript-step-view .broll-table-header { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); padding:0 0 7px; }
#superhumanView.superscript-step-view .broll-row { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); padding:10px 0; }
#superhumanView.superscript-step-view .broll-script-cell { padding-right:18px; color:rgba(244,247,246,.66); font-style:normal; line-height:1.48; }
#superhumanView.superscript-step-view .broll-shot-cell { padding-left:18px; }
.broll-shot-plan { display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:start; gap:7px; }
.broll-shot-kind,.broll-shot-duration { display:inline-flex; align-items:center; min-height:20px; padding:3px 6px; border:1px solid rgba(255,255,255,.1); border-radius:3px; color:rgba(255,255,255,.56); font-size:7px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.broll-shot-kind.is-avatar { border-color:rgba(0,212,170,.34); background:rgba(0,212,170,.07); color:var(--accent); }
.broll-shot-kind.is-split { border-color:rgba(73,174,255,.28); background:rgba(73,174,255,.055); color:#8ccfff; }
.broll-shot-description { padding-top:2px; color:rgba(244,247,246,.78); font-size:11px; line-height:1.45; }

#superhumanView.superscript-step-view .scripts-focus-container { padding: 28px clamp(28px, 4vw, 58px); }
#superhumanView.superscript-step-view .btn-focus-back {
  padding: 0 0 3px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.3);
  border-radius: 0;
}
#superhumanView.superscript-step-view .script-card-focus {
  max-width: none;
  padding: 26px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.25) !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 0 !important;
  box-shadow: none;
  animation: none;
}

@media (max-width: 900px) {
  #superhumanView.superscript-step-view {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  #superhumanView.superscript-step-view .superscript-section-topbar { display: flex !important; flex: 0 0 52px; min-height: 52px; padding: 8px 18px; }
  #superhumanView.superscript-step-view .superscript-workflow-nav { display: grid !important; flex: 0 0 58px; width: 100%; }
  #superhumanView.superscript-step-view > .left-panel { width: 100%; height: auto; overflow: visible; }
  #superhumanView.superscript-step-view > .right-panel { width: 100%; min-height: 520px; overflow: visible !important; }
  #superhumanView.superscript-step-view .rpn-section { grid-template-columns:1fr; gap:8px; }
  #superhumanView.superscript-step-view .rpn-label-row { flex-direction:row; align-items:center; }
  .broll-plan-summary { grid-template-columns:1fr; }
  .broll-plan-summary>div { border-left:0; border-top:1px solid rgba(255,255,255,.07); }
  .broll-plan-summary>div:first-child { border-top:0; }
  #superhumanView.superscript-step-view .broll-row { grid-template-columns:1fr; gap:8px; }
  #superhumanView.superscript-step-view .broll-script-cell { padding:0 0 8px; border-right:0; border-bottom:1px solid rgba(255,255,255,.06); }
  #superhumanView.superscript-step-view .broll-shot-cell { padding-left:0; }
}

@media (max-height:800px) and (min-width:901px) {
  #superhumanView.superscript-step-view>.left-panel { padding-top:14px; padding-bottom:16px; }
  #superhumanView.superscript-step-view .superscript-editor-fields { padding:14px 16px; }
  #superhumanView.superscript-step-view .superscript-form-head { padding-bottom:10px; }
  #superhumanView.superscript-step-view .superscript-form-head p { font-size:9px; }
  #superhumanView.superscript-step-view .topic-wrapper { padding-top:10px; padding-bottom:9px; }
  #superhumanView.superscript-step-view .topic-wrapper::before { top:12px; }
  #superhumanView.superscript-step-view .topic-wrapper textarea,
  #superhumanView.superscript-step-view .topic-wrapper:first-child textarea { min-height:52px; padding:9px 11px; }
  #superhumanView.superscript-step-view .superscript-field-help { display:none; }
  #superhumanView.superscript-step-view .btn-generate { min-height:42px; margin-top:10px; flex:0 0 auto; }
}

/* Topbar akcia — cesta späť k formuláru, keď je zbalený (FLOW) */
.superscript-section-title { display: flex; align-items: center; gap: 14px; }
.superscript-topbar-step { color: rgba(255,255,255,.48); }
.superscript-topbar-action {
  background: none;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 4px;
  color: rgba(255,255,255,0.62);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.superscript-topbar-action:hover {
  color: var(--accent);
  border-color: rgba(0,212,170,0.5);
}

/* ── FLOW · načítavanie zrkadlí tvar výsledku (3 skripty × 5 RPN sekcií) ── */
.shimmer-scripts { display: flex; flex-direction: column; }
.shimmer-script { padding: 20px 0 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.shimmer-script:first-child { padding-top: 4px; }
.shimmer-script:last-child { border-bottom: 0; }
.shimmer-script-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.shimmer-script-num {
  color: rgba(255,255,255,.28);
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.shimmer-row { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 16px; padding: 7px 0; }
.shimmer-row-label {
  color: rgba(0,212,170,.32);
  font-size: 9px; font-weight: 800; letter-spacing: .12em; padding-top: 2px;
}
.shimmer-row-lines { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.shimmer-row .shimmer-line { height: 9px; margin: 0; }

/* ── FLOW · návrhy tém v prázdnom Skripte (nie druhý feed, len tri riadky) ── */
.workflow-empty-topics { margin-top: 30px; display: flex; flex-direction: column; max-width: 620px; }
.workflow-empty-topics-label {
  color: rgba(255,255,255,.3);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.workflow-empty-topic {
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 12px 2px; font: inherit; font-size: 13.5px; line-height: 1.45;
  color: rgba(255,255,255,.72); text-align: left; cursor: pointer;
  transition: color .15s ease;
}
.workflow-empty-topic:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   FLOW — čitateľné písmo, plná šírka po vygenerovaní, loader
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. PLNÁ ŠÍRKA ────────────────────────────────────────────────
   .main.sh-fullwidth .left-panel { display:none } má nižšiu špecificitu
   než #superhumanView.superscript-step-view > .left-panel, ktorý nastavuje
   display:flex — preto formulár neodchádzal. Tu to prebíjame naspäť
   a mriežka sa zmrští na jeden stĺpec. */
#superhumanView.superscript-step-view.sh-fullwidth {
  grid-template-columns: minmax(0, 1fr);
}
#superhumanView.superscript-step-view.sh-fullwidth > .left-panel {
  display: none;
}
#superhumanView.superscript-step-view.sh-fullwidth > .right-panel {
  grid-column: 1 / -1;
}

/* ── 2. ČITATEĽNÉ PÍSMO VO FORMULÁRI ──────────────────────────────
   Pôvodné 8–10 px bolo pod hranicou pohodlného čítania. Zladené
   s ostatnými panelmi appky. */
#superhumanView.superscript-step-view .topic-wrapper {
  padding: 20px 0 18px 40px;
}
#superhumanView.superscript-step-view .topic-wrapper::before {
  top: 22px;
  font-size: 10px;
  letter-spacing: .06em;
}
#superhumanView.superscript-step-view .topic-wrapper label {
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(244, 247, 246, .92);
}
#superhumanView.superscript-step-view .topic-wrapper label > span {
  font-size: 10px;
  letter-spacing: .12em;
}
#superhumanView.superscript-step-view .topic-wrapper textarea,
#superhumanView.superscript-step-view .topic-wrapper:first-child textarea {
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 14px;
}
#superhumanView.superscript-step-view .superscript-field-help {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(244, 247, 246, .42);
}
#superhumanView.superscript-step-view .btn-generate {
  font-size: 13px;
  letter-spacing: .05em;
}

/* ── 3. LOADER V NAŠEJ GRAFIKE ────────────────────────────────────
   Bez emoji (tie sú preč z loader.js), bez rámu cez celú šírku.
   Vystredený stĺpec, tenký progres, číslo kroku namiesto ikony. */
#rpContent .ai-loading-box {
  max-width: 560px;
  margin: 8vh auto 40px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-align: center;
}
#rpContent .ai-loading-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
#rpContent .ai-loading-step {
  order: -1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  color: rgba(0, 212, 170, .55);
}
#rpContent .ai-loading-text {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}
#rpContent .ai-loading-percent {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .35);
}
#rpContent .ai-loading-progress {
  height: 2px;
  background: rgba(255, 255, 255, .08);
  border-radius: 1px;
  overflow: hidden;
}
#rpContent .ai-loading-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
}
#rpContent .ai-loading-subtext {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .32);
}

/* Kostra pod loaderom je len naznačenie — nesmie kričať */
#rpContent .ai-loading-box ~ * .shimmer-scripts,
#rpContent .scripts-output .shimmer-scripts { opacity: .5; }
#rpContent .scripts-output .topic-heading { display: none; }

/* ══════════════════════════════════════════════════════════════════
   FLOW — jednotné prázdne stavy, okraje pri načítavaní, farby labelov
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. VŠETKY LABELY VO FORMULÁRI ROVNAKO ────────────────────────
   Téma mala biely popis, Pointa a Akcia tyrkysový (.label-context).
   Zjednotené na bielu — tyrkysový ostáva len malý štítok TÉMA/POINTA/AKCIA. */
#superhumanView.superscript-step-view .topic-wrapper label.label-context {
  color: rgba(244, 247, 246, .92) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
#superhumanView.superscript-step-view .topic-wrapper label.label-context > span {
  color: var(--accent) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
/* Rámy polí rovnaké pre všetky tri kroky */
#superhumanView.superscript-step-view .context-wrapper textarea {
  border-color: rgba(255, 255, 255, .1);
}

/* ── 2. PRÁZDNE STAVY ZAČÍNAJÚ NA ROVNAKEJ VÝŠKE ──────────────────
   Predtým boli zvislo vycentrované, takže Skript (má navyše návrhy tém)
   sedel inde než B-Roll a Hudba. Teraz spoločný odstup zhora. */
#superhumanView.superscript-step-view .workflow-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: clamp(70px, 13vh, 150px) clamp(28px, 4vw, 58px) 60px;
  background: #080b0b;
}

/* ── 3. NAČÍTAVANIE MÁ OKRAJE ─────────────────────────────────────
   #rpContent má v tomto pohľade padding:0 !important, takže kostra
   pri generovaní bežala od hrany. Padding dostáva samotný výstup —
   rovnaký ako hotový .topic-section. */
#superhumanView.superscript-step-view .scripts-output {
  padding: 28px clamp(28px, 4vw, 58px) 60px;
  gap: 0;
}
#superhumanView.superscript-step-view .scripts-output .topic-section {
  padding: 0;
}
#superhumanView.superscript-step-view .scripts-output .section-divider {
  display: none;
}

/* ── 4. LOADER S VÄČŠOU PRÍTOMNOSŤOU ──────────────────────────────
   Predchádzajúca verzia bola priveľmi riedka. Väčší text, zreteľnejší
   progres, tenká linka pod blokom oddelí načítavanie od kostry. */
#rpContent .ai-loading-box {
  max-width: 680px;
  margin: 4vh auto 34px;
  padding: 0 0 30px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: none;
  text-align: center;
}
#rpContent .ai-loading-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
#rpContent .ai-loading-step {
  order: -1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  color: rgba(0, 212, 170, .6);
}
#rpContent .ai-loading-text {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: #f4f7f6;
}
#rpContent .ai-loading-percent {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .38);
}
#rpContent .ai-loading-progress {
  height: 3px;
  background: rgba(255, 255, 255, .07);
  border-radius: 2px;
  overflow: hidden;
}
#rpContent .ai-loading-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(0, 212, 170, .35);
}
#rpContent .ai-loading-subtext {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .34);
}

/* Kostra pod loaderom — naznačenie, nie plnohodnotný obsah */
#superhumanView.superscript-step-view .scripts-output .shimmer-scripts { opacity: .38; }
#superhumanView.superscript-step-view .scripts-output .topic-heading { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   ATELIÉR — storyboard po úsekoch (slice 5d-3)
   Dočasné jednoduché karty nad pôvodnou mriežkou shotov. Padnú spolu
   s prepisom Kroku 6 (5d-5), preto zámerne minimum vlastných tried.
   ═══════════════════════════════════════════════════════════════════ */
.imax-sbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.imax-sbs-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.imax-sbs-head { display: flex; align-items: baseline; gap: 8px; }
.imax-sbs-num {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--accent, #00d4aa);
  letter-spacing: 0.08em;
}
.imax-sbs-title { font-weight: 600; font-size: 14px; color: #fff; }
.imax-sbs-syn { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.45; }
.imax-sbs-media {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0d12;
  display: flex; align-items: center; justify-content: center;
}
.imax-sbs-img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.imax-sbs-empty { font-size: 12px; color: rgba(255,255,255,0.4); text-align: center; padding: 12px; }
.imax-sbs-err {
  font-size: 12px;
  color: #ff8080;
  background: rgba(255,80,80,0.08);
  border-radius: 6px;
  padding: 6px 8px;
}
.imax-sbs-actions { display: flex; gap: 8px; margin-top: auto; }

/* Nástroje strihu nad timeline — len vetva kúskov (slice 5c). */
.imax-tl-tools {
  display: flex;
  gap: 8px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}