/* Lookibooki для Plotrox — СБОРКА, не исходник.
 * Генерируется `Lookibooki/build.py` из дословной копии проекта
 * claude.ai/design. Руками не править: правка переживёт ровно до
 * следующего прогона сборки.
 *
 * Все 162 токенов системы префиксованы `--lb-*` и объявлены на
 * `.lb-root, .lb-page`, а не в `:root`. Это делает систему невидимой для всего,
 * что лежит вне её поддерева — включая редактор и Graphite.
 */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap");

/* ═══════════════ tokens/colors.css ═══════════════ */
/* Lookibooki — colour tokens.
   Values are verbatim from variants-struct/C-worldmap.html ("C · Карта-мир").
   The palette is CARTOGRAPHIC: cool sea-foam map paper + deep teal ink.
   NOT cream/sand. Warmth is carried only by the coral accent and the artwork. */
.lb-root, .lb-page {
  /* ---- map paper (the product's background family) ---- */
  --lb-map-0: #e9f3ef;        /* base map paper — cool, slightly green */
  --lb-map-1: #dcebe4;        /* second paper step / hairlines */
  --lb-map-deep: #cfe5dd;     /* deeper sea fill, bottom of the map */
  --lb-paperline: #c2ddd2;    /* faint cartographic rule */
  --lb-map-grid: #c8e1d8;     /* 40px graticule stroke inside the terrain SVG */

  /* ---- ink (type) ---- */
  --lb-ink: #1d3b39;          /* deep teal-ink, primary text */
  --lb-ink-soft: #46615e;     /* secondary */
  --lb-ink-faint: #7a928f;    /* tertiary / meta / locked */

  /* ---- surfaces ---- */
  --lb-surface: #ffffff;
  --lb-surface-2: #f3faf7;
  --lb-line: #dcebe4;
  --lb-device: #0c2422;       /* phone bezel + notch */

  /* ---- accent: coral. ONE action colour, one avatar colour ---- */
  --lb-accent: #ff6b54;
  --lb-accent-press: #e9543d;
  --lb-accent-soft: #ffe7e1;
  --lb-accent-light: #ff957f; /* highlight stop of the avatar radial gradient */
  --lb-accent-mid: #ff8d6e;   /* illustration coral */
  --lb-accent-trail: #ffb7a8; /* the travelled-path stroke on the map */

  /* ---- gold: collection / reward (stamps, treasure) ---- */
  --lb-gold: #f3b03e;
  --lb-gold-press: #e09a2b;
  --lb-gold-ink: #5a3d06;     /* type on gold */
  --lb-gold-soft: #ffe08a;    /* suns + lit windows in artwork */
  --lb-gold-paper: #fff4e0;   /* star icon fill */

  /* ---- teal: cartographic ink, format tags, progress ---- */
  --lb-teal: #2f8f86;
  --lb-teal-soft: #bfe3da;
  --lb-teal-line: #9cc8bb;    /* dotted travel paths */
  --lb-teal-bright: #4fb0a4;  /* progress bar gradient end */

  /* ---- world hues. Used ONLY inside illustration, never in chrome ---- */
  --lb-forest: #3f9d6d;
  --lb-ocean: #2f8fb5;
  --lb-space: #6d63c9;
  --lb-mystery: #c06fae;
  --lb-meadow: #e0a93a;
  --lb-castle: #d96f7a;

  /* ---- age-rating hues ---- */
  --lb-age-6: var(--lb-teal);
  --lb-age-9: #cf7d2f;
  --lb-age-12: #9b5bbf;

  /* ---- glass (all floating chrome sits on blurred white) ---- */
  --lb-glass: rgba(255, 255, 255, .82);
  --lb-glass-2: rgba(255, 255, 255, .86);
  --lb-glass-3: rgba(255, 255, 255, .90);
  --lb-glass-ring: rgba(255, 255, 255, .70);
  --lb-glass-ink: rgba(20, 55, 52, .42);   /* dark glass for chips over artwork */
  --lb-blur: 8px;

  /* ---- page background (the map-paper wash behind a phone frame) ---- */
  --lb-page-bg:
    radial-gradient(130% 80% at 10% -8%, #eef6f1 0%, transparent 55%),
    radial-gradient(120% 80% at 96% 4%, #e6f0ef 0%, transparent 52%),
    linear-gradient(165deg, #e6efeb 0%, #e1ebe7 58%, #e9efee 100%);
  --lb-world-bg: linear-gradient(180deg, #dff0f5 0%, #eaf6f3 30%, var(--lb-map-0) 100%);
  --lb-avatar-gradient: radial-gradient(circle at 35% 30%, var(--lb-accent-light), var(--lb-accent));
  --lb-progress-gradient: linear-gradient(90deg, var(--lb-teal), var(--lb-teal-bright));

  /* ---- semantic aliases ---- */
  --lb-text-primary: var(--lb-ink);
  --lb-text-secondary: var(--lb-ink-soft);
  --lb-text-meta: var(--lb-ink-faint);
  --lb-text-on-accent: #ffffff;
  --lb-text-on-gold: var(--lb-gold-ink);
  --lb-surface-card: var(--lb-surface);
  --lb-surface-sunken: var(--lb-surface-2);
  --lb-surface-map: var(--lb-map-0);
  --lb-border-hairline: var(--lb-line);
  --lb-state-visited: var(--lb-gold);
  --lb-state-current: var(--lb-accent);
  --lb-state-locked: var(--lb-ink-faint);
  --lb-focus-ring: var(--lb-accent);
}

/* ═══════════════ tokens/typography.css ═══════════════ */
/* Lookibooki — type tokens.
   Two families only. Fredoka carries every name, label and button (never body
   copy); Nunito Sans carries metadata and runs heavy (700/800) at small sizes
   so 11px chips stay legible on a phone. */
.lb-root, .lb-page {
  --lb-font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
  --lb-font-sans: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  /* weights actually used in the source */
  --lb-fw-body: 400;           /* long-form prose only — the one place Nunito runs light */
  --lb-fw-display: 600;        /* default Fredoka weight — labels, buttons, titles */
  --lb-fw-display-bold: 700;   /* wordmark + world title only */
  --lb-fw-semi: 600;
  --lb-fw-bold: 700;           /* Nunito default for meta */
  --lb-fw-black: 800;          /* tags, status bar, tiny caps */

  /* sizes */
  --lb-fs-display-lg: 30px;    /* world title */
  --lb-fs-display-md: 22px;    /* page wordmark */
  --lb-fs-display-sm: 16px;    /* brand pill, button label */
  --lb-fs-title: 15px;         /* story title, section label */
  --lb-fs-label: 14px;         /* explorer name */
  --lb-fs-region: 13.5px;      /* region name on the map */
  --lb-fs-status: 13px;        /* status bar */
  --lb-fs-body: 12.5px;        /* world subtitle, frame caption */
  --lb-fs-meta: 11.5px;        /* author, counters */
  --lb-fs-micro: 11px;         /* legend, region counts */
  --lb-fs-tag: 10.5px;         /* format tag */
  --lb-fs-flag: 10.5px;        /* "you are here" flag */
  --lb-fs-tiny: 9.5px;         /* "Read" ribbon on a cover */

  /* ---- extension: web + deck display scale ----
     Not present in the phone source. The app keeps its 30px ceiling; these four
     sizes exist only for the marketing site and the slide template. */
  --lb-fs-display-slide: 68px; /* deck cover */
  --lb-fs-display-hero: 54px;  /* marketing h1 */
  --lb-fs-display-web: 40px;   /* marketing + slide section title */
  --lb-fs-lead: 17px;          /* marketing lead paragraph, slide body */

  /* long-form reading (metrics carried over from the immersive-reader study) */
  --lb-fs-prose: 1.22rem;      /* 19.5px story text */
  --lb-lh-prose: 1.62;
  --lb-fs-drop: 3.3rem;        /* drop cap */
  --lb-lh-drop: .82;
  --lb-measure-prose: 38ch;    /* never wider */

  --lb-lh-tight: 1.05;
  --lb-lh-title: 1.12;
  --lb-lh-flag: 1.1;
  --lb-lh-body: 1.45;

  --lb-ls-tight: -.01em;
  --lb-ls-flag: .04em;
  --lb-ls-caps: .10em;

  /* composite shorthands for the recurring roles */
  --lb-t-world-title: var(--lb-fw-display-bold) var(--lb-fs-display-lg) / var(--lb-lh-tight) var(--lb-font-display);
  --lb-t-wordmark: var(--lb-fw-display-bold) var(--lb-fs-display-md) / 1.1 var(--lb-font-display);
  --lb-t-button: var(--lb-fw-display) var(--lb-fs-display-sm) / 1 var(--lb-font-display);
  --lb-t-title: var(--lb-fw-display) var(--lb-fs-title) / var(--lb-lh-title) var(--lb-font-display);
  --lb-t-region: var(--lb-fw-display) var(--lb-fs-region) / var(--lb-lh-tight) var(--lb-font-display);
  --lb-t-meta: var(--lb-fw-bold) var(--lb-fs-meta) / 1.3 var(--lb-font-sans);
  --lb-t-tag: var(--lb-fw-black) var(--lb-fs-tag) / 1 var(--lb-font-sans);
  --lb-t-prose: var(--lb-fw-body) var(--lb-fs-prose) / var(--lb-lh-prose) var(--lb-font-sans);

  /* web + deck roles (extension) */
  --lb-t-hero: var(--lb-fw-display-bold) var(--lb-fs-display-hero) / 1.04 var(--lb-font-display);
  --lb-t-web-title: var(--lb-fw-display-bold) var(--lb-fs-display-web) / 1.1 var(--lb-font-display);
  --lb-t-slide-title: var(--lb-fw-display-bold) var(--lb-fs-display-slide) / 1.02 var(--lb-font-display);
  --lb-t-lead: var(--lb-fw-semi) var(--lb-fs-lead) / 1.55 var(--lb-font-sans);
}

/* ═══════════════ tokens/spacing.css ═══════════════ */
/* Lookibooki — radius + spacing tokens.
   The source is deliberately off-grid (11px, 13px, 13.5px): keep the exact
   values, do not snap them to a 4/8px grid. */
.lb-root, .lb-page {
  --lb-r-xl: 30px;    /* reserved — largest paper card */
  --lb-r-lg: 22px;    /* ribbon, story stop, stamp panel */
  --lb-r-md: 15px;    /* reserved mid card */
  --lb-r-sm: 10px;
  --lb-r-pill: 999px; /* every floating chrome element */
  --lb-r-icon: 14px;  /* 44px icon button */
  --lb-r-btn: 16px;   /* dock button */
  --lb-r-stamp: 18px; /* stamp chip */
  --lb-r-cover: 12px; /* story cover */
  --lb-r-avatar: 12px; /* ribbon avatar square */
  --lb-r-phone: 48px;
  --lb-r-screen: 38px;

  --lb-s-1: 4px;
  --lb-s-2: 6px;
  --lb-s-3: 8px;
  --lb-s-4: 10px;
  --lb-s-5: 11px;   /* card padding inside a story stop */
  --lb-s-6: 13px;
  --lb-s-7: 16px;   /* screen gutter */
  --lb-s-8: 18px;   /* world screen gutter */
  --lb-s-9: 26px;

  --lb-gutter: var(--lb-s-7);
  --lb-hit-min: 44px;  /* every tappable target */
  --lb-map-height: 1180px;
  --lb-hero-height: 218px;
  --lb-dock-height: 52px;
}

/* ═══════════════ tokens/elevation.css ═══════════════ */
/* Lookibooki — elevation.
   Shadows are teal-tinted (rgba(20,55,52,…)), never neutral black, and always
   negative-spread so they read as soft paper lift rather than a drop shadow.
   Coral and gold elements get a coloured glow instead. */
.lb-root, .lb-page {
  --lb-sh-soft: 0 8px 20px -12px rgba(20, 55, 52, .34);   /* floating chrome, chips */
  --lb-sh-card: 0 14px 34px -18px rgba(20, 55, 52, .40);  /* region node, hovered stop */
  --lb-sh-pop: 0 22px 50px -22px rgba(20, 55, 52, .55);   /* phone frame, sheets */
  --lb-sh-accent: 0 12px 24px -10px rgba(255, 107, 84, .70); /* primary button */
  --lb-sh-accent-sm: 0 4px 10px -3px rgba(255, 107, 84, .60);
  --lb-sh-token: 0 10px 22px -8px rgba(255, 107, 84, .80);
  --lb-ring-white: 0 0 0 5px var(--lb-glass-ring);  /* region node paper ring */
  --lb-ring-token: 0 0 0 4px #ffffff;            /* avatar token ring */
  --lb-ring-gold: 0 0 0 2px var(--lb-gold) inset;   /* collected stamp */
  --lb-ring-inner-light: 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

/* ═══════════════ tokens/motion.css ═══════════════ */
/* Lookibooki — motion.
   One easing family (ease-out quint-ish). Everything rises on hover and sinks
   slightly on press; the only looping animation in the system is the
   "you are here" bob. All motion is disabled under prefers-reduced-motion. */
.lb-root, .lb-page {
  --lb-ease: cubic-bezier(.22, 1, .36, 1);
  --lb-ease-soft: cubic-bezier(.33, 1, .68, 1);

  --lb-dur-fast: .16s;
  --lb-dur: .18s;
  --lb-dur-slow: .20s;
  --lb-dur-bob: 3.2s;

  --lb-lift-sm: -2px;   /* icon buttons, chips */
  --lb-lift-md: -3px;   /* story stop */
  --lb-lift-lg: -4px;   /* region node */
  --lb-press-scale: .98;
  --lb-press-scale-sm: .96;
}

@keyframes lb-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ═══════════════ tokens/layers.css ═══════════════ */
/* Lookibooki — stacking order for the map surface. */
.lb-root, .lb-page {
  --lb-z-map: 1;      /* terrain SVG */
  --lb-z-token: 5;    /* region nodes, avatar token, legend, parent tab */
  --lb-z-sticky: 20;  /* top bar + progress ribbon floating over the map */
  --lb-z-dock: 30;    /* bottom action dock */
  --lb-z-sheet: 40;   /* modal sheets */
  --lb-z-notch: 50;   /* device chrome */
}

/* ═══════════════ css/base.css ═══════════════ */
/* Lookibooki — base layer. Applies the map-paper background, the ink type
   colour and the single global focus ring. Scoped loosely so a host page keeps
   its own resets if it has them. */
.lb-root, .lb-page {
  font-family: var(--lb-font-sans);
  color: var(--lb-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lb-page {
  background: var(--lb-page-bg);
  min-height: 100vh;
  margin: 0;
}
:where(.lb-root, .lb-page) * { box-sizing: border-box; }

:where(.lb-root, .lb-page) a { color: var(--lb-teal); text-decoration: none; font-weight: var(--lb-fw-bold); }
:where(.lb-root, .lb-page) a:hover { color: var(--lb-accent); text-decoration: underline; text-underline-offset: 3px; }

/* :where() keeps the reset at zero specificity so component classes always win. */
:where(.lb-root, .lb-page) :where(button) { border: none; background: none; cursor: pointer; color: inherit; font-family: inherit; padding: 0; }
:where(.lb-root, .lb-page) :where(a) { font-family: inherit; }
:where(.lb-root, .lb-page) :focus-visible {
  outline: 3px solid var(--lb-focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}
.lb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(.lb-root, .lb-page) * { animation: none !important; transition: none !important; }
}

/* ═══════════════ css/components.css ═══════════════ */
/* Lookibooki — component CSS. Class vocabulary is prefixed `lb-`.
   Every value here is lifted from variants-struct/C-worldmap.html; tokens are
   substituted where a token exists, exact pixel values are kept where not. */

/* ============================ device frame ============================ */
.lb-phone {
  width: 390px; height: 812px; background: var(--lb-device);
  border-radius: var(--lb-r-phone); padding: 11px; position: relative;
  box-shadow: var(--lb-sh-pop), var(--lb-ring-inner-light);
}
.lb-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--lb-r-screen); overflow: hidden;
  background: var(--lb-surface-map); display: flex; flex-direction: column;
}
.lb-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 124px; height: 25px; background: var(--lb-device);
  border-radius: 0 0 16px 16px; z-index: var(--lb-z-notch);
}
.lb-statusbar {
  position: relative; z-index: 6; display: flex; justify-content: space-between;
  align-items: center; padding: 13px 25px 4px;
  font-size: var(--lb-fs-status); font-weight: var(--lb-fw-black); color: var(--lb-ink);
}
.lb-statusbar__sig { display: flex; gap: 5px; align-items: center; }

/* ============================ brand ============================ */
.lb-brand {
  display: inline-flex; align-items: center; gap: var(--lb-s-3); padding: var(--lb-s-3) 12px;
  background: var(--lb-glass); backdrop-filter: blur(var(--lb-blur));
  border-radius: var(--lb-r-pill); box-shadow: var(--lb-sh-soft);
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display-bold);
  font-size: var(--lb-fs-display-sm); letter-spacing: var(--lb-ls-tight); color: var(--lb-ink);
}
.lb-wordmark {
  display: inline-flex; align-items: center; gap: var(--lb-s-4);
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display-bold);
  font-size: var(--lb-fs-display-md); color: var(--lb-ink); letter-spacing: var(--lb-ls-tight);
}
.lb-wordmark img, .lb-wordmark svg { filter: drop-shadow(0 5px 9px rgba(255, 107, 84, .4)); }

/* ============================ icon button ============================ */
.lb-iconbtn {
  position: relative; width: var(--lb-hit-min); height: var(--lb-hit-min);
  border-radius: var(--lb-r-icon); display: grid; place-items: center;
  background: var(--lb-glass-2); backdrop-filter: blur(var(--lb-blur)); box-shadow: var(--lb-sh-soft);
  transition: transform var(--lb-dur) var(--lb-ease), background var(--lb-dur) var(--lb-ease);
}
.lb-iconbtn:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-iconbtn:active { transform: translateY(0) scale(var(--lb-press-scale-sm)); }
.lb-iconbtn__dot {
  position: absolute; top: 0; right: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lb-accent); box-shadow: 0 0 0 2px #fff;
}
.lb-iconbtn--solid { background: var(--lb-surface); }

/* ============================ buttons ============================ */
.lb-btn {
  flex: 1; height: var(--lb-dock-height); border-radius: var(--lb-r-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lb-s-3);
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-display-sm);
  transition: transform var(--lb-dur-fast) var(--lb-ease), background var(--lb-dur-fast) var(--lb-ease), box-shadow var(--lb-dur-fast) var(--lb-ease);
}
.lb-btn--primary { background: var(--lb-accent); color: var(--lb-text-on-accent); box-shadow: var(--lb-sh-accent); }
.lb-btn--primary:hover { background: var(--lb-accent-press); transform: translateY(var(--lb-lift-sm)); }
.lb-btn--primary:active { transform: translateY(0) scale(var(--lb-press-scale)); }
.lb-btn--ghost { flex: none; width: var(--lb-dock-height); background: var(--lb-surface); box-shadow: var(--lb-sh-soft); }
.lb-btn--ghost:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-btn--ghost:active { transform: translateY(0) scale(var(--lb-press-scale)); }
.lb-btn[disabled] { opacity: .45; pointer-events: none; }
.lb-btn--sm { height: 40px; font-size: 14px; border-radius: var(--lb-r-cover); }

