/* =====================================================================
   Puls · режимы оформления («Настройки → Внешний вид»)
   html[data-ui] ставит /js/ui-boot.js до отрисовки страницы.
     classic — «Пульс», текущее оформление (этот файл его не трогает)
     flow    — «Поток»: меню слева, спокойнее, примерно вдвое меньше анимаций
     mini    — «Минимал»: монохром, без свечения и теней, только суть
     lite    — «Лёгкий»: для слабых ПК и телефонов, без анимаций и тяжёлых эффектов
   ===================================================================== */

/* значки у пунктов меню показываются только в «Потоке» */
.nav-row .ni{display:none}
.nav-row .ni svg{width:18px;height:18px}

/* бесконечные «рабочие» анимации (загрузка, печатает…, запись) — живут во всех режимах */
html[data-ui=flow] .att-spin,html[data-ui=flow] .fstate.wait,html[data-ui=flow] .sv-load,
html[data-ui=lite] .att-spin,html[data-ui=lite] .fstate.wait,html[data-ui=lite] .sv-load,
html[data-ui=mini] .att-spin,html[data-ui=mini] .fstate.wait,html[data-ui=mini] .sv-load{animation:spin .8s linear infinite!important}
html[data-ui=flow] .af-ico.spin svg,html[data-ui=lite] .af-ico.spin svg,html[data-ui=mini] .af-ico.spin svg{animation:spin 1s linear infinite!important}
html[data-ui=flow] .ci-typing i,html[data-ui=lite] .ci-typing i,html[data-ui=mini] .ci-typing i{animation:tyDot 1.2s infinite!important}
html[data-ui=flow] .cc-rec-dot,html[data-ui=lite] .cc-rec-dot,html[data-ui=mini] .cc-rec-dot{animation:recBlink 1s steps(2) infinite!important}

/* =====================================================================
   ПОТОК — меню слева, мягкие поверхности, половина движения
   ===================================================================== */
