*, *::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.webp) — 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: linear-gradient(135deg, var(--accent), #00b894);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    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: 0 0 8px var(--accent-glow);
    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: 0 0 8px var(--accent-glow);
  }

  .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: 0 0 6px var(--accent-glow);
  }

  .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), 0 0 18px var(--accent-glow), 0 0 40px rgba(0,212,170,0.12);
    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: 0 4px 20px var(--accent-glow); }

  .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: 0 4px 20px var(--accent-glow);
  }
  .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: 0 0 16px rgba(0, 212, 170, 0.1);
  }

  .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: 0 4px 20px rgba(0,212,170,0.3);
  }

  .btn-use-topic:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(0,212,170,0.4);
  }

  .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: 0 2px 8px rgba(0,212,170,0.35); }
  .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: 0 0 8px var(--accent-glow);
    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: 0 4px 20px var(--accent-glow);
  }

  .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: 0 0 8px var(--accent-glow);
  }

  .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: 0 0 20px rgba(0, 212, 170, 0.15), inset 0 0 20px rgba(0, 212, 170, 0.03);
    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: 0 8px 32px rgba(0, 212, 170, 0.4);
    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: 0 0 24px rgba(0, 212, 170, 0.06);
  }

  .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: 0 4px 20px var(--accent-glow);
  }

  /* ── 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), 0 0 12px var(--accent-glow);
  }
  .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), 0 0 12px var(--accent-glow);
    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: 0 0 8px var(--accent-glow);
  }
  .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: 0 4px 16px var(--accent-glow);
  }

  /* ── 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: 0 0 20px rgba(0,212,170,0.1);
  }

  .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: 0 0 8px var(--accent-glow);
  }

  .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: 0 4px 20px var(--accent-glow);
  }

  .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: 0 6px 24px var(--accent-glow);
  }

  .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: 0 0 16px var(--accent-glow);
  }

  /* 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: 0 4px 20px var(--accent-glow);
  }

  /* 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: 0 4px 16px var(--accent-glow);
  }

  .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), 0 6px 20px var(--accent-glow);
  }

  .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: 0 4px 20px var(--accent-glow);
  }

  /* ── 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: 0 4px 20px var(--accent-glow);
  }

  .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: 0 8px 20px var(--accent-glow);
  }

  .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, 0 4px 14px var(--accent-glow);
  }

  .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: 0 0 20px var(--accent-glow);
  }

  .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: 0 0 8px var(--accent-glow);
  }

  /* 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: 0 12px 40px rgba(0,212,170,0.2);
  }

  /* 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: 0 6px 24px var(--accent-glow);
  }

  .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: 0 0 28px rgba(0,212,170,0.3);
  }
  #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: 0 4px 14px rgba(0,212,170,0.25);
  }

  /* ══════════════════════════════════════════════════════════════
     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.webp. */
  .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: 0 8px 28px rgba(0,212,170,0.4);
  }

  /* 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:
      0 0 8px var(--accent, #00d4aa),
      0 0 16px rgba(0, 212, 170, 0.6),
      0 0 24px rgba(0, 212, 170, 0.3);
    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: 0 8px 24px rgba(0,212,170,0.2);
  }
  .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: 0 4px 14px rgba(0,212,170,0.25);
  }
  .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: 0 8px 28px rgba(0,212,170,0.35);
  }
  .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: 0 8px 28px rgba(0,212,170,0.4);
  }
  .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: 0 0 12px rgba(0,212,170,0.15);
    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: 0 0 24px var(--accent-glow), 0 4px 16px rgba(0,212,170,0.4);
    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 60px rgba(0,212,170,0.12),
      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: 0 0 16px var(--accent-glow);
  }

  .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: 0 0 18px rgba(0, 212, 170, 0.15);
}

/* ── 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: 0 0 10px rgba(0, 212, 170, 0.45);
}

/* "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: 0 0 10px rgba(0, 212, 170, 0.25);
}

.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: 0 0 14px rgba(0, 212, 170, 0.3);
  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: 0 4px 18px rgba(0, 212, 170, 0.22);
}
.user-menu-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 212, 170, 0.35);
  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: 0 6px 28px rgba(0, 212, 170, 0.3);
}
.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;
}
.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: 0 4px 18px rgba(0, 212, 170, 0.22);
}
.avc-btn-apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 212, 170, 0.35);
}

@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: 0 4px 18px rgba(0, 212, 170, 0.22);
}
.profile-hero-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 212, 170, 0.35);
  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: 0 10px 32px rgba(0,212,170,0.12);
}
.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: 0 4px 14px rgba(0,212,170,0.4);
}
.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: 0 6px 18px rgba(0,212,170,0.3);
}
.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: 0 0 12px rgba(0,212,170,0.4);
}
.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: 0 4px 14px rgba(0, 212, 170, 0.25);
}
.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: 0 4px 16px rgba(0,212,170,0.3);
}
.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: 0 6px 18px rgba(0,212,170,0.3);
}

/* ═══════════════════════════════════════════════════════════
   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: 0 4px 18px rgba(0, 212, 170, 0.22);
  margin-top: 4px;
}
.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 212, 170, 0.35);
}
.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: 0 3px 14px rgba(0, 212, 170, 0.22);
  flex-shrink: 0;
}
.header-signin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(0, 212, 170, 0.35);
}

@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: 0 0 16px rgba(0,212,170,0.1);
}

.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), 0 0 50px rgba(0,212,170,0.15);
}

.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: 0 0 16px rgba(0,212,170,0.4);
}

.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: 1100px;
  margin: 0 auto;
  padding: 40px 32px 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;
}

.news-source {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.news-source-label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.news-source-link {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.news-source-link:hover { color: #fff; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.news-card {
  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;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.news-card:hover {
  border-color: rgba(0,212,170,0.4);
  background: linear-gradient(135deg, rgba(0,212,170,0.05) 0%, rgba(255,255,255,0.02) 100%);
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.news-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #1a1a24;
  flex-shrink: 0;
}

.news-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.news-card-category {
  color: var(--accent);
  padding: 2px 8px;
  background: rgba(0,212,170,0.1);
  border: 1px solid rgba(0,212,170,0.25);
  border-radius: 999px;
  font-size: 9px;
}

.news-card-sep { opacity: 0.4; }

.news-card-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.news-card-excerpt {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0;
}

.news-card-readmore {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.25s ease;
}

.news-card:hover .news-card-readmore {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 800px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-title { font-size: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   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: 0 0 20px rgba(0, 212, 170, 0.2);
}

.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: 0 20px 50px rgba(0,212,170,0.12);
}

.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: 0 8px 20px rgba(0,212,170,0.4);
}

/* 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: 0 8px 24px rgba(0, 212, 170, 0.4);
}
.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: 0 10px 30px rgba(0, 212, 170, 0.3);
}
.sh-topic-detail-use:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 212, 170, 0.5);
}
.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: 0 10px 40px rgba(0, 212, 170, 0.35);
}
.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
   ═══════════════════════════════════════════════════════════ */