/* ============================ metadata chips ============================ */
.lb-age {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 21px; padding: 0 7px; border-radius: 7px;
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-micro);
  line-height: 1; color: #fff; background: var(--lb-age-6); letter-spacing: .01em;
}
.lb-age--9 { background: var(--lb-age-9); }
.lb-age--12 { background: var(--lb-age-12); }
.lb-fmt {
  font-size: var(--lb-fs-tag); font-weight: var(--lb-fw-black); color: var(--lb-teal);
  background: var(--lb-teal-soft); padding: 3px var(--lb-s-3); border-radius: var(--lb-r-pill); letter-spacing: .02em;
}
.lb-star {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: var(--lb-fw-black); font-size: 12px; color: var(--lb-ink);
}
.lb-star img, .lb-star svg { flex: none; }

/* ============================ progress ============================ */
.lb-pbar { height: 7px; border-radius: 99px; background: var(--lb-teal-soft); overflow: hidden; margin-top: 5px; }
.lb-pbar > i { display: block; height: 100%; border-radius: 99px; background: var(--lb-progress-gradient); }

.lb-ribbon {
  display: flex; align-items: center; gap: var(--lb-s-5);
  padding: var(--lb-s-4) var(--lb-s-6); border-radius: var(--lb-r-lg);
  background: var(--lb-glass); backdrop-filter: blur(9px); box-shadow: var(--lb-sh-soft);
}
.lb-ribbon--float { position: absolute; top: 88px; left: var(--lb-s-7); right: var(--lb-s-7); z-index: var(--lb-z-sticky); }
.lb-ribbon__av {
  width: 38px; height: 38px; border-radius: var(--lb-r-avatar); flex: none;
  background: var(--lb-avatar-gradient); display: grid; place-items: center; box-shadow: var(--lb-sh-accent-sm);
}
.lb-ribbon__txt { flex: 1; min-width: 0; }
.lb-ribbon__txt b {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-label);
  display: block; line-height: var(--lb-lh-flag);
}
.lb-ribbon__txt span { font-size: var(--lb-fs-meta); color: var(--lb-ink-soft); font-weight: var(--lb-fw-semi); }

/* ============================ map surface ============================ */
.lb-map-top {
  position: absolute; top: 34px; left: 0; right: 0; z-index: var(--lb-z-sticky);
  display: flex; align-items: center; justify-content: space-between; padding: var(--lb-s-2) var(--lb-s-7) 0;
}
.lb-map-controls { display: flex; gap: var(--lb-s-3); }
.lb-map-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.lb-map-scroll::-webkit-scrollbar { width: 0; }
.lb-map-canvas { position: relative; width: 100%; height: var(--lb-map-height); }
.lb-map-canvas > .lb-terrain {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: var(--lb-z-map); display: block;
  object-fit: cover;
}

/* region node = an illustrated PLACE you tap to enter */
.lb-region {
  position: absolute; z-index: var(--lb-z-token);
  display: flex; flex-direction: column; align-items: center; gap: var(--lb-s-2);
  width: 128px; margin-left: -64px;              /* centres on the x anchor */
  transition: transform var(--lb-dur-slow) var(--lb-ease);
}
.lb-region:hover { transform: translateY(var(--lb-lift-lg)); }
.lb-region:active { transform: translateY(-1px) scale(var(--lb-press-scale)); }
.lb-region__illo {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lb-surface); box-shadow: var(--lb-sh-card), var(--lb-ring-white);
  overflow: hidden; position: relative;
}
.lb-region__illo img, .lb-region__illo svg { width: 104px; height: 104px; display: block; }
.lb-region__meta {
  text-align: center; background: var(--lb-glass-3); backdrop-filter: blur(6px);
  border-radius: var(--lb-r-pill); padding: 5px 12px; box-shadow: var(--lb-sh-soft);
}
.lb-region__meta b {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-region);
  display: block; line-height: var(--lb-lh-tight); color: var(--lb-ink);
}
.lb-region__meta span { font-size: var(--lb-fs-micro); color: var(--lb-ink-soft); font-weight: var(--lb-fw-bold); }
.lb-region__stamp {
  position: absolute; top: -4px; right: var(--lb-s-3); width: 34px; height: 34px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; box-shadow: var(--lb-sh-soft);
  transform: rotate(-12deg); z-index: 2;
}
.lb-region--locked .lb-region__illo { filter: saturate(.35) brightness(.99); opacity: .92; }
.lb-region--locked .lb-region__meta span { color: var(--lb-ink-faint); }
.lb-lockpill {
  position: absolute; top: -4px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .95); display: grid; place-items: center; box-shadow: var(--lb-sh-soft);
}

