/* ============================================================
   NOVA — базовая дизайн-система Эдуарда
   Editorial-fintech SaaS: фарфоровый светлый фон, чернильные
   pill-кнопки, электрик-синий как цвет данных, серифный курсив
   внутри заголовков, серебряный градиент, aurora-блюр.
   Референс: Maven Finance Management (Orbix Studio, Behance).
   Подключение:  <link rel="stylesheet" href="nova.css">
   Область:      продуктовые дашборды, кейс-презентации, SaaS-лендинги.
   Класс-префикс: .nv-*   ·   токены: --nv-*
   ============================================================ */

/* — Заготовки веб-шрифтов (в артефактах CDN блокирует CSP; клади .woff2
   локально и раскомментируй; иначе работает системный fallback) —
@font-face{font-family:"Inter";src:url("inter.woff2") format("woff2");font-weight:400 900;font-display:swap;}
*/

:root{
  /* — Поверхности (фарфоровый светлый, committed light) — */
  --nv-bg:#F2F2F0;            /* фон страницы — фарфоровая бумага */
  --nv-bg-deep:#E9E9E6;       /* глубже: секции, вдавленные зоны */
  --nv-surface:#FFFFFF;       /* карточка / поле */
  --nv-surface-2:rgba(255,255,255,.86);  /* приподнятая floating-поверхность */
  --nv-surface-ink:#101113;   /* чернильная акцент-поверхность (dark card / primary btn) */
  --nv-field:#FFFFFF;

  /* — Текст — */
  --nv-text:#0E0F11;
  --nv-text-muted:#4E525B;
  --nv-text-dim:#8B8F97;
  --nv-on-ink:#FFFFFF;        /* текст на чернильной поверхности */

  /* — Границы — */
  --nv-border:rgba(14,15,17,.09);
  --nv-border-strong:rgba(14,15,17,.18);

  /* — Акцент: электрик-синий (цвет данных и активных состояний) — */
  --nv-accent:#2E5BFF;
  --nv-accent-hover:#1E43E0;
  --nv-accent-soft:rgba(46,91,255,.10);    /* мягкая заливка: active-nav, hover */
  --nv-accent-glow:rgba(46,91,255,.22);    /* свечение под данными (bar glow) */
  --nv-on-accent:#FFFFFF;

  /* — Семантика (мягкие статус-пилюли: Completed / Pending / Canceled) — */
  --nv-success:#17A05C;
  --nv-warning:#E8720C;
  --nv-danger:#E43A5D;

  /* — Серебряный градиент заголовков (фирменный приём) — */
  --nv-grad-a:#0E0F11;        /* верх: плотные чернила */
  --nv-grad-b:#9A9CA1;        /* низ: растворение в серебро */

  /* — Тени: невесомые, рассеянные, «floating» — */
  --nv-shadow-card:0 1px 2px rgba(14,15,17,.05),0 16px 40px rgba(14,15,17,.08);
  --nv-shadow-hover:0 2px 4px rgba(14,15,17,.06),0 28px 64px rgba(14,15,17,.13);
  --nv-ring:0 0 0 3px var(--nv-accent-soft);

  /* — Радиусы: щедрые, кнопки — полные пилюли — */
  --nv-r-sm:12px;
  --nv-r:16px;
  --nv-r-lg:24px;
  --nv-r-pill:999px;

  /* — Тайминги / плавность (чёткий продуктовый SaaS) — */
  --nv-ease:cubic-bezier(.22,1,.36,1);
  --nv-dur-1:150ms;   /* микро: цвет, рамка */
  --nv-dur-2:240ms;   /* стандарт: hover, lift */
  --nv-dur-3:420ms;   /* крупное: reveal */

  /* — Типографика: гротеск + серифный курсив-акцент — */
  --nv-font:"Inter","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --nv-font-serif:"Playfair Display",Didot,"Bodoni MT",Georgia,"Times New Roman",serif;
  --nv-font-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --nv-h1:clamp(38px,5.6vw,72px);
  --nv-h2:clamp(26px,3.4vw,40px);
  --nv-lede:clamp(16px,1.7vw,20px);
}