#nanoBananaView,
#gptImageView,
#compareView {
  flex: 1;
  min-height: 0;
  /* overflow-y: auto odstránené — stránka prirodzene fituje do viewportu
     rovnako ako Seedream / Reve, žiadny zbytočný scrollbar */
}

.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; }

/* Compare aspect button — dvojradkový (label + sub-label s natívnymi pomermi per model) */
.cmp-aspect-btn {
  align-items: center;
  gap: 10px;
  text-align: left;
}
.cmp-aspect-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.cmp-aspect-label {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}
.cmp-aspect-sub {
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}
.cmp-aspect-btn.active .cmp-aspect-sub {
  color: rgba(0, 212, 170, 0.7);
}

.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: 0 8px 20px rgba(0, 212, 170, 0.4);
}

/* 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; }
}

/* ═══════════════════════════════════════════════════════════
   COMPARE MODE — split preview + history galéria
   ═══════════════════════════════════════════════════════════ */

.cmp-preview {
  padding: 14px;
  display: flex;
  flex-direction: column;
}

.cmp-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 0;
}

.cmp-half {
  background: #050507;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.cmp-divider {
  width: 10px;
  background: transparent;
}

/* Empty state */
.cmp-half-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 20px;
  color: rgba(255,255,255,0.45);
}
.cmp-half-icon {
  font-size: 38px;
  margin-bottom: 12px;
  opacity: 0.7;
  width: 1em; height: 1em;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmp-half-icon svg {
  width: 38px; height: 38px;
  color: rgba(255,255,255,0.65);
}
.cmp-half-label {
  font-family: 'Space Grotesk', inherit;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  margin-bottom: 4px;
}
.cmp-half-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* Loading state */
.cmp-half-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 30px 20px;
}
.cmp-half-loading-label {
  font-family: 'Space Grotesk', inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.cmp-half-loading-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}

/* Image result state */
.cmp-half-image {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-half-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.cmp-half-badge {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cmp-openai-icon {
  display: inline-flex;
  width: 14px; height: 14px;
}
.cmp-openai-icon svg { width: 14px; height: 14px; }

/* Download/fullscreen actions na half image (visible on hover) */
.cmp-half-actions {
  position: absolute;
  bottom: 10px; right: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: all 0.2s ease;
}
.cmp-half-image:hover .cmp-half-actions {
  opacity: 1;
  transform: translateY(0);
}
.cmp-half-action-btn {
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cmp-half-action-btn:hover {
  background: rgba(0, 212, 170, 0.22);
  border-color: rgba(0, 212, 170, 0.6);
  color: var(--accent);
}

/* After-actions bar (po úspešnom generovaní oboch) */
.cmp-after-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cmp-after-actions:empty { display: none; }

.cmp-after-status {
  font-family: 'Space Grotesk', inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-align: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.cmp-status-ok {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.3);
}
.cmp-status-warn {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.cmp-after-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.cmp-after-btn {
  padding: 10px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cmp-after-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
}
.cmp-after-btn-primary {
  background: rgba(0, 212, 170, 0.15);
  border-color: rgba(0, 212, 170, 0.5);
  color: var(--accent);
}
.cmp-after-btn-primary:hover {
  background: rgba(0, 212, 170, 0.25);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 212, 170, 0.2), 0 6px 16px -8px rgba(0, 212, 170, 0.5);
}

/* Error state */
.cmp-half-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 20px;
  text-align: center;
}
.cmp-half-error-icon { font-size: 32px; }
.cmp-half-error-label {
  font-family: 'Space Grotesk', inherit;
  font-size: 13px;
  font-weight: 700;
  color: #ef4444;
}
.cmp-half-error-msg {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  max-width: 240px;
  line-height: 1.4;
}

/* Compare gallery */
/* Compare studio — preview vždy stretchuje na výšku ľavého panelu */
.nb-studio.cmp-studio {
  height: auto;
  min-height: 0;
  max-height: none;
}
.nb-studio.cmp-studio .cmp-preview {
  min-height: 0;
  height: 100%;
}

.cmp-gallery-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.cmp-gallery-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cmp-gallery-title {
  font-family: 'Space Grotesk', inherit;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.cmp-gallery-count {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

.cmp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 2), 1fr);
  gap: 14px;
  overflow-y: auto;
  align-content: start;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cmp-gallery-grid::-webkit-scrollbar { display: none; }

.cmp-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 20px;
  color: rgba(255,255,255,0.4);
}
.cmp-gallery-empty-icon { font-size: 36px; margin-bottom: 10px; }
.cmp-gallery-empty-text { font-size: 13px; }

.cmp-gallery-item {
  position: relative;
  background: #050507;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  aspect-ratio: 16 / 9;
}
.cmp-gallery-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 212, 170, 0.4);
  box-shadow: 0 8px 22px -10px rgba(0, 212, 170, 0.3);
}
.cmp-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cmp-gallery-item-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: #fff;
}
.cmp-gallery-item-prompt {
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 4px;
  font-weight: 500;
}
.cmp-gallery-item-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.cmp-gallery-item-delete {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
}
.cmp-gallery-item:hover .cmp-gallery-item-delete { opacity: 1; }
.cmp-gallery-item-delete:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 1);
}

/* Compare lightbox */
.cmp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.cmp-lightbox-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.cmp-lightbox-close:hover { background: rgba(255,255,255,0.15); }
.cmp-lightbox-content {
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cmp-lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.cmp-lightbox-meta {
  text-align: center;
  max-width: 700px;
}
.cmp-lightbox-prompt {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.cmp-lightbox-info {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
}
.cmp-lightbox-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.cmp-lightbox-btn {
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font-family: 'Space Grotesk', inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cmp-lightbox-btn:hover {
  background: rgba(0, 212, 170, 0.15);
  border-color: rgba(0, 212, 170, 0.5);
  color: var(--accent);
}

@media (max-width: 1100px) {
  .cmp-split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 10px 1fr;
  }
  .cmp-divider {
    width: 100%;
    height: 10px;
  }
}

/* ═══════════════════════════════════════════════
   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;
}

/* Compare gallery zostáva v gridu (porovnania majú konzistentné aspect — bez masonry) */
.cmp-gallery-grid {
  grid-template-columns: repeat(var(--gallery-cols, 2), minmax(0, 1fr)) !important;
}

/* Compare studio — used base .nb-studio rules */
.nb-studio.cmp-studio {
  /* inherits 3-col grid from .nb-studio */
}

.cmp-gallery-panel {
  /* používa všetky pravidlá .nb-gallery-panel */
}

/* Loading card v Compare gallery — dual-model overlay spinner */
.cmp-gallery-item.cmp-loading-card {
  cursor: default;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.06) 0%, rgba(0, 212, 170, 0.02) 100%);
  border: 1px solid rgba(0, 212, 170, 0.25);
}
.cmp-gallery-item.cmp-loading-card:hover {
  transform: none;
  border-color: rgba(0, 212, 170, 0.25);
  box-shadow: none;
}
.cmp-loading-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
}
.cmp-loading-split::before {
  content: '';
  grid-column: 2;
  align-self: stretch;
  background: rgba(255,255,255,0.08);
}
.cmp-loading-half {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
}
.cmp-loading-half:nth-child(2) {
  grid-column: 3;
}
.cmp-loading-spinner {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--accent);
  animation: cmpSpin 1.6s linear infinite;
}
.cmp-loading-spinner svg {
  width: 28px;
  height: 28px;
}
.cmp-loading-spinner.is-done {
  animation: none;
  color: #22c55e;
  font-size: 22px;
}
.cmp-loading-spinner.is-error {
  animation: none;
  color: #ef4444;
}
@keyframes cmpSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.cmp-loading-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
  text-align: center;
}

/* Compact after-actions — pod CTA tlačidlom (Compare iba) */
.nb-cta-section .cmp-after-actions:empty { display: none; }
.nb-cta-section .cmp-after-actions {
  margin-top: 10px;
}
.nb-cta-section .cmp-after-buttons {
  display: flex;
  gap: 8px;
}
.nb-cta-section .cmp-after-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 12px;
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.3);
  border-radius: 10px;
  color: var(--accent);
  font-family: 'Space Grotesk', inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.nb-cta-section .cmp-after-btn:hover {
  background: rgba(0, 212, 170, 0.15);
}
.nb-cta-section .cmp-after-status {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  padding: 6px;
}
.nb-cta-section .cmp-after-status.cmp-status-warn {
  color: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════
   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.webp */
.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: 0 0 16px rgba(0,212,170,0.25);
}

/* 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: 0 4px 16px rgba(0, 212, 170, 0.3);
}

.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: 0 4px 16px rgba(0, 212, 170, 0.3);
}

.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: 0 8px 24px rgba(0, 212, 170, 0.2);
}

.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;
}

/* ── COMPARE: SELECT MODELS MODAL ──────────────── */
.cmp-select-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.cmp-select-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: 92vh;
  overflow-y: auto;
  position: relative;
}

.cmp-select-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;
}
.cmp-select-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.cmp-select-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.cmp-select-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}

.cmp-select-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 560px) {
  .cmp-select-grid { grid-template-columns: 1fr; }
}

.cmp-select-card {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.cmp-select-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}

.cmp-select-card.is-selected {
  border-color: var(--accent, #00d4aa);
  background: rgba(0,212,170,0.06);
  box-shadow: 0 4px 16px rgba(0,212,170,0.15);
}

.cmp-select-slot-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent, #00d4aa);
  color: #0a0a0a;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmp-select-card-icon {
  font-size: 36px;
  margin-bottom: 10px;
  line-height: 1;
}
.cmp-select-card-icon svg {
  width: 1em;
  height: 1em;
  display: block;
  margin: 0 auto;
}

.cmp-select-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.cmp-select-card-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cmp-select-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.cmp-select-counter {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
}