/* "you are here" avatar token, sits ON the map */
.lb-you {
  position: absolute; z-index: var(--lb-z-token); width: 60px; margin-left: -30px;
  display: flex; flex-direction: column; align-items: center;
  animation: lb-bob var(--lb-dur-bob) var(--lb-ease-soft) infinite;
}
.lb-you__tok {
  width: 50px; height: 50px; border-radius: 50% 50% 50% 8px; transform: rotate(45deg);
  background: var(--lb-avatar-gradient); box-shadow: var(--lb-sh-token), var(--lb-ring-token);
  display: grid; place-items: center;
}
.lb-you__tok img, .lb-you__tok svg { transform: rotate(-45deg); }
.lb-you__flag {
  margin-top: 9px; font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  font-size: var(--lb-fs-flag); color: #fff; background: var(--lb-ink);
  padding: 3px 9px; border-radius: 99px; letter-spacing: var(--lb-ls-flag);
  white-space: nowrap; box-shadow: var(--lb-sh-soft);
}

.lb-legend {
  display: flex; gap: var(--lb-s-3); align-items: center; padding: 7px var(--lb-s-5); border-radius: 99px;
  background: var(--lb-glass-3); backdrop-filter: blur(6px); box-shadow: var(--lb-sh-soft);
  font-size: var(--lb-fs-micro); font-weight: var(--lb-fw-bold); color: var(--lb-ink-soft);
}
.lb-legend--float { position: absolute; left: 14px; bottom: var(--lb-s-8); z-index: var(--lb-z-token); }
.lb-legend__sw { display: inline-flex; align-items: center; gap: var(--lb-s-1); }
.lb-legend__sw i { width: 10px; height: 10px; border-radius: 3px; }

.lb-parent-tab {
  display: inline-flex; align-items: center; gap: var(--lb-s-2); padding: var(--lb-s-3) var(--lb-s-6);
  border-radius: 99px; background: var(--lb-ink); color: #fff; box-shadow: var(--lb-sh-soft);
  font-size: var(--lb-fs-meta); font-weight: var(--lb-fw-bold); transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-parent-tab:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-parent-tab--float { position: absolute; right: 14px; bottom: var(--lb-s-8); z-index: var(--lb-z-token); }

/* ============================ world screen ============================ */
.lb-world { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--lb-world-bg); }
.lb-world-hero { position: relative; height: var(--lb-hero-height); flex: none; overflow: hidden; }
.lb-world-hero > img, .lb-world-hero > svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
}
.lb-world-back {
  position: absolute; top: 46px; left: 14px; z-index: 6;
  width: var(--lb-hit-min); height: var(--lb-hit-min); border-radius: var(--lb-r-icon);
  display: grid; place-items: center; background: var(--lb-glass-3); backdrop-filter: blur(7px);
  box-shadow: var(--lb-sh-soft); transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-world-back:hover { transform: translateX(var(--lb-lift-sm)); }
.lb-world-cap { position: absolute; left: var(--lb-s-8); bottom: 14px; right: var(--lb-s-8); z-index: 6; }
.lb-kick {
  display: inline-flex; align-items: center; gap: var(--lb-s-2); font-size: var(--lb-fs-micro);
  font-weight: var(--lb-fw-black); color: #fff; background: var(--lb-glass-ink);
  backdrop-filter: blur(4px); padding: var(--lb-s-1) var(--lb-s-4); border-radius: 99px; letter-spacing: var(--lb-ls-flag);
}
.lb-world-cap h2 {
  margin: var(--lb-s-3) 0 0; font-family: var(--lb-font-display); font-weight: var(--lb-fw-display-bold);
  font-size: var(--lb-fs-display-lg); color: #fff; letter-spacing: var(--lb-ls-tight);
  text-shadow: 0 3px 14px rgba(12, 40, 40, .5);
}
.lb-world-cap p {
  margin: 3px 0 0; font-size: var(--lb-fs-body); font-weight: var(--lb-fw-bold); color: #eafaf6;
  text-shadow: 0 2px 8px rgba(12, 40, 40, .5);
}
.lb-world-body { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0 0 var(--lb-s-9); }
.lb-world-body::-webkit-scrollbar { width: 0; }

/* ============================ stamps ============================ */
.lb-stamps { padding: var(--lb-s-7) var(--lb-s-8) var(--lb-s-2); }
.lb-section-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--lb-s-4); }
.lb-section-label b { font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-title); }
.lb-section-label span { font-size: var(--lb-fs-meta); font-weight: var(--lb-fw-bold); color: var(--lb-ink-soft); }
.lb-stamprow { display: flex; gap: var(--lb-s-4); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--lb-s-1); }
.lb-stamprow::-webkit-scrollbar { height: 0; }
.lb-stampchip {
  flex: none; width: 62px; height: 62px; border-radius: var(--lb-r-stamp);
  display: grid; place-items: center; position: relative;
  background: var(--lb-surface); box-shadow: var(--lb-sh-soft);
}
.lb-stampchip img, .lb-stampchip svg { width: 42px; height: 42px; }
.lb-stampchip--got::after { content: ""; position: absolute; inset: 0; border-radius: var(--lb-r-stamp); box-shadow: var(--lb-ring-gold); }
.lb-stampchip--locked { background: var(--lb-surface-2); }
.lb-stampchip--locked img, .lb-stampchip--locked svg { opacity: .34; filter: grayscale(1); }
.lb-stampchip__tick {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lb-gold); display: grid; place-items: center; box-shadow: var(--lb-sh-soft);
}

/* ============================ story trail ============================ */
.lb-trail { position: relative; padding: 14px var(--lb-s-7) 0; }
.lb-trail__lbl { font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-title); margin: 2px var(--lb-s-1) 2px; }
.lb-trail__lbl small { font-family: var(--lb-font-sans); font-weight: var(--lb-fw-bold); font-size: var(--lb-fs-meta); color: var(--lb-ink-soft); margin-left: var(--lb-s-2); }
.lb-path { position: absolute; left: 0; top: 54px; width: 100%; height: calc(100% - 54px); z-index: 0; pointer-events: none; }

.lb-stop {
  position: relative; z-index: 2; display: flex; gap: var(--lb-s-6); align-items: center;
  padding: var(--lb-s-5); margin: 14px var(--lb-s-2); border-radius: var(--lb-r-lg);
  background: var(--lb-surface); box-shadow: var(--lb-sh-soft);
  transition: transform var(--lb-dur-slow) var(--lb-ease), box-shadow var(--lb-dur-slow) var(--lb-ease);
  width: calc(100% - 64px); text-align: left;
}
.lb-stop:hover { transform: translateY(var(--lb-lift-md)); box-shadow: var(--lb-sh-card); }
.lb-stop:active { transform: translateY(-1px) scale(.99); }
.lb-stop--right { margin-left: 64px; }
.lb-stop--wide { margin-left: var(--lb-s-2); width: calc(100% - 12px); }
.lb-stop__cover { width: 66px; height: 84px; border-radius: var(--lb-r-cover); overflow: hidden; flex: none; box-shadow: var(--lb-sh-soft); position: relative; }
.lb-stop__cover img, .lb-stop__cover svg { width: 100%; height: 100%; display: block; }
.lb-stop__info { flex: 1; min-width: 0; }
.lb-stop__info h3 { margin: 0; font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-title); line-height: var(--lb-lh-title); color: var(--lb-ink); }
.lb-stop__by { margin: 2px 0 7px; font-size: var(--lb-fs-meta); color: var(--lb-ink-soft); font-weight: var(--lb-fw-bold); }
.lb-stop__row { display: flex; align-items: center; gap: var(--lb-s-3); flex-wrap: wrap; }
.lb-stop__pin {
  position: absolute; left: -46px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; background: var(--lb-surface);
  display: grid; place-items: center; box-shadow: var(--lb-sh-soft);
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-label);
  color: var(--lb-teal); z-index: 3;
}
.lb-stop--right .lb-stop__pin { left: auto; right: -46px; }
.lb-stop--done .lb-stop__pin { background: var(--lb-gold); color: var(--lb-gold-ink); }
.lb-donetag {
  position: absolute; top: var(--lb-s-2); left: var(--lb-s-2); background: var(--lb-gold); color: var(--lb-gold-ink);
  font-size: var(--lb-fs-tiny); font-weight: var(--lb-fw-black); padding: 2px var(--lb-s-2); border-radius: 99px; letter-spacing: .03em;
}

/* ============================ dock ============================ */
.lb-dock {
  flex: none; padding: 12px var(--lb-s-7) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(233, 243, 239, 0), var(--lb-map-0) 40%);
  display: flex; gap: var(--lb-s-4);
}

/* ============================ reader ============================
   Layout, drop cap and reading metrics carried over from the immersive-reader
   study (variants-struct/B-immersive.html · Screen 2); colour, type, glass,
   shadows and motion are this system's own. Light map-paper, not night. */
.lb-reader { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--lb-surface-map); color: var(--lb-ink); }
.lb-reader-scene { position: absolute; inset: 0 0 auto; height: 300px; z-index: 0; overflow: hidden; }
/* The scene is the story's OWN artwork, blurred and slightly overscaled: at reader
   size a 66×84 cover would read as giant flat shapes, so it becomes an out-of-focus
   wash of the story's colours instead. Same blur idiom as the system's glass. */
.lb-reader-scene > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.2); filter: blur(22px) saturate(1.05);
}
.lb-reader-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(233,243,239,.55) 0%, rgba(233,243,239,.50) 40%, rgba(233,243,239,.86) 70%, var(--lb-map-0) 95%);
}

.lb-reader-top {
  position: relative; z-index: 2; padding: 58px var(--lb-s-8) 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lb-s-4);
}
.lb-reader-top__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-reader-top__ch {
  font-size: var(--lb-fs-micro); font-weight: var(--lb-fw-black); color: var(--lb-teal); letter-spacing: .02em;
}
.lb-reader-top__tt { font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-title); color: var(--lb-ink); }