/* ---------- База ---------- */
.nv-root,.nv-body{
  background:var(--nv-bg);
  color:var(--nv-text);
  font-family:var(--nv-font);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
.nv-h1{font-size:var(--nv-h1);line-height:1.02;letter-spacing:-.035em;font-weight:800;text-wrap:balance;margin:0;}
.nv-h2{font-size:var(--nv-h2);line-height:1.1;letter-spacing:-.025em;font-weight:800;text-wrap:balance;margin:0;}
/* фирменный приём: <em> внутри заголовка = серифный курсив (editorial-вставка) */
.nv-h1 em,.nv-h2 em{
  font-family:var(--nv-font-serif);font-style:italic;font-weight:500;
  letter-spacing:-.01em;
}
.nv-lede{font-size:var(--nv-lede);color:var(--nv-text-muted);line-height:1.6;margin:0;}
/* фирменный приём: серебряный градиент — чернила растворяются вниз */
.nv-gradient-text{
  background:linear-gradient(178deg,var(--nv-grad-a) 20%,var(--nv-grad-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Кнопки (пилюли; primary — чернильная заливка) ---------- */
.nv-btn{
  --_lift:0px;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:14px;font-weight:700;line-height:1;letter-spacing:.01em;
  padding:13px 24px;border:1px solid transparent;border-radius:var(--nv-r-pill);
  cursor:pointer;user-select:none;text-decoration:none;white-space:nowrap;
  transform:translateY(var(--_lift));
  transition:transform var(--nv-dur-2) var(--nv-ease),
             box-shadow var(--nv-dur-2) var(--nv-ease),
             background var(--nv-dur-1) var(--nv-ease),
             border-color var(--nv-dur-1) var(--nv-ease),
             color var(--nv-dur-1) var(--nv-ease);
}
.nv-btn:focus-visible{outline:none;box-shadow:var(--nv-ring);}
.nv-btn:active{--_lift:0px;transform:translateY(0) scale(.98);transition-duration:var(--nv-dur-1);}

/* — primary: чернильная пилюля (как Send / Set up now в референсе) — */
.nv-btn--primary{color:var(--nv-on-ink);background:var(--nv-surface-ink);}
.nv-btn--primary:hover{--_lift:-2px;box-shadow:0 16px 36px rgba(14,15,17,.24);}

/* — secondary: белая floating-пилюля с рамкой — */
.nv-btn--secondary{color:var(--nv-text);background:var(--nv-surface);border-color:var(--nv-border-strong);
  box-shadow:0 1px 2px rgba(14,15,17,.05);}
.nv-btn--secondary:hover{--_lift:-2px;border-color:var(--nv-accent);color:var(--nv-accent);
  box-shadow:0 14px 30px rgba(46,91,255,.14);}

/* — ghost: минимальная — */
.nv-btn--ghost{color:var(--nv-text-muted);background:transparent;}
.nv-btn--ghost:hover{color:var(--nv-text);background:var(--nv-bg-deep);}

/* — accent: электрик-синяя (активное действие данных) — */
.nv-btn--accent{color:var(--nv-on-accent);background:var(--nv-accent);}
.nv-btn--accent:hover{--_lift:-2px;background:var(--nv-accent-hover);
  box-shadow:0 16px 36px rgba(46,91,255,.30);}

.nv-btn--sm{padding:10px 17px;font-size:13px;}
.nv-btn--lg{padding:16px 30px;font-size:15px;}

/* ---------- Карточки (белые floating, крупный радиус, невесомая тень) ---------- */
.nv-card{
  position:relative;background:var(--nv-surface-2);
  border:1px solid var(--nv-border);border-radius:var(--nv-r-lg);
  padding:26px 26px;box-shadow:var(--nv-shadow-card);backdrop-filter:blur(6px);
  transition:transform var(--nv-dur-2) var(--nv-ease),
             border-color var(--nv-dur-2) var(--nv-ease),
             box-shadow var(--nv-dur-2) var(--nv-ease);
}
.nv-card--hover:hover{
  transform:translateY(-3px);border-color:var(--nv-border-strong);
  box-shadow:var(--nv-shadow-hover);
}
/* — чернильная акцент-карточка (кейс-хиро на чёрном) — */
.nv-card--ink{
  background:var(--nv-surface-ink);border-color:rgba(255,255,255,.10);
  color:var(--nv-on-ink);box-shadow:0 24px 56px rgba(0,0,0,.30);
}
.nv-card--ink .nv-h1,.nv-card--ink .nv-h2{color:var(--nv-on-ink);}
.nv-card--ink .nv-lede{color:rgba(255,255,255,.72);}
.nv-card--ink .nv-gradient-text{
  background:linear-gradient(178deg,#F4F4F2 20%,#6F7075);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Поля ввода ---------- */
.nv-input{
  width:100%;font:inherit;font-size:14px;color:var(--nv-text);
  background:var(--nv-field);border:1px solid var(--nv-border-strong);
  border-radius:var(--nv-r);padding:13px 16px;
  transition:border-color var(--nv-dur-1) var(--nv-ease),box-shadow var(--nv-dur-2) var(--nv-ease);
}
.nv-input::placeholder{color:var(--nv-text-dim);}
.nv-input:focus{outline:none;border-color:var(--nv-accent);box-shadow:0 0 0 3px var(--nv-accent-soft);}

/* ---------- Бейдж / pill (белая floating-пилюля, как чипы кейса) ---------- */
.nv-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--nv-text);
  letter-spacing:.01em;
  border:1px solid var(--nv-border);border-radius:var(--nv-r-pill);
  padding:7px 14px;background:var(--nv-surface);
  box-shadow:0 1px 2px rgba(14,15,17,.05),0 8px 20px rgba(14,15,17,.07);
}
.nv-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--nv-accent);
  box-shadow:0 0 10px var(--nv-accent-glow);}  /* синяя точка-акцент */
/* — статус-пилюли (Completed / Pending / Canceled из референса) — */
.nv-pill--success{color:var(--nv-success);background:rgba(23,160,92,.10);border-color:transparent;box-shadow:none;}
.nv-pill--warning{color:var(--nv-warning);background:rgba(232,114,12,.10);border-color:transparent;box-shadow:none;}
.nv-pill--danger{color:var(--nv-danger);background:rgba(228,58,93,.10);border-color:transparent;box-shadow:none;}

/* ---------- Фон-эффект базы: aurora-блюр (голографический градиент) ---------- */
.nv-aurora{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0;
  background:radial-gradient(circle at 30% 35%,var(--nv-accent-glow),transparent 62%),
             radial-gradient(circle at 70% 65%,rgba(79,224,198,.18),transparent 64%);}
.nv-aurora--blue{background:radial-gradient(circle at 35% 40%,rgba(46,91,255,.30),transparent 62%),
                            radial-gradient(circle at 70% 60%,rgba(79,224,198,.20),transparent 64%);}
.nv-aurora--sunset{background:radial-gradient(circle at 35% 40%,rgba(249,115,22,.26),transparent 62%),
                              radial-gradient(circle at 70% 60%,rgba(228,58,93,.20),transparent 64%);}
/* — вертикальная линейная штриховка (текстура-разделитель из кейса) — */
.nv-hatch{background-image:repeating-linear-gradient(90deg,
    var(--nv-border) 0 1px,transparent 1px 7px);}

/* ---------- Reveal при скролле (пара к JS ниже) ---------- */
.nv-reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--nv-dur-3) var(--nv-ease),transform var(--nv-dur-3) var(--nv-ease);}
.nv-reveal.is-in{opacity:1;transform:none;}
/* — вариант: заголовок проявляется из дымки (кейс-хиро референса) — */
.nv-reveal--blur{filter:blur(12px);transform:translateY(10px);
  transition:opacity var(--nv-dur-3) var(--nv-ease),transform var(--nv-dur-3) var(--nv-ease),
             filter 640ms var(--nv-ease);}