.cmp-select-generate {
  background: var(--accent, #00d4aa);
  color: #0a0a0a;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
}
.cmp-select-generate:hover:not(:disabled) {
  transform: translateY(-1px);
}
.cmp-select-generate:disabled,
.cmp-select-generate.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   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),
    0 0 40px rgba(0,212,170,0.05);
  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),
    0 0 60px rgba(0,212,170,0.12);
}

@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: 0 0 12px rgba(0,212,170,0.45);
}
.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: 0 0 24px rgba(0,212,170,0.1);
}

.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: 0 2px 10px rgba(0,212,170,0.35);
}
.suno-player-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(0,212,170,0.55);
}
.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: 0 4px 16px rgba(0,212,170,0.3);
}

/* 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: 0 0 14px rgba(0,212,170,0.35);
}
.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),
              0 0 60px rgba(0,212,170,0.04);
  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: 0 0 18px rgba(0,212,170,0.12);
}
.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: 0 6px 18px rgba(0,212,170,0.35);
}

/* 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: 0 0 8px rgba(0,212,170,0.5);
  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: 0 0 8px rgba(0,212,170,0.5);
  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),
    0 14px 32px rgba(0,212,170,0.18);
}
.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: 0 4px 12px rgba(0,212,170,0.4);
}

/* ═══════════════════════════════════════════════════════════
   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: 0 0 18px var(--accent-glow, rgba(0,212,170,0.4));
}
.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 8px 24px rgba(0, 212, 170, 0.3), 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 12px 28px rgba(0, 212, 170, 0.4), 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: 0 12px 28px rgba(0, 212, 170, 0.35);
}
.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: 0 10px 24px rgba(0, 212, 170, 0.4);
}
.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: 0 12px 40px rgba(0, 212, 170, 0.15);
}
.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: 200px;
  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 */
}
.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: linear-gradient(135deg, #00d4aa, #00a382);
  border: none;
  color: #0a0e14;
  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: linear-gradient(135deg, #00d4aa, #00a382);
  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;
}

/* ═══════════════════════════════════════════════════════════
   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) */
.imax-shots-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .imax-shots-list { 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);
}

/* 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-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 */
.imax-shots-grid { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.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; }
@media (max-width: 900px) { .imax-shot-cells { grid-template-columns: 1fr; } }
.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 — STRIH A EXPORT (Capcut-style timeline)
   ═══════════════════════════════════════════════════════════ */
.imax-step7-edit {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* ═══ Clean preview — len video okno, žiadne dekorácie ═══ */
.imax-cinema {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.imax-cinema-screen {
  position: relative;
  background: #000;
  width: 50%;          /* polovica šírky containera */
  max-width: 720px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.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-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: 50%;
  max-width: 720px;
  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-controls { width: 80%; }
}

/* 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), 0 0 8px rgba(0, 212, 170, 0.5);
  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;
}
/* SFX track + placeholder odstránené — SFX vynechané (Kling/Seedance diegetic
   audio je dostatočné). Phase 4 final render bude cez backend. */

/* ═══════════════════════════════════════════════════════════
   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;
}

/* ═══════════════════════════════════════════════════════════
   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: linear-gradient(90deg, #e50914, #ff5a36);
  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 */
}

/* Edit thumbnail button — 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 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%;
}
@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 (? + edit thumbnail) ── */
.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: 0 20px 60px rgba(0, 212, 170, 0.18);
}
.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: 0 8px 24px rgba(0, 212, 170, 0.25);
  transition: all 0.18s ease;
}
.imax-hero-cta:hover .imax-hero-cta-btn {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 212, 170, 0.4);
  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);
}

.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), 0 0 24px rgba(0, 212, 170, 0.15);
  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), 0 0 36px rgba(0, 212, 170, 0.25);
}

@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, 0 6px 20px rgba(0, 212, 170, 0.15);
}

.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 {
  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, 0 6px 16px rgba(0, 212, 170, 0.18);
}

.imax-preset-tile-sm .imax-preset-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* 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: 0 0 20px rgba(0, 212, 170, 0.3), 0 0 6px rgba(0, 212, 170, 0.45);
}

/* "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;
}

/* 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:
    0 0 8px rgba(0, 212, 170, 0.8),
    0 0 16px rgba(0, 212, 170, 0.4);
  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: 0 0 14px rgba(0, 212, 170, 0.45);
}
.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;
}