/* Read / Listen segmented control */
.lb-mode {
  position: relative; z-index: 2; align-self: center; margin-top: var(--lb-s-6);
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px; border-radius: var(--lb-r-pill);
  background: var(--lb-glass-3); backdrop-filter: blur(var(--lb-blur)); box-shadow: var(--lb-sh-soft);
}
.lb-mode__knob {
  position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px);
  border-radius: var(--lb-r-pill); background: var(--lb-accent); box-shadow: var(--lb-sh-accent-sm);
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-mode[data-mode="listen"] .lb-mode__knob { transform: translateX(100%); }
.lb-mode button {
  position: relative; z-index: 1; min-height: 40px; padding: 9px var(--lb-s-8); border-radius: var(--lb-r-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lb-s-2);
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-label);
  color: var(--lb-ink-soft); transition: color var(--lb-dur) var(--lb-ease);
}
.lb-mode button[aria-pressed="true"] { color: #fff; }

/* prose */
.lb-reader-scroll { position: relative; z-index: 2; flex: 1; overflow-y: auto; scrollbar-width: none; }
.lb-reader-scroll::-webkit-scrollbar { display: none; }
.lb-prose { padding: var(--lb-s-9) 30px 30px; }
.lb-prose p {
  font: var(--lb-t-prose); color: var(--lb-ink); margin: 0 0 1em;
  max-width: var(--lb-measure-prose); text-wrap: pretty;
}
.lb-prose .lb-drop {
  float: left; font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  font-size: var(--lb-fs-drop); line-height: var(--lb-lh-drop); padding: 6px 10px 0 0; color: var(--lb-teal);
}
.lb-prose em { color: var(--lb-teal); font-style: italic; }
.lb-prose .lb-sound { color: var(--lb-accent-mid); font-weight: var(--lb-fw-semi); font-style: italic; }

/* edge tap zones for page turns */
.lb-tap { position: absolute; top: 110px; bottom: 96px; width: 28%; z-index: 3; background: transparent; }
.lb-tap--prev { left: 0; }
.lb-tap--next { right: 0; }
.lb-tap span {
  position: absolute; bottom: 12px; font-size: var(--lb-fs-tag); font-weight: var(--lb-fw-black);
  color: transparent; text-transform: uppercase; letter-spacing: .06em;
  transition: color var(--lb-dur) var(--lb-ease);
}
.lb-tap--prev span { left: 14px; }
.lb-tap--next span { right: 14px; }
.lb-tap:hover span, .lb-tap:focus-visible span { color: var(--lb-ink-faint); }

/* dock */
.lb-reader-dock {
  position: relative; z-index: 3; padding: 14px 24px calc(var(--lb-s-9) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--lb-map-0) 60%, rgba(233,243,239,0));
}
.lb-reader-dock__meta {
  display: flex; justify-content: space-between; gap: var(--lb-s-4); margin-top: 9px;
  font-size: var(--lb-fs-meta); font-weight: var(--lb-fw-bold); color: var(--lb-ink-soft);
}

/* ═══════════════ css/plotrox-extensions.css ═══════════════ */
/* Lookibooki — Plotrox extensions.
   ═══════════════════════════════════════════════════════════════════════════
   НЕ из источника claude.ai/design: этот файл — расширение системы под продукт
   Plotrox (карта сказок на главной, шторка-лента, страница сказки с тропой
   глав и ветвлением). Написан в ИСХОДНОЙ номенклатуре токенов (--lb-accent,
   --lb-s-5…) — build.py префиксует его вместе с ядром, поэтому файл пригоден
   для обратной заливки в проект-источник как есть.

   Словарь ядра переиспользован, а не скопирован: .lb-region/.lb-you/.lb-legend
   (карта), .lb-stop/.lb-trail (тропа), .lb-iconbtn/.lb-btn/.lb-mode (контролы).
   Здесь только то, чего в телефонном моке не существовало: полноэкранная
   responsive-карта, плавающие FAB, шторка, СВЕТЛАЯ перекраска секций ленты
   и ветвящаяся тропа глав. */

/* ============================ home = the map ============================ */
/* Страница-карта: скроллится ВСЯ страница, карта — высокий канвас на ней.
   Шапка приложения плавает поверх (глобальная пилюля), поэтому верхний отступ
   под неё. НЕ используем Tailwind-класс min-h-screen: при data-theme="dark"
   легаси форсит на него тёмный фон !important — светлая карта погасла бы. */
.lb-home {
  min-height: 100vh;
  background: var(--lb-page-bg);
  position: relative;
  overflow-x: clip;
}
/* min-height: канвас-море покрывает вьюпорт целиком даже на коротком
   контенте — бумажный фон страницы не должен «проступать» ни сверху, ни снизу
   (канон владельца 2026-08-06: канвас везде одинаковый). */
.lb-home__canvas { position: relative; width: 100%; min-height: 100vh; }
.lb-home__terrain,
.lb-home__paths {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.lb-home__terrain { z-index: var(--lb-z-map); }
.lb-home__paths { z-index: 2; }

/* Лента исследователя — плашка, прибитая к ЭКРАНУ (канон владельца
   2026-08-06): position fixed — всегда видна, не уезжает со скроллом карты;
   позиция inline (left в % вьюпорта, top в px), таскается мышью наравне с
   кружками-сказками, за пределы экрана не утаскивается (клампы драга). */
.lb-explorer {
  position: fixed; z-index: var(--lb-z-sticky);
  width: min(560px, calc(100vw - 2 * var(--lb-gutter)));
  /* второй компонент — сдвиг чёлки сборников (0, пока полка закрыта) */
  transform: translate(-50%, var(--lb-shelf-shift, 0px));
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
  cursor: grab;
  user-select: none;   /* драг мышью не должен выделять текст плашки */
}
.lb-explorer--dragging { cursor: grabbing; }
.lb-explorer--dragging .lb-ribbon { box-shadow: var(--lb-sh-pop); }
/* 📱 мобильный канон 2026-08-06: плашка прибита к КАНВАСУ над первым кружком —
   absolute (скроллится с картой), без драга; сдвиг чёлки даёт сам канвас */
.lb-explorer--anchored {
  position: absolute;
  transform: translateX(-50%);
  transition: none;
  cursor: default;
}

/* ================== «Вы здесь» сбоку от кружка ================== */
/* Канон владельца 2026-08-06: маркер слева/справа от точки (сторона — от
   положения кружка: левая половина канваса → маркер справа, и наоборот),
   сосочек-коннектор всегда смотрит на кружок, по вертикали — центр кружка.
   lb-bob ядра анимирует transform — вариантам свои кейфреймы, включающие
   базовый сдвиг (иначе анимация перетёрла бы позиционирование). */
.lb-you--left, .lb-you--right {
  width: auto; margin-left: 0;
  flex-direction: row; align-items: center; gap: var(--lb-s-3);
}
.lb-you--left { flex-direction: row-reverse; animation: lb-you-bob-l var(--lb-dur-bob) var(--lb-ease-soft) infinite; }
.lb-you--right { animation: lb-you-bob-r var(--lb-dur-bob) var(--lb-ease-soft) infinite; }
.lb-you--left .lb-you__flag, .lb-you--right .lb-you__flag { margin-top: 0; }
.lb-you--left::before, .lb-you--right::before {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.lb-you--right::before { right: 100%; border-right: 12px solid var(--lb-accent); }
.lb-you--left::before { left: 100%; border-left: 12px solid var(--lb-accent); }
@keyframes lb-you-bob-r {
  0%, 100% { transform: translate(0, -50%); }
  50% { transform: translate(0, calc(-50% - 6px)); }
}
@keyframes lb-you-bob-l {
  0%, 100% { transform: translate(-100%, -50%); }
  50% { transform: translate(-100%, calc(-50% - 6px)); }
}

/* ================== полка сборников у нижней кромки ================== */
/* Вводная владельца 2026-08-13 (до того — «айфон-чёлка» сверху, канон
   2026-08-06, см. .bak): полка живёт ВНИЗУ и видна ВСЕГДА — из-под кромки
   торчит «полочка» с маленькими кружками сборников; потянув вверх за
   язычок-холм — выезжает целиком (кружки укрупняются, появляются подписи —
   морф классом .lb-shelf--open). Луговая зелёная гамма отличает полку от
   бумажного канваса; язычок — пологий холм (SVG в разметке). Канвас и
   верхнее меню больше НЕ сдвигаются; нижние доки приподнимаются через
   --lb-dock-lift (публикует страница /skazki, на прочих lb-страницах 0). */
/* z ниже плавающего меню и доков (250) — приподнятые доки живут ПОВЕРХ */
.lb-shelf {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 249;
  height: 176px;
  background: linear-gradient(180deg, #edf7e0 0%, #dcefcd 58%, #d0e7bc 100%);
  border-radius: var(--lb-r-xl) var(--lb-r-xl) 0 0;
  box-shadow: 0 -10px 26px rgba(31, 61, 58, .18);
  display: flex; align-items: flex-start; justify-content: center;
}
.lb-shelf__row {
  display: flex; align-items: flex-start; gap: var(--lb-s-6);
  padding: 9px var(--lb-gutter) 0; max-width: 100%; overflow-x: auto;
  /* мини-скролл полочки не должен показывать полосу — жест тот же тач-скролл */
  scrollbar-width: none;
}
.lb-shelf__row::-webkit-scrollbar { height: 0; }
.lb-shelf--open .lb-shelf__row { gap: var(--lb-s-7); }
.lb-shelf__col {
  display: flex; flex-direction: column; align-items: center; gap: var(--lb-s-3);
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-shelf__col:hover { transform: translateY(var(--lb-lift-sm)); }
/* закрытая «полочка»: маленькие кружки; открытая — крупные (морф размером
   контейнера, svg иллюстрации тянется на 100%) */
.lb-shelf__illo {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none;
  background: #fff; box-shadow: var(--lb-sh-card);
  display: grid; place-items: center;
  transition: width .32s cubic-bezier(.2, .8, .3, 1), height .32s cubic-bezier(.2, .8, .3, 1);
}
.lb-shelf__illo svg { width: 100%; height: 100%; }
.lb-shelf--open .lb-shelf__illo { width: 84px; height: 84px; }
.lb-shelf__col--active .lb-shelf__illo { box-shadow: var(--lb-sh-card), 0 0 0 4px var(--lb-accent-trail); }
.lb-shelf__meta {
  text-align: center;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .25s var(--lb-ease), max-height .32s cubic-bezier(.2, .8, .3, 1);
}
.lb-shelf--open .lb-shelf__meta { opacity: 1; max-height: 64px; }
.lb-shelf__meta b {
  display: block; font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  font-size: var(--lb-fs-label); color: var(--lb-ink);
}
.lb-shelf__meta span { font-size: var(--lb-fs-meta); color: var(--lb-ink-soft); font-weight: var(--lb-fw-semi); }
/* язычок-холм: пологая дуга той же заливки, что верх полки, — шов невидим;
   сам button прозрачный, форму даёт SVG-path */
.lb-notch {
  /* 🔴 top: auto обязателен: ядро (components.css, айфон-чёлка мока) задаёт
     .lb-notch top: 0 — при top+bottom+height браузер игнорирует bottom,
     и язычок падал ВНУТРЬ полки. */
  position: absolute; top: auto; bottom: 100%; left: 50%; transform: translateX(-50%);
  width: 220px; height: 44px;
  background: transparent; border-radius: 0; box-shadow: none;
  display: grid; place-items: center;
  cursor: grab; touch-action: none;   /* тач-драг без прокрутки страницы */
}
.lb-notch__hill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 -5px 10px rgba(31, 61, 58, .12));
}
.lb-notch__hill path { fill: #edf7e0; }
.lb-notch__arrow { position: relative; margin-top: 14px; }
html.lb-shelf-dragging .lb-notch { cursor: grabbing; }
@media (max-width: 620px) {
  .lb-notch { width: 160px; height: 36px; }
  .lb-notch__arrow { margin-top: 10px; }
}
/* нижние доки (FAB-столбик, док навигации) приподнимаются над видимой полкой */
.lb-nav-dock, .lb-map-fabs {
  transform: translateY(calc(-1 * var(--lb-dock-lift, 0px)));
  transition: transform .32s cubic-bezier(.2, .8, .3, 1);
}
html.lb-shelf-dragging .lb-nav-dock,
html.lb-shelf-dragging .lb-map-fabs { transition: none; }
html.lb-shelf-dragging .lb-explorer { transition: none; }

/* ============== отдельные шторки «Жанры»/«Виды» ============== */
/* Канон 2026-08-06: у каждой иконки своё окно; чипы-пузыри выбора наверху
   (переиспользуют .lb-cloud__bubble) + сетка сказок подборки. */
.lb-tax-chips {
  display: flex; flex-wrap: wrap; gap: var(--lb-s-3);
  padding: var(--lb-s-5) var(--lb-gutter) var(--lb-s-3);
}
.lb-cloud__bubble--on { background: var(--lb-accent); color: #fff; box-shadow: var(--lb-sh-accent); }
.lb-cloud__bubble--on i { background: rgba(255, 255, 255, .28); }
.lb-tax-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--lb-s-6) var(--lb-s-4);
  padding: var(--lb-s-5) var(--lb-gutter) 44px;
}
.lb-tax-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--lb-s-3);
  text-align: center;
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-tax-card:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-tax-card:active { transform: scale(var(--lb-press-scale-sm)); }
.lb-tax-card__illo {
  position: relative; width: 96px; height: 96px; border-radius: 50%; flex: none;
  background: var(--lb-surface); box-shadow: var(--lb-sh-card), var(--lb-ring-white);
  overflow: visible;
}
.lb-tax-card__illo svg { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.lb-tax-card__no {
  position: absolute; top: -4px; left: 0; z-index: 2;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--lb-teal); color: #fff;
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-meta);
  box-shadow: var(--lb-sh-soft);
}
.lb-tax-card b {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-label);
  color: var(--lb-ink); line-height: var(--lb-lh-tight);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lb-tax-card > span { font-size: var(--lb-fs-meta); color: var(--lb-ink-soft); font-weight: var(--lb-fw-semi); }
