/* theme.css v2 — Сбер-премиум. Фоны — СГЕНЕРИРОВАННЫЕ изображения (Magnific, эстетика неон-дерева) по (тема×сцена).
   Верстка — как в рефах Сбера: бенто-карточки (вкл. градиентные, как GigaCode) + статус-колонки (номера, галочки, Q-пиллы). */

.deck { font-family: var(--sans); }
:root { --sans: "SB Sans Text", -apple-system, "Segoe UI", sans-serif; --display: "SB Sans Display", "SB Sans Text", sans-serif; }

.deck[data-theme="light"] {
  --ink: #101422; --mut: #4c5877; --dim: #8a93aa; --hair: rgba(16,24,54,.10);
  --c1: #21a038; --c2: #0831eb; --c3: #00c1a7;
  --panel: rgba(255,255,255,.82); --panel-2: rgba(255,255,255,.94); --panel-line: rgba(16,30,80,.10);
  --card-sh: 0 10px 34px rgba(20,44,100,.12), 0 2px 6px rgba(20,44,100,.06);
  --fill: linear-gradient(140deg, #0a63e6 0%, #0aa0c4 52%, #17b46a 100%); --fill-ink: #ffffff;
  --chip: #eaf0ff; --chip-ink: #0831eb; --ok: #1b9c34; --pill: #e7efff; --pill-ink: #0831eb;
  --scrim-hero: linear-gradient(90deg, rgba(244,247,253,.72) 0%, rgba(244,247,253,.34) 46%, rgba(244,247,253,0) 100%);
  --scrim-content: linear-gradient(180deg, rgba(247,249,253,.40), rgba(244,247,253,.58));
}
.deck[data-theme="dark"] {
  --ink: #f2f5fc; --mut: #a7b4d0; --dim: #6f7ea0; --hair: rgba(255,255,255,.10);
  --c1: #2fe6c0; --c2: #5b8cff; --c3: #a97bff;
  --panel: rgba(17,24,42,.62); --panel-2: rgba(22,30,52,.78); --panel-line: rgba(255,255,255,.11);
  --card-sh: 0 14px 44px rgba(0,0,0,.5);
  --fill: linear-gradient(140deg, #12b98f 0%, #12a0c9 50%, #3d6bff 100%); --fill-ink: #f4fffb;
  --chip: rgba(91,140,255,.18); --chip-ink: #b9ccff; --ok: #2fe6c0; --pill: rgba(47,230,192,.16); --pill-ink: #7ff0dc;
  --scrim-hero: linear-gradient(90deg, rgba(6,8,14,.60) 0%, rgba(6,8,14,.28) 48%, rgba(6,8,14,0) 100%);
  --scrim-content: linear-gradient(180deg, rgba(6,9,17,.30), rgba(5,7,13,.5));
}

/* ── ФОН-СЦЕНЫ (генерированные изображения) ─────────────────────────────────────── */
.slide { z-index: 1; background-size: cover; background-position: center; padding: 84px 96px; }
.slide::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.deck[data-theme="dark"] .slide[data-scene="hero"], .deck[data-theme="dark"] .slide[data-scene="section"] { background-image: url(bg/d-hero.jpg); }
.deck[data-theme="dark"] .slide[data-scene="content"] { background-image: url(bg/d-content.jpg); }
.deck[data-theme="light"] .slide[data-scene="hero"], .deck[data-theme="light"] .slide[data-scene="section"] { background-image: url(bg/l-hero.jpg); }
.deck[data-theme="light"] .slide[data-scene="content"] { background-image: url(bg/l-content.jpg); }
.slide[data-scene="hero"]::before, .slide[data-scene="section"]::before { background: var(--scrim-hero); }
.slide[data-scene="content"]::before { background: var(--scrim-content); }
.deck::before { display: none; }
canvas.neon { display: none; }

/* типографика */
.slide h1 { font-family: var(--display); font-weight: 700; font-size: 82px; line-height: .98; letter-spacing: -.035em; color: var(--ink); margin: 0 0 20px; }
.slide h2 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.05; letter-spacing: -.025em; color: var(--ink); margin: 0 0 12px; }
.slide h3 { font-weight: 600; font-size: 23px; line-height: 1.18; color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em; }
.slide p { font-size: 21px; line-height: 1.46; color: var(--mut); margin: 0 0 10px; max-width: 52ch; }
.slide .lead { font-size: 25px; color: var(--ink); font-weight: 500; }
.kicker { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--c2); margin: 0 0 20px; display: inline-flex; align-items: center; gap: 10px; }
.deck[data-theme="dark"] .kicker { color: var(--c1); }
.kicker::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.big { font-family: var(--display); font-weight: 700; font-size: 150px; line-height: .9; letter-spacing: -.045em; color: var(--ink); }
.big .u { color: var(--c2); } .deck[data-theme="dark"] .big .u { color: var(--c1); }
.accent { color: var(--c2); } .deck[data-theme="dark"] .accent { color: var(--c1); } .muted { color: var(--mut); }
.brandmark { position: absolute; top: 40px; right: 48px; z-index: 5; display: inline-flex; align-items: center; gap: 9px; color: var(--mut); font-size: 13px; font-weight: 600; }
.brandmark i { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 210deg, #21a038, #00c1a7, #0831eb, #21a038); }

/* ── БЕНТО (как GigaCode): сетка карточек, часть с градиент-заливкой ──────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(94px, auto); gap: 16px; }
.bcard { position: relative; border-radius: 20px; padding: 22px 24px; background: var(--panel-2); border: 1px solid var(--panel-line); box-shadow: var(--card-sh); overflow: hidden; }
.deck[data-theme="dark"] .bcard { backdrop-filter: blur(10px); }
.bcard.fill { background: var(--fill); border: 0; color: var(--fill-ink); }
.bcard.fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%); pointer-events: none; }
.bcard.fill h3, .bcard.fill .stat, .bcard.fill p { color: var(--fill-ink); }
.bcard.fill p { opacity: .92; }
.bcard .stat { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.bcard .stat small { display: block; font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: 0; color: inherit; opacity: .72; margin-top: 6px; }
.bcard p { font-size: 16px; margin: 4px 0 0; }
.bcard h3 { font-size: 21px; }
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}
.r2{grid-row:span 2}

/* ── СТАТУС-КОЛОНКИ (как медицинский реф): номера, галочки, Q-пиллы ───────────────── */
.cols { display: grid; gap: 22px; }
.scol > .col-h { font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em; }
.sitem { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--panel-line); margin-bottom: 10px; }
.deck[data-theme="dark"] .sitem { backdrop-filter: blur(8px); }
.sitem .n { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--c2); }
.deck[data-theme="dark"] .sitem .n { color: var(--c1); }
.sitem .t { font-size: 16px; color: var(--ink); line-height: 1.32; font-weight: 500; }
.sitem .t small { display: block; font-weight: 400; color: var(--mut); font-size: 13.5px; margin-top: 2px; }
.check { color: var(--ok); font-weight: 700; font-size: 18px; line-height: 1.2; }
.spin { width: 15px; height: 15px; border: 2px solid var(--hair); border-top-color: var(--c2); border-radius: 50%; margin-top: 2px; }
.deck[data-theme="dark"] .spin { border-top-color: var(--c1); }
.qpill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--pill); color: var(--pill-ink); font-family: var(--display); font-weight: 700; font-size: 12px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--chip); color: var(--chip-ink); font-size: 14px; font-weight: 600; }

/* центральный узел «профиль» */
.hub { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 176px; height: 176px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,230,192,.22), transparent 70%); text-align: center; }
.deck[data-theme="light"] .hub { background: radial-gradient(circle, rgba(8,49,235,.14), transparent 70%); }
.hub .h-t { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--ink); }
.hub .h-s { font-size: 13px; color: var(--mut); }

.grid { display: grid; gap: 18px; } .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3,1fr); } .g4 { grid-template-columns: repeat(4,1fr); }
.row { display: flex; gap: 18px; } .col { display: flex; flex-direction: column; gap: 14px; }
.deck-prog span { background: var(--c2); } .deck[data-theme="dark"] .deck-prog span { background: var(--c1); } .deck-count { color: var(--mut); }

@media print { .slide::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }