/* RobTop — общая дизайн-система оболочки (shell).
   Токены, базовые компоненты (плитки, HUD, шторки, поля, кнопки, тост, FAB),
   экран магазина приложений. Модуль-специфичные стили — в modules/<id>/module.css. */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* видимый фокус ТОЛЬКО с клавиатуры (a11y, аудит 2026-06-10): мышь/тап кольца не оставляют */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2.5px solid var(--cyan);outline-offset:2px}
:root{
  /* ===== GUARDRAILS: единые токены раскладки (канон — ГАЙД-UI-guardrails.md).
     ФАЗА 0: значения = текущие, БЕЗ визуальных изменений; дальше всё смещение
     считается от этих токенов, а не от чисел по месту. ===== */
  --safe-top:env(safe-area-inset-top);     --safe-bottom:env(safe-area-inset-bottom);
  --safe-left:env(safe-area-inset-left);   --safe-right:env(safe-area-inset-right);
  --gutter:16px;               /* единый боковой отступ контента (= .view) */
  --chrome-top:26px;           /* единый верх под статус-баром (унификация 20/26/30 — фаза 1) */
  --bell-w:42px;               /* ширина глобального колокольчика .ntf-bell (для резерва в шапке) */
  --hdr-h:56px;                /* высота тела шапки модуля */
  --kidbar-h:64px;             /* детский нижний бар (фаза 3) */
  --tabbar-h:62px;             /* родительский таббар (≈ под текущий .pd-tabbar) */
  --hdr-total:calc(var(--chrome-top) + var(--hdr-h) + var(--safe-top));
  --kidbar-total:calc(var(--kidbar-h) + var(--safe-bottom));
  --tabbar-total:calc(var(--tabbar-h) + var(--safe-bottom));
  /* нижние «полки» плавающих элементов — БАР-ОТНОСИТЕЛЬНЫЕ (фаза 3 завершена 2026-06-10):
     меняется высота нижнего меню → все плавающие элементы съезжают сами.
     FAB: 64+12=76px (+6px против старых 70 — теперь гарантированно НАД меню);
     toast: 64+56=120px (ровно как раньше). */
  --fab-bottom:calc(var(--kidbar-total) + 12px);
  --toast-bottom:calc(var(--kidbar-total) + 56px);
  /* единый язык движения: быстрые отклики (нажатия, цвет) / переходы элементов / вход экрана.
     Модули и ядро ссылаются на токены, а не на числа по месту (аудит 2026-06-10). */
  --dur-fast:.15s;
  --dur-med:.22s;
  --dur-slow:.32s;

  --cyan:#19e3ff; --magenta:#ff2bd6; --pink:#ff3db0; --purple:#a64bff;
  --blue:#3b6bff; --green:#2bf0c0; --mint:#38e8a0; --gold:#ffd23b; --red:#ff4d6d;
  --ink:#eaf2ff; --muted:#93a6cf;
  --accent:#ff3db0; --accent-2:#a64bff;
  /* ---- токены ТЕМЫ (дефолт = «Неон»; миграция 016, выбор в Настройках) ---- */
  --font-display:'Russo One',sans-serif;
  --font-body:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --chrome-ink:#bfe9ff;                /* иконки-кнопки оболочки (⚙, назад, hbtn) */
  --bg0:#05050f;                       /* базовый цвет страницы (и за пределами градиентов) */
  --bg-img:
    radial-gradient(820px 600px at 14% 8%, rgba(166,75,255,.20), transparent 60%),
    radial-gradient(820px 680px at 88% 22%, rgba(25,227,255,.15), transparent 60%),
    radial-gradient(900px 800px at 50% 108%, rgba(255,43,214,.18), transparent 60%),
    linear-gradient(180deg,#070617 0%, #05040f 60%, #07041a 100%);
  --tile-bg:linear-gradient(162deg, rgba(26,23,56,.72), rgba(11,10,28,.74));
  --sheet-bg:linear-gradient(180deg, rgba(24,21,52,.97), rgba(10,9,26,.99));
  --brand-glow:0 0 12px rgba(25,227,255,.7), 0 0 28px rgba(255,43,214,.6);
  --accent-grad:linear-gradient(180deg,#ff5db0,#d51a82);
  --hud-grad:linear-gradient(0deg, rgba(5,4,15,.86), transparent);
  --tabbar-grad:linear-gradient(0deg, rgba(5,4,15,.94) 60%, transparent);
  /* ---- расширенная палитра ДЛЯ МОДУЛЕЙ (значения = исходный неон; модули обязаны
     использовать ТОЛЬКО токены — правило в ГАЙД-новое-субприложение.md и КОНТЕКСТ §8) ---- */
  --orange:#ff7a3d;
  --ink-2:#e7eeff;      /* яркий текст контента */
  --ink-3:#cfe0ff;      /* мягкий светлый текст */
  --muted-2:#9fb0d6;    /* вторичный серо-голубой */
  --muted-dim:#6f80a6;  /* плейсхолдеры/совсем тихий */
  --cyan-soft:#bdeeff;  --green-soft:#bff5dd; --purple-soft:#dcc2ff;
  --pink-soft:#ff9ed1;  --red-soft:#ffb3c0;   --gold-soft:#ffe9a8;
  --on-bright:#04212b;  /* тёмный текст/штрих на ярких заливках */
  --panel-rgb:13,12,32; /* тёмные подложки модулей: rgba(var(--panel-rgb),A) */
  --panel-2:#0b0a1e;    /* сплошной тёмный фон элементов */
  --line-strong:#3d4668;
  --ok-grad:linear-gradient(180deg,#3df0c0,#19c7e0);
  --gold-grad:linear-gradient(180deg,#ffe08a,#ffc23b);
  --purple-grad:linear-gradient(135deg,#a64bff,#7a2bd6);
  --cyan-grad:linear-gradient(135deg,#19e3ff,#0e9fd6);
  /* ===== ЭКРАН НАСТРОЕК: спокойный фон вместо анимированного неонового канваса =====
     Определено через токены темы (var(--accent)/--accent-2/--bg0/--ink резолвятся по АКТИВНОЙ теме
     в точке применения), поэтому ОДНО правило подходит всем темам — и детской «Неон», и «Tilley».
     --settings-bg: тёмная база темы с лёгким вертикальным акцентным градиентом (моно-тон, читаемо).
     --settings-panel: заливка карточек/строк на тон светлее (тинт цветом текста темы) — заметнее
     прежних rgba(255,255,255,.04), которые тонули в анимированном фоне. */
  --settings-bg:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg0)) 0%,
    var(--bg0) 50%,
    color-mix(in srgb, var(--accent-2) 12%, var(--bg0)) 100%);
  --settings-panel:color-mix(in srgb, var(--ink) 14%, transparent);
}

/* ===================== ТЕМЫ (body[data-theme], хранится на аккаунте) =====================
   Тема полностью меняет оболочку: фон, канвас-арт (реестр канваса — core/bg.js RTTheme),
   шрифты, акценты, поверхности. Все темы на тёмной базе — модули не переделываются.
   Новая тема = блок токенов здесь + THEMES в core/bg.js + allowlist в accounts.php (set_theme)
   + карточка появится в Настройках автоматически (shell строит список из RTTheme.list()). */
body[data-theme="tilley"]{
  /* Tilley Live: глубокий лес, лён, оранжевый акцент; контрастнее, без serif-шрифтов. */
  --cyan:#86E0BD; --magenta:#FF6530; --pink:#FF6530; --purple:#E0BF72;
  --blue:#86BBD0; --green:#86E0BD; --mint:#98E8C4; --gold:#F0C45B; --red:#FF7658;
  --ink:#FFF3D6; --muted:#D2C4A3;
  --accent:#FF6530; --accent-2:#E34D18;
  --font-display:'Russo One',sans-serif;
  --font-body:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --chrome-ink:#FFF3D6;
  --bg0:#07150F;
  --bg-img:
    radial-gradient(720px 720px at 50% -14%, rgba(255,101,48,.18), transparent 70%),
    radial-gradient(640px 640px at 50% 114%, rgba(255,243,214,.08), transparent 70%),
    linear-gradient(180deg,#123326 0%, #0D241B 55%, #07150F 100%);
  --tile-bg:
    linear-gradient(170deg, rgba(255,243,214,.12) 0%, rgba(255,243,214,.04) 30%, transparent 55%),
    linear-gradient(145deg, rgba(31,74,55,.96) 0%, rgba(22,53,40,.94) 55%, rgba(12,32,23,.94) 100%);
  --sheet-bg:linear-gradient(180deg, rgba(23,58,45,.98), rgba(7,21,15,.99));
  --brand-glow:0 0 34px rgba(255,243,214,.22), 0 0 70px rgba(255,101,48,.13);
  --accent-grad:linear-gradient(180deg,#FF7441,#D94310);
  --hud-grad:linear-gradient(0deg, rgba(7,21,15,.92), transparent);
  --tabbar-grad:linear-gradient(0deg, rgba(7,21,15,.97) 60%, transparent);
  /* расширенная палитра модулей — лес/лён/янтарь, спокойные тона */
  --orange:#EFA25D;
  --ink-2:#FFF0CF; --ink-3:#EADDBD;
  --muted-2:#C9BC9B; --muted-dim:#A69A7E;
  --cyan-soft:#D8F6E8; --green-soft:#D1F2E0; --purple-soft:#F1DDA3;
  --pink-soft:#FFC0A8; --red-soft:#FFC1B2; --gold-soft:#F7E2AA;
  --on-bright:#17130C;
  --panel-rgb:8,24,17;
  --panel-2:#0A1D14;
  --line-strong:#6B806D;
  --ok-grad:linear-gradient(180deg,#95E2BE,#5CA77F);
  --gold-grad:linear-gradient(180deg,#F3D27C,#D4A84A);
  --purple-grad:linear-gradient(135deg,#D3B362,#A8863F);
  --cyan-grad:linear-gradient(135deg,#9BE0C1,#5BAA83);
}
/* Tilley: плитки и витрина — льняное «стекло» как в бренде (apps-tilley-menu), а НЕ оранжевый
   неон: сплошной оранжевый --c делал плитки кричащими и слабочитаемыми (фидбек Джеффа).
   Лён в --c (иконки/подписи) + мягкие брендовые рамки/тени вместо неонового свечения. */
body[data-theme="tilley"] .tile{--c:#DED5BE !important;
  border-color:rgba(222,213,190,.16);
  box-shadow:inset 0 1px 0 rgba(222,213,190,.10), 0 2px 8px rgba(0,0,0,.18)}
body[data-theme="tilley"] .tile .ic{filter:none;
  background:radial-gradient(circle at 50% 38%, rgba(222,213,190,.13), transparent 72%)}
body[data-theme="tilley"] .tile.active{box-shadow:inset 0 1px 0 rgba(222,213,190,.12), 0 4px 14px rgba(0,0,0,.24)}
body[data-theme="tilley"] .tile.active .ring{border-color:rgba(222,213,190,.34);animation:none;opacity:1;box-shadow:none}
body[data-theme="tilley"] .store-row{--c:#DED5BE !important}
/* родительский дашборд: цвета модулей (--mc инлайном) тоже в лён */
body[data-theme="tilley"] :is(.pd-mcard,.pd-mrow,.pd-ev,.pd-fchips button,.pd-mhead .mic){--mc:#DED5BE !important}
/* Tilley: спокойный канвас — светлячки приглушённее неоновой платы */
body[data-theme="tilley"] #bg{opacity:.85}

html{background:var(--bg0)}
/* pan-x pan-y = скролл разрешён, pinch-zoom и double-tap-zoom запрещены (как в нативном приложении) */
html,body{margin:0;padding:0;min-height:100%;overscroll-behavior:none;touch-action:pan-x pan-y}
body{
  font-family:var(--font-body);
  color:var(--ink); background:var(--bg0); min-height:100vh; min-height:100dvh; overflow-x:hidden;
  background-image:var(--bg-img);
  /* тонкий тематический скроллбар на десктопе; на body (НЕ html) — html вне scope body[data-theme] */
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
#bg{position:fixed;inset:0;z-index:0;display:block}
/* guardrails: dvh — стабильная высота на мобильных (низ не «дышит» при адресной строке);
   100vh оставлен фолбэком для старых браузеров. */
#root{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh}

.view{display:none;padding:0 16px}
/* Вход экрана — ТОЛЬКО opacity (фикс 2026-06-10): transform в этой анимации делал .view
   containing block для position:fixed (ловушка ГАЙД-UI-guardrails.md §1.3) — из-за неё Чат
   и таббары пришлось выселять в <body>. Лёгкое движение оставлено шапке рамки (.rt-hdr):
   у неё fixed-потомков нет, ловушка не возникает. */
.view.active{display:block;animation:viewin var(--dur-slow) ease both}
@keyframes viewin{from{opacity:0}to{opacity:1}}
.view.active .rt-hdr{animation:hdrin var(--dur-slow) ease both}
@keyframes hdrin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .view.active,.view.active .rt-hdr{animation:none} }

/* ===== УНИВЕРСАЛЬНАЯ РАМКА (guardrails) — КАНОН: ГАЙД-UI-guardrails.md.
   ФАЗА 0: классы добавлены, но ещё НИЧЕМ не используются (нулевой эффект). Модули
   переводятся помодульно (фазы 1–4) через sdk.ui.frame(). Контракт:
     .rt-hdr  — единая шапка (‹ назад · заголовок · действия), один верх --chrome-top;
     .rt-body — единственный скролл-контейнер, нижний резерв = высота бара + safe-area;
     .rt-bar  — детский нижний бар (домой · очки · система), зеркало .pd-tabbar. ===== */
.rt-hdr{display:flex;align-items:center;gap:9px;
  padding:calc(var(--chrome-top) + var(--safe-top)) 2px 6px;min-height:var(--hdr-total)}
/* верхний хром (🔔/⚙) на экранах модулей убран (ушёл в нижнее меню), поэтому резерв справа
   в шапке больше НЕ нужен — шапка целиком принадлежит приложению (ПЛАН-нижнее-меню.md). */
/* .rt-head-main — слот заголовка: модуль кладёт сюда свой заголовок (иконка/подзаголовок)
   через opts.titleHtml и СОХРАНЯЕТ своё оформление; рамка задаёт только раскладку.
   Заголовок и подзаголовок усекаются многоточием, а не ломают шапку при длинном тексте. */
.rt-head-main{flex:1;min-width:0}
.rt-hdr .rt-title{font-family:var(--font-display);font-weight:400;font-size:21px;
  color:#fff;line-height:1.12;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%, transparent)}
.rt-hdr .rt-actions{flex:none;display:flex;align-items:center;gap:6px}
/* компактные кнопки В ШАПКЕ (меньше глобальных 46px): чтобы помещались заголовок + несколько
   действий (напр. Виш-лист: назад + заголовок + 3 кнопки) без обрезки на узких экранах */
.rt-hdr .back,.rt-hdr .hbtn{width:42px;height:42px;border-radius:13px}
.rt-hdr .back svg,.rt-hdr .hbtn svg{width:20px;height:20px}
.rt-body{padding-bottom:calc(var(--kidbar-total) + 16px)}
/* декоративный «экшен» в шапке (не кнопка): напр. иконка-клипборд в «Заданиях» */
.rt-actions .rt-deco{background:none;border:none;box-shadow:none;color:var(--muted);pointer-events:none}

/* ---- ЕДИНОЕ НИЖНЕЕ МЕНЮ (#kidBar, .rt-nav): 5 вкладок APPS/BANK/CHAT/NOTIFICATIONS/SETTINGS
   (ПЛАН-нижнее-меню.md). Живёт в <body>; видно на детских экранах (home/модуль/настройки/
   оповещения); в полноэкранных сценах прячется (.rt-bar-hide через hud({hidden})). ---- */
.rt-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:14;max-width:480px;margin:0 auto;gap:2px;
  min-height:var(--kidbar-total);padding:6px 8px calc(6px + var(--safe-bottom));
  background:var(--tabbar-grad);border-top:1px solid rgba(255,255,255,.09);backdrop-filter:blur(8px)}
body[data-view="home"] .rt-nav,body[data-view="module"] .rt-nav,body[data-view="settings"] .rt-nav,body[data-view="notifications"] .rt-nav,body[data-view="parent"] .rt-nav{display:flex}
/* ВАЖНО — специфичность: префикс body[data-view] обязателен. Без него `.rt-nav.rt-bar-hide`
   имеет вес (0,2,0) и ПРОИГРЫВАЕТ показу `body[data-view="module"] .rt-nav` (0,2,1) — тогда
   hud({hidden:true}) не прячет бар в модулях (он оставался видимым, всплывал над клавиатурой в
   iOS-PWA). С body[data-view] вес (0,3,1) бьёт показ во всех видах. Держать ПОСЛЕ правила показа. */
body[data-view] .rt-nav.rt-bar-hide{display:none}
.rt-nav-b{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  border:none;background:none;cursor:pointer;font-family:inherit;font-size:10px;font-weight:800;letter-spacing:.2px;
  color:var(--muted);padding:6px 2px;border-radius:12px;transition:color var(--dur-fast), transform .1s}
.rt-nav-b svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rt-nav-b>span:not(.rt-nav-badge){max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-nav-b:active{transform:scale(.94)}
.rt-nav-b.on{color:var(--cyan);text-shadow:0 0 10px rgba(25,227,255,.7)}
.rt-nav-b.on svg{filter:drop-shadow(0 0 5px rgba(25,227,255,.8))}
.rt-nav-badge{position:absolute;top:1px;left:calc(50% + 4px);min-width:16px;height:16px;border-radius:8px;
  display:grid;place-items:center;background:var(--red);color:#fff;font-size:10px;font-weight:800;padding:0 4px;
  box-shadow:0 0 10px -2px var(--red)}
.rt-nav-badge[hidden]{display:none}
/* старый HUD-счётчик на экранах модулей не показываем — его заменило нижнее меню */
body[data-view="module"] .hud{display:none}

/* ---- guardrails: родительская шапка деталей приложения (.pd-mhead в core/parent.js) ----
   Чтобы переключатель ребёнка («Artemkaa ▾») не выдавливал и не накрывал заголовок: ограничиваем
   его ширину и усекаем имя. Иконка модуля уже починена (HDR_ICONS-коллизия). Правила здесь
   (в ui.css), а не в parent.js — параллельная сессия активно правит parent.js; выше специфичность
   (.pd-mhead .pd-kidsw = 0,2,0) перебивает инлайн-стиль .pd-kidsw, который инжектит parent.js. */
.pd-mhead{gap:8px}
.pd-mhead .mttl{flex:1 1 auto;min-width:0}            /* приоритет у заголовка (правило R4) */
.pd-mhead .pd-kidsw{flex:0 1 auto;max-width:38%;min-width:0;overflow:hidden}
.pd-mhead .pd-kidsw .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* полный фикс переполнения родительской шапки (меньше элементов) — за parent.js (чужая зона) */

/* ===================== HOME ===================== */
#home{padding-bottom:calc(var(--kidbar-total) + 16px)} /* нижнее меню под сеткой — резерв, чтобы плитки не уходили под него */
.hometop{padding:calc(30px + var(--safe-top)) 6px 14px;position:relative}
.brand{font-family:var(--font-display);font-size:40px;letter-spacing:1px;line-height:1;margin:0;color:#fff;
  text-shadow:var(--brand-glow)}
.brand b{color:var(--pink);font-weight:400}
.tagline{margin:8px 2px 0;color:var(--muted);font-weight:600;font-size:15px;letter-spacing:.2px}
.tagline .spark{color:var(--cyan)}
/* ⚙ — ГЛОБАЛЬНАЯ кнопка (с v.65 живёт в <body>, не в .hometop): единый кластер [🔔][⚙]
   вверху справа на главном экране ребёнка И родительском дашборде (гармонизация по
   фидбеку Джеффа 2026-06-07). С v.67 НЕ плавает над контентом: position:absolute —
   прибита к ШАПКЕ страницы и уезжает со скроллом (фидбек «fix them to header»);
   каждый переход экрана делает scrollTo(0,0), так что при входе кнопки всегда видны.
   На остальных экранах скрыта (настройки/модули/lock); в демо видна — настройки и
   магазин нужны и там. */
.gear{position:absolute;top:calc(30px + var(--safe-top));right:6px;z-index:15;width:42px;height:42px;border-radius:13px;
  display:none;place-items:center;cursor:pointer;font-size:20px;color:var(--chrome-ink);
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);box-shadow:0 0 18px -7px var(--cyan)}
/* ⚙ сверху больше НЕ показываем нигде — настройки у всех (ребёнок и родитель) во вкладке
   нижнего меню SETTINGS (ПЛАН-нижнее-меню.md Ф3). .gear база display:none. */
.gear:active{transform:scale(.93)}

.apps{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px}
/* каскадный вход плиток ТОЛЬКО при первом рендере за загрузку (.intro ставит и снимает shell):
   без .intro перерисовки (sync, смена языка, реордер) сетку не «переигрывают».
   fill backwards (НЕ both): после конца анимации transform возвращается :active-скейлу. */
@keyframes tilein{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
/* :not(.jgl) — long-press в окно каскада: дрожание .jgl-on не должно проигрывать по специфичности */
.apps.intro:not(.jgl) .tile{animation:tilein var(--dur-slow) ease backwards;animation-delay:calc(var(--ti,0)*30ms)}
@media (prefers-reduced-motion:reduce){ .apps.intro .tile{animation:none} }
/* РОДИТЕЛЬСКАЯ сетка (#pdApps): плитка всегда по высоте своего контента, НЕ растягивается
   на высоту строки. Фикс «плитки ломаются при кликах» (фидбек Джеффа): при ре-рендере
   дашборда/артефакте реордера одиночная плитка в неполной строке переставала вытягиваться
   в «высокую». Скоуп только на родителя — детская сетка (ровные строки через stretch) не меняется.
   Если баг всплывёт и на детском главном — расширить до `.apps .tile`. */
#pdApps .tile{align-self:start}
/* разделитель «Скоро» между активными и будущими плитками */
.apps-sep{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin:8px 2px 0;
  font-weight:800;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#90a2c6}
.apps-sep::before,.apps-sep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.tile{position:relative;display:flex;flex-direction:column;gap:11px;align-items:flex-start;
  border-radius:20px;padding:17px 15px;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);
  background:var(--tile-bg);
  border:1.5px solid color-mix(in srgb, var(--c) 50%, transparent);
  box-shadow:0 8px 26px rgba(0,0,0,.46), 0 0 26px -10px var(--c), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-med) ease}
.tile:active{transform:scale(.965)}
.tile .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:var(--c);
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--c) 32%, transparent), transparent 72%);
  filter:drop-shadow(0 0 7px var(--c))}
.tile .ic svg{width:30px;height:30px}
.tile .ic img{width:34px;height:34px;border-radius:9px}
.tile .txt{display:flex;flex-direction:column;gap:2px}
.tile .nm{font-weight:700;font-size:15px;color:#eef4ff;line-height:1.15}
.tile .st{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--c);opacity:.92}
.tile.soon{opacity:.52;filter:saturate(.65)}
.tile.soon .st{color:#90a2c6}
.tile.soon .lock{position:absolute;top:13px;right:13px;color:#90a2c6;opacity:.8}
.tile.soon .lock svg{width:15px;height:15px}
.tile.wide{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px;padding:18px 18px}
.tile.wide .ic{width:56px;height:56px}
.tile.active{box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 32px -6px var(--c), inset 0 1px 0 rgba(255,255,255,.06)}
.tile.active .ring{content:"";position:absolute;inset:-1.5px;border-radius:21px;border:1.6px solid var(--c);
  pointer-events:none;animation:ring 2.3s ease-in-out infinite}
@keyframes ring{0%,100%{opacity:.15;box-shadow:0 0 0 var(--c)}50%{opacity:.85;box-shadow:0 0 22px -2px var(--c)}}

/* generic header buttons (used by module headers) */
.back,.hbtn{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);color:var(--chrome-ink);
  box-shadow:0 0 18px -7px var(--cyan)}
.back:active,.hbtn:active{transform:scale(.93)}
.back svg,.hbtn svg{width:22px;height:22px}

/* ===================== HUD ===================== */
/* HUD — поверхность модулей (их счётчики). На главном, lock и в настройках скрыт:
   числа «приложений/доступно» ценности не несли. */
body[data-view="home"] .hud,body[data-view="lock"] .hud,body[data-view="settings"] .hud{display:none}
body[data-view="settings"] .fab{display:none}
.hud{position:fixed;left:0;right:0;bottom:0;z-index:14;pointer-events:none;
  max-width:480px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 22px calc(16px + var(--safe-bottom));
  background:var(--hud-grad)}
.hud .big{font-family:var(--font-display);font-size:34px;color:#fff;line-height:.95;text-shadow:0 0 14px rgba(255,255,255,.22)}
.hud .lbl{font-weight:700;font-size:13px;letter-spacing:.4px;margin-top:3px}
.hud-l{font-weight:800;font-size:14px;color:var(--mint);text-shadow:0 0 12px rgba(56,232,160,.5);padding-bottom:3px}
.hud-l b{color:#dffaef}
.hud-c{text-align:center}.hud-c .lbl{color:var(--cyan)}
.hud-r{text-align:right}.hud-r .lbl{color:var(--pink)}

/* ===================== FAB (общий, управляется через sdk.ui.fab) ===================== */
.fab{position:fixed;z-index:20;display:none;align-items:center;gap:10px;
  bottom:var(--fab-bottom);right:max(18px, calc(50vw - 222px));
  height:58px;padding:0 22px 0 18px;border:none;border-radius:30px;cursor:pointer;color:#fff;
  font-family:var(--font-display);font-size:15px;letter-spacing:.3px;
  background:var(--accent-grad);
  box-shadow:0 0 28px -3px var(--accent), 0 12px 26px rgba(0,0,0,.5)}
.fab.show{display:flex}
.fab:active{transform:scale(.95)}
.fab .plus{width:26px;height:26px;display:grid;place-items:center;background:rgba(255,255,255,.24);border-radius:50%;font-size:21px;line-height:1}

/* ===================== SHEETS (базовые) ===================== */
.overlay{position:fixed;inset:0;z-index:30;background:rgba(4,3,14,.62);backdrop-filter:blur(3px);
  display:none;align-items:flex-end;justify-content:center}
.overlay.show{display:flex;animation:fade var(--dur-med) both;
  /* шторки якорятся к низу (align-items:flex-end). При открытой клавиатуре iOS она
     перекрывала нижние поля — поднимаем шторку над ней на высоту --kb (её выставляет
     core/shell.js по VisualViewport; 0 когда клавиатуры нет). */
  padding-bottom:var(--kb,0px);transition:padding-bottom var(--dur-med) ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-width:480px;border-radius:26px 26px 0 0;padding:10px 18px calc(22px + var(--safe-bottom));
  background:var(--sheet-bg);
  border-top:1.5px solid color-mix(in srgb,var(--accent) 55%, transparent);
  box-shadow:0 -12px 50px color-mix(in srgb,var(--accent) 18%, transparent);
  /* при открытой клавиатуре ужимаем шторку, чтобы она помещалась над ней и скроллилась внутри */
  max-height:min(92vh, calc(100dvh - var(--kb,0px) - 16px));overflow:auto;
  animation:slideup .26s cubic-bezier(.2,.8,.2,1) both;color:var(--ink)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.grip{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);margin:6px auto 12px;cursor:grab}
.grip-hit{padding:6px 0 2px;margin:-6px 0 0;touch-action:none}
.demo-badge{position:fixed;left:12px;bottom:var(--toast-bottom);z-index:16;display:none;
  background:rgba(255,210,59,.16);color:#ffd23b;border:1px solid rgba(255,210,59,.5);
  font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:4px 9px;border-radius:999px}
body.demo .demo-badge{display:block}
/* индикатор версии (слева внизу) — маркер деплоя */
/* едва заметный маркер деплоя: ПОД меню/HUD (z-index 1 — на родительском виде его
   накрывает таббар, и это ок); точная версия всегда видна в Настройках (.set-ver) */
.appver{position:fixed;left:calc(10px + var(--safe-left));bottom:calc(4px + var(--safe-bottom));z-index:1;
  font-family:'Rubik',sans-serif;font-size:9px;font-weight:600;letter-spacing:.3px;color:rgba(147,166,207,.26);
  pointer-events:none;user-select:none}
.set-ver{margin-top:18px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.4px;color:rgba(147,166,207,.55)}
.sheet h2{font-family:var(--font-display);font-weight:400;font-size:21px;margin:0 0 14px;text-align:center;color:#fff;
  text-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%, transparent)}
.field{margin-top:14px}
.field label{display:block;font-weight:800;font-size:14px;color:#c3d2f2;margin-bottom:6px;padding-left:4px}
.field .opt{color:#8aa0c8;font-weight:700;font-size:12.5px}
.field input,.field textarea{width:100%;border:1.6px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 14px;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.04);outline:none;transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
.field textarea{resize:none;min-height:70px;line-height:1.4}
.field input::placeholder,.field textarea::placeholder{color:#6f80a6}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%, transparent)}
.sheet-actions{display:flex;gap:10px;margin-top:20px}
.sheet-actions .btn{padding:14px}

/* ===================== BUTTONS (базовые) ===================== */
.btn{flex:1;min-width:120px;border:1.5px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 10px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(255,255,255,.05);color:#e7eeff;transition:transform .1s, filter .15s}
.btn:active{transform:scale(.96)}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--accent-grad);color:#fff;font-size:16px;border-color:transparent;box-shadow:0 0 20px -5px var(--accent)}
.btn-cancel{background:rgba(255,255,255,.06);color:#aab8d6;flex:0 0 38%}
.btn-danger{background:rgba(255,77,109,.14);color:#ffb3c0;border-color:rgba(255,77,109,.5)}

/* ===================== ЗАГРУЗКА / ПУСТО (общие для модулей, аудит 2026-06-10) =====================
   .rt-loading > .rt-spin — спиннер первой загрузки вместо пустого экрана;
   .rt-empty — единое оформление «здесь пока пусто» (модуль даёт свой текст через i18n). */
.rt-loading{display:flex;align-items:center;justify-content:center;padding:38px 0}
.rt-spin{width:28px;height:28px;border-radius:50%;flex:none;
  border:3px solid color-mix(in srgb,var(--ink) 16%, transparent);border-top-color:var(--cyan);
  animation:rtspin .8s linear infinite}
@keyframes rtspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .rt-spin{animation-duration:1.6s} }
.rt-empty{text-align:center;color:var(--muted);font-weight:600;font-size:13px;
  padding:30px 16px;line-height:1.55}
.rt-empty .e{display:block;font-size:36px;margin-bottom:8px;line-height:1}

/* ===================== TOAST ===================== */
/* радиус 22px, НЕ 999px: на однострочном тосте (высота ~44px) выглядит той же капсулой,
   а длинные сообщения переносятся на 2-3 строки и больше не вылезают из «облачка» углами */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);
  bottom:var(--toast-bottom);z-index:50;max-width:90%;
  display:flex;align-items:center;gap:12px;
  background:rgba(10,10,28,.95);color:#eaf6ff;padding:11px 16px 11px 18px;border-radius:22px;font-weight:700;font-size:14.5px;
  line-height:1.35;border:1.5px solid rgba(25,227,255,.5);box-shadow:0 0 24px -6px var(--cyan), 0 10px 30px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity var(--dur-med), transform var(--dur-med)}
.toast span{min-width:0;overflow-wrap:break-word}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* верхняя позиция: пока активен режим перестановки, низ занят пилюлей «✓ Готово» —
   подсказка и любые тосты уезжают наверх, чтобы не накладываться */
.toast.top{top:calc(24px + var(--safe-top));bottom:auto;transform:translateX(-50%) translateY(-20px)}
.toast.top.show{transform:translateX(-50%) translateY(0)}
.toast.has-act{pointer-events:auto}
.toast-act{border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:14px;color:#04121a;
  background:linear-gradient(180deg,#5af0d0,#16b893);padding:8px 14px;border-radius:999px;box-shadow:0 0 14px -3px var(--green)}

/* ===================== STORE / ADMIN (магазин приложений) ===================== */
.sheet.store{border-top-color:rgba(25,227,255,.55)}
.store-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.store-row{display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.store-row .si{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--c,#19e3ff);flex:none;
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--c,#19e3ff) 30%, transparent), transparent 72%)}
.store-row .si svg{width:24px;height:24px}.store-row .si img{width:28px;height:28px;border-radius:7px}
.store-row .smeta{flex:1;min-width:0}
.store-row .snm{font-weight:800;font-size:15px;color:#eef4ff}
.store-row .ssub{font-size:12px;color:#9fb0d6;margin-top:2px}
.store-row .stag{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#8aa0c8}
.toggle{flex:none;width:52px;height:30px;border-radius:999px;border:none;cursor:pointer;position:relative;
  background:rgba(255,255,255,.14);transition:background .2s}
.toggle.on{background:linear-gradient(180deg,#2bf0c0,#10ad85)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle.on::after{transform:translateX(22px)}
.store-section{font-weight:800;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:#9fb0d6;margin:16px 0 8px;padding-left:2px}
.store-install{border:2px dashed rgba(25,227,255,.45);border-radius:16px;padding:16px;text-align:center;color:#bdeeff;font-weight:700;cursor:pointer;margin-top:6px}
.store-install:active{transform:scale(.99)}

/* ===================== ЭКРАН НАСТРОЕК (#settings) ===================== */
#settings{padding-bottom:calc(var(--kidbar-total) + 16px)} /* нижнее меню всегда видно на настройках — резерв снизу */
/* ФОН НАСТРОЕК: прячем анимированный неоновый канвас (#bg) и кладём спокойный градиент темы на body
   (покрывает весь экран, в т.ч. когда контент короче вьюпорта). Контент читается заметно
   контрастнее в ОБЕИХ ролях/темах. Только в этом виде — на остальных экранах канвас как был. */
body[data-view="settings"] #bg{display:none}
body[data-view="settings"]{background-image:var(--settings-bg)}
/* поверхности настроек заметнее на спокойном фоне: бьём ТОЛЬКО заливку (рамки и состояния
   .on/:focus заданы отдельно и не ломаются — подсветка выбора/фокуса цела). Скоуп #settings (а НЕ
   body[data-view=settings]) — чтобы тинт НЕ протекал в шторки (они дети body, со своим --sheet-bg).
   .store-install (пунктирная CTA «добавить») намеренно НЕ включена. */
#settings :is(.acct-row,.set-in,.lang-seg,.theme-card,.invlink,.store-row){background:var(--settings-panel)}
/* экран оповещений (вкладка нижнего меню): тот же резерв снизу под меню; шапка .set-top, список .ntf-list, секция «Настройки» .store-section+.ntf-push */
#notifications{padding-bottom:calc(var(--kidbar-total) + 16px)}
#notifications .ntf-list{max-height:none}  /* на экране (не в шторке) список во всю высоту, скролл страницы */
.set-top{display:flex;align-items:center;gap:12px;padding:calc(26px + var(--safe-top)) 0 8px}
.set-top h1{font-family:var(--font-display);font-weight:400;font-size:23px;margin:0;color:#fff;
  text-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%, transparent)}
/* язык: сегмент-контрол в одну строку вместо стопки кнопок */
.lang-seg{display:flex;gap:6px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.12);
  border-radius:16px;padding:5px;margin-top:6px}
.lang-seg button{flex:1;min-width:0;border:none;background:none;cursor:pointer;border-radius:12px;
  font-family:inherit;font-weight:700;font-size:13.5px;color:#cfe0ff;padding:11px 4px;transition:var(--dur-fast)}
.lang-seg button:active{transform:scale(.97)}
.lang-seg button.on{color:#fff;background:rgba(25,227,255,.13);
  box-shadow:inset 0 0 0 1.5px var(--cyan), 0 0 16px -6px var(--cyan)}
/* «Выйти» — внизу экрана, отдельно от остального */
.set-out{width:100%;margin-top:28px;flex:none}

/* ===================== ЭКРАН ВХОДА (lock) ===================== */
#lock{padding-bottom:60px}
#lock .hometop{text-align:center}
.lockform{max-width:340px;margin:14px auto 0}
.lockform .btn{width:100%;margin-top:12px}

/* ===================== АККАУНТ (настройки) ===================== */
.set-note{color:#9fb0d6;font-size:12.5px;font-weight:600;margin:2px 2px 8px;line-height:1.45}
.set-in{width:100%;margin-top:8px;border:1.6px solid rgba(255,255,255,.16);border-radius:14px;padding:13px 14px;
  font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.04);outline:none}
.set-in:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,227,255,.18)}
.acct-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.acct-row .nm{flex:1;min-width:0;font-weight:800;font-size:15px;color:#eef4ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-row .rl{flex:0 0 auto;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;
  background:rgba(43,240,192,.14);color:#9ff0d8;border:1px solid rgba(43,240,192,.45)}
.acct-row .rl.off{background:rgba(255,77,109,.14);color:#ffb3c0;border-color:rgba(255,77,109,.45)}
button.acct-row{width:100%;margin-top:8px;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink)}
button.acct-row:active{transform:scale(.985)}
.invlink{margin-top:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1.5px solid rgba(25,227,255,.35);font-size:12.5px;font-weight:600;color:#cdeeff;word-break:break-all;line-height:1.5}
/* центр семьи в настройках (слияние с консолью family.html, 2026-06-07) */
.fam-sub{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#8aa0c8;margin:14px 2px 2px}
.fam-em{display:block;font-size:11px;font-weight:600;color:#8aa0c8;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.acct-row .rl.warn{background:rgba(255,210,59,.14);color:#ffe08a;border-color:rgba(255,210,59,.45)}
div.acct-row{margin-top:8px}
/* текстовая ссылка на lock-экране («Забыли пароль?») */
.lock-link{display:block;width:100%;margin-top:14px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--cyan);text-align:center;padding:6px}
.lock-link:active{opacity:.7}

@media (max-width:360px){ .tile .nm{font-size:14px} .brand{font-size:34px} }

/* ===================== РОДИТЕЛЬСКИЙ ЭКРАН (#parent, core/parent.js) =====================
   Только для родительской сессии. Глобальный HUD скрыт — вместо него таббар .pd-tabbar. */
body[data-view="parent"] .hud{display:none}
body[data-view="parent"] .fab{display:none}
body[data-view="parent"]{overflow:hidden}
/* фон-декор (канвас #bg: неоновые линии и орбы) просвечивал сквозь почти прозрачные
   карточки дашборда (rgba(255,255,255,.045)) и визуально «ломал» график активности.
   В родительском виде приглушаем канвас целиком — чинит все pd-поверхности разом. */
body[data-view="parent"] #bg{opacity:.15;filter:saturate(.65)}
#parent{padding-bottom:6px}
body[data-view="parent"] #parent.view.active{
  position:fixed;inset:0;max-width:480px;margin:0 auto;padding:0 16px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.pd-wrap{padding-bottom:96px}
.pd-top{display:flex;align-items:center;gap:8px;padding:calc(26px + var(--safe-top)) 0 10px}
.pd-kid{display:flex;align-items:center;gap:9px;min-width:0;flex:1;border:none;background:none;cursor:pointer;
  font-family:inherit;color:var(--ink);text-align:left;padding:0}
.pd-kid:disabled{cursor:default}
.pd-kid .ava{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:none;
  background:linear-gradient(150deg,rgba(25,227,255,.22),rgba(166,75,255,.26));
  border:1.5px solid rgba(25,227,255,.45);box-shadow:0 0 14px -4px var(--cyan)}
.pd-kid .ktx{min-width:0;display:flex;flex-direction:column;gap:2px}
.pd-kid .nm{font-family:var(--font-display);font-size:16px;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-kid .st{font-size:10.5px;color:var(--muted);font-weight:700}
.pd-badge{flex:none;display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--cyan);background:rgba(25,227,255,.1);border:1px solid rgba(25,227,255,.4);padding:5px 8px;border-radius:999px;white-space:nowrap}
.pd-top .hbtn{width:40px;height:40px;font-size:17px}
.pd-sect{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin:16px 4px 8px}
.pd-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:13px 14px;margin-bottom:10px}
.pd-empty{text-align:center;color:var(--muted);font-size:12.5px;font-weight:600;padding:26px 14px;line-height:1.55}
/* сегменты периода */
.pd-seg{display:flex;gap:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:4px}
.pd-seg button{flex:1;border:none;background:none;color:#cfe0ff;font-family:inherit;font-weight:800;font-size:12px;padding:7px 8px;border-radius:999px;cursor:pointer;transition:var(--dur-fast)}
.pd-seg button.on{color:#04212b;background:linear-gradient(180deg,#3df0c0,#19c7e0);box-shadow:0 0 14px -4px var(--cyan)}
/* начисление очков родителем: быстрые суммы в шторке */
.pd-gamts{display:flex;gap:7px;margin-top:2px}
.pd-gamts button{flex:1;border:1.6px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#cfe0ff;
  font-family:var(--font-display);font-size:16px;padding:13px 0;border-radius:14px;cursor:pointer;transition:var(--dur-fast)}
.pd-gamts button.on{color:#2b1605;background:linear-gradient(180deg,#ffe57a,#ffb02e);border-color:transparent;
  box-shadow:0 0 14px -4px var(--gold)}
/* HUD-карточки обзора */
.pd-hud{display:flex;gap:8px;margin-top:10px}
.pd-hud .h{flex:1;text-align:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:11px 6px 9px}
.pd-hud .n{font-family:var(--font-display);font-size:23px;color:#fff;line-height:1}
.pd-hud .h:nth-child(1) .n{color:var(--cyan);text-shadow:0 0 14px rgba(25,227,255,.6)}
.pd-hud .h:nth-child(2) .n{color:var(--pink);text-shadow:0 0 14px rgba(255,61,176,.6)}
.pd-hud .h:nth-child(3) .n{color:var(--gold);text-shadow:0 0 14px rgba(255,210,59,.6)}
.pd-hud .l{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-top:5px}
/* график активности: бары над базовой линией, подписи отдельным рядом под ней */
.pd-chart{display:flex;align-items:flex-end;gap:3px;height:88px;padding:4px 2px 5px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.pd-chart .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.pd-chart .b{width:100%;max-width:22px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#3ae6ff,#1577d4);
  box-shadow:0 0 10px -3px var(--cyan)}
.pd-chart .z{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.18);margin-bottom:-2px}
.pd-chart .c.today .b{background:linear-gradient(180deg,#ffe57a,#ffb02e);box-shadow:0 0 12px -3px var(--gold)}
.pd-chart .c.today .z{background:rgba(255,210,59,.55)}
.pd-chart-x{display:flex;gap:3px;padding:5px 2px 0}
.pd-chart-x .d{flex:1;min-width:0;text-align:center;font-size:8.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:visible}
.pd-chart-x .d:first-child{text-align:left}
.pd-chart-x .d:last-child{text-align:right}
.pd-chart-x .d.today{color:var(--gold)}
/* разбивка по модулям */
.pd-mrow{display:flex;align-items:center;gap:9px;padding:7px 2px}
.pd-mrow .ic{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:grid;place-items:center;color:var(--mc,#19e3ff);
  background:rgba(255,255,255,.06);border:1px solid var(--mc,rgba(255,255,255,.2));box-shadow:0 0 10px -4px var(--mc,transparent)}
.pd-mrow .ic svg{width:17px;height:17px}.pd-mrow .ic img{width:20px;height:20px;border-radius:5px}
.pd-mrow .mn{flex:0 0 116px;font-size:11.5px;font-weight:700;color:#dbe6ff;line-height:1.25}
.pd-mrow .bar{flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.pd-mrow .bar i{display:block;height:100%;border-radius:99px;background:var(--mc);box-shadow:0 0 8px -2px var(--mc)}
.pd-mrow .ct{flex:0 0 26px;text-align:right;font-family:var(--font-display);font-size:13px;color:#fff}
/* сводные карточки модулей */
.pd-mcard{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:11px 12px;margin-bottom:8px;color:var(--ink);transition:border-color var(--dur-fast), transform .1s}
.pd-mcard:active{transform:scale(.985)}
.pd-mcard .ic{width:42px;height:42px;border-radius:13px;flex:0 0 42px;display:grid;place-items:center;color:var(--mc,#19e3ff);
  background:rgba(255,255,255,.05);border:1px solid var(--mc);box-shadow:0 0 14px -5px var(--mc)}
.pd-mcard .ic svg{width:24px;height:24px}.pd-mcard .ic img{width:26px;height:26px;border-radius:7px}
.pd-mcard .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pd-mcard .t1{font-weight:800;font-size:13px;color:#fff}
.pd-mcard .t2{font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.4}
.pd-mcard .chev{color:var(--muted);flex:0 0 auto}
/* заметки-инсайты */
.pd-ins{display:flex;gap:10px;align-items:flex-start;padding:9px 2px}
.pd-ins+.pd-ins{border-top:1px dashed rgba(255,255,255,.1)}
.pd-ins .e{font-size:17px;flex:0 0 auto;margin-top:-1px}
.pd-ins .x{font-size:12.5px;font-weight:600;color:#dbe6ff;line-height:1.45}
/* виш-лист (read-only) */
.pd-robanner{display:flex;gap:9px;align-items:center;background:rgba(25,227,255,.07);border:1px solid rgba(25,227,255,.3);
  border-radius:13px;padding:9px 12px;margin:4px 0 11px;font-size:11.5px;font-weight:700;color:#bdeeff;line-height:1.4}
.pd-wseg{display:flex;gap:6px;margin-bottom:12px}
.pd-wseg button{flex:1;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);color:#cfe0ff;font-family:inherit;
  font-weight:800;font-size:12px;padding:8px 6px;border-radius:12px;cursor:pointer;transition:var(--dur-fast)}
.pd-wseg button .c{display:inline-block;margin-left:5px;font-family:var(--font-display);font-weight:400}
.pd-wseg button.on{color:#fff;border-color:var(--sc);background:rgba(255,255,255,.07);box-shadow:0 0 16px -7px var(--sc);text-shadow:0 0 10px var(--sc)}
.pd-wcard{display:flex;gap:11px;width:100%;text-align:left;font-family:inherit;cursor:pointer;color:var(--ink);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--sc);
  border-radius:16px;padding:11px;margin-bottom:9px;transition:border-color var(--dur-fast), transform .1s}
.pd-wcard:active{transform:scale(.985)}
.pd-wcard .ph,.pd-dhead .ph{width:58px;height:58px;border-radius:13px;flex:0 0 58px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);
  background-size:cover;background-position:center}
.pd-wcard .ph.emo,.pd-dhead .ph.emo{font-size:30px}
.pd-wcard .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pd-wcard .t1{font-weight:800;font-size:13.5px;color:#fff;display:flex;align-items:center;gap:6px}
.pd-wcard .t1 .fav{color:var(--gold);text-shadow:0 0 8px rgba(255,210,59,.8);font-size:12px}
.pd-wcard .nt{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.pd-chip{font-size:10px;font-weight:800;color:#cfe0ff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.pd-chip.buy{color:#b8ffe9;border-color:rgba(43,240,192,.45);background:rgba(43,240,192,.1)}
.pd-chip.cm{color:#e9d4ff;border-color:rgba(166,75,255,.45);background:rgba(166,75,255,.12)}
.pd-chip.lnk{color:#bdeeff;border-color:rgba(25,227,255,.4);background:rgba(25,227,255,.08)}
/* журнал */
.pd-fchips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.pd-fchips::-webkit-scrollbar{display:none}
.pd-fchips button{flex:0 0 auto;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);
  color:#cfe0ff;font-family:inherit;font-weight:800;font-size:11.5px;padding:6px 11px;border-radius:999px;cursor:pointer;transition:var(--dur-fast)}
.pd-fchips button .dot{width:8px;height:8px;border-radius:50%;background:var(--mc);box-shadow:0 0 6px var(--mc)}
.pd-fchips button.on{color:#fff;border-color:var(--mc,#3df0c0);background:rgba(255,255,255,.08)}
.pd-jcount{font-size:11.5px;color:var(--muted);font-weight:700;margin:2px 4px 10px}
.pd-dayhdr{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#9fb0d6;margin:13px 4px 7px;
  display:flex;align-items:center;gap:8px}
.pd-dayhdr::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.08)}
.pd-ev{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;font-family:inherit;color:var(--ink);
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:9px 11px;margin-bottom:6px}
button.pd-ev{cursor:pointer;transition:border-color var(--dur-fast)} button.pd-ev:active{border-color:var(--mc)}
.pd-ev .ic{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:grid;place-items:center;color:var(--mc,#19e3ff);
  background:rgba(255,255,255,.05);border:1px solid var(--mc);box-shadow:0 0 9px -4px var(--mc)}
.pd-ev .ic svg{width:16px;height:16px}.pd-ev .ic img{width:18px;height:18px;border-radius:5px}
.pd-ev .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pd-ev .t1{font-size:12.5px;font-weight:700;color:#e8f0ff;line-height:1.4}
.pd-ev .t2{font-size:10.5px;font-weight:700;color:var(--muted)}
.pd-ev .tm{flex:0 0 auto;font-family:var(--font-display);font-size:11px;color:var(--muted);margin-top:2px}
/* деталь желания (в общем .sheet) */
.pd-dhead{display:flex;gap:13px;align-items:center;margin-bottom:4px}
.pd-dhead .ph{width:74px;height:74px;border-radius:17px;flex:0 0 74px;border-color:var(--sc)}
.pd-dhead .ph.emo{font-size:38px}
.pd-pill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#04212b;
  background:var(--sc,#2bf0c0);padding:3px 9px;border-radius:999px}
.pd-dnote{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:10px 12px;
  font-size:12.5px;font-weight:600;color:#dbe6ff;line-height:1.5;margin-top:13px}
.pd-dnote b{display:block;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pd-dlink{display:inline-flex;align-items:center;gap:7px;margin-top:11px;font-size:12.5px;font-weight:800;color:var(--cyan);text-decoration:none}
.pd-dcnt{display:flex;gap:8px;margin-top:14px}
.pd-dcnt .h{flex:1;text-align:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:9px 4px;display:flex;flex-direction:column;gap:3px}
.pd-dcnt .n{font-family:var(--font-display);font-size:17px;color:#fff}
.pd-dcnt .l{font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.pd-tl{margin-top:6px}
.pd-tl .row{display:flex;gap:10px;align-items:flex-start;padding:7px 2px}
.pd-tl .dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:4px;background:var(--tc,#fff);box-shadow:0 0 8px var(--tc,transparent)}
.pd-tl .x{flex:1;font-size:12.5px;font-weight:700;color:#e8f0ff}
.pd-tl .d{font-size:11px;font-weight:700;color:var(--muted)}
.pd-ronote{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:10px;font-size:10.5px;font-weight:700;color:var(--muted)}
/* таббар родителя (вместо HUD). Элемент #pdTabs живёт в <body> (index.html), НЕ в #parent:
   заполненная анимация .view.active (transform) делает секцию containing block в Chrome,
   и fixed внутри неё позиционировался от низа ДЛИННОГО списка, а не экрана. Виден только
   на родительском виде. */
/* старый родительский таббар (#pdTabs) скрыт — его заменило ЕДИНОЕ нижнее меню (.rt-nav),
   которое теперь видно и на родителе (ПЛАН-нижнее-меню.md Ф3). parent.js ещё рендерит в #pdTabs,
   но он невидим; вкладки дашборда переключает shell.navTo → RT.Parent.setTab. */
.pd-tabbar{display:none}
.pd-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:14;max-width:480px;margin:0 auto;gap:4px;
  padding:8px 14px calc(10px + var(--safe-bottom));
  background:var(--tabbar-grad);border-top:1px solid rgba(255,255,255,.09);backdrop-filter:blur(8px)}
.pd-tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:800;letter-spacing:.3px;color:var(--muted);padding:6px 4px;border-radius:12px;transition:var(--dur-fast)}
.pd-tabbar button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pd-tabbar button.on{color:var(--cyan);text-shadow:0 0 10px rgba(25,227,255,.7)}
.pd-tabbar button.on svg{filter:drop-shadow(0 0 5px rgba(25,227,255,.8))}
/* экран приложения (контент ребёнка) */
.pd-mhead .mic{width:40px;height:40px;border-radius:12px;flex:0 0 40px;display:grid;place-items:center;color:var(--mc,#19e3ff);
  background:rgba(255,255,255,.05);border:1px solid var(--mc,rgba(255,255,255,.2));box-shadow:0 0 12px -4px var(--mc,transparent)}
.pd-mhead .mic svg{width:22px;height:22px}.pd-mhead .mic img{width:24px;height:24px;border-radius:6px}
.pd-mhead .mttl{flex:1;min-width:0;font-family:var(--font-display);font-size:17px;color:#fff;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-crow{display:flex;gap:11px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:13px;padding:10px 12px;margin-bottom:7px}
.pd-crow .ci{flex:0 0 auto;min-width:26px;text-align:center;font-style:normal}
.pd-crow .ci .gold{color:var(--gold);text-shadow:0 0 8px rgba(255,210,59,.7);font-size:13px;letter-spacing:1px;white-space:nowrap}
.pd-crow .ci .emo{font-size:20px}
.pd-crow .ci .okc{color:#7df0c8}.pd-crow .ci .badc{color:#ffb3c0}.pd-crow .ci .dimc{color:#9fb0d6}
.pd-crow .cx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pd-crow .c1{font-size:13px;font-weight:700;color:#eef4ff;line-height:1.35;overflow-wrap:anywhere}
.pd-crow .c2{font-size:11px;font-weight:700;color:var(--muted)}
.pd-crow .ct{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--muted);margin-top:2px;white-space:nowrap}
.pd-quote{display:block;font-size:11.5px;font-weight:600;color:#cdd9f2;line-height:1.4;overflow-wrap:anywhere}
.pd-dim{font-size:11px;color:#6f80a6;font-weight:600}
.pd-cphoto{display:block;width:44px;height:44px;border-radius:10px;background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.16);margin-top:2px}
.pd-openj,.pd-morebtn{margin-top:10px}

/* ===== мульти-аккаунты: строки переключения на lock-экране и в настройках (2026-06-07) ===== */
.acct-row.acct-dev{display:flex;align-items:center;gap:8px;padding:0}
.acct-go{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:none;border:none;color:inherit;font:inherit;font-weight:700;cursor:pointer;
  padding:13px 14px;text-align:left;border-radius:inherit}
.acct-go:active{transform:scale(.99)}
.acct-x{flex:0 0 auto;width:34px;height:34px;margin-right:8px;border:1px solid rgba(255,77,109,.45);
  border-radius:10px;background:rgba(255,77,109,.12);color:#ffb3c0;font-weight:800;cursor:pointer}

/* ===== лайтбокс: полноэкранный просмотр фото желания (родительский дашборд, 2026-06-07) ===== */
.pd-lightbox{position:fixed;inset:0;z-index:60;background:rgba(3,3,12,.93);display:flex;align-items:center;justify-content:center;padding:18px;cursor:zoom-out}
.pd-lightbox img{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 0 60px rgba(25,227,255,.25)}
.pd-dhead .ph[data-full]{cursor:zoom-in}

/* ===== скрытый реордер (long-press → jiggle, 2026-06-07): плитки дома + карточки дашборда =====
   .jgl-zone — контейнер реордера (ставит makeJiggle): выделение текста/лупа iOS выключены
   ПОСТОЯННО, иначе long-press успевает начать выделение до входа в режим;
   .jgl-on — элемент в режиме перестановки (дрожит, скролл с него выключен);
   .jgl-src — полупрозрачный «слот» (клон), двигается по сетке вместо src;
   .jgl-hold — сам src во время драга: ВНЕ потока, но В DOM и НЕ display:none — iOS убивает
   поток pointer-событий, если цель тача переместить/спрятать (фикс «прилипшего» призрака);
   .jgl-ghost — копия под пальцем: transition заглушен (наследовался transform .14s от .tile —
   «резинка»), движется только transform translate3d из rAF-цикла;
   .jgl-done — плавающая ✓ для выхода. Ghost под тостом (50), чтобы подсказку было видно. */
.jgl-zone,.jgl-zone *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@keyframes jglShake{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
.jgl-on{animation:jglShake .34s ease-in-out infinite;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.jgl-on:nth-child(2n){animation-duration:.30s;animation-direction:reverse}
.jgl-src{opacity:.28;animation:none;transition:none}
.jgl-hold{position:fixed !important;left:-9999px !important;top:0 !important;
  width:10px !important;height:10px !important;visibility:hidden !important;
  pointer-events:none !important;animation:none !important;transition:none !important}
.jgl-ghost{position:fixed;z-index:45;margin:0;pointer-events:none;opacity:.95;will-change:transform;
  transition:none !important;animation:none !important;
  box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 36px -6px var(--c,#19e3ff)}
.jgl-done{position:fixed;left:50%;bottom:var(--toast-bottom);transform:translateX(-50%);
  z-index:46;border:0;border-radius:999px;padding:13px 24px;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:15px;color:#06121f;
  background:linear-gradient(135deg,#19e3ff,#38e8a0);box-shadow:0 10px 30px rgba(0,0,0,.55)}
.jgl-done:active{transform:translateX(-50%) scale(.96)}
@media (prefers-reduced-motion:reduce){ .jgl-on{animation:none} }

/* ---------- скрытие плиток (глаз в режиме перестановки, миграция 022) ----------
   .jgl-eye — бейдж на каждой активной плитке (главный экран) и карточке (дашборд
   родителя): вне режима невидим (display:none), в режиме (.jgl на контейнере) —
   кружок с глазом; перечёркнутый глаз = «скрыть», открытый = «показать».
   .hid — скрытая плитка/карточка: вне режима не существует на экране, в режиме
   видна приглушённой в секции «Скрытые» (.hidsep); в реордере не участвует
   (items :not(.hid)), поэтому не дрожит и не таскается. */
.jgl-eye{display:none;position:absolute;z-index:3;width:34px;height:34px;border-radius:50%;
  place-items:center;color:#e6edff;background:rgba(7,11,22,.78);
  border:1.5px solid rgba(255,255,255,.3);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.jgl-eye svg{width:19px;height:19px}
.jgl .jgl-eye{display:grid}
.tile .jgl-eye{top:7px;right:7px}
.pd-mcard{position:relative}
.pd-mcard .jgl-eye{top:50%;right:9px;transform:translateY(-50%)}
.jgl .pd-mcard .chev{opacity:0} /* глаз встаёт на место шеврона, чтобы не наслаивались */
.tile.hid,.pd-mcard.hid{display:none}
.jgl .tile.hid{display:flex;opacity:.55;filter:saturate(.35)}
.jgl .pd-mcard.hid{display:flex;opacity:.55;filter:saturate(.35)}
.apps-sep.hidsep,.pd-sect.hidsep{display:none}
.jgl .apps-sep.hidsep{display:flex}
.jgl .pd-sect.hidsep{display:block}

/* ---------- тикеты «Сообщить о проблеме» (Настройки → Помощь + кнопка под фото-кнопками модулей) ---------- */
.tk-report{display:block;width:100%;grid-column:1/-1;margin:10px 0 2px;padding:11px 12px;border-radius:12px;
  border:1.5px dashed rgba(255,210,59,.45);background:rgba(255,210,59,.07);color:#ffe08a;
  font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;text-align:center}
.tk-report:active{transform:scale(.98)}
.tk-text{resize:vertical;min-height:84px;line-height:1.45}
.tk-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--pink,#ff3db0);box-shadow:0 0 8px rgba(255,61,176,.8)}
.tk-thread{max-height:42vh;overflow:auto;display:flex;flex-direction:column;gap:8px;margin:6px 0 4px;padding:2px}
.tk-msg{max-width:88%;align-self:flex-end;background:rgba(25,227,255,.10);border:1px solid rgba(25,227,255,.35);
  border-radius:13px 13px 4px 13px;padding:8px 11px}
.tk-msg.adm{align-self:flex-start;background:rgba(166,75,255,.12);border-color:rgba(166,75,255,.4);border-radius:13px 13px 13px 4px}
.tk-msg .who{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#93a6cf;margin-bottom:3px}
.tk-msg .body{font-size:13.5px;font-weight:600;color:#eaf2ff;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.tk-msg .when{font-size:9.5px;font-weight:700;color:#93a6cf;margin-top:3px;text-align:right}

/* ===== выбор темы в Настройках (секция «Оформление», 2026-06-07) =====
   Карточки строит shell.renderSettings из RTTheme.list(); превью — инлайн-фон из реестра. */
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.theme-card{position:relative;border-radius:16px;padding:11px;cursor:pointer;text-align:left;font-family:inherit;
  border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--ink);
  transition:transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast)}
.theme-card:active{transform:scale(.97)}
.theme-card .prev{height:54px;border-radius:11px;margin-bottom:8px;border:1px solid rgba(255,255,255,.14);
  position:relative;overflow:hidden}
.theme-card .prev i{position:absolute;width:11px;height:11px;border-radius:50%;box-shadow:0 0 8px currentColor}
.theme-card .nm{font-weight:800;font-size:13.5px;color:#fff}
.theme-card .mark{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;display:none;
  place-items:center;font-size:13px;font-weight:800;color:#04212b;background:linear-gradient(180deg,#3df0c0,#19c7e0)}
.theme-card.on{border-color:var(--cyan);box-shadow:0 0 18px -6px var(--cyan)}
.theme-card.on .mark{display:grid}

/* HUD, спрятанный модулем на время полноэкранной сцены: shell.hud({hidden:true}) (игра в змейке) */
.hud.hud-off{display:none}

/* ===================== ОПОВЕЩЕНИЯ (ядро: core/notify.js + api/notify.php, ГАЙД-оповещения.md) =====================
   Колокольчик фиксирован вверху справа на ВСЕХ экранах (решение Джеффа 2026-06-07);
   на главном сдвинут влево от ⚙; на lock и в демо его нет; модуль, спрятавший HUD
   (hud({hidden:true})), прячет и его (.ntf-hide ставит shell через RT.Notify.hide). */
/* хром колокольчика = хром ⚙ (один кластер, гармонизация v.65). С v.67 absolute, как ⚙:
   прибит к шапке страницы, уезжает со скроллом, НЕ висит над контентом (баннеры
   .ntf-banners остаются fixed — всплывашки должны быть видны при любом скролле). */
.ntf-bell{position:absolute;top:calc(30px + var(--safe-top));right:6px;z-index:15;width:42px;height:42px;
  border-radius:13px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.14);
  box-shadow:0 0 18px -7px var(--cyan);color:var(--chrome-ink);
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ntf-bell svg{width:21px;height:21px}
.ntf-bell:active{transform:scale(.93)}
/* там, где видна ⚙ (главный + дашборд), колокольчик встаёт слева от неё */
body[data-view="home"] .ntf-bell,body[data-view="parent"] .ntf-bell{right:56px}
body[data-view="lock"] .ntf-bell,body.demo .ntf-bell,.ntf-bell.ntf-hide{display:none}
/* 🔔 сверху больше не показываем: оповещения — вкладка нижнего меню (бейдж там же), верх чистый.
   v.14: добавлен notifications — раньше колокольчик оставался виден ИМЕННО на вкладке оповещений
   и висел обрезанным поверх «Прочитать все» (баг шапки экрана оповещений). */
body[data-view="home"] .ntf-bell,body[data-view="module"] .ntf-bell,body[data-view="settings"] .ntf-bell,body[data-view="notifications"] .ntf-bell,body[data-view="parent"] .ntf-bell{display:none}
body[data-view="parent"] .pd-top{padding-right:var(--gutter);padding-top:calc(30px + var(--safe-top))} /* 🔔/⚙ ушли в нижнее меню — правый резерв под кластер больше не нужен (Ф3) */
/* то же для дашбордной шапки .pdv-top (её padding-right:100 инжектит parent.js): выше специфичность (#parent) перебивает инлайн */
#parent .pdv-top{padding-right:var(--gutter)}
body[data-view="settings"] .set-top{padding-right:48px}
.pd-kid .st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* «👁 Только просмотр · активность…» не ломает строку */
.ntf-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;border-radius:10px;display:none;
  place-items:center;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:0 5px;
  border:2px solid rgba(var(--panel-rgb),.9);box-shadow:0 0 12px -3px var(--red)}
.ntf-bell.has .ntf-badge{display:grid}
/* всплывающие баннеры (iOS-стиль): стек сверху по центру, поверх всего */
.ntf-banners{position:fixed;top:calc(10px + var(--safe-top));left:50%;transform:translateX(-50%);
  z-index:70;width:min(480px,94vw);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.ntf-banner{pointer-events:auto;display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:18px;
  cursor:pointer;background:rgba(var(--panel-rgb),.97);border:1.5px solid var(--line-strong);
  box-shadow:0 12px 34px rgba(0,0,0,.5);opacity:0;transform:translateY(-80px);transition:transform .3s, opacity .3s}
.ntf-banner.in{opacity:1;transform:none}
.ntf-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:18px;
  color:var(--c,var(--cyan));background:color-mix(in srgb, var(--c,var(--cyan)) 20%, transparent)}
.ntf-ic svg{width:20px;height:20px}
.ntf-ic img{width:22px;height:22px}
.ntf-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.ntf-tx .app{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.ntf-tx .msg{font-weight:700;font-size:14px;line-height:1.3;color:var(--ink);overflow-wrap:break-word}
/* центр оповещений (шторка) */
.ntf-list{max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top:6px}
.ntf-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 11px;margin:0 0 8px;
  border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  color:var(--ink);cursor:pointer;font:inherit}
.ntf-row .ntf-act{flex:none;min-height:38px;padding:8px 11px;font-size:12px;border-radius:12px}
.ntf-row .when{font-size:11.5px;color:var(--muted-2);margin-top:2px}
.ntf-row.unread{background:color-mix(in srgb, var(--c,var(--cyan)) 9%, transparent);
  border-color:color-mix(in srgb, var(--c,var(--cyan)) 30%, transparent)}
.ntf-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c,var(--cyan));box-shadow:0 0 8px var(--c,var(--cyan))}
.ntf-empty{text-align:center;color:var(--muted);font-weight:700;padding:18px 0}
/* «Прочитать все»: во всю ширину ТОЛЬКО в шторке-центре (.sheet). На вкладке оповещений та же
   кнопка живёт в шапке .set-top рядом с заголовком: width:100% при flex:none распирала страницу
   за правый край экрана (баг шапки, v.14) — там она сжимается по содержимому. */
.sheet .ntf-readall{width:100%;margin:2px 0 6px}
/* строка Web Push в центре: текст + системный тумблер (.toggle из магазина) */
.ntf-push{display:flex;align-items:center;gap:10px;padding:10px 11px;margin-top:8px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.ntf-push .lbl{flex:1;font-weight:700;font-size:13.5px;color:var(--ink-2)}
.ntf-push.hint .lbl{font-weight:600;color:var(--muted)}
/* бейдж непрочитанного у ДРУГИХ аккаунтов устройства (настройки и lock) */
.ntf-acct{margin-left:8px;min-width:19px;height:19px;border-radius:10px;display:inline-grid;place-items:center;
  vertical-align:middle;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:0 5px}