.lb-tax-empty {
  padding: 72px 24px; text-align: center;
  color: var(--lb-ink-soft); font-size: var(--lb-fs-body); font-weight: var(--lb-fw-semi);
}

/* ================== иконки выборок НА канвасе ================== */
/* Канон владельца 2026-08-06: Топ/Тренды/Новинки — детализированные
   мультяшные иконки БЕЗ подложки, полкружка-сказки, живут на канвасе и
   таскаются как кружки (позиция inline: left %, top px). */
.lb-mapfab {
  position: absolute; z-index: var(--lb-z-token);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: grab; user-select: none;
  filter: drop-shadow(0 8px 16px rgba(31, 61, 58, .24));
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-mapfab:hover { transform: translateX(-50%) translateY(var(--lb-lift-sm)); }
.lb-mapfab:active { transform: translateX(-50%) scale(var(--lb-press-scale-sm)); }
.lb-mapfab--dragging { cursor: grabbing; z-index: var(--lb-z-sticky); }
.lb-mapfab svg { width: 100%; height: auto; display: block; }
.lb-mapfab__cap {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display-bold);
  color: var(--lb-ink); letter-spacing: var(--lb-ls-tight);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

/* ================== круглые окна Топ/Тренды/Новинки ================== */
/* Канон владельца 2026-08-06: окно-круг разворачивается ИЗ своей иконки до
   min(vw,vh); карта тем временем сжимается к точке иконки (transform канваса
   задаёт страница). Внутри — кольцо кружков топ-10 с номерами 1..10. */
.lb-orb-backdrop { position: fixed; inset: 0; z-index: 245; }
.lb-orb {
  position: fixed; z-index: 246; border-radius: 50%;
  background: var(--lb-map-0);
  box-shadow: var(--lb-sh-pop), 0 0 0 6px rgba(255, 255, 255, .55);
  opacity: .35;
  transition:
    left .42s cubic-bezier(.2, .8, .3, 1),
    top .42s cubic-bezier(.2, .8, .3, 1),
    transform .42s cubic-bezier(.2, .8, .3, 1),
    opacity .3s var(--lb-ease);
}
.lb-orb--in { opacity: 1; }
.lb-orb__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--lb-s-2);
  color: var(--lb-ink);
}
.lb-orb__hub b {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display-bold);
  font-size: var(--lb-fs-title); letter-spacing: var(--lb-ls-tight);
}
.lb-orb__hubicon { width: 58px; }
.lb-orb__hubicon svg { width: 100%; height: auto; display: block; }
.lb-orb__item {
  position: absolute; border-radius: 50%;
  background: #fff; box-shadow: var(--lb-sh-card);
  opacity: 0; transform: scale(.35);
  transition: opacity .3s var(--lb-ease), transform .3s var(--lb-ease);
}
.lb-orb--in .lb-orb__item { opacity: 1; transform: scale(1); }
.lb-orb--in .lb-orb__item:hover { transform: scale(1.07); transition-delay: 0ms !important; }
.lb-orb--in .lb-orb__item:active { transform: scale(.97); transition-delay: 0ms !important; }
.lb-orb__illo {
  position: absolute; inset: 4px; border-radius: 50%; overflow: hidden;
  background: var(--lb-surface); display: grid; place-items: center;
}
.lb-orb__illo svg { width: 100%; height: 100%; }
.lb-orb__no {
  position: absolute; top: -4px; left: 2px; z-index: 2;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--lb-teal); color: #fff;
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-meta);
  box-shadow: var(--lb-sh-soft);
}

/* ================== облака «Жанры»/«Виды» на канвасе ================== */
/* Раскрываются из FAB-столбика прямо над картой (канон владельца 2026-08-06):
   бэкдроп прозрачный — карта остаётся видна, клик мимо закрывает облако. */
.lb-cloud-backdrop { position: fixed; inset: 0; z-index: calc(var(--lb-z-dock) + 4); }
.lb-cloud {
  position: fixed; right: 96px; bottom: calc(26px + env(safe-area-inset-bottom));
  z-index: calc(var(--lb-z-dock) + 5);
  width: min(640px, calc(100vw - 128px));
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: var(--lb-s-3);
}
.lb-cloud__bubble {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--lb-r-pill);
  background: var(--lb-glass-2); backdrop-filter: blur(var(--lb-blur));
  box-shadow: var(--lb-sh-soft); color: var(--lb-ink);
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  padding: .5em .95em;
  animation: lb-bubble-pop var(--lb-dur-slow) var(--lb-ease) backwards;
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-cloud__bubble:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-cloud__bubble:active { transform: scale(var(--lb-press-scale-sm)); }
.lb-cloud__bubble i {
  font-style: normal; font-size: .78em; line-height: 1.5;
  color: #fff; background: var(--lb-teal);
  border-radius: 99px; padding: 0 .55em;
}
/* жанр/вид без контента: бледный, но кликабельный (лента покажет пусто) */
.lb-cloud__bubble--empty { opacity: .5; }
@keyframes lb-bubble-pop {
  from { opacity: 0; transform: translateY(10px) scale(.82); }
}
/* паутина видов: фикс-бокс с хабом, нитями (SVG) и узлами-пузырями */
.lb-web {
  position: fixed; right: 96px; bottom: calc(40px + env(safe-area-inset-bottom));
  z-index: calc(var(--lb-z-dock) + 5);
  width: 340px; height: 300px;
  transform-origin: bottom right;
}
/* только SVG-полотно нитей: голый `.lb-web svg` растянул бы и иконки узлов */
.lb-web__net { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-web__hub {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--lb-r-pill);
  background: var(--lb-accent); color: #fff;
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-label);
  padding: .55em 1em; box-shadow: var(--lb-sh-accent);
}
/* узлам паутины — свой pop: базовый transform содержит центрирование,
   общий кейфрейм пузырей его перетёр бы на время анимации */
.lb-web__node {
  position: absolute; transform: translate(-50%, -50%);
  animation: lb-node-pop var(--lb-dur-slow) var(--lb-ease) backwards;
}
.lb-web__node:hover { transform: translate(-50%, -50%) translateY(var(--lb-lift-sm)); }
.lb-web__node:active { transform: translate(-50%, -50%) scale(var(--lb-press-scale-sm)); }
@keyframes lb-node-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
}
@media (max-width: 700px) {
  .lb-cloud { right: 76px; width: calc(100vw - 96px); }
  .lb-web { right: 70px; transform: scale(.8); }
}

/* ============================ tale point ============================ */
/* Точка-сказка расширяет .lb-region: обложка-иллюстрация вместо рисованного
   мира + номер сказки в серии. Позиция задаётся inline (left в %, top в px). */
.lb-region--tale { margin-left: 0; transform: translateX(-50%); }
.lb-region--tale:hover { transform: translateX(-50%) translateY(var(--lb-lift-lg)); }
.lb-region--tale:active { transform: translateX(-50%) translateY(-1px) scale(var(--lb-press-scale)); }
.lb-region--tale .lb-region__illo img { width: 100%; height: 100%; object-fit: cover; }
/* 📱 кружок пропорционален экрану (размер задаёт страница inline) — контент
   заполняет его при ЛЮБОМ диаметре; ядро жёстко ставит svg 104px */
.lb-region--tale .lb-region__illo svg { width: 100%; height: 100%; }
/* 💬 подписи-пузыри: с референса владельца 2026-08-06 рендерятся компонентом
   SpeechBubble (.lb-bubble, SVG-формы + halftone-тень) — CSS-колбаса ниже
   больше не используется картой, сохранена для отката. */
.lb-bubble {
  position: relative; display: inline-block;
  margin-top: 4px;
}
.lb-bubble__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 3px 6px rgba(31, 61, 58, .14));
}
.lb-bubble__text {
  position: relative; z-index: 1; display: block; text-align: center;
}
.lb-bubble__text b {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  font-size: var(--lb-fs-region); line-height: var(--lb-lh-tight); color: var(--lb-ink);
  display: block;
}
.lb-bubble__text > span {
  display: block; margin-top: 2px;
  font-size: var(--lb-fs-micro); color: var(--lb-ink-soft); font-weight: var(--lb-fw-bold);
}

/* 💬 (выключено откатом владельца 2026-08-06: «верни подписи колбасками» —
   работает родная стеклянная пилюля ядра .lb-region__meta) CSS-пузырь с
   хвостиком; вернуть — раскомментировав:
.lb-region--tale .lb-region__meta {
  position: relative;
  background: #fff;
  border: 2px solid var(--lb-ink);
  border-radius: 14px;
  backdrop-filter: none;
  box-shadow: var(--lb-sh-soft);
  margin-top: 8px;
}
.lb-region--tale .lb-region__meta::before {
  content: ''; position: absolute; top: -10px; left: 50%; margin-left: -9px;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 10px solid var(--lb-ink);
}
.lb-region--tale .lb-region__meta::after {
  content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 8px solid #fff;
}
*/
.lb-region__no {
  position: absolute; top: -4px; left: 8px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lb-teal); color: #fff;
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-body);
  box-shadow: var(--lb-sh-soft);
}
/* 🖥 desktop-канон владельца 2026-08-05: кружки-сказки В ДВА РАЗА больше */
.lb-region--xl { width: 256px; }
.lb-region--xl .lb-region__illo { width: 208px; height: 208px; }
.lb-region--xl .lb-region__illo svg { width: 100%; height: 100%; }
.lb-region--xl .lb-region__meta { padding: 7px 16px; }
.lb-region--xl .lb-region__meta b { font-size: var(--lb-fs-title); }
.lb-region--xl .lb-region__meta span { font-size: var(--lb-fs-meta); }
.lb-region--xl .lb-region__no {
  min-width: 34px; height: 34px; top: -2px; left: 16px;
  font-size: var(--lb-fs-label);
}
.lb-region--xl .lb-region__stamp { width: 44px; height: 44px; right: 14px; }
/* перетаскиваемая точка: во время драга — «взято в руку» */
.lb-region--dragging { cursor: grabbing; z-index: var(--lb-z-sticky); }
.lb-region--dragging .lb-region__illo { box-shadow: var(--lb-sh-pop), var(--lb-ring-white); }

