@font-face { font-family: "Coolvetica"; src: url("/assets/coolveticaregular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Coolvetica"; font-style: italic; src: url("/assets/coolveticaitalic.otf") format("opentype"); font-display: swap; }

/* =====================================================================
   PostHero — minimal white neumorphic theme
   Change the look from here: surface colour, ink, one accent, shadows.
   ===================================================================== */
/* Onest (SIL OFL, see /assets/fonts/Onest-OFL.txt) — text font for everything you type into */
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/onest-latin-wght-normal.woff2") format("woff2-variations"), url("/assets/fonts/onest-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/assets/fonts/onest-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations"), url("/assets/fonts/onest-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/onest-cyrillic-ext-wght-normal.woff2") format("woff2-variations"), url("/assets/fonts/onest-cyrillic-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

:root {
  --bg: #eef1f6;            /* page = every surface (neumorphism needs one colour) */
  --surface: #eef1f6;
  --surface2: #e6eaf1;      /* slightly deeper, for nested things */
  --hi: #ffffff;            /* light from top-left */
  --lo: rgba(163, 177, 198, 0.55); /* shadow to bottom-right */
  --lo2: rgba(163, 177, 198, 0.42);
  --ink: #1f2433;           /* main text + primary button */
  --text: #2b3040;
  --muted: #8b93a7;
  --faint: #b6bccb;
  --line: #dde2ea;
  --accent: #8cff00;        /* PostHero lime, used sparingly (dots, toggles, focus) */
  --accent-ink: #4f8f00;    /* readable lime for text on white */
  --pink: #ff0066;
  --danger: #e5383b;
  --warn: #b7791f;
  --tg-blue: #3e88f7;
  --tg-green: #31b545;
  --tg-red: #e5383b;

  --out: 6px 6px 14px var(--lo), -6px -6px 14px var(--hi);
  --out-sm: 3px 3px 7px var(--lo2), -3px -3px 7px var(--hi);
  --in: inset 3px 3px 7px var(--lo2), inset -3px -3px 7px var(--hi);
  --in-sm: inset 2px 2px 4px var(--lo2), inset -2px -2px 4px var(--hi);

  --display: "Coolvetica", "Outfit", system-ui, sans-serif;
  --text-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* inputs: thinner, has real bold */
  --ui: "Coolvetica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* Coolvetica has Latin, Latvian and Cyrillic */
  --r: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* old names still used in a few places */
  --navy: var(--ink); --lime: var(--accent); --card: var(--surface); --card2: var(--surface2); --field: var(--surface);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ui); font-size: 15px; letter-spacing: 0.2px; }
/* Coolvetica has one weight: don't let the browser smear a fake bold over it (real system fonts, e.g. in the preview, are unaffected) */
html { font-synthesis-weight: none; }
body { min-height: 100vh; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); }
a { color: var(--tg-blue); }
.hidden { display: none !important; }
/* file field inside the ＋ tile: invisible but still clickable through its <label> (display:none breaks Telegram Desktop) */
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
label.thumb.add { cursor: pointer; }
body.dropping .media-lib .ml-body { outline: 3px dashed var(--accent); outline-offset: 4px; border-radius: 16px; }
::selection { background: rgba(140, 255, 0, 0.35); }

.splash { min-height: 100vh; display: grid; place-items: center; }
.loader { width: 56px; height: 56px; border-radius: 50%; box-shadow: var(--out); position: relative; }
.loader::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--accent); animation: breathe 1.1s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(0.55); opacity: 0.6; } }

/* ---------- screens ---------- */
.screen { padding: 16px 18px calc(110px + var(--safe-b)); max-width: 640px; margin: 0 auto; animation: fade 0.18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.topbar { display: flex; align-items: center; gap: 12px; margin: 4px 2px 18px; min-height: 40px; }
.topbar h2 { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: 0.3px; margin: 0; flex: 1; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
.topbar .mini-ava { width: 44px; height: 44px; border-radius: 14px; flex: none; }

/* ---------- buttons ---------- */
/* .btn = primary (dark ink), .btn.dark = soft raised (secondary) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ui); font-weight: 600; font-size: 15px; letter-spacing: 0.1px; line-height: 1.1;
  height: 46px; padding: 0 18px; border-radius: 14px; white-space: nowrap;
  background: var(--ink); color: #fff;
  box-shadow: 5px 5px 12px var(--lo), -5px -5px 12px var(--hi);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s;
  user-select: none;
}
.btn:active { transform: scale(0.98); box-shadow: 2px 2px 5px var(--lo2), -2px -2px 5px var(--hi); }
.btn.big { height: 56px; font-size: 17px; width: 100%; border-radius: 18px; }
.btn.small { height: 34px; font-size: 13.5px; padding: 0 14px; border-radius: 11px; box-shadow: var(--out-sm); }
.btn.dark { background: var(--surface); color: var(--ink); box-shadow: var(--out-sm); }
.btn.dark:active { box-shadow: var(--in-sm); transform: none; }
.btn.dark.small { box-shadow: var(--out-sm); }
.btn.dark.small:active { box-shadow: var(--in-sm); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); box-shadow: var(--in); }
.btn.ghost:active { color: var(--ink); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.iconbtn { width: 36px; height: 36px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 16px; color: var(--muted); flex: none; }
.iconbtn:active { box-shadow: var(--in-sm); color: var(--ink); }
.iconbtn.round { border-radius: 50%; width: 40px; height: 40px; box-shadow: var(--out-sm); font-weight: 600; color: var(--ink); }
.iconbtn.round:active { box-shadow: var(--in-sm); }

/* ---------- home ---------- */
.panel-tab { font-family: var(--display); font-size: 30px; color: var(--ink); letter-spacing: 0.3px; line-height: 1; }
.panel { background: var(--surface); border-radius: 22px; padding: 10px; margin: 0 0 22px; box-shadow: var(--out); }

.chan { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 10px; }
.chan + .chan { border-top: 1px solid var(--line); border-radius: 0; }
.chan .ava { width: 50px; height: 50px; border-radius: 50%; flex: none; background: var(--surface); box-shadow: var(--out-sm); color: var(--muted);
  display: grid; place-items: center; font-family: var(--display); font-size: 22px; overflow: hidden; }
.chan .ava img { width: 100%; height: 100%; object-fit: cover; }
.chan .meta { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chan .name { font-weight: 600; font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chan .who { flex: 1 1 120px; min-width: 0; }
.chan .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 12px 10px 4px; }
.tag-head + .chan { border-top: none; }
.chan + .tag-head { border-top: 1px solid var(--line); margin-top: 4px; }
.chat-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin: -4px 2px 14px; }
.chat-info > span { flex: 1 1 160px; min-width: 0; }
.chip.tag-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.tag-chips .chip { height: 32px; padding: 0 12px; font-size: 13px; }
.check-row { display: flex; align-items: center; gap: 10px; margin: 12px 2px; font-size: 14px; color: var(--ink); }
.chan .acts { display: flex; gap: 8px; }
.chan .acts .btn { height: 32px; min-width: 64px; font-size: 13px; padding: 0 12px; }
.chan.empty { justify-content: center; color: var(--muted); font-size: 14px; padding: 22px 14px; text-align: center; line-height: 1.45; }

.add-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; margin-top: 6px; border-radius: 14px;
  color: var(--muted); font-size: 14.5px; font-weight: 500; box-shadow: var(--in-sm); }
.add-row:active { color: var(--ink); box-shadow: var(--in); }
.add-row .plus-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1; }

.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.twin .btn { width: 100%; height: 58px; border-radius: 18px; font-size: 15px; box-shadow: var(--out); }
.twin .btn:active { box-shadow: var(--in); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pink); color: #fff; font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0; }

.create { background: var(--ink); color: #fff; width: 100%; height: 60px; border-radius: 20px; font-weight: 600; font-size: 17px; letter-spacing: 0.2px;
  box-shadow: 6px 6px 16px var(--lo), -6px -6px 16px var(--hi); display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 0.12s; }