.nv-reveal--blur.is-in{filter:blur(0);}

/* ---------- Моушн-пак (фирменное движение базы) ---------- */
/* — aurora медленно дрейфует и дышит — */
@keyframes nv-drift{
  from{transform:translate3d(-4%,2%,0) scale(1);}
  to{transform:translate3d(5%,-4%,0) scale(1.14);}
}
.nv-aurora{animation:nv-drift 16s ease-in-out infinite alternate;}

/* — pop: упругое появление мелочи (пузыри, пилюли, точки) — */
.nv-pop{opacity:0;transform:translateY(8px) scale(.85);
  transition:opacity var(--nv-dur-2) var(--nv-ease),
             transform 480ms cubic-bezier(.34,1.56,.64,1);}  /* лёгкий отскок */
.nv-pop.is-in{opacity:1;transform:none;}

/* — callout: пузырь-подпись данных с хвостиком (как «72%» на графиках кейса) — */
.nv-callout{position:relative;display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;color:var(--nv-text);
  background:var(--nv-surface);border-radius:10px;padding:5px 11px;
  box-shadow:0 1px 2px rgba(14,15,17,.08),0 8px 20px rgba(14,15,17,.10);}
.nv-callout::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);background:inherit;border-radius:2px;}

/* — бар данных: растёт до --nv-bar при появлении, светится акцентом — */
.nv-bar{height:10px;border-radius:var(--nv-r-pill);background:var(--nv-bg-deep);overflow:hidden;}
.nv-bar__fill{display:block;height:100%;border-radius:inherit;width:0;
  background:var(--nv-accent);box-shadow:0 0 18px var(--nv-accent-glow);
  transition:width 900ms var(--nv-ease);}