/* прочитанная сказка: тёплое золотое кольцо поверх бумажного */
.lb-region--done .lb-region__illo { box-shadow: var(--lb-sh-card), 0 0 0 5px var(--lb-gold-soft); }
/* 🏆 сияние кубка «прочитано» (канон 2026-08-06): мягкая пульсация золотого
   свечения вокруг кубка + мерцание искр со сдвигом фаз */
.lb-region__stamp svg { animation: lb-cup-glow 2.6s var(--lb-ease-soft) infinite; }
.lb-cup-spark {
  transform-box: fill-box; transform-origin: center;
  animation: lb-spark-twinkle 2.6s var(--lb-ease-soft) infinite;
}
.lb-cup-spark--2 { animation-delay: .85s; }
.lb-cup-spark--3 { animation-delay: 1.7s; }
@keyframes lb-cup-glow {
  0%, 100% { filter: drop-shadow(0 0 1.5px rgba(255, 199, 92, .55)); }
  50% { filter: drop-shadow(0 0 6px rgba(255, 185, 60, .95)); }
}
@keyframes lb-spark-twinkle {
  0%, 100% { opacity: .25; transform: scale(.65); }
  50% { opacity: 1; transform: scale(1.15); }
}
/* «вы здесь»: коралловое кольцо + мягкая пульсация тени */
.lb-region--here .lb-region__illo {
  box-shadow: var(--lb-sh-card), 0 0 0 5px var(--lb-accent-trail);
  animation: lb-here-pulse 2.6s var(--lb-ease-soft) infinite;
}
@keyframes lb-here-pulse {
  0%, 100% { box-shadow: var(--lb-sh-card), 0 0 0 5px var(--lb-accent-trail); }
  50% { box-shadow: var(--lb-sh-card), 0 0 0 9px var(--lb-accent-soft); }
}

/* ============================ floating map chrome ============================ */
/* FAB-столбик: весь НЕ-картный функционал главной свёрнут в круглые glass-кнопки. */
.lb-map-fabs {
  position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: var(--lb-z-dock);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--lb-s-4);
}
.lb-fab {
  display: inline-flex; align-items: center; gap: var(--lb-s-3);
  border-radius: var(--lb-r-pill); padding: 0;
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-fab:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-fab:active { transform: translateY(0) scale(var(--lb-press-scale-sm)); }
.lb-fab__label {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-label);
  color: var(--lb-ink); background: var(--lb-glass-3); backdrop-filter: blur(var(--lb-blur));
  padding: 7px 13px; border-radius: var(--lb-r-pill); box-shadow: var(--lb-sh-soft);
}
.lb-fab__circle {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--lb-glass-2); backdrop-filter: blur(var(--lb-blur)); box-shadow: var(--lb-sh-soft);
  color: var(--lb-ink);
}
.lb-fab--primary .lb-fab__circle { background: var(--lb-accent); color: #fff; box-shadow: var(--lb-sh-accent); }
.lb-fab__dot {
  position: absolute; margin: -34px 0 0 34px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--lb-accent); box-shadow: 0 0 0 2px #fff;
}
.lb-map-legend { position: fixed; left: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: var(--lb-z-token); }
/* На узких экранах подписи FAB-полок наезжают на точки карты — остаются
   только круги (aria-label у кнопок сохраняет доступность). */
@media (max-width: 700px) {
  .lb-fab__label { display: none; }
  .lb-fab__circle { width: 48px; height: 48px; }
}

/* ============================ sheet (лента поверх карты) ============================ */
/* 🔴 z-выше пилюли Navbar (z-[250]): бэкдроп накрывает и её (клик по шапке
   закрывает шторку — корректное модальное поведение), но много ниже
   app-модалок (z-9999). */
.lb-sheet-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--lb-z-sheet) + 260);
  background: rgba(20, 55, 52, .38);
  backdrop-filter: blur(3px);
}
.lb-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--lb-z-sheet) + 261);
  margin: 0 auto; max-width: 1100px; height: min(92vh, 100%);
  background: var(--lb-map-0); border-radius: var(--lb-r-xl) var(--lb-r-xl) 0 0;
  box-shadow: var(--lb-sh-pop);
  display: flex; flex-direction: column;
  animation: lb-sheet-up var(--lb-dur-slow) var(--lb-ease);
}
@keyframes lb-sheet-up {
  from { transform: translateY(28px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.lb-sheet__head {
  flex: none; display: flex; align-items: center; gap: var(--lb-s-4);
  padding: var(--lb-s-4) var(--lb-s-7) var(--lb-s-3);
  border-bottom: 1px solid var(--lb-paperline);
}
.lb-sheet__grab {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 5px; border-radius: 99px; background: var(--lb-paperline);
}
.lb-sheet__title {
  flex: 1; margin: 0; padding-top: var(--lb-s-2);
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-display-sm);
  color: var(--lb-ink);
}
.lb-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lb-sheet__body::-webkit-scrollbar { width: 0; }

/* ============================ feed recolor ============================ */
/* Секции ленты (hero/фильтры/Top/Trending/New/рекомендации) написаны тёмными
   Tailwind-классами. Внутри шторки они живут в скоупе .lb-feed — здесь их
   светлая ветка. Приём проекта: перекраска известных классов бóльшей
   специфичностью (как themes.css красит .gr-dark-panel). Карточки-обложки
   (MaterialCard) НЕ трогаем: их текст лежит на тёмном градиенте поверх
   изображения и самодостаточен на любом фоне. */
.lb-feed { color: var(--lb-ink); }
.lb-feed .text-white { color: var(--lb-ink) !important; }
.lb-feed .text-gray-400,
.lb-feed .text-gray-300 { color: var(--lb-ink-soft) !important; }
/* 🔴 Исключение: текст ПОВЕРХ обложек (карточки и hero-стек лежат на тёмном
   градиенте изображения) обязан остаться белым — иначе перекраска выше делает
   его чернильным на тёмном. Специфичность 0,3,0 бьёт блочные правила. */
.lb-feed [data-guid^="material_card"] .text-white,
.lb-feed [data-guid="hero-banner-stack"] .text-white { color: #fff !important; }
.lb-feed [data-guid^="material_card"] .text-gray-300,
.lb-feed [data-guid="hero-banner-stack"] .text-gray-300 { color: #d1d5db !important; }
.lb-feed h2 {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  letter-spacing: var(--lb-ls-tight);
}
/* sticky-заголовки секций: тёмный glass → бумажный glass; липнут к верху
   шторки, а не к отметке страницы (56px рассчитан на глобальную шапку). */
.lb-feed .sticky {
  top: 0 !important;
  background: var(--lb-glass) !important;
  backdrop-filter: blur(var(--lb-blur));
  border-bottom-color: var(--lb-paperline) !important;
}
/* пилюли фильтров: активная — коралл, покой — бумага */
.lb-feed .bg-indigo-500 {
  background: var(--lb-accent) !important;
  border-color: var(--lb-accent-press) !important;
  box-shadow: var(--lb-sh-accent-sm) !important;
}
.lb-feed .bg-white\/5 {
  background: var(--lb-surface) !important;
  border-color: var(--lb-line) !important;
  color: var(--lb-ink-soft) !important;
  box-shadow: var(--lb-sh-soft);
}
.lb-feed .bg-white\/5:hover { background: var(--lb-surface-2) !important; color: var(--lb-ink) !important; }
.lb-feed .bg-white\/15 { background: var(--lb-paperline) !important; }  /* разделитель форматов|жанров */
/* error-плашка */
.lb-feed .bg-red-900\/50 {
  background: var(--lb-accent-soft) !important;
  border-color: var(--lb-accent) !important;
  color: var(--lb-accent-press) !important;
}
.lb-feed .text-red-200 { color: var(--lb-accent-press) !important; }
/* скелетон-шиммер: тёмный → бумажный */
.lb-feed .pl-skeleton {
  background: linear-gradient(100deg, var(--lb-map-1) 40%, var(--lb-surface-2) 50%, var(--lb-map-1) 60%) !important;
  background-size: 200% 100% !important;
}
/* pulse-скелетоны рекомендаций и hover-подложки — тоже бумага, не графит */
.lb-feed .bg-gray-800 { background-color: var(--lb-map-1) !important; }
.lb-feed .hover\:bg-gray-800:hover { background-color: var(--lb-map-1) !important; }
/* EmptyState построен на токенах ПРИЛОЖЕНИЯ (--gradient-cta и т.п.) — их
   переопределение живёт во фронте (src/styles/lookibooki-app.css): build.py
   префиксует здесь ЛЮБОЕ объявление токена, и оверрайд перестал бы попадать
   в имена, которые компонент реально читает. */

/* ============================ tale page ============================ */
.lb-tale {
  min-height: 100vh;
  background: var(--lb-world-bg);
  padding-bottom: 40px;
  overflow-x: clip;
}
.lb-tale__inner { max-width: 880px; margin: 0 auto; padding: 0 var(--lb-gutter); }

/* герой: размытая обложка-сцена (идиома reader-scene) + карточка-обложка + текст */
.lb-tale-hero { position: relative; padding: 96px 0 var(--lb-s-7); overflow: hidden; }
.lb-tale-hero__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.lb-tale-hero__scene > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.25); filter: blur(26px) saturate(1.05);
}
.lb-tale-hero__scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(233, 243, 239, .58) 0%, rgba(233, 243, 239, .48) 45%,
    rgba(233, 243, 239, .84) 78%, var(--lb-map-0) 100%);
}
.lb-tale-hero__row {
  position: relative; z-index: 2;
  display: flex; gap: var(--lb-s-8); align-items: flex-end;
}
.lb-tale-hero__cover {
  flex: none; width: 168px; aspect-ratio: 2 / 3;
  border-radius: var(--lb-r-md); overflow: hidden;
  background: var(--lb-surface); box-shadow: var(--lb-sh-pop), var(--lb-ring-white);
}
.lb-tale-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-tale-hero__info { flex: 1; min-width: 0; padding-bottom: var(--lb-s-2); }
.lb-tale-hero__info h1 {
  margin: var(--lb-s-3) 0 var(--lb-s-2);
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display-bold);
  font-size: clamp(22px, 4.2vw, var(--lb-fs-display-lg));
  line-height: var(--lb-lh-tight); letter-spacing: var(--lb-ls-tight); color: var(--lb-ink);
}
.lb-tale-hero__by { font-size: var(--lb-fs-body); font-weight: var(--lb-fw-bold); color: var(--lb-ink-soft); margin: 0 0 var(--lb-s-3); }
.lb-tale-hero__desc {
  font-size: var(--lb-fs-body); font-weight: var(--lb-fw-semi); line-height: var(--lb-lh-body);
  color: var(--lb-ink-soft); margin: var(--lb-s-3) 0 0; max-width: 58ch;
}
.lb-tale-kick {
  display: inline-flex; align-items: center; gap: var(--lb-s-2);
  font-size: var(--lb-fs-micro); font-weight: var(--lb-fw-black); color: var(--lb-teal);
  background: var(--lb-teal-soft); padding: var(--lb-s-1) var(--lb-s-4); border-radius: 99px;
  letter-spacing: var(--lb-ls-flag);
}
/* 🎨 круглая рисованная обложка (канон 2026-08-05): та же векторная
   иллюстрация, что на кружочке карты; бумажное кольцо как у точек */