html[data-ui=flow]{
  --bg:#070b0d; --surface:#0f1517; --surface-2:#141c1f; --surface-3:#1a2427;
  --line:#1b2629; --line-2:#263437;
  --accent:#2fd8a0; --accent-2:#22b88a; --accent-soft:rgba(47,216,160,.12); --pulse:#2fd8a0;
  --r:16px;
  --glass-bg:linear-gradient(180deg,rgba(18,26,29,.92),rgba(13,19,21,.94));
}
/* половина анимаций: декоративные «вечные» анимации проигрываются один раз, наклон и «биение» выключены (fx.js) */
html[data-ui=flow] *,html[data-ui=flow] *::before,html[data-ui=flow] *::after{animation-iteration-count:1!important}
html[data-ui=flow] .rv.in{animation-duration:.4s!important}
html[data-ui=flow] .bg-fx::before{display:none}
html[data-ui=flow] .bg-fx i:nth-child(1){background:radial-gradient(closest-side,rgba(20,120,110,.30),transparent)!important}
html[data-ui=flow] .bg-fx i:nth-child(2){background:radial-gradient(closest-side,rgba(40,80,140,.26),transparent)!important}
html[data-ui=flow] .bg-fx i:nth-child(3){display:none}
html[data-ui=flow] .panel,html[data-ui=flow] .fpost,html[data-ui=flow] .og-card,html[data-ui=flow] .side-card{border-radius:18px}
html[data-ui=flow] .btn{border-radius:12px}
html[data-ui=flow] .btn.pri{background:linear-gradient(135deg,#43e6b0,#1fb8a0)!important;box-shadow:0 10px 26px -14px rgba(47,216,160,.8)!important;color:#02130e}
html[data-ui=flow] .fpost:hover,html[data-ui=flow] .og-card:hover{transform:translateY(-2px)}
html[data-ui=flow] .top::after{background:linear-gradient(90deg,transparent,rgba(38,52,55,.9) 20%,rgba(38,52,55,.9) 80%,transparent)}
html[data-ui=flow] .logo-mark{background:linear-gradient(145deg,#4ae9b6,#1aa894)}

@media (min-width:1101px){
  /* меню разделов — колонка слева, как в приложениях */
  html[data-ui=flow] .top .nav-row{position:fixed;z-index:40;top:76px;inset-inline-start:max(16px,calc((100vw - 1320px) / 2 + 16px));width:224px;
    display:flex;flex-direction:column;gap:2px;padding:10px;margin:0;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 92px);
    border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,22,24,.94),rgba(11,16,18,.96))}
  html[data-ui=flow] .top .nav-row a,html[data-ui=flow] .top .nav-row button{width:100%;justify-content:flex-start;gap:12px;padding:10px 12px;border-radius:12px;font-size:14px;color:var(--muted)}
  html[data-ui=flow] .top .nav-row button>svg{margin-inline-start:auto}
  html[data-ui=flow] .top .nav-row a:hover,html[data-ui=flow] .top .nav-row button:hover{background:rgba(255,255,255,.04);color:var(--fg)}
  html[data-ui=flow] .top .nav-row .on{background:var(--accent-soft)!important;color:var(--accent)!important}
  html[data-ui=flow] .top .nav-row .on::before{content:"";position:absolute;inset-inline-start:-10px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
  html[data-ui=flow] .top .nav-row .ni{display:grid;place-items:center;width:20px;flex:none}
  html[data-ui=flow] .top .nav-row .nav-ink,html[data-ui=flow] .top .nav-row .nav-more{display:none!important}
  html[data-ui=flow] .top .nav-row [hidden]:not(.nav-more){display:flex!important}
  html[data-ui=flow] body:has(.top .nav-row) main.wrap{padding-inline-start:calc(max(16px,env(safe-area-inset-left,0px)) + 248px)}
  html[data-ui=flow] .top-row{height:64px}
}
@media (max-width:760px){
  /* телефон: нижняя панель прилегает к краю, «плюс» не выпирает */
  html[data-ui=flow] .tabbar{inset-inline-start:0;inset-inline-end:0;bottom:0;height:calc(62px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);
    border-radius:20px 20px 0 0;border:0;border-top:1px solid var(--line-2);background:rgba(9,14,16,.98)!important;box-shadow:0 -12px 30px -20px #000}
  html[data-ui=flow] .tb-plus{margin-top:0;width:46px;height:46px;border-radius:15px;box-shadow:none!important;background:linear-gradient(135deg,#43e6b0,#1fb8a0)}
  html[data-ui=flow] .tb-i.on::after{top:6px;height:30px;width:52px;margin-left:-26px;border-radius:12px;background:var(--accent-soft);box-shadow:none}
  html[data-ui=flow] main{padding-bottom:96px}
  /* только значки; активный — в «капсуле» */
  html[data-ui=flow] .tb-i>span:not(.tb-badge){display:none}
  html[data-ui=flow] .tb-i svg{width:24px;height:24px}
  html[data-ui=flow] .tb-i.on::after{top:50%;height:40px;width:56px;margin:-20px 0 0 -28px;border-radius:14px}
  html[data-ui=flow] .panel,html[data-ui=flow] .fpost,html[data-ui=flow] .og-card{border-radius:16px}
}

/* =====================================================================
   МИНИМАЛ — монохром, без свечения, теней и фоновых эффектов
   ===================================================================== */
html[data-ui=mini]{
  --bg:#0b0b0c; --ink-0:#0b0b0c; --ink-1:#111113; --ink-2:#161618; --ink-3:#1c1c1f;
  --surface:#111113; --surface-2:#18181b; --surface-3:#1f1f23;
  --line:#222226; --line-2:#2d2d32;
  --fg:#ededef; --muted:#9a9aa2; --dim:#6c6c74;
  --accent:#f1f1f3; --accent-2:#d4d4d8; --accent-ink:#0b0b0c; --accent-soft:rgba(255,255,255,.07); --pulse:#f1f1f3; --mint:#f1f1f3;
  --f-display:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif,"Noto Color Emoji";
  --glass-bg:#111113; --glass:#111113; --hi:none;
  --r:10px;
}
html[data-ui=mini] body{background:#0b0b0c!important}
html[data-ui=mini] .bg-fx{display:none!important}
html[data-ui=mini] *,html[data-ui=mini] *::before,html[data-ui=mini] *::after{box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  animation-duration:.15s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.12s!important}
html[data-ui=mini] .rv{opacity:1!important}
html[data-ui=mini] .top{background:#0b0b0c!important;border-bottom:1px solid var(--line)!important}
html[data-ui=mini] .top::after{display:none}
html[data-ui=mini] .logo-mark{background:#f1f1f3!important;color:#0b0b0c}
html[data-ui=mini] .logo-mark svg path{animation:none!important}
html[data-ui=mini] .h1,html[data-ui=mini] .h2{font-weight:600;letter-spacing:-.02em}
/* поверхности — ровные, тонкая линия, без градиентов */
html[data-ui=mini] .panel,html[data-ui=mini] .fpost,html[data-ui=mini] .og-card,html[data-ui=mini] .side-card,html[data-ui=mini] .hero,html[data-ui=mini] .f-hero,
html[data-ui=mini] .lot2,html[data-ui=mini] .modal,html[data-ui=mini] .dd,html[data-ui=mini] .user-dd,html[data-ui=mini] .m-pop,html[data-ui=mini] .seg,html[data-ui=mini] .ml,html[data-ui=mini] .msgr{
  background:#111113!important;background-image:none!important;border-color:var(--line)!important;border-radius:12px}
html[data-ui=mini] .fpost:hover,html[data-ui=mini] .og-card:hover,html[data-ui=mini] .lot2:hover{transform:none!important;border-color:#3a3a40!important}
html[data-ui=mini] .btn{background:#18181b!important;border-color:var(--line-2)!important;border-radius:9px;color:var(--fg)}
html[data-ui=mini] .btn:hover{background:#202024!important}
html[data-ui=mini] .btn.pri{background:#f1f1f3!important;color:#0b0b0c!important;border-color:#f1f1f3!important}
html[data-ui=mini] .btn.pri:hover{background:#fff!important}
html[data-ui=mini] .btn.ghost{background:transparent!important}
html[data-ui=mini] .btn.danger{color:#ff7b7b}
html[data-ui=mini] .chip{background:transparent!important;border-color:var(--line-2)!important}
html[data-ui=mini] .chip.on,html[data-ui=mini] .chip[aria-pressed=true]{background:#f1f1f3!important;color:#0b0b0c!important;border-color:#f1f1f3!important}
html[data-ui=mini] .seg .on,html[data-ui=mini] .seg button.on,html[data-ui=mini] .seg a.on{background:#26262a!important;color:#fff!important}
html[data-ui=mini] .inp,html[data-ui=mini] .search,html[data-ui=mini] .search-mini,html[data-ui=mini] .cc-field{background:#141416!important;border-color:var(--line-2)!important}
html[data-ui=mini] .inp:focus,html[data-ui=mini] .cc-field:focus-within{border-color:#8a8a92!important}
/* меню разделов: просто текст, активный — подчёркнут */
html[data-ui=mini] .nav-ink{display:none!important}
html[data-ui=mini] .nav-row a,html[data-ui=mini] .nav-row button{background:none!important;border-radius:0}
html[data-ui=mini] .nav-row .on{color:#fff!important;box-shadow:inset 0 -2px 0 #fff!important}
/* картинки-украшения убираем, содержимое остаётся */
html[data-ui=mini] .che-art,html[data-ui=mini] .og-hero-art,html[data-ui=mini] .hero-art,html[data-ui=mini] .ad-ring,html[data-ui=mini] .pulsebar::after{display:none!important}
html[data-ui=mini] .pulsebar{background:#f1f1f3}
/* заголовки в два тона вместо градиентов, промо-блоки без свечения */
html[data-ui=mini] .h1 em,html[data-ui=mini] .aa-title em,html[data-ui=mini] .np.grad{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--muted)!important;animation:none!important}
html[data-ui=mini] .og-hero,html[data-ui=mini] .subs-hero,html[data-ui=mini] .f-hero,html[data-ui=mini] .hero,html[data-ui=mini] .dh-copy{background:#111113!important;background-image:none!important}
html[data-ui=mini] .og-hero::before,html[data-ui=mini] .og-hero::after,html[data-ui=mini] .f-hero::before,html[data-ui=mini] .f-hero::after,html[data-ui=mini] .hero::before,html[data-ui=mini] .hero::after,html[data-ui=mini] .subs-hero::before,html[data-ui=mini] .subs-hero::after{display:none!important}
html[data-ui=mini] .chip.on,html[data-ui=mini] .topic.on,html[data-ui=mini] .cl-chip.on,html[data-ui=mini] .og-cat.on{background:#f1f1f3!important;color:#0b0b0c!important;border-color:#f1f1f3!important}
html[data-ui=mini] .ecg .trace{stroke:#f1f1f3!important}
html[data-ui=mini] .ecg .base{stroke:#2d2d32!important}
/* зелёный — только для смысла: в сети, успех, деньги пришли */
html[data-ui=mini] .up,html[data-ui=mini] .ok{color:#4ade80}
html[data-ui=mini] .msg2.me .m-bub{background:#2a2a2f!important;color:#fff}
html[data-ui=mini] .msg2:not(.me) .m-bub{background:#18181b!important}
html[data-ui=mini] .cc-send,html[data-ui=mini] .cc-mic{background:#f1f1f3!important;color:#0b0b0c!important}
html[data-ui=mini] .og-card.ogc2 .ogc-cover::after{display:none}
html[data-ui=mini] .ogc2 .ogc-rec{background:#0b0b0c;border-color:#3a3a40}
html[data-ui=mini] .ogc2 .ogc-rec svg{color:#fff}
html[data-ui=mini] .cnt-badge,html[data-ui=mini] .tb-badge,html[data-ui=mini] .ci-badge{background:#f1f1f3!important;color:#0b0b0c!important}
@media (min-width:1101px){
  /* содержимое уже и по центру — легче читать */
  html[data-ui=mini] main.wrap,html[data-ui=mini] .top>.wrap{max-width:1160px}
}
@media (max-width:760px){
  html[data-ui=mini] .tabbar{inset-inline-start:0;inset-inline-end:0;bottom:0;height:calc(58px + env(safe-area-inset-bottom,0px));padding:0 4px env(safe-area-inset-bottom,0px);
    border-radius:0;border:0;border-top:1px solid var(--line)!important;background:#0b0b0c!important}
  html[data-ui=mini] .tb-i.on{color:#fff}
  html[data-ui=mini] .tb-i.on::after{display:none!important}
  html[data-ui=mini] .tb-plus{margin-top:0;width:42px;height:42px;border-radius:12px;background:#f1f1f3!important;color:#0b0b0c}
  html[data-ui=mini] main{padding-bottom:90px}
}

/* =====================================================================
   ЛЁГКИЙ — для слабых ПК и телефонов: ни анимаций, ни размытия, ни теней
   ===================================================================== */
html[data-ui=lite]{
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --glass-bg:var(--surface); --hi:none;
}
html[data-ui=lite] *,html[data-ui=lite] *::before,html[data-ui=lite] *::after{animation:none!important;transition:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important;scroll-behavior:auto!important}
html[data-ui=lite] body{background:#0a0e0d!important}
html[data-ui=lite] .bg-fx{display:none!important}
html[data-ui=lite] .rv{opacity:1!important}
html[data-ui=lite] .top{background:#0a0e0d!important}
html[data-ui=lite] .panel,html[data-ui=lite] .fpost,html[data-ui=lite] .og-card,html[data-ui=lite] .side-card,html[data-ui=lite] .hero,html[data-ui=lite] .f-hero,
html[data-ui=lite] .lot2,html[data-ui=lite] .modal,html[data-ui=lite] .dd,html[data-ui=lite] .user-dd,html[data-ui=lite] .m-pop{background:var(--surface)!important;background-image:none!important}
html[data-ui=lite] .btn{background:var(--surface-2)!important}
html[data-ui=lite] .btn.pri{background:var(--accent)!important;color:var(--accent-ink)!important}
html[data-ui=lite] .btn.ghost{background:transparent!important}
html[data-ui=lite] .fpost:hover,html[data-ui=lite] .og-card:hover,html[data-ui=lite] .lot2:hover{transform:none!important}
/* длинные ленты: браузер не рисует то, чего не видно */
html[data-ui=lite] .fpost,html[data-ui=lite] .og-card,html[data-ui=lite] .lot2,html[data-ui=lite] .ow-grid>*{content-visibility:auto;contain-intrinsic-size:auto 320px}
html[data-ui=lite] .ecg .trace,html[data-ui=lite] .pulsebar,html[data-ui=lite] .ad-ring,html[data-ui=lite] .che-art{display:none!important}
html[data-ui=lite] .ch-bg i{filter:none!important}
@media (max-width:760px){
  html[data-ui=lite] .tabbar{inset-inline-start:0;inset-inline-end:0;bottom:0;border-radius:0;height:calc(58px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:#0b100e!important;border:0;border-top:1px solid var(--line)}
  html[data-ui=lite] .tb-plus{margin-top:0;width:44px;height:44px;border-radius:14px;background:var(--accent)!important}
  html[data-ui=lite] .tb-i.on::after{display:none!important}
  html[data-ui=lite] .tb-i.on{color:var(--accent)}
  html[data-ui=lite] main{padding-bottom:90px}
}

/* =====================================================================
   Настройки → Внешний вид: карточки-превью режимов
   ===================================================================== */
.ui-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ui-opt{position:relative;display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:18px;border:1.5px solid var(--line-2);background:var(--surface);text-align:start;color:inherit;cursor:pointer;transition:border-color .2s,transform .2s}
.ui-opt:hover{border-color:#3a4a45}
.ui-opt.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ui-opt .uo-t{display:flex;align-items:center;gap:10px}
.ui-opt .uo-t b{font-size:15px}
.ui-opt .uo-t small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:2px}
.ui-opt .uo-check{margin-inline-start:auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none;color:transparent}
.ui-opt .uo-check svg{width:13px;height:13px}
.ui-opt.on .uo-check{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.ui-opt .uo-tags{display:flex;flex-wrap:wrap;gap:5px}
.ui-opt .uo-tags span{font-size:11.5px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--muted)}
/* мини-макет страницы в каждом режиме */
.uo-pv{position:relative;height:150px;border-radius:12px;overflow:hidden;display:grid;grid-template-rows:20px 1fr;gap:6px;padding:8px}
.uo-pv i,.uo-pv u,.uo-pv s,.uo-pv em{display:block;font-style:normal;text-decoration:none}
.uo-pv .p-top{display:flex;align-items:center;gap:5px;border-radius:6px;padding:0 6px}
.uo-pv .p-top i{width:10px;height:10px;border-radius:3px}
.uo-pv .p-top u{height:5px;width:22px;border-radius:3px;opacity:.5}
.uo-pv .p-top s{margin-inline-start:auto;width:10px;height:10px;border-radius:50%}
.uo-pv .p-body{display:grid;gap:6px;min-height:0}
.uo-pv .p-card{border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px}
.uo-pv .p-card u{height:5px;border-radius:3px;opacity:.55}
.uo-pv .p-card u:nth-child(2){width:70%}
.uo-pv .p-card u:nth-child(3){width:45%}
.uo-pv .p-side{border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:5px}
.uo-pv .p-side u{height:5px;border-radius:3px;opacity:.5}
.uo-pv .p-side u.on{opacity:1}
/* Пульс */
.uo-pv.v-classic{background:radial-gradient(80% 70% at 0% 0%,rgba(34,214,138,.35),transparent 60%),radial-gradient(70% 60% at 100% 0%,rgba(43,196,201,.25),transparent 60%),#070b0a}
.v-classic .p-top{background:rgba(10,16,14,.8)}.v-classic .p-top i{background:linear-gradient(135deg,#3cf0a8,#13a868)}.v-classic .p-top u{background:#9cf6cf}.v-classic .p-top s{background:#22d68a}
.v-classic .p-body{grid-template-columns:1fr 1fr}
.v-classic .p-card{background:linear-gradient(180deg,rgba(24,34,31,.95),rgba(15,22,20,.95));box-shadow:0 6px 16px -8px rgba(34,214,138,.6);border:1px solid rgba(40,58,52,.9)}
.v-classic .p-card u{background:#cfe9de}.v-classic .p-card u:first-child{background:#22d68a;opacity:.9}
/* Поток */
.uo-pv.v-flow{background:radial-gradient(70% 70% at 0% 0%,rgba(20,120,110,.35),transparent 60%),#070b0d}
.v-flow .p-top{background:rgba(13,19,21,.9)}.v-flow .p-top i{background:linear-gradient(135deg,#4ae9b6,#1aa894)}.v-flow .p-top u{background:#bfe}.v-flow .p-top s{background:#2fd8a0}
.v-flow .p-body{grid-template-columns:34% 1fr}
.v-flow .p-side{background:rgba(15,22,24,.95);border:1px solid #1b2629}.v-flow .p-side u{background:#cfe}.v-flow .p-side u.on{background:#2fd8a0}
.v-flow .p-stack{display:grid;gap:6px}
.v-flow .p-card{background:#11181a;border:1px solid #1d2a2d;border-radius:10px}.v-flow .p-card u{background:#d8efe9}
/* Минимал */
.uo-pv.v-mini{background:#0b0b0c;border:1px solid #1d1d20}
.v-mini .p-top{border-bottom:1px solid #222226;border-radius:0}.v-mini .p-top i{background:#f1f1f3}.v-mini .p-top u{background:#f1f1f3}.v-mini .p-top s{background:#3a3a40}
.v-mini .p-body{grid-template-columns:1fr;padding:0 10%}
.v-mini .p-card{background:#111113;border:1px solid #222226;border-radius:6px}.v-mini .p-card u{background:#e9e9ec}
/* Лёгкий */
.uo-pv.v-lite{background:#0a0e0d}
.v-lite .p-top{background:#0f1513}.v-lite .p-top i{background:#1fc77e}.v-lite .p-top u{background:#9aa}.v-lite .p-top s{background:#1fc77e}
.v-lite .p-body{grid-template-columns:1fr 1fr}
.v-lite .p-card{background:#101614;border:1px solid #1e2a26;border-radius:6px}.v-lite .p-card u{background:#c9d4d0}
.uo-badge{display:inline-block;margin-inline-start:8px;vertical-align:2px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);letter-spacing:.02em}
.ui-hint{display:flex;gap:10px;align-items:flex-start}
@media (max-width:640px){.ui-grid{grid-template-columns:1fr}.uo-pv{height:130px}}