.is-in .nv-bar__fill,.nv-bar.is-in .nv-bar__fill{width:var(--nv-bar,60%);}
.nv-bar__fill--danger{background:var(--nv-danger);box-shadow:0 0 18px rgba(228,58,93,.25);}
.nv-bar__fill--success{background:var(--nv-success);box-shadow:0 0 18px rgba(23,160,92,.25);}

/* ============================================================
   ТЁМНАЯ ТЕМА — опт-ин: <html data-theme="dark">.
   Светлая (фарфор) остаётся дефолтом. Тёмная = «кейс-режим»
   референса: почти чёрный, серебряный градиент заголовков,
   кнопки инвертируются в белые пилюли, синий ярче.
   ============================================================ */
[data-theme="dark"]{
  --nv-bg:#0A0A0B;            /* почти чёрный кейс-фон */
  --nv-bg-deep:#060607;
  --nv-surface:#141416;
  --nv-surface-2:rgba(20,20,22,.86);
  --nv-surface-ink:#F3F3F1;   /* инверсия: primary-кнопка становится белой пилюлей */
  --nv-field:#141416;

  --nv-text:#F3F3F1;
  --nv-text-muted:#B9BBC0;
  --nv-text-dim:#7C7F86;
  --nv-on-ink:#101113;

  --nv-border:rgba(243,243,241,.10);
  --nv-border-strong:rgba(243,243,241,.20);

  --nv-accent:#4D74FF;               /* синий ярче для контраста на чёрном */
  --nv-accent-hover:#6C8CFF;
  --nv-accent-soft:rgba(77,116,255,.14);
  --nv-accent-glow:rgba(77,116,255,.30);
  --nv-on-accent:#FFFFFF;

  --nv-success:#3DBE86;
  --nv-warning:#F08A38;
  --nv-danger:#F0688A;

  /* серебряный градиент: белый растворяется в дым */
  --nv-grad-a:#F4F4F2;
  --nv-grad-b:#6F7075;

  --nv-shadow-card:0 1px 2px rgba(0,0,0,.35),0 18px 44px rgba(0,0,0,.45);
  --nv-shadow-hover:0 2px 4px rgba(0,0,0,.40),0 30px 70px rgba(0,0,0,.60);
  --nv-ring:0 0 0 3px var(--nv-accent-soft);
}
[data-theme="dark"] .nv-btn--primary:hover{box-shadow:0 16px 36px rgba(243,243,241,.14);}
[data-theme="dark"] .nv-card--ink{background:#141416;color:#F3F3F1;}
[data-theme="dark"] .nv-card--ink .nv-h1,[data-theme="dark"] .nv-card--ink .nv-h2{color:#F3F3F1;}

/* ============================================================
   КОМПОЗИЦИЯ Nova — плотный дашборд
   Приём донора: Spotify (строгая система формы, кегль ≤24px, панели на
   @container) + числа плотности из design-system/reference/ui-density.md.
   ============================================================ */

/* Три режима плотности одним классом на контейнере */
/* Высоту строки задаёт --nv-row, поэтому вертикального паддинга нет: иначе он
   складывается с высотой и «компакт 32px» превращается в 44px. */
.nv-dense{--nv-row:32px;--nv-pad:0 10px;--nv-fs:12.5px;--nv-av:20px;}
.nv-cozy {--nv-row:44px;--nv-pad:0 14px;--nv-fs:13.5px;--nv-av:26px;}
.nv-comfy{--nv-row:56px;--nv-pad:0 18px;--nv-fs:14.5px;--nv-av:32px;}
/* На пальцах компакт запрещён: тач-таргет не опускается ниже 44px */
@media (pointer:coarse){.nv-dense{--nv-row:44px;--nv-pad:0 14px;--nv-av:26px;}}

.nv-dash{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));
}