.lb-tale-hero__cover--round {
  aspect-ratio: 1 / 1; width: 190px; border-radius: 50%;
  box-shadow: var(--lb-sh-pop), var(--lb-ring-white);
}
.lb-tale-hero__cover--round svg { width: 100%; height: 100%; }
.lb-tale-hero__scene--wash {
  background:
    radial-gradient(120% 90% at 18% 0%, #dff0f5 0%, transparent 60%),
    radial-gradient(120% 90% at 88% 8%, #eaf6f3 0%, transparent 55%);
}
.lb-next-tale__cover--round { border-radius: 50%; width: 56px; height: 56px; }
.lb-next-tale__cover--round svg { width: 100%; height: 100%; }

@media (max-width: 640px) {
  .lb-tale-hero__row { gap: var(--lb-s-5); }
  .lb-tale-hero__cover { width: 118px; }
  .lb-tale-hero__cover--round { width: 132px; }
}

/* панель под героем: тумблер форматов + соц-действия */
.lb-tale-controls {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--lb-s-5);
  flex-wrap: wrap; margin-top: var(--lb-s-6);
}

/* ============================ chapter trail (+ ветвление) ============================ */
.lb-trail-flow { position: relative; margin-top: var(--lb-s-5); }
.lb-trail-flow .lb-path { top: 0; height: 100%; }
/* 🔴 Пины-номера ядра висят на left:-46px ОТ КАРТОЧКИ — при полях страницы 16px
   их срезал бы overflow-x: clip корня. Даём карточкам тропы собственные поля
   под пины с обеих сторон (перебиваем ядро специфичностью .lb-trail-flow). */
.lb-trail-flow .lb-stop { width: calc(100% - 112px); margin-left: 52px; }
.lb-trail-flow .lb-stop--right { margin-left: 60px; }
/* уровень с параллельными главами (развилка из графа редактора) */
.lb-trail-branch {
  position: relative; z-index: 2;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--lb-s-4);
  margin: 14px var(--lb-s-2);
}
.lb-trail-branch .lb-stop { width: 100%; margin: 0; }
.lb-trail-branch .lb-stop__pin { display: none; }   /* пин некуда вынести — узко */
.lb-stop--compact { padding: var(--lb-s-4); gap: var(--lb-s-4); }
.lb-stop--compact .lb-stop__cover { width: 48px; height: 62px; }
.lb-stop--compact .lb-stop__info h3 { font-size: var(--lb-fs-label); }
/* глава-карточка: цена/замочек платного релиза */
.lb-stop__price {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--lb-fs-tag); font-weight: var(--lb-fw-black); color: var(--lb-gold-ink);
  background: var(--lb-gold-soft); padding: 3px var(--lb-s-3); border-radius: 99px;
}
/* текущая глава: коралловая обводка */
.lb-stop--current { box-shadow: var(--lb-sh-soft), 0 0 0 2px var(--lb-accent); }
.lb-stop--current .lb-stop__pin { background: var(--lb-accent); color: #fff; }

/* «следующая сказка» — переход по цепочке серии */
.lb-next-tale {
  display: flex; align-items: center; gap: var(--lb-s-5);
  margin-top: var(--lb-s-9); padding: var(--lb-s-5) var(--lb-s-6);
  border-radius: var(--lb-r-lg); background: var(--lb-glass); backdrop-filter: blur(var(--lb-blur));
  box-shadow: var(--lb-sh-soft); width: 100%; text-align: left;
  transition: transform var(--lb-dur-slow) var(--lb-ease), box-shadow var(--lb-dur-slow) var(--lb-ease);
}
.lb-next-tale:hover { transform: translateY(var(--lb-lift-md)); box-shadow: var(--lb-sh-card); }
.lb-next-tale__cover { width: 52px; height: 68px; border-radius: var(--lb-r-cover); overflow: hidden; flex: none; box-shadow: var(--lb-sh-soft); }
.lb-next-tale__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-next-tale__txt { flex: 1; min-width: 0; }
.lb-next-tale__txt small {
  display: block; font-size: var(--lb-fs-micro); font-weight: var(--lb-fw-black);
  color: var(--lb-teal); letter-spacing: var(--lb-ls-flag); margin-bottom: 2px;
}
.lb-next-tale__txt b {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display); font-size: var(--lb-fs-title);
  color: var(--lb-ink); line-height: var(--lb-lh-title);
}

/* соц-панель плееров на светлой странице: иконки живут в тёмных glass-кругах
   (bg-black/35) и остаются белыми, а подписи-счётчики ПОД кругами — голый
   text-white/90, на бумаге невидимый → чернила. Внутри круга возвращаем белый. */
.lb-tale .text-white\/80, .lb-tale .text-white\/70 { color: var(--lb-ink-soft) !important; }
.lb-tale .text-white\/90 { color: var(--lb-ink-soft) !important; }
.lb-tale .hover\:text-white:hover { color: var(--lb-ink) !important; }
.lb-tale .text-white\/90 .bg-black\/35,
.lb-tale .hover\:text-white:hover .bg-black\/35 { color: rgba(255, 255, 255, .92) !important; }

/* ============================ library (каталог+поиск) ============================ */
/* Страница /library оборачивается в .lb-root.lb-feed.lb-library: базовую
   перекраску (text-white→чернила, bg-white/5→бумага, bg-indigo-500→коралл,
   скелетоны) даёт .lb-feed, здесь — только специфика каталога. Разметка и
   логика компонентов (LibrarySortBar/ContinueReadingRow/SearchResultsGrid)
   не менялись. */
.lb-library {
  min-height: 100vh;
  background: var(--lb-page-bg);
  padding-bottom: 96px;
}
.lb-library h1 {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  letter-spacing: var(--lb-ls-tight);
}
.lb-library input:focus { border-color: var(--lb-teal) !important; outline: none; }
.lb-library .text-gray-500 { color: var(--lb-ink-faint) !important; }
.lb-library .border-white\/10, .lb-library .border-white\/5 { border-color: var(--lb-paperline) !important; }
/* акценты «Продолжить» и спиннеров: индиго → тил/коралл системы */
.lb-library .text-indigo-400 { color: var(--lb-teal) !important; }
.lb-library .fill-indigo-400 { fill: var(--lb-teal) !important; }
/* подписи под карточками: белое на бумаге → чернила */
.lb-library .text-white\/90 { color: var(--lb-ink) !important; }
/* тёмные бейджи-форматы на обложках остаются читаемыми (лежат на изображении) */
.lb-library .bg-black\/60 { color: rgba(255, 255, 255, .92) !important; }

/* ============================ ЛК (кабинет) ============================ */
/* Кабинет свёрстан на shadcn-токенах — их светлые значения задаёт фронтовый
   мост (lookibooki-app.css, .lb-lk). Здесь — фон страницы и добивка ПРЯМЫХ
   цветных классов секций. text-white НЕ трогаем: в ЛК он встречается только
   на цветных подложках (CTA/бейджи) и обязан остаться белым. */
.lb-lk {
  min-height: 100vh;
  background: var(--lb-page-bg);
}
.lb-lk h1, .lb-lk h2 {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  letter-spacing: var(--lb-ls-tight);
}
.lb-lk .text-indigo-400, .lb-lk .text-indigo-300, .lb-lk .text-indigo-500 { color: var(--lb-teal) !important; }
.lb-lk .text-indigo-400:hover, .lb-lk .text-indigo-300:hover { color: var(--lb-accent) !important; }
.lb-lk .bg-indigo-500, .lb-lk .bg-indigo-600, .lb-lk .bg-indigo-400 {
  background-color: var(--lb-accent) !important;
  box-shadow: var(--lb-sh-accent-sm);
}
.lb-lk .bg-indigo-500:hover:not(:disabled), .lb-lk .bg-indigo-600:hover:not(:disabled) { background-color: var(--lb-accent-press) !important; }
.lb-lk .bg-indigo-500\/10, .lb-lk .bg-indigo-500\/15, .lb-lk .bg-indigo-500\/70 { background-color: var(--lb-accent-soft) !important; }
.lb-lk .border-indigo-500 { border-color: var(--lb-accent) !important; }
.lb-lk .bg-white\/5, .lb-lk .bg-white\/10 {
  background-color: var(--lb-surface) !important;
  border-color: var(--lb-line) !important;
}
.lb-lk .text-gray-300, .lb-lk .text-gray-400 { color: var(--lb-ink-soft) !important; }
.lb-lk .bg-red-500\/20 { background-color: var(--lb-accent-soft) !important; }
.lb-lk .text-red-300 { color: var(--lb-accent-press) !important; }

/* ============================ auth (вход/OTP) ============================ */
/* Экран входа: логика живёт в общей OtpAuthForm (используется и модалками, и
   редакторной EditorAuthModal — их НЕ трогаем), поэтому свет наводится ТОЛЬКО
   перекраской её тёмных классов внутри скоупа .lb-auth — тот же приём, что
   у .lb-feed. Разметка и поведение формы не меняются. */
.lb-auth {
  min-height: 100vh;
  background: var(--lb-page-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 96px var(--lb-gutter) 40px;
}
/* 🔴 БЕЗ backdrop-filter: он делает карточку containing block для fixed-потомков,
   и модалка условий (LegalDocModal рендерится ВНУТРИ OtpAuthForm) оказалась бы
   заперта в границах карточки. Непрозрачная бумага вместо glass. */
.lb-auth__card {
  width: 100%; max-width: 430px;
  background: var(--lb-surface);
  border-radius: var(--lb-r-xl); padding: 30px 26px;
  box-shadow: var(--lb-sh-pop), var(--lb-ring-inner-light);
}
.lb-auth__mark {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; color: #fff;
  background: var(--lb-avatar-gradient); box-shadow: var(--lb-sh-accent-sm);
}
.lb-auth__title {
  margin: 0 0 4px; text-align: center;
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display-bold);
  font-size: var(--lb-fs-display-md); color: var(--lb-ink); letter-spacing: var(--lb-ls-tight);
}
.lb-auth__sub {
  margin: 0 0 22px; text-align: center;
  font: var(--lb-t-meta); color: var(--lb-ink-soft);
}
/* — перекраска тёмных классов формы — */
.lb-authform .text-gray-300, .lb-authform .text-gray-200 { color: var(--lb-ink) !important; }
.lb-authform .text-gray-400 { color: var(--lb-ink-soft) !important; }
.lb-authform .text-gray-500 { color: var(--lb-ink-faint) !important; }
.lb-authform .hover\:text-white:hover { color: var(--lb-ink) !important; }
.lb-authform input[type="email"], .lb-authform input[type="text"] {
  background: var(--lb-surface) !important;
  border-color: var(--lb-paperline) !important;
  color: var(--lb-ink) !important;
  box-shadow: var(--lb-sh-soft);
}
.lb-authform input::placeholder { color: var(--lb-ink-faint) !important; }
.lb-authform input[type="checkbox"] { accent-color: var(--lb-accent) !important; }
/* CTA: индиго-градиент → коралл системы */
.lb-authform .from-indigo-500 {
  background: var(--lb-accent) !important;
  box-shadow: var(--lb-sh-accent) !important;
}
.lb-authform .from-indigo-500:hover:not(:disabled) { background: var(--lb-accent-press) !important; }
/* ссылки условий и «изменить email» */
.lb-authform .text-indigo-400 { color: var(--lb-teal) !important; }
.lb-authform .text-indigo-400:hover { color: var(--lb-accent) !important; }
/* плашки шага кода: «новый аккаунт» и «с возвращением» → тил-бумага */
.lb-authform .bg-indigo-500\/10, .lb-authform .bg-emerald-500\/10 {
  background: var(--lb-teal-soft) !important;
  border-color: var(--lb-teal-line) !important;
}
.lb-authform .text-indigo-200, .lb-authform .text-emerald-200 { color: var(--lb-ink) !important; }
.lb-authform .text-emerald-200\/80 { color: var(--lb-ink-soft) !important; }
/* капча-заглушка и dev-код: янтарь → золото системы (на бумаге читаемо) */
.lb-authform .bg-amber-400\/10 { background: var(--lb-gold-paper) !important; }
.lb-authform .border-amber-400\/70 { border-color: var(--lb-gold) !important; }
.lb-authform .text-amber-300 { color: var(--lb-gold-ink) !important; }
.lb-authform .text-amber-200, .lb-authform .text-amber-200\/80 { color: var(--lb-gold-ink) !important; }

