/* Перенесено из снимка 20.06.2026: страница «Мои генерации» (hero vhub + hist-*). */

    /* hero — ЕДИНАЯ СИСТЕМА (эталон photo/music) */
    .page-header{display:block;text-align:left;padding:24px 0 6px}
    .vhub-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:clamp(11px,.9vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ember);margin-bottom:clamp(9px,1vw,16px)}
    .vhub-eyebrow::before{content:"";width:clamp(24px,2.4vw,42px);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-ember),transparent)}
    .vhub-title{font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:clamp(32px,5vw,64px);line-height:1.02;letter-spacing:-0.028em;margin:0;color:var(--text-primary)}
    .vhub-title em{font-style:normal;background:linear-gradient(120deg,var(--accent-ember-dark),var(--accent-ember),var(--accent-ember-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .vhub-subtitle{font-size:clamp(14px,1.4vw,19px);color:var(--text-muted);margin-top:clamp(10px,1.2vw,16px);line-height:1.5}
    

  .hist-retention{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;color:var(--text-muted,#8A7A6C);opacity:.9}
  .hist-retention svg{flex-shrink:0;opacity:.8}
  .hist-multi-badge{position:absolute;top:10px;right:10px;background:rgba(42,24,16,0.62);backdrop-filter:blur(6px);color:#FFE5C7;font-family:'Outfit',system-ui,sans-serif;font-weight:700;font-size:11px;padding:3px 9px;border-radius:9px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.25)}

  /* ===== Tabs ===== */
  .hist-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }
  .hist-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1px solid var(--border-light);
    border-radius: 40px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
  }
  .hist-filter:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    transform: translateY(-1px);
  }
  .hist-filter.active {
    background: linear-gradient(135deg, var(--accent-ember-light), var(--accent-ember-dark));
    color: #FFF7EE;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(199,102,25,0.30);
  }
  .hist-filter-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-ember);
    box-shadow: 0 0 0 0 rgba(199,102,25,0.55);
    flex-shrink: 0;
  }
  .hist-filter--live.has-active .hist-filter-dot {
    animation: histDotPulse 1.5s ease-in-out infinite;
  }
  .hist-filter.active .hist-filter-dot { background: #FFF7EE; }
  @keyframes histDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(199,102,25,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(199,102,25,0); }
    100% { box-shadow: 0 0 0 0 rgba(199,102,25,0); }
  }
  .hist-filter-count {
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--accent-ember);
    color: #FFF7EE;
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800; font-size: 11px; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .hist-filter.active .hist-filter-count { background: rgba(255,255,255,0.25); color: #FFF7EE; }

  /* ===== Чипы генераторов: ГОРИЗОНТАЛЬНАЯ ФИКС-СТРОКА с иконками  ===== */
  .hist-genchips {
    display:flex; flex-wrap:nowrap; gap:9px;
    overflow-x:auto; overflow-y:hidden;
    margin:12px 0 20px; padding:2px 2px 9px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  }
  .hist-genchips::-webkit-scrollbar { display:none; }
  .hist-genchip {
    flex:0 0 auto; scroll-snap-align:start;
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
    padding:6px 14px 6px 6px; border-radius:999px;
    border:1px solid var(--border-light); background:var(--bg-secondary);
    cursor:pointer; color:var(--text-primary); white-space:nowrap;
    transition: all var(--duration) var(--ease);
  }
  .hist-genchip--all { padding:6px 16px; }
  .hist-genchip:hover { border-color:var(--border-strong); transform:translateY(-1px); }
  .hist-genchip.active {
    background:linear-gradient(135deg, var(--accent-ember-light), var(--accent-ember-dark));
    color:#FFF7EE; border-color:transparent;
    box-shadow:0 4px 14px rgba(199,102,25,0.28);
  }
  .hist-genchip-ic {
    width:27px; height:27px; border-radius:50%; object-fit:cover; flex-shrink:0;
    background:rgba(199,102,25,0.10); box-shadow:0 1px 4px rgba(42,24,16,0.16);
  }
  .hist-genchip-ic--ph {
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Outfit',system-ui,sans-serif; font-weight:800; font-size:13px;
    color:var(--accent-ember); text-transform:uppercase;
  }
  .hist-genchip.active .hist-genchip-ic { background:rgba(255,255,255,0.22); box-shadow:none; }
  .hist-genchip.active .hist-genchip-ic--ph { color:#FFF7EE; }
  .hist-genchip-allic { flex-shrink:0; opacity:.85; }
  .hist-genchip-n {
    font-family:'Outfit',system-ui,sans-serif; font-variant-numeric:tabular-nums;
    font-size:11.5px; font-weight:800; opacity:.62;
    padding-left:1px;
  }
  .hist-genchip.active .hist-genchip-n { opacity:.9; }

  /* ===== Grid ===== */
  .hist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  @media (min-width: 600px) {
    .hist-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  }
  @media (min-width: 1500px) {
    .hist-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  }
  @media (min-width: 2000px) {
    .hist-grid { grid-template-columns: repeat(5, 1fr); }
  }

  .hist-skeleton-item {
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
  }

  .hist-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    cursor: default;
    box-shadow: 0 2px 12px -4px rgba(42,24,16,0.12), inset 0 1px 0 rgba(255,255,255,0.35);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
    animation: histItemIn .45s var(--ease) both;
  }
  @keyframes histItemIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
  .hist-item.clickable { cursor: pointer; }
  .hist-item.clickable:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px -12px rgba(199,102,25,0.30), 0 8px 20px -8px rgba(42,24,16,0.20);
    border-color: var(--border-strong);
  }
  .hist-item.clickable:hover .hist-item-play { transform: translate(-50%,-50%) scale(1.08); }
  .hist-item img,
  .hist-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s var(--ease);
  }
  /* премиум hover-зум превью (премиум-зум) — обрезается по радиусу карточки */
  .hist-item.clickable:hover img,
  .hist-item.clickable:hover video { transform: scale(1.07); }
  /* плавная подгрузка превью */
  .hist-thumb {
    opacity: 0;
    transition: opacity .4s var(--ease);
    background: var(--bg-tertiary);
  }
  .hist-thumb.loaded { opacity: 1; }

  .hist-item-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 14px 12px;
    background: linear-gradient(transparent, rgba(20,18,15,0.04) 26%, rgba(20,18,15,0.86));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
  }
  .hist-item-type {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: rgba(255,253,247,0.97);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hist-item-meta { display:flex; align-items:center; gap:7px; margin-top:3px; }
  .hist-item-date {
    font-size: 0.625rem;
    color: rgba(255,253,247,0.62);
  }
  .hist-item-cost {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.625rem; font-weight: 700;
    color: #FFD9A8;
    display: inline-flex; align-items: center; gap: 2px;
    font-variant-numeric: tabular-nums;
  }
  .hist-item-status {
    position: absolute;
    top: 9px; left: 9px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(6px);
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  }
  .hist-item-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.9; }
  .hist-item-status.done   { background: rgba(42,136,104,0.92); color: #fff; }
  .hist-item-status.failed { background: rgba(200,90,90,0.92); color: #fff; }
  .hist-item-status.pending{ background: rgba(199,102,25,0.92); color: #fff; }
  .hist-item-status.pending::before { animation: histDotPulse 1.5s ease-in-out infinite; }

  /* ===== Упавшая генерация: аккуратный вид «возврат» вместо пустых часов ===== */
  .hist-item.is-failed {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 9px; padding: 18px;
    background: linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
    cursor: default;
  }
  .hist-item.is-failed:hover { transform: none; }
  .hist-fail-ic {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(199,102,25,0.12); color: var(--accent-ember);
  }
  .hist-fail-t { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 13.5px; color: var(--text-secondary); }
  .hist-fail-s { font-size: 11px; color: var(--text-muted); line-height: 1.3; }

  /* превью пропало (файл удалён по сроку хранения) — аккуратная подложка вместо broken-иконки */
  .hist-item-gone { display: none; }
  .hist-item.is-gone { background: linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary)); }
  .hist-item.is-gone .hist-item-gone {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    color: var(--text-muted); text-align: center; padding: 14px;
  }
  .hist-item.is-gone .hist-item-gone svg { opacity: .5; }
  .hist-item.is-gone .hist-item-gone span { font-size: 11.5px; font-weight: 600; max-width: 80%; }

  .hist-item-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px;
    background: rgba(20,18,15,0.42);
    backdrop-filter: blur(4px);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    transition: transform var(--duration) var(--ease);
  }
  .hist-item-play svg { margin-left: 2px; }

  .hist-item-audio {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(199,102,25,0.12), rgba(63,102,107,0.08));
  }

  /* ===== In-progress card (pretty-progress, ember flow+shine+pulse) ===== */
  .hist-prog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 720px) {
    .hist-prog-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @keyframes histPrgFlow  { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
  @keyframes histPrgShine { 0%{transform:translateX(-130%)} 60%,100%{transform:translateX(240%)} }
  @keyframes histPrgPulse { 0%,100%{box-shadow:0 8px 30px rgba(199,102,25,0.10)} 50%{box-shadow:0 10px 38px rgba(199,102,25,0.22)} }
  .hist-prog-card {
    position: relative;
    background: linear-gradient(160deg, var(--bg-tertiary), var(--bg-secondary));
    border: 1px solid var(--border-light);
    border-radius: 22px;
    padding: 22px 22px 20px;
    box-shadow: 0 10px 30px rgba(199,102,25,0.12);
    animation: histPrgPulse 2.4s ease-in-out infinite, histItemIn .45s var(--ease) both;
    overflow: hidden;
  }
  .hist-prog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .hist-prog-gen {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 800; font-size: 15px;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 9px;
  }
  .hist-prog-genicon {
    width: 30px; height: 30px; flex-shrink:0;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(199,102,25,0.18), rgba(199,102,25,0.08));
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-ember);
  }
  .hist-prog-percent {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 900; font-size: 44px; line-height: 1;
    background: linear-gradient(120deg, var(--accent-ember-light), var(--accent-ember), var(--accent-ember-dark));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(199,102,25,0.30));
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .hist-prog-track {
    height: 16px; border-radius: 9px;
    background: rgba(199,102,25,0.12);
    box-shadow: inset 0 1px 4px rgba(42,24,16,0.22);
    position: relative; overflow: hidden; margin-bottom: 14px;
    animation: histPrgGlow 2.1s ease-in-out infinite;
  }
  @keyframes histPrgGlow {
    0%,100% { box-shadow: inset 0 1px 4px rgba(42,24,16,0.22); }
    50%     { box-shadow: inset 0 1px 4px rgba(42,24,16,0.22), 0 0 18px rgba(199,102,25,0.34); }
  }
  .hist-prog-fill {
    height: 100%; border-radius: 9px;
    background: linear-gradient(90deg, var(--accent-ember-light), var(--accent-ember), var(--accent-ember-dark), var(--accent-ember));
    background-size: 200% 100%;
    animation: histPrgFlow 2.2s linear infinite;
    box-shadow: 0 0 18px rgba(199,102,25,0.55);
    position: relative; overflow: hidden;
    transition: width .5s var(--ease);
    min-width: 6%;
  }
  /* бегущие диагональные полосы — «идёт работа», мощно */
  .hist-prog-fill::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 8px, transparent 8px 16px);
    background-size: 22px 22px;
    animation: histPrgStripes .55s linear infinite;
  }
  @keyframes histPrgStripes { to { background-position: 22px 0; } }
  .hist-prog-fill::after {
    content: ''; position: absolute; top:0; left:0; bottom:0; width: 55%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-130%);
    animation: histPrgShine 1.6s ease-in-out infinite;
  }
  .hist-prog-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .hist-prog-status { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
  .hist-prog-timer {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 700; font-size: 12.5px; color: var(--accent-ember);
    padding: 5px 13px; border-radius: 20px;
    background: rgba(199,102,25,0.10);
    border: 1px solid var(--border-light);
    font-variant-numeric: tabular-nums;
  }
  .hist-prog-prompt {
    margin-top: 12px; font-size: 12.5px; line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    max-height: 7.5em;
  }

  .hist-load-more { text-align: center; margin-top: 24px; }

  .hist-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 56px 24px; text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
  }
  .hist-empty-icon { width: 56px; height: 56px; margin-bottom: 16px; color: var(--text-muted); opacity: 0.45; }
  .hist-empty-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.0625rem; color: var(--text-secondary); margin-bottom: 6px; }
  .hist-empty-text { font-size: 0.875rem; color: var(--text-muted); max-width: 280px; }

  /* ===== Lightbox ===== */
  .hist-lightbox {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    animation: histLbIn .2s var(--ease);
  }
  @keyframes histLbIn { from { opacity: 0; } to { opacity: 1; } }
  .hist-lightbox-backdrop {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(20,18,15,0.88);
    backdrop-filter: blur(8px);
  }
  .hist-lightbox-content {
    position: relative; z-index: 1;
    max-width: 92vw; max-height: 86vh;
    border-radius: var(--radius-lg);
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    animation: histLbPop .26s var(--ease);
  }
  @keyframes histLbPop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
  /* стемы (до 12 дорожек) — отступы внутри прокручиваемого бокса */
  .hist-lightbox-content:has(.vplayer) { padding: 16px 4px; }
  .hist-lightbox-content img,
  .hist-lightbox-content video {
    display: block;
    max-width: 92vw; max-height: 86vh;
    object-fit: contain;
  }
  .hist-lightbox-content audio { width: 340px; max-width: 90vw; margin: 32px; }
  .hist-lightbox-close {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%;
    border: none;
    background: rgba(20,18,15,0.55);
    color: rgba(255,253,247,0.92);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
  }
  .hist-lightbox-close:hover { background: rgba(20,18,15,0.8); transform: rotate(90deg); }

  .hist-lb-card {
    border-radius: 18px; overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    box-shadow: 0 18px 50px rgba(0,0,0,0.4);
  }
  .hist-lb-dl {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 14px;
    border: none;
    background: linear-gradient(135deg, var(--accent-ember-light), var(--accent-ember));
    color: #FFF7EE;
    font-family: inherit; font-weight: 700; font-size: 14.5px;
    cursor: pointer;
    transition: filter var(--duration) var(--ease);
  }
  .hist-lb-dl:hover { filter: brightness(1.06); }
  .hist-lb-dl:disabled { opacity: .7; cursor: progress; }