.create::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.create:active { transform: scale(0.985); }

.foot { text-align: center; color: var(--muted); font-size: 12.5px; margin: 30px 0 6px; line-height: 2; }
.foot button { color: var(--muted); padding: 0 4px; text-decoration: none; border-bottom: 1px solid var(--faint); line-height: 1.3; }
.foot button:active { color: var(--ink); }
.foot .star { border-bottom-color: transparent; color: var(--text); }
.foot .lang-on { color: var(--ink); font-weight: 600; }

/* ---------- lists / cards ---------- */
.list-card { background: var(--surface); border-radius: var(--r); padding: 14px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center; box-shadow: var(--out-sm); }
.list-card .grow { flex: 1; min-width: 0; }
.list-card .t { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-card .s { color: var(--muted); font-size: 13px; margin-top: 3px; }
.list-card .row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.list-card .oi { width: 40px; height: 40px; border-radius: 12px; box-shadow: var(--in-sm); display: grid; place-items: center; flex: none; }
.stat { display: inline-flex; gap: 4px; align-items: center; box-shadow: var(--in-sm); border-radius: 8px; padding: 3px 8px; font-size: 12.5px; color: var(--text); margin: 8px 6px 0 0; }
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin: 26px 4px 12px; }
.empty-note { color: var(--muted); text-align: center; padding: 28px 10px; line-height: 1.5; }

/* ---------- editor ---------- */
.ed-head { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 10px 0; margin: -16px 0 8px; }
.ed-head .row1 { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 6px; border-radius: 19px; background: var(--surface); box-shadow: var(--out-sm); color: var(--ink); font-size: 14px; font-weight: 500; max-width: 60vw; }
.chip:active { box-shadow: var(--in-sm); }
.mini-ava { width: 26px; height: 26px; border-radius: 50%; background: var(--surface2); overflow: hidden; display: grid; place-items: center; font-size: 12px; color: var(--muted); flex: none; font-family: var(--display); }
.mini-ava img { width: 100%; height: 100%; object-fit: cover; }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved { color: var(--faint); font-size: 12px; margin-left: auto; white-space: nowrap; }
.tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; border-radius: 14px; padding: 4px; margin-top: 12px; box-shadow: var(--in-sm); }
.tabs button { height: 36px; border-radius: 11px; font-weight: 600; font-size: 14px; color: var(--muted); transition: all 0.15s; }
.tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--out-sm); }
.editing-banner { border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--muted); margin: 12px 0 0; box-shadow: var(--in-sm); }
.editing-banner::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }

.blocks { display: flex; flex-direction: column; gap: 0; }
/* Each block type has its own colour: a stripe on the left + tinted icon, so blocks don't blend together. */
.block, .kb-box { --bc: var(--muted); }
[data-type="title"]    { --bc: #5ccc00; }
[data-type="heading"]  { --bc: #ff6a00; }
[data-type="text"]     { --bc: #3e88f7; }
[data-type="list"]     { --bc: #00b3a4; }
[data-type="quote"]    { --bc: #9b5cff; }
[data-type="details"]  { --bc: #ff0066; }
[data-type="table"]    { --bc: #f2b200; }
[data-type="gallery"]  { --bc: #e5383b; }
[data-type="file"]     { --bc: #a0715c; }
[data-type="buttons"]  { --bc: #1fa35a; }
[data-type="code"]     { --bc: #1f2433; }
[data-type="contents"] { --bc: #5b5bd6; }
[data-type="jump"]     { --bc: #0aa5c9; }
[data-type="divider"]  { --bc: #a3aabb; }
[data-type="footer"]   { --bc: #7d86a0; }
[data-type="math"]     { --bc: #c2185b; }
[data-type="keyboard"] { --bc: #3e88f7; }

.block { background: var(--surface); border-radius: var(--r); padding: 10px 12px 12px 20px; position: relative; box-shadow: var(--out-sm); transition: box-shadow 0.2s; }
.block::before, .kb-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: var(--r) 0 0 var(--r); background: var(--bc); }
.block.flash { box-shadow: var(--out-sm), 0 0 0 2px var(--accent); }
.block.err { box-shadow: var(--out-sm), 0 0 0 2px rgba(229, 56, 59, 0.7); }
.block .bh, .kb-box .bh { display: flex; align-items: center; gap: 3px; margin-bottom: 10px; min-height: 34px; margin-right: -4px; }
.block .bh .ico, .kb-box .bh .ico { width: 30px; height: 30px; border-radius: 10px; margin-right: 3px; display: grid; place-items: center; font-size: 15px; flex: none;
  background: var(--surface2); background: color-mix(in srgb, var(--bc) 16%, var(--surface)); color: var(--bc); box-shadow: var(--in-sm); }
.block .bh .iconbtn, .kb-box .bh .iconbtn { width: 28px; height: 32px; border-radius: 10px; }

/* block name: big Coolvetica, tap it (or the chevron) to collapse */
.lbl-wrap { flex: 1; min-width: 0; text-align: left; padding: 2px 2px; display: flex; flex-direction: column; gap: 1px; }
.block .bh .lbl, .kb-box .bh .lbl { font-family: var(--display); font-size: 18px; font-weight: 400; line-height: 1.1; letter-spacing: 0.3px; color: var(--ink);
  text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-box .bh .lbl { white-space: normal; }
.kb-box .bh .btn.small { margin-left: 4px; }
.lbl-wrap .sum { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-wrap .sum:empty { display: none; }
.iconbtn.chev { color: var(--ink); }
.chev-i { width: 9px; height: 9px; border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.collapsed > .bh .chev-i { transform: translateY(1px) rotate(-45deg); }
.collapsed > .bh { margin-bottom: 0; }
.collapsed > .bbody { display: none; }

.inner-blocks { margin: 12px 0 0; padding: 10px 8px 4px; border-radius: 14px; box-shadow: var(--in-sm); }
.inner-blocks .block { box-shadow: var(--out-sm); }

/* "+" between blocks: clearly visible, with a faint line either side */
.ins { display: flex; justify-content: center; align-items: center; height: 44px; position: relative; }
.ins::before { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; border-top: 1.5px dashed var(--faint); }
.ins .plus { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--out-sm);
  font-family: var(--display); font-size: 24px; line-height: 1; display: grid; place-items: center; padding-bottom: 2px; }
.ins .plus:active { box-shadow: var(--in-sm); color: var(--accent-ink); }
.add-block { margin-top: 16px; height: 52px; }

.field { width: 100%; background: var(--surface); border: 0; border-radius: 12px; padding: 11px 12px; outline: none; resize: none; line-height: 1.4; box-shadow: var(--in-sm); transition: box-shadow 0.15s; }
.field::placeholder { color: var(--faint); }
.field:focus { box-shadow: var(--in-sm), 0 0 0 2px rgba(140, 255, 0, 0.55); }
textarea.field { min-height: 76px; }
.field.title { font-size: 20px; font-weight: 700; color: var(--ink); }
.field.heading { font-size: 17px; font-weight: 700; color: var(--ink); }
.field.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; white-space: pre; overflow-x: auto; }
.field.small { padding: 8px 10px; font-size: 14px; border-radius: 10px; }
select.field { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.lbl-sm { display: block; color: var(--muted); font-size: 12.5px; margin: 12px 2px 6px; }
.hint { color: var(--muted); font-size: 12.5px; margin: 8px 2px 0; line-height: 1.5; }
.hint code, .tips code { background: var(--surface2); padding: 1px 5px; border-radius: 5px; color: var(--ink); }
.gap { height: 10px; }
.row-flex { display: flex; gap: 10px; align-items: center; }
.row-flex > .grow { flex: 1; min-width: 0; }

/* ---------- formatting toolbar (docked at the bottom while typing) ---------- */
#fmtbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: 6px; padding: 10px 10px calc(10px + var(--safe-b));
  background: var(--bg); box-shadow: 0 -6px 18px rgba(163, 177, 198, 0.35); border-radius: 18px 18px 0 0; }
body.typing #fmtbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
body.typing .actionbar { display: none; }
#fmtbar button { min-width: 0; width: 100%; height: 44px; padding: 3px 2px 2px; border-radius: 11px; background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: var(--out-sm); }
#fmtbar button:active { box-shadow: var(--in-sm); }
#fmtbar .fi-ico { font-size: 15px; line-height: 1; }
#fmtbar .fi-lbl { font-size: 9px; color: var(--muted); line-height: 1; letter-spacing: 0.2px; font-family: var(--ui); font-weight: 500; }
#fmtbar .b .fi-ico { font-weight: 800; } #fmtbar .i .fi-ico { font-style: italic; } #fmtbar .u .fi-ico { text-decoration: underline; } #fmtbar .s .fi-ico { text-decoration: line-through; }
#fmtbar .b, #fmtbar .i, #fmtbar .u, #fmtbar .s { font-weight: 400; font-style: normal; text-decoration: none; }
#fmtbar .multi { display: none; }
body.typing-multi #fmtbar .multi { display: flex; }
#fmtbar .done { background: var(--ink); color: #fff; }
#fmtbar .done .fi-ico { font-size: 16px; font-weight: 800; }
#fmtbar .done .fi-lbl { color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.fmt .b { font-weight: 800; } .fmt .i { font-style: italic; } .fmt .u { text-decoration: underline; } .fmt .s { text-decoration: line-through; }

/* ---------- small controls ---------- */
.seg { display: inline-flex; border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; box-shadow: var(--in-sm); }
.seg button { height: 30px; padding: 0 12px; border-radius: 9px; color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--out-sm); }
.toggle { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 14px; }
.toggle .sw { width: 44px; height: 26px; border-radius: 13px; position: relative; flex: none; box-shadow: var(--in-sm); transition: background 0.2s; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 2px 2px 4px var(--lo), -1px -1px 2px var(--hi); transition: transform 0.2s; }
.toggle.on .sw { background: var(--accent); box-shadow: inset 1px 1px 3px rgba(60, 110, 0, 0.35); }
.toggle.on .sw::after { transform: translateX(18px); background: #fff; }
.toggles { display: flex; flex-wrap: wrap; column-gap: 16px; }

.li-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.li-row .dot { width: 26px; text-align: center; color: var(--muted); font-weight: 700; flex: none; }
.li-row .chk { width: 26px; height: 26px; border-radius: 8px; box-shadow: var(--in-sm); flex: none; display: grid; place-items: center; color: var(--ink); font-weight: 900; font-size: 13px; }
.li-row .chk.on { background: var(--accent); box-shadow: none; }

.tbl { overflow-x: auto; padding: 4px 4px 6px; }
.tbl table { border-collapse: separate; border-spacing: 6px; }
.tbl td { padding: 0; }
.tbl input { width: 112px; }
.tbl tr:first-child input.hdr { font-weight: 700; color: var(--ink); }
.tbl .x { color: var(--muted); font-size: 13px; padding: 0 4px; }

.thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 10px; }
.thumb { width: 84px; height: 84px; border-radius: 14px; background: var(--surface2) center/cover no-repeat; flex: none; position: relative; display: grid; place-items: center; color: var(--muted); font-size: 24px; overflow: hidden; box-shadow: var(--out-sm); }
.thumb .tag { position: absolute; left: 5px; bottom: 5px; background: rgba(31, 36, 51, 0.7); color: #fff; font-size: 11px; border-radius: 6px; padding: 1px 6px; }
.thumb .rm, .thumb .mv { position: absolute; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--ink); font-size: 12px; display: grid; place-items: center; }
.thumb .rm { right: 4px; } .thumb .mv { left: 4px; }
.thumb.add { background: var(--surface); box-shadow: var(--in-sm); color: var(--muted); font-size: 28px; font-weight: 300; }
.filebox { display: flex; gap: 12px; align-items: center; border-radius: 14px; padding: 10px; box-shadow: var(--in-sm); }
.filebox .fi { width: 44px; height: 44px; border-radius: 50%; background: var(--tg-blue); color: #fff; display: grid; place-items: center; font-size: 20px; flex: none; background-size: cover; background-position: center; }

.ibtn-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.ibtn-row .field { flex: 1 1 120px; }
.swatches { display: flex; gap: 10px; }
.sw-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: var(--out-sm); border: 3px solid var(--surface); }
.sw-dot.on { box-shadow: 0 0 0 2px var(--ink); }
.sw-default { background: #c9ced8; } .sw-primary { background: var(--tg-blue); } .sw-success { background: var(--tg-green); } .sw-danger { background: var(--tg-red); }

/* buttons-under-post editor */
.kb-box { position: relative; background: var(--surface); border-radius: var(--r); padding: 12px 12px 12px 20px; margin-top: 18px; box-shadow: var(--out-sm); }
.kb-rows { display: flex; flex-direction: column; gap: 8px; }
.kb-row { display: flex; gap: 8px; }
.kb-btn { flex: 1; min-width: 0; height: 40px; border-radius: 11px; background: var(--surface); color: var(--ink); box-shadow: var(--out-sm); font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.kb-btn.primary { background: var(--tg-blue); color: #fff; } .kb-btn.success { background: var(--tg-green); color: #fff; } .kb-btn.danger { background: var(--tg-red); color: #fff; }
.kb-btn:active { box-shadow: var(--in-sm); }
.presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.preset { height: 34px; padding: 0 11px; border-radius: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; box-shadow: var(--out-sm); }
.preset.on { color: var(--ink); font-weight: 600; box-shadow: var(--in-sm); }
.preset .mini { display: grid; gap: 2px; }
.preset .mini i { display: flex; gap: 2px; } .preset .mini b { display: block; height: 5px; border-radius: 2px; background: currentColor; flex: 1; width: 6px; }

/* bottom action bar */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 14px 18px calc(14px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 72%, rgba(238, 241, 246, 0)); display: flex; gap: 12px; max-width: 640px; margin: 0 auto; }
.actionbar .btn { flex: 1; height: 52px; border-radius: 16px; }
.actionbar .btn.dark { flex: 0 0 auto; }

.problems { margin-top: 16px; }
.problem { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 10px 12px; border-radius: 12px; margin-bottom: 8px; color: var(--warn); box-shadow: var(--in-sm); }
.problem.error { color: var(--danger); }

/* ---------- preview (Telegram-like) ---------- */
.chatbg { border-radius: 20px; padding: 14px 10px 10px; min-height: 300px; box-shadow: var(--in);
  background: radial-gradient(circle at 20% 20%, #dcebc8 0, transparent 45%), radial-gradient(circle at 80% 70%, #c3dfab 0, transparent 50%), linear-gradient(160deg, #d2e8b8, #b9d99c); }
.bubble { background: #fff; color: #111; border-radius: 14px 14px 14px 4px; padding: 8px 11px 6px; max-width: 100%; font-size: 15px; line-height: 1.38; overflow: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 1px 1px rgba(0,0,0,0.12); }
.bubble .chname { color: #2481cc; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.bubble .meta { text-align: right; color: #8a8a8a; font-size: 12px; margin-top: 4px; }
.bubble p { margin: 0 0 8px; }
.bubble h1 { font-size: 21px; margin: 4px 0 8px; line-height: 1.2; }
.bubble h2 { font-size: 18px; margin: 12px 0 6px; line-height: 1.25; }
.bubble a { color: #2481cc; text-decoration: none; }
.bubble ul, .bubble ol { margin: 0 0 8px; padding-left: 22px; }
.bubble li { margin: 2px 0; }
.bubble li:has(> input) { list-style: none; margin-left: -20px; }
.bubble input[type=checkbox] { accent-color: #2481cc; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.bubble blockquote { margin: 4px 0 8px; padding: 6px 10px; border-left: 3px solid #2481cc; background: #e9f3fc; border-radius: 6px; }
.bubble blockquote p:last-of-type { margin-bottom: 2px; }
.bubble cite { display: block; color: #2481cc; font-style: normal; font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.bubble aside { text-align: center; font-style: italic; margin: 8px auto; padding: 8px 14px; background: #e9f3fc; border-radius: 10px; width: fit-content; max-width: 90%; }
.bubble aside cite { font-style: normal; }
.bubble details { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 6px 0; margin: 4px 0 8px; }
.bubble details details { border: 0; padding-left: 12px; }
.bubble summary { cursor: pointer; font-weight: 500; }
.bubble table { border-collapse: collapse; margin: 4px 0 8px; font-size: 14px; width: 100%; }
.bubble table[bordered] td, .bubble table[bordered] th { border: 1px solid #ddd; }
.bubble table[striped] tr:nth-child(even) td { background: #f5f7fa; }
.bubble td, .bubble th { padding: 7px 9px; text-align: left; }
.bubble table[compact] td, .bubble table[compact] th { padding: 3px 6px; font-size: 13px; }
.bubble th { background: #f0f2f5; }
.bubble pre { background: #eef1f5; border-left: 3px solid #2481cc; border-radius: 6px; padding: 26px 10px 8px; margin: 4px 0 8px; overflow-x: auto; font-size: 13px; position: relative; }
.bubble pre::before { content: attr(data-lang); position: absolute; top: 0; left: 0; right: 0; padding: 3px 10px; background: #d9e0e8; font-size: 12px; color: #5a6773; }
.bubble pre::after { content: "⧉"; position: absolute; top: 2px; right: 8px; color: #5a6773; }
.bubble code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; color: #c0392b; }
.bubble pre code { color: #1e2b38; }
.bubble mark { background: #fff3a8; padding: 0 2px; border-radius: 3px; }
.bubble tg-spoiler { background: #c9c9c9; color: transparent; border-radius: 4px; cursor: pointer; }
.bubble tg-spoiler.shown { background: transparent; color: inherit; }
.bubble hr { border: 0; border-top: 1px solid #e3e3e3; margin: 10px 0; }
.bubble footer { color: #8a8a8a; font-size: 13px; margin: 6px 0; }
.bubble tg-time { color: #2481cc; }
.bubble tg-math-block { display: block; text-align: center; font-family: "Times New Roman", serif; font-style: italic; margin: 8px 0; overflow-x: auto; }
.bubble figure { margin: 0 0 8px; }
.bubble figure img, .bubble .pv-img { width: 100%; border-radius: 8px; display: block; }
.bubble figcaption { color: #6b6b6b; font-size: 13px; margin-top: 4px; }
.bubble tg-slideshow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin: 0 -11px 8px; border-radius: 0; }
.bubble tg-slideshow > img, .bubble tg-slideshow > .pv-vid { flex: 0 0 100%; scroll-snap-align: start; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bubble tg-slideshow > figcaption { display: none; }
.bubble .ss-cap { color: #6b6b6b; font-size: 13px; margin: -4px 0 8px; }
.bubble tg-collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin: 0 0 8px; }
.bubble tg-collage > img, .bubble tg-collage > .pv-vid { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.bubble tg-collage > figcaption { grid-column: 1 / -1; color: #6b6b6b; font-size: 13px; }
.bubble .pv-vid { position: relative; display: block; background: #222 center/cover no-repeat; min-height: 120px; }
.bubble .pv-vid::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 30px; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.bubble .pv-doc { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; }
.bubble .pv-doc .fi { width: 44px; height: 44px; border-radius: 22px; background: #2481cc center/cover; color: #fff; display: grid; place-items: center; font-size: 19px; flex: none; }
.bubble .pv-doc .n { color: #2481cc; font-weight: 500; word-break: break-all; }
.bubble .pv-doc .z { color: #8a8a8a; font-size: 12.5px; }
.pv-kb { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pv-kb .r { display: flex; gap: 4px; }
.pv-kb .k { flex: 1; min-width: 0; text-align: center; padding: 10px 6px; border-radius: 10px; background: rgba(40, 70, 30, 0.32); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(6px); }
.pv-kb .k.primary { background: #2481cc; } .pv-kb .k.success { background: #31b545; } .pv-kb .k.danger { background: #e5383b; }
.pv-note { color: var(--muted); font-size: 12.5px; text-align: center; margin: 12px 0 0; }

/* ---------- sheets ---------- */
.sheet-bg { position: fixed; inset: 0; background: rgba(31, 36, 51, 0.28); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: flex-end; justify-content: center; animation: fadebg 0.15s ease; }
@keyframes fadebg { from { opacity: 0; } }
.sheet { background: var(--bg); width: 100%; max-width: 640px; border-radius: 26px 26px 0 0; padding: 10px 18px calc(20px + var(--safe-b)); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 -10px 30px rgba(31, 36, 51, 0.12); animation: up 0.2s cubic-bezier(.2,.8,.3,1); }
@keyframes up { from { transform: translateY(40px); opacity: 0.5; } }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; box-shadow: var(--in-sm); margin: 2px auto 14px; }
.sheet h3 { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: 24px; letter-spacing: 0.3px; margin: 0 0 14px; }
.sheet .opts { display: flex; flex-direction: column; gap: 6px; }
.opt { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px; border-radius: 14px; width: 100%; transition: box-shadow 0.15s; }
.opt:active { box-shadow: var(--in-sm); }
.opt.on { box-shadow: var(--out-sm); }
.opt .oi { width: 38px; height: 38px; border-radius: 12px; box-shadow: var(--out-sm); display: grid; place-items: center; font-size: 17px; flex: none; overflow: hidden; }
.opt .oi img { width: 100%; height: 100%; object-fit: cover; }
.opt .oi .x { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--display); color: var(--muted); font-size: 15px; }
.opt .ot { font-weight: 600; color: var(--ink); }
.opt .os { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.opt.danger .ot { color: var(--danger); }
.picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 4px; }
.pick { background: var(--surface); border-radius: 16px; padding: 14px 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; box-shadow: var(--out-sm); }
.pick:active { box-shadow: var(--in-sm); }
.pick .pi { font-size: 22px; height: 30px; display: grid; place-items: center; }
.pick .pt { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.pick .ps { font-size: 11px; color: var(--muted); line-height: 1.25; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile, 84px), 1fr)); gap: 8px; padding: 4px; }
.media-grid .thumb { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
.media-grid .thumb.sel { box-shadow: 0 0 0 3px var(--ink); }
.media-grid .thumb .n { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; border-radius: 12px; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.media-grid .thumb .nm { position: absolute; left: 4px; right: 4px; bottom: 4px; font-size: 10.5px; color: #fff; background: rgba(31, 36, 51, 0.65); border-radius: 6px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 8px; padding: 4px; }
.stars button { border-radius: 16px; padding: 16px 4px; font-weight: 600; font-size: 17px; color: var(--ink); box-shadow: var(--out-sm); }
.stars button:active { box-shadow: var(--in-sm); }
.tips p { margin: 0 0 10px; line-height: 1.55; font-size: 14px; }

.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-grid button { font-size: 24px; height: 42px; border-radius: 10px; }
.emoji-grid button:active { box-shadow: var(--in-sm); }
.emoji-btn { flex: none; font-size: 18px; box-shadow: var(--out-sm); }
.ibtn-row .emoji-btn { height: 34px; }

#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; font-weight: 500; font-size: 14px;
  padding: 11px 18px; border-radius: 14px; opacity: 0; pointer-events: none; transition: all 0.25s; z-index: 200; max-width: 88vw; text-align: center; box-shadow: 0 8px 24px rgba(31, 36, 51, 0.25); }
#toast.on { opacity: 1; transform: translateX(-50%); }
#toast.bad { background: var(--danger); }

.done-hero { text-align: center; padding: 10px 0 6px; }
.done-hero .big { font-size: 46px; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; box-shadow: var(--out); display: grid; place-items: center; }
.done-hero .t { font-family: var(--display); font-size: 26px; color: var(--ink); margin: 14px 0 6px; }
.outside { padding: 60px 24px; text-align: center; line-height: 1.6; color: var(--text); }
.outside .wordmark { font-family: var(--display); font-size: 34px; color: var(--ink); margin-bottom: 18px; }

/* ---------- interactive screens ---------- */
[data-type="screen"] { --bc: #8a4dff; }
/* Post · Screen 1 · Screen 2 · ＋ Screen */
.scr-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 10px; margin: 4px -4px 6px; scrollbar-width: none; }
.scr-bar::-webkit-scrollbar { display: none; }
.scr-chip { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; font-size: 14px; color: var(--muted); background: var(--surface); box-shadow: var(--out-sm); white-space: nowrap; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; }
.scr-chip.on { color: var(--ink); box-shadow: var(--in-sm); }
.scr-chip:active { box-shadow: var(--in-sm); }
.scr-chip.add { color: #8a4dff; box-shadow: none; border: 1.5px dashed color-mix(in srgb, #8a4dff 45%, transparent); }
.scr-bar.pv { margin-bottom: 10px; }
.screen-head { position: relative; background: var(--surface); border-radius: var(--r); padding: 12px 12px 12px 20px; margin-bottom: 14px; box-shadow: var(--out-sm); }
.screen-head::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; border-radius: var(--r) 0 0 var(--r); background: var(--bc); }
.screen-head .field { font-family: var(--display); font-size: 18px; }
.hint.warn { color: var(--warn); }
.ibtn-row .field.act { flex: 0 1 150px; }
.act-what { display: flex; flex: 1 1 160px; gap: 8px; align-items: center; flex-wrap: wrap; }
.act-what .field { flex: 1 1 140px; }
.act-what .toggle { padding: 2px; font-size: 13px; }
.pv-private { font-size: 13px; color: #6b3fd6; background: color-mix(in srgb, #8a4dff 10%, var(--surface)); border-radius: 12px; padding: 9px 12px; margin: 0 0 10px; line-height: 1.4; }
.bubble.private { box-shadow: 0 0 0 2px #8a4dff, 0 1px 1px rgba(0,0,0,0.12); }
.pv-kb .k.tap { cursor: pointer; border: 0; font: inherit; font-size: 14px; font-weight: 600; color: #fff; }
.pv-kb .k.tap:active { filter: brightness(1.15); }
.bubble tg-button[data^="pv:"] { cursor: pointer; }
.bubble tg-button[data^="pv:"]:active { filter: brightness(0.92); }

/* ---------- preview buttons, matched to real Telegram screenshots ---------- */
/* inside the post: no align = full width, align = compact pills; ↗ only on link buttons */
.bubble tg-button-row { display: flex; gap: 6px; margin: 6px 0 8px; justify-content: stretch; }
.bubble tg-button-row > tg-button { flex: 1 1 0; min-width: 0; }
.bubble tg-button-row[align] > tg-button { flex: 0 1 auto; }
.bubble tg-button-row[align="left"] { justify-content: flex-start; }
.bubble tg-button-row[align="center"] { justify-content: center; }
.bubble tg-button-row[align="right"] { justify-content: flex-end; }
.bubble tg-button { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 32px; padding: 6px 14px; border-radius: 16px;
  background: #eff1f4; color: #1f1f1f; font-weight: 500; font-size: 14.5px; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble tg-button[style="primary"] { background: #3e99de; color: #fff; }
.bubble tg-button[style="success"] { background: #34b04a; color: #fff; }
.bubble tg-button[style="danger"] { background: #e5484d; color: #fff; }
.bubble tg-button-row[align] > tg-button { min-height: 26px; padding: 3px 12px; border-radius: 14px; font-size: 14px; }
.bubble tg-button-row[align] > tg-button[style="primary"] { background: rgba(62, 153, 222, 0.14); color: #2481cc; }
.bubble tg-button-row[align] > tg-button[style="success"] { background: rgba(52, 176, 74, 0.15); color: #2f9e44; }
.bubble tg-button-row[align] > tg-button[style="danger"] { background: rgba(229, 72, 77, 0.13); color: #e03c41; }
.bubble tg-button[type="url"]::after { content: "↗"; font-size: 0.72em; margin-left: 3px; align-self: flex-start; margin-top: 1px; }
/* under the post: ↗ / copy mark in the corner, nothing on buttons that act inside Telegram */
.pv-kb .k { position: relative; }
.pv-kb .k.url::after, .pv-kb .k.copy::after { position: absolute; top: 2px; right: 6px; font-size: 10px; opacity: 0.9; }
.pv-kb .k.url::after { content: "↗"; }
.pv-kb .k.copy::after { content: "⧉"; }

/* ---------- button sheet: "When someone taps it" ---------- */
.act-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.act-card { position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 10px 34px 10px 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--out-sm); }
.act-card .ai { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; font-size: 17px; box-shadow: var(--in-sm); }
.act-card .at { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.act-card .at b { font-size: 15.5px; font-weight: 400; color: var(--ink); font-family: var(--display); letter-spacing: 0.2px; }
.act-card .at small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.act-card.on { box-shadow: var(--in-sm); }
.act-card.on .ai { background: var(--ink); box-shadow: none; }
.act-card.on::after { content: "✓"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--ink); }

/* editor chips for buttons (inside the post and under it) */
.kb-btn .act-i { margin-left: 6px; font-size: 11px; opacity: 0.55; }
.kb-row.in-post { flex-wrap: wrap; margin-bottom: 10px; }
.kb-row.in-post:not(.stretch) .kb-btn { flex: 0 1 auto; padding: 0 14px; }
.kb-row.in-post.left { justify-content: flex-start; } .kb-row.in-post.center { justify-content: center; } .kb-row.in-post.right { justify-content: flex-end; }

/* hidden pages: panel at the bottom of the post, header on a page */
.pages-box { margin-top: 14px; }
.page-row { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--out-sm); margin-bottom: 8px; }
.page-row:active { box-shadow: var(--in-sm); }
.page-row .pr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.page-row .pr-t b { font-family: var(--display); font-weight: 400; font-size: 16px; color: var(--ink); }
.page-row .pr-t small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-row .pr-t small.warn { color: var(--warn); }
.page-row .pr-c { color: var(--muted); font-size: 22px; line-height: 1; }
.screen-head .back-post { color: #8a4dff; font-size: 14.5px; padding: 0 0 8px; }
.screen-head .ph-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #8a4dff; margin-bottom: 6px; }

/* ---------- flow map (Flow tab) ---------- */
.flow .fl-intro { margin: 4px 2px 14px; }
.fl-card { margin-top: 0; scroll-margin-top: 150px; transition: box-shadow 0.2s; }
.fl-card.flash { box-shadow: var(--out-sm), 0 0 0 2px var(--bc); }
.fl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fl-kind { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--bc); }
.fl-edit { font-size: 13.5px; color: var(--muted); padding: 2px 4px; }
.fl-title { display: block; text-align: left; font-family: var(--display); font-size: 19px; color: var(--ink); margin: 0 0 10px; line-height: 1.15; }
.fl-warn { font-size: 12.5px; color: var(--warn); margin: -4px 0 10px; }
.fl-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.fl-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.1fr); align-items: center; gap: 6px; }
.fl-row .kb-btn { height: 36px; font-size: 13px; }
.fl-arrow { text-align: center; color: var(--muted); font-size: 16px; }
.fl-to { font-size: 13px; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; padding: 8px 10px; border-radius: 10px; box-shadow: var(--in-sm); }
.fl-to.page { color: #6b3fd6; font-weight: 600; }
.fl-to.bad { color: var(--danger); }
button.fl-to:active { box-shadow: var(--in); }
.fl-link { width: 2px; height: 22px; margin: 0 auto; background: repeating-linear-gradient(to bottom, var(--faint) 0 4px, transparent 4px 8px); }
.flow .section-title { margin-top: 24px; }
.flow .fl-card + .fl-card { margin-top: 14px; }
/* "Interactive button" in the block picker */
.picker .pick.interactive { grid-column: 1 / -1; flex-direction: row; text-align: left; gap: 12px; padding: 12px 14px; }
.picker .pick.interactive .pi { font-size: 24px; }
.picker .pick.interactive .pt { font-size: 15px; }
.picker .pick.interactive .ps { font-size: 12px; flex: 1; }

/* ---------- code lock ---------- */
.lock-box { margin: 10px 0 4px; padding: 8px 10px; border-radius: 12px; box-shadow: var(--in-sm); }
.lock-box.on { padding-bottom: 12px; }
.lock-box .toggle { padding: 4px 0; }
.code-in { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: 6px; text-align: center; }
.pv-kb.keypad .k.tap { font-size: 18px; padding: 12px 6px; }

/* ---------- text you type: Onest, normal weight (Coolvetica stays for the app itself) ---------- */
.field:not(.mono):not(.code-in), .sheet .field:not(.mono):not(.code-in) { font-family: var(--text-font); font-weight: 400; letter-spacing: 0; }
.field.title:not(.mono) { font-weight: 650; }
.field.heading:not(.mono) { font-weight: 600; }
.field::placeholder { font-weight: 400; }

/* ---------- sticky context bar: [‹ Back] [✏️ Editing published post] ---------- */
.ctx-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
.ctx-back { flex: none; height: 34px; padding: 0 14px 0 10px; border-radius: 17px; background: var(--ink); color: #fff; font-size: 14.5px; letter-spacing: 0.2px; box-shadow: var(--out-sm); }
.ctx-back:active { transform: scale(0.97); }
.ctx-page { flex: 1; min-width: 0; font-size: 14px; color: #8a4dff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-bar .editing-banner { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 12px; }

/* ---------- toolbar modes: plain fields (button text, pop-ups) show only what Telegram allows there ---------- */
body.typing #fmtbar { z-index: 130; }
body.typing-plain #fmtbar button:not(.plain) { display: none !important; }
#fmtbar .name-btn { display: none; }
body.typing-name #fmtbar .name-btn { display: flex; }
#fmtbar .plain-note { display: none; grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); text-align: center; padding: 0 0 2px; }
body.typing-plain #fmtbar .plain-note { display: block; }
body.typing .sheet-bg { padding-bottom: var(--fmt-h, 0px); }
body.typing .sheet { max-height: calc(88vh - var(--fmt-h, 0px)); border-radius: 26px; }

/* ---------- visual text fields (formatting shows as it looks) ---------- */
.field.rich { min-height: 44px; white-space: pre-wrap; word-break: break-word; cursor: text; -webkit-user-select: text; user-select: text; }
.field.rich[data-multi="1"] { min-height: 76px; }
.field.rich.small { min-height: 36px; }
.field.rich.cell { min-width: 112px; }
.field.rich.empty::before { content: attr(data-ph); color: var(--faint); pointer-events: none; white-space: pre-wrap; }
.field.rich b, .field.rich strong { font-weight: 700; }
.field.rich.title b, .field.rich.heading b { font-weight: 800; }
.field.rich i, .field.rich em { font-style: italic; }
.field.rich a { color: var(--tg-blue); text-decoration: underline; text-underline-offset: 2px; }
.field.rich mark { background: #fff3a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.field.rich .sp { background: repeating-linear-gradient(-45deg, #d7dbe3 0 4px, #e6e9ef 4px 8px); border-radius: 4px; padding: 0 2px; }
.field.rich code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em; color: #c0392b; background: var(--surface2); border-radius: 4px; padding: 1px 4px; }
.rf-chip { display: inline-block; margin: 0 1px; padding: 0 7px; border-radius: 8px; font-size: 0.9em; line-height: 1.5; vertical-align: baseline;
  background: color-mix(in srgb, var(--tg-blue) 12%, var(--surface)); color: #2463c4; -webkit-user-select: all; user-select: all; cursor: default; white-space: nowrap; }
.rf-chip.date { background: color-mix(in srgb, #8a4dff 12%, var(--surface)); color: #6b3fd6; }
.tbl .field.rich { width: 112px; }

/* ---------- full emoji picker ---------- */
.emoji-head { position: sticky; top: -10px; z-index: 2; background: var(--bg); padding: 4px 0 6px; margin: 0 -2px; }
.emoji-search { margin-bottom: 8px; }
.emoji-target { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 4px 4px 12px; border-radius: 14px; box-shadow: var(--in-sm); }
.emoji-target .et-text { flex: 1; min-width: 0; white-space: pre; overflow-x: auto; scrollbar-width: none; font-size: 17px; line-height: 34px; color: var(--ink); }
.emoji-target .et-text::-webkit-scrollbar { display: none; }
.emoji-target .et-ph { color: var(--muted); }
.emoji-target .et-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.15em; margin: 0 1px; background: var(--ink); animation: et-blink 1s steps(1) infinite; }
@keyframes et-blink { 50% { opacity: 0; } }
html.emoji-font .emoji-target .et-text { font-family: var(--text-font); }
.emoji-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tabs button { flex: none; width: 40px; height: 36px; border-radius: 10px; font-size: 20px; }
.emoji-tabs button.on { box-shadow: var(--in-sm); }
.emoji-sheet .emoji-grid { min-height: 240px; align-content: start; }

/* ---------- labels inside text: ((text|color)) ---------- */
/* preview: a tg-button that is not in a button row is a small tinted pill, like Telegram draws them */
.bubble p > tg-button, .bubble li > tg-button, .bubble td > tg-button, .bubble blockquote tg-button, .bubble aside tg-button, .bubble footer tg-button {
  display: inline-block; min-height: 0; padding: 1px 9px; margin: 1px 1px; border-radius: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.45; vertical-align: 1px;
  background: rgba(36, 129, 204, 0.08); color: #3d4b5c; flex: none; }
.bubble p > tg-button[style="primary"], .bubble li > tg-button[style="primary"], .bubble td > tg-button[style="primary"] { background: rgba(36, 129, 204, 0.12); color: #2481cc; }
.bubble p > tg-button[style="success"], .bubble li > tg-button[style="success"], .bubble td > tg-button[style="success"] { background: rgba(52, 176, 74, 0.14); color: #2f9e44; }
.bubble p > tg-button[style="danger"], .bubble li > tg-button[style="danger"], .bubble td > tg-button[style="danger"] { background: rgba(229, 72, 77, 0.12); color: #e03c41; }
/* editor */
.rf-chip.label { border-radius: 10px; font-weight: 500; }
.rf-chip.label.grey { background: color-mix(in srgb, #8b93a7 16%, var(--surface)); color: #4a5263; }
.rf-chip.label.blue { background: rgba(36, 129, 204, 0.13); color: #2481cc; }
.rf-chip.label.green { background: rgba(52, 176, 74, 0.15); color: #2f9e44; }
.rf-chip.label.red { background: rgba(229, 72, 77, 0.13); color: #e03c41; }
.key-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* answer options in the button sheet */
.answer-box { margin: 12px 0 4px; padding: 8px 12px; border-radius: 12px; box-shadow: var(--in-sm); }
.answer-box summary { cursor: pointer; font-size: 14px; color: var(--ink); padding: 4px 0; }
.answer-box[open] summary { margin-bottom: 4px; }
.fl-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); margin: -2px 0 2px 4px; }

/* ---------------------------------------------------------------- template cards (vertical, with the owner's screenshot) */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; margin-bottom: 8px; }
.tpl-card { display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 0; padding: 0; }
.tpl-card:active .tpl-shot { transform: scale(0.97); }
.tpl-card.is-hidden { opacity: 0.55; }
.tpl-shot { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--out-sm); transition: transform 0.15s; }
.tpl-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tpl-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center;
  background: linear-gradient(160deg, hsl(var(--h, 210) 70% 96%), hsl(calc(var(--h, 210) + 40) 60% 90%)); }
.tpl-emo { font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12)); }
.tpl-ph small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.tpl-ph b { font-weight: 400; font-size: 20px; color: var(--ink); line-height: 1.2; }
.tpl-badge { position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 3px 7px; border-radius: 99px; background: var(--ink); color: #fff; letter-spacing: 0.3px; }
.tpl-badge.soft { background: rgba(255, 255, 255, 0.85); color: var(--ink); }
.tpl-name { font-size: 13px; line-height: 1.25; color: var(--ink); padding: 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.owner-note { font-size: 13px; line-height: 1.45; color: var(--text); background: var(--surface); box-shadow: var(--in-sm); border-radius: 12px; padding: 10px 12px; margin: 4px 0 8px; }

/* full-screen view */
.zoom-bg { position: fixed; inset: 0; z-index: 100; background: rgba(18, 21, 30, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; padding: 14px 16px calc(14px + var(--safe-b)); transition: opacity 0.2s; }
.zoom-bg.out { opacity: 0; }
.zoom-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 34px 0 10px; touch-action: pan-y; }
.zoom-stage .tpl-shot.big { height: 100%; max-height: 100%; max-width: 100%; aspect-ratio: 9 / 16; width: auto; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
/* with a picture: the picture keeps its own shape (phone screenshots are taller than 9:16) */
.zoom-stage .tpl-shot.big.has-img { aspect-ratio: auto; height: auto; width: auto; background: none; display: flex; }
.zoom-stage .tpl-shot.big.has-img img { position: static; display: block; width: auto; height: auto; max-width: calc(100vw - 32px); max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); object-fit: contain; }
.zoom-stage .tpl-ph .tpl-emo { font-size: 64px; }
.zoom-info { width: 100%; max-width: 440px; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.zoom-name { font-size: 22px; line-height: 1.2; text-align: center; }
.zoom-desc { font-size: 14px; line-height: 1.45; text-align: center; color: rgba(255, 255, 255, 0.75); font-family: var(--text-font); }
.zoom-row { display: flex; gap: 10px; align-items: center; }
.zoom-row .btn { flex: 1; height: 50px; background: #fff; color: var(--ink); box-shadow: none; }
.zoom-row .iconbtn { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; }
.zoom-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.zoom-tools button { font-size: 13px; padding: 7px 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: #fff; }
.zoom-tools button.danger { color: #ff9b9d; }
.zoom-count { text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.zoom-x { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 16px; z-index: 2; }
.zoom-nav { position: absolute; top: 42%; width: 40px; height: 56px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 28px; z-index: 2; }
.zoom-nav.prev { left: 8px; } .zoom-nav.next { right: 8px; }
@media (hover: none) { .zoom-nav { display: none; } }   /* phones: swipe instead */

/* owner editing a starter */
.ctx-bar.tpl-edit { background: var(--surface); box-shadow: var(--in-sm); border-radius: 12px; padding: 6px 6px 6px 12px; }
.ctx-bar.tpl-edit .ctx-page { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.ctx-save { background: var(--ink); color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 13px; white-space: nowrap; }

.owner-tap { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---- flowchart (Flow tab on wide screens, public/app/chart.js) */
.screen.wide { max-width: none; padding-left: 20px; padding-right: 20px; }
.screen.wide .ed-head { max-width: 1100px; margin-left: auto; margin-right: auto; }
.fl-chart { margin: 0 0 12px; }
.fc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; }
.fc-tool { height: 34px; padding: 0 14px; border-radius: 17px; background: var(--surface); box-shadow: var(--out-sm); color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.fc-tool:active { box-shadow: var(--in-sm); }
.fc-zoombox { display: inline-flex; align-items: center; gap: 4px; }
.fc-zoombox .fc-tool { width: 34px; padding: 0; font-size: 17px; }
.fc-zoom { min-width: 44px; text-align: center; font-size: 13px; color: var(--muted); }
.fc-help { flex: 1; min-width: 200px; font-size: 12.5px; color: var(--muted); text-align: right; }
.fc-view { position: relative; overflow: auto; border-radius: 18px; box-shadow: var(--in); background: #e6eaf1;
  background-image: radial-gradient(circle, rgba(139, 147, 167, 0.28) 1px, transparent 1.2px); background-size: 22px 22px; cursor: grab; touch-action: none; }
.fc-view.panning { cursor: grabbing; }
.fc-sizer { position: relative; }
.fc-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; }
.fc-stage.ready { visibility: visible; }
.fc-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fc-edge { cursor: pointer; }
.fc-edge path { pointer-events: stroke; }
.fc-hit { stroke: transparent; stroke-width: 16; fill: none; }
.fc-edge:hover path:not(.fc-hit) { stroke-width: 4; }
.fc-card { position: absolute; width: 250px; background: #fff; border-radius: 18px; padding: 10px 14px 10px; box-shadow: 0 6px 18px rgba(31, 36, 51, 0.10); cursor: default; }
.fc-card.post { box-shadow: 0 6px 18px rgba(31, 36, 51, 0.10), 0 0 0 2px var(--ink); }
.fc-card.result { box-shadow: 0 6px 18px rgba(31, 36, 51, 0.10), 0 0 0 2px #e2b93b; }
.fc-card.moving { box-shadow: 0 14px 34px rgba(31, 36, 51, 0.22); z-index: 5; }
.fc-card.drop { box-shadow: 0 0 0 3px var(--tg-blue), 0 10px 26px rgba(62, 136, 247, 0.25); }
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: -10px -14px 2px; padding: 10px 14px 4px; cursor: move; user-select: none; }
.fc-kind { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-warn { font-size: 12px; color: var(--warn); cursor: help; }
.fc-title { display: block; width: 100%; font-family: var(--display); font-size: 19px; color: var(--ink); line-height: 1.15; margin: 0 0 2px; padding: 2px 0; border: 0; background: none; outline: none; border-radius: 6px; }
input.fc-title:focus { box-shadow: var(--in-sm); padding: 2px 6px; }
.fc-note { display: block; width: 100%; resize: none; overflow: hidden; border: 0; outline: none; background: none; color: var(--pink); font-style: italic; font-size: 13px; line-height: 1.35; padding: 2px 0; margin: 0 0 8px; font-family: inherit; border-radius: 6px; }
.fc-note::placeholder { color: #f2a3bf; }
.fc-note:focus { box-shadow: var(--in-sm); padding: 4px 6px; }
.fc-rows { display: flex; flex-direction: column; gap: 7px; }
.fc-brow { position: relative; display: flex; }
.fc-brow .kb-btn { height: 34px; font-size: 13px; }
.fc-port { position: absolute; right: -22px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2.5px solid var(--tg-blue); cursor: crosshair; touch-action: none; }
.fc-port:hover { transform: scale(1.3); }
.fc-empty { font-size: 12.5px; color: var(--muted); margin: 2px 0; }
.fc-foot { display: flex; gap: 6px; margin-top: 10px; }
.fc-mini { font-size: 12.5px; color: var(--muted); padding: 4px 8px; border-radius: 9px; }
.fc-mini:hover { color: var(--ink); background: var(--surface); }
.fc-tags { position: absolute; left: 0; top: 0; }
.fc-tag { position: absolute; transform: translate(-50%, -50%); max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--text);
  background: #fff; border: 1px solid #cfd5e2; border-radius: 10px; padding: 3px 8px; box-shadow: 0 2px 6px rgba(31, 36, 51, 0.08); }
.fc-tag.result { background: #fff6d6; border-color: #e2b93b; }
.fc-tag:hover { border-color: var(--tg-blue); }

.fc-acc { font-size: 11px; color: #6b3fd6; background: #f1ebff; border-radius: 8px; padding: 1px 7px; white-space: nowrap; margin-left: auto; }
.fc-tag.else { background: #f1ebff; border-color: #c9b5f5; }
/* go by answer: rules in the button sheet */
.rules { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.rule { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; box-shadow: var(--in-sm); }
.rule .row-flex { align-items: center; gap: 6px; }
.rule-if { font-size: 13px; color: var(--muted); min-width: 16px; text-align: center; }
/* who can open a page */
.access-box .seg { margin-bottom: 6px; }
/* choose blocks to copy */
.sel-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 0; background: var(--bg); font-weight: 600; }
.sel-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 6px 0; border-radius: 14px; background: var(--surface); box-shadow: var(--out-sm); cursor: pointer; }
.sel-row.on { box-shadow: var(--out-sm), 0 0 0 2px var(--tg-blue); }
.sel-row.inside { opacity: 0.7; }
.sel-row input { width: 18px; height: 18px; accent-color: var(--tg-blue); flex: none; }
.sel-row .ico { width: 26px; text-align: center; flex: none; }
.sel-t { display: flex; flex-direction: column; min-width: 0; }
.sel-t small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- emoji on Windows: Noto Color Emoji (SIL OFL, assets/fonts/emoji/LICENSE.txt), so flags show and
   emoji look the same everywhere. Phones and Macs keep their own emoji (they match Telegram there). Only post content
   uses it (fields, preview, the picker) — the app's own ↩ ▶ ✖ icons stay as they are. Parts load only when needed. */
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-0.woff2) format('woff2'); unicode-range: U+1f1e6-1f1ff; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-1.woff2) format('woff2'); unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-2.woff2) format('woff2'); unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f507, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9d1-1f9d2, U+1f9e1, U+1fa75-1fa77, U+1faaf; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-3.woff2) format('woff2'); unicode-range: U+200d, U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4a5, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f508-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa8e-1fa8f, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-4.woff2) format('woff2'); unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa8a, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9, U+1fadf; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-5.woff2) format('woff2'); unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-6.woff2) format('woff2'); unicode-range: U+200d, U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f344-1f37f, U+1f382, U+1f52a, U+1f7e9, U+1f7eb, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadc; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-7.woff2) format('woff2'); unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f6d8, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabf, U+1facd-1facf, U+1fae7; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-8.woff2) format('woff2'); unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+27a1, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f430, U+1f466-1f469, U+1f46b-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa70, U+1fa82, U+1fac3-1fac5, U+1fac8, U+1faef; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-9.woff2) format('woff2'); unicode-range: U+200d, U+2194-2195, U+2603, U+261d, U+2620, U+2639-263a, U+2665, U+26a1, U+26c4, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f389-1f38a, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a2, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fac6, U+1fae0-1fae6, U+1fae8-1faea, U+1faef-1fafa; }
@font-face { font-family: "RU Emoji"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/emoji/noto-emoji-10.woff2) format('woff2'); unicode-range: U+1f6d9, U+1fa8b-1fa8d, U+1facc, U+1fadd, U+1faeb; }
html.emoji-font { --text-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "RU Emoji", sans-serif; }
html.emoji-font .bubble { font-family: -apple-system, "Segoe UI", Roboto, "RU Emoji", sans-serif; }
html.emoji-font .emoji-grid, html.emoji-font .emoji-tabs, html.emoji-font .emoji-btn, html.emoji-font .rf-emoji-alt { font-family: "RU Emoji", sans-serif; }

/* ---------- custom emoji: in text fields, the preview and the picker */
.field.rich img.rf-emoji, .bubble .content img.ce { display: inline-block; width: 1.3em; height: 1.3em; margin: 0 1px; vertical-align: -0.28em; object-fit: contain;
  border-radius: 0; box-shadow: none; max-width: none; cursor: default; }
.emoji-grid button img.ce-pick, .emoji-tabs button img.ce-pick { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; pointer-events: none; }
.emoji-tabs button.mine-tab img.ce-pick { width: 24px; height: 24px; }
.ce-mine { display: block; }
.ce-pack { margin: 4px 0 14px; }
.ce-pack-head { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; }
.ce-pack-head b { flex: 1; font-weight: 600; font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-add { padding: 10px 12px 4px; border-radius: 14px; box-shadow: var(--in-sm); margin: 2px 0 14px; }
.ce-add .hint { margin: 6px 0; }
.ce-add .row-flex { gap: 8px; align-items: center; }
.ce-add .field { flex: 1; min-width: 0; }
.warn-note { color: #a15c00; text-align: center; }

/* ---- My media: folders that open on tap, small tiles (size S/M/L), select several */
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb .ic { font-size: 22px; }
.thumb .tag, .thumb .nm, .thumb .n, .thumb .rm, .thumb .mv { z-index: 1; }
.media-lib { --tile: 64px; }
.media-lib.tile-m { --tile: 92px; }
.media-lib.tile-l { --tile: 132px; }
.media-lib.tile-s .thumb .tag { font-size: 9.5px; left: 3px; bottom: 3px; padding: 0 4px; }
.media-lib.tile-s .thumb .rm { width: 18px; height: 18px; font-size: 10px; top: 3px; right: 3px; }
.media-lib.tile-s .thumb.add { font-size: 22px; }
.ml-bar { position: sticky; top: 0; z-index: 3; background: var(--bg); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 2px 10px; }
.ml-bar .grow { flex: 1; }
.ml-bar .ml-up { cursor: pointer; display: inline-flex; align-items: center; }
.ml-size button { height: 26px; padding: 0 9px; font-size: 12px; }
.ml-sec { border-radius: 16px; box-shadow: var(--out-sm); padding: 2px 8px; margin: 0 2px 10px; }
.ml-sec.open { padding-bottom: 8px; }
.ml-sec.drop-here { box-shadow: var(--out-sm), 0 0 0 3px var(--accent); }
.ml-head { display: flex; align-items: center; gap: 4px; }
.ml-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 4px; text-align: left; color: var(--ink); font-size: 16px; }
.ml-toggle .chev-i { flex: none; }
.ml-sec:not(.open) .ml-toggle .chev-i { transform: translateY(1px) rotate(-45deg); }
.ml-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-count { flex: none; font-size: 12.5px; color: var(--muted); border-radius: 10px; padding: 2px 9px; box-shadow: var(--in-sm); }
.ml-empty { margin: 4px 4px 2px; }
.ml-selbar { display: none; }
.ml-selbar.on { position: sticky; bottom: calc(8px + var(--safe-b)); z-index: 5; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--bg); box-shadow: var(--out); }
.ml-selbar .grow { flex: 1; font-weight: 600; color: var(--ink); }
.ml-big { margin: 0 0 10px; display: grid; place-items: center; }
.ml-big img { max-width: 100%; max-height: 46vh; border-radius: 14px; display: block; }
.ml-done { position: sticky; bottom: 0; z-index: 3; background: var(--bg); padding-top: 8px; }

/* ---- reuse: "⧉ N" on a block kind in the picker, the list of blocks to copy, the new-page sheet */
.pick-wrap { position: relative; display: flex; }
.pick-wrap > .pick { flex: 1; min-width: 0; }
.reuse-badge { position: absolute; top: 6px; right: 6px; height: 24px; padding: 0 8px; border-radius: 12px; font-size: 11.5px; font-weight: 600; color: var(--ink); background: var(--bg); box-shadow: var(--out-sm); }
.reuse-badge:active { box-shadow: var(--in-sm); }
.picker-hint { margin: 12px 4px 0; }
.reuse-list { display: flex; flex-direction: column; gap: 10px; }
.reuse-row { text-align: left; border-radius: 14px; padding: 10px 12px; box-shadow: var(--out-sm); display: flex; flex-direction: column; gap: 6px; color: var(--text); min-width: 0; }
.reuse-row:active { box-shadow: var(--in-sm); }
.rr-src { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-txt { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.peek-tbl table { border-collapse: collapse; font-size: 12px; width: 100%; table-layout: fixed; }
.peek-tbl td { border: 1px solid var(--line); padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-tbl tr.hdr td { font-weight: 700; color: var(--ink); }
.peek-tbl small, .peek-pics small { color: var(--muted); font-size: 11.5px; }
.peek-pics { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.peek-pics .pp { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--surface2); display: grid; place-items: center; font-size: 18px; }
.peek-pics .pp img { width: 100%; height: 100%; object-fit: cover; }
.peek-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.peek-btns span { font-size: 12px; border-radius: 8px; padding: 3px 8px; box-shadow: var(--in-sm); }
.peek-code { margin: 0; font-size: 11.5px; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow: hidden; color: var(--text); }
.opts-sub { font-size: 12.5px; color: var(--muted); margin: 8px 4px 0; }