/* ============================ floating nav ============================ */
/* Главное меню (канон владельца 2026-08-05): отдельные плавающие круглые
   кнопки с рисованными иконками, БЕЗ объединяющей подложки, одинаково на
   десктопе и мобильных, поверх контента. В плеерах остаётся прежняя пилюля. */
.lb-navwrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 250;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--lb-s-4); padding: 10px 12px;
  pointer-events: none;
}
.lb-navwrap > * { pointer-events: auto; }
.lb-nav-cluster { display: flex; align-items: center; gap: var(--lb-s-4); }
.lb-navfab {
  position: relative; width: 46px; height: 46px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--lb-glass-3); backdrop-filter: blur(var(--lb-blur));
  box-shadow: var(--lb-sh-soft); color: var(--lb-ink); cursor: pointer;
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-navfab:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-navfab:active { transform: translateY(0) scale(var(--lb-press-scale-sm)); }
.lb-navfab__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  background: var(--lb-accent); color: #fff;
  font: var(--lb-fw-black) 10.5px/19px var(--lb-font-sans);
  box-shadow: 0 0 0 2px #fff; text-align: center;
}
.lb-nav-logo {
  display: inline-flex; align-items: center; height: 46px; padding: 0 14px;
  border-radius: var(--lb-r-pill);
  background: var(--lb-glass-3); backdrop-filter: blur(var(--lb-blur));
  box-shadow: var(--lb-sh-soft);
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-nav-logo:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-nav-logo { gap: var(--lb-s-3); }
.lb-nav-logo__pin { filter: drop-shadow(0 4px 8px rgba(255, 107, 84, .38)); flex: none; }
.lb-nav-logo__word {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display-bold);
  font-size: 17px; color: var(--lb-ink); letter-spacing: var(--lb-ls-tight);
  line-height: 1; white-space: nowrap;
}
/* 🎬 контролы активного плеера в плавающем меню: glass-пилюля того же языка */
.lb-nav-player {
  display: inline-flex; align-items: center; height: 46px; padding: 0 10px;
  border-radius: var(--lb-r-pill);
  background: var(--lb-glass-3); backdrop-filter: blur(var(--lb-blur));
  box-shadow: var(--lb-sh-soft);
  max-width: 46vw; overflow: hidden;
}
/* узкие экраны: кластер многострочный, круги компактнее — «одинаково, но влезает» */
@media (max-width: 620px) {
  .lb-navwrap { flex-wrap: wrap; }
  .lb-nav-cluster { flex-wrap: wrap; justify-content: flex-end; gap: var(--lb-s-3); }
  .lb-navfab { width: 42px; height: 42px; }
  .lb-nav-player { order: 3; max-width: 100%; }
}

/* 🧭 нижний док навигации (канон владельца 2026-08-06): поиск/уведомления/
   закладки/кабинет в правом нижнем углу — на месте скрытых Видов/Жанров. */
.lb-nav-dock {
  position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 250;
  display: flex; flex-direction: column; align-items: center; gap: var(--lb-s-4);
}
/* поиск в доке: поле выезжает ВЛЕВО, панель результатов открывается ВВЕРХ
   (родная Tailwind-раскладка HeaderSearch целит вниз-вправо — у нижнего
   правого угла это за экраном) */
.lb-nav-dock .lb-nav-search { flex-direction: row-reverse; }
.lb-nav-dock [data-guid="header_search_dropdown"] {
  top: auto !important; bottom: calc(100% + 10px) !important;
  left: auto !important; right: 0 !important;
  margin-top: 0 !important;
}

/* поповер (язык): маленькая бумажная панель под кнопкой */
.lb-nav-pop {
  position: absolute; top: 54px; right: 0; min-width: 170px;
  background: var(--lb-glass-3); backdrop-filter: blur(var(--lb-blur));
  border-radius: var(--lb-r-lg); box-shadow: var(--lb-sh-card);
  padding: var(--lb-s-2);
}
/* язык у логотипа (2026-08-06): кнопка у ЛЕВОГО края — поповер выравниваем
   влево, правое выравнивание уводило бы панель за экран */
.lb-nav-pop--left { left: 0; right: auto; }
/* 🔍 HeaderSearch внутри плавающего меню: его кнопке — вид .lb-navfab,
   полю и панели результатов — бумага (база красок приходит от .lb-pane). */
.lb-nav-search { position: relative; display: flex; align-items: center; }
.lb-nav-search [data-guid="header_search_btn"] {
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: var(--lb-glass-3) !important; backdrop-filter: blur(var(--lb-blur));
  box-shadow: var(--lb-sh-soft); color: var(--lb-ink) !important;
  transition: transform var(--lb-dur) var(--lb-ease);
}
.lb-nav-search [data-guid="header_search_btn"]:hover { transform: translateY(var(--lb-lift-sm)); }
.lb-nav-search [data-guid="header_search_input"] {
  background: var(--lb-surface) !important;
  border-color: var(--lb-paperline) !important;
  color: var(--lb-ink) !important;
  box-shadow: var(--lb-sh-soft);
}
.lb-nav-search [data-guid="header_search_input"]::placeholder { color: var(--lb-ink-faint) !important; }
.lb-nav-search [data-guid="header_search_dropdown"] {
  background: var(--lb-glass-3) !important;
  border-color: var(--lb-paperline) !important;
  border-radius: var(--lb-r-lg) !important;
  box-shadow: var(--lb-sh-card) !important;
  backdrop-filter: blur(var(--lb-blur));
}

/* компенсация пилюли, ушедшей из потока: светлые страницы получают воздух
   под плавающими кнопками (карта/сказка/логин уже несут свои отступы) */
.lb-library { padding-top: 76px; }
.lb-lk { padding-top: 70px; }

/* ============================ page wash ============================ */
/* Универсальный светлый фон страницы для точечных поверхностей (страница
   автора, /watch, /templates): бумажная заливка на весь экран без класса
   min-h-screen (легаси-форс тёмной темы дополнительно исключает .lb-root). */
.lb-page-wash {
  min-height: 100vh;
  background: var(--lb-page-bg);
  padding-top: 76px;   /* воздух под плавающим меню (пилюля ушла из потока) */
}

/* ============================ pane (модалки/шторки) ============================ */
/* Единый светлый скоуп модальных поверхностей юзер-стороны: AuthModal, плашка
   шаринга, комментарии, resume-диалог, шторка «Серии», Purchase/Donate/Share,
   центр уведомлений. Класс вешается НА САМУ ПАНЕЛЬ (оверлеи-затемнения
   остаются тёмными — под модалкой часто тёмный плеер). Гейты плееров
   (LNG/Version/Paywall) НЕ входят: они рассчитаны на тёмный медиа-контент —
   решение владельца «плееры потом». Порталы в body обязаны нести и .lb-root.
   🔴 РЕДАКТОР: у EditorAuthModal классы byte-идентичны AuthModal — скоуп
   существует только там, где класс проставлен руками в юзер-компоненте. */

/* сама панель: тёмная поверхность → бумага (классы сидят на том же элементе) */
.lb-pane { color: var(--lb-ink); }
.lb-pane.bg-gray-900, .lb-pane.bg-gray-900\/95, .lb-pane.bg-gray-900\/90,
.lb-pane.bg-gray-800\/40, .lb-pane.bg-zinc-900\/95 {
  background: var(--lb-glass-3) !important;
  border-color: var(--lb-paperline) !important;
}
/* внутренние тёмные блоки */
.lb-pane .bg-gray-800\/50, .lb-pane .bg-gray-800\/30, .lb-pane .bg-gray-900 { background: var(--lb-surface-2) !important; }
.lb-pane .bg-gray-800 { background: var(--lb-map-1) !important; }
.lb-pane .hover\:bg-gray-700:hover, .lb-pane .hover\:bg-gray-800:hover { background: var(--lb-map-1) !important; }
.lb-pane .bg-white\/5, .lb-pane .bg-white\/10, .lb-pane .bg-white\/15, .lb-pane .bg-white\/20 {
  background: var(--lb-surface-2) !important;
}
.lb-pane .hover\:bg-white\/10:hover { background: var(--lb-map-1) !important; }
/* границы и разделители */
.lb-pane .border-white\/10, .lb-pane .border-white\/15, .lb-pane .border-white\/20,
.lb-pane .border-gray-700, .lb-pane .border-gray-700\/50, .lb-pane .border-gray-600,
.lb-pane .border-gray-600\/50 { border-color: var(--lb-paperline) !important; }
.lb-pane .divide-white\/5 > * + * { border-color: var(--lb-paperline) !important; }
.lb-pane .ring-white\/30 { --lb-tw-ring-color: var(--lb-teal-line) !important; }
/* заголовки — фирменный дисплей */
.lb-pane h2, .lb-pane h3 {
  font-family: var(--lb-font-display); font-weight: var(--lb-fw-display);
  letter-spacing: var(--lb-ls-tight);
}
/* текстовые шкалы */
.lb-pane .text-gray-200, .lb-pane .text-gray-300 { color: var(--lb-ink) !important; }
.lb-pane .text-gray-400 { color: var(--lb-ink-soft) !important; }
.lb-pane .text-gray-500 { color: var(--lb-ink-faint) !important; }
.lb-pane .text-white\/90, .lb-pane .text-white\/80, .lb-pane .text-white\/70 { color: var(--lb-ink-soft) !important; }
.lb-pane .text-white\/60, .lb-pane .text-white\/50, .lb-pane .text-white\/40 { color: var(--lb-ink-faint) !important; }
.lb-pane .hover\:text-white:hover { color: var(--lb-ink) !important; }
/* text-white: бланкет + восстановление на цветных подложках (кнопки/градиенты/
   inline-цвета плиток шаринга) — восстановители ниже и специфичнее */
.lb-pane .text-white { color: var(--lb-ink) !important; }
.lb-pane [class*="bg-indigo"].text-white,
.lb-pane [class*="from-"].text-white,
.lb-pane [class*="from-"] .text-white,
.lb-pane [style*="background"].text-white { color: #fff !important; }
/* индиго-акценты → системные */
.lb-pane .bg-indigo-500, .lb-pane .bg-indigo-600 {
  background: var(--lb-accent) !important;
  box-shadow: var(--lb-sh-accent-sm);
}
.lb-pane .hover\:bg-indigo-600:hover, .lb-pane .hover\:bg-indigo-500:hover { background: var(--lb-accent-press) !important; }
.lb-pane .bg-indigo-500\/20, .lb-pane .bg-indigo-500\/10 { background: var(--lb-accent-soft) !important; }
.lb-pane [class*="from-indigo"] { background: var(--lb-avatar-gradient) !important; }
.lb-pane .text-indigo-400, .lb-pane .text-indigo-300 { color: var(--lb-teal) !important; }
/* цены/позитив: эмералд на бумаге бледный → тил */
.lb-pane .text-emerald-400, .lb-pane .text-emerald-400\/80 { color: var(--lb-teal) !important; }
/* поля ввода */
.lb-pane input, .lb-pane textarea { color: var(--lb-ink) !important; }
.lb-pane input::placeholder, .lb-pane textarea::placeholder { color: var(--lb-ink-faint) !important; }

/* загрузка страницы сказки */
.lb-tale-skel {
  height: 320px; border-radius: var(--lb-r-lg);
  background: linear-gradient(100deg, var(--lb-map-1) 40%, var(--lb-surface-2) 50%, var(--lb-map-1) 60%);
  background-size: 200% 100%;
  animation: lb-skel-shimmer 1.4s linear infinite;
}
@keyframes lb-skel-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}