/* Панель перестраивается по своей ширине, а не по ширине окна */
.nv-panel{
  container-type:inline-size;
  background:var(--nv-surface);border:1px solid var(--nv-border);
  border-radius:var(--nv-r);padding:14px;
}
.nv-panel__head{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--nv-text-dim);
}
.nv-panel__row{display:grid;gap:8px;}
@container (min-width:420px){.nv-panel__row{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;}}

/* Таблица — основной носитель данных, а не украшение */
.nv-table{width:100%;border-collapse:collapse;font-size:var(--nv-fs,13.5px);}
.nv-table th,.nv-table td{
  height:var(--nv-row,44px);padding:var(--nv-pad,0 14px);
  text-align:left;border-bottom:1px solid var(--nv-border);white-space:nowrap;
  vertical-align:middle;
}
.nv-table thead th{
  position:sticky;top:0;z-index:1;background:var(--nv-surface);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nv-text-dim);
}
.nv-table tbody tr{transition:background var(--nv-dur-1) var(--nv-ease);}
.nv-table tbody tr:hover{background:var(--nv-accent-soft);}
.nv-table tbody tr:last-child td{border-bottom:0;}
/* Специфичность важнее краткости: .nv-table th|td задаёт text-align:left и без
   уточнения перебивает .nv-num — цифры остались бы у левого края. */
.nv-table th.nv-num,.nv-table td.nv-num{text-align:right;font-variant-numeric:tabular-nums;}

/* Строгая система формы: прямоугольник — карточка, пилюля — статус, круг — аватар.
   Промежуточных радиусов в плотном интерфейсе не бывает. */
.nv-chip{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;
  border-radius:var(--nv-r-pill);font-size:11.5px;font-weight:600;
  background:var(--nv-accent-soft);color:var(--nv-accent);
}
.nv-avatar{
  display:inline-block;vertical-align:middle;object-fit:cover;
  width:var(--nv-av,26px);height:var(--nv-av,26px);border-radius:50%;
  border:1px solid var(--nv-border);background:var(--nv-accent-soft);
}

/* ---------- Доступность: уважение к prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .nv-btn,.nv-card,.nv-input,.nv-reveal,.nv-pop,.nv-bar__fill{transition-duration:1ms;}
  .nv-btn:hover,.nv-card--hover:hover{--_lift:0px;transform:none;}
  .nv-reveal,.nv-pop{opacity:1;transform:none;}
  .nv-reveal--blur{filter:none;}
  .nv-aurora{animation:none;}
  .nv-bar__fill{width:var(--nv-bar,60%);}
  .nv-table tbody tr{transition-duration:1ms;}
}

/* ---------- Доступность: уважение к prefers-reduced-transparency ---------- */
@media (prefers-reduced-transparency:reduce){
  .nv-card{backdrop-filter:none;background:var(--nv-surface);}
  .nv-aurora{display:none;}
}

/* ============================================================
   JS-компаньон (скопировать в проект):

   // reveal / pop / рост баров — один observer на всё
   const io=new IntersectionObserver((es)=>es.forEach(e=>{
     if(e.isIntersecting){e.target.classList.add('is-in');io.unobserve(e.target);}
   }),{threshold:.15});
   document.querySelectorAll('.nv-reveal,.nv-pop,.nv-bar').forEach((el,i)=>{
     el.style.transitionDelay=(i%6*70)+'ms';  // мягкий стаггер
     io.observe(el);
   });

   // count-up чисел: <span class="nv-count" data-to="40829" data-dec="0">0</span>
   const ease=t=>1-Math.pow(1-t,3);
   document.querySelectorAll('.nv-count').forEach(el=>{
     const to=parseFloat(el.dataset.to||'0'),dec=+(el.dataset.dec||0),t0=performance.now();
     if(matchMedia('(prefers-reduced-motion:reduce)').matches){
       el.textContent=to.toLocaleString('ru-RU',{minimumFractionDigits:dec,maximumFractionDigits:dec});return;
     }
     (function f(t){const k=Math.min(1,(t-t0)/1100);
       el.textContent=(to*ease(k)).toLocaleString('ru-RU',{minimumFractionDigits:dec,maximumFractionDigits:dec});
       if(k<1)requestAnimationFrame(f);})(t0);
   });
   ============================================================ */