.hist-prog-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.hist-prog-meta span{font-size:11.5px;font-weight:700;color:var(--accent-ember);background:rgba(199,102,25,0.10);border:1px solid var(--border-light);padding:3px 9px;border-radius:8px;font-variant-numeric:tabular-nums}
/* Панель деталей в лайтбоксе — генератор + выбранные параметры + полный промпт */
.hist-lb-info{width:min(92vw,560px);margin:8px auto 0;padding:16px 18px;border-radius:16px;background:var(--bg-secondary);border:1px solid var(--border-light);text-align:left;box-shadow:0 10px 30px rgba(42,24,16,0.18)}
.hist-lb-info-gen{font-family:'Outfit',system-ui,sans-serif;font-weight:800;font-size:15.5px;color:var(--text-primary);margin-bottom:11px;display:flex;align-items:center;gap:8px}
.hist-lb-info-gen .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-ember);box-shadow:0 0 10px var(--accent-ember)}
.hist-lb-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.hist-lb-chip{font-size:12px;font-weight:700;color:var(--accent-ember);background:rgba(199,102,25,0.10);border:1px solid var(--border-light);padding:5px 11px;border-radius:9px;font-variant-numeric:tabular-nums}
.hist-lb-chip.muted{color:var(--text-muted);background:rgba(127,130,127,0.10)}
.hist-lb-prompt-lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.hist-lb-prompt{font-size:13.5px;line-height:1.55;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;max-height:30vh;overflow-y:auto}
.hist-lb-copy{margin-top:11px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--accent-ember);background:none;border:1px solid var(--border-light);border-radius:9px;padding:7px 13px;cursor:pointer;transition:background-color .2s}
.hist-lb-copy:hover{background:rgba(199,102,25,0.08)}