/* ═══════════════════════════════════════════════════════════════════════════════
   👶 ТАБЛОТО „МАЛКИЯТ ТИ ГОЛЯМ СВЯТ“ · стаята „Моето бебе“ (референция 8, 22.09.2026)
   Вид на блока от js/pl-bebe.js — ПРЕДМЕТИ върху сцената img/scene/bebe.webp (тя е фонът
   на панела, premium.css „🎬 СЦЕНИТЕ“): визитка-хапче; ДЪРВЕН рафт „Днес“ — дъбова арка
   със звездички и окачена табелка, три пастелни купола с кремав ръб и блик, дъска с
   колчета и месингови халки, кръгъл „+“ под всеки купол; филцова карта с броячите
   („иконка вляво + число“) и „Днешни записи“; два дървени шкафа с арка („Растеж“,
   „Първи умения“) и розовият гел „+ Нов запис“.
   МАТЕРИАЛИТЕ са общите от css/pl-ui.css: картата = .pl-felt (филц с пунктирен шев),
   редовете и изборът = .pl-soft (кремав филц), „+ Нов запис“ = .pl-gel (розов гел).
   Тук е само формата и дървото. Числата са на Nunito (Georgia: старинни цифри, 0 = „о“).
   Контраст ≥ 4.5:1 за дребния текст (ИЗЧИСЛЕН с dom_a11y.js), докосване ≥ 44px.
   Нощта (21:00–7:00): нощно синьо, дървото става тъмносиньо със златна жилка, иконките на бял кръг.
   ПЪТ НАЗАД: махни <link href="css/pl-bebe.css">; предишната версия е в
   scratchpad/ag2_bebe_css_predi.bak.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 🪤 #roRoom е flex контейнер с фиксирана височина — без flex:none блокът се свива */
.pl-bb {
  flex: none; position: relative;
  margin: 0 0 8px;
  color: var(--pl-ink, #3b3f5c);
  font-family: Nunito, 'Nunito-fallback', system-ui, sans-serif;
  /* дъбът (без url — градиентите в променлива нямат капана с относителния път) */
  --bb-wood: repeating-linear-gradient(96deg, rgba(150, 98, 48, .07) 0 1.5px, transparent 1.5px 7px, rgba(255, 255, 255, .14) 7px 8px, transparent 8px 13px),
             linear-gradient(180deg, #f6e3c6 0, #ecd0a8 55%, #e2be8e 100%);
  --bb-rim: inset 0 0 0 1.5px #d4a872, inset 0 0 0 11px #f8ead4, inset 0 0 0 12.5px #dcb27f;
  --bb-brass: radial-gradient(circle at 35% 30%, #fff5d1 0, #e8bf62 42%, #b3862f 78%, #8a6320 100%);
}
/* 🪤 22.09 (снимка ag_bebe_d2): беше `.pl-bb button { font: inherit }` — (0,1,1) бие (0,1,0) на
   .pl-bb-cta и „Нов запис“ излизаше тънък, без серифа. :where() смъква теглото до (0,0,1). */
:where(.pl-bb) button { font: inherit; -webkit-tap-highlight-color: transparent; }
.pl-bb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-bb :focus-visible { outline: 3px solid #e56d99; outline-offset: 3px; }
.pl-bb-d { font-family: Nunito, 'Nunito-fallback', system-ui, sans-serif; font-weight: 800; font-variant-numeric: lining-nums; }

/* ── визитката: хапче, което стъпва върху долния ръб на банера ── */
.pl-bb-id {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 12px;
  max-width: calc(100% - 20px); min-height: 66px;
  /* 29.09: материалът е .pl-felt (css/pl-ui.css) — филц, ръб, шев и сянка идват ОТТАМ с !important.
     Тук остава само разстоянието: 12px отстрани, за да не стъпи аватарът върху пунктирания шев
     (той е inset 6px). Матовото стъкло (backdrop-filter) си отиде — във филцов свят стъкло няма. */
  margin: 12px 0 0 10px; padding: 9px 18px 9px 9px;
  color: var(--pl-navy, #1d2a5c); text-align: left; cursor: pointer;
  transition: transform .2s ease;
}
.pl-rhero + .pl-bb > .pl-bb-id { margin-top: -30px; }
.pl-bb-id:active { transform: scale(.97); }
.pl-bb-av {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  background-color: var(--pl-pink-soft, #fde6ef); background-repeat: no-repeat; background-size: 400% 400%; background-blend-mode: multiply;
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1.5px #f1d9c4, 0 3px 8px rgba(170, 118, 118, .22);
}
.pl-bb-av.is-photo { background-size: cover; background-blend-mode: normal; }   /* снимката от Фото-лентата */
.pl-bb-idt { min-width: 0; }
.pl-bb-idt b { display: block; font-family: var(--pl-serif, Georgia, serif); font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--pl-navy, #1d2a5c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bb-idt small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--pl-ink-soft, #6a6682); }
.pl-bb-pen { flex: none; width: 20px; height: 20px; color: var(--pl-navy, #1d2a5c); margin-left: 2px; }

/* ══ рафтът „Днес“ ══ */
.pl-bb-shelf { position: relative; margin: 16px 0 0; padding: 46px 0 0; }
.pl-bb-shelf::before {         /* дъбовата арка зад средния купол — дърво с ръб и вътрешна лайсна */
  content: ''; position: absolute; z-index: 0; left: 19%; right: 19%; top: 6px; height: 168px;
  border-radius: 999px 999px 0 0;
  background: var(--bb-wood);
  box-shadow: var(--bb-rim), inset 0 16px 22px rgba(150, 98, 48, .10), 0 8px 18px rgba(150, 105, 60, .18);
}
.pl-bb-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 29.09 · звездичките по арката бяха ★ от ШРИФТА (мерено: textContent „★“, 11–22px).
   Сега са РИСУВАНИ звезди, но с ИСТИНСКАТА филцова шарка: --ui-felt (css/pl-ui.css, то е
   url(../img/art/felt.webp) — пише се в CSS файл, значи пътят е верен) умножена върху златото.
   🪤 Защо не плюшеният лист ico-b[2,1]: .pl-bb-deco е position:absolute + z-index:1 → СОБСТВЕН
   стекинг контекст. mix-blend-mode:multiply вътре няма какво да умножи и белият фон на листа
   остава бял квадрат — видяно на wf3_bebe_sled1.png. Рисуваната е чиста и на 11px.
   Нито една няма текст — pl-plyush.js няма какво да подменя в тях. */
.pl-bb-st {
  position: absolute; display: block; width: 15px; height: 15px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 62% 35%, 99% 35%, 69% 57%, 80% 93%, 50% 71%, 20% 93%, 31% 57%, 1% 35%, 38% 35%);
  background-color: #eeba52;
  background-image: var(--ui-felt, none), radial-gradient(circle at 42% 28%, #ffeaa6 0, #f0c25a 44%, #d59a2c 78%, #ab7318 100%);
  background-size: 70px 70px, 100% 100%; background-blend-mode: multiply, normal;
  filter: drop-shadow(0 1px .5px rgba(120, 80, 20, .55));
}
.pl-bb-st.s0 { left: 50%; top: 7px; width: 27px; height: 27px; }
.pl-bb-st.s1 { left: calc(50% - 81px); top: 48px; }
.pl-bb-st.s2 { left: calc(50% + 81px); top: 48px; }
.pl-bb-st.s3 { left: calc(50% - (100% - 72px) / 6 - 10px); top: 72px; width: 11px; height: 11px; }
.pl-bb-st.s4 { left: calc(50% + (100% - 72px) / 6 + 10px); top: 72px; width: 11px; height: 11px; }
.pl-bb-plaque {                /* окачената табелка: кремава, с извит горен ръб и две месингови халки */
  position: absolute; z-index: 3; top: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 7px 18px 7px;
  border-radius: 40px 40px 12px 12px / 22px 22px 12px 12px;
  background: linear-gradient(180deg, #fffcf6 0, #f7ead6 100%);
  box-shadow: inset 0 0 0 1.5px #e3c59b, inset 0 2px 0 #fff, 0 4px 10px rgba(150, 110, 70, .24);
  font-family: var(--pl-serif, Georgia, serif); font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: -.2px;
  color: var(--pl-navy, #1d2a5c); white-space: nowrap;
}
.pl-bb-plaque::before, .pl-bb-plaque::after {
  content: ''; position: absolute; top: -9px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 2.4px, #9a6d22 2.8px, #f2cd72 3.8px, #a8791f 5px, transparent 5.5px);
}
.pl-bb-plaque::before { left: 18%; }
.pl-bb-plaque::after { right: 18%; }
/* табелката „Днес“: двете ★ от шрифта → същите рисувани филцови звездички (29.09) */
.pl-bb-plaque i {
  flex: none; display: block; width: 13px; height: 13px; font-style: normal;
  clip-path: polygon(50% 0, 62% 35%, 99% 35%, 69% 57%, 80% 93%, 50% 71%, 20% 93%, 31% 57%, 1% 35%, 38% 35%);
  background-color: #e3b04a;
  background-image: var(--ui-felt, none), radial-gradient(circle at 42% 30%, #ffe9a8 0, #e8b64b 44%, #c08822 100%);
  background-size: 60px 60px, 100% 100%; background-blend-mode: multiply, normal;
}
/* 29.09 · стрелките „›“ бяха знак от шрифта — тънък и блед. Сега са РИСУВАНИ: две чертички
   под ъгъл, в мастилото на реда, еднакви навсякъде (редове, шкафове, „Виж всички“). */
/* 🪤 29.09 · първият опит бяха две чертички с transform-origin:left — двете тръгваха от една
   и съща точка и се КРЪСТОСВАХА: на снимка wf3_bebe_sled_pln.png излизаше „×“, не „›“.
   Сега е завъртян ъгъл (десен + долен ръб), който не може да се кръстоса. */
.pl-bb-ch {
  flex: none; display: block; width: 7px; height: 7px; font-style: normal;
  border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor;
  border-radius: 0 0 2.5px 0;
  transform: rotate(-45deg);
}
.pl-bb-arches {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px;
  padding: 0 16px;
}
.pl-bb-arches::after {         /* дъската: горна плоскост + преден ръб; „+“ висят от ръба ѝ */
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 22px; height: 26px;
  border-radius: 9px 9px 7px 7px;
  background:
    repeating-linear-gradient(94deg, rgba(150, 98, 48, .07) 0 1.5px, transparent 1.5px 9px),
    linear-gradient(180deg, #fbeedb 0, #f2dab8 32%, #e1bc8c 36%, #d5ab76 100%);
  box-shadow: 0 9px 14px rgba(150, 105, 60, .26), inset 0 1.5px 0 rgba(255, 255, 255, .75), inset 0 -2px 0 rgba(150, 98, 48, .28);
}
.pl-bb-sp {                    /* дървено колче между куполите (с топче отгоре) */
  position: absolute; z-index: -1; bottom: 45px; width: 8px; height: 24px; transform: translateX(-50%);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, #d8ae78 0, #f6e3c6 45%, #d2a570 100%);
}
.pl-bb-sp::before { content: ''; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbefdc 0, #e3c08f 55%, #c9995f 100%); }
.pl-bb-sp.p1 { left: calc(16px + (100% - 72px) / 3 + 10px); }
.pl-bb-sp.p2 { left: calc(100% - 16px - (100% - 72px) / 3 - 10px); }
.pl-bb-ring {                  /* месингови халки в краищата на дъската */
  position: absolute; z-index: 0; bottom: 44px; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 3.4px, #8a6320 3.9px, #f2cd72 5px, #b3862f 6.6px, rgba(120, 80, 20, .0) 7.2px);
  filter: drop-shadow(0 1.5px 1px rgba(110, 76, 52, .3));
}
.pl-bb-ring.r1 { left: 3px; }
.pl-bb-ring.r2 { right: 3px; }

.pl-bb-a {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .2s ease;
}
.pl-bb-a:active { transform: scale(.96); }
.pl-bb-dome {                  /* пастелният купол: кремав ръб, вдлъбнатина, блик отгоре */
  position: relative; display: grid; place-items: center;
  width: 100%; height: 118px;
  border-radius: 999px 999px 10px 10px;
  box-shadow:
    inset 0 0 0 5px #fffaf2, inset 0 0 0 6.5px rgba(214, 178, 140, .75),
    inset 0 16px 18px rgba(255, 255, 255, .5), inset 0 -12px 16px rgba(110, 76, 52, .10),
    0 0 0 1.5px rgba(206, 168, 128, .55), 0 7px 14px rgba(150, 105, 60, .20);
}
.pl-bb-dome::before {          /* гел-бликът */
  content: ''; position: absolute; left: 18%; top: 10%; width: 32%; height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
  transform: rotate(-26deg); pointer-events: none;
}
.pl-bb-a.t-feed .pl-bb-dome { background: radial-gradient(120% 90% at 50% 18%, #fff1f6 0, #f9d0e0 52%, #f0b1ca 100%); }
.pl-bb-a.t-sleep .pl-bb-dome { background: radial-gradient(120% 90% at 50% 18%, #f0f5ff 0, #cadcf8 52%, #a9c5ef 100%); }
.pl-bb-a.t-diaper .pl-bb-dome { background: radial-gradient(120% 90% at 50% 18%, #ecfbf3 0, #c6ebd8 52%, #a4dbbf 100%); }
.pl-bb-ico {
  position: relative; display: block; width: 74px; height: 74px; margin-top: -12px;
  background-repeat: no-repeat; background-size: 400% 400%; mix-blend-mode: multiply;
}
.pl-bb-lbl {
  position: relative; z-index: 1; margin-top: -22px;
  min-width: 92%; padding: 7px 6px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf8 0, #f8ecdb 100%);
  box-shadow: inset 0 0 0 1.5px #ead3b4, inset 0 1.5px 0 #fff, 0 3px 6px rgba(150, 105, 60, .22);
  font-family: var(--pl-serif, Georgia, serif); font-weight: 700; font-size: 16px; line-height: 1.1; text-align: center;
  color: var(--pl-navy, #1d2a5c); white-space: nowrap;
}
.pl-bb-plus {                  /* бяло копче с розов ръб, окачено на ръба на дъската */
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 46px; height: 46px; margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff 0, #fff8fb 55%, #fbe4ed 100%);
  box-shadow: inset 0 0 0 3px #ef9fbf, inset 0 0 0 5px #fff, 0 3px 0 #e7a0bd, 0 7px 12px rgba(201, 70, 122, .26);
}
.pl-bb-plus::before, .pl-bb-plus::after {   /* „+“ рисуван, не шрифт — еднакъв навсякъде */
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 3.5px; border-radius: 2px;
  background: #d24f82; transform: translate(-50%, -50%);
}
.pl-bb-plus::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ══ филцовата карта (материалът е .pl-felt): броячи + днешни записи ══ */
.pl-bb-card { margin: 14px 0 0; padding: 16px 14px 14px; }
.pl-bb-cnt {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 6px 0; border-radius: 20px;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 0 0 1.5px #f0dfcc, inset 0 2px 4px rgba(110, 76, 52, .06), 0 1.5px 0 #fff;
}
/* реф. 8: иконка вляво, число и дума вдясно; бутон — води до истинския запис като арката */
.pl-bb-c {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 60px; padding: 2px 2px;
  border: 0; border-radius: 16px; background: none; cursor: pointer; text-align: left; color: inherit;
}
.pl-bb-c + .pl-bb-c::before { content: ''; position: absolute; left: 0; top: 16%; bottom: 16%; width: 1px; background: #e8d6c2; }
.pl-bb-c:active { background: rgba(240, 223, 204, .45); }
.pl-bb-ci {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background-repeat: no-repeat; background-size: 400% 400%; background-blend-mode: multiply;
  box-shadow: inset 0 0 0 2.5px #fff, 0 2px 5px rgba(150, 105, 60, .2);
}
.pl-bb-c.t-feed .pl-bb-ci { background-color: #fde3ee; }
.pl-bb-c.t-sleep .pl-bb-ci { background-color: #dfeafb; }
.pl-bb-c.t-diaper .pl-bb-ci { background-color: #dcf2e6; }
.pl-bb-c > span { min-width: 0; }
.pl-bb-c b { display: block; font-family: Nunito, 'Nunito-fallback', system-ui, sans-serif; font-weight: 900; font-size: 23px; line-height: 1; color: var(--pl-navy, #1d2a5c); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.pl-bb-c small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; line-height: 1.15; color: var(--pl-ink-soft, #6a6682); white-space: nowrap; }
.pl-bb-c small.pl-bb-cx { margin-top: 1px; font-size: 12px; font-weight: 800; color: #5d5a78; font-variant-numeric: lining-nums; }
/* поканата (нула без запис): голям розов „+“ на мястото на числото и „запиши“ под него */
.pl-bb-c b.pl-bb-invb { color: #b8416f; font-weight: 800; }
.pl-bb-c small.pl-bb-inv { color: #b8416f; font-size: 12.5px; font-weight: 800; }

.pl-bb-logh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.pl-bb-logh h3 { margin: 0 0 0 4px; font-family: var(--pl-serif, Georgia, serif); font-weight: 700; font-size: 19px; letter-spacing: -.2px; color: var(--pl-navy, #1d2a5c); }
.pl-bb-all {
  min-height: 44px; padding: 0 6px 0 10px; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-weight: 800; color: var(--pl-navy, #1d2a5c);
}
/* 29.09: „Виж всички“ вече носи рисувана стрелка (.pl-bb-ch) — редът става flex, за да е до текста */
.pl-bb-all { display: inline-flex; align-items: center; gap: 5px; }
.pl-bb-log { list-style: none; margin: 0; padding: 0; }
.pl-bb-log li + li { margin-top: 7px; }
.pl-bb-row {                   /* материалът е .pl-soft; тук е само подредбата */
  display: grid; grid-template-columns: 38px 50px minmax(0, 1fr) 12px; align-items: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 6px 12px 6px 7px;
  border-radius: 16px; cursor: pointer; text-align: left;
}
.pl-bb-ri {
  width: 38px; height: 38px; border-radius: 50%;
  background-color: #fde3ee; background-repeat: no-repeat; background-size: 400% 400%; background-blend-mode: multiply;
  box-shadow: inset 0 0 0 2px #fff, 0 1.5px 4px rgba(150, 105, 60, .18);
}
.pl-bb-row[data-go="сън"] .pl-bb-ri { background-color: #dfeafb; }
.pl-bb-row[data-go="пелени"] .pl-bb-ri { background-color: #dcf2e6; }
.pl-bb-row > b { font-size: 15px; font-weight: 800; color: var(--pl-navy, #1d2a5c); font-variant-numeric: lining-nums tabular-nums; }
.pl-bb-row.is-day > b, .pl-bb-row.is-live > b { font-size: 13px; color: #b8416f; }
.pl-bb-row > span { font-size: 14.5px; font-weight: 600; color: var(--pl-ink, #3b3f5c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bb-row > span small { font-size: 12.5px; color: var(--pl-ink-soft, #6a6682); }
.pl-bb-row.is-day > span { white-space: normal; line-height: 1.25; }        /* „(3 мокри, 1 каки)“ слиза на втори ред, не се реже */
.pl-bb-row.is-day > span small { display: block; }
.pl-bb-row > em { font-style: normal; font-size: 20px; line-height: 1; color: var(--pl-ink-soft, #6a6682); }
.pl-bb-more { margin: 8px 4px 0; font-size: 12.5px; font-weight: 600; color: var(--pl-ink-soft, #6a6682); }
.pl-bb-note { margin: 8px 4px 0; font-size: 12px; font-weight: 700; color: var(--pl-ink-soft, #6a6682); text-align: center; }

.pl-bb-empty { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.pl-bb-eico {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  background-color: #fbf1d6; background-repeat: no-repeat; background-size: 400% 400%; background-blend-mode: multiply;
  box-shadow: inset 0 0 0 3px #fff, 0 2px 6px rgba(150, 105, 60, .18);
}
.pl-bb-empty p { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--pl-ink, #3b3f5c); }
.pl-bb-empty b { display: block; margin-bottom: 2px; font-family: var(--pl-serif, Georgia, serif); font-size: 18px; color: var(--pl-navy, #1d2a5c); }

/* ══ двата дървени шкафа с арка ══ */
.pl-bb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.pl-bb-t {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 9px 9px 10px; border: 0; cursor: pointer;
  border-radius: 50% 50% 20px 20px / 56px 56px 20px 20px;
  background: var(--bb-wood);
  box-shadow: inset 0 0 0 1.5px #d4a872, inset 0 0 0 5px #f8ead4, inset 0 0 0 6.5px #dcb27f, 0 10px 20px rgba(150, 105, 60, .22);
  text-align: left; transition: transform .2s ease;
}
.pl-bb-t:active { transform: scale(.97); }
.pl-bb-tsc {                   /* нишата: пастелна стена, вдлъбнатина, дървена поличка отдолу */
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  height: 108px; padding-bottom: 7px; overflow: hidden;
  border-radius: 50% 50% 10px 10px / 48px 48px 10px 10px;
  box-shadow: inset 0 12px 16px rgba(110, 76, 52, .13), inset 0 0 0 1.5px rgba(255, 255, 255, .7);
}
.pl-bb-tsc::after {
  content: ''; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 13px;
  background: linear-gradient(180deg, #f6e3c6 0, #e6c496 35%, #d5ab76 100%);
  box-shadow: 0 -2px 5px rgba(110, 76, 52, .14);
}
.pl-bb-t.t-grow .pl-bb-tsc { background: linear-gradient(180deg, #eef4fd 0, #d3e2f7 100%); }
.pl-bb-t.t-first .pl-bb-tsc { background: linear-gradient(180deg, #fff5ec 0, #fbe1d2 100%); }
.pl-bb-tbig, .pl-bb-tsm, .pl-bb-tmini { position: relative; z-index: 1; display: block; flex: none; background-repeat: no-repeat; background-size: 400% 400%; mix-blend-mode: multiply; }
.pl-bb-tbig { width: 86px; height: 86px; }
.pl-bb-tsm { width: 58px; height: 58px; margin-left: -16px; }
.pl-bb-tmini { width: 38px; height: 38px; margin-left: -10px; }
/* 🪤 22.09 (снимка ag_bebe_2b): с копчето в собствена колона „Първи умения“ се чупеше на
   два реда — копчето е наполовина извън табелката, текстът получава мястото. */
.pl-bb-tp {
  position: relative; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 10px; align-items: center; gap: 6px;
  margin-top: 8px; padding: 9px 8px 9px 16px; border-radius: 14px;
  background: linear-gradient(180deg, #fffcf6 0, #f8ecdc 100%);
  box-shadow: inset 0 0 0 1.5px #e7cda8, inset 0 2px 0 #fff, 0 2px 4px rgba(150, 105, 60, .16);
}
.pl-bb-knob { position: absolute; left: -7px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--bb-brass); box-shadow: 0 1.5px 2px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(138, 99, 32, .5); }
.pl-bb-tp b { display: block; font-family: var(--pl-serif, Georgia, serif); font-weight: 700; font-size: 15.5px; line-height: 1.15; color: var(--pl-navy, #1d2a5c); white-space: nowrap; }
.pl-bb-tp small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--pl-ink-soft, #6a6682); }
.pl-bb-tp em { font-style: normal; font-size: 20px; line-height: 1; color: var(--pl-navy, #1d2a5c); }

/* ══ „+ Нов запис“ (материалът е .pl-gel) и изборът под него ══ */
/* реф. 8: хапчето е по-тясно от картата и центрирано, с бяло кръгче „+“ отляво */
.pl-bb-cta {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: fit-content; min-width: 66%; max-width: 100%; min-height: 60px;
  margin: 16px auto 0; padding: 0 32px 0 12px;
  border-radius: 999px; cursor: pointer;
  font-family: var(--pl-serif, Georgia, serif); font-size: 21px; font-weight: 700; letter-spacing: .1px;
}
.pl-bb-cta b { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff 0, #fff5f9 60%, #fbe0ea 100%); box-shadow: 0 2px 0 rgba(120, 20, 60, .28), inset 0 -1.5px 0 rgba(200, 69, 122, .18); }
.pl-bb-cta b::before, .pl-bb-cta b::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 3.5px; border-radius: 2px; background: #c8457a; transform: translate(-50%, -50%); transition: transform .25s ease; }
.pl-bb-cta b::after { transform: translate(-50%, -50%) rotate(90deg); }
.pl-bb-cta[aria-expanded="true"] b::before { transform: translate(-50%, -50%) rotate(45deg); }
.pl-bb-cta[aria-expanded="true"] b::after { transform: translate(-50%, -50%) rotate(135deg); }
.pl-bb-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.pl-bb-menu[hidden] { display: none; }
.pl-bb-mi {                    /* материалът е .pl-soft */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 88px; padding: 8px 4px; cursor: pointer; border-radius: 18px;
  font-size: 13px; font-weight: 800; text-align: center;
}
.pl-bb-mico { display: block; width: 50px; height: 50px; border-radius: 50%; background-color: var(--pl-pink-soft, #fde6ef); background-repeat: no-repeat; background-size: 400% 400%; background-blend-mode: multiply; box-shadow: inset 0 0 0 2.5px #fff; }
.pl-bb-mi:nth-child(3n+2) .pl-bb-mico { background-color: #dfeafb; }
.pl-bb-mi:nth-child(3n) .pl-bb-mico { background-color: #dcf2e6; }

/* ═══ 🎞️ ЖИВОТЪТ (29.09) ═══════════════════════════════════════════════════════════════════
   Преди днес в целия блок нямаше НИТО ЕДНА анимация (мерено с wf3_bebe_odit.js:
   animationName === 'none' на всеки елемент). Сега има два вида:

   A · ВЛИЗАНЕ — крайни, по веднъж. Тръгват сами, защото js/pl-bebe.js пише innerHTML
       САМО при разлика: пресни елементи → анимацията им е от нулата. Тактът на 30 секунди
       не пише нищо, значи нищо не подскача под пръстите на мама.
   Б · ДИШАНЕ — безкрайни, но с изключен ток извън екрана: animation-play-state слуша
       --bb-play, който IntersectionObserver-ът в js/pl-bebe.js обръща на „paused“, щом
       блокът излезе от екрана или разделът се скрие. По подразбиране е paused —
       ако скриптът мълчи, нищо не се върти.

   РИТЪМЪТ на всеки съсед е различен (4.2 / 5.3 / 4.7 с за куполите; 3.1 / 4.3 / 3.7 / 5.1 с
   за звездичките) — иначе три еднакви махала изглеждат като машина, не като стая.
   Всичко се гаси от @media (prefers-reduced-motion: reduce) най-долу. */

/* — A · влизането — */
@keyframes plBbIn     { from { opacity: .4; transform: translateY(-9px) scale(.965); } /* 24.10: от .4 (скрит таб) */ }
@keyframes plBbShelf  { from { opacity: .4; transform: translateY(-16px); } /* 24.10: от .4 (скрит таб) */ }
@keyframes plBbPlaque { 0% { opacity: .4; transform: translateX(-50%) translateY(-10px) rotate(-4deg); } /* 24.10: от .4 (скрит таб) */ 62% { transform: translateX(-50%) translateY(0) rotate(1.6deg); } }
@keyframes plBbArch   { from { opacity: .4; transform: translateY(20px); } /* 24.10: от .4 (скрит таб) */ }
@keyframes plBbPop    { 0% { opacity: .4; transform: scale(.25); } /* 24.10: от .4 (скрит таб) */ 64% { transform: scale(1.12); } }
@keyframes plBbUp     { from { opacity: .4; transform: translateY(12px); } /* 24.10: от .4 (скрит таб) */ }
@keyframes plBbRow    { from { opacity: .4; transform: translateX(-12px); } /* 24.10: от .4 (скрит таб) */ }
@keyframes plBbTile   { from { opacity: .4; transform: translateY(20px) scale(.97); } /* 24.10: от .4 (скрит таб) */ }

.pl-bb-id     { animation: plBbIn .56s cubic-bezier(.22, 1, .36, 1) both; }
.pl-bb-shelf  { animation: plBbShelf .68s cubic-bezier(.22, 1, .36, 1) .06s both; }
.pl-bb-plaque { animation: plBbPlaque .78s cubic-bezier(.3, 1.35, .5, 1) .24s both; }
.pl-bb-a      { animation: plBbArch .62s cubic-bezier(.22, 1, .36, 1) both; }
.pl-bb-a.t-feed   { animation-delay: .20s; }
.pl-bb-a.t-sleep  { animation-delay: .28s; }
.pl-bb-a.t-diaper { animation-delay: .36s; }
.pl-bb-plus   { animation: plBbPop .52s cubic-bezier(.3, 1.4, .5, 1) both; }
.pl-bb-a.t-feed   .pl-bb-plus { animation-delay: .46s; }
.pl-bb-a.t-sleep  .pl-bb-plus { animation-delay: .53s; }
.pl-bb-a.t-diaper .pl-bb-plus { animation-delay: .60s; }
.pl-bb-cnt    { animation: plBbUp .5s cubic-bezier(.22, 1, .36, 1) both; }
.pl-bb-empty  { animation: plBbUp .55s cubic-bezier(.22, 1, .36, 1) both; }
.pl-bb-logh   { animation: plBbUp .48s cubic-bezier(.22, 1, .36, 1) .1s both; }
.pl-bb-log li { animation: plBbRow .46s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.14s + var(--i, 0) * .055s); }
.pl-bb-t      { animation: plBbTile .6s cubic-bezier(.22, 1, .36, 1) both; }
.pl-bb-t.t-grow  { animation-delay: .12s; }
.pl-bb-t.t-first { animation-delay: .21s; }
.pl-bb-cta    { animation: plBbPop .5s cubic-bezier(.3, 1.3, .5, 1) .3s both; }
.pl-bb-mi     { animation: plBbUp .34s ease-out both; }
.pl-bb-mi:nth-child(2) { animation-delay: .04s; } .pl-bb-mi:nth-child(3) { animation-delay: .08s; }
.pl-bb-mi:nth-child(4) { animation-delay: .12s; } .pl-bb-mi:nth-child(5) { animation-delay: .16s; } .pl-bb-mi:nth-child(6) { animation-delay: .2s; }

/* — Б · дишането (безкрайно, но спряно извън екрана) — */
@keyframes plBbBreath  { 50% { transform: translateY(-2.5px) scale(1.055); } }
@keyframes plBbTwinkle { 0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes plBbSway    { 0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); } 50% { transform: translate(-50%, -50%) rotate(5deg); } }
@keyframes plBbGloss   { 0%, 62% { background-position: 132% 0; } 100% { background-position: -32% 0; } }
@keyframes plBbInvite  { 0%, 70%, 100% { box-shadow: inset 0 0 0 3px #f2a8c4, 0 3px 0 #dba2b6, 0 7px 12px rgba(170, 118, 118, .28), 0 0 0 0 rgba(229, 109, 153, .38); }
                         85% { box-shadow: inset 0 0 0 3px #f2a8c4, 0 3px 0 #dba2b6, 0 7px 12px rgba(170, 118, 118, .28), 0 0 0 9px rgba(229, 109, 153, 0); } }
@keyframes plBbBob     { 50% { transform: translateY(-4px) rotate(2.5deg); } }

/* куполите дишат с три различни такта — три еднакви махала изглеждат като машина */
.pl-bb-a.t-feed   .pl-bb-ico { animation: plBbBreath 4.2s ease-in-out 1.1s infinite; }
.pl-bb-a.t-sleep  .pl-bb-ico { animation: plBbBreath 5.3s ease-in-out 1.6s infinite; }
.pl-bb-a.t-diaper .pl-bb-ico { animation: plBbBreath 4.7s ease-in-out 1.35s infinite; }
/* звездичките: четири различни периода, за да не мигат в такт */
.pl-bb-st.s1 { animation: plBbTwinkle 3.1s ease-in-out .4s infinite; }
.pl-bb-st.s2 { animation: plBbTwinkle 4.3s ease-in-out 1.1s infinite; }
.pl-bb-st.s3 { animation: plBbTwinkle 3.7s ease-in-out .8s infinite; }
.pl-bb-st.s4 { animation: plBbTwinkle 5.1s ease-in-out 1.6s infinite; }
.pl-bb-st.s0 { animation: plBbSway 7.4s ease-in-out infinite; }
.pl-bb-eico  { animation: plBbBob 5.6s ease-in-out infinite; }
/* бликът по розовия гел: минава веднъж на ~6 секунди, останалото време е извън бутона */
.pl-bb-cta { position: relative; }
/* 🪤 КОНТРАСТ · мерено по пиксели (ag2_bebe_piksel.js): бликът първо беше inset:0 — минаваше
   ВЪРХУ надписа и смъкваше белия текст върху гела до 2.34:1 при праг 3 (в покой гелът е
   с малко запас, а той е ЧУЖД файл — pl-ui.css — и не го пипам). Затова бликът живее само
   в ГОРНАТА лента: кутията на текста е 24px, центрирана в 60px бутон, значи заема 18–42px;
   лентата е 30% = 18px и не влиза в нея. Така гелът блести, а буквите остават чисти. */
.pl-bb-cta::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 0; pointer-events: none;
  border-radius: 999px 999px 30px 30px / 999px 999px 16px 16px;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 60%);
  background-size: 260% 100%; background-repeat: no-repeat;
  animation: plBbGloss 6s ease-in-out 1.2s infinite;
}
.pl-bb-cta > * { position: relative; z-index: 1; }
/* ПОКАНАТА: докато днес няма нито един запис, трите „+“ дишат подред — щом има запис, спират.
   Двете анимации се наслагват със запетая: влизането ОСТАВА (иначе „+“ не изскача). */
.pl-bb:has(.pl-bb-empty) .pl-bb-a.t-feed   .pl-bb-plus { animation: plBbPop .52s cubic-bezier(.3, 1.4, .5, 1) .46s both, plBbInvite 3.4s ease-out 1.4s infinite; }
.pl-bb:has(.pl-bb-empty) .pl-bb-a.t-sleep  .pl-bb-plus { animation: plBbPop .52s cubic-bezier(.3, 1.4, .5, 1) .53s both, plBbInvite 3.4s ease-out 2.2s infinite; }
.pl-bb:has(.pl-bb-empty) .pl-bb-a.t-diaper .pl-bb-plus { animation: plBbPop .52s cubic-bezier(.3, 1.4, .5, 1) .60s both, plBbInvite 3.4s ease-out 3.0s infinite; }

/* 🪤 ТОКЪТ — този блок е СЛЕД всички съкратени `animation:` записи НАРОЧНО: съкратеният
   запис нулира animation-play-state на „running“, значи гасенето трябва да е последно.
   Гасят се САМО безкрайните. Влизането НЕ се гаси — при „paused“ то щеше да замръзне на
   първия кадър (opacity 0) и екранът щеше да е празен, докато наблюдателят се обади. */
.pl-bb-ico, .pl-bb-st, .pl-bb-eico, .pl-bb-cta::after { animation-play-state: var(--bb-play, paused); }
.pl-bb:has(.pl-bb-empty) .pl-bb-plus { animation-play-state: running, var(--bb-play, paused); }

/* ── осветяването на ИСТИНСКИЯ бутон/карта, до която скочихме (атрибутът се маха след 2.6 с) ── */
#roRoom [data-pl-spot] {
  outline: 3px solid #e56d99 !important; outline-offset: 4px;
  border-radius: 16px;
  animation: plBbSpot 1.2s ease-in-out 2;
}
@keyframes plBbSpot { 50% { outline-color: rgba(229, 109, 153, .25); } }

/* ═══ НОЩ (21:00–7:00): нощно синьо, дървото — тъмносиньо със златна жилка, иконките на бял кръг ═══ */
html[data-theme="dark"] .pl-bb {
  color: #e3e5f5;
  --bb-wood: repeating-linear-gradient(96deg, rgba(255, 255, 255, .025) 0 1.5px, transparent 1.5px 9px), linear-gradient(180deg, #33417e 0, #28346b 100%);
  --bb-rim: inset 0 0 0 1.5px rgba(240, 210, 137, .45), inset 0 0 0 11px rgba(255, 255, 255, .05), inset 0 0 0 12.5px rgba(240, 210, 137, .3);
}
/* 29.09: филцът нощем идва от .pl-felt (#26336b + златист шев, css/pl-ui.css) — тук е само мастилото */
html[data-theme="dark"] .pl-bb-id { color: #fff; }
html[data-theme="dark"] .pl-bb-idt b, html[data-theme="dark"] .pl-bb-pen { color: #fff; }
html[data-theme="dark"] .pl-bb-idt small { color: #c9cbe3; }
html[data-theme="dark"] .pl-bb-av { background-color: #fff; box-shadow: 0 0 0 2px rgba(245, 156, 187, .6); }
html[data-theme="dark"] .pl-bb-shelf::before { box-shadow: var(--bb-rim), 0 8px 18px rgba(0, 0, 0, .3); }
/* 29.09 · нощем звездичките светят: по-светло злато + сияние вместо тъмната сянка.
   Филцовата шарка остава — само цветът под нея се вдига. */
html[data-theme="dark"] .pl-bb-st {
  background-color: #f7d791;
  background-image: var(--ui-felt, none), radial-gradient(circle at 42% 28%, #fff8dc 0, #f5d27e 45%, #dca93f 100%);
  filter: drop-shadow(0 0 5px rgba(240, 210, 137, .6));
}
html[data-theme="dark"] .pl-bb-plaque { background: linear-gradient(180deg, #34427f 0, #2a376f 100%); box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .55), 0 4px 10px rgba(0, 0, 0, .3); color: #fff; }
html[data-theme="dark"] .pl-bb-plaque i { background: radial-gradient(circle at 42% 30%, #fff8dc 0, #f2cd72 45%, #d4a33a 100%); }
html[data-theme="dark"] .pl-bb-arches::after { background: linear-gradient(180deg, #45539a 0, #3a4786 32%, #2f3b76 36%, #27316a 100%); box-shadow: 0 9px 14px rgba(0, 0, 0, .32), inset 0 1.5px 0 rgba(240, 210, 137, .4); }
html[data-theme="dark"] .pl-bb-sp { background: linear-gradient(90deg, #2f3b76 0, #56639f 45%, #2a3570 100%); }
html[data-theme="dark"] .pl-bb-sp::before { background: radial-gradient(circle at 35% 30%, #f7e2ab 0, #c9a24f 60%, #8a6a24 100%); }
html[data-theme="dark"] .pl-bb-dome { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .16), inset 0 0 0 5.5px rgba(240, 210, 137, .3), 0 7px 14px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .pl-bb-dome::before { opacity: .35; }
html[data-theme="dark"] .pl-bb-a.t-feed .pl-bb-dome { background: linear-gradient(180deg, rgba(229, 109, 153, .38), rgba(229, 109, 153, .18)); }
html[data-theme="dark"] .pl-bb-a.t-sleep .pl-bb-dome { background: linear-gradient(180deg, rgba(120, 160, 240, .40), rgba(120, 160, 240, .18)); }
html[data-theme="dark"] .pl-bb-a.t-diaper .pl-bb-dome { background: linear-gradient(180deg, rgba(110, 200, 160, .36), rgba(110, 200, 160, .16)); }
html[data-theme="dark"] .pl-bb-ico { width: 68px; height: 68px; margin-top: -14px; mix-blend-mode: normal; border-radius: 50%; background-color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .pl-bb-lbl { background: #2a376f; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .4), 0 3px 6px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .pl-bb-plus { background: #2a376f; box-shadow: inset 0 0 0 3px rgba(245, 156, 187, .8), 0 3px 0 #18214a, 0 7px 12px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .pl-bb-plus::before, html[data-theme="dark"] .pl-bb-plus::after { background: #ffc2d8; }
html[data-theme="dark"] .pl-bb-cnt { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html[data-theme="dark"] .pl-bb-c + .pl-bb-c::before { background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .pl-bb-c:active { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .pl-bb-ci, html[data-theme="dark"] .pl-bb-ri, html[data-theme="dark"] .pl-bb-mico, html[data-theme="dark"] .pl-bb-eico,
html[data-theme="dark"] .pl-bb-c.t-feed .pl-bb-ci, html[data-theme="dark"] .pl-bb-c.t-sleep .pl-bb-ci, html[data-theme="dark"] .pl-bb-c.t-diaper .pl-bb-ci,
html[data-theme="dark"] .pl-bb-row[data-go] .pl-bb-ri, html[data-theme="dark"] .pl-bb-mi .pl-bb-mico { background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .pl-bb-c b, html[data-theme="dark"] .pl-bb-logh h3, html[data-theme="dark"] .pl-bb-empty b, html[data-theme="dark"] .pl-bb-all, html[data-theme="dark"] .pl-bb-row > b { color: #fff; }
html[data-theme="dark"] .pl-bb-c small, html[data-theme="dark"] .pl-bb-c small.pl-bb-cx, html[data-theme="dark"] .pl-bb-more, html[data-theme="dark"] .pl-bb-note, html[data-theme="dark"] .pl-bb-row > em, html[data-theme="dark"] .pl-bb-row > span small { color: #c9cbe3; }
html[data-theme="dark"] .pl-bb-c small.pl-bb-inv, html[data-theme="dark"] .pl-bb-c b.pl-bb-invb, html[data-theme="dark"] .pl-bb-row.is-day > b, html[data-theme="dark"] .pl-bb-row.is-live > b { color: #ffb8d2; }
html[data-theme="dark"] .pl-bb-row > span, html[data-theme="dark"] .pl-bb-empty p { color: #e3e5f5; }
/* шкафовете: тънкият ръб (5px) като денем — 11-пикселовият на арката ги правеше сиви */
html[data-theme="dark"] .pl-bb-t { box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .5), inset 0 0 0 5px rgba(255, 255, 255, .06), inset 0 0 0 6.5px rgba(240, 210, 137, .32), 0 10px 20px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .pl-bb-t .pl-bb-tsc { background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, .04) 100%); box-shadow: inset 0 10px 16px rgba(0, 0, 0, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .1); gap: 4px; padding-bottom: 11px; }   /* кръгчетата стъпват на поличката */
html[data-theme="dark"] .pl-bb-tsc::after { background: linear-gradient(180deg, #45539a 0, #2f3b76 100%); }
html[data-theme="dark"] .pl-bb-tbig, html[data-theme="dark"] .pl-bb-tsm, html[data-theme="dark"] .pl-bb-tmini { mix-blend-mode: normal; border-radius: 50%; background-color: #fff; margin-left: 0; }
html[data-theme="dark"] .pl-bb-tbig { width: 66px; height: 66px; }
html[data-theme="dark"] .pl-bb-tsm { width: 46px; height: 46px; }
html[data-theme="dark"] .pl-bb-tmini { width: 32px; height: 32px; }
html[data-theme="dark"] .pl-bb-tp { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .3); }
html[data-theme="dark"] .pl-bb-tp b, html[data-theme="dark"] .pl-bb-tp em { color: #fff; }
html[data-theme="dark"] .pl-bb-tp small { color: #c9cbe3; }
html[data-theme="dark"] #roRoom [data-pl-spot] { outline-color: #f59cbb !important; }

/* ═══ ТИХИЯТ РЕЖИМ ═══════════════════════════════════════════════════════════════════════
   Всяка анимация от „🎞️ ЖИВОТЪТ“ се гаси тук — и влизането, и дишането. `animation: none`
   маха и `both`-пълнежа, значи елементите стоят в СВОЯ вид (видими), не на първия кадър.
   js/pl-bebe.js гледа същия признак и не пуска броенето нагоре — числото се пише наведнъж. */
@media (prefers-reduced-motion: reduce) {
  .pl-bb-id, .pl-bb-a, .pl-bb-row, .pl-bb-t, .pl-bb-cta, .pl-bb-cta b::before, .pl-bb-cta b::after { transition: none; }
  #roRoom [data-pl-spot] { animation: none; }
  .pl-bb, .pl-bb *, .pl-bb *::before, .pl-bb *::after { animation: none !important; }
  .pl-bb-cta::after { display: none; }
}

/* ═══ 06.10 · „ПЕЛЕНИ ДНЕС“ — БРОЯЧЪТ НЕ СЕ СЪБИРАШЕ ═══
   МЕРЕНО (обиколка): всяка кутия е 156 px, а „💧 Мокри [−] 0 [+]“ се простираше
   от 23 до 199 px — излизаше и отляво, и отдясно; „+“-ът на мокрите влизаше в
   кутията на „Каки“, а иконката висеше над етикета. Бутоните бяха пораснали до
   44 px (пипаемата норма) и вече не се побираха на един ред с етикета.
   Сега етикетът е на свой ред най-горе, а − 0 + отдолу (≈126 px от 156).
   ПЪТ НАЗАД: махни този блок. */
html body #roomOverlay .bb-dipbox {
  flex-wrap: wrap; justify-content: center; row-gap: 8px; column-gap: 10px;
  padding: 12px 8px 14px;
}
html body #roomOverlay .bb-dipbox > .bb-diplbl {
  flex: 1 0 100%; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
html body #roomOverlay .bb-dipbox > .bb-dipnum { min-width: 26px; text-align: center; }

/* ═══ 06.10 · ДОВЪРШВАНЕ НА СТАЯТА „МОЕТО БЕБЕ“ (картите под таблото) ═══
   Обиколка светла+тъмна: snimki/bb_predi_sv_*.jpg, bb_predi_tm_*.jpg; мярка bb_diag_*.txt,
   bb_diag2_*.txt (getComputedStyle + кои правила печелят). Всичко е само в тази стая
   (.ro-sky — панелът на „Моето бебе“, premium-rooms.js:17), чуждите файлове не се пипат.
     1 · медалът на ВСЯКА карта носеше ДВЕ рисунки една върху друга (.jr-medal + вътрешно .pl-em) —
         вътрешното се скрива визуално (буквата остава в textContent), както в pl-zdrave.css/pl-dnevnik.css;
     2 · „Профилактичните прегледи“: заглавието падаше на ред ПОД медала (анонимният текст във
         flex реда не се побира до 34px медал) → тази карта е на две колони;
     3 · „Кърмене-таймер“: бутонът 🌙 (нощен режим, rooms5.js:509) стоеше сам на свой ред — празна
         дупка над часовника; цифрите бяха лилаво-сиви (var(--ink-soft)) → бутонът отива в реда на
         заглавието, часовникът е кремав циферблат с тъмносини цифри; нощният режим (mega.css:324
         #1d1930 + лилав текст) става нощно синьо;
     4 · „Сънят днес“: кръгът и „Заспа“ бяха ЛИЛАВИ (premium.css:751–765, #a497e8→#7a6cd3) →
         гел-розов бутон като всички големи действия; кръгът — крем/злато, „спи“ = тъмносиньо;
     5 · „Звуци за сън“: „Спри след:“ делеше реда с чиповете и „60 мин“/„∞“ падаха сами отдолу;
     6 · „Фото-лента“: надписите 9.5px (под 11) и лилав „+“ (#6f5fa8, touch.css:525);
     7 · НОЩ: полетата за писане бяха лилаво-черна „тетрадка“ (dark.css .jr-paper #221d36),
         кутиите „Мокри/Каки“ и клетките на фото-лентата — #342f4e / #241f38 (лилаво), кръгчетата
         за отметка в „Профилактичните прегледи“ — тъмно върху тъмно.
   ПЪТ НАЗАД: махни този блок (до „край 06.10 · стаята“). Предишният файл: scratchpad/bb_pl-bebe_css_predi_0610.bak */

/* 1 · една рисунка в медала */
html body #roomOverlay .ro-sky #roRoom .jr-medal.pl-pl { position: relative; }
html body #roomOverlay .ro-sky #roRoom .jr-medal.pl-pl > .pl-em {
  position: absolute !important; left: 0 !important; top: 0 !important;
  width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important;
  box-shadow: none !important; border: 0 !important;
}

/* 2 · „Профилактичните прегледи“: медал | заглавие (пречупва се в своята колона), подзаглавието на цял ред */
html body #roomOverlay .ro-sky #roRoom .jr-card[data-blkey^="Моето бебе|Профилактичните"] > h4.jr-title {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 9px; row-gap: 2px;
}
html body #roomOverlay .ro-sky #roRoom .jr-card[data-blkey^="Моето бебе|Профилактичните"] > h4.jr-title > .jr-sub { grid-column: 1 / -1; }

/* 3 · кърмене-таймерът */
html body #roomOverlay .ro-sky #roRoom .jr-title > .nr-night {
  position: absolute; top: -8px; right: 54px; margin: 0; padding: 0;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, #fffdfb 0 15px, #f1e4d9 15px 16.5px, rgba(255, 255, 255, 0) 17px);
}
html body #roomOverlay .ro-sky #roRoom .jr-title > .nr-night > .pl-em { width: 24px !important; height: 24px !important; margin: 0 !important; }
html body #roomOverlay .ro-sky #roRoom .nr-disp {
  display: block; width: fit-content; min-width: 170px; margin: 12px auto 14px; padding: 9px 28px 7px;
  border-radius: 999px; text-align: center;
  font-size: 40px; line-height: 1.1; letter-spacing: 1px; color: var(--pl-navy, #1d2a5c);
  background: linear-gradient(180deg, #fffdfb 0, #fff6ee 100%);
  box-shadow: inset 0 0 0 1.5px #f1e4d9, inset 0 2px 0 #fff, 0 2px 0 rgba(214, 186, 158, .45), 0 6px 14px rgba(110, 76, 52, .08);
}
html body #roomOverlay .ro-sky #roRoom .nr-disp.run { color: #b8416f; box-shadow: inset 0 0 0 2px #f59cbb, inset 0 2px 0 #fff, 0 2px 0 rgba(214, 186, 158, .45), 0 6px 16px rgba(229, 109, 153, .18); }
/* нощният режим на таймера: тъмно и едро — но в нощното синьо на премиума, не в лилаво-черното */
html body #roomOverlay .ro-sky #roRoom .jr-card.nr-dark { background: linear-gradient(180deg, #1f2b5e 0, #161f48 100%) !important; }
html body #roomOverlay .ro-sky #roRoom .jr-card.nr-dark .nr-disp { font-size: 54px; color: #f59cbb; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .35); }
html body #roomOverlay .ro-sky #roRoom .jr-card.nr-dark .jr-title { color: #fff !important; }
html body #roomOverlay .ro-sky #roRoom .jr-card.nr-dark :is(.jr-sub, .nr-hrow, .jr-privacy, .jr-hint, .nr-forgot p) { color: #c9cbe3 !important; }
html body #roomOverlay .ro-sky #roRoom .jr-card.nr-dark .jr-title > .nr-night { background: radial-gradient(circle, rgba(255, 255, 255, .12) 0 15px, rgba(240, 210, 137, .5) 15px 16.5px, rgba(255, 255, 255, 0) 17px); }

/* 4 · сънят: гел-розов бутон, кръг в крем и злато */
html body #roomOverlay .ro-sky #roRoom .pl-sleepring ~ .jr-btn.jr-btn:not(.running) {
  background-color: var(--ui-gel, #c8457a) !important;
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .62) 0, rgba(255, 255, 255, .18) 38%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--ui-gel-top, #f39bbb) 0%, var(--ui-gel-mid, #d95a8e) 28%, var(--ui-gel, #c8457a) 55%, var(--ui-gel-bot, #b93a6e) 100%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(120, 20, 60, .22), 0 3px 0 #a83566, 0 10px 20px rgba(200, 69, 122, .32) !important;
}
html body #roomOverlay .ro-sky #roRoom .pl-sr-bg { stroke: #f4e6da; }
html body #roomOverlay .ro-sky #roRoom .pl-sr-fg { stroke: #e3c39c; }
html body #roomOverlay .ro-sky #roRoom .pl-sleepring[data-s="спи"] .pl-sr-fg { stroke: #1d2a5c; }
html body #roomOverlay .ro-sky #roRoom .pl-sr-in { background: radial-gradient(circle at 50% 30%, #fffdfb 0, #fff4ea 100%); box-shadow: inset 0 0 0 1.5px #f1e4d9, 0 6px 16px rgba(110, 76, 52, .10); }

/* 5 · звуците: „Спри след:“ на свой ред, четирите срока под него в един ред */
html body #roomOverlay .ro-sky #roRoom .jr-card[data-blkey^="Моето бебе|Звуци за сън"] .jr-quick > .jr-elabel {
  flex: 1 0 100%; display: flex; align-items: center; gap: 6px; margin: 6px 0 0;
}

/* 6 · фото-лентата: четим надпис, розов „+“ */
html body #roomOverlay .ro-sky #roRoom .pho-plus { color: #c8457a; }
html body #roomOverlay .ro-sky #roRoom .pho-m { font-size: 11.5px; line-height: 1.25; background: rgba(29, 42, 92, .72); }
html body #roomOverlay .ro-sky #roRoom .pho-cell.empty .pho-m { color: var(--pl-ink-soft, #6a6682); background: rgba(255, 253, 251, .94); padding: 1px 8px; }

/* полетата за писане: тънка златна лента за превъртане вместо лилавата */
html body #roomOverlay .ro-sky #roRoom :is(textarea.jr-paper, textarea.jr-note, .lx-inp) { scrollbar-width: thin; scrollbar-color: #e3c39c transparent; }

/* 7 · НОЩ */
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom :is(textarea.jr-paper, textarea.jr-note, .lx-inp) {
  background-color: #1b2554 !important;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 26px, rgba(255, 255, 255, .07) 26px 27px) !important;
  scrollbar-color: rgba(240, 210, 137, .55) transparent;
}
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .bb-dipbox { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(240, 210, 137, .28) !important; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pho-cell { background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pho-cell.empty { border-color: rgba(240, 210, 137, .38); }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pho-plus { color: #f59cbb; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pho-cell.empty .pho-m { color: #c9cbe3; background: transparent; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pg20-calrow[aria-pressed="false"] .jr-check {
  background-color: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .6) !important;
}
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .jr-title > .nr-night { background: radial-gradient(circle, rgba(255, 255, 255, .1) 0 15px, rgba(240, 210, 137, .45) 15px 16.5px, rgba(255, 255, 255, 0) 17px); }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .nr-disp { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .35), 0 4px 12px rgba(0, 0, 0, .22); }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .nr-disp.run { color: #ffb8d2; box-shadow: inset 0 0 0 2px rgba(245, 156, 187, .7), 0 4px 12px rgba(0, 0, 0, .22); }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pl-sr-fg { stroke: #e3c39c; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pl-sleepring[data-s="спи"] .pl-sr-fg { stroke: #f59cbb; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pl-sr-bg { stroke: rgba(255, 255, 255, .12); }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pl-sr-in { background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(240, 210, 137, .3); }
/* край 06.10 · стаята */

/* ═══ 20.10 · ТАБЛОТО: ДЪРВОТО Е ЛАК, НЕ ДЪСКА + ДОВЪРШВАНЕ НА КАРТИТЕ ПОД НЕГО ═══
   Снимки преди: dev/proba/snimki/bb20_B_*_L.jpg / _D.jpg (×2), bb20_A_*_sled*.jpg; мерки в bb20_B_L.log.
     1 · ДЪРВОТО (арката „Днес“, дъската, колчетата, двата шкафа): отвесни ивици през 7 px и кафяво
         #d5ab76…#e2be8e — „дървено“ в лошия смисъл. Сега е слонова кост с атлазен блик и едва
         загатната жилка (3.5%), обшито със шампанско злато (#e3c39c / #d9b98f от палитрата);
         дъската — кремав лак със златна нишка между плота и ръба. Нощем: полунощен лак без ивици.
     2 · „Растеж“/„Първи умения“: поличката в нишата — същият лак, не кафява летва.
     3 · „Днес още няма записи“: последната дума падаше сама на ред („ви.“) → text-wrap: pretty.
     4 · КАРТИТЕ: „Последни:“ в нощния режим на таймера (p.jr-weekcap) оставаше сиво-лилав
         #6f6980 върху синьо — сега #c9cbe3; месецът в „Профилактичните прегледи“ (.pg20-calw)
         беше 10.5 px (под 11) и нощем лилав #b3a4d1 → 12 px, нощем #c9cbe3;
         „Рекордите“ (.rc-row) нощем бяха кално кафяво-маслинени (mega.css:518 #3a3320→#3a2b3a) →
         нощно синьо със златна нишка; „Лексиконът“ (.lx-inp, rows=1) показваше лента за
         превъртане при празно поле (scrollHeight 44 > clientHeight 43 — мерено) → field-sizing:
         content (полето расте с текста, лента няма), горе 240 px; редовете на прегледите — без дупка
         и двоен ред; „п45“ в калкулатора 2.77:1 → тъмна роза; героят „7 месеца“ — две рисунки една
         върху друга (.pg20-fruit) → една; нощем „Хвани един момент…“ и „Въведи тегло…“ — без сиво/лилаво-черно.
     5 · ЖИВОТЪТ ПРИ ЗАПИС: с js/pl-bebe.js 20.10 — подскача само сменилият се брояч, влиза само новият ред.
   Обхват: класовете на таблото (.pl-bb-*) и стаята (#roomOverlay .ro-sky #roRoom).
   ПЪТ НАЗАД: махни този блок (до „край 20.10 · таблото“). Предишният файл: dev/proba/bb20_predi_pl-bebe.css */

/* 1 · лакът — ПРЕдефинирам променливите на блока (арката и шкафовете ги ползват) */
#roRoom .pl-bb {
  --bb-wood:
    radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(93deg, rgba(186, 146, 102, .035) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #fffaf2 0, #f8eddd 52%, #f2e2cb 100%);
  --bb-rim: inset 0 0 0 1.5px #dfc097, inset 0 0 0 10px #fffaf3, inset 0 0 0 11.5px rgba(217, 185, 143, .85);
}
#roRoom .pl-bb .pl-bb-shelf::before {
  box-shadow: var(--bb-rim), inset 0 14px 22px rgba(255, 255, 255, .45), 0 10px 24px rgba(150, 110, 70, .15), 0 1px 0 rgba(217, 185, 143, .5);
}
#roRoom .pl-bb .pl-bb-arches::after {   /* дъската: кремав плот, златна нишка, ръб в шампанско */
  background: linear-gradient(180deg, #fffcf7 0, #faf0e2 33%, #e3c39c 33.5%, #e3c39c 36%, #f3e5cf 36.5%, #ead7b9 100%);
  box-shadow: 0 8px 16px rgba(150, 110, 70, .17), 0 0 0 1px rgba(217, 185, 143, .55), inset 0 1.5px 0 #fff;
}
#roRoom .pl-bb .pl-bb-sp { background: linear-gradient(90deg, #e2c9a2 0, #fff8ec 46%, #d9bd94 100%); box-shadow: 0 0 0 .5px rgba(190, 150, 105, .4); }
#roRoom .pl-bb .pl-bb-sp::before { background: radial-gradient(circle at 35% 30%, #fffefb 0, #f4e7d1 52%, #d8bd93 100%); box-shadow: 0 1px 2px rgba(150, 110, 70, .25); }
#roRoom .pl-bb .pl-bb-dome { box-shadow:
  inset 0 0 0 5px #fffaf2, inset 0 0 0 6.5px rgba(217, 185, 143, .8),
  inset 0 16px 18px rgba(255, 255, 255, .5), inset 0 -12px 16px rgba(110, 76, 52, .08),
  0 0 0 1.5px rgba(217, 185, 143, .6), 0 8px 16px rgba(150, 110, 70, .16); }
/* 2 · шкафовете и поличката в нишата */
#roRoom .pl-bb .pl-bb-t { box-shadow: inset 0 0 0 1.5px #dfc097, inset 0 0 0 5px #fffaf3, inset 0 0 0 6.5px rgba(217, 185, 143, .85), 0 12px 24px rgba(150, 110, 70, .15); }
#roRoom .pl-bb .pl-bb-tsc::after {
  background: linear-gradient(180deg, #fffcf7 0, #f6ead7 42%, #ead7b9 100%);
  box-shadow: 0 -1px 0 rgba(217, 185, 143, .75), 0 -3px 6px rgba(110, 76, 52, .08);
}
#roRoom .pl-bb .pl-bb-tp { box-shadow: inset 0 0 0 1.5px #ead3b0, inset 0 2px 0 #fff, 0 2px 5px rgba(150, 110, 70, .12); }
/* 3 · празното */
#roRoom .pl-bb .pl-bb-empty p { text-wrap: pretty; }

/* НОЩ: полунощен лак без ивици, златна обшивка */
html[data-theme="dark"] #roRoom .pl-bb {
  --bb-wood:
    radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, .10) 0, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #34428a 0, #2a3673 55%, #232e64 100%);
  --bb-rim: inset 0 0 0 1.5px rgba(240, 210, 137, .55), inset 0 0 0 10px rgba(255, 255, 255, .035), inset 0 0 0 11.5px rgba(240, 210, 137, .32);
}
html[data-theme="dark"] #roRoom .pl-bb .pl-bb-shelf::before { box-shadow: var(--bb-rim), 0 10px 24px rgba(0, 0, 0, .32); }
html[data-theme="dark"] #roRoom .pl-bb .pl-bb-arches::after {
  background: linear-gradient(180deg, #4a58a2 0, #3e4b8f 33%, rgba(240, 210, 137, .6) 33.5%, rgba(240, 210, 137, .6) 36%, #313d7c 36.5%, #28326c 100%);
  box-shadow: 0 9px 16px rgba(0, 0, 0, .32), 0 0 0 1px rgba(240, 210, 137, .3), inset 0 1.5px 0 rgba(255, 255, 255, .14);
}
html[data-theme="dark"] #roRoom .pl-bb .pl-bb-sp { background: linear-gradient(90deg, #9f8147 0, #f3dca2 46%, #957840 100%); box-shadow: none; }
html[data-theme="dark"] #roRoom .pl-bb .pl-bb-sp::before { background: radial-gradient(circle at 35% 30%, #fff6da 0, #e8c977 55%, #9a7a36 100%); box-shadow: 0 0 6px rgba(240, 210, 137, .35); }
html[data-theme="dark"] #roRoom .pl-bb .pl-bb-dome { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .14), inset 0 0 0 5.5px rgba(240, 210, 137, .34), 0 0 0 1px rgba(240, 210, 137, .22), 0 8px 16px rgba(0, 0, 0, .28); }
html[data-theme="dark"] #roRoom .pl-bb .pl-bb-t { box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .5), inset 0 0 0 5px rgba(255, 255, 255, .05), inset 0 0 0 6.5px rgba(240, 210, 137, .3), 0 12px 24px rgba(0, 0, 0, .3); }
html[data-theme="dark"] #roRoom .pl-bb .pl-bb-tsc::after { background: linear-gradient(180deg, #4a58a2 0, #303c7a 100%); box-shadow: 0 -1px 0 rgba(240, 210, 137, .5), 0 -3px 6px rgba(0, 0, 0, .2); }
html[data-theme="dark"] #roRoom .pl-bb .pl-bb-tp { box-shadow: inset 0 0 0 1.5px rgba(240, 210, 137, .32); }
/* редовете „Днешни записи“ нощем: синьо върху синьо се сливаше — тънка златна нишка отгоре */
html[data-theme="dark"] body #roRoom .pl-bb .pl-bb-row.pl-soft { box-shadow: inset 0 1px 0 rgba(240, 210, 137, .22), 0 2px 0 #18214a !important; }
html[data-theme="dark"] body #roRoom .pl-bb .pl-bb-row.pl-soft:active { box-shadow: inset 0 1px 0 rgba(240, 210, 137, .22), 0 0 0 #18214a !important; }

/* 4 · картите под таблото */
html body #roomOverlay .ro-sky #roRoom .jr-card.nr-dark .jr-weekcap { color: #c9cbe3 !important; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .jr-weekcap { color: #c9cbe3; }
html body #roomOverlay .ro-sky #roRoom .pg20-calw { font-size: 12px; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pg20-calw { color: #c9cbe3; }
/* редовете на прегледите: колоната за месеца беше 52 px (дупка до иконката), а пояснението —
   11 px с opacity .75 и двоен ред (снимка bb20_C_profil_L) → 36 px колона, 12.5 px, ред 1.4, без избледняване */
html body #roomOverlay .ro-sky #roRoom .pg20-calrow { gap: 10px; padding: 10px 12px; }
html body #roomOverlay .ro-sky #roRoom .pg20-calrow .pg20-calw { width: 36px; }
html body #roomOverlay .ro-sky #roRoom .pg20-calrow .pg20-calt strong { font-size: 14px; line-height: 1.25; color: var(--pl-navy, #1d2a5c); margin-bottom: 2px; }
html body #roomOverlay .ro-sky #roRoom .pg20-calrow .pg20-calt small { display: block; font-size: 12.5px; line-height: 1.4; opacity: 1; color: var(--pl-ink-soft, #6a6682); }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pg20-calrow .pg20-calt strong { color: #fff; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .pg20-calrow .pg20-calt small { color: #c9cbe3; }
html body #roomOverlay .ro-sky #roRoom .rc-row { border: 1px solid rgba(227, 195, 156, .45); }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .rc-row { background: rgba(255, 255, 255, .06); border-color: rgba(240, 210, 137, .3); color: #f1f2fb; }
@supports (field-sizing: content) {
  html body #roomOverlay .ro-sky #roRoom textarea.lx-inp { field-sizing: content; max-height: 240px; }
}
/* „Рекордите“: крайното стикерче не пада само на нов ред (text-wrap: pretty взима и дума с него);
   бутонът „Сподели“ не опира в последния ред. (Опитът с „висяща“ иконка вляво — снимка
   bb20_D_rekordi_L — пренасяше „г.)“ на нов ред: махнат.) */
html body #roomOverlay .ro-sky #roRoom .rc-row { line-height: 1.45; text-wrap: pretty; }
html body #roomOverlay .ro-sky #roRoom .rc-list { margin-bottom: 12px; }
/* „Калкулатор на растежа“, историята: „п45“ (.bb-hp, var(--pink-deep)) беше 2.77:1 денем (мерено, bb20_E_L.log),
   а „✕“ (.bb-del) нощем — 3.43:1 (полупрозрачно). → тъмна роза / светла роза и #c9cbe3 */
html body #roomOverlay .ro-sky #roRoom .bb-hp { color: #b8416f; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .bb-hp { color: #ffb8d2; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .bb-del { color: #c9cbe3; }
/* героят „Днес Алекс е на 7 месеца“: ДВЕ рисунки една върху друга — span.pg20-fruit.pl-pl (67 px) носи
   плюша, а вътрешното .pl-em (84 px) излизаше извън него (мерено, bb20_G_D.log; снимка bb20_G_hero_D) —
   същият дефект като медала (06.10 · 1), същото лекарство: вътрешното се скрива визуално */
html body #roomOverlay .ro-sky #roRoom .pg20-fruit.pl-pl {
  position: relative; flex: none; display: inline-block;
  /* без вътрешното .pl-em кутията губеше ширината си и кръгът ставаше ОВАЛ 37×64 (снимка bb20_G_hero_L2) →
     собствен квадрат: 67 px, колкото мереше външният кръг (bb20_G_D.log) */
  width: 67px !important; height: 67px !important; min-width: 67px !important; min-height: 67px !important; aspect-ratio: 1;
}
html body #roomOverlay .ro-sky #roRoom .pg20-fruit.pl-pl > .pl-em {
  position: absolute !important; left: 0 !important; top: 0 !important;
  width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; box-shadow: none !important; border: 0 !important;
}
/* бележката „Хвани един момент…“ (.pg20-do) — нощем сива кутия; кутията „Въведи тегло…“ (.bb-empty,
   dark.css/rooms.css:757 #241f38 + #40395c) — лилаво-черна. → нощно синьо със златна нишка, както съседите */
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .rh-hero .pg20-do { background: rgba(227, 195, 156, .10) !important; border-color: rgba(227, 195, 156, .4) !important; color: #f3e6cc; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .bb-empty { background: rgba(255, 255, 255, .05) !important; border-color: rgba(240, 210, 137, .3) !important; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .bb-empty span { color: #c9cbe3; }
/* „История:“ в калкулатора (.bb-histrow): текстът стоеше горе, а ✕ (40 px) дърпаше реда надолу — празно
   дъно; денем фонът беше лилав #f7f4fc, нощем #342f4e (dark.css:85) → кремав / нощно син, по средата */
html body #roomOverlay .ro-sky #roRoom .bb-histrow { align-items: center; padding: 4px 6px 4px 12px; background: #fff8f0; border: 1px solid #f1e4d9; }
html[data-theme="dark"] body #roomOverlay .ro-sky #roRoom .bb-histrow { background: rgba(255, 255, 255, .06) !important; border-color: rgba(240, 210, 137, .25); color: #f1f2fb; }

/* 5 · ЖИВОТЪТ ПРИ ЗАПИС (js/pl-bebe.js 20.10): стълбичката е само при първото рисуване; после влиза
   само новият ред, а сменилият се брояч подскача веднъж. Тихият режим ги гаси (блокът по-горе). */
#roRoom .pl-bb .pl-bb-live.is-settled :is(.pl-bb-cnt, .pl-bb-logh, .pl-bb-log li) { animation: none; }
#roRoom .pl-bb .pl-bb-live.is-settled .pl-bb-log li.is-new { animation: plBbRow .5s cubic-bezier(.22, 1, .36, 1) .04s both; }
@keyframes plBbBump { 0% { transform: scale(1); } 38% { transform: scale(1.24); } 100% { transform: scale(1); } }
#roRoom .pl-bb .pl-bb-c b.pl-bb-bump { transform-origin: 0 65%; animation: plBbBump .56s cubic-bezier(.3, 1.45, .5, 1) both; }
@media (prefers-reduced-motion: reduce) { #roRoom .pl-bb .pl-bb-c b.pl-bb-bump, #roRoom .pl-bb .pl-bb-log li.is-new { animation: none !important; } }
/* край 20.10 · таблото */